change application colors

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

@@ -1,31 +1,31 @@
 <div class="card-body">
-    <div class="scroll">
-        <div class="accordion" id="accordionActivities">
-            <div *ngIf="activities?.length > 0; else notShow">
-                <div class="card" *ngFor="let activity of activities; let rowIndex = index">
-                    <div class="card-header">
-                        <h2 class="mb-0">
-                            <a type="button" data-toggle="collapse" [attr.data-target]="'#row'+rowIndex">
-                                {{activity.name}}
-                            </a>
-                            <div class="btn-group float-right" role="group">
-                                <i class="far fa-edit btn btn-link"></i>
-                                <i class="far fa-trash-alt btn btn-link"></i>
-                            </div>
-                        </h2>
-                    </div>
+  <div class="scroll">
+    <div class="accordion" id="accordionActivities">
+      <div *ngIf="activities?.length > 0; else notShow">
+        <div class="card" *ngFor="let activity of activities; let rowIndex = index">
+          <div class="card-header style-list-project">
+            <h2 class="mb-0">
+              <a type="button" data-toggle="collapse" [attr.data-target]="'#row' + rowIndex">
+                {{ activity.name }}
+              </a>
+              <div class="btn-group float-right" role="group">
+                <i class="far fa-edit btn btn-link text-white"></i>
+                <i class="far fa-trash-alt btn btn-link text-white"></i>
+              </div>
+            </h2>
+          </div>
 
-                    <div [id]="'row'+rowIndex" class="collapse" data-parent="#accordionActivities">
-                        <div class="card-body">
-                            <h5>Description:</h5>
-                            <p>{{activity.description}}</p>
-                        </div>
-                    </div>
-                </div>
+          <div [id]="'row' + rowIndex" class="collapse" data-parent="#accordionActivities">
+            <div class="card-body">
+              <h5>Description:</h5>
+              <p>{{ activity.description }}</p>
             </div>
-            <ng-template #notShow>
-                <app-empty-state></app-empty-state>
-            </ng-template>
+          </div>
         </div>
+      </div>
+      <ng-template #notShow>
+        <app-empty-state></app-empty-state>
+      </ng-template>
     </div>
+  </div>
 </div>

src/app/modules/activities-management/components/activity-list/activity-list.component.scss

@@ -0,0 +1,6 @@
+@import '../../../../../styles/colors.scss';
+
+.style-list-project {
+  background-image: $background-gradient-items;
+  color: white;
+}

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

@@ -23,7 +23,7 @@ <h1 class="card-title">Activity</h1>
 
     <div class="btn-toolbar" role="toolbar">
       <div class="btn-group mr-2" role="group">
-        <button class="btn btn-primary mb-2" type="submit" [disabled]="!activityForm.valid">Save</button>
+        <button class="btn save-button-style mb-2" type="submit" [disabled]="!activityForm.valid">Save</button>
       </div>
     </div>
   </form>

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

@@ -0,0 +1,11 @@
+@import '../../../../../styles/colors.scss';
+
+.save-button-style {
+  background-image: $button-primary-color;
+  color: white;
+}
+
+.cancel-button-style {
+  background-color: $modal-button-secondary;
+  color: white;
+}

src/app/modules/home/home.component.html

@@ -1,5 +1,3 @@
-<app-navbar></app-navbar>
-
 <app-sidebar>
-    <router-outlet></router-outlet>
-</app-sidebar>
+  <router-outlet></router-outlet>
+</app-sidebar>

src/app/modules/project-management/components/create-project/create-project.component.html

@@ -54,10 +54,12 @@ <h1 class="card-title">Project</h1>
     </div>
     <div class="btn-toolbar" role="toolbar">
       <div class="btn-group mr-2" role="group">
-        <button class="btn btn-primary mb-2" type="submit" [disabled]="!projectForm.valid">Save</button>
+        <button class="btn save-button-style mb-2" type="submit" [disabled]="!projectForm.valid">Save</button>
       </div>
       <div class="btn-group mr-2" role="group">
-        <button class="btn btn-primary mb-2" type="reset" [hidden]="!projectToEdit" (click)="reset()">Cancel</button>
+        <button class="btn cancel-button-style mb-2" type="reset" [hidden]="!projectToEdit" (click)="reset()">
+          Cancel
+        </button>
       </div>
     </div>
   </form>

src/app/modules/project-management/components/create-project/create-project.component.scss

@@ -0,0 +1,11 @@
+@import '../../../../../styles/colors.scss';
+
+.save-button-style {
+  background-image: $button-primary-color;
+  color: white;
+}
+
+.cancel-button-style {
+  background-color: $modal-button-secondary;
+  color: white;
+}

src/app/modules/project-management/components/project-list/project-list.component.html

@@ -5,7 +5,7 @@
     <div class="accordion" id="accordionProject">
       <div *ngIf="projects?.length > 0; else notShow">
         <div class="card" *ngFor="let project of projects | filterProject: filterProjects; let rowIndex = index">
