Merge pull request #75 from ioet/19-change-app-colors

closes #19

Author: enriquezrene

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,15 @@
+@import '../../../../../styles/colors.scss';
+
+.save-button-style {
+  background-image: $button-primary-color;
+  color: white;
+}
+
+.cancel-button-style {
+  background-color: $modal-button-secondary;
+  color: white;
+}
+
+.item-list-hover:link {
+  background-color: green;
+}

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>