change scss to use/forward and fix css bugs

frontend/src/app/components/fab/fab.component.html

@@ -0,0 +1,13 @@
+<div class="fabholder">
+  <button
+    mat-fab
+    [color]="color"
+    class="fabbutton fullanimate mat-elevation-z6"
+    (click)="onClick()"
+    aria-label=""
+  >
+    <mat-icon fontSet="material-icons-outlined" [aria-label]="ariaLabel">
+      {{ icon }}
+    </mat-icon>
+  </button>
+</div>

frontend/src/app/components/fab/fab.component.ts

@@ -0,0 +1,14 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'fab',
+  templateUrl: './fab.component.html',
+})
+export class FabComponent {
+  @Input('aria-label') ariaLabel: string = 'Floating Action Button';
+  @Input() icon: string = 'add';
+  @Input() color: string = 'accent';
+  @Input() onClick: () => void;
+
+  constructor() {}
+}

frontend/src/app/components/fab/fab.module.ts

@@ -0,0 +1,13 @@
+import { CommonModule } from '@angular/common';
+import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { FabComponent } from './fab.component';
+
+@NgModule({
+  declarations: [FabComponent],
+  imports: [CommonModule, MatIconModule, MatButtonModule],
+  schemas: [NO_ERRORS_SCHEMA],
+  exports: [FabComponent],
+})
+export class FabModule {}

frontend/src/app/routes/settings/roles/settings-roles.component.html

@@ -71,6 +71,7 @@
 
 <mat-paginator
   color="accent"
+  class="mat-elevation-z2"
   [pageSizeOptions]="pageSizeOptions"
   [pageSize]="startingPageSize"
   [showFirstLastButtons]="utilService.isDesktop() | async"
@@ -79,15 +80,4 @@
 >
 </mat-paginator>
 
-<div class="fabholder">
-  <button
-    mat-fab
-    color="accent"
-    class="fabbutton fullanimate mat-elevation-z6"
-    (click)="addRole()"
-  >
-    <mat-icon fontSet="material-icons-outlined" aria-label="Add Role">
-      add
-    </mat-icon>
-  </button>
-</div>
+<fab aria-label="Add Role" (click)="addRole()"></fab>

frontend/src/app/routes/settings/roles/settings-roles.module.ts

@@ -8,6 +8,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatTableModule } from '@angular/material/table';
+import { FabModule } from 'src/app/components/fab/fab.module';
 import { ValuesPickerModule } from 'src/app/components/values-picker/values-picker.module';
 import { SettingsRolesEditComponent } from './settings-roles-edit/settings-roles-edit.component';
 import { SettingsRolesComponent } from './settings-roles.component';
@@ -26,6 +27,7 @@ import { SettingsRolesRoutingModule } from './settings-roles.routing.module';
     FormsModule,
     MatFormFieldModule,
     MatInputModule,
+    FabModule,
     ReactiveFormsModule,
     ValuesPickerModule
   ],

frontend/src/app/routes/settings/users/settings-users.component.html

@@ -62,6 +62,7 @@
 
 <mat-paginator
   color="accent"
+  class="mat-elevation-z2"
   [pageSizeOptions]="pageSizeOptions"
   [pageSize]="startingPageSize"
   [hidePageSize]="utilService.isMobile() | async"
@@ -71,13 +72,4 @@
 >
 </mat-paginator>
 
-<div class="fabholder">
-  <button
-    mat-fab
-    color="accent"
-    class="fabbutton fullanimate mat-elevation-z6"
-    (click)="addUser()"
-  >
-    <mat-icon fontSet="material-icons-outlined">person_add</mat-icon>
-  </button>
-</div>
+<fab aria-label="Add User" (click)="addUser()" icon="person_add"></fab>

frontend/src/app/routes/settings/users/settings-users.module.ts

@@ -8,6 +8,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatTableModule } from '@angular/material/table';
+import { FabModule } from 'src/app/components/fab/fab.module';
 import { ValuesPickerModule } from 'src/app/components/values-picker/values-picker.module';
 import { SettingsUsersEditComponent } from './settings-users-edit/settings-users-edit.component';
 import { SettingsUsersComponent } from './settings-users.component';
