style: 코치마크 디자인 수정

[#304]
boostcampwm2023 · Feb 3, 2024 · 022934b · 022934b
1 parent fc4ee7a
commit 022934b
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 8 deletions.
diff --git a/packages/frontend/src/components/coachmark/CoachTooltip.css.ts b/packages/frontend/src/components/coachmark/CoachTooltip.css.ts
@@ -11,15 +11,15 @@ export const container = style([
   borderRadius,
   {
     position: "relative",
-    width: 398,
+    width: 350,
     padding: 16,
     backgroundColor: color.$semantic.bgWhite,
   },
 ]);
 
 export const header = style([flexAlignCenter, { gap: 5, marginBottom: 12 }]);
 
-export const title = style([typography.$semantic.title3Bold]);
+export const title = style([typography.$semantic.title4Bold]);
 
 export const stepProgress = style([typography.$semantic.caption2Regular]);
 
@@ -32,7 +32,7 @@ export const closeButton = style({
 });
 
 export const content = style([
-  typography.$semantic.title3Regular,
+  typography.$semantic.title4Regular,
   { height: 53 },
 ]);
 
@@ -42,7 +42,7 @@ export const footer = style([
 ]);
 
 const actionBaseButton = style([
-  typography.$semantic.body2Regular,
+  typography.$semantic.caption1Regular,
   { border: 0 },
 ]);
 

diff --git a/packages/frontend/src/design-system/components/common/Header/Header.css.ts b/packages/frontend/src/design-system/components/common/Header/Header.css.ts
@@ -17,13 +17,21 @@ export const container = style([
   },
 ]);
 
-export const actionGroup = style([flexAlignCenter, { gap: 4 }]);
+export const actionGroup = style([flexAlignCenter, { gap: 10 }]);
 
 export const tutorialButton = style([
   typography.$semantic.body2Regular,
+  flexAlignCenter,
+  border.all,
   {
-    border: 0,
-    backgroundColor: "transparent",
+    backgroundColor: color.$scale.grey00,
+    borderRadius: "8px",
+    padding: 15,
+    height: 36,
     color: color.$scale.grey700,
+    transition: "border 0.2s ease",
+    ":hover": {
+      border: `1px solid ${color.$scale.grey600}`,
+    },
   },
 ]);
diff --git a/packages/frontend/src/design-system/tokens/layout.css.ts b/packages/frontend/src/design-system/tokens/layout.css.ts
@@ -20,7 +20,7 @@ export const base = style([
   flex,
   widthMax,
   {
-    height: "100vh",
+    height: `calc(100vh - ${headerHeight})`,
     margin: "0 auto",
   },
 ]);