scss improvments

src/app/pages/general/general.component.scss

@@ -1,3 +0,0 @@
-.text-warning {
-  color: darkred;
-}

src/app/pages/general/general.component.ts

@@ -2,8 +2,7 @@ import {Component, OnInit} from '@angular/core';
 
 @Component({
   selector: 'app-imprint',
-  templateUrl: './general.imprint.html',
-  styleUrls: ['./general.component.scss']
+  templateUrl: './general.imprint.html'
 })
 export class ImprintComponent implements OnInit {
 
@@ -17,8 +16,7 @@ export class ImprintComponent implements OnInit {
 
 @Component({
   selector: 'app-privacy-policy',
-  templateUrl: './general.privacy-policy.html',
-  styleUrls: ['./general.component.scss']
+  templateUrl: './general.privacy-policy.html'
 })
 export class PrivacyPolicyComponent implements OnInit {
 
@@ -32,8 +30,7 @@ export class PrivacyPolicyComponent implements OnInit {
 
 @Component({
   selector: 'app-terms-of-service',
-  templateUrl: './general.terms-of-service.html',
-  styleUrls: ['./general.component.scss']
+  templateUrl: './general.terms-of-service.html'
 })
 export class TermsOfServiceComponent implements OnInit {
 

src/app/pages/notfound/notfound.component.html

@@ -1,4 +1,4 @@
-<mat-card>
+<mat-card class="accent">
     <mat-card-header>
         <mat-card-title>404</mat-card-title>
         <mat-card-subtitle>{{'not-found' | i18n}}</mat-card-subtitle>

src/app/pages/notfound/notfound.component.scss

@@ -1,15 +0,0 @@
-@import './../../../variables.scss';
-
-mat-card-header {
-  background-color: $accent !important;
-  padding: 16px ;
-  padding-bottom: 0;
-}
-
-mat-card {
-  padding: 0;
-}
-
-mat-card-content {
-  padding: 16px;
-}

src/app/pages/notfound/notfound.component.ts

@@ -2,8 +2,7 @@ import { Component, OnInit } from '@angular/core';
 
 @Component({
   selector: 'app-notfound',
-  templateUrl: './notfound.component.html',
-  styleUrls: ['./notfound.component.scss']
+  templateUrl: './notfound.component.html'
 })
 export class NotfoundComponent implements OnInit {
 

src/app/pages/unavailable/unavailable.component.html

@@ -1,4 +1,4 @@
-<mat-card>
+<mat-card class="warn">
     <mat-card-header>
         <mat-card-title>503</mat-card-title>
         <mat-card-subtitle>{{'service-unavailable' | i18n}}</mat-card-subtitle>

src/app/pages/unavailable/unavailable.component.scss

@@ -1,15 +0,0 @@
-@import './../../../variables.scss';
-
-mat-card-header {
-  background-color: $warn !important;
-  padding: 16px ;
-  padding-bottom: 0;
-}
-
-mat-card {
-  padding: 0;
-}
-
-mat-card-content, mat-card-actions {
-  padding: 16px !important;
-}

src/app/pages/unavailable/unavailable.component.ts

@@ -3,8 +3,7 @@ import { Location } from '@angular/common'
 
 @Component({
   selector: 'app-unavailable',
-  templateUrl: './unavailable.component.html',
-  styleUrls: ['./unavailable.component.scss']
+  templateUrl: './unavailable.component.html'
 })
 export class UnavailableComponent implements OnInit {
 

src/app/pages/user/user.component.html

@@ -6,7 +6,7 @@
   <app-profilefields [profileFields]="profileFields"></app-profilefields>
 </div>
 
-<mat-card *ngIf="error">
+<mat-card class="warn" *ngIf="error">
   <mat-card-header>
     <mat-card-title>{{error.status}}</mat-card-title>
     <mat-card-subtitle>{{'user.unavailable' | i18n}}</mat-card-subtitle>

src/app/pages/user/user.component.ts

@@ -6,8 +6,7 @@ import {ProfileService} from '../../services/profile.service';
 
 @Component({
   selector: 'app-user',
-  templateUrl: './user.component.html',
-  styleUrls: ['./user.component.scss']
+  templateUrl: './user.component.html'
 })
 export class UserComponent implements OnInit {
 

src/styles.scss

@@ -191,6 +191,72 @@ mat-sidenav-container {
 }
 
 .text-warning {
-  color: darkred;
+  color: $warn;
 }
 
+mat-card.warn,
+mat-card.accent {
+
+  padding: 0;
+
+  mat-card-content {
+    padding: 16px;
+
+  }
+
+  mat-card-header {
+    padding: 16px;
+    padding-bottom: 0;
+  }
+
+  mat-card-actions {
+    padding: 16px !important;
+    padding-top: 0 !important;
+  }
+
+}
+
+mat-card.warn mat-card-header {
+  background-color: $warn !important;
+}
+
+mat-card.accent mat-card-header {
+  background-color: $accent !important;
+}
+
+
+table {
+  border: 0;
+  border-spacing: 0;
+  width: 100%;
+
+  th,
+  td,
+  td {
+    color: rgba(0, 0, 0, 0.87);
+    font-size: 14px;
+    border: 0;
+    padding: 14px;
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+    border-bottom-color: rgba(0, 0, 0, 0.12);
+  }
+
+  th:first-of-type,
+  td:first-of-type,
+  td:first-of-type {
+    padding-left: 24px;
+  }
+
+  thead {
+    tr {
+      height: 56px;
+
+      th {
+        color: rgba(0, 0, 0, 0.54);
+        font-size: 12px;
+        font-weight: 500;
+      }
+    }
+  }
+}

src/variables.scss

@@ -17,4 +17,4 @@ $dark-warn: mat-palette($mat-deep-orange);
   $primary: mat-color($dark-primary);
   $accent: mat-color($dark-accent);
   $warn: mat-color($dark-warn);
-}
+}