-
-
Uploaded Image
-
+
+
+
+
Uploaded Image
+
-
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
+
+
+
diff --git a/frontend/src/app/routes/view/view.module.ts b/frontend/src/app/routes/view/view.module.ts
index 73b1db0..7f6e6d2 100644
--- a/frontend/src/app/routes/view/view.module.ts
+++ b/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 {}
diff --git a/frontend/src/scss/bootstrap.scss b/frontend/src/scss/bootstrap.scss
index 47f9e9c..939a32a 100644
--- a/frontend/src/scss/bootstrap.scss
+++ b/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";
diff --git a/frontend/src/scss/fixes.scss b/frontend/src/scss/fixes.scss
index f6e399a..3f16b98 100644
--- a/frontend/src/scss/fixes.scss
+++ b/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;
}
diff --git a/frontend/src/scss/fonts.scss b/frontend/src/scss/fonts.scss
index d508deb..2211bde 100644
--- a/frontend/src/scss/fonts.scss
+++ b/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";
diff --git a/frontend/src/scss/index.scss b/frontend/src/scss/index.scss
index ca3222c..831a1f8 100644
--- a/frontend/src/scss/index.scss
+++ b/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";
+
+
diff --git a/frontend/src/scss/material-theme.legacy.scss b/frontend/src/scss/material-theme.legacy.scss
new file mode 100644
index 0000000..313761c
--- /dev/null
+++ b/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";
+ }
+}
diff --git a/frontend/src/scss/material-theme.scss b/frontend/src/scss/material-theme.scss
index 313761c..e1c44aa 100644
--- a/frontend/src/scss/material-theme.scss
+++ b/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 {
diff --git a/frontend/src/scss/personal.scss b/frontend/src/scss/personal.scss
index 4652ff6..90720ee 100644
--- a/frontend/src/scss/personal.scss
+++ b/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;
+ }
}
}
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index a0e23ad..c218ea0 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -1 +1 @@
-@import "./scss";
+@use "./scss";