1 files changed, 241 insertions, 26 deletions
diff --git a/frontend/src/custom-theme.scss b/frontend/src/custom-theme.scss
index a6538c37..e8626080 100644
--- a/frontend/src/custom-theme.scss
+++ b/frontend/src/custom-theme.scss
@@ -1,35 +1,250 @@
+/**
+* Generated theme by Material Theme Generator
+* https://materialtheme.arcsine.dev
+* Fork at: https://materialtheme.arcsine.dev/?c=YHBhbGV0dGU$YHByaW1hcnk$YF48IzAwYThlOCIsIj9lcjwjYjNlNWY4IiwiO2VyPCMwMDhkZGV$LCIlPmBePCMwMDYzYWIiLCI~ZXI8I2IzZDBlNiIsIjtlcjwjMDA0Nzkxfiwid2Fybj5gXjwjZjliN2I3IiwiP2VyPCNmZGU5ZTkiLCI7ZXI8I2Y2OWY5Zn4sIj9UZXh0PCNkZmQ3ZDciLCI~PTwjMDAzNDU5IiwiO1RleHQ8I2RmZDdkNyIsIjs9PCMwMDM0NTl$LCJmb250cz5bYEA8KC00fixgQDwoLTN$LGBAPCgtMn4sYEA8KC0xfixgQDxoZWFkbGluZX4sYEA8dGl0bGV$LGBAPHN1YiktMn4sYEA8c3ViKS0xfixgQDxib2R5LTJ$LGBAPGJvZHktMX4sYEA8YnV0dG9ufixgQDxjYXB0aW9ufixgQDxpbnB1dCIsInNpemU$bnVsbH1dLCJpY29uczxGaWxsZWQiLCI~bmVzcz5mYWxzZSwidmVyc2lvbj4xM30=
+*/
 
-// Custom Theming for Angular Material
-// For more information: https://material.angular.io/guide/theming
 @use '@angular/material' as mat;
-// Plus imports for other components in your app.
-
 // Include the common styles for Angular Material. We include this here so that you only
 // have to load a single css file for Angular Material in your app.
