input widget UI + style guide integration

src/components/ExploreContainer.css

@@ -1,24 +0,0 @@
-.container {
-  text-align: center;
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.container strong {
-  font-size: 20px;
-  line-height: 26px;
-}
-
-.container p {
-  font-size: 16px;
-  line-height: 22px;
-  color: #8c8c8c;
-  margin: 0;
-}
-
-.container a {
-  text-decoration: none;
-}

src/components/ExploreContainer.tsx

@@ -1,14 +0,0 @@
-import './ExploreContainer.css';
-
-interface ContainerProps { }
-
-const ExploreContainer: React.FC<ContainerProps> = () => {
-  return (
-    <div className="container">
-      <strong>Ready to create an app?</strong>
-      <p>Start with Ionic <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
-    </div>
-  );
-};
-
-export default ExploreContainer;

src/components/input/InputWidget.module.scss

@@ -0,0 +1,34 @@
+.inputHolder {
+    background-color: white;
+    box-shadow: 0px 0px 5px inset var(--grey-rock);
+    border-radius: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    height: 50px;
+    padding: 0px 20px;
+
+    .leftIcon {
+        font-size: 16px;
+        color: var(--grey-rock);
+    }
+
+    input {
+        background-color: transparent;
+        border: none;
+        font-size: 15px;
+        outline: none;
+        padding: 0 10px;
+        width: calc(100% - 60px);
+        color: var(--black-rock);
+    }
+
+    .eyeButton {        
+        margin: 0;
+        --color: var(--grey-rock);
+        --background: transparent;
+        --box-shadow: none;
+        margin-left: auto;
+        font-size: 16px;
+    }
+}

src/components/input/InputWidget.tsx

@@ -0,0 +1,43 @@
+import { IonButton, IonIcon } from '@ionic/react';
+import { eyeOutline, eyeOffOutline } from 'ionicons/icons';
+import { Component } from 'react';
+import styles from './InputWidget.module.scss';
+
+type Props = {
+    icon?: string,
+    placeholder?: string,
+    type: 'TEXT' | 'PASSWORD';
+};
+
+type OwnState = {
+    showPassword: boolean,
+};
+
+class InputWidget extends Component<Props, OwnState> {
+    constructor(
+        props: Props
+    ) {
+        super(props);
+        this.state = {
+            showPassword: false
+        };
+    }
+
+    render() {
+        return <section className={styles.inputHolder}>
+            { 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' && 
+                <IonButton className={styles.eyeButton} onClick={e => this.setState({ showPassword: !this.state.showPassword })}>
+                    { this.state.showPassword && <IonIcon icon={eyeOffOutline}></IonIcon> }
+                    { !this.state.showPassword && <IonIcon icon={eyeOutline}></IonIcon> }
+                </IonButton>
+            }
+        </section>
+    };
+};
+
+export default InputWidget;

src/pages/Home.tsx

@@ -1,25 +0,0 @@
-import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
-import ExploreContainer from '../components/ExploreContainer';
-import './Home.css';
-
-const Home: React.FC = () => {
-  return (
-    <IonPage>
-      <IonHeader>
-        <IonToolbar>
-          <IonTitle>Blank</IonTitle>
-        </IonToolbar>
-      </IonHeader>
-      <IonContent fullscreen>
-        <IonHeader collapse="condense">
-          <IonToolbar>
-            <IonTitle size="large">Blank</IonTitle>
-          </IonToolbar>
-        </IonHeader>
-        <ExploreContainer />
-      </IonContent>
-    </IonPage>
-  );
-};
-
-export default Home;

src/pages/login/Login.module.scss

@@ -0,0 +1,79 @@
+.upfold {
+    background-color: var(--charcoal);
+    height: auto;
+    transform: translateY(-50vh);
+    width: 100%;
+    border-bottom-right-radius: 30px;
+    border-bottom-left-radius: 30px;
+    position: relative;
+    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;
+
+    .container {
+        padding: 20px 5%;
+        text-align: center;                
+    }
+
+    h2 {
+        font-size: 26px;
+        color: white;
+        margin: 10px 0;
+    }
+
+    p {
+        margin: 10px 0;
+        font-size: 14px;
+        color: var(--grey-rock);
+    }
+
+    figure {
+        display: block;
+        width: 100%;
+        margin: 10px 0;
+        animation: fadeIn 1s forwards;
+        animation-delay: 1.5s;
+        opacity: 0;
+        transform: translateY(10vh);
+    }
+
+    img {
+        margin: 0 auto;
+        width: 50%;
+        display: block;
+    }
+
+    @keyframes riseDown {
+        from {
+            transform: translateY(-50vh);
+        }
+        to {
+            transform: translateY(0vh);
+        }
+    }
+}
+
+.inputForm {
+    width: 80%;
+    margin: 40px auto 0;
+}
+
+.input {
+    margin: 20px 0;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(10vh);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0vh);
+    }
+}

src/pages/login/Login.tsx

@@ -1,5 +1,7 @@
 import { IonContent, IonPage, IonButton } from '@ionic/react';
