From 74f754b13e1532f486b3a2d2234327e5fcbfc056 Mon Sep 17 00:00:00 2001 From: wooooooood <13pft13@gmail.com> Date: Sun, 20 Aug 2023 06:20:16 +0900 Subject: [PATCH] feat: apply design updates --- src/features/login/style/index.scss | 1 + .../components/SubmitForm/DailyWord.tsx | 6 ++- src/features/setting/style/index.scss | 52 ++++++++++++------- 3 files changed, 39 insertions(+), 20 deletions(-) diff --git a/src/features/login/style/index.scss b/src/features/login/style/index.scss index 8b5b6ee..583f01f 100644 --- a/src/features/login/style/index.scss +++ b/src/features/login/style/index.scss @@ -49,6 +49,7 @@ width: 100%; height: 48px; margin: 40px 0 26px; + border-radius: 4px; } input[type='submit']:hover { cursor: pointer; diff --git a/src/features/setting/components/SubmitForm/DailyWord.tsx b/src/features/setting/components/SubmitForm/DailyWord.tsx index cf61dc9..51b68c8 100644 --- a/src/features/setting/components/SubmitForm/DailyWord.tsx +++ b/src/features/setting/components/SubmitForm/DailyWord.tsx @@ -13,7 +13,11 @@ const DailyWord: FunctionComponent = ({ register }) => { return (
{wordTitleText} - +
); }; diff --git a/src/features/setting/style/index.scss b/src/features/setting/style/index.scss index 40cc527..a3cb004 100644 --- a/src/features/setting/style/index.scss +++ b/src/features/setting/style/index.scss @@ -2,7 +2,7 @@ &-container { width: 100%; height: calc(100% - 159px); - background: #F7F7F7; + background: #f7f7f7; } &-preview-container { @@ -11,7 +11,7 @@ flex-direction: column; align-items: center; align-self: stretch; - background-color: #FFFFFF; + background-color: #ffffff; } &-preview-title-text { @@ -27,7 +27,7 @@ &-preview-sub-text { margin-bottom: 16px; - color: #9797AE; + color: #9797ae; font-size: 14px; font-style: normal; font-weight: 400; @@ -44,8 +44,13 @@ align-self: stretch; border: 1px solid #191919; color: #191919; - background-color: #FFFFFF; + background-color: #ffffff; cursor: pointer; + border-radius: 4px; + } + + &-preview-btn:disabled { + opacity: 0.3; } &-word-container { @@ -57,25 +62,34 @@ flex-direction: column; align-items: flex-start; align-self: stretch; - background: #FFFFFF; + background: #ffffff; } &-word-title { - color: #000; - font-size: 14px; + color: #191919; + font-size: 16px; font-style: normal; - font-weight: 500; - line-height: 24px; /* 171.429% */ + font-weight: 700; + line-height: 24px; /* 150% */ } &-word-input { display: flex; align-items: center; align-self: stretch; - border: 1px solid #191919; + border-radius: 4px; + border: 1px solid #e3e3e3; + background: #f7f7f7; + padding: 8px 14px; height: 40px; } + &-word-input::placeholder { + color: #b2b2c8; + font-size: 16px; + font-weight: 400; + } + &-sticker-container { display: flex; padding: 16px; @@ -84,19 +98,19 @@ gap: 8px; flex: 1 0 0; align-self: stretch; - background: #FFF; + background: #fff; } &-sticker-title { - color: #000; + color: #191919; font-size: 16px; font-style: normal; - font-weight: 500; + font-weight: 700; line-height: 24px; /* 150% */ margin-bottom: 8px; } - &-sticker-box { + &-sticker-box { display: flex; height: 100%; width: 100%; @@ -105,7 +119,7 @@ align-content: flex-start; gap: 8px; flex-wrap: wrap; - + input { appearance: none; -webkit-appearance: none; @@ -113,12 +127,12 @@ input:checked { outline: 1px solid #000; } - } + } - &-sticker-width { + &-sticker-width { width: 48%; img { width: 100%; } - } -} \ No newline at end of file + } +}