fix(color-picker): use Roboto in color-picker,fix border-radius and e…

…levations,'' as EMPTY_COLOR
tiaguinho · Aug 15, 2020 · c1b2c63 · c1b2c63
1 parent e6529a1
commit c1b2c63
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 17 deletions.
diff --git a/src/demo-app/app/color-picker/color-picker.module.ts b/src/demo-app/app/color-picker/color-picker.module.ts
@@ -30,7 +30,7 @@ import { MccColorPickerModule } from '../../../lib/color-picker/public_api';
     MatTabsModule,
     MccColorPickerModule.forRoot({
       used_colors: ['#000000', '#123456', '#777666'],
-      empty_color: null
+      empty_color: ''
     })
   ],
   declarations: [ColorPickerComponent, ColorPickerApiComponent, ColorPickerExamplesComponent]

diff --git a/src/lib/color-picker/color-picker-selector.component.scss b/src/lib/color-picker/color-picker-selector.component.scss
@@ -60,12 +60,12 @@ canvas {
   font-weight: bold;
 
   &.black {
-    color: #100214 !important;
+    color: rgba(0,0,0,0.87) !important;
     label.mat-form-field-label {
-      color: #100214 !important;
+      color: rgba(0,0,0,0.87) !important;
     }
     .mat-form-field-underline {
-      background-color: #100214 !important;
+      background-color: rgba(0,0,0,0.87) !important;
     }
   }
   &.white {

diff --git a/src/lib/color-picker/color-picker.component.html b/src/lib/color-picker/color-picker.component.html
@@ -28,7 +28,7 @@
 
 <!-- color picker component content -->
 <ng-template cdkPortal #overlayPanel="cdkPortal">
-  <div class="mcc-color-picker-overlay mat-elevation-z6" [ngClass]="{ 'alpha-enabled': alpha }" role="dialog" aria-label="Color picker">
+  <div class="mcc-color-picker-overlay mat-elevation-z4" [ngClass]="{ 'alpha-enabled': alpha }" role="dialog" aria-label="Color picker">
     <mcc-color-picker-selector
       *ngIf="!hideColorPickerSelector"
       [selectedColor]="tmpSelectedColor$ | async"

diff --git a/src/lib/color-picker/color-picker.component.scss b/src/lib/color-picker/color-picker.component.scss
@@ -1,5 +1,3 @@
-@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
-
 .btn-picker {
   width: 25px;
   height: 25px;
@@ -25,7 +23,7 @@
   flex-direction: column;
   padding: 0;
   background: #ffffff;
-  font-family: 'Open Sans', sans-serif;
+  font-family: 'Roboto', sans-serif;
   &.alpha-enabled {
     width: 316px;
   }

diff --git a/src/lib/timer-picker/timer-picker.component.html b/src/lib/timer-picker/timer-picker.component.html
@@ -11,7 +11,7 @@
 <ng-template *ngIf="!connected" [cdkPortalOutlet]="panelComponent"></ng-template>
 
 <ng-template cdkPortal #panelComponent="cdkPortal">
-  <div class="mcc-timer-picker-overlay mat-elevation-z6" role="dialog" aria-label="Timer picker">
+  <div class="mcc-timer-picker-overlay mat-elevation-z4" role="dialog" aria-label="Timer picker">
 
     <div class="mcc-timer-picker-header mat-primary">
       <button mat-icon-button class="mcc-timer-picker-hours" [ngClass]="{ 'mcc-active': focus === 'hour' }" (click)="focus = 'hour'">

diff --git a/src/lib/timer-picker/timer-picker.component.scss b/src/lib/timer-picker/timer-picker.component.scss
@@ -2,24 +2,30 @@
 
 $primary: #00796b;
 
+$border-radius: 4px;
+
 .mcc-timer-picker-overlay {
+  font-family: 'Roboto', sans-serif;
   width: 290px;
   height: 400px;
+  border-radius: $border-radius;
+  background-color: #ffffff // TODO: use theme background color (support dark theme)
 }
 
 .mcc-timer-picker-header {
   display: flex;
   width: 220px;
   height: 65px;
   padding: 10px 0 5px 70px;
+  border-top-left-radius: $border-radius;
+  border-top-right-radius: $border-radius;
   background: $primary;
 }
 
 .mcc-timer-picker-hours,
 .mcc-timer-picker-minutes {
   width: 63px;
   height: 63px;
-  font-family: 'Roboto', sans-serif;
   font-size: 50px;
   font-weight: 400;
   color: rgba(255, 255, 255, 0.3);
@@ -49,7 +55,6 @@ $primary: #00796b;
 }
 
 .mcc-timer-picker-separator {
-  font-family: 'Roboto', sans-serif;
   font-size: 43px;
   font-weight: 400;
   color: rgba(255, 255, 255, 0.3);
@@ -84,7 +89,6 @@ $primary: #00796b;
   width: inherit;
   height: 260px;
   padding: 15px 0 5px 0;
-  background-color: #ffffff;
 }
 
 .mcc-timer-picker-clock {
@@ -303,14 +307,9 @@ $primary: #00796b;
 .mcc-timer-picker-actions {
   display: flex;
   padding: 4px;
-  background-color: #ffffff;
 
   button {
-    color: #100214;
     text-transform: uppercase;
-    font-family: 'Roboto', sans-serif;
-    font-size: 14px;
-    font-weight: 400;
   }
 }