+import { personOutline, lockOpenOutline } from 'ionicons/icons';
 import { Component } from 'react';
+import InputWidget from '../../components/input/InputWidget';
 import styles from './Login.module.scss';
 
 type Props = { };
@@ -17,7 +19,24 @@ class LoginPage extends Component<Props, OwnState> {
     render() {
         return <IonPage>
             <IonContent fullscreen>
-                Login Page
+                <section className={styles.upfold}>
+                    <div className={styles.container}>
+                        <figure>
+                            <img src="assets/images/welcome/upfold.svg" alt="upfold image"/>
+                        </figure>
+                        <h2> Welcome Back! </h2>
+                        <p> Enter your email-id &amp; password </p>
+                    </div>
+                </section>
+
+                <section className={styles.inputForm}>
+                    <div className={styles.input}>
+                        <InputWidget type={'TEXT'} icon={personOutline} placeholder={'Email'} />
+                    </div>
+                    <div className={styles.input}>
+                        <InputWidget type={'PASSWORD'} icon={lockOpenOutline} placeholder={'Password'} />
+                    </div>                    
+                </section>
             </IonContent>
         </IonPage>
     };

src/pages/onboarding/Welcome.module.scss

@@ -1,12 +1,12 @@
 .upfold {
-    background-color: var(--black);
+    background-color: var(--charcoal);
     height: 95vh;
     width: 100%;
     border-bottom-right-radius: 30px;
     border-bottom-left-radius: 30px;
     position: absolute;
     z-index: 1;
-    box-shadow: 0px 0px 10px 5px rgba(var(--black-rgb), 0.5);
+    box-shadow: 0px 0px 10px 5px var(--black-rock);
     animation: riseup 1s forwards;
     animation-delay: 1s;
     display: flex;
@@ -34,20 +34,20 @@
             height: 95vh;
         }
         to {
-            height: 50vh;
+            height: 45vh;
         }
     }
 }
 
 .content {
-    margin-top: 50vh;
-    height: 50vh;
+    margin-top: 45vh;
+    height: 55vh;
     font-weight: 500;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
-    color: var(--black);
+    color: var(--charcoal);
     padding: 5%;
 
     animation: fadeIn 1s forwards;
@@ -61,9 +61,10 @@
     }
 
     p {
-        font-size: 15px;
-        color: rgba(var(--black-rgb), 0.5);
+        font-size: 16px;
+        color: var(--grey-rock);
         margin: 20px 0;
+        font-weight: 300;
     }
 
     .actionButtonsHolder {
@@ -75,16 +76,16 @@
             text-transform: none;
             font-size: 16px;            
             --border-radius: 30px;
-            --border-color: var(--teal);
+            --border-color: var(--shamrock);
             font-weight: 500;
 
             &:nth-child(1) {
-                --background: var(--teal);            
+                --background: var(--shamrock);            
             }
 
             &:nth-child(2) {
                 margin-top: 20px;
-                --color: var(--teal);
+                --color: var(--shamrock);
             }
         }
     }    

src/pages/onboarding/Welcome.tsx

@@ -28,8 +28,8 @@ class WelcomePage extends Component<Props, OwnState> {
                     <div className={styles.container}>
                         <h2> Let's Get Started </h2>
                         <p>
-                            Welcome to <strong> Workex </strong>, we're more super excited to have you onboard!
-                            You can always show your love by rating us a 5 Star on Play Store!
+                            Welcome to <strong> WorkX </strong> <br/>
+                            Exclusive, Extreme &amp; Exuberant... 
                         </p>
 
                         <div className={styles.actionButtonsHolder}>

src/theme/variables.css

@@ -9,6 +9,13 @@
     padding: 0;
 }
 
+ion-button {
+    --padding-start: 0;
+    --padding-bottom: 0;
+    --padding-top: 0;
+    --padding-end: 0;
+}
+
 h1, h2, h3, h4, h5, h6 {
     font-weight: 700;
 }
@@ -90,11 +97,29 @@ http://ionicframework.com/docs/theming/ */
   --ion-color-light-shade: #d7d8da;
   --ion-color-light-tint: #f5f6f9;
 
-
+  /* Temp Colors */
   --teal: #58c48d;
   --teal-rgb: 88, 196, 141;
   --black: #222222;
   --black-rgb: 34, 34, 34;
+
+  /* Style Guide */
+  --apricot: #ea7e7d;
+  --desert-sun: #dba81f;
+  --dusk: #f7a057;
+  --rasna: #f8c657;
+  --shamrock: #2cc38c;
+  --downy: #51ccc7;
+  --gin: #e2efe5;
+  --dark-charcoal: #1c1c1c;
+  --charcoal: #212121;
+  --black-rock: #3b3b3b;
+  --rock: #575757;
+  --grey-rock: #808080;
+  --ash: #c0c0c0;
+  --ash-dust: #e5e5e5;
+  --ivory: #f4f4f4;
+  --pearl: #f7f7f7;
 }
 
 ion-content {