Fix many more graphical bugs

frontend/src/app/components/copy-field/copy-field.component.html

@@ -1,4 +1,4 @@
-<mat-form-field appearance="outline" color="accent">
+<mat-form-field [appearance]="appearance" [color]="color" [subscriptSizing]="subscriptSizing">
   <mat-label>{{ label }}</mat-label>
   <input
     matInput

frontend/src/app/components/copy-field/copy-field.component.ts

@@ -1,5 +1,6 @@
 import { Clipboard } from '@angular/cdk/clipboard';
 import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { MatFormFieldAppearance, SubscriptSizing } from '@angular/material/form-field';
 import { Fail, FT } from 'picsur-shared/dist/types';
 import { Logger } from 'src/app/services/logger/logger.service';
 import { ErrorService } from 'src/app/util/error-manager/error.service';
@@ -19,6 +20,10 @@ export class CopyFieldComponent {
   @Input() showHideButton: boolean = false;
   @Input() hidden: boolean = false;
 
+  @Input() color: 'primary' | 'accent' | 'warn' = 'primary';
+  @Input() appearance: MatFormFieldAppearance = 'outline';
+  @Input() subscriptSizing: SubscriptSizing = 'fixed';
+
   @Output('copy') onCopy = new EventEmitter<string>();
   @Output('hide') onHide = new EventEmitter<boolean>();
 

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

@@ -7,7 +7,7 @@ import { Component, Input } from '@angular/core';
 export class FabComponent {
   @Input('aria-label') ariaLabel: string = 'Floating Action Button';
   @Input() icon: string = 'add';
-  @Input() color: string = 'accent';
+  @Input() color: string = 'primary';
   @Input('tooltip') tooltip: string;
   @Input() onClick: () => void = () => {};
 

frontend/src/app/components/fab/speed-dial/speed-dial-option.directive.ts

@@ -11,6 +11,6 @@ export class SpeedDialOptionDirective {
     @Host() @Optional() button?: MatMiniFabButton,
   ) {
     if (tooltip) tooltip.position = 'left';
-    if (button) button.color = 'primary';
+    if (button) button.color = 'accent';
   }
 }

frontend/src/app/components/fab/speed-dial/speed-dial.component.ts

@@ -13,7 +13,7 @@ export class SpeedDialComponent {
 
   @Input('icon') icon: string = 'add';
   @Input('icon-hover') iconHover: string = 'close';
-  @Input('color') color: string = 'accent';
+  @Input('color') color: string = 'primary';
   @Input('open-on-hover') openOnHover: boolean = false;
   @Input('tooltip') tooltip: string;
 

frontend/src/app/components/picsur-img/picsur-img.component.html

@@ -17,5 +17,4 @@
   (nguiInview)="onInview($event)"
   (nguiOutview)="onOutview($event)"
   *ngIf="state === 'loading'"
-  color="accent"
 ></mat-spinner>

frontend/src/app/components/pref-option/pref-option.component.html

@@ -4,7 +4,11 @@
       <h3 mat-line>{{ name }}</h3>
     </div>
     <div class="y-center col-md-6 col-12">
-      <mat-form-field appearance="outline" color="accent">
+      <mat-form-field
+        appearance="outline"
+        color="primary"
+        subscriptSizing="dynamic"
+      >
         <input
           matInput
           [value]="pref.value"
@@ -23,7 +27,11 @@
       <h3 mat-line>{{ name }}</h3>
     </div>
     <div class="y-center col-md-6 col-12">
-      <mat-form-field appearance="outline" color="accent">
+      <mat-form-field
+        appearance="outline"
+        color="primary"
+        subscriptSizing="dynamic"
+      >
         <input
           matInput
           type="number"
@@ -42,6 +50,7 @@
     </div>
     <div class="y-center col-md-6 col-12">
       <mat-slide-toggle
+        color="primary"
         class="col-md-6 col-12"
         [checked]="valBool"
         (change)="update($event.checked)"

frontend/src/app/components/pref-option/pref-option.component.scss

@@ -1,5 +1,6 @@
 mat-form-field {
   min-width: 50%;
+  margin-block: .5rem;
 }
 
 .y-center {
@@ -8,12 +9,6 @@ mat-form-field {
   flex-direction: column;
 }
 
-mat-form-field::before {
-  content: '';
-  display: inline-block;
-  height: 16px;
-}
-
 h3 {
   margin: 0;
 }

frontend/src/app/components/values-picker/values-picker.component.html

@@ -1,7 +1,7 @@
-<mat-form-field class="value-picker" appearance="outline" color="accent">
+<mat-form-field class="value-picker" appearance="outline">
   <mat-label>{{ nameCapMul }}</mat-label>
   <mat-chip-grid #chipList>
-    <mat-chip
+    <mat-chip-row
       *ngFor="let item of this.myControl.value"
       [removable]="!isDisabled(item)"
       [disabled]="isDisabled(item)"
@@ -11,7 +11,7 @@
       <button *ngIf="!isDisabled(item)" matChipRemove>
         <mat-icon fontSet="material-icons-outlined">cancel</mat-icon>
       </button>
-    </mat-chip>
+    </mat-chip-row>
     <input
       placeholder="Add {{ name }}..."
       [formControl]="inputControl"

frontend/src/app/routes/images/images.component.scss

@@ -1,4 +1,10 @@
 picsur-img {
   margin-top: 1em;
   margin-bottom: .5em;
-}
+}
+
+// add 1em margin left to each non-first button in
+
+mat-card-actions > :not(:first-of-type) {
+  margin-left: 1em;
+}

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

@@ -1,6 +1,6 @@
 <div class="content-border">
   <div class="centered">
     <h1>Processing</h1>
-    <mat-spinner color="accent"></mat-spinner>
+    <mat-spinner></mat-spinner>
   </div>
 </div>

frontend/src/app/routes/settings/apikeys/apikey-editor/apikey-editor.component.html

@@ -1,4 +1,4 @@
-<mat-form-field class="editfield" appearance="outline">
+<mat-form-field class="editfield" appearance="outline" color="primary">
   <mat-label>Name</mat-label>
   <input matInput [formControl]="field" (change)="update($event)" />
   <mat-error *ngIf="field.invalid">{{ getErrorMessage() }}</mat-error>

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

@@ -54,7 +54,6 @@
 </mat-table>
 
 <mat-paginator
-  color="accent"
   class="mat-elevation-z2"
   [pageSizeOptions]="pageSizeOptions"
   [pageSize]="startingPageSize"

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

@@ -1,5 +1,5 @@
 <ng-container *ngIf="editing">
-  <h1>Editing {{ model.rolenameValue }}</h1>
+  <h1>Editing role "{{ model.rolenameValue }}"</h1>
 </ng-container>
 <ng-container *ngIf="adding">
   <h1>Add new role</h1>
@@ -8,7 +8,7 @@
 <form (ngSubmit)="updateRole()">
   <div class="row" *ngIf="adding">
     <div class="col-lg-6 col-12">
-      <mat-form-field appearance="outline" color="accent">
+      <mat-form-field appearance="outline">
         <mat-label>Role name</mat-label>
         <input
           matInput
@@ -39,14 +39,14 @@
 
   <div class="row">
     <div class="col-12 py-4">
-      <button mat-raised-button color="accent" type="submit">
+      <button mat-raised-button type="submit" color="primary">
         {{ editing ? 'UPDATE' : 'ADD' }}
       </button>
 
       <button
         mat-raised-button
         class="ms-2"
-        color="primary"
+        color="accent"
         type="button"
         (click)="cancel()"
       >

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

@@ -70,7 +70,6 @@
 </mat-table>
 
 <mat-paginator
-  color="accent"
   class="mat-elevation-z2"
   [pageSizeOptions]="pageSizeOptions"
   [pageSize]="startingPageSize"

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

@@ -7,11 +7,7 @@
   </p>
 
   <div class="row">
-    <mat-form-field
-      class="col-12 col-md-6 col-xl-4"
-      appearance="outline"
-      color="accent"
-    >
+    <mat-form-field class="col-12 col-md-6 col-xl-4" appearance="outline">
       <mat-label>Api Key</mat-label>
       <mat-select
         msInfiniteScroll
@@ -25,11 +21,7 @@
       </mat-select>
     </mat-form-field>
 
-    <mat-form-field
-      class="col-12 col-md-3 col-xl-2"
-      appearance="outline"
-      color="accent"
-    >
+    <mat-form-field class="col-12 col-md-3 col-xl-2" appearance="outline">
       <mat-label>Image Format</mat-label>
       <mat-select [(value)]="selectedFormat">
         <mat-option *ngFor="let format of formatOptions" [value]="format.key">
@@ -42,8 +34,8 @@
   <div class="row">
     <div class="col">
       <button
+        color="primary"
         mat-raised-button
-        color="accent"
         [disabled]="key === null"
         (click)="onExport()"
       >
@@ -57,12 +49,12 @@
   <h1>No API keys available</h1>
   <p>You need to have at least one API key to create a ShareX target config.</p>
 
-  <button mat-raised-button color="accent" routerLink="/settings/apikeys">
+  <button color="primary" mat-raised-button routerLink="/settings/apikeys">
     Create an API key here
   </button>
 </div>
 
 <div *ngIf="available < 0">
   <h1>Loading</h1>
-  <mat-spinner color="accent"></mat-spinner>
+  <mat-spinner></mat-spinner>
 </div>

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

@@ -1,5 +1,5 @@
 <ng-container *ngIf="editing">
-  <h1>Editing {{ model.usernameValue }}</h1>
+  <h1>Editing user "{{ model.usernameValue }}"</h1>
 </ng-container>
 <ng-container *ngIf="adding">
   <h1>Add new user</h1>
@@ -8,7 +8,7 @@
 <form (ngSubmit)="updateUser()">
   <div class="row" *ngIf="adding">
     <div class="col-lg-6 col-12">
-      <mat-form-field appearance="outline" color="accent">
+      <mat-form-field appearance="outline">
         <mat-label>Username</mat-label>
         <input
           matInput
@@ -28,7 +28,7 @@
 
   <div class="row">
     <div class="col-lg-6 col-12">
-      <mat-form-field appearance="outline" color="accent">
+      <mat-form-field appearance="outline">
         <mat-label>{{ editing ? 'New Password' : 'Password' }}</mat-label>
         <input
           matInput
@@ -73,14 +73,14 @@
 
   <div class="row">
     <div class="col-12 py-4">
-      <button mat-raised-button color="accent" type="submit">
+      <button mat-raised-button type="submit" color="primary">
         {{ editing ? 'UPDATE' : 'ADD' }}
       </button>
 
       <button
         mat-raised-button
         class="ms-2"
-        color="primary"
+        color="accent"
         type="button"
         (click)="cancel()"
       >

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

@@ -64,7 +64,6 @@
 </mat-table>
 
 <mat-paginator
-  color="accent"
   class="mat-elevation-z2"
   [pageSizeOptions]="pageSizeOptions"
   [pageSize]="startingPageSize"

frontend/src/app/routes/user/login/login.component.html

@@ -13,7 +13,7 @@
       </div>
 
       <div class="col-12 py-2">
-        <mat-form-field appearance="outline" color="accent">
+        <mat-form-field appearance="outline">
           <mat-label>Username</mat-label>
           <input
             matInput
@@ -31,7 +31,7 @@
       </div>
 
       <div class="col-12 py-2">
-        <mat-form-field appearance="outline" color="accent">
+        <mat-form-field appearance="outline">
           <mat-label>Password</mat-label>
           <input
             matInput
@@ -49,7 +49,7 @@
       <div class="col-12 py-2">
         <button
           mat-raised-button
-          color="accent"
+          color="primary"
           class="mx-2"
           type="submit"
           [disabled]="loading"
@@ -59,7 +59,7 @@
         <button
           *ngIf="showRegister"
           mat-flat-button
-          color="primary"
+          color="accent"
           class="mx-2"
           (click)="onRegister()"
           type="button"

frontend/src/app/routes/user/register/register.component.html

@@ -13,7 +13,7 @@
       </div>
 
       <div class="col-12 py-2">
-        <mat-form-field appearance="outline" color="accent">
+        <mat-form-field appearance="outline">
           <mat-label>Username</mat-label>
           <input
             matInput
@@ -31,7 +31,7 @@
       </div>
 
       <div class="col-12 py-2">
-        <mat-form-field appearance="outline" color="accent">
+        <mat-form-field appearance="outline">
           <mat-label>Password</mat-label>
           <input
             matInput
@@ -47,7 +47,7 @@
       </div>
 
       <div class="col-12 py-2">
-        <mat-form-field appearance="outline" color="accent">
+        <mat-form-field appearance="outline">
           <mat-label>Confirm Password</mat-label>
           <input
             matInput
@@ -66,7 +66,7 @@
         <button
           *ngIf="showLogin"
           mat-flat-button
-          color="primary"
+          color="accent"
           class="mx-2"
           (click)="onLogin()"
           type="button"
@@ -75,7 +75,7 @@
         </button>
         <button
           mat-flat-button
-          color="accent"
+          color="primary"
           class="mx-2"
           type="submit"
           [disabled]="loading"

frontend/src/app/routes/view/customize-dialog/customize-dialog.component.html

@@ -4,7 +4,7 @@
       <h1>Customize Image</h1>
     </div>
     <div class="col-xl-4 col-12">
-      <mat-form-field>
+      <mat-form-field subscriptSizing="dynamic">
         <mat-label>Format</mat-label>
         <mat-select [(value)]="selectedFormat">
           <mat-option *ngFor="let format of formatOptions" [value]="format.key">
@@ -15,7 +15,7 @@
     </div>
 
     <div class="col-xl-2 col-md-3 col-sm-6 col-12">
-      <mat-form-field [matTooltip]="sizeTooltip">
+      <mat-form-field [matTooltip]="sizeTooltip" subscriptSizing="dynamic">
         <mat-label>Height</mat-label>
         <input
           matInput
@@ -29,8 +29,8 @@
 
     <div class="col-xl-2 col-md-3 col-sm-6 col-12">
       <mat-form-field
+        subscriptSizing="dynamic"
         appearance="outline"
-        color="accent"
         [matTooltip]="sizeTooltip"
       >
         <mat-label>Width</mat-label>
@@ -39,7 +39,7 @@
     </div>
 
     <div class="col-xl-2 col-md-3 col-sm-6 col-12">
-      <mat-form-field>
+      <mat-form-field subscriptSizing="dynamic">
         <mat-label>Rotation</mat-label>
         <mat-select [(value)]="rotate">
           <mat-option *ngFor="let option of rotationOptions" [value]="option">
@@ -50,7 +50,7 @@
     </div>
 
     <div class="col-xl-2 col-md-3 col-sm-6 col-12">
-      <mat-form-field>
+      <mat-form-field subscriptSizing="dynamic">
         <mat-label>Quality %</mat-label>
         <input matInput type="number" min="0" max="100" [(ngModel)]="quality" />
       </mat-form-field>
@@ -87,7 +87,7 @@
     </div>
 
     <div class="col-12">
-      <copy-field label="Custom Image URL" [value]="getURL()"></copy-field>
+      <copy-field  subscriptSizing="dynamic" label="Custom Image URL" [value]="getURL()"></copy-field>
     </div>
   </div>
   <div class="dialog-buttons">

frontend/src/app/routes/view/edit-dialog/edit-dialog.component.html

@@ -5,7 +5,7 @@
         <h1>Edit Image</h1>
       </div>
       <div class="col-12">
-        <mat-form-field appearance="outline" color="accent">
+        <mat-form-field appearance="outline">
           <mat-label>Title</mat-label>
           <input
             matInput
@@ -33,8 +33,10 @@
       </div>
     </div>
     <div class="dialog-buttons">
-      <button type="button" mat-flat-button (click)="close()">CANCEL</button>
-      <button type="submit" mat-raised-button color="accent">SAVE</button>
+      <button type="button" mat-flat-button (click)="close()" color="accent">
+        CANCEL
+      </button>
+      <button type="submit" mat-raised-button color="primary">SAVE</button>
     </div>
   </form>
 </div>

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

@@ -26,7 +26,7 @@
     </div>
 
     <div class="col-md-6 col-12">
-      <mat-form-field appearance="outline" color="accent">
+      <mat-form-field appearance="outline" color="primary">
         <mat-label>Image Format</mat-label>
         <mat-select [(value)]="selectedFormat">
           <mat-option *ngFor="let format of formatOptions" [value]="format.key">

frontend/src/app/util/dialog-manager/download-dialog/download-dialog.component.html

@@ -1,4 +1,5 @@
 <div class="dialog-text">
   <h2>Downloading {{ data.name }}...</h2>
-  <mat-progress-bar mode="indeterminate" color="accent"></mat-progress-bar>
+  <mat-progress-bar mode="indeterminate"></mat-progress-bar>
 </div>
+<div class="dialog-buttons"></div>

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

@@ -6,9 +6,6 @@ mat.$theme-ignore-duplication-warnings: true;
 
 @include mat.core();
 
-$dark-primary-text: rgba(black, 0.87);
-$light-primary-text: white;
-
 $picsur-primary: mat.define-palette(mat.$green-palette, 600, 100, 900);
 $picsur-accent: mat.define-palette(mat.$blue-grey-palette, 600, 200, 800);
 $picsur-warn: mat.define-palette(mat.$red-palette);
@@ -132,10 +129,11 @@ $mat-theme: (
     warn: $picsur-warn,
     background: $mat-dark-theme-background-palette,
     foreground: $mat-dark-theme-foreground-palette,
+    is-dark: true,
   ),
 );
 
-$mat-theme-light: mat.define-light-theme(
+$mat-theme-light: (
   (
     color: (
       primary: $picsur-primary,
@@ -151,10 +149,10 @@ $mat-theme-light: mat.define-light-theme(
 @include mat.all-component-typographies($mat-theme);
 @include custom-mat.custom-material($mat-theme);
 
-.theme-alternate {
-  @include mat.all-component-colors($mat-theme-light);
-  @include custom-mat.custom-material($mat-theme-light);
-}
+// .theme-alternate {
+//   @include mat.all-component-colors($mat-theme-light);
+//   @include custom-mat.custom-material($mat-theme-light);
+// }
 
 .mat-standard-chip {
   padding: 0.5em 0.85em;