ioet#71 adding styles for login screen and defining default colors for buttons

Author: enriquezrene

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">
+        <h1>Please sign in</h1>
+    </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,38 @@
+@import '../../../scss/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;
+    }
+}
+
+h1 {
+    color: $dark;
+}

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/scss/_orange-theme.scss

@@ -0,0 +1,29 @@
+$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
+      );
+}

src/styles.scss

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