From 5e0daaba30709509ee13715ef02712ce9d011d79 Mon Sep 17 00:00:00 2001
From: Rene Enriquez <enriquezrene.ap@gmail.com>
Date: Tue, 19 May 2020 13:26:16 -0500
Subject: [PATCH 1/2] fix: #257 fixing colors

---
 src/app/app.module.ts                         |   1 -
 .../activity-list.component.scss              |   2 +-
 .../create-activity.component.scss            |   1 +
 .../store/activity-management.effects.ts      |   2 +-
 .../create-customer/create-customer.scss      |   1 +
 .../customer-list.component.html              |   2 +-
 .../customer-list.component.scss              |   2 +-
 ...anagement-customer-projects.component.scss |   2 +-
 .../create-project-type.component.scss        |   1 +
 .../project-type-list.component.html          |   2 +-
 .../project-type-list.component.scss          |   2 +-
 .../store/project-type.effects.ts             |   2 +-
 .../create-project.component.scss             |   1 +
 .../project-list/project-list.component.html  |   2 +-
 .../project-list/project-list.component.scss  |   2 +-
 .../components/store/project.effects.ts       |   2 +-
 .../pages/customer.component.html             |   6 +-
 .../store/customer-management.effects.ts      |   2 +-
 src/app/modules/login/login.component.scss    |   2 +-
 .../components/clock/clock.component.html     |   2 +-
 .../details-fields.component.scss             |   4 +-
 .../month-picker/month-picker.component.scss  |   4 +-
 .../components/navbar/navbar.component.html   |   2 +-
 .../components/sidebar/sidebar.component.html |   4 +-
 .../components/sidebar/sidebar.component.scss |   9 +-
 .../technologies/technologies.component.scss  |   4 +-
 .../components/user/user.component.scss       |   2 +-
 .../entry-fields/entry-fields.component.scss  |  32 +----
 .../project-list-hover.component.scss         |   2 +-
 .../project-list-hover.component.spec.ts      |   1 -
 .../pages/time-clock.component.scss           |  10 +-
 .../modules/time-clock/store/entry.effects.ts |   3 +-
 .../pages/time-entries.component.html         |   2 +-
 .../pages/time-entries.component.scss         |   1 -
 src/styles.scss                               |   2 +-
 src/styles/colors.scss                        | 124 ++++++++----------
 src/styles/themes/_orange-theme.scss          |  41 ------
 37 files changed, 96 insertions(+), 190 deletions(-)
 delete mode 100644 src/styles/themes/_orange-theme.scss

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index c0efe6494..13ce16f9e 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -72,7 +72,6 @@ import { TimeDetailsPipe } from './modules/time-clock/pipes/time-details.pipe';
     TimeClockComponent,
     DetailsFieldsComponent,
     ProjectListHoverComponent,
-    ModalComponent,
     TimeEntriesComponent,
     MonthPickerComponent,
     EmptyStateComponent,
diff --git a/src/app/modules/activities-management/components/activity-list/activity-list.component.scss b/src/app/modules/activities-management/components/activity-list/activity-list.component.scss
index 9611f365e..bad7c99f9 100644
--- a/src/app/modules/activities-management/components/activity-list/activity-list.component.scss
+++ b/src/app/modules/activities-management/components/activity-list/activity-list.component.scss
@@ -1,7 +1,7 @@
 @import '../../../../../styles/colors.scss';
 
 .style-list-project {
-  background-image: $background-gradient-items;
+  background-color: $primary;
   color: white;
 }
 
diff --git a/src/app/modules/activities-management/components/create-activity/create-activity.component.scss b/src/app/modules/activities-management/components/create-activity/create-activity.component.scss
index e69de29bb..2d8850f33 100644
--- a/src/app/modules/activities-management/components/create-activity/create-activity.component.scss
+++ b/src/app/modules/activities-management/components/create-activity/create-activity.component.scss
@@ -0,0 +1 @@
+@import '../../../../../styles/colors.scss';
diff --git a/src/app/modules/activities-management/store/activity-management.effects.ts b/src/app/modules/activities-management/store/activity-management.effects.ts
index c2edbb7a8..88e8b1079 100644
--- a/src/app/modules/activities-management/store/activity-management.effects.ts
+++ b/src/app/modules/activities-management/store/activity-management.effects.ts
@@ -1,4 +1,4 @@
-import { INFO_SAVED_SUCCESSFULLY, INFO_DELETE_SUCCESSFULLY, UNEXPECTED_ERROR } from '../../shared/messages';
+import { INFO_SAVED_SUCCESSFULLY, INFO_DELETE_SUCCESSFULLY } from '../../shared/messages';
 import { Injectable } from '@angular/core';
 import { Actions, Effect, ofType } from '@ngrx/effects';
 import { Action } from '@ngrx/store';
diff --git a/src/app/modules/customer-management/components/customer-info/components/create-customer/create-customer.scss b/src/app/modules/customer-management/components/customer-info/components/create-customer/create-customer.scss
index e69de29bb..8099bafc8 100644
--- a/src/app/modules/customer-management/components/customer-info/components/create-customer/create-customer.scss
+++ b/src/app/modules/customer-management/components/customer-info/components/create-customer/create-customer.scss
@@ -0,0 +1 @@
+@import '../../../../../../../styles/colors.scss';
diff --git a/src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.html b/src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.html
index 4e172ebde..b304d44b2 100644
--- a/src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.html
+++ b/src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.html
@@ -15,7 +15,7 @@
         <button (click)="editCustomer(customer.id)" type="button" class="btn btn-sm btn-primary">
           <i class="fa fa-pencil fa-xs"></i>
         </button>
