#19 styles aplied based only in master branch

package.json

@@ -28,8 +28,8 @@
     "zone.js": "~0.10.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.901.0",
-    "@angular/cli": "^9.1.0",
+    "@angular-devkit/build-angular": "^0.900.5",
+    "@angular/cli": "~9.0.4",
     "@angular/compiler-cli": "~9.0.3",
     "@angular/language-service": "~9.0.3",
     "@types/jasmine": "~3.5.0",
@@ -63,4 +63,4 @@
       "errorMessage": "Your commit message must start with issue number e.g. #39"
     }
   }
-}
+}

src/app/app.module.ts

@@ -23,8 +23,6 @@ import { GroupByDatePipe } from './modules/shared/pipes/group-by-date/group-by-d
 import { ActivitiesManagementComponent } from './modules/activities-management/pages/activities-management.component';
 import { ActivityListComponent } from './modules/activities-management/components/activity-list/activity-list.component';
 import { CreateActivityComponent } from './modules/activities-management/components/create-activity/create-activity.component';
-import { FilterProjectPipe } from './modules/shared/pipes/filter-project/filter-project.pipe';
-import { SearchProjectComponent } from './modules/shared/components/search-project/search-project.component';
 
 @NgModule({
   declarations: [
@@ -48,8 +46,6 @@ import { SearchProjectComponent } from './modules/shared/components/search-proje
     ActivitiesManagementComponent,
     CreateActivityComponent,
     ActivityListComponent,
-    FilterProjectPipe,
-    SearchProjectComponent,
   ],
   imports: [
     CommonModule,

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

@@ -3,14 +3,14 @@
     <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">
+          <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 btn-link"></i>
-                <i class="far fa-trash-alt btn btn-link"></i>
+                <i class="far fa-edit btn text-white"></i>
+                <i class="far fa-trash-alt btn text-white"></i>
               </div>
             </h2>
           </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

@@ -3,23 +3,15 @@
     <h1 class="card-title">Activity</h1>
     <div class="form-group">
       <label for="name">Name:</label>
-      <input class="form-control" [class.is-invalid]="(name.invalid && name.touched)" id="name" type="text" formControlName="name" required>
-      <p class="text-danger" *ngIf="(name.dirty || name.touched) && name.invalid && name.errors.required">
-        Activity name is required.
-      </p>
+      <input class="form-control" id="name" type="text" formControlName="name" required>
+      <div class="alert alert-danger" *ngIf="(name.dirty || name.touched) && name.invalid && name.errors.required">
+        Activity name is required.</div>
     </div>
 
     <div class="form-group">
       <label for="details">Description:</label>
-      <textarea class="form-control" [class.is-invalid]="(description.invalid && description.touched)" rows="3" id="description" type="text" formControlName="description"></textarea>
-      <p class="text-danger" *ngIf="(description.dirty || description.touched) && description.invalid && description.errors.required">Details project is required.</p>
-
-    </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>
+      <textarea class="form-control" rows="3" id="description" type="text" formControlName="description"></textarea>
     </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/project-management/components/create-project/create-project.component.html

@@ -4,35 +4,31 @@ <h1 class="card-title">Project</h1>
 
     <div class="form-group">
       <label for="name">Name:</label>
-      <input class="form-control" [class.is-invalid]="(name.invalid && name.touched)" id="name" type="text" formControlName="name" required>
-      <p class="text-form text-danger" *ngIf="(name.dirty || name.touched) && name.invalid && name.errors.required">Name project is required.</p>
+      <input class="form-control" id="name" type="text" formControlName="name" required>
+      <p class="alert alert-danger" *ngIf="(name.dirty || name.touched) && name.invalid && name.errors.required">Name Project is required.</p>
     </div>
 
     <div class="form-group">
       <label for="details">Details:</label>
-      <textarea class="form-control" [class.is-invalid]="(details.invalid && details.touched)" rows="3" id="details" type="text" formControlName="details" required></textarea>
-      <p class="text-danger" *ngIf="(details.dirty || details.touched) && details.invalid && details.errors.required">Details project is required.</p>
+      <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>
     </div>
 
     <div class="form-group">
       <label for="status">Status:</label>
-      <select class="form-control" [class.is-invalid]="(status.invalid && status.touched)" formControlName="status">
+      <select class="form-control" formControlName="status">
         <option *ngFor="let status of projectStatus" [value]="status">{{status}}</option>
       </select>
-      <p class="text-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>

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

@@ -1,30 +1,29 @@
 <div class="card-body">
-  <app-search-project (changeFilterProject)="filterProjects = $event"></app-search-project>
-  <hr>
   <div class="scroll">
     <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" *ngFor="let project of projects; let rowIndex = index">
+          <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>
+                <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>
@@ -36,5 +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 *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,15 +1,13 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { ProjectListComponent } from './project-list.component';
-import { FilterProjectPipe } from 'src/app/modules/shared/pipes/filter-project/filter-project.pipe';
 
 describe('ProjectListComponent', () => {
   let component: ProjectListComponent;
   let fixture: ComponentFixture<ProjectListComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ProjectListComponent, FilterProjectPipe]
+      declarations: [ProjectListComponent]
     })
       .compileComponents();
   }));

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

