some changes for pro version

Author: nodeful

ui/src/app/app.component.scss

@@ -82,6 +82,7 @@ $noise: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyA
 
   .dropdown-section {
     width: 100%;
+    box-sizing: border-box;
     position: absolute;
     z-index: 4;
     transform-origin: right top;

ui/src/app/app.component.ts

@@ -39,7 +39,9 @@ export class AppComponent implements OnInit, AfterContentInit {
     public analytics: AnalyticsService,
     public app: ApplicationService,
     public settings: SettingsService
-  ) { }
+  ) {
+    this.app.ref = this
+  }
 
   async ngOnInit () {
     await this.sync()

ui/src/app/app.module.ts

@@ -76,6 +76,7 @@ import { ConfirmDialogComponent } from './components/confirm-dialog/confirm-dial
 import { EqualizerPresetsComponent } from './sections/effects/equalizers/presets/equalizer-presets.component'
 import { PromptDialogComponent } from './components/prompt-dialog/prompt-dialog.component'
 import { OptionsDialogComponent } from './components/options-dialog/options-dialog.component'
+import { MatSnackBarModule } from '@angular/material/snack-bar'
 
 @NgModule({
   imports: [
@@ -85,6 +86,7 @@ import { OptionsDialogComponent } from './components/options-dialog/options-dial
     PipesModule,
     EqmacComponentsModule,
     MatDialogModule,
+    MatSnackBarModule,
     BrowserModule
   ],
   entryComponents: [

ui/src/app/services/app.service.ts

@@ -1,4 +1,5 @@
 import { Injectable } from '@angular/core'
+import { AppComponent } from '../app.component'
 import { DataService } from './data.service'
 
 export interface MacInfo {
@@ -11,6 +12,8 @@ export interface MacInfo {
   providedIn: 'root'
 })
 export class ApplicationService extends DataService {
+  ref?: AppComponent
+
   getMacInfo (): Promise<MacInfo> {
     return this.request({ method: 'GET', endpoint: '/info' })
   }

ui/src/app/services/toast.service.ts

@@ -0,0 +1,26 @@
+import { Injectable } from '@angular/core'
+import { MatSnackBar } from '@angular/material/snack-bar'
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ToastService {
+  constructor (private readonly snackBar: MatSnackBar) {}
+
+  open ({ message, action }: {
+    message: string
+    action?: string
+  }) {
+    action = action || 'Hide'
+    const duration = 1000
+    const toast = this.snackBar.open(message, action, {
+      horizontalPosition: 'center',
+      verticalPosition: 'top',
+      duration: 10000,
+      panelClass: [ 'dark-bg', 'light' ]
+    })
+    setTimeout(() => {
+      toast?.dismiss()
+    }, duration)
+  }
+}

ui/src/app/styles/_colors.scss

@@ -1,6 +1,89 @@
 $accent: #4f8d71;
-$warning: #e80415;
+::ng-deep .accent {
+  color: $accent !important;
+}
+
+::ng-deep .accent-bg {
+  background-color: $accent !important;
+}
+
+$accent-light: #4DAD82;
+::ng-deep .accent-light {
+  color: $accent-light !important;
+}
+
+::ng-deep .accent-light-bg {
+  background-color: $accent-light !important;
+}
+
+$warning: #eb3f42;
+::ng-deep .warning {
+  color: $warning !important;
+}
+
+::ng-deep .warning-bg {
+  background-color: $warning !important;
+}
+
 $gradient-start: #5a5b5f;
-$gradient-end: #2c2c2e;
+::ng-deep .gradient-start {
+  color: $gradient-start !important;
+}
+
+::ng-deep .gradient-start-bg {
+  background-color: $gradient-start !important;
+}
+
+$gradient-end: rgb(44, 44, 46);
+::ng-deep .gradient-end {
+  color: $gradient-end !important;
+}
+
+::ng-deep .gradient-end-bg {
+  background-color: $gradient-end !important;
+}
+
+$icon-gradient-start: #05FF71;
+::ng-deep .icon-gradient-start {
+  color: $icon-gradient-start !important;
+}
+
+::ng-deep .icon-gradient-start-bg {
+  background-color: $icon-gradient-start !important;
+}
+
+$icon-gradient-middle: #03F193;
+::ng-deep .icon-gradient-middle {
+  color: $icon-gradient-middle !important;
+}
+
+::ng-deep .icon-gradient-middle-bg {
+  background-color: $icon-gradient-middle !important;
+}
+
+$icon-gradient-end: #04E2B5;
+::ng-deep .icon-gradient-end {
+  color: $icon-gradient-end !important;
+}
+
+::ng-deep .icon-gradient-end-bg {
+  background-color: $icon-gradient-end !important;
+}
+
 $light: #c9cdd0;
-$dark: #16191c;
+::ng-deep .light {
+  color: $light !important;
+}
+
+::ng-deep .light-bg {
+  background-color: $light !important;
+}
+
+$dark: rgb(22, 25, 28);
+::ng-deep .dark {
+  color: $dark !important;
+}
+
+::ng-deep .dark-bg {
+  background-color: $dark !important;
+}