From 36ed8ebaaf7fe08dd6a68608ceececde76564c52 Mon Sep 17 00:00:00 2001
From: Nodeful <romankisilo@gmail.com>
Date: Thu, 11 Nov 2021 23:32:41 +0200
Subject: [PATCH] ui fixes and tweaks

---
 .vscode/settings.json                         |  2 ++
 .../checkbox/checkbox.component.html          |  6 ++---
 .../components/checkbox/checkbox.component.ts | 15 +++++++++---
 .../container/container.component.scss        |  1 -
 .../container/container.component.ts          |  3 ++-
 .../dropdown/dropdown.component.html          | 10 ++++----
 .../dropdown/dropdown.component.scss          |  2 +-
 .../components/dropdown/dropdown.component.ts |  4 +++-
 .../flat-slider/flat-slider.component.ts      |  6 +++--
 .../components/src/components/icon/icons.ts   |  3 +++
 .../input-field/input-field.component.html    |  4 ++--
 .../input-field/input-field.component.scss    |  1 -
 .../input-field/input-field.component.ts      |  4 +++-
 .../components/loading/loading.component.html |  2 +-
 .../components/loading/loading.component.ts   |  5 ++++
 .../skeuomorph-slider.component.ts            |  3 ++-
 .../components/tooltip/tooltip.component.scss |  6 ++---
 .../components/tooltip/tooltip.component.ts   |  1 +
 modules/components/tsconfig.json              |  2 +-
 native/app/Source/Application.swift           |  4 ++++
 native/app/Source/ApplicationState.swift      |  2 +-
 native/app/Source/Constants.swift             |  6 +++--
 native/app/Source/Networking/Networking.swift | 23 +++++++++++--------
 ui/package.json                               |  2 +-
 ui/src/app/app.component.html                 |  3 ++-
 ui/src/app/app.component.scss                 |  2 +-
 ui/src/app/app.component.ts                   |  1 +
 .../components/options/options.component.ts   |  2 +-
 .../advanced-equalizer.component.html         |  2 +-
 .../advanced-equalizer.component.ts           |  4 +++-
 .../basic-equalizer.component.html            |  2 +-
 .../sections/outputs/outputs.component.html   |  2 +-
 .../app/sections/outputs/outputs.component.ts |  7 +++++-
 .../balance/balance.component.html            |  2 +-
 .../booster/booster.component.html            |  4 ++--
 ui/src/app/services/ui.service.ts             |  9 --------
 ui/src/app/styles/_colors.scss                |  2 +-
 37 files changed, 97 insertions(+), 62 deletions(-)
 create mode 100644 .vscode/settings.json

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..7a73a41
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,2 @@
+{
+}
\ No newline at end of file
diff --git a/modules/components/src/components/checkbox/checkbox.component.html b/modules/components/src/components/checkbox/checkbox.component.html
index f5c26dd..dc3965d 100644
--- a/modules/components/src/components/checkbox/checkbox.component.html
+++ b/modules/components/src/components/checkbox/checkbox.component.html
@@ -1,5 +1,5 @@
 <ng-template #label>
-  <eqm-label style="margin: 0 5px;" [clickable]="enabled">
+  <eqm-label style="margin: 0 5px;" [clickable]="enabled" [color]="labelColor">
     <ng-content></ng-content>
   </eqm-label>
 </ng-template>
@@ -7,8 +7,8 @@
 <div *ngIf="labelSide === 'left'" #content>
   <ng-container *ngTemplateOutlet="label"></ng-container>
 </div>
-<eqm-container>
-  <eqm-icon name="checkbox" [size]="10" [color]="checked ? '#4f8d71' : 'transparent'"></eqm-icon>
+<eqm-container [color]="bgColor">
+  <eqm-icon name="checkbox" [size]="10" [color]="checked ? color : 'transparent'"></eqm-icon>
 </eqm-container>
 <div *ngIf="labelSide === 'right'" #content>
   <ng-container *ngTemplateOutlet="label"></ng-container>
