Login UI

src/components/input/InputWidget.tsx

@@ -28,7 +28,7 @@ class InputWidget extends Component<Props, OwnState> {
             { this.props.icon && <IonIcon className={styles.leftIcon} icon={this.props.icon}></IonIcon> }
             
             { this.props.type === 'TEXT' && <input type='text' placeholder={this.props.placeholder} /> }
-            { this.props.type === 'PASSWORD' && <input type='password' placeholder={this.props.placeholder} /> }
+            { this.props.type === 'PASSWORD' && <input type={this.state.showPassword ? 'text' : 'password'} placeholder={this.props.placeholder} /> }
 
             { this.props.type === 'PASSWORD' && 
                 <IonButton className={styles.eyeButton} onClick={e => this.setState({ showPassword: !this.state.showPassword })}>

src/pages/login/Login.module.scss

@@ -9,7 +9,6 @@
     z-index: 1;
     box-shadow: 0px 0px 10px 5px var(--black-rock);
     animation: riseDown 1s forwards;
-    animation-delay: 1s;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -36,7 +35,6 @@
         width: 100%;
         margin: 10px 0;
         animation: fadeIn 1s forwards;
-        animation-delay: 1.5s;
         opacity: 0;
         transform: translateY(10vh);
     }
@@ -60,10 +58,58 @@
 .inputForm {
     width: 80%;
     margin: 40px auto 0;
+    opacity: 0;
+    transform: translateY(10vh);
+    position: relative;
+    animation: fadeIn 1s forwards;
+
+    .input {
+        margin: 20px 0;
+    }
+
+    .actionLink {
+        text-align: right;
+        margin: 20px 0;
+
+        a {
+            font-size: 14px;
+            color: var(--rock);
+            text-decoration: none;
+        }
+    }
+
+    .actionButtonsHolder {
+        width: 60%;
+        margin: 20px auto;
+
+        .actionButton {
+            height: 50px;
+            text-transform: none;
+            font-size: 16px;            
+            --border-radius: 30px;
+            --border-color: var(--shamrock);
+            font-weight: 500;
+
+            &:nth-child(1) {
+                --background: var(--shamrock);            
+            }
+        }
+    }    
 }
 
-.input {
-    margin: 20px 0;
+.navigationLink {
+    position: absolute;
+    left: 0;
+    width: 100%;
+    bottom: 10px;
+    text-align: center;
+    font-size: 14px;
+    color: var(--rock);    
+
+    a {
+        color: var(--shamrock);
+        text-decoration: none;
+    }
 }
 
 @keyframes fadeIn {

src/pages/login/Login.tsx

@@ -35,8 +35,16 @@ class LoginPage extends Component<Props, OwnState> {
                     </div>
                     <div className={styles.input}>
                         <InputWidget type={'PASSWORD'} icon={lockOpenOutline} placeholder={'Password'} />
+                    </div>
+
+                    <div className={ styles.actionLink }> <a> Forgot Password? </a> </div>
+
+                    <div className={styles.actionButtonsHolder}>
+                        <IonButton className={styles.actionButton} expand="block"> Login </IonButton>
                     </div>                    
                 </section>
+
+                <div className={ styles.navigationLink }> Don't have an account? <a> Sign up </a> </div>
             </IonContent>
         </IonPage>
     };