small ui improvements

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

@@ -1,3 +1,4 @@
+import { Clipboard } from '@angular/cdk/clipboard';
 import { Component, Input } from '@angular/core';
 import { SnackBarType } from 'src/app/models/snack-bar-type';
 import { UtilService } from 'src/app/util/util.service';
@@ -12,18 +13,17 @@ export class CopyFieldComponent {
   @Input() label: string = 'Loading...';
   @Input() value: string = 'Loading...';
 
-  constructor(private utilService: UtilService) {}
+  constructor(private utilService: UtilService, private clipboard: Clipboard) {}
 
   public copy() {
-    try {
-      navigator.clipboard.writeText(this.value);
-    } catch (e) {
-      return this.utilService.showSnackBar(
-        'Copying to clipboard failed',
-        SnackBarType.Error
-      );
+    if (this.clipboard.copy(this.value)) {
+      this.utilService.showSnackBar(`Copied ${this.label}!`, SnackBarType.Info);
+      return;
     }
 
-    this.utilService.showSnackBar(`Copied ${this.label}!`, SnackBarType.Info);
+    return this.utilService.showSnackBar(
+      'Copying to clipboard failed',
+      SnackBarType.Error
+    );
   }
 }

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

@@ -1,3 +1,4 @@
+import { ClipboardModule } from '@angular/cdk/clipboard';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
@@ -11,6 +12,7 @@ import { CopyFieldComponent } from './copyfield.component';
     MatInputModule,
     MatIconModule,
     MatButtonModule,
+    ClipboardModule,
   ],
   exports: [CopyFieldComponent],
 })

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

@@ -4,7 +4,9 @@ import { AutoUnsubscribe } from 'ngx-auto-unsubscribe-decorator';
 import { EUser } from 'picsur-shared/dist/entities/user.entity';
 import { HasFailed } from 'picsur-shared/dist/types';
 import { BehaviorSubject, Subject, throttleTime } from 'rxjs';
+import { SnackBarType } from 'src/app/models/snack-bar-type';
 import { UserManageService } from 'src/app/services/api/usermanage.service';
+import { UtilService } from 'src/app/util/util.service';
 
 @Component({
   templateUrl: './settings-users.component.html',
@@ -20,7 +22,10 @@ export class SettingsUsersComponent implements OnInit {
 
   @ViewChild(MatPaginator) paginator: MatPaginator;
 
-  constructor(private userManageService: UserManageService) {}
+  constructor(
+    private userManageService: UserManageService,
+    private utilService: UtilService
+  ) {}
 
   async ngOnInit() {
     this.subscribeToUpdate();
@@ -51,7 +56,13 @@ export class SettingsUsersComponent implements OnInit {
     pageIndex: number
   ): Promise<boolean> {
     const result = await this.userManageService.getUsers(pageSize, pageIndex);
-    if (HasFailed(result)) return false;
+    if (HasFailed(result)) {
+      this.utilService.showSnackBar(
+        'Failed to fetch users',
+        SnackBarType.Error
+      );
+      return false;
+    }
 
     if (result.length > 0) {
       this.dataSubject.next(result);

frontend/src/scss/snackbar.scss

@@ -3,19 +3,19 @@
   color: white;
 
   &.snack-success {
-    background: #4d9a51;
+    background: #274E29;
   }
 
   &.snack-error {
-    background: #d74545;
+    background: #761919;
   }
 
   &.snack-warning {
-    background: #f68a1c;
+    background: #934D06;
   }
 
   &.snack-info {
-    background: #1d95d6;
+    background: #125E87;
   }
 
   &.snack-default {