-// Be sure that you only ever include this mixin once!
-@include mat.core();
+// Fonts
+@import 'https://fonts.googleapis.com/icon?family=Material+Icons';
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');
+$fontConfig: ( display-4: mat.define-typography-level(112px, 112px, 300, 'Roboto', -0.0134em),
+display-3: mat.define-typography-level(56px, 56px, 400, 'Roboto', -0.0089em),
+display-2: mat.define-typography-level(45px, 48px, 400, 'Roboto', 0.0000em),
+display-1: mat.define-typography-level(34px, 40px, 400, 'Roboto', 0.0074em),
+headline: mat.define-typography-level(24px, 32px, 400, 'Roboto', 0.0000em),
+title: mat.define-typography-level(20px, 32px, 500, 'Roboto', 0.0075em),
+subheading-2: mat.define-typography-level(16px, 28px, 400, 'Roboto', 0.0094em),
+subheading-1: mat.define-typography-level(15px, 24px, 500, 'Roboto', 0.0067em),
+body-2: mat.define-typography-level(14px, 24px, 500, 'Roboto', 0.0179em),
+body-1: mat.define-typography-level(14px, 20px, 400, 'Roboto', 0.0179em),
+button: mat.define-typography-level(14px, 14px, 500, 'Roboto', 0.0893em),
+caption: mat.define-typography-level(12px, 20px, 400, 'Roboto', 0.0333em),
+input: mat.define-typography-level(inherit, 1.125, 400, 'Roboto', 1.5px));
+// Foreground Elements
+// Light Theme Text
+$dark-text: #dfd7d7;
+$dark-primary-text: rgba($dark-text,
+0.87);
+$dark-accent-text: rgba($dark-primary-text,
+0.54);
+$dark-disabled-text: rgba($dark-primary-text,
+0.38);
+$dark-dividers: rgba($dark-primary-text,
+0.12);
+$dark-focused: rgba($dark-primary-text,
+0.12);
+$mat-light-theme-foreground: ( base : black,
+divider : $dark-dividers,
+dividers : $dark-dividers,
+disabled : $dark-disabled-text,
+disabled-button : rgba($dark-text, 0.26),
+disabled-text : $dark-disabled-text,
+elevation : black,
+secondary-text : $dark-accent-text,
+hint-text : $dark-disabled-text,
+accent-text : $dark-accent-text,
+icon : $dark-accent-text,
+icons : $dark-accent-text,
+text : $dark-primary-text,
+slider-min : $dark-primary-text,
+slider-off : rgba($dark-text, 0.26),
+slider-off-active: $dark-disabled-text,
+);
+// Dark Theme text
+$light-text: #dfd7d7;
+$light-primary-text: $light-text;
+$light-accent-text: rgba($light-primary-text,
+0.7);
+$light-disabled-text: rgba($light-primary-text,
+0.5);
+$light-dividers: rgba($light-primary-text,
+0.12);
+$light-focused: rgba($light-primary-text,
+0.12);
+$mat-dark-theme-foreground: ( base : $light-text,
+divider : $light-dividers,
+dividers : $light-dividers,
+disabled : $light-disabled-text,
+disabled-button : rgba($light-text, 0.3),
+disabled-text : $light-disabled-text,
+elevation : black,
+hint-text : $light-disabled-text,
+secondary-text : $light-accent-text,
+accent-text : $light-accent-text,
+icon : $light-text,
+icons : $light-text,
+text : $light-text,
+slider-min : $light-text,
+slider-off : rgba($light-text, 0.3),
+slider-off-active: rgba($light-text, 0.3),
+);
+// Background config
+// Light bg
+$light-background : #003459;
+$light-bg-darker-5 : darken($light-background,
+5%);
+$light-bg-darker-10 : darken($light-background,
+10%);
+$light-bg-darker-20 : darken($light-background,
+20%);
+$light-bg-darker-30 : darken($light-background,
+30%);
+$light-bg-lighter-5 : lighten($light-background,
+5%);
+$dark-bg-tooltip : lighten(#003459,
+20%);
+$dark-bg-alpha-4 : rgba(#003459,
+0.04);
+$dark-bg-alpha-12 : rgba(#003459,
+0.12);
+$mat-light-theme-background: ( background : $light-background,
+status-bar : $light-bg-darker-20,
+app-bar : $light-bg-darker-5,
+hover : $dark-bg-alpha-4,
+card : $light-bg-lighter-5,
+dialog : $light-bg-lighter-5,
+tooltip : $dark-bg-tooltip,
+disabled-button : $dark-bg-alpha-12,
+raised-button : $light-bg-lighter-5,
+focused-button : $dark-focused,
+selected-button : $light-bg-darker-20,
+selected-disabled-button: $light-bg-darker-30,
+disabled-button-toggle : $light-bg-darker-10,
+unselected-chip : $light-bg-darker-10,
+disabled-list-option : $light-bg-darker-10,
+);
+// Dark bg
+$dark-background : #003459;
+$dark-bg-lighter-5 : lighten($dark-background,
+5%);
+$dark-bg-lighter-10 : lighten($dark-background,
+10%);
+$dark-bg-lighter-20 : lighten($dark-background,
+20%);
+$dark-bg-lighter-30 : lighten($dark-background,
+30%);
+$light-bg-alpha-4 : rgba(#003459,
+0.04);
+$light-bg-alpha-12 : rgba(#003459,
+0.12);
+// Background palette for dark themes.
+$mat-dark-theme-background: ( background : $dark-background,
+status-bar : $dark-bg-lighter-20,
+app-bar : $dark-bg-lighter-5,
+hover : $light-bg-alpha-4,
+card : $dark-bg-lighter-5,
+dialog : $dark-bg-lighter-5,
+tooltip : $dark-bg-lighter-20,
+disabled-button : $light-bg-alpha-12,
+raised-button : $dark-bg-lighter-5,
+focused-button : $light-focused,
+selected-button : $dark-bg-lighter-20,
+selected-disabled-button: $dark-bg-lighter-30,
+disabled-button-toggle : $dark-bg-lighter-10,
+unselected-chip : $dark-bg-lighter-20,
+disabled-list-option : $dark-bg-lighter-10,
+);
+// Compute font config
+@include mat.core($fontConfig);
+// Theme Config
+body {
+    --primary-color: #00a8e8;
+    --primary-lighter-color: #b3e5f8;
+    --primary-darker-color: #008dde;
+    --text-primary-color: #{$light-primary-text};
+    --text-primary-lighter-color: #{$dark-primary-text};
+    --text-primary-darker-color: #{$light-primary-text};
+}
+
+$mat-primary: ( main: #00a8e8,
+lighter: #b3e5f8,
+darker: #008dde,
+200: #00a8e8, // For slide toggle,
+contrast: ( main: $light-primary-text, lighter: $dark-primary-text, darker: $light-primary-text, ));
+$theme-primary: mat.define-palette($mat-primary,
+main,
+lighter,
+darker);
+body {
+    --accent-color: #0063ab;
+    --accent-lighter-color: #b3d0e6;
+    --accent-darker-color: #004791;
+    --text-accent-color: #{$light-primary-text};
+    --text-accent-lighter-color: #{$dark-primary-text};
+    --text-accent-darker-color: #{$light-primary-text};
+}
 
