style : MyEventCard 테두리 스타일 추가

Space-Club · Oct 27, 2023 · 9823552 · 9823552
1 parent c68e844
commit 9823552
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git a/src/components/common/MyEventCard/MyEventCard.style.ts b/src/components/common/MyEventCard/MyEventCard.style.ts
@@ -1,10 +1,15 @@
+import Theme from '@/styles/Theme';
 import styled from '@emotion/styled';
 
 const MyEventCardContainer = styled.div`
-  width: 100%;
+  width: 80%;
   min-width: 30rem;
   display: flex;
   justify-content: space-between;
+  border: 0.1rem solid transparent;
+  border-image: ${Theme.color.eventCardBackground};
+  border-image-slice: 1;
+  padding: 1rem;
 `;
 
 const EventLeftSection = styled.div`

diff --git a/src/styles/Theme.ts b/src/styles/Theme.ts
@@ -9,11 +9,12 @@ const color = {
   indigo: '#003949',
   logoTextColor: '#fafafa',
   lineColor: '#261359',
-  confirmedBackground: 'linear-gradient(135deg, #0070F3 0%, rgba(248, 28, 146, 0.60) 100%))',
+  eventCardBackground: 'linear-gradient(135deg, #0070F3 0%, #F81C92 100%)',
+  confirmedBackground: 'linear-gradient(135deg, #0070F3 0%, #F81C92 100%)',
   pendingBackground: 'linear-gradient(135deg, #4DF171 0%, #FFE91F 100%)',
-  paymentPendingBackground: 'linear-gradient(135deg, #FF9431 0%, #FEE793  100%)',
-  cancelledBackground: 'linear-gradient(135deg, #FD4F4F  0%, #FFF   100%)',
-  cancelRequestPendingBackground: 'linear-gradient(135deg, #FF90E7   0%, #E5D9FF    100%)',
+  paymentPendingBackground: 'linear-gradient(135deg, #FF9431 0%, #FEE793 100%)',
+  cancelledBackground: 'linear-gradient(135deg, #FD4F4F  0%, #FFF 100%)',
+  cancelRequestPendingBackground: 'linear-gradient(135deg, #FF90E7 0%, #E5D9FF 100%)',
 } as const;
 
 const componentStyle = {