-        <button (click)="deleteCustomer(customer.id)" type="button" class="btn btn-sm btn-secondary ml-2">
+        <button (click)="deleteCustomer(customer.id)" type="button" class="btn btn-sm btn-danger ml-2">
           <i class="fa fa-trash-alt fa-xs"></i>
         </button>
       </td>
diff --git a/src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.scss b/src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.scss
index 684f4d133..8099bafc8 100644
--- a/src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.scss
+++ b/src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.scss
@@ -1 +1 @@
-@import '../../../../../../../styles/themes/orange-theme';
+@import '../../../../../../../styles/colors.scss';
diff --git a/src/app/modules/customer-management/components/management-customer-projects/management-customer-projects.component.scss b/src/app/modules/customer-management/components/management-customer-projects/management-customer-projects.component.scss
index 9ff109f50..926138ba1 100644
--- a/src/app/modules/customer-management/components/management-customer-projects/management-customer-projects.component.scss
+++ b/src/app/modules/customer-management/components/management-customer-projects/management-customer-projects.component.scss
@@ -1,7 +1,7 @@
 @import '../../../../../styles/colors.scss';
 
 .nav-active {
-  color: $modal-button-secondary;
+  color: $secondary;
 }
 .nav-item > a:hover {
   opacity: 0.6;
diff --git a/src/app/modules/customer-management/components/projects-type/components/create-project-type/create-project-type.component.scss b/src/app/modules/customer-management/components/projects-type/components/create-project-type/create-project-type.component.scss
index e69de29bb..8099bafc8 100644
--- a/src/app/modules/customer-management/components/projects-type/components/create-project-type/create-project-type.component.scss
+++ b/src/app/modules/customer-management/components/projects-type/components/create-project-type/create-project-type.component.scss
@@ -0,0 +1 @@
+@import '../../../../../../../styles/colors.scss';
diff --git a/src/app/modules/customer-management/components/projects-type/components/project-type-list/project-type-list.component.html b/src/app/modules/customer-management/components/projects-type/components/project-type-list/project-type-list.component.html
index 076737384..9970f630f 100644
--- a/src/app/modules/customer-management/components/projects-type/components/project-type-list/project-type-list.component.html
+++ b/src/app/modules/customer-management/components/projects-type/components/project-type-list/project-type-list.component.html
@@ -15,7 +15,7 @@
       <td class="col-sm-9">{{ projectType.name }}</td>
       <td class="col-sm-3 text-center">
         <button type="button" class="btn btn-sm btn-primary"  (click)="updateProjectType(projectType.id)"><i class="fa fa-pencil fa-xs"></i></button>
-        <button type="button" class="btn btn-sm btn-secondary ml-2" (click)="deleteProjectType(projectType.id)"><i class="fas fa-trash-alt fa-xs"></i></button>
+        <button type="button" class="btn btn-sm btn-danger ml-2" (click)="deleteProjectType(projectType.id)"><i class="fas fa-trash-alt fa-xs"></i></button>
       </td>
     </tr>
   </tbody>
diff --git a/src/app/modules/customer-management/components/projects-type/components/project-type-list/project-type-list.component.scss b/src/app/modules/customer-management/components/projects-type/components/project-type-list/project-type-list.component.scss
index 684f4d133..8099bafc8 100644
--- a/src/app/modules/customer-management/components/projects-type/components/project-type-list/project-type-list.component.scss
+++ b/src/app/modules/customer-management/components/projects-type/components/project-type-list/project-type-list.component.scss
@@ -1 +1 @@
-@import '../../../../../../../styles/themes/orange-theme';
+@import '../../../../../../../styles/colors.scss';
diff --git a/src/app/modules/customer-management/components/projects-type/store/project-type.effects.ts b/src/app/modules/customer-management/components/projects-type/store/project-type.effects.ts
index 65177abab..d11294c8a 100644
--- a/src/app/modules/customer-management/components/projects-type/store/project-type.effects.ts
+++ b/src/app/modules/customer-management/components/projects-type/store/project-type.effects.ts
@@ -1,4 +1,4 @@
-import { INFO_SAVED_SUCCESSFULLY, INFO_DELETE_SUCCESSFULLY, UNEXPECTED_ERROR } from '../../../../shared/messages';
+import { INFO_SAVED_SUCCESSFULLY, INFO_DELETE_SUCCESSFULLY } from '../../../../shared/messages';
 import { Injectable } from '@angular/core';
 import { Actions, Effect, ofType } from '@ngrx/effects';
 import { Action } from '@ngrx/store';
diff --git a/src/app/modules/customer-management/components/projects/components/create-project/create-project.component.scss b/src/app/modules/customer-management/components/projects/components/create-project/create-project.component.scss
index e69de29bb..8099bafc8 100644
--- a/src/app/modules/customer-management/components/projects/components/create-project/create-project.component.scss
+++ b/src/app/modules/customer-management/components/projects/components/create-project/create-project.component.scss
@@ -0,0 +1 @@
+@import '../../../../../../../styles/colors.scss';
diff --git a/src/app/modules/customer-management/components/projects/components/project-list/project-list.component.html b/src/app/modules/customer-management/components/projects/components/project-list/project-list.component.html
index 5d598d9d0..de42d3dde 100644
--- a/src/app/modules/customer-management/components/projects/components/project-list/project-list.component.html
+++ b/src/app/modules/customer-management/components/projects/components/project-list/project-list.component.html
@@ -19,7 +19,7 @@
         <button type="button" class="btn btn-sm btn-primary" (click)="updateProject(project)">
           <i class="fa fa-pencil fa-xs"></i>
         </button>
-        <button type="button" class="btn btn-sm btn-secondary ml-2" (click)="deleteProject(project.id)">
+        <button type="button" class="btn btn-sm btn-danger ml-2" (click)="deleteProject(project.id)">
           <i class="fa fa-trash-alt fa-xs"></i>
         </button>
       </td>
diff --git a/src/app/modules/customer-management/components/projects/components/project-list/project-list.component.scss b/src/app/modules/customer-management/components/projects/components/project-list/project-list.component.scss
index 684f4d133..8099bafc8 100644
--- a/src/app/modules/customer-management/components/projects/components/project-list/project-list.component.scss
+++ b/src/app/modules/customer-management/components/projects/components/project-list/project-list.component.scss
@@ -1 +1 @@
-@import '../../../../../../../styles/themes/orange-theme';
+@import '../../../../../../../styles/colors.scss';
diff --git a/src/app/modules/customer-management/components/projects/components/store/project.effects.ts b/src/app/modules/customer-management/components/projects/components/store/project.effects.ts
index 05876cf2d..04974dabc 100644
--- a/src/app/modules/customer-management/components/projects/components/store/project.effects.ts
+++ b/src/app/modules/customer-management/components/projects/components/store/project.effects.ts
@@ -1,4 +1,4 @@
-import { INFO_SAVED_SUCCESSFULLY, INFO_DELETE_SUCCESSFULLY, UNEXPECTED_ERROR } from '../../../../../shared/messages';
+import { INFO_SAVED_SUCCESSFULLY, INFO_DELETE_SUCCESSFULLY } from '../../../../../shared/messages';
 import { Injectable } from '@angular/core';
 import { of, Observable } from 'rxjs';
 import { catchError, map, mergeMap } from 'rxjs/operators';
diff --git a/src/app/modules/customer-management/pages/customer.component.html b/src/app/modules/customer-management/pages/customer.component.html
index 28a99bb04..c56abeef8 100644
--- a/src/app/modules/customer-management/pages/customer.component.html
+++ b/src/app/modules/customer-management/pages/customer.component.html
@@ -1,7 +1,7 @@
-<div class="container mt-2">
+<div class="container">
   <div class="row">
-    <div class="col-5" style="padding: 15px;">
-      <button (click)="activateCustomerForm()" type="button" class="btn btn-primary">Add new customer</button>
+    <div style="padding: 15px;">
+      <button (click)="activateCustomerForm()" class="btn btn-primary">Add new customer</button>
     </div>
   </div>
   <app-customer-list
diff --git a/src/app/modules/customer-management/store/customer-management.effects.ts b/src/app/modules/customer-management/store/customer-management.effects.ts
index 1ccc45bef..5ee838869 100644
--- a/src/app/modules/customer-management/store/customer-management.effects.ts
+++ b/src/app/modules/customer-management/store/customer-management.effects.ts
@@ -1,4 +1,4 @@
-import { INFO_SAVED_SUCCESSFULLY, INFO_DELETE_SUCCESSFULLY, UNEXPECTED_ERROR } from '../../shared/messages';
+import { INFO_SAVED_SUCCESSFULLY, INFO_DELETE_SUCCESSFULLY } from '../../shared/messages';
 import { Injectable } from '@angular/core';
 import { Actions, Effect, ofType } from '@ngrx/effects';
 import { Action } from '@ngrx/store';
diff --git a/src/app/modules/login/login.component.scss b/src/app/modules/login/login.component.scss
index 335fd7554..1153dfbff 100644
--- a/src/app/modules/login/login.component.scss
+++ b/src/app/modules/login/login.component.scss
@@ -1,4 +1,4 @@
-@import '../../../styles/themes/orange-theme';
+@import '../../../styles/colors.scss';
 
 .login-container {
   display: flex;
diff --git a/src/app/modules/shared/components/clock/clock.component.html b/src/app/modules/shared/components/clock/clock.component.html
index 23da85048..c04d92659 100644
--- a/src/app/modules/shared/components/clock/clock.component.html
+++ b/src/app/modules/shared/components/clock/clock.component.html
@@ -2,5 +2,5 @@
   <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>
+  <h3 style="font-weight: bold;">{{ hour | number: '2.0-2' }}:{{ minutes | number: '2.0-2' }}:{{ seconds | number: '2.0-2' }}</h3>
 </div>
diff --git a/src/app/modules/shared/components/details-fields/details-fields.component.scss b/src/app/modules/shared/components/details-fields/details-fields.component.scss
index a4b5f6fbb..66072694b 100644
--- a/src/app/modules/shared/components/details-fields/details-fields.component.scss
+++ b/src/app/modules/shared/components/details-fields/details-fields.component.scss
@@ -1,7 +1,7 @@
 @import '../../../../../styles/colors.scss';
 
 @mixin tagTechnology() {
-  background-color: $modal-button-secondary;
+  background-color: $secondary;
   color: #ffffff;
 
   &:hover {
@@ -11,7 +11,7 @@
 
 .span-width {
   width: 6rem;
-  background-image: $background-pantone;
+  background-color: $primary;
   color: white;
 }
 
diff --git a/src/app/modules/shared/components/month-picker/month-picker.component.scss b/src/app/modules/shared/components/month-picker/month-picker.component.scss
index 01ae0076a..6d2dddcc6 100644
--- a/src/app/modules/shared/components/month-picker/month-picker.component.scss
+++ b/src/app/modules/shared/components/month-picker/month-picker.component.scss
@@ -1,7 +1,7 @@
 @import '../../../../../styles/colors.scss';
 
 .month {
-  background: $header;
+  background: $primary;
   color: white;
   cursor: pointer;
 
@@ -11,5 +11,5 @@
 }
 
 .active {
-  background-color: $item-background;
+  background-color: $primary;
 }
diff --git a/src/app/modules/shared/components/navbar/navbar.component.html b/src/app/modules/shared/components/navbar/navbar.component.html
index ceba11c3f..db02d44c4 100644
--- a/src/app/modules/shared/components/navbar/navbar.component.html
+++ b/src/app/modules/shared/components/navbar/navbar.component.html
@@ -1,4 +1,4 @@
-<nav class="navbar navbar-fixed-top h-100 border-bottom">
+<nav class="navbar navbar-fixed-top h-100">
   <div class="col-10 text-center">
     <app-clock></app-clock>
   </div>
diff --git a/src/app/modules/shared/components/sidebar/sidebar.component.html b/src/app/modules/shared/components/sidebar/sidebar.component.html
index b2c4f5c46..2f8b799ec 100644
--- a/src/app/modules/shared/components/sidebar/sidebar.component.html
+++ b/src/app/modules/shared/components/sidebar/sidebar.component.html
@@ -2,14 +2,14 @@
   <!-- Sidebar -->
   <div id="sidebar-wrapper" *ngIf="itemsSidebar?.length > 0">
     <div class="text-center my-5">
-      <img src="assets/img/ioet-logo-light.png" width="70" height="auto" class="img-fluid" alt="Ioet logo" />
+      <img src="assets/img/ioet.png" width="70" height="auto" class="img-fluid" alt="ioet logo" />
     </div>
     <div class="container">
       <a
         *ngFor="let item of itemsSidebar"
         [routerLink]="item.route"
         routerLinkActive=""
-        class="item-hover text-white item"
+        class="item-hover item"
       >
         <i class="{{ item.icon }}"></i> {{ item.text }}</a
       >
diff --git a/src/app/modules/shared/components/sidebar/sidebar.component.scss b/src/app/modules/shared/components/sidebar/sidebar.component.scss
index 9ebd8d449..1cc1c6840 100644
--- a/src/app/modules/shared/components/sidebar/sidebar.component.scss
+++ b/src/app/modules/shared/components/sidebar/sidebar.component.scss
@@ -5,8 +5,7 @@
 
   #sidebar-wrapper {
     flex: 0 0 14.5rem;
-    box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.3);
-    background-image: $background-gradient-pantone;
+    background-color: #f4f5f7;
     z-index: 1;
     margin-left: -15rem;
     -webkit-transition: margin 0.25s ease-out;
@@ -30,8 +29,9 @@
   }
 
   .background-item-sidebar-active,
+
   .item-hover:hover {
-    background-color: $item-background;
+    color: #16BAC5;
   }
 }
 
@@ -40,7 +40,10 @@
   grid-gap: 20px;
   justify-content: center;
   align-self: center;
+
   .item {
+    font-size: medium;
+    color: #555164;
     display: grid;
     grid-template-columns: 30px 100px;
     align-items: center;
diff --git a/src/app/modules/shared/components/technologies/technologies.component.scss b/src/app/modules/shared/components/technologies/technologies.component.scss
index 0661cba95..98738f7df 100644
--- a/src/app/modules/shared/components/technologies/technologies.component.scss
+++ b/src/app/modules/shared/components/technologies/technologies.component.scss
@@ -24,7 +24,7 @@
 }
 
 .selected-technology {
-  background-color: $modal-button-secondary;
+  background-color: $secondary;
   color: #ffffff;
   border-radius: 0.2rem;
   box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.75);
@@ -44,6 +44,6 @@
 
 .span-width {
   width: 6rem;
-  background-image: $background-pantone;
+  background-color: $primary;
   color: white;
 }
diff --git a/src/app/modules/shared/components/user/user.component.scss b/src/app/modules/shared/components/user/user.component.scss
index 755b93b3b..5f9db9ad1 100644
--- a/src/app/modules/shared/components/user/user.component.scss
+++ b/src/app/modules/shared/components/user/user.component.scss
@@ -11,6 +11,6 @@
 }
 
 .style-click:active {
-  background-image: $button-primary-color;
+  background-color: $primary;
   color: white;
 }
