Merge pull request #23 from junction-asia-2023/feat/dsign

feat: apply design updates
junction-asia-2023 · Aug 19, 2023 · 2b722dd · 2b722dd
2 parents b4608aa + 74f754b
commit 2b722dd
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 20 deletions.
diff --git 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
@@ -13,7 +13,11 @@ const DailyWord: FunctionComponent<DailyWordProps> = ({ register }) => {
   return (
     <div className="setting-word-container">
       <span className="setting-word-title">{wordTitleText}</span>
-      <input className="setting-word-input" {...register('comment')} />
+      <input
+        className="setting-word-input"
+        {...register('comment')}
+        placeholder="Please write a word to describe you."
+      />
     </div>
   );
 };

diff --git 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,20 +119,20 @@
     align-content: flex-start;
     gap: 8px;
     flex-wrap: wrap;
-    
+
     input {
       appearance: none;
       -webkit-appearance: none;
     }
     input:checked {
       outline: 1px solid #000;
     }
-   }
+  }
 
-   &-sticker-width {
+  &-sticker-width {
     width: 48%;
     img {
       width: 100%;
     }
-   }
-}
+  }
+}