some color work

zlg/package-lock.json

       "resolved": "https://registry.npmjs.org/@types/localforage/-/localforage-0.0.30.tgz",
       "integrity": "sha1-PWCmv23aOOP4pGlhFZg3nx9klQk="
     },
+    "@types/node": {
+      "version": "10.5.5",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-10.5.5.tgz",
+      "integrity": "sha512-6Qnb1gXbp3g1JX9QVJj3A6ORzc9XCyhokxUKaoonHgNXcQhmk8adhotxfkeK8El9TnFeUuH72yI6jQ5nDJKS6w=="
+    },
     "@types/socket.io-client": {
       "version": "1.4.32",
       "resolved": "https://registry.npmjs.org/@types/socket.io-client/-/socket.io-client-1.4.32.tgz",
       "resolved": "https://registry.npmjs.org/@types/sockjs-client/-/sockjs-client-1.1.0.tgz",
       "integrity": "sha512-F3gD7AakaPGzzdTmvN8HYxlNL+vTnMykYSUoukRTRGUntH4lwjxG5wx3ZwdYBTA3sTo4duxHY+rRZMbIEBxhRQ=="
     },
+    "@types/stompjs": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/@types/stompjs/-/stompjs-2.3.3.tgz",
+      "integrity": "sha512-p6+AQ+YS9P0bIYgfyDxKBIoDTFnFPpARSyDdHX+bbpNnBsgg3/fKwK6jwROur4CHiyjgAvl5wcIxz2rOvOl7rQ==",
+      "requires": {
+        "@types/node": "*"
+      }
+    },
     "abbrev": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
       }
     },
     "url-parse": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.4.1.tgz",
-      "integrity": "sha512-x95Td74QcvICAA0+qERaVkRpTGKyBHHYdwL2LXZm5t/gBtCB9KQSO/0zQgSTYEV1p0WcvSg79TLNPSvd5IDJMQ==",
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.4.3.tgz",
+      "integrity": "sha512-rh+KuAW36YKo0vClhQzLLveoj8FwPJNu65xLb7Mrt+eZht0IPT0IXgSv8gcMegZ6NvjJUALf6Mf25POlMwD1Fw==",
       "requires": {
         "querystringify": "^2.0.0",
         "requires-port": "^1.0.0"

zlg/package.json

     "@ionic-native/status-bar": "~4.10.0",
     "@ionic/storage": "2.1.3",
     "@types/sockjs-client": "^1.1.0",
+    "@types/stompjs": "^2.3.3",
     "ionic-angular": "3.9.2",
     "ionicons": "3.0.0",
     "ng-socket-io": "^0.2.4",

zlg/src/pages/login/login.html

-<ion-content padding>
-  <ion-list>
+
+<ion-header>
+    <ion-navbar>
+      <ion-title color="white">Login to the Vault</ion-title>
+    </ion-navbar>
+  </ion-header>
   
-    <ion-item>
-      <ion-label fixed>Username</ion-label>
-      <ion-input type="text" value=""></ion-input>
-    </ion-item>
   
-    <ion-item>
-      <ion-label fixed>Password</ion-label>
-      <ion-input type="password"></ion-input>
-    </ion-item>
+  <ion-content class="login-content" padding style="background: url(../assets/img/welcome.png) no-repeat center;background-size:cover">
+    <div class="login-box">
   
-    <button ion-button block color="primary" (click)="login()">Login</button>
+      <form (ngSubmit)="login()" #loginForm="ngForm">
+        <ion-row>
+          <ion-col>
+            <ion-list inset>
   
-  </ion-list>
+              <ion-item>
+                <ion-input type="text" placeholder="Username" name="username" [(ngModel)]="loginCredentials.username" required></ion-input>
+              </ion-item>
+  
+              <ion-item>
+                <ion-input type="password" placeholder="Password" name="password" [(ngModel)]="loginCredentials.password" required></ion-input>
+              </ion-item>
+  
+            </ion-list>
+          </ion-col>
+        </ion-row>
+  
+        <ion-row>
+          <ion-col class="signup-col">
+            <button ion-button class="submit-btn" style="background-color: #7D5FE7; color: white" full type="submit" [disabled]="!loginForm.form.valid">Login</button>
+          </ion-col>
+        </ion-row>
+        
+      </form>
+      <button ion-button class="signup-btn" block clear (click)="signup()">Register New Account</button>
+
+    </div>
   </ion-content>

zlg/src/pages/login/login.ts

 })
 export class Login {
 
+  loginCredentials = {username: '', password: ''};
+
   constructor(public navCtrl: NavController, public navParams: NavParams) {
   }
 

zlg/src/pages/signup/signup.html

-<ion-content padding>
+<ion-content padding-vertical style="background: url(../assets/img/welcome.png) no-repeat center;background-size:cover">
   <ion-list>
    <br />
     <ion-item>

zlg/src/pages/welcome/welcome.html

 
 
-<ion-content padding="true" style="background: url(../assets/img/welcome.png) no-repeat center;background-size:cover;vertical-align: middle;" id="welcome">
+<ion-content padding-vertical style="background: url(../assets/img/welcome.png) no-repeat center;background-size:cover">
+  <div style="align-items: center">
+  <h1 style="color: black; text-align: center;"> Welcome to the Vault </h1>
 
-  <h1> Welcome to the Vault </h1>
-  
-  <button ion-button block class="marginTop" (click)="signup()">Signup</button>
-  <button ion-button block color="lightprimary" (click)="login()">Login</button>
+  <button ion-button block style="background-color: #7D5FE7; color: white" (click)="login()">Login</button>
+  <button ion-button block style="background-color: #7D5FE7; color: white" (click)="signup()">Signup</button>
+
+  </div>  
   </ion-content>

zlg/src/pages/welcome/welcome.scss

 page-welcome {
-   text-align: center;
-   color: red;
+  color: color($colors, primary);
 }

zlg/src/theme/variables.scss

 // The "primary" color is the only required color in the map.
 
 $colors: (
-  primary:    #488aff,
-  secondary:  #32db64,
-  danger:     #f53d3d,
+  primary:    #7D5FE7,
+  secondary:  #8f7ece,
   light:      #f4f4f4,
   dark:       #222
 );