diff --git a/src/app/modules/time-clock/components/entry-fields/entry-fields.component.scss b/src/app/modules/time-clock/components/entry-fields/entry-fields.component.scss
index 59300c381..dc47b027b 100644
--- a/src/app/modules/time-clock/components/entry-fields/entry-fields.component.scss
+++ b/src/app/modules/time-clock/components/entry-fields/entry-fields.component.scss
@@ -2,40 +2,10 @@
 
 .span-width {
   width: 6rem;
-  background-image: $background-pantone;
+  background-color: $primary;
   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;
-}
-
-.ng-autocomplete {
-  width: 100%;
-}
-
-.autocomplete::ng-deep .autocomplete-container {
-  border: 1px solid #ced4da;
-  border-radius: 0 0.25rem 0.25rem 0;
-  box-shadow: none;
-  height: 2rem;
-
-  .input-container {
-    height: 100%;
-
-    input {
-      border-radius: 0.25rem;
-      height: 100%;
-    }
-  }
-}
diff --git a/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.scss b/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.scss
index fc16f9066..61fd4da8d 100644
--- a/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.scss
+++ b/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.scss
@@ -2,6 +2,6 @@
 
 .span-width {
   width: 6rem;
-  background-image: $background-pantone;
+  background-color: $primary;
   color: white;
 }
