Merge pull request #9 from jdiazgon/improving-UI

Improving User Interface

Author: cfontsap

src/pages/login/login.html

@@ -2,22 +2,34 @@
   <layoutheader Title="Login"></layoutheader>
 </ion-header>
 
-<ion-content >
-  <form  (ngSubmit)="loginForm()" >
-    <ion-item>
-      <ion-label>{{'login.user'| translate}}</ion-label>
-      <ion-input type="text" [(ngModel)]="user.username" name="name"></ion-input>
-    </ion-item>
-    <ion-item>
-      <ion-label>{{'login.password'| translate}}</ion-label>
-      <ion-input type="password" [(ngModel)]="user.password" name="password"></ion-input>
-    </ion-item>
-    
-  </form>
+<ion-content class="login-content" padding>
+  <ion-row class="logo-row">
+           <ion-col width-400>
+        <img src="assets/imgs/Capgemini.png"/>
+      </ion-col>      
+  </ion-row>
+  <div class="login-box">
+    <form  (ngSubmit)="loginForm()" >
+      <ion-row>
+        <ion-col>
+          <ion-list inset>
+            <ion-item class="form" >
+              <ion-input type="text" [(ngModel)]="user.username" name="name" placeholder="{{'login.user'| translate}}" class="label" ></ion-input>
+            </ion-item>
+            <ion-item class="form">
+              <ion-input type="password" [(ngModel)]="user.password" name="password" placeholder="{{'login.password'| translate}}"></ion-input>
+            </ion-item>
+          </ion-list>
+        </ion-col>
+      </ion-row>
 
+      <ion-row>
+          <ion-col class="signup-col">            
+            <button class="submit-btn" ion-button full (click)="loginForm()">
+                {{'buttons.login'| translate}}
+            </button>
+          </ion-col>
+        </ion-row>
+    </form>
+  </div>
 </ion-content>
-<ion-footer>
-  <button ion-button (click)="loginForm()" block>
-    {{'buttons.login'| translate}}
-  </button>
-</ion-footer>

src/pages/login/login.scss

@@ -1,3 +1,50 @@
-page-home {
+.login-content {
+    background: #ffffff;
+ 
+    .logo-row {
+        padding-top: 5%;
+        padding-bottom: 2%;
+    }
+ 
+    .login-box {
+        background: #ffffff;
+        padding: 15% 3% 5% 3%;
+        margin: 1% 2% 0% 2%;
+        -webkit-box-shadow: 2px 2px 60px rgba(51, 51, 51, 0.1);
+        box-shadow: 2px 2px 60px rgba(51, 51, 51, 0.1);
+    }
+ 
+    .form {
+        font-size: 1.3em;
+        margin-bottom: 15%;
+    }
 
+    .label-md,.login {
+        color: #999;
+        margin-top: -15%;
+    }
+
+    .list-md .item-input:last-child {
+        border-bottom: 1px solid color($colors, primary, base)!important;
+    }
+    
+    .signup-col {
+       margin: 0px 16px 0px 16px;
+       padding-bottom: 20px;
+    }    
+ 
+    .submit-btn {
+        background: #019fff;
+        border-radius: 30px !important;
+        padding: 10%;
+        margin-top: 5%;
+        -webkit-box-shadow: 2px 2px 60px rgba(51, 51, 51, 0.1);
+        box-shadow: 2px 2px 60px rgba(0, 147, 216, 0.35);
+    }
+ 
+    .register-btn {
+       color: #ffffff;
+       font-size: 0.8em;
+    }
 }
+