From e5a417d23c75c46c1f9a2db34a12aa321ca7eac5 Mon Sep 17 00:00:00 2001
From: rubikscraft <contact@rubikscraft.nl>
Date: Tue, 10 May 2022 17:38:37 +0200
Subject: [PATCH] refactor dialogs and buttons

---
 .../components/header/header.component.html   |  2 +-
 .../app/routes/images/images.component.html   |  4 +-
 .../src/app/routes/images/images.component.ts |  3 +-
 .../settings-roles-edit.component.html        |  4 +-
 .../roles/settings-roles.component.ts         |  3 +-
 .../settings-users-edit.component.html        |  4 +-
 .../users/settings-users.component.html       |  9 +--
 .../users/settings-users.component.ts         |  3 +-
 .../routes/user/login/login.component.html    |  4 +-
 .../user/register/register.component.html     |  4 +-
 frontend/src/app/services/api/info.service.ts |  2 +-
 .../confirm-dialog.component.html             | 23 ++++---
 .../confirm-dialog.component.scss             | 62 ++++++++++---------
 .../confirm-dialog.component.ts               |  2 +-
 .../download-dialog.component.html            |  2 +-
 .../src/app/util/util-module/util.service.ts  |  6 +-
 frontend/src/scss/dialog.scss                 | 19 ++++++
 frontend/src/scss/index.scss                  |  2 +-
 .../src/scss/material/material-theme.scss     |  7 ---
 support/purge-all.sh                          |  5 ++
 yarn.lock                                     | 46 +++++++++++---
 21 files changed, 130 insertions(+), 86 deletions(-)
 create mode 100644 frontend/src/scss/dialog.scss

diff --git a/frontend/src/app/components/header/header.component.html b/frontend/src/app/components/header/header.component.html
index 115988d..c045683 100644
--- a/frontend/src/app/components/header/header.component.html
+++ b/frontend/src/app/components/header/header.component.html
@@ -34,7 +34,7 @@
     mat-stroked-button
     (click)="doLogin()"
   >
-    Login
+    LOGIN
   </button>
 
   <!-- <span *ngIf="isLoggedIn" class="me-3 d-none d-sm-block">
diff --git a/frontend/src/app/routes/images/images.component.html b/frontend/src/app/routes/images/images.component.html
index 994624c..454445a 100644
--- a/frontend/src/app/routes/images/images.component.html
+++ b/frontend/src/app/routes/images/images.component.html
@@ -21,9 +21,9 @@
         >
         </picsur-img>
         <mat-card-actions>
-          <button mat-stroked-button (click)="viewImage(image)">View</button>
+          <button mat-stroked-button (click)="viewImage(image)">VIEW</button>
           <button mat-button color="warn" (click)="deleteImage(image)">
-            Delete
+            DELETE
           </button>
         </mat-card-actions>
       </mat-card>