-// Define the palettes for your theme using the Material Design palettes available in palette.scss
-// (imported above). For each palette, you can optionally specify a default, lighter, and darker
-// hue. Available color palettes: https://material.io/design/color/
-$frontend-primary: mat.define-palette(mat.$indigo-palette);
-$frontend-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
+$mat-accent: ( main: #0063ab,
+lighter: #b3d0e6,
+darker: #004791,
+200: #0063ab, // For slide toggle,
+contrast: ( main: $light-primary-text, lighter: $dark-primary-text, darker: $light-primary-text, ));
+$theme-accent: mat.define-palette($mat-accent,
+main,
+lighter,
+darker);
+body {
+    --warn-color: #f9b7b7;
+    --warn-lighter-color: #fde9e9;
+    --warn-darker-color: #f69f9f;
+    --text-warn-color: #{$dark-primary-text};
+    --text-warn-lighter-color: #{$dark-primary-text};
+    --text-warn-darker-color: #{$dark-primary-text};
+}
 
-// The warn palette is optional (defaults to red).
-$frontend-warn: mat.define-palette(mat.$red-palette);
+$mat-warn: ( main: #f9b7b7,
+lighter: #fde9e9,
+darker: #f69f9f,
+200: #f9b7b7, // For slide toggle,
+contrast: ( main: $dark-primary-text, lighter: $dark-primary-text, darker: $dark-primary-text, ));
+$theme-warn: mat.define-palette($mat-warn,
+main,
+lighter,
+darker);
+;
+$theme: ( primary: $theme-primary,
+accent: $theme-accent,
+warn: $theme-warn,
+is-dark: true,
+foreground: $mat-dark-theme-foreground,
+background: $mat-dark-theme-background,
+);
+$altTheme: ( primary: $theme-primary,
+accent: $theme-accent,
+warn: $theme-warn,
+is-dark: false,
+foreground: $mat-light-theme-foreground,
+background: $mat-light-theme-background,
+);
+// Theme Init
+@include mat.all-component-themes($theme);
+.theme-alternate {
+    @include mat.all-component-themes($altTheme);
+}
 
-// Create the theme object. A theme consists of configurations for individual
-// theming systems such as "color" or "typography".
-$frontend-theme: mat.define-light-theme((
-  color: (
-    primary: $frontend-primary,
-    accent: $frontend-accent,
-    warn: $frontend-warn,
-  )
-));
+// Specific component overrides, pieces that are not in line with the general theming
+// Handle buttons appropriately, with respect to line-height
+.mat-raised-button,
+.mat-stroked-button,
+.mat-flat-button {
+    padding: 0 1.15em;
+    margin: 0 .65em;
+    min-width: 3em;
+    line-height: 36.4px
+}
 
-// 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.
-@include mat.all-component-themes($frontend-theme);
+.mat-standard-chip {
+    padding: .5em .85em;
+    min-height: 2.5em;
+}
 
+.material-icons {
+    font-size: 24px;
+    font-family: 'Material Icons', 'Material Icons';
+    .mat-badge-content {
+        font-family: 'Roboto';
+    }
+}
+\ No newline at end of file