style: 폴더 영역 클릭,호버,디폴트 상태별 스타일 수정

YAPP-Github · Feb 22, 2024 · 9ac5d07 · 9ac5d07
1 parent cf568a2
commit 9ac5d07
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 7 deletions.
diff --git a/src/domain/저장하는/components/ArchiveFolder/style.css.ts b/src/domain/저장하는/components/ArchiveFolder/style.css.ts
@@ -16,23 +16,27 @@ export const folder = style({
 
 export const userFolder = recipe({
   base: [
-    sprinkles({ typography: '16/Title/Bold' }),
+    sprinkles({ typography: '16/Title/Medium' }),
     utils.flexAlignCenter,
     {
       gap: '5px',
-      padding: '8px 20px',
+      padding: '14px 20px',
       borderRadius: '8px',
       transition: 'all 100ms ease-in-out',
 
       ':hover': {
+        fontWeight: 700,
+        color: COLORS['Grey/900'],
         backgroundColor: COLORS['Grey/100'],
       },
     },
   ],
   variants: {
     isActive: {
       true: {
-        backgroundColor: COLORS['Grey/100'],
+        fontWeight: 700,
+        color: COLORS['Blue/Default'],
+        backgroundColor: COLORS['Grey/White'],
       },
       false: {
         backgroundColor: COLORS['Grey/White'],
@@ -61,7 +65,12 @@ export const createFolderButton = style([
   {
     width: '100%',
     gap: '4px',
-    padding: '8px 20px',
+    padding: '10px 20px',
+    borderRadius: '8px',
     color: COLORS['Grey/400'],
+
+    ':hover': {
+      backgroundColor: COLORS['Grey/100'],
+    },
   },
 ]);
diff --git a/src/domain/저장하는/components/Folder/style.css.ts b/src/domain/저장하는/components/Folder/style.css.ts
@@ -15,17 +15,21 @@ export const folderButton = recipe({
       justifyContent: 'space-between',
       borderRadius: '8px',
       transition: 'all 100ms ease-in-out',
-      paddingRight: '8px',
+      paddingRight: '12px',
 
       ':hover': {
+        fontWeight: 700,
+        color: COLORS['Grey/900'],
         backgroundColor: COLORS['Grey/100'],
       },
     },
   ],
   variants: {
     isActive: {
       true: {
-        backgroundColor: COLORS['Grey/100'],
+        fontWeight: 700,
+        color: COLORS['Blue/Default'],
+        backgroundColor: COLORS['Grey/White'],
       },
       false: {
         backgroundColor: COLORS['Grey/White'],
@@ -37,5 +41,5 @@ export const folderButton = recipe({
 export const folderName = style({
   display: 'inline-block',
   width: '100%',
-  padding: '11px 0 11px 20px',
+  padding: '14px 0 14px 20px',
 });