#71 adding styles for login screen

src/app/modules/activities-management/components/create-activity/create-activity.component.html

@@ -3,14 +3,8 @@
     <h1 class="card-title">Activity</h1>
     <div class="form-group">
       <label for="name">Name:</label>
-      <input
-        class="form-control"
-        id="name"
-        type="text"
-        formControlName="name"
-        [class.is-invalid]="name.invalid && name.touched"
-        required
-      />
+      <input class="form-control" id="name" type="text" formControlName="name"
+        [class.is-invalid]="name.invalid && name.touched" required />
       <div class="text-danger" *ngIf="(name.dirty || name.touched) && name.invalid && name.errors.required">
         Activity name is required.
       </div>
@@ -22,9 +16,7 @@ <h1 class="card-title">Activity</h1>
     </div>
 
     <div class="btn-toolbar" role="toolbar">
-      <div class="btn-group mr-2" role="group">
-        <button class="btn save-button-style mb-2" type="submit" [disabled]="!activityForm.valid">Save</button>
-      </div>
+      <button class="btn btn-primary" type="submit" [disabled]="!activityForm.valid">Save</button>
     </div>
   </form>
-</div>
+</div>

src/app/modules/login/login.component.html

@@ -1 +1,14 @@
-<button (click)="login()">login</button>
+<div class="login-container">
+
+  <div class="login-header">
+    <img src="../../../assets/img/ioet.png" />
+  </div>
+  <div class="login-body">
+    <h3>Please login</h3>
+  </div>
+
+  <div class="login-controls">
+    <button (click)="login()" class="btn btn-primary">login</button>
+  </div>
+
+</div>

src/app/modules/login/login.component.scss

@@ -0,0 +1,41 @@
+@import '../../../styles/themes/orange-theme';
+
+.login-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin: auto;
+  padding: 50px;
+}
+
+.login-header {
+  margin: 5px;
+  text-align: center;
+
+  img {
+    max-width: 200px;
+    height: auto;
+  }
+}
+
+.login-body {
+  margin: 5px;
+  text-align: center;
+}
+
+.login-controls {
+  margin: 5px;
+  display: flex;
+  text-align: center;
+  min-width: 250px;
+
+  button {
+    flex-grow: 1;
+  }
+}
+
+h3 {
+  color: $dark;
+  font-weight: normal;
+}

src/app/modules/time-clock/pages/time-clock.component.html

@@ -57,24 +57,13 @@ <h6 class="text-left"><strong>Projects</strong></h6>
       <hr />
       <div class="container">
         <div class="row">
-          <div class="col text-left">
-            <button
-              class="btn btn-light btn-sm dropdown-toggle"
-              type="button"
-              data-toggle="dropdown"
-              aria-haspopup="true"
-              aria-expanded="false"
-            >
-              Options
-            </button>
-          </div>
           <div class="col text-right">
-            <button *ngIf="isClockIn" class="btn button-clock-in-style btn-sm" type="button" (click)="employeClockIn()">
+            <button *ngIf="isClockIn" class="btn btn-primary" type="button" (click)="employeClockIn()">
               Clock In
             </button>
             <button
               *ngIf="!isClockIn"
-              class="btn button-clock-out-style btn-sm"
+              class="btn btn-primary"
               type="button"
               (click)="employeClockOut()"
             >

src/app/modules/time-clock/pages/time-clock.component.scss

@@ -11,16 +11,6 @@
   justify-content: center;
 }
 
-.button-clock-in-style {
-  background-image: $button-primary-color;
-  color: white;
-}
-
-.button-clock-out-style {
-  background: $button-secondary-color;
-  color: white;
-}
-
 .text-clock-in-color {
   color: $modal-button-secondary;
 }

src/styles.scss

@@ -1 +1,4 @@
 /* You can add global styles to this file, and also import other style files */
+
+@import "styles/themes/orange-theme";
+@import "~bootstrap/scss/bootstrap";

src/styles/themes/_orange-theme.scss

@@ -0,0 +1,36 @@
+$primary:#fc5630;
+$secondary:#ff3f56;
+$success:#16bac5;
+$info:#30bced;
+$warning:#fc5630;
+$danger:#ff3663;
+$light:#ffffff;
+$dark:#5c4e63;
+
+.bg-primary,
+.btn-primary,
+.badge-primary,
+.alert-primary {
+  background-image: linear-gradient(to right,
+      #ff3948,
+      #ff384d,
+      #ff3752,
+      #ff3657,
+      #ff365c,
+      #ff385a,
+      #ff3b59,
+      #ff3d57,
+      #ff434e,
+      #ff4944,
+      #fe4f3a,
+      #fc5630);
+}
+
+.bg-secondary,
+.btn-secondary,
+.badge-secondary,
+.alert-secondary {
+  background-image: linear-gradient(to right,
+      #FF3663,
+      #A50D8A);
+}