Merge pull request #14 from junction-asia-2023/feat/login-update

feat(login): update design
junction-asia-2023 · Aug 19, 2023 · 2c544fb · 2c544fb
2 parents 3466017 + 708e972
commit 2c544fb
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 8 deletions.
diff --git a/src/features/login/Container.tsx b/src/features/login/Container.tsx
@@ -1,7 +1,7 @@
 import { FunctionComponent } from 'react';
 
 import useLogin from './hooks/useLogin';
-import logo from './logo.png';
+import logo from './logo.svg';
 import './style/index.scss';
 
 const LoginContainer: FunctionComponent = () => {
@@ -15,7 +15,7 @@ const LoginContainer: FunctionComponent = () => {
           <label>Email</label>
           <input
             type="text"
-            placeholder="Insert your email"
+            placeholder="Please enter your email"
             {...register('email', { required: true })}
             area-invalid={errors.email ? 'true' : 'false'}
           />
@@ -25,7 +25,7 @@ const LoginContainer: FunctionComponent = () => {
           <label>Password</label>
           <input
             type="password"
-            placeholder="Insert your password"
+            placeholder="Please enter your password"
             {...register('password', { required: true })}
             aria-invalid={errors.password ? 'true' : 'false'}
           />

diff --git a/src/features/login/logo.png b/src/features/login/logo.png
diff --git a/src/features/login/logo.svg b/src/features/login/logo.svg
diff --git a/src/features/login/style/index.scss b/src/features/login/style/index.scss
@@ -21,12 +21,20 @@
   }
 
   input {
-    border: 1px solid black;
-    padding: 8px 10px;
+    border-radius: 4px;
+    border: 1px solid #e3e3e3;
+    background: #f7f7f7;
+    padding: 14px;
     width: 100%;
     box-sizing: border-box;
   }
 
+  input::placeholder {
+    color: #b2b2c8;
+    font-size: 16px;
+    font-weight: 400;
+  }
+
   .input-group {
     margin: 10px 0;
   }
@@ -40,7 +48,7 @@
     padding: 6px 14px;
     width: 100%;
     height: 48px;
-    margin: 20px 0;
+    margin: 40px 0 26px;
   }
   input[type='submit']:hover {
     cursor: pointer;
@@ -54,7 +62,7 @@
   }
 
   a {
-    color: #9797ae;
+    color: #1d1d6b;
     text-decoration: underline;
     font-size: 14px;
     font-weight: 500;
@@ -64,6 +72,6 @@
     display: block;
     font-size: 16px;
     font-weight: 500;
-    line-height: 24px;
+    line-height: 28px;
   }
 }