fix: #257 fix button styles

enriquezrene · enriquezrene · commit 62b39e0c61ff · 2020-05-19T15:56:18.000-05:00
diff --git 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
@@ -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
@@ -0,0 +1 @@
+@import '../../../../../styles/colors.scss';
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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1 +1 @@
-@import '../../../../../../../styles/themes/orange-theme';
+@import '../../../../../../../styles/colors.scss';
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
@@ -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
@@ -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
@@ -1 +1 @@
-@import '../../../../../../../styles/themes/orange-theme';
+@import '../../../../../../../styles/colors.scss';
diff --git 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/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/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
@@ -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/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
@@ -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
@@ -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
@@ -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/pages/time-clock.component.scss b/src/app/modules/time-clock/pages/time-clock.component.scss
@@ -1,22 +1,14 @@
 @import '../../../../styles/colors.scss';
 
-.content-ClockIn {
-  padding: 2.1rem 1rem;
-}
-
 .timer {
   align-items: center;
   display: flex;
   height: 100%;
   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
@@ -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
@@ -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
@@ -1,2 +1 @@
-@import '../../../../styles/colors.scss';
 
diff --git 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
@@ -1,89 +1,11 @@
-// $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
-// );
-
-
-// bootstrap-colors
-// $primary: linear-gradient(to left bottom,
-//   #00BAEE,
-//   #2480FF);
-
-// $secondary: linear-gradient(to left bottom,
-//   #555164,
-//   #555164);
-
-// $success: linear-gradient(to left bottom,
-//   #555164,
-//   #555164);
-
-// $warning: linear-gradient(to left bottom,
-//   #FF5E0A,
-//   #FF5E0A);
-
-// $info: linear-gradient(to left bottom,
-//   #00BAEE,
-//   #00BAEE);
-
-// $primary: #00BAEE;
-
-// $background-gradient-pantone: $background-pantone;
-
-// $item-background: $secondary-pantone;
-
-// $title-card-header-background: $background-pantone;
-
-// $button-primary-color: $primary;
-
-// $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,
@@ -92,27 +14,52 @@ $info: #00BAEE;
 .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-image: linear-gradient(to right, #00cc6c, #00bcbd);
+  background-color: $secondary;
+  border: none;
+}
+
+.btn-danger {
+  background-color: $danger;
   border: none;
 }
 
+
 .thead-orange {
-  background-image: $primary;
+  background-color: $primary;
   color: white;
 }
 
 .custom-pagination ::ng-deep .ngx-pagination .current {
-  background-image: $primary;
+  background-color: $primary;
   border-radius: 8px;
 }
 
 .btn:focus,
 .btn:active {
   border: none;
 }
+
+
+// button {
+//   background-color: white;
+//   border: 1px solid #128fc2;
+//   color: #128fc2;
+//   &:hover,
+//   &:focus {
+//       background-color: #128fc2;
+//       border: white;
+//       color: white
+//   }
diff --git a/src/styles/themes/_orange-theme.scss b/src/styles/themes/_orange-theme.scss

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`@import '../../../../../styles/colors.scss';`
`2`	`2`
`3`	`3`	`.style-list-project {`
`4`		`- background-image: $background-gradient-items;`
	`4`	`+ background-color: $primary;`
`5`	`5`	`color: white;`
`6`	`6`	`}`
`7`	`7`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+@import '../../../../../styles/colors.scss';`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+@import '../../../../../../../styles/colors.scss';`
Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-@import '../../../../../../../styles/themes/orange-theme';`
	`1`	`+@import '../../../../../../../styles/colors.scss';`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`@import '../../../../../styles/colors.scss';`
`2`	`2`
`3`	`3`	`.nav-active {`
`4`		`- color: $modal-button-secondary;`
	`4`	`+ color: $secondary;`
`5`	`5`	`}`
`6`	`6`	`.nav-item > a:hover {`
`7`	`7`	`opacity: 0.6;`