feat: add new colors

Author: ByPort

src/app/components/blank-layout-card/blank-layout-card.component.scss

@@ -11,8 +11,7 @@
   font-size: 14px;
 
   .mdl-card__blank-layout-card.mdl-card {
-    width: 450px;
-    min-height: 500px;
+    max-width: 450px;
     margin: auto;
 
     .mdl-card__supporting-text {

src/app/components/message-menu/message-menu.component.html

@@ -10,7 +10,7 @@
   <li *ngFor="let item of messages" class="mdl-menu__item mdl-list__item mdl-list__item--two-line list__item--border-top">
     <span class="mdl-list__item-primary-content">
       <span class="mdl-list__item-avatar"
-            ngClass="background-color--{{item.color}}">
+            ngClass="background-color--{{ item.color }}">
         <span class="text">{{ item.icon }}</span>
       </span>
       <span>{{ item.name }}</span>

src/app/components/message-menu/message-menu.component.scss

@@ -5,6 +5,10 @@
 }
 
 .messages-dropdown {
+  &.mdl-menu {
+    width: 310px;
+  }
+
   .label {
     color: $messages-dropdown-label-text-color;
   }

src/app/components/notification-menu/notification-menu.component.html

@@ -11,7 +11,7 @@
   <li class="mdl-menu__item mdl-list__item list__item--border-top"
       *ngFor="let item of notifications">
     <span class="mdl-list__item-primary-content">
-      <span class="mdl-list__item-avatar" ngClass="background-color--{{item.color}}">
+      <span class="mdl-list__item-avatar" ngClass="background-color--{{ item.color }}">
         <i class="material-icons">{{ item.icon }}</i>
       </span>
       <span>{{ item.text }}</span>

src/app/components/notification-menu/notification-menu.component.scss

@@ -5,6 +5,8 @@
 }
 
 .notifications-dropdown.mdl-list {
+  width: 310px;
+
   .mdl-list__item {
     @include typo-dropdown-menu-li;
 

src/app/layouts/blank-layout/blank-layout.component.scss

@@ -1,4 +1,11 @@
+@import '~theme/helpers';
+
 .mdl-layout .mdl-layout__content {
   padding: 16px;
   display: flex;
 }
+
+// FIXME: responsibility leak
+.not-found .mdl-layout__content {
+  background-image: url('#{$image-path}/404.svg');
+}

src/app/layouts/blank-layout/blank-layout.component.ts

@@ -1,8 +1,18 @@
-import { Component } from '@angular/core';
+import { Component, HostBinding } from '@angular/core';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-blank-layout',
   styleUrls: ['./blank-layout.component.scss'],
   templateUrl: './blank-layout.component.html',
 })
-export class BlankLayoutComponent { }
+export class BlankLayoutComponent {
+  // FIXME: responsibility leak
+  @HostBinding('class.not-found') private get notFound() {
+    return this.router.url === '/pages/404';
+  }
+
+  constructor(
+    private router: Router,
+  ) { }
+}

src/app/pages/dashboard/line-chart/line-chart.component.ts

@@ -30,19 +30,19 @@ export class LineChartComponent extends BaseLineChartComponent {
       {
         values: [],
         key: 'Awesome',
-        color: 'rgb(80, 150, 215)',
+        color: '#00bcd4',
       },
       {
         values: [],
         key: 'Good',
         fillOpacity: 0.00001,
         area: true,
-        color: 'rgb(0, 188, 212)',
+        color: '#ffc107',
       },
       {
         values: [],
         key: 'Fail',
-        color: 'rgb(255, 82, 82)',
+        color: '#f44336',
       },
     ];
     this.rawData = [

src/app/pages/dashboard/pie-chart/pie-chart.component.ts

@@ -23,12 +23,12 @@ export class PieChartComponent extends BasePieChartComponent implements OnInit {
 
   public ngOnInit() {
     const colors = [
-      'rgba(96, 196, 150, 1)',
-      'rgba(80, 150, 215, 1)',
-      'rgba(0, 188, 212, 1)',
-      'rgba(116, 199, 209, 1)',
-      'rgba(255, 82, 82, 1)',
-      'rgba(0, 0, 0, 0)',
+      '#03a9f4',
+      '#f44336',
+      '#ff9800',
+      '#ffc107',
+      '#00bcd4',
+      '',
     ];
 
     const rawData = this.pieChartService.getDaySchedule();

src/app/pages/dashboard/table-card/table-card.component.html

@@ -10,7 +10,7 @@
       <td class="mdl-data-table__cell--non-numeric">
         <span *ngFor="let resp of item.responsible"
         class="label label--mini"
-        ngClass="background-color--{{resp.color}}">{{ resp.name }}</span>
+        [ngClass]="resp.color">{{ resp.name }}</span>
       </td>
       <td class="mdl-data-table__cell--non-numeric">{{ item.email }}</td>
       <td class="mdl-data-table__cell--non-numeric">{{ item.deadline }}</td>
@@ -21,6 +21,7 @@
       <td class="mdl-data-table__cell--non-numeric task-done"
       *ngIf="item.progress >= 100">
         <i class="material-icons">done</i>
+        <span>Complete</span>
       </td>
     </tr>
   </tbody>