-          <div class="card-header">
+          <div class="card-header style-list-project">
             <h2 class="mb-0">
               <a
                 type="button"
@@ -16,12 +16,12 @@ <h2 class="mb-0">
                 {{ project.name }}
               </a>
               <div class="btn-group float-right" role="group">
-                <i (click)="editProject.emit(project.id)" class="far fa-edit btn btn-link"></i>
+                <i (click)="editProject.emit(project.id)" class="far fa-edit btn btn-link text-white"></i>
                 <i
                   (click)="openModal(project)"
                   data-toggle="modal"
                   data-target="#deleteModal"
-                  class="far fa-trash-alt btn btn-link"
+                  class="far fa-trash-alt btn btn-link text-white"
                 ></i>
               </div>
             </h2>

src/app/modules/project-management/components/project-list/project-list.component.scss

@@ -1,4 +1,11 @@
+@import '../../../../../styles/colors.scss';
+
 .scroll {
   max-height: 400px;
   overflow-y: auto;
 }
+
+.style-list-project {
+  background-image: $background-gradient-items;
+  color: white;
+}

src/app/modules/shared/components/clock/clock.component.html

@@ -1,8 +1,6 @@
-<div class="row">
-    <div class="col mt-1  time-clock-color">
-        <i *ngIf="!displayTime" class="fas fa-sync-alt fa fa-spin"></i>
-    </div>
-    <div *ngIf="displayTime" class="col time-clock-color">
-        <h3>{{ hour | number: '2.0-2' }}:{{ minutes | number: '2.0-2' }}:{{ seconds | number: '2.0-2' }}</h3>
-    </div>
-</div>
+<div class="col text-dark">
+  <i *ngIf="!displayTime" class="fas fa-sync-alt fa fa-spin"></i>
+</div>
+<div *ngIf="displayTime" class="col text-dark">
+  <h3>{{ hour | number: '2.0-2' }}:{{ minutes | number: '2.0-2' }}:{{ seconds | number: '2.0-2' }}</h3>
+</div>

src/app/modules/shared/components/details-fields/details-fields.component.html

@@ -3,38 +3,59 @@
     <div class="input-group-prepend">
       <span class="input-group-text span-width" id="inputGroup-sizing-sm">Project</span>
     </div>
-    <input id="project" formControlName="project" type="text" class="form-control" aria-label="Small"
-      aria-describedby="inputGroup-sizing-sm" />
+    <input
+      id="project"
+      formControlName="project"
+      type="text"
+      class="form-control"
+      aria-label="Small"
+      aria-describedby="inputGroup-sizing-sm"
+    />
   </div>
   <div class="input-group input-group-sm mb-3">
     <div class="input-group-prepend">
       <span class="input-group-text span-width" id="inputGroup-sizing-sm">Activity</span>
     </div>
-    <input formControlName="activity" type="text" class="form-control" aria-label="Small"
-      aria-describedby="inputGroup-sizing-sm" />
+    <input
+      formControlName="activity"
+      type="text"
+      class="form-control"
+      aria-label="Small"
+      aria-describedby="inputGroup-sizing-sm"
+    />
   </div>
   <div class="input-group input-group-sm mb-3">
     <div class="input-group-prepend">
       <span class="input-group-text span-width" id="inputGroup-sizing-sm">Jira Ticket</span>
     </div>
-    <input formControlName="ticket" type="text" class="form-control" aria-label="Small"
-      aria-describedby="inputGroup-sizing-sm" />
+    <input
+      formControlName="ticket"
+      type="text"
+      class="form-control"
+      aria-label="Small"
+      aria-describedby="inputGroup-sizing-sm"
+    />
   </div>
   <div class="input-group input-group-sm mb-3">
     <div class="input-group-prepend">
       <span class="input-group-text span-width" id="inputGroup-sizing-sm">Technology</span>
     </div>
-    <input formControlName="technology" type="text" class="form-control" aria-label="Small"
-      aria-describedby="inputGroup-sizing-sm" />
+    <input
+      formControlName="technology"
+      type="text"
+      class="form-control"
+      aria-label="Small"
+      aria-describedby="inputGroup-sizing-sm"
+    />
   </div>
   <div class="form-group">
     <label for="NotesTextarea">Notes</label>
     <textarea formControlName="comments" class="form-control" id="NotesTextarea" rows="3"></textarea>
   </div>
   <div [ngClass]="{ hidden: formType !== 'entries' }" class="modal-footer">
-    <button #closeModal type="button" class="btn btn-secondary" data-dismiss="modal">
+    <button #closeModal type="button" class="btn close-button-style" data-dismiss="modal">
       Close
     </button>
-    <button type="submit" class="btn btn-primary">Save changes</button>
+    <button type="submit" class="btn save-button-style">Save changes</button>
   </div>
 </form>