diff --git a/frontend/src/app/routes/images/images.component.ts b/frontend/src/app/routes/images/images.component.ts
index 8c42381..eb0e0c0 100644
--- a/frontend/src/app/routes/images/images.component.ts
+++ b/frontend/src/app/routes/images/images.component.ts
@@ -85,12 +85,11 @@ export class ImagesComponent implements OnInit {
       description: 'This action cannot be undone.',
       buttons: [
         {
-          color: 'primary',
           name: 'cancel',
           text: 'Cancel',
         },
         {
-          color: 'red',
+          color: 'warn',
           name: 'delete',
           text: 'Delete',
         },
diff --git a/frontend/src/app/routes/settings/roles/settings-roles-edit/settings-roles-edit.component.html b/frontend/src/app/routes/settings/roles/settings-roles-edit/settings-roles-edit.component.html
index c811601..1e60dbc 100644
--- a/frontend/src/app/routes/settings/roles/settings-roles-edit/settings-roles-edit.component.html
+++ b/frontend/src/app/routes/settings/roles/settings-roles-edit/settings-roles-edit.component.html
@@ -40,7 +40,7 @@
   <div class="row">
     <div class="col-12 py-4">
       <button mat-raised-button color="accent" type="submit">
-        {{ editing ? "Update" : "Add" }}
+        {{ editing ? "UPDATE" : "ADD" }}
       </button>
 
       <button
@@ -50,7 +50,7 @@
         type="button"
         (click)="cancel()"
       >
-        Cancel
+        CANCEL
       </button>
     </div>
   </div>
diff --git a/frontend/src/app/routes/settings/roles/settings-roles.component.ts b/frontend/src/app/routes/settings/roles/settings-roles.component.ts
index 43830d8..6f9906e 100644
--- a/frontend/src/app/routes/settings/roles/settings-roles.component.ts
+++ b/frontend/src/app/routes/settings/roles/settings-roles.component.ts
@@ -66,12 +66,11 @@ export class SettingsRolesComponent implements OnInit, AfterViewInit {
       description: 'This action cannot be undone.',
       buttons: [
         {
-          color: 'primary',
           name: 'cancel',
           text: 'Cancel',
         },
         {
-          color: 'red',
+          color: 'warn',
           name: 'delete',
           text: 'Delete',
         },
diff --git a/frontend/src/app/routes/settings/users/settings-users-edit/settings-users-edit.component.html b/frontend/src/app/routes/settings/users/settings-users-edit/settings-users-edit.component.html
index 4e57cf8..4d0a6bc 100644
--- a/frontend/src/app/routes/settings/users/settings-users-edit/settings-users-edit.component.html
+++ b/frontend/src/app/routes/settings/users/settings-users-edit/settings-users-edit.component.html
@@ -74,7 +74,7 @@
   <div class="row">
     <div class="col-12 py-4">
       <button mat-raised-button color="accent" type="submit">
-        {{ editing ? "Update" : "Add" }}
+        {{ editing ? "UPDATE" : "ADD" }}
       </button>
 
       <button
@@ -84,7 +84,7 @@
         type="button"
         (click)="cancel()"
       >
-        Cancel
+        CANCEL
       </button>
     </div>
   </div>
diff --git a/frontend/src/app/routes/settings/users/settings-users.component.html b/frontend/src/app/routes/settings/users/settings-users.component.html
index 1d1705b..479dfc1 100644
--- a/frontend/src/app/routes/settings/users/settings-users.component.html
+++ b/frontend/src/app/routes/settings/users/settings-users.component.html
@@ -39,9 +39,9 @@
     <mat-header-cell *matHeaderCellDef>Actions</mat-header-cell>
     <mat-cell *matCellDef="let user">
       <button mat-icon-button (click)="editUser(user)">
-        <mat-icon fontSet="material-icons-outlined" aria-label="Edit"
-          >edit</mat-icon
-        >
+        <mat-icon fontSet="material-icons-outlined" aria-label="Edit">
+          edit
+        </mat-icon>
       </button>
       <button
         *ngIf="!isSystem(user)"
@@ -52,8 +52,9 @@
           fontSet="material-icons-outlined"
           class="icon-red"
           aria-label="Delete"
-          >delete</mat-icon
         >
+          delete
+        </mat-icon>
       </button>
     </mat-cell>
   </ng-container>
diff --git a/frontend/src/app/routes/settings/users/settings-users.component.ts b/frontend/src/app/routes/settings/users/settings-users.component.ts
index 7fa6648..10e2be8 100644
--- a/frontend/src/app/routes/settings/users/settings-users.component.ts
+++ b/frontend/src/app/routes/settings/users/settings-users.component.ts
@@ -64,12 +64,11 @@ export class SettingsUsersComponent implements OnInit {
       description: 'This action cannot be undone.',
       buttons: [
         {
-          color: 'primary',
           name: 'cancel',
           text: 'Cancel',
         },
         {
-          color: 'red',
+          color: 'warn',
           name: 'delete',
           text: 'Delete',
         },
diff --git a/frontend/src/app/routes/user/login/login.component.html b/frontend/src/app/routes/user/login/login.component.html
index 2dc8a16..a888a72 100644
--- a/frontend/src/app/routes/user/login/login.component.html
+++ b/frontend/src/app/routes/user/login/login.component.html
@@ -41,7 +41,7 @@
 
       <div class="col-12 py-2">
         <button mat-raised-button color="accent" class="mx-2" type="submit">
-          Login
+          LOGIN
         </button>
         <button
           *ngIf="showRegister"
@@ -51,7 +51,7 @@
           (click)="onRegister()"
           type="button"
         >
-          Register
+          REGISTER
         </button>
       </div>
     </form>
diff --git a/frontend/src/app/routes/user/register/register.component.html b/frontend/src/app/routes/user/register/register.component.html
index 1137a3b..5f5f426 100644
--- a/frontend/src/app/routes/user/register/register.component.html
+++ b/frontend/src/app/routes/user/register/register.component.html
@@ -57,7 +57,7 @@
 
       <div class="col-12 py-2">
         <button mat-raised-button color="accent" class="mx-2" type="submit">
-          Register
+          REGISTER
         </button>
         <button
           *ngIf="showLogin"
@@ -67,7 +67,7 @@
           (click)="onLogin()"
           type="button"
         >
-          Login
+          LOGIN
         </button>
       </div>
     </form>
diff --git a/frontend/src/app/services/api/info.service.ts b/frontend/src/app/services/api/info.service.ts
index 87dd32b..ee7cf02 100644
--- a/frontend/src/app/services/api/info.service.ts
+++ b/frontend/src/app/services/api/info.service.ts
@@ -91,7 +91,7 @@ export class InfoService {
             {
               text: 'Back',
               name: 'back',
-              color: 'green',
+              color: 'accent',
             },
             {
               text: 'Ignore',
diff --git a/frontend/src/app/util/util-module/confirm-dialog/confirm-dialog.component.html b/frontend/src/app/util/util-module/confirm-dialog/confirm-dialog.component.html
index 392e0dc..7f61e37 100644
--- a/frontend/src/app/util/util-module/confirm-dialog/confirm-dialog.component.html
+++ b/frontend/src/app/util/util-module/confirm-dialog/confirm-dialog.component.html
@@ -1,15 +1,14 @@
-<div class="centered">
+<div class="dialog-text">
   <h2>{{ data.title }}</h2>
   <p>{{ data.description }}</p>
-  <div class="buttons">
-    <button
-      *ngFor="let button of data.buttons"
-      mat-raised-button
-      color="primary"
-      class="button-{{ button.color }} mx-2"
-      (click)="onButton(button.name)"
-    >
-      {{ button.text }}
-    </button>
-  </div>
+</div>
+<div class="dialog-buttons">
+  <button
+    *ngFor="let button of data.buttons"
+    mat-button
+    [color]="button.color"
+    (click)="onButton(button.name)"
+  >
+    {{ button.text.toUpperCase() }}
+  </button>
 </div>
diff --git a/frontend/src/app/util/util-module/confirm-dialog/confirm-dialog.component.scss b/frontend/src/app/util/util-module/confirm-dialog/confirm-dialog.component.scss
index 54bd895..a206c9c 100644
--- a/frontend/src/app/util/util-module/confirm-dialog/confirm-dialog.component.scss
+++ b/frontend/src/app/util/util-module/confirm-dialog/confirm-dialog.component.scss
@@ -1,39 +1,41 @@
-.button-red {
-  background-color: #C62828;
-}
 
-.button-green {
-  background-color: #4CAF50;
-}
+// .button-red {
+//   background-color: #c62828;
+// }
 
-.button-blue {
-  background-color: #2196F3;
-}
+// .button-green {
+//   background-color: #4caf50;
+// }
 
-.button-yellow {
-  background-color: #FFEB3B;
-}
+// .button-blue {
+//   background-color: #2196f3;
+// }
 
-.button-grey {
-  background-color: #9E9E9E;
-}
+// .button-yellow {
+//   background-color: #ffeb3b;
+// }
 
-.button-orange {
-  background-color: #FF9800;
-}
+// .button-grey {
+//   background-color: #9e9e9e;
+// }
 
-.button-success {
-  background-color: #274E29;
-}
+// .button-orange {
+//   background-color: #ff9800;
+// }
 
-.button-error {
-  background-color: #761919;
-}
+// .button-success {
+//   background-color: #274e29;
+// }
 
-.button-warning, .button-warn {
-  background-color: #934D06;
-}
+// .button-error {
+//   background-color: #761919;
+// }
 
-.button-info {
-  background-color: #125E87;
-}
+// .button-warning,
+// .button-warn {
+//   background-color: #934d06;
+// }
+
+// .button-info {
+//   background-color: #125e87;
+// }
diff --git a/frontend/src/app/util/util-module/confirm-dialog/confirm-dialog.component.ts b/frontend/src/app/util/util-module/confirm-dialog/confirm-dialog.component.ts
index 5e273bb..288b0b9 100644
--- a/frontend/src/app/util/util-module/confirm-dialog/confirm-dialog.component.ts
+++ b/frontend/src/app/util/util-module/confirm-dialog/confirm-dialog.component.ts
@@ -4,7 +4,7 @@ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 export interface ConfirmDialogButton {
   text: string;
   name: string;
-  color: string;
+  color?: string;
 }
 
 export interface ConfirmDialogData {
diff --git a/frontend/src/app/util/util-module/download-dialog/download-dialog.component.html b/frontend/src/app/util/util-module/download-dialog/download-dialog.component.html
index 0bd603f..85e65a4 100644
--- a/frontend/src/app/util/util-module/download-dialog/download-dialog.component.html
+++ b/frontend/src/app/util/util-module/download-dialog/download-dialog.component.html
@@ -1,4 +1,4 @@
-<div class="centered">
+<div class="dialog-text">
   <h2>Downloading {{ data.name }}...</h2>
   <mat-progress-bar mode="indeterminate" color="accent"></mat-progress-bar>
 </div>
diff --git a/frontend/src/app/util/util-module/util.service.ts b/frontend/src/app/util/util-module/util.service.ts
index e09d870..86790f8 100644
--- a/frontend/src/app/util/util-module/util.service.ts
+++ b/frontend/src/app/util/util-module/util.service.ts
@@ -1,18 +1,15 @@
-import { BreakpointObserver } from '@angular/cdk/layout';
 import { Injectable } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { Router } from '@angular/router';
-import { AutoUnsubscribe } from 'ngx-auto-unsubscribe-decorator';
 import { HasFailed } from 'picsur-shared/dist/types';
-import { map, Observable } from 'rxjs';
 import { ApiService } from 'src/app/services/api/api.service';
 import { Logger } from 'src/app/services/logger/logger.service';
 import { SnackBarType } from '../../models/dto/snack-bar-type.dto';
 import { BootstrapService, BSScreenSize } from './bootstrap.service';
 import {
   ConfirmDialogComponent,
-  ConfirmDialogData,
+  ConfirmDialogData
 } from './confirm-dialog/confirm-dialog.component';
 import { DownloadDialogComponent } from './download-dialog/download-dialog.component';
 
@@ -55,6 +52,7 @@ export class UtilService {
         data: options,
         disableClose: true,
         closeOnNavigation: false,
+        panelClass: 'small-dialog-padding'
       });
       const subscription = ref.beforeClosed().subscribe((result) => {
         subscription.unsubscribe();
diff --git a/frontend/src/scss/dialog.scss b/frontend/src/scss/dialog.scss
new file mode 100644
index 0000000..92f905c
--- /dev/null
+++ b/frontend/src/scss/dialog.scss
@@ -0,0 +1,19 @@
+.small-dialog-padding mat-dialog-container {
+  padding: 0;
+}
+
+.dialog-text {
+  margin: 24px 24px 0 24px;
+}
+
+.dialog-buttons {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+
+  margin: 12px;
+
+  & > :not(:first-of-type) {
+    margin-left: 12px;
+  }
+}
diff --git a/frontend/src/scss/index.scss b/frontend/src/scss/index.scss
index 3e50db0..9532cdc 100644
--- a/frontend/src/scss/index.scss
+++ b/frontend/src/scss/index.scss
@@ -5,5 +5,5 @@
 @use "./personal.scss";
 @use "./fab.scss";
 @use "./snackbar.scss";
-
+@use "./dialog.scss";
 
diff --git a/frontend/src/scss/material/material-theme.scss b/frontend/src/scss/material/material-theme.scss
index 5f80d48..8e898ef 100644
--- a/frontend/src/scss/material/material-theme.scss
+++ b/frontend/src/scss/material/material-theme.scss
@@ -176,13 +176,6 @@ $mat-theme-light: (
   @include custom-mat.custom-material($mat-theme-light);
 }
 
-.mat-button-base {
-  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;
diff --git a/support/purge-all.sh b/support/purge-all.sh
index 4061b4c..2c891d2 100755
--- a/support/purge-all.sh
+++ b/support/purge-all.sh
@@ -16,3 +16,8 @@ yarn purge
   cd frontend
   yarn purge
 )
+
+(
+  cd support
+  podman-compose -f ./dev.docker-compose.yml down
+)
diff --git a/yarn.lock b/yarn.lock
index da2e0c3..563b4a4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1460,9 +1460,9 @@
   integrity sha512-GryiOJmNcWbovBxTfZSF71V/mXbgcV3MewDe3kIMCLyIh5e7SKAeUZs+rMnJ8jkMolZ/4/VsdBmMrw3l+VdZ3w==
 
 "@jridgewell/trace-mapping@^0.3.0", "@jridgewell/trace-mapping@^0.3.9":
-  version "0.3.10"
-  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.10.tgz#db436f0917d655393851bc258918c00226c9b183"
-  integrity sha512-Q0YbBd6OTsXm8Y21+YUSDXupHnodNC2M4O18jtd3iwJ3+vMZNdKGols0a9G6JOK0dcJ3IdUUHoh908ZI6qhk8Q==
+  version "0.3.11"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.11.tgz#eb2e124521f27673493030d02dffedf60e56553f"
+  integrity sha512-RllI476aSMsxzeI9TtlSMoNTgHDxEmnl6GkkHwhr0vdL8W+0WuesyI8Vd3rBOfrwtPXbPxdT9ADJdiOKgzxPQA==
   dependencies:
     "@jridgewell/resolve-uri" "^3.0.3"
     "@jridgewell/sourcemap-codec" "^1.4.10"
@@ -3136,9 +3136,9 @@ copy-webpack-plugin@10.2.4:
     serialize-javascript "^6.0.0"
 
 core-js-compat@^3.20.2, core-js-compat@^3.21.0:
-  version "3.22.4"
-  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.22.4.tgz#d700f451e50f1d7672dcad0ac85d910e6691e579"
-  integrity sha512-dIWcsszDezkFZrfm1cnB4f/J85gyhiCpxbgBdohWCDtSVuAaChTSpPV7ldOQf/Xds2U5xCIJZOK82G4ZPAIswA==
+  version "3.22.5"
+  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.22.5.tgz#7fffa1d20cb18405bd22756ca1353c6f1a0e8614"
+  integrity sha512-rEF75n3QtInrYICvJjrAgV03HwKiYvtKHdPtaba1KucG+cNZ4NJnH9isqt979e67KZlhpbCOTwnsvnIr+CVeOg==
   dependencies:
     browserslist "^4.20.3"
     semver "7.0.0"
@@ -3508,7 +3508,7 @@ end-of-stream@^1.1.0, end-of-stream@^1.4.1, end-of-stream@^1.4.4:
   dependencies:
     once "^1.4.0"
 
-enhanced-resolve@^5.0.0, enhanced-resolve@^5.7.0, enhanced-resolve@^5.9.2:
+enhanced-resolve@^5.0.0, enhanced-resolve@^5.7.0, enhanced-resolve@^5.9.2, enhanced-resolve@^5.9.3:
   version "5.9.3"
   resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.9.3.tgz#44a342c012cbc473254af5cc6ae20ebd0aae5d88"
   integrity sha512-Bq9VSor+kjvW3f9/MiiR4eE3XYgOl7/rS8lnSxbRbF3kS0B2r+Y9w5krBWxZgDxASVZbdYrn5wT4j/Wb0J9qow==
@@ -8199,7 +8199,7 @@ webpack@5.71.0:
     watchpack "^2.3.1"
     webpack-sources "^3.2.3"
 
-webpack@5.72.0, webpack@^5.72.0:
+webpack@5.72.0:
   version "5.72.0"
   resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.72.0.tgz#f8bc40d9c6bb489a4b7a8a685101d6022b8b6e28"
   integrity sha512-qmSmbspI0Qo5ld49htys8GY9XhS9CGqFoHTsOVAnjBdg0Zn79y135R+k4IR4rKK6+eKaabMhJwiVB7xw0SJu5w==
@@ -8229,6 +8229,36 @@ webpack@5.72.0, webpack@^5.72.0:
     watchpack "^2.3.1"
     webpack-sources "^3.2.3"
 
+webpack@^5.72.0:
+  version "5.72.1"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.72.1.tgz#3500fc834b4e9ba573b9f430b2c0a61e1bb57d13"
+  integrity sha512-dXG5zXCLspQR4krZVR6QgajnZOjW2K/djHvdcRaDQvsjV9z9vaW6+ja5dZOYbqBBjF6kGXka/2ZyxNdc+8Jung==
+  dependencies:
+    "@types/eslint-scope" "^3.7.3"
+    "@types/estree" "^0.0.51"
+    "@webassemblyjs/ast" "1.11.1"
+    "@webassemblyjs/wasm-edit" "1.11.1"
+    "@webassemblyjs/wasm-parser" "1.11.1"
+    acorn "^8.4.1"
+    acorn-import-assertions "^1.7.6"
+    browserslist "^4.14.5"
+    chrome-trace-event "^1.0.2"
+    enhanced-resolve "^5.9.3"
+    es-module-lexer "^0.9.0"
+    eslint-scope "5.1.1"
+    events "^3.2.0"
+    glob-to-regexp "^0.4.1"
+    graceful-fs "^4.2.9"
+    json-parse-even-better-errors "^2.3.1"
+    loader-runner "^4.2.0"
+    mime-types "^2.1.27"
+    neo-async "^2.6.2"
+    schema-utils "^3.1.0"
+    tapable "^2.1.1"
+    terser-webpack-plugin "^5.1.3"
+    watchpack "^2.3.1"
+    webpack-sources "^3.2.3"
+
 websocket-driver@>=0.5.1, websocket-driver@^0.7.4:
   version "0.7.4"
   resolved "https://registry.yarnpkg.com/websocket-driver/-/websocket-driver-0.7.4.tgz#89ad5295bbf64b480abcba31e4953aca706f5760"