@@ -26,6 +27,7 @@ import { SettingsUsersRoutingModule } from './settings-users.routing.module';
     MatInputModule,
     MatChipsModule,
     FormsModule,
+    FabModule,
     ReactiveFormsModule,
     ValuesPickerModule,
   ],

frontend/src/app/routes/view/view.component.html

@@ -1,51 +1,48 @@
-<div class="content-border padded">
-  <div class="container centered">
-    <div class="row">
-      <div class="col-12">
-        <h1>Uploaded Image</h1>
-      </div>
+<div class="container centered">
+  <div class="row">
+    <div class="col-12">
+      <h1>Uploaded Image</h1>
+    </div>
 
-      <div class="col-12 py-3">
-        <picsur-img
-          class="uploadedimage"
-          [src]="imageLinks.source"
-        ></picsur-img>
-      </div>
+    <div class="col-12 py-3">
+      <picsur-img class="uploadedimage" [src]="imageLinks.source"></picsur-img>
+    </div>
 
-      <div class="col-12">
-        <copy-field label="Image URL" [value]="imageLinks.source"></copy-field>
-      </div>
-      <div class="col-md-6 col-12">
-        <copy-field label="Markdown" [value]="imageLinks.markdown"></copy-field>
-      </div>
-      <div class="col-md-6 col-12">
-        <copy-field label="HTML" [value]="imageLinks.html"></copy-field>
-      </div>
-      <div class="col-md-6 col-12">
-        <copy-field label="BBCode" [value]="imageLinks.bbcode"></copy-field>
-      </div>
-      <div class="col-md-6 col-12">
-        <copy-field label="Rst" [value]="imageLinks.rst"></copy-field>
-      </div>
-      <div class="col-12">
-        <button
-          mat-raised-button
-          class="m-1"
-          color="accent"
-          (click)="downloadImage()"
-        >
-          Download
-        </button>
+    <div class="col-12">
+      <copy-field label="Image URL" [value]="imageLinks.source"></copy-field>
+    </div>
+    <div class="col-md-6 col-12">
+      <copy-field label="Markdown" [value]="imageLinks.markdown"></copy-field>
+    </div>
+    <div class="col-md-6 col-12">
+      <copy-field label="HTML" [value]="imageLinks.html"></copy-field>
+    </div>
+    <div class="col-md-6 col-12">
+      <copy-field label="BBCode" [value]="imageLinks.bbcode"></copy-field>
+    </div>
+    <div class="col-md-6 col-12">
+      <copy-field label="Rst" [value]="imageLinks.rst"></copy-field>
+    </div>
+    <div class="col-12">
+      <button
+        mat-raised-button
+        class="m-1"
+        color="accent"
+        (click)="downloadImage()"
+      >
+        Download
+      </button>
 
-        <button
-          mat-raised-button
-          class="m-1"
-          color="primary"
-          (click)="goBackHome()"
-        >
-          Upload Another
-        </button>
-      </div>
+      <button
+        mat-raised-button
+        class="m-1"
+        color="primary"
+        (click)="goBackHome()"
+      >
+        Upload Another
+      </button>
     </div>
   </div>
 </div>
+
+<fab></fab>

frontend/src/app/routes/view/view.module.ts

@@ -1,7 +1,9 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
 import { CopyFieldModule } from 'src/app/components/copy-field/copy-field.module';
+import { FabModule } from 'src/app/components/fab/fab.module';
 import { PicsurImgModule } from 'src/app/components/picsur-img/picsur-img.module';
 import { ViewComponent } from './view.component';
 import { ViewRoutingModule } from './view.routing.module';
@@ -13,6 +15,8 @@ import { ViewRoutingModule } from './view.routing.module';
     ViewRoutingModule,
     MatButtonModule,
     PicsurImgModule,
+    MatIconModule,
+    FabModule
   ],
 })
 export class ViewRouteModule {}

frontend/src/scss/bootstrap.scss

@@ -1,2 +1,2 @@
 // Include bootstrap-grid.scss from node_modules