@@ -21,8 +21,6 @@ export class ProjectListComponent implements OnInit {
   projectToDelete: Project;
   openDeleteModal = false;
 
-  filterProjects: string = '';
-
   constructor() { }
 
   ngOnInit(): void {

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

@@ -6,7 +6,6 @@ import { CreateProjectComponent, ProjectListComponent } from '../components';
 import { Project } from '../../shared/models';
 import { ProjectManagementComponent } from './project-management.component';
 import { ProjectService } from '../services/project.service';
-import { FilterProjectPipe } from '../../shared/pipes/filter-project/filter-project.pipe';
 
 describe('ProjectManagementComponent', () => {
   let component: ProjectManagementComponent;
@@ -45,7 +44,7 @@ describe('ProjectManagementComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ProjectManagementComponent, CreateProjectComponent, ProjectListComponent, FilterProjectPipe],
+      declarations: [ProjectManagementComponent, CreateProjectComponent, ProjectListComponent],
       providers: [{ provide: ProjectService, useValue: projectServiceStub }],
       imports: [
         FormsModule,

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

@@ -5,7 +5,8 @@
       <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 items-sidebar-hover">
-      <a *ngFor="let item of itemsSidebar" [routerLink]="item.route" routerLinkActive="bg-item-active" class="list-group-item list-group-item-action items-navbar-style"><i class="{{item.icon}} mr-3 ml-3"></i> {{item.text}}</a>
+      <a *ngFor="let item of itemsSidebar" [routerLink]="item.route" routerLinkActive="bg-item-active"
+        class="list-group-item list-group-item-action items-navbar-style"><i class="{{item.icon}} mr-3 ml-3"></i> {{item.text}}</a>
     </div>
   </div>
   <!-- /#sidebar-wrapper -->

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

@@ -54,12 +54,8 @@ background-image: linear-gradient(to left top, #fc5630, #fe503a, #ff4a44, #ff444
 
 .bg-item-active {
   background-color: #FD927D;
-  border-top-right-radius: 25px;
-  border-bottom-right-radius: 25px;
 }
 
 .items-sidebar-hover :hover {
   background-color: #FD927D;
-  border-top-right-radius: 25px;
-  border-bottom-right-radius: 25px;
 }

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

@@ -1,5 +1,6 @@
 <div>
-  <a class="nav-link dropdown-toggle user-profile user-profile-hover border border-ligth rounded-pill text-center" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+  <a class="nav-link dropdown-toggle user-profile text-center" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
+    aria-expanded="false">
     <i class="far fa-user-circle"></i> Dario Herrera
   </a>
   <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">

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

@@ -1,9 +1,5 @@
 .user-profile {
   color: black;
-}
-
-.user-profile-hover:hover {
-  background-color: #F8F9FA;
   cursor: pointer;
 }