diff --git a/modules/components/src/components/checkbox/checkbox.component.ts b/modules/components/src/components/checkbox/checkbox.component.ts
index 9268c9d..cabf063 100644
--- a/modules/components/src/components/checkbox/checkbox.component.ts
+++ b/modules/components/src/components/checkbox/checkbox.component.ts
@@ -1,4 +1,5 @@
-import { Component, Input, Output, EventEmitter, HostBinding, HostListener, ViewChild, ElementRef, ContentChild, ChangeDetectionStrategy } from '@angular/core'
+import { Component, Input, Output, EventEmitter, HostBinding, HostListener, ViewChild, ElementRef, ContentChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'
+import { ColorsService } from '../../services/colors.service'
 
 @Component({
   selector: 'eqm-checkbox',
@@ -8,16 +9,24 @@ import { Component, Input, Output, EventEmitter, HostBinding, HostListener, View
 })
 export class CheckboxComponent {
   @Input() labelSide: 'left' | 'right'
+  @Input() labelColor = ColorsService.light
   @Input() interactive: boolean = true
   @Input() checked: boolean = false
-  @Output() checkedChanged = new EventEmitter<boolean>()
+  @Output() checkedChange = new EventEmitter<boolean>()
+  @Input() color = ColorsService.accent
+  @Input() bgColor = ColorsService.dark
   @HostBinding('class.enabled') @Input() enabled = true
 
+  constructor (
+    private readonly change: ChangeDetectorRef
+  ) {}
+
   @HostListener('click')
   toggle () {
     if (this.interactive && this.enabled) {
       this.checked = !this.checked
-      this.checkedChanged.emit(this.checked)
+      this.checkedChange.emit(this.checked)
+      this.change.detectChanges()
     }
   }
 }
diff --git a/modules/components/src/components/container/container.component.scss b/modules/components/src/components/container/container.component.scss
index c45483f..54866a7 100644
--- a/modules/components/src/components/container/container.component.scss
+++ b/modules/components/src/components/container/container.component.scss
@@ -5,7 +5,6 @@
   margin: 2px;
   color: $accent;
   border-radius: 2px;
-  background-color: $text-medium;
   box-shadow: 0 0 0 1px #000,
               0 0 0 2px rgb(70, 74, 77);
   background-size: 6px 6px;
diff --git a/modules/components/src/components/container/container.component.ts b/modules/components/src/components/container/container.component.ts
index e915dc6..03eb320 100644
--- a/modules/components/src/components/container/container.component.ts
+++ b/modules/components/src/components/container/container.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit, HostBinding, Input, ChangeDetectionStrategy } from '@angular/core'
+import { ColorsService } from '../../services/colors.service'
 
 @Component({
   selector: 'eqm-container',
@@ -7,7 +8,7 @@ import { Component, OnInit, HostBinding, Input, ChangeDetectionStrategy } from '
 })
 export class ContainerComponent implements OnInit {
   @HostBinding('class.enabled') @Input() enabled = true
-
+  @Input() @HostBinding('style.background-color') color = ColorsService.dark
   ngOnInit () {
   }
 }
diff --git a/modules/components/src/components/dropdown/dropdown.component.html b/modules/components/src/components/dropdown/dropdown.component.html
index 020be22..bcad4db 100644
--- a/modules/components/src/components/dropdown/dropdown.component.html
+++ b/modules/components/src/components/dropdown/dropdown.component.html
@@ -2,17 +2,17 @@
   class="container">
   <div class="item">
 
-    <eqm-icon *ngIf="selectedItem && selectedItem.icon" [name]="selectedItem.icon" [rotate]="selectedItem.iconRotate || 0" class="icon" [color]="selectedItem.iconColor || '#4f8d71'"></eqm-icon>
-    <eqm-label color="#4f8d71"> {{(searchText || (items.length ? (selectedItem ? selectedItem[labelParam] : placeholder) : noItemsPlaceholder))}} </eqm-label>
+    <eqm-icon *ngIf="selectedItem && selectedItem.icon" [name]="selectedItem.icon" [rotate]="selectedItem.iconRotate || 0" class="icon" [color]="selectedItem.iconColor || colors.accent"></eqm-icon>
+    <eqm-label [color]="colors.accent"> {{(searchText || (items.length ? (selectedItem ? selectedItem[labelParam] : placeholder) : noItemsPlaceholder))}} </eqm-label>
   </div>
 
   <div class="right" *ngIf="searchText" (click)="searchText = undefined">
-    <eqm-icon [name]="'cross'" [height]="16" [width]="16" color="#4f8d71"></eqm-icon>
+    <eqm-icon [name]="'cross'" [height]="16" [width]="16" [color]="colors.accent"></eqm-icon>
   </div>
   <div class="right" *ngIf="!searchText" (click)="editable ? toggle($event) : undefined">
-    <eqm-icon [name]="'triangle'" [height]="8" [width]="8" [color]="items.length ? '#4f8d71' : '#555'" [rotate]="-90">
+    <eqm-icon [name]="'triangle'" [height]="8" [width]="8" [color]="items.length ? colors.accent : '#555'" [rotate]="-90">
     </eqm-icon>
-    <eqm-icon [name]="'triangle'" [height]="8" [width]="8" [color]="items.length ? '#4f8d71' : '#555'" [rotate]="90">
+    <eqm-icon [name]="'triangle'" [height]="8" [width]="8" [color]="items.length ? colors.accent : '#555'" [rotate]="90">
     </eqm-icon>
   </div>
 </eqm-container>
diff --git a/modules/components/src/components/dropdown/dropdown.component.scss b/modules/components/src/components/dropdown/dropdown.component.scss
index b0d7d25..1585cd6 100644
--- a/modules/components/src/components/dropdown/dropdown.component.scss
+++ b/modules/components/src/components/dropdown/dropdown.component.scss
@@ -32,7 +32,7 @@ $animation-duration: .2s;
 
 .items-select-box{
   position: fixed;
-  z-index: 999;
+  z-index: 4;
   box-shadow: 0px 8px 77px 2px rgba(0,0,0,0.56);
 }
 
diff --git a/modules/components/src/components/dropdown/dropdown.component.ts b/modules/components/src/components/dropdown/dropdown.component.ts
index ca5d6f0..a7cc4e8 100644
--- a/modules/components/src/components/dropdown/dropdown.component.ts
+++ b/modules/components/src/components/dropdown/dropdown.component.ts
@@ -2,6 +2,7 @@ import { Component, OnInit, Input, ViewChild, ElementRef, EventEmitter, Output,
 import { SelectBoxComponent } from '../select-box/select-box.component'
 import { UtilitiesService } from '../../services/utilities.service'
 import { FadeInOutAnimation } from '../../animations'
+import { ColorsService } from '../../services/colors.service'
 
 @Component({
   selector: 'eqm-dropdown',
@@ -14,7 +15,8 @@ export class DropdownComponent implements OnInit {
   constructor (
     public utils: UtilitiesService,
     public zone: NgZone,
-    public ref: ElementRef
+    public ref: ElementRef,
+    public colors: ColorsService
   ) {
   }
 
diff --git a/modules/components/src/components/flat-slider/flat-slider.component.ts b/modules/components/src/components/flat-slider/flat-slider.component.ts
index 8209034..5bb6fa1 100644
--- a/modules/components/src/components/flat-slider/flat-slider.component.ts
+++ b/modules/components/src/components/flat-slider/flat-slider.component.ts
@@ -17,6 +17,7 @@ import {
 } from '../../services/utilities.service'
 import { FadeInOutAnimation } from '../../animations'
 import { DomSanitizer } from '@angular/platform-browser'
+import { ColorsService } from '../../services/colors.service'
 
 export interface FlatSliderValueChangedEvent {
   value: number
@@ -35,7 +36,8 @@ export class FlatSliderComponent implements OnInit, OnDestroy {
     public utils: UtilitiesService,
     public elem: ElementRef<HTMLElement>,
     public sanitizer: DomSanitizer,
-    private readonly changeRef: ChangeDetectorRef
+    private readonly changeRef: ChangeDetectorRef,
+    public colors: ColorsService
   ) {}
 
   @Input() scale: 'logarithmic' | 'linear' = 'linear'
@@ -63,7 +65,7 @@ export class FlatSliderComponent implements OnInit, OnDestroy {
     return typeof this.middle === 'number' ? this.middle : (this.min + this.max) / 2
   }
 
-  public defaultColor = '#4f8d71'
+  public defaultColor = ColorsService.accent
   public _enabled = true
 
   @HostBinding('class.enabled')
diff --git a/modules/components/src/components/icon/icons.ts b/modules/components/src/components/icon/icons.ts
index df79e57..bed915b 100644
--- a/modules/components/src/components/icon/icons.ts
+++ b/modules/components/src/components/icon/icons.ts
@@ -13,6 +13,9 @@ export const svgs = {
       <polygon points="5,17.1 5,71.1 16.166,71.1 22.389,63.9 12.2,63.9 12.2,24.3 87.8,24.3 87.8,63.9 78.076,63.9 84.291,71.1 95,71.1   95,17.1 "/>
     </svg>
   `,
+  arrow: /* html */`
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M112 328l144-144 144 144"/></svg>
+  `,
   avatar: /* html */`
     <svg viewBox="0 0 512 512">
       <path d="M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm-50.22 116.82C218.45 151.39 236.28 144 256 144s37.39 7.44 50.11 20.94c12.89 13.68 19.16 32.06 17.68 51.82C320.83 256 290.43 288 256 288s-64.89-32-67.79-71.25c-1.47-19.92 4.79-38.36 17.57-51.93zM256 432a175.49 175.49 0 01-126-53.22 122.91 122.91 0 0135.14-33.44C190.63 329 222.89 320 256 320s65.37 9 90.83 25.34A122.87 122.87 0 01382 378.78 175.45 175.45 0 01256 432z"/>
diff --git a/modules/components/src/components/input-field/input-field.component.html b/modules/components/src/components/input-field/input-field.component.html
index 90d063b..c13ea9c 100644
--- a/modules/components/src/components/input-field/input-field.component.html
+++ b/modules/components/src/components/input-field/input-field.component.html
@@ -1,5 +1,5 @@
-<eqm-container class="container" #container>
-  <input [type]="type" [(ngModel)]="text" 
+<eqm-container class="container" #container [color]="bgColor">
+  <input [type]="type" [(ngModel)]="text" [style.color]="color"
   [placeholder]="placeholder" autocomplete="true"
   (input)="inputChanged()" (keyup.enter)="enterPressed()" 
   class="input-field" [readonly]="!enabled || !editable" 
diff --git a/modules/components/src/components/input-field/input-field.component.scss b/modules/components/src/components/input-field/input-field.component.scss
index bdcd402..18a2d69 100644
--- a/modules/components/src/components/input-field/input-field.component.scss
+++ b/modules/components/src/components/input-field/input-field.component.scss
@@ -17,7 +17,6 @@
   .input-field {
     font-family: 'SF Pro Text';
     width: 100%;
-    color: $accent;
     background: none;
     border: none;
     flex-grow: 4;
diff --git a/modules/components/src/components/input-field/input-field.component.ts b/modules/components/src/components/input-field/input-field.component.ts
index 85c1269..3825a66 100644
--- a/modules/components/src/components/input-field/input-field.component.ts
+++ b/modules/components/src/components/input-field/input-field.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit, Input, EventEmitter, Output, ViewChild, HostBinding, ElementRef, ChangeDetectionStrategy } from '@angular/core'
+import { ColorsService } from '../../services/colors.service'
 
 @Component({
   selector: 'eqm-input-field',
@@ -15,8 +16,9 @@ export class InputFieldComponent implements OnInit {
   @HostBinding('class.enabled') @Input() enabled = true
   @Input() fontSize = 12
   @Input() type: string = 'text'
+  @Input() color = ColorsService.accent
+  @Input() bgColor = ColorsService.dark
   @ViewChild('container', { static: true }) container!: ElementRef
-
   ngOnInit () {
   }
 
diff --git a/modules/components/src/components/loading/loading.component.html b/modules/components/src/components/loading/loading.component.html
index 98243b6..308764c 100644
--- a/modules/components/src/components/loading/loading.component.html
+++ b/modules/components/src/components/loading/loading.component.html
@@ -4,7 +4,7 @@
       viewBox="5 0 80 60">
     <path id="wave" #wave
         fill="none" 
-        stroke="#4f8d71" 
+        [attr.stroke]="colors.accent" 
         stroke-width="4"
         stroke-linecap="round">
     </path>
diff --git a/modules/components/src/components/loading/loading.component.ts b/modules/components/src/components/loading/loading.component.ts
index 89d7212..337d4d8 100644
--- a/modules/components/src/components/loading/loading.component.ts
+++ b/modules/components/src/components/loading/loading.component.ts
@@ -1,4 +1,5 @@
 import { Component, ViewChild, ElementRef, AfterViewInit, Input, ChangeDetectionStrategy } from '@angular/core'
+import { ColorsService } from '../../services/colors.service'
 
 @Component({
   selector: 'eqm-loading',
@@ -11,6 +12,10 @@ export class LoadingComponent implements AfterViewInit {
   @Input() text?: string
   @Input() showText = true
 
+  constructor (
+    public colors: ColorsService
+  ) {}
+
   ngAfterViewInit () {
     const path = this.wave.nativeElement
     // eslint-disable-next-line no-loss-of-precision
diff --git a/modules/components/src/components/skeuomorph-slider/skeuomorph-slider.component.ts b/modules/components/src/components/skeuomorph-slider/skeuomorph-slider.component.ts
index 217e15e..a6992fb 100644
--- a/modules/components/src/components/skeuomorph-slider/skeuomorph-slider.component.ts
+++ b/modules/components/src/components/skeuomorph-slider/skeuomorph-slider.component.ts
@@ -41,6 +41,7 @@ export class SkeuomorphSliderComponent implements OnInit, OnDestroy {
   @Input() scrollEnabled = true
   @Input() middle?: number
   @Input() stickToMiddle = false
+  @Input() doubleClickToAnimateToMiddle = true
   @Output() stickedToMiddle = new EventEmitter()
 
   private readonly padding = 14
@@ -194,7 +195,7 @@ export class SkeuomorphSliderComponent implements OnInit, OnDestroy {
   }
 
   doubleclick () {
-    if (this.enabled) {
+    if (this.enabled && this.doubleClickToAnimateToMiddle) {
       if (this.doubleclickTimeout) {
         clearTimeout(this.doubleclickTimeout)
       }
diff --git a/modules/components/src/components/tooltip/tooltip.component.scss b/modules/components/src/components/tooltip/tooltip.component.scss
index 63137dc..2e2948e 100644
--- a/modules/components/src/components/tooltip/tooltip.component.scss
+++ b/modules/components/src/components/tooltip/tooltip.component.scss
@@ -1,6 +1,6 @@
 
 :host {
-  z-index: 9999;
+  z-index: 100001;
 }
 
 .container {
@@ -10,7 +10,7 @@
   left: -100px;
   top: -100px;
   pointer-events: none;
-  z-index: 9999;
+  z-index: 100001;
 
   .tooltip {
     text-align: center;
@@ -20,7 +20,7 @@
 
   .arrow-container {
     position: absolute;
-    z-index: 9998;
+    z-index: 100000;
     width: 12px;
     height: 12px;
     display: flex;
diff --git a/modules/components/src/components/tooltip/tooltip.component.ts b/modules/components/src/components/tooltip/tooltip.component.ts
index 464ad9c..2f3c6a0 100644
--- a/modules/components/src/components/tooltip/tooltip.component.ts
+++ b/modules/components/src/components/tooltip/tooltip.component.ts
@@ -53,6 +53,7 @@ export class TooltipComponent implements OnInit {
     let x = -999
     let y = -999
     const body = document.body
+
     const viewHeight = body.offsetHeight / this.scale
     const viewWidth = body.offsetWidth / this.scale
 
diff --git a/modules/components/tsconfig.json b/modules/components/tsconfig.json
index c5fca87..11f330b 100644
--- a/modules/components/tsconfig.json
+++ b/modules/components/tsconfig.json
@@ -2,7 +2,7 @@
 {
   "compileOnSave": false,
   "compilerOptions": {
-    "baseUrl": "./",
+    "baseUrl": "./src",
     "outDir": "./dist/out-tsc",
     "sourceMap": true,
     "declaration": false,
diff --git a/native/app/Source/Application.swift b/native/app/Source/Application.swift
index 759feb2..a956573 100644
--- a/native/app/Source/Application.swift
+++ b/native/app/Source/Application.swift
@@ -45,7 +45,11 @@ class Application {
   private static var ignoreEvents = false
 
   static var settings: Settings!
+    
+    
   static var ui: UI!
+    
+    
 
   static var dataBus: ApplicationDataBus!
   static let error = EmitterKit.Event<String>()
diff --git a/native/app/Source/ApplicationState.swift b/native/app/Source/ApplicationState.swift
index cd12adb..ac9abc0 100644
--- a/native/app/Source/ApplicationState.swift
+++ b/native/app/Source/ApplicationState.swift
@@ -30,7 +30,7 @@ struct ApplicationState: State {
     }
 
     guard let state = ({ () -> ApplicationState? in 
-      if Constants.DEBUG {
+      if Constants.DEBUG && false {
         return try! JSONDecoder().decode(ApplicationState.self, from: stateData)
       } else {
         return try? JSONDecoder().decode(ApplicationState.self, from: stateData)
diff --git a/native/app/Source/Constants.swift b/native/app/Source/Constants.swift
index 59e2e43..f0cf99d 100644
--- a/native/app/Source/Constants.swift
+++ b/native/app/Source/Constants.swift
@@ -13,8 +13,10 @@ import Version
 struct Constants {
   
   #if DEBUG
-//  static let UI_ENDPOINT_URL = URL(string: "http://eqmac.local:8080")!
-  static let UI_ENDPOINT_URL = URL(string: "https://ui-v3.eqmac.app")!
+//  static let UI_ENDPOINT_URL = URL(string: "http://www.eqmac.local:8080")!
+//  static let UI_ENDPOINT_URL = URL(string: "https://ui-v3.eqmac.app")!
+  static let UI_ENDPOINT_URL = URL(string: "http://localhost:8080")!
+
   static let DEBUG = true
   #else
   static let DEBUG = false
diff --git a/native/app/Source/Networking/Networking.swift b/native/app/Source/Networking/Networking.swift
index d370980..5a5f1de 100644
--- a/native/app/Source/Networking/Networking.swift
+++ b/native/app/Source/Networking/Networking.swift
@@ -10,7 +10,7 @@ import Foundation
 import Connectivity
 import EmitterKit
 class Networking {
-  static private let connectivity = Connectivity()
+  static let connectivity = Connectivity()
   
   static var status: ConnectivityStatus = .determining {
     didSet {
@@ -22,10 +22,13 @@ class Networking {
   static let statusChanged = Event<ConnectivityStatus>()
   
   static func startMonitor () {
+//    connectivity.connectivityURLs = [Constants.UI_ENDPOINT_URL.appendingPathComponent("/success.html")]
+//    connectivity.successThreshold = Connectivity.Percentage(100)
+    
     connectivity.whenConnected = { connectivity in
       Networking.status = connectivity.status
     }
-
+    
     connectivity.whenDisconnected = { connectivity in
       Networking.status = connectivity.status
     }
@@ -43,7 +46,7 @@ class Networking {
         completion(statusConsideredConnected(connectivity.status))
       }
     }
-
+    
     delay(1000) {
       if (!returned) {
         returned = true
@@ -61,13 +64,13 @@ class Networking {
         whenConnected(completion)
       }
     }
-
+    
   }
-
+  
   static var isConnected: Bool {
     return statusConsideredConnected(status)
   }
-
+  
   static func statusConsideredConnected (_ status: ConnectivityStatus) -> Bool {
     let accepted: [ConnectivityStatus] = [
       .connected,
@@ -82,7 +85,7 @@ class Networking {
     if socketFileDescriptor == -1 {
       return false
     }
-
+    
     var addr = sockaddr_in()
     let sizeOfSockkAddr = MemoryLayout<sockaddr_in>.size
     addr.sin_len = __uint8_t(sizeOfSockkAddr)
@@ -92,7 +95,7 @@ class Networking {
     addr.sin_zero = (0, 0, 0, 0, 0, 0, 0, 0)
     var bind_addr = sockaddr()
     memcpy(&bind_addr, &addr, Int(sizeOfSockkAddr))
-
+    
     if Darwin.bind(socketFileDescriptor, &bind_addr, socklen_t(sizeOfSockkAddr)) == -1 {
       release(socket: socketFileDescriptor)
       return false
@@ -104,7 +107,7 @@ class Networking {
     release(socket: socketFileDescriptor)
     return true
   }
-
+  
   static func getAvailabilePort (_ start: UInt) -> UInt {
     var port = start
     while !tcpPortIsAvailable(port) {
@@ -112,7 +115,7 @@ class Networking {
     }
     return port
   }
-
+  
   static func release(socket: Int32) {
     Darwin.shutdown(socket, SHUT_RDWR)
     close(socket)
diff --git a/ui/package.json b/ui/package.json
index 1e60d89..9e1659c 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ui",
-  "version": "3.0.4",
+  "version": "3.1.0",
   "scripts": {
     "lint": "npx eslint .",
     "start": "../node_modules/.bin/ng serve --port 8080 --host 0.0.0.0 --disable-host-check",
diff --git a/ui/src/app/app.component.html b/ui/src/app/app.component.html
index e706f4c..5540a19 100644
--- a/ui/src/app/app.component.html
+++ b/ui/src/app/app.component.html
@@ -28,5 +28,6 @@
   <eqm-divider *ngIf="ui.settings.equalizersFeatureEnabled"></eqm-divider>
 
   <eqm-outputs *ngIf="ui.settings.outputFeatureEnabled" #outputs></eqm-outputs>
+
   <eqm-tooltip-container [scale]="ui.scale"></eqm-tooltip-container>
-</div>
\ No newline at end of file
+</div>
diff --git a/ui/src/app/app.component.scss b/ui/src/app/app.component.scss
index 75114fd..5cbf5a8 100644
--- a/ui/src/app/app.component.scss
+++ b/ui/src/app/app.component.scss
@@ -105,7 +105,7 @@ $noise: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyA
     max-width: 400px;
     box-sizing: border-box;
     position: absolute;
-    z-index: 4;
+    z-index: 5;
     transform-origin: right top;
     right: 0;
   }
diff --git a/ui/src/app/app.component.ts b/ui/src/app/app.component.ts
index 7e98d11..64ca05d 100644
--- a/ui/src/app/app.component.ts
+++ b/ui/src/app/app.component.ts
@@ -245,6 +245,7 @@ This data would help us improve and grow the product.`
   }
 
   async startDimensionsSync () {
+    this.handleWindowResize()
     setInterval(() => {
       this.syncMinHeight()
       this.syncMaxHeight()
diff --git a/ui/src/app/components/options/options.component.ts b/ui/src/app/components/options/options.component.ts
index 16ee391..31e82e8 100644
--- a/ui/src/app/components/options/options.component.ts
+++ b/ui/src/app/components/options/options.component.ts
@@ -149,7 +149,7 @@ export class OptionsComponent {
     }
 
     if (option.type === 'dropdown') {
-      style['z-index'] = 9999
+      style['z-index'] = 9000
     }
 
     return style
diff --git a/ui/src/app/sections/effects/equalizers/advanced-equalizer/advanced-equalizer.component.html b/ui/src/app/sections/effects/equalizers/advanced-equalizer/advanced-equalizer.component.html
index 9bb2895..0c460a0 100644
--- a/ui/src/app/sections/effects/equalizers/advanced-equalizer/advanced-equalizer.component.html
+++ b/ui/src/app/sections/effects/equalizers/advanced-equalizer/advanced-equalizer.component.html
@@ -14,7 +14,7 @@
     <div fxLayout="column" fxLayoutAlign="space-between center">
       <eqm-label [fontSize]="10">Hz</eqm-label>
       <eqm-button type="transparent" (pressed)="selectFlatPreset()" [enabled]="enabled">
-        <eqm-icon name="triangle" color="#4f8d71" [width]="10" [height]="10"></eqm-icon>
+        <eqm-icon name="triangle" [color]="colors.accent" [width]="10" [height]="10"></eqm-icon>
       </eqm-button>
       <eqm-label [fontSize]="8" class="gain">Gain</eqm-label>
     </div>
diff --git a/ui/src/app/sections/effects/equalizers/advanced-equalizer/advanced-equalizer.component.ts b/ui/src/app/sections/effects/equalizers/advanced-equalizer/advanced-equalizer.component.ts
index befa108..bb212fa 100644
--- a/ui/src/app/sections/effects/equalizers/advanced-equalizer/advanced-equalizer.component.ts
+++ b/ui/src/app/sections/effects/equalizers/advanced-equalizer/advanced-equalizer.component.ts
@@ -15,6 +15,7 @@ import { Options, CheckboxOption } from 'src/app/components/options/options.comp
 import { TransitionService } from '../../../../services/transitions.service'
 import { ApplicationService } from '../../../../services/app.service'
 import { ToastService } from '../../../../services/toast.service'
+import { ColorsService } from '@eqmac/components'
 
 @Component({
   selector: 'eqm-advanced-equalizer',
@@ -123,7 +124,8 @@ export class AdvancedEqualizerComponent extends EqualizerComponent implements On
     public transition: TransitionService,
     public change: ChangeDetectorRef,
     public app: ApplicationService,
-    public toast: ToastService
+    public toast: ToastService,
+    public colors: ColorsService
   ) {
     super()
     this.getImportLegacyAvailable()
diff --git a/ui/src/app/sections/effects/equalizers/basic-equalizer/basic-equalizer.component.html b/ui/src/app/sections/effects/equalizers/basic-equalizer/basic-equalizer.component.html
index c0036aa..35d4358 100644
--- a/ui/src/app/sections/effects/equalizers/basic-equalizer/basic-equalizer.component.html
+++ b/ui/src/app/sections/effects/equalizers/basic-equalizer/basic-equalizer.component.html
@@ -3,7 +3,7 @@
   <div fxLayout="row">
     <div fxLayout="column">
       <div fxLayout="row" fxLayoutAlign="center center" style="width: 100%;">
-        <eqm-checkbox labelSide="right" [checked]="peakLimiter" (checkedChanged)="setPeakLimiter($event)">Peak Limiter</eqm-checkbox>
+        <eqm-checkbox labelSide="right" [checked]="peakLimiter" (checkedChange)="setPeakLimiter($event)">Peak Limiter</eqm-checkbox>
         <eqm-question
           [eqmTooltip]="
             'Enable if you hear Distortion when increasing Gain.\nThis will decrease the Global Gain \n to make sure the sound never clips.\nThen increase the overall volume to compensate'
diff --git a/ui/src/app/sections/outputs/outputs.component.html b/ui/src/app/sections/outputs/outputs.component.html
index f183117..94b24b1 100644
--- a/ui/src/app/sections/outputs/outputs.component.html
+++ b/ui/src/app/sections/outputs/outputs.component.html
@@ -1,5 +1,5 @@
 <div fxFill class="outputs" fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="10px">
-  <eqm-icon (click)="select(selected)" name="reset" color="#4f8d71" eqmTooltip="Reset playback" eqmTooltipPositionSide="top"></eqm-icon>
+  <eqm-icon (click)="select(selected)" name="reset" [color]="colors.accent" eqmTooltip="Reset playback" eqmTooltipPositionSide="top"></eqm-icon>
   <eqm-dropdown fxFlex
   labelParam="name" noItemsPlaceholder="No Outputs" placeholder="Select Output" 
   [items]="outputs" [(selectedItem)]="selected" (itemSelected)="select($event)"
diff --git a/ui/src/app/sections/outputs/outputs.component.ts b/ui/src/app/sections/outputs/outputs.component.ts
index bb8a111..9765c03 100644
--- a/ui/src/app/sections/outputs/outputs.component.ts
+++ b/ui/src/app/sections/outputs/outputs.component.ts
@@ -1,4 +1,5 @@
 import { Component, HostBinding, OnInit } from '@angular/core'
+import { ColorsService } from '@eqmac/components'
 import { ApplicationService } from '../../services/app.service'
 import { OutputsService, Output } from './outputs.service'
 
@@ -13,7 +14,11 @@ export class OutputsComponent implements OnInit {
 
   @HostBinding('style.height.px') height = 52
 
-  constructor (public service: OutputsService, public app: ApplicationService) { }
+  constructor (
+    public service: OutputsService,
+    public app: ApplicationService,
+    public colors: ColorsService
+  ) { }
 
   async ngOnInit () {
     await this.sync()
diff --git a/ui/src/app/sections/volume/booster-balance/balance/balance.component.html b/ui/src/app/sections/volume/booster-balance/balance/balance.component.html
index 08c6c4e..3aafd25 100644
--- a/ui/src/app/sections/volume/booster-balance/balance/balance.component.html
+++ b/ui/src/app/sections/volume/booster-balance/balance/balance.component.html
@@ -29,7 +29,7 @@
   <ng-container *ngTemplateOutlet="left"></ng-container>
   <div fxFlex="60%">
     <eqm-flat-slider [enabled]="app.enabled" [min]="-1" [max]="1" [(value)]="balance" (userChangedValue)="setBalance($event)"
-    [doubleClickToAnimateToMiddle]="true" [animationDuration]="animationDuration" [animationFps]="animationFps"
+    [doubleClickToAnimateToMiddle]="true" [animationDuration]="animationDuration" [animationFps]="animationFps"  [thickness]="4" [thumbRadius]="5"
       [stickToMiddle]="true" (stickedToMiddle)="performHapticFeedback($event)"></eqm-flat-slider>
   </div>
   <ng-container *ngTemplateOutlet="right"></ng-container>
diff --git a/ui/src/app/sections/volume/booster-balance/booster/booster.component.html b/ui/src/app/sections/volume/booster-balance/booster/booster.component.html
index a443cf9..0117c08 100644
--- a/ui/src/app/sections/volume/booster-balance/booster/booster.component.html
+++ b/ui/src/app/sections/volume/booster-balance/booster/booster.component.html
@@ -13,7 +13,7 @@
       [enabled]="boostEnabledAvailable && app.enabled" 
       [eqmTooltip]="boostEnabledAvailable ? (boostEnabled ? 'Disable Boost' : 'Enable Boost') : ('Enable/Disable Boost\nOnly available after v1.0.0')" 
       style="position: absolute; top: 5px; right: -10px;" 
-      [checked]="boostEnabled" (checkedChanged)="setBoostEnabled($event)"
+      [checked]="boostEnabled" (checkedChange)="setBoostEnabled($event)"
     ></eqm-checkbox>
     <eqm-label>Boost</eqm-label>
     <eqm-value-screen [enabled]="boostEnabled && app.enabled">{{(gain | mapValue:1:2:0:100 | clipValue:0:100 | fixFloat:0:false)}}%</eqm-value-screen>
@@ -36,7 +36,7 @@
   <ng-container *ngTemplateOutlet="volume"></ng-container>
   <div fxFlex="60%">
     <eqm-flat-slider [min]="0" [enabled]="app.enabled" [max]="boostEnabled ? 2 : 1" [(value)]="gain" (userChangedValue)="setGain($event.value)"
-    [doubleClickToAnimateToMiddle]="false" [showMiddleNotch]="boostEnabled"
+    [doubleClickToAnimateToMiddle]="false" [showMiddleNotch]="boostEnabled" [thickness]="4" [thumbRadius]="5"
     [stickToMiddle]="boostEnabled" (stickedToMiddle)="performHapticFeedback($event)"></eqm-flat-slider>
   </div>
   <ng-container *ngTemplateOutlet="boost"></ng-container>
diff --git a/ui/src/app/services/ui.service.ts b/ui/src/app/services/ui.service.ts
index a3d1e95..761b902 100644
--- a/ui/src/app/services/ui.service.ts
+++ b/ui/src/app/services/ui.service.ts
@@ -53,15 +53,6 @@ export class UIService extends DataService {
     }
   }
 
-  readonly colors = {
-    accent: '#4f8d71',
-    warning: '#e80415',
-    'gradient-start': '#5a5b5f',
-    'gradient-end': '#2c2c2e',
-    light: '#c9cdd0',
-    dark: '#16191c'
-  }
-
   constructor () {
     super()
     this.sync()
diff --git a/ui/src/app/styles/_colors.scss b/ui/src/app/styles/_colors.scss
index ba7c02c..a50da05 100644
--- a/ui/src/app/styles/_colors.scss
+++ b/ui/src/app/styles/_colors.scss
@@ -34,7 +34,7 @@ $gradient-start: #5a5b5f;
   background-color: $gradient-start !important;
 }
 
-$gradient-end: rgb(44, 44, 46);
+$gradient-end: #2c2c2e;
 ::ng-deep .gradient-end {
   color: $gradient-end !important;
 }