src/app/modules/shared/components/details-fields/details-fields.component.scss

@@ -1,7 +1,20 @@
+@import '../../../../../styles/colors.scss';
 .span-width {
   width: 6rem;
+  background-image: $background-pantone;
+  color: white;
 }
 
 .hidden {
   display: none;
 }
+
+.save-button-style {
+  background-color: $modal-button-primary;
+  color: white;
+}
+
+.close-button-style {
+  background-color: $modal-button-secondary;
+  color: white;
+}

src/app/modules/shared/components/modal/modal.component.html

@@ -10,8 +10,8 @@ <h5 class="modal-title" id="exampleModalLabel">Delete Project</h5>
       Are you sure you want to delete <b>{{ list.name || list.project }}</b> entry?
     </div>
     <div class="modal-footer">
-      <button #cancelDeleteModal type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
-      <button (click)="removeListById(list.id)" type="button" class="btn btn-primary">Delete</button>
+      <button #cancelDeleteModal type="button" class="btn cancel-button-style" data-dismiss="modal">Cancel</button>
+      <button (click)="removeListById(list.id)" type="button" class="btn delete-button-style">Delete</button>
     </div>
   </div>
 </div>

src/app/modules/shared/components/modal/modal.component.scss

@@ -0,0 +1,11 @@
+@import '../../../../../styles/colors.scss';
+
+.delete-button-style {
+  background-color: $modal-button-primary;
+  color: white;
+}
+
+.cancel-button-style {
+  background-color: $modal-button-secondary;
+  color: white;
+}

src/app/modules/shared/components/month-picker/month-picker.component.html

@@ -1,7 +1,7 @@
 <div class="container-month d-flex">
   <div
-    class="month w-100 text-center text-white"
-    *ngFor="let month of months; let i = index "
+    class="month w-100 text-center"
+    *ngFor="let month of months; let i = index"
     (click)="getMonth(i)"
     [ngClass]="{ active: activeMonth === i }"
   >

src/app/modules/shared/components/month-picker/month-picker.component.scss

@@ -1,5 +1,8 @@
+@import '../../../../../styles/colors.scss';
+
 .month {
-  background-color: #0093dc;
+  background: $header;
+  color: white;
   cursor: pointer;
 
   &:hover {
@@ -8,5 +11,5 @@
 }
 
 .active {
-  background-color: #005ce0;
+  background-color: $item-background;
 }

src/app/modules/shared/components/navbar/navbar.component.html

@@ -1,8 +1,8 @@
-<nav class="navbar navbar-dark bg-dark">
-  <a class="navbar-brand" href="#">
-    <img src="assets/img/ioet.png" width="20" height="35" class="d-inline-block align-top" alt="">
-  </a>
-
-  <app-clock class="text-center"></app-clock>
-  <app-user></app-user>
+<nav class="navbar navbar-light bg-white border-light border-bottom mt-1">
+  <div class="col-10 text-center">
+    <app-clock></app-clock>
+  </div>
+  <div class="col-2 text-right">
+    <app-user></app-user>
+  </div>
 </nav>

src/app/modules/shared/components/sidebar/sidebar.component.html

@@ -1,18 +1,32 @@
 <div class="d-flex" id="wrapper">
   <!-- Sidebar -->
-  <div class="bg-light border-right" id="sidebar-wrapper" *ngIf="itemsSidebar?.length > 0">
-    <div class="list-group list-group-flush">
-      <a *ngFor="let item of itemsSidebar" [routerLink]="item.route"  routerLinkActive="dark"
-          class="list-group-item list-group-item-action bg-light"><i class="{{item.icon}}"></i> {{item.text}}</a>
+  <div class="mt-1 ml-1 rounded-lg" id="sidebar-wrapper" *ngIf="itemsSidebar?.length > 0">
+    <div class="text-center mt-5 mb-5">
+      <img
+        src="assets/img/ioet-logo-light.png"
+        width="100"
+        height="100"
+        class="img-fluid text-center"
+        alt="Ioet logo"
+      />
+    </div>
+    <div class="list-group list-group-flush rounded-lg">
+      <a
+        *ngFor="let item of itemsSidebar"
+        [routerLink]="item.route"
+        routerLinkActive="background-item-sidebar-active"
+        class="list-group-item list-group-item-action content-sidebar-style item-hover"
+        ><i class="{{ item.icon }} mr-3 ml-3"></i> {{ item.text }}</a
+      >
     </div>
   </div>
   <!-- /#sidebar-wrapper -->
-
-  <!-- Page Content -->
-  <div class="container">
-    <router-outlet></router-outlet>
+  <div class="container-fluid mt-1">
+    <app-navbar></app-navbar>
+    <div class="container">
+      <!-- Page Content -->
+      <router-outlet></router-outlet>
+    </div>
   </div>
-  <!-- /#page-content-wrapper -->
-
 </div>
 <!-- /#wrapper -->