-@import "../node_modules/bootstrap/scss/bootstrap-grid.scss";
+@use "../node_modules/bootstrap/scss/bootstrap-grid.scss";

frontend/src/scss/fixes.scss

@@ -2,6 +2,11 @@
 html,
 body {
   height: 100%;
+
+  color-scheme: dark;
+  .theme-alternate {
+    color-scheme: light;
+  }
 }
 
 app-root {
@@ -13,7 +18,6 @@ app-root {
 
 html {
   box-sizing: border-box;
-  color-scheme: dark;
   // Default font is sans family
   font-family: sans-serif;
 }

frontend/src/scss/fonts.scss

@@ -1,3 +1,9 @@
-@import "~@fontsource/roboto/index.css";
+@import "~@fontsource/roboto/100.css";
+@import "~@fontsource/roboto/300.css";
+@import "~@fontsource/roboto/400.css";
+@import "~@fontsource/roboto/500.css";
+@import "~@fontsource/roboto/700.css";
+@import "~@fontsource/roboto/900.css";
+
 @import "~@fontsource/material-icons/index.css";
 @import "~@fontsource/material-icons-outlined/index.css";

frontend/src/scss/index.scss

@@ -1,6 +1,8 @@
-@import "./fonts.scss";
-@import "./material-theme.scss";
-@import "./bootstrap.scss";
-@import "./fixes.scss";
-@import "./personal.scss";
-@import "./snackbar.scss";
+@use "./fonts.scss";
+@use "./bootstrap.scss";
+@use "./material-theme.scss";
+@use "./fixes.scss";
+@use "./personal.scss";
+@use "./snackbar.scss";
+
+

frontend/src/scss/material-theme.legacy.scss

@@ -0,0 +1,250 @@
+/**
+* Generated theme by Material Theme Generator
+* https://materialtheme.arcsine.dev
+* Fork at: https://materialtheme.arcsine.dev/?c=YHBhbGV0dGU$YHByaW1hcnk$YF48IzI3MjcyNyIsIj9lcjwjYmViZWJlIiwiO2VyPCMxNzE3MTd$LCIlPmBePCM0M2EwNDciLCI~ZXI8I2M3ZTNjOCIsIjtlcjwjMmM4NDJmfiwid2Fybj5gXjwjZjQ1MTFlIiwiP2VyPCNmY2NiYmMiLCI7ZXI8I2VmMzcxMn4sIj9UZXh0PCMwMDAwMDAiLCI~PTwjZmFmYWZhIiwiO1RleHQ8I2ZmZmZmZiIsIjs9PCMxMjEyMTJ$LCJmb250cz5bYEA8KC00fixgQDwoLTN$LGBAPCgtMn4sYEA8KC0xfixgQDxoZWFkbGluZX4sYEA8dGl0bGV$LGBAPHN1YiktMn4sYEA8c3ViKS0xfixgQDxib2R5LTJ$LGBAPGJvZHktMX4sYEA8YnV0dG9ufixgQDxjYXB0aW9ufixgQDxpbnB1dCIsInNpemU$bnVsbH1dLCJpY29uczxSb3VuZGVkIiwiP25lc3M$ZmFsc2UsInZlcnNpb24$MTF9
+*/
+
+@import "~@angular/material/theming";
+
+// 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.
+
+// Fonts
+
+$fontConfig: (
+  display-4: mat-typography-level(112px, 112px, 300, "Roboto", -0.0134em),
+  display-3: mat-typography-level(56px, 56px, 400, "Roboto", -0.0089em),
+  display-2: mat-typography-level(45px, 48px, 400, "Roboto", 0em),
+  display-1: mat-typography-level(34px, 40px, 400, "Roboto", 0.0074em),
+  headline: mat-typography-level(24px, 32px, 400, "Roboto", 0em),
+  title: mat-typography-level(20px, 32px, 500, "Roboto", 0.0075em),
+  subheading-2: mat-typography-level(16px, 28px, 400, "Roboto", 0.0094em),
+  subheading-1: mat-typography-level(15px, 24px, 500, "Roboto", 0.0067em),
+  body-2: mat-typography-level(14px, 24px, 500, "Roboto", 0.0179em),
+  body-1: mat-typography-level(14px, 20px, 400, "Roboto", 0.0179em),
+  button: mat-typography-level(14px, 14px, 500, "Roboto", 0.0893em),
+  caption: mat-typography-level(12px, 20px, 400, "Roboto", 0.0333em),
+  input: mat-typography-level(inherit, 1.125, 400, "Roboto", 1.5px),
+);
+
+// Foreground Elements
+
+// Light Theme Text
+$dark-text: #000000;
+$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-palette: (
+  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: #ffffff;
+$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-palette: (
+  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: #fafafa;
+$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(#121212, 20%);
+$dark-bg-alpha-4: rgba(#121212, 0.04);
+$dark-bg-alpha-12: rgba(#121212, 0.12);
+
+$mat-light-theme-background-palette: (
+  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: #121212;
+$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(#fafafa, 0.04);
+$light-bg-alpha-12: rgba(#fafafa, 0.12);
+
+// Background palette for dark themes.
+$mat-dark-theme-background-palette: (
+  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: #272727;
+  --primary-lighter-color: #bebebe;
+  --primary-darker-color: #171717;
+  --text-primary-color: #{$light-primary-text};
+  --text-primary-lighter-color: #{$dark-primary-text};
+  --text-primary-darker-color: #{$light-primary-text};
+}
+$mat-primary: (
+  main: #272727,
+  lighter: #bebebe,
+  darker: #171717,
+  200: #272727,
+  // For slide toggle,
+  contrast:
+    (
+      main: $light-primary-text,
+      lighter: $dark-primary-text,
+      darker: $light-primary-text,
+    ),
+);
+$theme-primary: mat-palette($mat-primary, main, lighter, darker);
+
+body {
+  --accent-color: #43a047;
+  --accent-lighter-color: #c7e3c8;
+  --accent-darker-color: #2c842f;
+  --text-accent-color: #{$light-primary-text};
+  --text-accent-lighter-color: #{$dark-primary-text};
+  --text-accent-darker-color: #{$light-primary-text};
+}
+$mat-accent: (
+  main: #43a047,
+  lighter: #c7e3c8,
+  darker: #2c842f,
+  200: #43a047,
+  // For slide toggle,
+  contrast:
+    (
+      main: $light-primary-text,
+      lighter: $dark-primary-text,
+      darker: $light-primary-text,
+    ),
+);
+$theme-accent: mat-palette($mat-accent, main, lighter, darker);
+
+body {
+  --warn-color: #f4511e;
+  --warn-lighter-color: #fccbbc;
+  --warn-darker-color: #ef3712;
+  --text-warn-color: #{$light-primary-text};
+  --text-warn-lighter-color: #{$dark-primary-text};
+  --text-warn-darker-color: #{$light-primary-text};
+}
+$mat-warn: (
+  main: #f4511e,
+  lighter: #fccbbc,
+  darker: #ef3712,
+  200: #f4511e,
+  // For slide toggle,
+  contrast:
+    (
+      main: $light-primary-text,
+      lighter: $dark-primary-text,
+      darker: $light-primary-text,
+    ),
+);
+$theme-warn: mat-palette($mat-warn, main, lighter, darker);
+$theme: mat-dark-theme($theme-primary, $theme-accent, $theme-warn);
+$altTheme: mat-light-theme($theme-primary, $theme-accent, $theme-warn);
+
+// Theme Init
+@include angular-material-theme($theme);
+
+.theme-alternate {
+  @include angular-material-theme($altTheme);
+}
+
+// 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 0.65em;
+  min-width: 3em;
+  line-height: 36.4px;
+}
+
+.mat-standard-chip {
+  padding: 0.5em 0.85em;
+  min-height: 2.5em;
+}
+
+.material-icons {
+  font-size: 24px;
+  font-family: "Material Icons Round", "Material Icons";
+  .mat-badge-content {
+    font-family: "Roboto";
+  }
+}

frontend/src/scss/material-theme.scss

@@ -1,33 +1,41 @@
-/**
-* Generated theme by Material Theme Generator
-* https://materialtheme.arcsine.dev
-* Fork at: https://materialtheme.arcsine.dev/?c=YHBhbGV0dGU$YHByaW1hcnk$YF48IzI3MjcyNyIsIj9lcjwjYmViZWJlIiwiO2VyPCMxNzE3MTd$LCIlPmBePCM0M2EwNDciLCI~ZXI8I2M3ZTNjOCIsIjtlcjwjMmM4NDJmfiwid2Fybj5gXjwjZjQ1MTFlIiwiP2VyPCNmY2NiYmMiLCI7ZXI8I2VmMzcxMn4sIj9UZXh0PCMwMDAwMDAiLCI~PTwjZmFmYWZhIiwiO1RleHQ8I2ZmZmZmZiIsIjs9PCMxMjEyMTJ$LCJmb250cz5bYEA8KC00fixgQDwoLTN$LGBAPCgtMn4sYEA8KC0xfixgQDxoZWFkbGluZX4sYEA8dGl0bGV$LGBAPHN1YiktMn4sYEA8c3ViKS0xfixgQDxib2R5LTJ$LGBAPGJvZHktMX4sYEA8YnV0dG9ufixgQDxjYXB0aW9ufixgQDxpbnB1dCIsInNpemU$bnVsbH1dLCJpY29uczxSb3VuZGVkIiwiP25lc3M$ZmFsc2UsInZlcnNpb24$MTF9
-*/
+@use "sass:map";
+@use "@angular/material" as mat;
 
-@import "~@angular/material/theming";
+@include mat.core();
 
-// 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.
+$dark-primary-text: rgba(black, 0.87);
+$light-primary-text: white;
 
-// Fonts
-
-$fontConfig: (
-  display-4: mat-typography-level(112px, 112px, 300, "Roboto", -0.0134em),
-  display-3: mat-typography-level(56px, 56px, 400, "Roboto", -0.0089em),
-  display-2: mat-typography-level(45px, 48px, 400, "Roboto", 0em),
-  display-1: mat-typography-level(34px, 40px, 400, "Roboto", 0.0074em),
-  headline: mat-typography-level(24px, 32px, 400, "Roboto", 0em),
-  title: mat-typography-level(20px, 32px, 500, "Roboto", 0.0075em),
-  subheading-2: mat-typography-level(16px, 28px, 400, "Roboto", 0.0094em),
-  subheading-1: mat-typography-level(15px, 24px, 500, "Roboto", 0.0067em),
-  body-2: mat-typography-level(14px, 24px, 500, "Roboto", 0.0179em),
-  body-1: mat-typography-level(14px, 20px, 400, "Roboto", 0.0179em),
-  button: mat-typography-level(14px, 14px, 500, "Roboto", 0.0893em),
-  caption: mat-typography-level(12px, 20px, 400, "Roboto", 0.0333em),
-  input: mat-typography-level(inherit, 1.125, 400, "Roboto", 1.5px),
+$mat-primary: (
+  main: #272727,
+  lighter: #bebebe,
+  darker: #171717,
+  200: #272727,
+  // For slide toggle,
+  contrast:
+    (
+      main: $light-primary-text,
+      lighter: $dark-primary-text,
+      darker: $light-primary-text,
+    ),
+);
+$mat-accent: (
+  main: #43a047,
+  lighter: #c7e3c8,
+  darker: #2c842f,
+  200: #43a047,
+  // For slide toggle,
+  contrast:
+    (
+      main: $light-primary-text,
+      lighter: $dark-primary-text,
+      darker: $light-primary-text,
+    ),
 );
 
-// Foreground Elements
+$picsur-primary: mat.define-palette($mat-primary, main, lighter, darker);
+$picsur-accent: mat.define-palette($mat-accent, main, lighter, darker);
+$picsur-warn: mat.define_palette(mat.$red-palette);
 
 // Light Theme Text
 $dark-text: #000000;
@@ -141,92 +149,31 @@ $mat-dark-theme-background-palette: (
   disabled-list-option: $dark-bg-lighter-10,
 );
 
-// Compute font config
-@include mat-core($fontConfig);
-
-// Theme Config
-
-body {
-  --primary-color: #272727;
-  --primary-lighter-color: #bebebe;
-  --primary-darker-color: #171717;
-  --text-primary-color: #{$light-primary-text};
-  --text-primary-lighter-color: #{$dark-primary-text};
-  --text-primary-darker-color: #{$light-primary-text};
-}
-$mat-primary: (
-  main: #272727,
-  lighter: #bebebe,
-  darker: #171717,
-  200: #272727,
-  // For slide toggle,
-  contrast:
-    (
-      main: $light-primary-text,
-      lighter: $dark-primary-text,
-      darker: $light-primary-text,
-    ),
+$mat-theme: (
+  primary: $picsur-primary,
+  accent: $picsur-accent,
+  warn: $picsur-warn,
+  is-dark: true,
+  background: $mat-dark-theme-background-palette,
+  foreground: $mat-dark-theme-foreground-palette,
 );
-$theme-primary: mat-palette($mat-primary, main, lighter, darker);
 
-body {
-  --accent-color: #43a047;
-  --accent-lighter-color: #c7e3c8;
-  --accent-darker-color: #2c842f;
-  --text-accent-color: #{$light-primary-text};
-  --text-accent-lighter-color: #{$dark-primary-text};
-  --text-accent-darker-color: #{$light-primary-text};
-}
-$mat-accent: (
-  main: #43a047,
-  lighter: #c7e3c8,
-  darker: #2c842f,
-  200: #43a047,
-  // For slide toggle,
-  contrast:
-    (
-      main: $light-primary-text,
-      lighter: $dark-primary-text,
-      darker: $light-primary-text,
-    ),
+$mat-theme-light: (
+  primary: $picsur-primary,
+  accent: $picsur-accent,
+  warn: $picsur-warn,
+  is-dark: false,
+  background: $mat-light-theme-background-palette,
+  foreground: $mat-light-theme-foreground-palette,
 );
-$theme-accent: mat-palette($mat-accent, main, lighter, darker);
 
-body {
-  --warn-color: #f4511e;
-  --warn-lighter-color: #fccbbc;
-  --warn-darker-color: #ef3712;
-  --text-warn-color: #{$light-primary-text};
-  --text-warn-lighter-color: #{$dark-primary-text};
-  --text-warn-darker-color: #{$light-primary-text};
-}
-$mat-warn: (
-  main: #f4511e,
-  lighter: #fccbbc,
-  darker: #ef3712,
-  200: #f4511e,
-  // For slide toggle,
-  contrast:
-    (
-      main: $light-primary-text,
-      lighter: $dark-primary-text,
-      darker: $light-primary-text,
-    ),
-);
-$theme-warn: mat-palette($mat-warn, main, lighter, darker);
-$theme: mat-dark-theme($theme-primary, $theme-accent, $theme-warn);
-$altTheme: mat-light-theme($theme-primary, $theme-accent, $theme-warn);
 
-// Theme Init
-@include angular-material-theme($theme);
+@include mat.all-component-themes($mat-theme);
 
 .theme-alternate {
-  @include angular-material-theme($altTheme);
+  @include mat.all-component-themes($mat-theme-light);
 }
 
-// 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 {

frontend/src/scss/personal.scss

@@ -1,3 +1,5 @@
+@use "../node_modules/bootstrap/scss/bootstrap-grid.scss" as bs;
+
 // Create white border around content
 .content-border {
   border-radius: 20px;
@@ -53,12 +55,24 @@
 
   & > .fabbutton {
     position: fixed;
-    bottom: 1.5rem;
+    bottom: 2rem;
     z-index: 8;
 
-    @include media-breakpoint-up(xl) {
+    @include bs.media-breakpoint-down(xxl) {
+      right: 4rem;
+    }
+
+    @include bs.media-breakpoint-down(xl) {
+      right: 2rem;
+    }
+
+    @include bs.media-breakpoint-up(xl) {
       bottom: 4rem;
     }
+
+    @include bs.media-breakpoint-up(xxl) {
+      margin-right: -3rem;
+    }
   }
 }
 

frontend/src/styles.scss

@@ -1 +1 @@
-@import "./scss";
+@use "./scss";