#19 change application colors

package.json

@@ -63,4 +63,4 @@
       "errorMessage": "Your commit message must start with issue number e.g. #39"
     }
   }
-}
+}

src/app/app.component.html

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

src/app/app.module.ts

@@ -3,7 +3,6 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
-
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { NavbarComponent } from './modules/shared/components/navbar/navbar.component';
@@ -25,7 +24,6 @@ import { ActivitiesManagementComponent } from './modules/activities-management/p
 import { ActivityListComponent } from './modules/activities-management/components/activity-list/activity-list.component';
 import { CreateActivityComponent } from './modules/activities-management/components/create-activity/create-activity.component';
 
-
 @NgModule({
   declarations: [
     AppComponent,
@@ -47,7 +45,7 @@ import { CreateActivityComponent } from './modules/activities-management/compone
     GroupByDatePipe,
     ActivitiesManagementComponent,
     CreateActivityComponent,
-    ActivityListComponent
+    ActivityListComponent,
   ],
   imports: [
     CommonModule,

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 list-color">
+            <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 text-white"></i>
+                <i class="far fa-trash-alt btn 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>
+</div>

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

@@ -0,0 +1,4 @@
+.list-color {
+  background-color: #FD927D;
+  color: white;
+}

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

@@ -12,11 +12,6 @@ <h1 class="card-title">Activity</h1>
       <label for="details">Description:</label>
       <textarea class="form-control" rows="3" id="description" type="text" formControlName="description"></textarea>
     </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]="!activityForm.valid">Save</button>
-      </div>
-    </div>
+    <button class="btn btn-block button-color  mb-2" type="submit" [disabled]="!activityForm.valid">Save</button>
   </form>
 </div>

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

@@ -0,0 +1,9 @@
+.button-color {
+	background-image: linear-gradient(to right bottom, #ff3f56, #ff444d, #ff4a44, #fe503a, #fc5630);
+  color: white;
+}
+
+.button-cancel {
+	background-color: #FF3F56;
+	color: white;
+}

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

@@ -17,7 +17,7 @@ export class CreateActivityComponent {
   constructor(private formBuilder: FormBuilder) {
     this.activityForm = this.formBuilder.group({
       name: ['', Validators.required],
-      description: ['']
+      description: ['', Validators.required]
     });
   }
 

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

@@ -11,28 +11,24 @@ <h1 class="card-title">Project</h1>
     <div class="form-group">
       <label for="details">Details:</label>
       <textarea class="form-control" rows="3" id="details" type="text" formControlName="details" required></textarea>
-      <p class="alert alert-danger" *ngIf="(details.dirty || details.touched) && details.invalid && details.errors.required">Details Project is required.</p>
+      <p class="alert alert-danger" *ngIf="(details.dirty || details.touched) && details.invalid && details.errors.required">Details Project is
+        required.</p>
     </div>
 
     <div class="form-group">
       <label for="status">Status:</label>
       <select class="form-control" formControlName="status">
         <option *ngFor="let status of projectStatus" [value]="status">{{status}}</option>
       </select>
-      <p class="alert alert-danger" *ngIf="(status.dirty || status.touched) && status.invalid && status.errors.required">Status Project is required.</p>
+      <p class="alert alert-danger" *ngIf="(status.dirty || status.touched) && status.invalid && status.errors.required">Status Project is required.
+      </p>
     </div>
 
     <div class="form-group form-check" [hidden]="!projectToEdit">
       <input type="checkbox" class="form-check-input" id="completedProject" formControlName="completed">
       <label class="form-check-label" for="completedProject">Completed project</label>
     </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>
-      </div>
-      <div class="btn-group mr-2" role="group">
-        <button class="btn btn-primary mb-2" type="reset" [hidden]="!projectToEdit" (click)="reset()">Cancel</button>
-      </div>
-    </div>
+    <button class="btn btn-block button-color mb-2" type="submit" [disabled]="!projectForm.valid">Save</button>
+    <button class="btn btn-block button-cancel mb-2" type="reset" [hidden]="!projectToEdit" (click)="reset()">Cancel</button>
   </form>
-</div>
+</div>

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

@@ -0,0 +1,9 @@
+.button-color {
+	background-image: linear-gradient(to right bottom, #ff3f56, #ff444d, #ff4a44, #fe503a, #fc5630);
+  color: white;
+}
+
+.button-cancel {
+	background-color: #FF3F56;
+	color: white;
+}

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

@@ -3,26 +3,27 @@
     <div class="accordion" id="accordionProject">
       <div *ngIf="projects?.length > 0; else notShow">
         <div class="card" *ngFor="let project of projects; let rowIndex = index">
-          <div class="card-header">
+          <div class="card-header list-color">
             <h2 class="mb-0">
               <a type="button" data-toggle="collapse" [attr.data-target]="'#row'+rowIndex" [attr.aria-controls]="'row'+rowIndex">
                 {{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)="openModal(project)" data-toggle="modal" data-target="#deleteModal" class="far fa-trash-alt btn btn-link"></i>
+              <div class="btn-group float-right" role="group">
+                <i (click)="editProject.emit(project.id)" class="far fa-edit btn text-white"></i>
+                <i (click)="openModal(project)" data-toggle="modal" data-target="#deleteModal" class="far fa-trash-alt btn text-white"></i>
               </div>
             </h2>
           </div>
-
           <div [id]="'row'+rowIndex" class="collapse" data-parent="#accordionProject">
             <div class="card-body">
               <h5>Details:</h5>
               <p>{{project.details}}</p>
               <h5>Status:</h5>
               <p>{{project.status}}</p>
               <h5>Completed project:</h5>
-              <p>{{project.completed ? 'Yes' : 'No'}}</p>
+              <p>
+                {{project.completed ? 'Yes' : 'No'}}
+              </p>
             </div>
           </div>
         </div>
@@ -34,8 +35,6 @@ <h5>Completed project:</h5>
   </div>
 </div>
 
-<app-modal *ngIf = "openDeleteModal" class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-hidden="true"
-  [list] = "projectToDelete"
-  (removeList) = "removeProject($event)"
->
-</app-modal>
+<app-modal *ngIf="openDeleteModal" class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-hidden="true" [list]="projectToDelete"
+  (removeList)="removeProject($event)">
+</app-modal>

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

@@ -2,3 +2,8 @@
   max-height: 400px;
   overflow-y: auto;
 }
+
+.list-color {
+  background-color: #FD927D;
+  color: white;
+}

src/app/modules/project-management/components/project-list/project-list.component.spec.ts

@@ -1,5 +1,4 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { ProjectListComponent } from './project-list.component';
 
 describe('ProjectListComponent', () => {
@@ -8,9 +7,9 @@ describe('ProjectListComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ProjectListComponent ]
+      declarations: [ProjectListComponent]
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {

src/app/modules/project-management/pages/project-management.component.spec.ts

@@ -44,14 +44,14 @@ describe('ProjectManagementComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ProjectManagementComponent, CreateProjectComponent, ProjectListComponent ],
-      providers: [ { provide: ProjectService, useValue: projectServiceStub }],
+      declarations: [ProjectManagementComponent, CreateProjectComponent, ProjectListComponent],
+      providers: [{ provide: ProjectService, useValue: projectServiceStub }],
       imports: [
         FormsModule,
         ReactiveFormsModule
       ]
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {

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 class="col 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>

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

@@ -1,3 +1,4 @@
 .time-clock-color {
-  color: white;
+  color: black
 }
+

src/app/modules/shared/components/clock/clock.component.spec.ts

@@ -8,9 +8,9 @@ describe('ClockComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ClockComponent ]
+      declarations: [ClockComponent]
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {
@@ -44,4 +44,18 @@ describe('ClockComponent', () => {
     expect(component.showClock).toHaveBeenCalled();
   });
 
-});
+  it('should be verify the init state of vars', () => {
+    expect(component.hour).toEqual(0);
+    expect(component.minutes).toEqual(0);
+    expect(component.seconds).toEqual(0);
+    expect(component.displayTime).toBeFalsy();
+  });
+
+  it('should enter if and assign the value to vars', () => {
+    component.showClock();
+    expect(component.hour).toEqual(0);
+    expect(component.minutes).toEqual(0);
+    expect(component.seconds).toEqual(0);
+  });
+
+});

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

@@ -17,22 +17,25 @@ export class ClockComponent implements OnInit {
   constructor() {
     this.showClock();
     this.displayTime = false;
+    this.hour = 0;
+    this.minutes = 0;
+    this.seconds = 0;
     setTimeout(() => {
       this.displayTime = true;
     }, 3000);
-   }
+  }
 
-   showClock() {
+  showClock() {
     const timenInterval = interval(1000);
-    timenInterval.subscribe( (data) => {
+    timenInterval.subscribe((data) => {
       this.currentDate = new Date();
       this.hour = this.currentDate.getHours();
       this.minutes = this.currentDate.getMinutes();
       this.seconds = this.currentDate.getSeconds();
     });
-   }
+  }
 
   ngOnInit(): void {
   }
 
-}
+}

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

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

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

@@ -10,3 +10,7 @@
 .active {
   background-color: #005ce0;
 }
+
+.title-card {
+  background-color: #FF3F56;
+}