diff --git a/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.spec.ts b/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.spec.ts
index f3ae1faad..6e5718f1a 100644
--- a/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.spec.ts
+++ b/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.spec.ts
@@ -66,7 +66,6 @@ describe('ProjectListHoverComponent', () => {
 
   it('dispatchs a UpdateEntry action when activeEntry is not null', () => {
     const entry = { id: '123', project_id: 'p1', start_date: new Date().toISOString() };
-    const updatedEntry = { id: '123', project_id: 'p-1' };
     component.activeEntry = entry;
     spyOn(store, 'dispatch');
 
diff --git a/src/app/modules/time-clock/pages/time-clock.component.scss b/src/app/modules/time-clock/pages/time-clock.component.scss
index 7d5d39d3b..a785e559c 100644
--- a/src/app/modules/time-clock/pages/time-clock.component.scss
+++ b/src/app/modules/time-clock/pages/time-clock.component.scss
@@ -1,9 +1,5 @@
 @import '../../../../styles/colors.scss';
 
-.content-ClockIn {
-  padding: 2.1rem 1rem;
-}
-
 .timer {
   align-items: center;
   display: flex;
@@ -11,12 +7,8 @@
   justify-content: center;
 }
 
-.text-clock-in-color {
-  color: $modal-button-secondary;
-}
-
 .span-width {
   width: 6rem;
-  background-image: $background-pantone;
+  background-color: $primary;
   color: white;
 }
diff --git a/src/app/modules/time-clock/store/entry.effects.ts b/src/app/modules/time-clock/store/entry.effects.ts
index bccf7014e..53dbe03c9 100644
--- a/src/app/modules/time-clock/store/entry.effects.ts
+++ b/src/app/modules/time-clock/store/entry.effects.ts
@@ -1,4 +1,4 @@
-import { INFO_SAVED_SUCCESSFULLY, INFO_DELETE_SUCCESSFULLY, UNEXPECTED_ERROR } from './../../shared/messages';
+import { INFO_SAVED_SUCCESSFULLY, INFO_DELETE_SUCCESSFULLY } from './../../shared/messages';
 import { Injectable } from '@angular/core';
 import { ofType, Actions, Effect } from '@ngrx/effects';
 import { Action } from '@ngrx/store';
@@ -37,7 +37,6 @@ export class EntryEffects {
           return new actions.LoadActiveEntrySuccess(activeEntry);
         }),
         catchError((error) => {
-          this.toastrService.success(error);
           return of(new actions.LoadActiveEntryFail(error));
         })
       )
diff --git a/src/app/modules/time-entries/pages/time-entries.component.html b/src/app/modules/time-entries/pages/time-entries.component.html
index 8997d5581..60afd3477 100644
--- a/src/app/modules/time-entries/pages/time-entries.component.html
+++ b/src/app/modules/time-entries/pages/time-entries.component.html
@@ -43,7 +43,7 @@
                 <i class="fa fa-edit fa-xs"></i>
               </button>
               <button
-                class="btn btn-sm btn-secondary ml-2"
+                class="btn btn-sm btn-danger ml-2"
                 data-toggle="modal"
                 data-target="#deleteModal"
                 (click)="removeEntry(entry.id)"
diff --git a/src/app/modules/time-entries/pages/time-entries.component.scss b/src/app/modules/time-entries/pages/time-entries.component.scss
index 1f0583b5e..8b1378917 100644
--- a/src/app/modules/time-entries/pages/time-entries.component.scss
+++ b/src/app/modules/time-entries/pages/time-entries.component.scss
@@ -1,2 +1 @@
-@import '../../../../styles/colors.scss';
 
diff --git a/src/styles.scss b/src/styles.scss
index 82cb7c143..40691c460 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,7 +1,7 @@
 /* You can add global styles to this file, and also import other style files */
 
-@import 'styles/themes/orange-theme';
 @import '~bootstrap/scss/bootstrap';
+@import './styles/colors.scss';
 
 html,
 body {
diff --git a/src/styles/colors.scss b/src/styles/colors.scss
index 3c36e00e5..c5bca0266 100644
--- a/src/styles/colors.scss
+++ b/src/styles/colors.scss
@@ -1,71 +1,53 @@
-$danger-color: #ff3948;
-
-$secondary-pantone: #fd927d;
-
-$background-pantone: linear-gradient(
-  to right top,
-  #ff3663,
-  #ff3b5a,
-  #ff4051,
-  #ff4748,
-  #ff4d3e,
-  #fe5039,
-  #fd5335,
-  #fc5630,
-  #fc5630,
-  #fc5630,
-  #fc5630,
-  #fc5630
-);
-
-$background-gradient-items: linear-gradient(
-  to right,
-  #ff3948,
-  #ff384d,
-  #ff3752,
-  #ff3657,
-  #ff365c,
-  #ff385a,
-  #ff3b59,
-  #ff3d57,
-  #ff434e,
-  #ff4944,
-  #fe4f3a,
-  #fc5630
-);
-
-$succes-color: linear-gradient(
-  to left bottom,
-  #ff3948,
-  #ff3f44,
-  #fe443f,
-  #fe4a3b,
-  #fd4f36,
-  #fd5134,
-  #fc5432,
-  #fc5630,
-  #fc5630,
-  #fc5630,
-  #fc5630,
-  #fc5630
-);
-
-// ** user directly
-
-$background-gradient-pantone: $background-pantone;
-
-$item-background: $secondary-pantone;
-
-$title-card-header-background: $background-pantone;
-
-$button-primary-color: $succes-color;
-
-$button-secondary-color: $danger-color;
-
-$list-item-selected: $background-gradient-items;
-
-$header: $danger-color;
-
-$modal-button-primary: $button-secondary-color;
-
-$modal-button-secondary: #00bcbd;
+$font-size-base: 0.9rem;
+
+$dark: #5c4e63;
+$primary: #00BAEE;
+$secondary: #555164;
+$success: #00CC6C;
+$warning: #FF5E0A;
+$danger: #ff3948;
+$info: #00BAEE;
+
+.bg-primary,
+.btn-primary,
+.badge-primary,
+.alert-primary {
+  background-color: $primary;
+  border: none;
+  &:hover,
+  &:active,
+  &:visited,
+  &:focus {
+      background-color: #0c8aae;
+      border: white;
+  }
+}
+
+.bg-secondary,
+.btn-secondary,
+.badge-secondary,
+.alert-secondary {
+  background-color: $secondary;
+  border: none;
+}
+
+.btn-danger {
+  background-color: $danger;
+  border: none;
+}
+
+
+.thead-orange {
+  background-color: $primary;
+  color: white;
+}
+
+.custom-pagination ::ng-deep .ngx-pagination .current {
+  background-color: $primary;
+  border-radius: 8px;
+}
+
+.btn:focus,
+.btn:active {
+  border: none;
+}
diff --git a/src/styles/themes/_orange-theme.scss b/src/styles/themes/_orange-theme.scss
deleted file mode 100644
index 215e0fb3b..000000000
--- a/src/styles/themes/_orange-theme.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-@import '../colors.scss';
-
-$font-size-base: 0.9rem;
-
-$primary: #fc5630;
-$secondary: #16bac5;
-$success: #16bac5;
-$info: #30bced;
-$light: #ffffff;
-$dark: #5c4e63;
-
-.bg-primary,
-.btn-primary,
-.badge-primary,
-.alert-primary {
-  background-image: $background-pantone;
-  border: none;
-}
-
-.bg-secondary,
-.btn-secondary,
-.badge-secondary,
-.alert-secondary {
-  background-image: linear-gradient(to right, #00cc6c, #00bcbd);
-  border: none;
-}
-
-.thead-orange {
-  background-image: $background-pantone;
-  color: white;
-}
-
-.custom-pagination ::ng-deep .ngx-pagination .current {
-  background-image: $background-pantone;
-  border-radius: 8px;
-}
-
-.btn:focus,
-.btn:active {
-  border: none;
-}

From ca162c5a990e8bcfab163cc67c3f8b3df7bd35c9 Mon Sep 17 00:00:00 2001
From: Diego Tinitana <datinitanao@gmail.com>
Date: Tue, 19 May 2020 15:33:40 -0500
Subject: [PATCH 2/2] fix: #238 Add_error_message_next_to_fields

---
 .../details-fields.component.html             | 65 +++++++++++++++----
 .../details-fields.component.spec.ts          | 41 ++++--------
 .../details-fields.component.ts               | 53 ++++++++-------
 .../pages/time-entries.component.spec.ts      |  2 +-
 .../pages/time-entries.component.ts           |  2 +-
 5 files changed, 98 insertions(+), 65 deletions(-)

diff --git a/src/app/modules/shared/components/details-fields/details-fields.component.html b/src/app/modules/shared/components/details-fields/details-fields.component.html
index 7c27d169a..7d705c669 100644
--- a/src/app/modules/shared/components/details-fields/details-fields.component.html
+++ b/src/app/modules/shared/components/details-fields/details-fields.component.html
@@ -1,18 +1,25 @@
 <form [formGroup]="entryForm" (ngSubmit)="onSubmit()">
   <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">Project</span>
+      <span class="input-group-text span-width">Project</span>
     </div>
     <select
       [class.is-invalid]="project_id.invalid && project_id.touched"
       required
       id="project_id"
-      class="form-control"
+      class="custom-select"
       formControlName="project_id"
     >
-      <option *ngFor="let project of listProjects" value="{{project.id}}">{{ project.name }}</option>
+      <option *ngFor="let project of listProjects" value="{{ project.id }}">{{ project.name }}</option>
     </select>
+    <div
+      class="invalid-feedback"
+      *ngIf="(project_id.dirty || project_id.touched) && project_id.invalid && project_id.errors.required"
+    >
+      Project is required.
+    </div>
   </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>
@@ -21,11 +28,17 @@
       [class.is-invalid]="activity_id.invalid && activity_id.touched"
       required
       id="activity_id"
-      class="form-control"
+      class="custom-select"
       formControlName="activity_id"
     >
-      <option *ngFor="let activity of activities" value="{{activity.id}}">{{ activity.name }}</option>
+      <option *ngFor="let activity of activities" value="{{ activity.id }}">{{ activity.name }}</option>
     </select>
+    <div
+      class="invalid-feedback"
+      *ngIf="(activity_id.dirty || activity_id.touched) && activity_id.invalid && activity_id.errors.required"
+    >
+      Activity is required.
+    </div>
   </div>
 
   <div class="input-group input-group-sm mb-3">
@@ -53,9 +66,15 @@
       class="form-control"
       aria-label="Small"
       aria-describedby="inputGroup-sizing-sm"
-      [class.is-invalid]="start_date.invalid && start_date.touched || hoursValidation"
+      [class.is-invalid]="(start_date.invalid && start_date.touched)"
       required
     />
+    <div
+      class="invalid-feedback"
+      *ngIf="(start_date.dirty || start_date.touched) && start_date.invalid && start_date.errors.required"
+    >
+      Start date is required.
+    </div>
     <div class="input-group-prepend">
       <span class="input-group-text span-width" id="inputGroup-sizing-sm">Start/Hour</span>
     </div>
@@ -65,10 +84,16 @@
       type="text"
       class="form-control"
       aria-label="Small"
-      [class.is-invalid]="start_hour.invalid && start_hour.touched || hoursValidation"
+      [class.is-invalid]="(start_hour.invalid && start_hour.touched)"
       required
       aria-describedby="inputGroup-sizing-sm"
     />
+    <div
+      class="invalid-feedback"
+      *ngIf="(start_hour.dirty || start_hour.touched) && start_hour.invalid && start_hour.errors.required"
+    >
+      Start hour is required.
+    </div>
   </div>
   <div class="input-group input-group-sm mb-3">
     <div class="input-group-prepend">
@@ -84,6 +109,12 @@
       required
       aria-describedby="inputGroup-sizing-sm"
     />
+    <div
+      class="invalid-feedback"
+      *ngIf="(end_date.dirty || end_date.touched) && end_date.invalid && end_date.errors.required"
+    >
+      End date is required.
+    </div>
     <div class="input-group-prepend">
       <span class="input-group-text span-width" id="inputGroup-sizing-sm">End/Hour</span>
     </div>
@@ -93,15 +124,23 @@
       id="end_hour"
       class="form-control"
       aria-label="Small"
-      [class.is-invalid]="end_hour.invalid && end_hour.touched"
+      [class.is-invalid]="(end_hour.invalid && end_hour.touched) || errorDate"
       required
       aria-describedby="inputGroup-sizing-sm"
     />
+    <div
+      class="invalid-feedback"
+      *ngIf="((end_hour.dirty || end_hour.touched) && end_hour.invalid && end_hour.errors.required) || errorDate"
+    >
+      End hour is required.
+    </div>
   </div>
 
-  <app-technologies (technologyAdded)="onTechnologiesUpdated($event)"
-                    (technologyRemoved)="onTechnologiesUpdated($event)"
-                    [selectedTechnologies]="selectedTechnologies">
+  <app-technologies
+    (technologyAdded)="onTechnologiesUpdated($event)"
+    (technologyRemoved)="onTechnologiesUpdated($event)"
+    [selectedTechnologies]="selectedTechnologies"
+  >
   </app-technologies>
 
   <div class="form-group text-left">
@@ -109,8 +148,8 @@
     <textarea formControlName="description" class="form-control" id="NotesTextarea" rows="3"></textarea>
   </div>
   <div class="modal-footer">
-    <button type="submit" class="btn btn-primary">Save</button>
-    <button #closeModal type="button" class="btn btn-secondary" data-dismiss="modal">
+    <button type="submit" class="btn btn-primary" [disabled]="!entryForm.valid">Save</button>
+    <button #closeModal type="button" class="btn btn-secondary" data-dismiss="modal" (click)="close()">
       Close
     </button>
   </div>
diff --git a/src/app/modules/shared/components/details-fields/details-fields.component.spec.ts b/src/app/modules/shared/components/details-fields/details-fields.component.spec.ts
index a17b1a0d2..c67f9bfce 100644
--- a/src/app/modules/shared/components/details-fields/details-fields.component.spec.ts
+++ b/src/app/modules/shared/components/details-fields/details-fields.component.spec.ts
@@ -140,6 +140,8 @@ describe('DetailsFieldsComponent', () => {
   });
 
   it('should emit ngOnChange with new data', () => {
+    const childComponent = jasmine.createSpyObj('ChildComponent', ['closeModal']);
+    component.closeModal = childComponent;
     const formValue = {
       project_id: '',
       activity_id: '',
@@ -157,6 +159,8 @@ describe('DetailsFieldsComponent', () => {
   });
 
   it('should call createError ', () => {
+    const childComponent = jasmine.createSpyObj('ChildComponent', ['closeModal']);
+    component.closeModal = childComponent;
     mockEntriesCreateErrorSelector = store.overrideSelector(getCreateError, false);
     spyOn(store, 'dispatch');
     component.ngOnInit();
@@ -164,6 +168,8 @@ describe('DetailsFieldsComponent', () => {
   });
 
   it('should call updateError ', () => {
+    const childComponent = jasmine.createSpyObj('ChildComponent', ['closeModal']);
+    component.closeModal = childComponent;
     mockEntriesUpdateErrorSelector = store.overrideSelector(getUpdateError, false);
     spyOn(store, 'dispatch');
     component.ngOnInit();
@@ -172,44 +178,25 @@ describe('DetailsFieldsComponent', () => {
 
   it('should emit saveEntry event', () => {
     spyOn(component.saveEntry, 'emit');
-    component.onSubmit();
-    const data = {
+    component.entryForm.setValue({
       project_id: '',
       activity_id: '',
-      technologies: [],
-      description: '',
-      start_date: 'T00:00',
-      end_date: 'T00:00',
       uri: '',
-    };
-    expect(component.saveEntry.emit).toHaveBeenCalledWith(data);
-  });
-
-  it('should emit saveEntry without project and activite fields event', () => {
-    spyOn(component.saveEntry, 'emit');
-    component.entryForm.setValue({
-      project_id: 'id',
-      activity_id: 'fc5fab41-a21e-4155-9d05-511b956ebd05',
-      uri: '',
-      start_date: '',
-      end_date: '',
+      start_date: '2020-02-05',
+      end_date: '2020-02-05',
       start_hour: '00:00',
-      end_hour: '00:00',
+      end_hour: '00:01',
       description: '',
       technology: '',
     });
-    component.activities = [
-      { id: 'fc5fab41-a21e-4155-9d05-511b956ebd05', tenant_id: 'ioet', name: 'activity1', description: '' },
-    ];
     component.onSubmit();
-    fixture.detectChanges();
     const data = {
-      project_id: 'id',
-      activity_id: 'fc5fab41-a21e-4155-9d05-511b956ebd05',
+      project_id: '',
+      activity_id: '',
       technologies: [],
       description: '',
-      start_date: 'T00:00',
-      end_date: 'T00:00',
+      start_date: '2020-02-05T00:00',
+      end_date: '2020-02-05T00:01',
       uri: '',
     };
     expect(component.saveEntry.emit).toHaveBeenCalledWith(data);
diff --git a/src/app/modules/shared/components/details-fields/details-fields.component.ts b/src/app/modules/shared/components/details-fields/details-fields.component.ts
index e37be1849..4fe089ecb 100644
--- a/src/app/modules/shared/components/details-fields/details-fields.component.ts
+++ b/src/app/modules/shared/components/details-fields/details-fields.component.ts
@@ -35,7 +35,6 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
   @Input() formType: string;
   @Output() saveEntry = new EventEmitter();
   @ViewChild('closeModal') closeModal: ElementRef;
-  @ViewChild('list') list: ElementRef;
   entryForm: FormGroup;
   selectedTechnologies: string[] = [];
   isLoading = false;
@@ -43,14 +42,9 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
   activities: Activity[] = [];
   keyword = 'name';
   showlist: boolean;
-  hoursValidation: boolean;
+  errorDate: boolean;
 
   constructor(private formBuilder: FormBuilder, private store: Store<Merged>, private renderer: Renderer2) {
-    this.renderer.listen('window', 'click', (e: Event) => {
-      if (this.showlist && !this.list.nativeElement.contains(e.target)) {
-        this.showlist = false;
-      }
-    });
     this.entryForm = this.formBuilder.group({
       project_id: '',
       activity_id: '',
@@ -65,7 +59,6 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
   }
 
   ngOnInit(): void {
-
     this.store.dispatch(new projectActions.LoadProjects());
     const projects$ = this.store.pipe(select(getProjects));
     projects$.subscribe((response) => {
@@ -95,7 +88,6 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
   }
 
   ngOnChanges(): void {
-    this.hoursValidation = false;
     if (this.entryToEdit) {
       this.selectedTechnologies = this.entryToEdit.technologies;
       this.entryForm.setValue({
@@ -110,21 +102,25 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
         technology: '',
       });
     } else {
-      this.selectedTechnologies = [];
-      this.entryForm.setValue({
-        project_id: '',
-        activity_id: '',
-        description: '',
-        start_date: formatDate(new Date(), 'yyyy-MM-dd', 'en'),
-        start_hour: '00:00',
-        end_date: formatDate(new Date(), 'yyyy-MM-dd', 'en'),
-        end_hour: '00:00',
-        uri: '',
-        technology: '',
-      });
+      this.cleanForm();
     }
   }
 
+  cleanForm() {
+    this.selectedTechnologies = [];
+    this.entryForm.setValue({
+      project_id: '',
+      activity_id: '',
+      description: '',
+      start_date: formatDate(new Date(), 'yyyy-MM-dd', 'en'),
+      start_hour: '00:00',
+      end_date: formatDate(new Date(), 'yyyy-MM-dd', 'en'),
+      end_hour: '00:00',
+      uri: '',
+      technology: '',
+    });
+  }
+
   onTechnologiesUpdated($event: string[]) {
     this.selectedTechnologies = $event;
   }
@@ -153,8 +149,13 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
   }
 
   closeEntryModal() {
+    this.close();
+    this.closeModal.nativeElement.click();
+  }
+
+  close() {
     this.entryForm.reset();
-    this.closeModal?.nativeElement?.click();
+    this.cleanForm();
   }
 
   onSubmit() {
@@ -167,6 +168,12 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
       end_date: `${this.entryForm.value.end_date}T${this.entryForm.value.end_hour}`,
       uri: this.entryForm.value.uri,
     };
-    this.saveEntry.emit(entry);
+
+    if (new Date(entry.start_date) < new Date(entry.end_date)) {
+      this.errorDate = false;
+      this.saveEntry.emit(entry);
+    } else {
+      this.errorDate = true;
+    }
   }
 }
diff --git a/src/app/modules/time-entries/pages/time-entries.component.spec.ts b/src/app/modules/time-entries/pages/time-entries.component.spec.ts
index 0beabdd18..668a76d61 100644
--- a/src/app/modules/time-entries/pages/time-entries.component.spec.ts
+++ b/src/app/modules/time-entries/pages/time-entries.component.spec.ts
@@ -127,7 +127,7 @@ describe('TimeEntriesComponent', () => {
     };
     mockEntriesSelector = store.overrideSelector(allEntries, [newEntry]);
     component.ngOnInit();
-    expect(component.dataByMonth.length).toEqual(1);
+    expect(component.dataByMonth.length).toEqual(0);
   }));
 
   it('should call dataByMonth without new date in ngOnInit()', async(() => {
diff --git a/src/app/modules/time-entries/pages/time-entries.component.ts b/src/app/modules/time-entries/pages/time-entries.component.ts
index c11b46674..0ac26563f 100644
--- a/src/app/modules/time-entries/pages/time-entries.component.ts
+++ b/src/app/modules/time-entries/pages/time-entries.component.ts
@@ -26,7 +26,7 @@ export class TimeEntriesComponent implements OnInit {
     dataByMonth$.subscribe((response) => {
       this.entryList = response;
       this.dataByMonth = this.entryList.reduce((acc: any, entry: any) => {
-        if (new Date(entry.start_date).getMonth() === new Date().getMonth()) {
+        if (new Date(entry.start_date).getMonth() === new Date().getMonth() && entry.end_date) {
           const item = { ...entry };
           return [...acc, item];
         }