From 6b108586b3168f3beb6d639c21f1fa61415476fb Mon Sep 17 00:00:00 2001
From: PhilippeMorier <morier.dev@outlook.com>
Date: Wed, 18 Mar 2020 16:21:31 +0100
Subject: [PATCH] feat(ui): introduce theming & theme progress-spinner

---
 apps/frontend/src/themes.scss                      | 14 +++++++++++---
 .../progress-spinner/_progress-spinner-theme.scss  | 14 ++++++++++++++
 .../progress-spinner.component.scss                |  8 ++++++--
 .../progress-spinner/progress-spinner.component.ts |  4 ++--
 libs/ui/src/lib/theming/_all-theme.scss            |  5 +++++
 5 files changed, 38 insertions(+), 7 deletions(-)
 create mode 100644 libs/ui/src/lib/progress-spinner/_progress-spinner-theme.scss
 create mode 100644 libs/ui/src/lib/theming/_all-theme.scss

diff --git a/apps/frontend/src/themes.scss b/apps/frontend/src/themes.scss
index 4d8eace3..1ecff7e2 100644
--- a/apps/frontend/src/themes.scss
+++ b/apps/frontend/src/themes.scss
@@ -20,16 +20,24 @@ $app-accent: mat-palette($mat-pink, A200, A100, A400); // stylelint-disable-line
 $app-warn: mat-palette($mat-red);
 
 // Create the theme object (a Sass map containing all of the palettes).
-$app-theme: mat-light-theme($app-primary, $app-accent, $app-warn);
+//$app-theme: mat-light-theme($app-primary, $app-accent, $app-warn);
 
 // Include theme styles for core and each component used in your app.
 // Alternatively, you can import and @include the theme mixins for each component
 // that you are using.
 
+@import 'libs/ui/src/lib/theming/all-theme';
+
 .app-light-theme {
-  @include angular-material-theme(mat-light-theme($app-primary, $app-accent, $app-warn));
+  $light-theme: mat-light-theme($app-primary, $app-accent, $app-warn);
+
+  @include angular-material-theme($light-theme);
+  @include ui-lib-theme($light-theme);
 }
 
 .app-dark-theme {
-  @include angular-material-theme(mat-dark-theme($app-primary, $app-accent, $app-warn));
+  $dark-theme: mat-dark-theme($app-primary, $app-accent, $app-warn);
+
+  @include angular-material-theme($dark-theme);
+  @include ui-lib-theme($dark-theme);
 }
diff --git a/libs/ui/src/lib/progress-spinner/_progress-spinner-theme.scss b/libs/ui/src/lib/progress-spinner/_progress-spinner-theme.scss
new file mode 100644
index 00000000..38bbd88b
--- /dev/null
+++ b/libs/ui/src/lib/progress-spinner/_progress-spinner-theme.scss
@@ -0,0 +1,14 @@
+@import '~@angular/material/theming';
+
+@mixin ui-progress-spinner-theme($theme) {
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+
+  ui-progress-spinner {
+    color: mat-color($foreground, text);
+
+    mat-progress-spinner {
+      background-color: mat-color($background, background);
+    }
+  }
+}
diff --git a/libs/ui/src/lib/progress-spinner/progress-spinner.component.scss b/libs/ui/src/lib/progress-spinner/progress-spinner.component.scss
index 5dccc8a6..5b8e7e46 100644
--- a/libs/ui/src/lib/progress-spinner/progress-spinner.component.scss
+++ b/libs/ui/src/lib/progress-spinner/progress-spinner.component.scss
@@ -4,8 +4,12 @@
   align-items: center;
 }
 
+mat-progress-spinner {
+  border-radius: 50%;
+}
+
 .value {
   position: absolute;
-  margin-top: 50px;
-  transform: translate(0, -50%);
+  left: 50%;
+  transform: translate(-50%, 70%);
 }
diff --git a/libs/ui/src/lib/progress-spinner/progress-spinner.component.ts b/libs/ui/src/lib/progress-spinner/progress-spinner.component.ts
index fab06780..b2fc3f3c 100644
--- a/libs/ui/src/lib/progress-spinner/progress-spinner.component.ts
+++ b/libs/ui/src/lib/progress-spinner/progress-spinner.component.ts
@@ -4,8 +4,6 @@ import { Nil } from '@talus/shared';
 @Component({
   selector: 'ui-progress-spinner',
   template: `
-    <div *ngIf="value" class="value">{{ value }}%</div>
-
     <mat-progress-spinner
       class="example-margin"
       [color]="color"
@@ -13,6 +11,8 @@ import { Nil } from '@talus/shared';
       [value]="value"
     ></mat-progress-spinner>
 
+    <h1 *ngIf="value" class="value">{{ value }}%</h1>
+
     <div *ngIf="status">{{ status }}</div>
   `,
   styleUrls: ['./progress-spinner.component.scss'],
diff --git a/libs/ui/src/lib/theming/_all-theme.scss b/libs/ui/src/lib/theming/_all-theme.scss
new file mode 100644
index 00000000..7405b5f2
--- /dev/null
+++ b/libs/ui/src/lib/theming/_all-theme.scss
@@ -0,0 +1,5 @@
+@import '../progress-spinner/progress-spinner-theme';
+
+@mixin ui-lib-theme($theme) {
+  @include ui-progress-spinner-theme($theme);
+}