Partial commit

src/components/input/InputWidget.tsx

@@ -6,7 +6,7 @@ import styles from './InputWidget.module.scss';
 type Props = {
     icon?: string,
     placeholder?: string,
-    type: 'TEXT' | 'PASSWORD';
+    type: 'TEXT' | 'PASSWORD' | 'PHONE';
 };
 
 type OwnState = {
@@ -30,6 +30,8 @@ class InputWidget extends Component<Props, OwnState> {
             { this.props.type === 'TEXT' && <input type='text' placeholder={this.props.placeholder} /> }
             { this.props.type === 'PASSWORD' && <input type={this.state.showPassword ? 'text' : 'password'} placeholder={this.props.placeholder} /> }
 
+            { this.props.type === 'PHONE' && <input type='tel' placeholder={this.props.placeholder} /> }
+
             { this.props.type === 'PASSWORD' && 
                 <IonButton className={styles.eyeButton} onClick={e => this.setState({ showPassword: !this.state.showPassword })}>
                     { this.state.showPassword && <IonIcon icon={eyeOffOutline}></IonIcon> }

src/pages/signup/Signup.module.scss

@@ -66,6 +66,16 @@
     position: relative;
     animation: fadeIn 1s forwards;
 
+    .separator {
+        display: block;
+        width: 100%;
+        height: 0px;
+        overflow: visible;
+        margin: 40px 0;
+        border-bottom: 1px dashed var(--ash);
+        border-width: 2px;
+    }
+
     .input {
         margin: 20px 0;
     }

src/pages/signup/Signup.tsx

@@ -1,5 +1,5 @@
 import { IonContent, IonPage, IonButton } from '@ionic/react';
-import { personOutline, lockOpenOutline } from 'ionicons/icons';
+import { personOutline, lockOpenOutline, mailOutline, phonePortraitOutline } from 'ionicons/icons';
 import { Component } from 'react';
 import InputWidget from '../../components/input/InputWidget';
 import styles from './Signup.module.scss';
@@ -31,15 +31,28 @@ class SignupPage extends Component<Props, OwnState> {
 
                 <section className={styles.inputForm}>
                     <div className={styles.input}>
-                        <InputWidget type={'TEXT'} icon={personOutline} placeholder={'Email'} />
+                        <InputWidget type={'TEXT'} icon={personOutline} placeholder={'Full Name'} />
                     </div>
+                    <div className={styles.input}>
+                        <InputWidget type={'TEXT'} icon={mailOutline} placeholder={'Email'} />
+                    </div>
+                    <div className={styles.input}>
+                        <InputWidget type={'PHONE'} icon={phonePortraitOutline} placeholder={'Phone'} />
+                    </div>
+                    
+                    <section className={styles.separator}></section>
+
                     <div className={styles.input}>
                         <InputWidget type={'PASSWORD'} icon={lockOpenOutline} placeholder={'Password'} />
                     </div>
 
+                    <div className={styles.input}>
+                        <InputWidget type={'PASSWORD'} icon={lockOpenOutline} placeholder={'Confirm Password'} />
+                    </div>
+
                     <div className={styles.actionButtonsHolder}>
                         <IonButton className={styles.actionButton} expand="block"> Login </IonButton>
-                    </div>                    
+                    </div>                                      
                 </section>
 
                 <div className={ styles.navigationLink }> Already have an account? <a> Login </a> </div>