From 1ca05a029a244a7a77e60951f321fc73247a2760 Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Mon, 2 Jan 2023 13:08:25 -0600
Subject: [PATCH] add theme selector to main dashboard

---
 .../theme-selector.component.html             |  6 ++++
 .../theme-selector.component.scss             |  0
 .../theme-selector.component.ts               | 31 +++++++++++++++++++
 .../global-footer.component.html              |  3 ++
 frontend/src/app/shared/shared.module.ts      |  3 ++
 5 files changed, 43 insertions(+)
 create mode 100644 frontend/src/app/components/theme-selector/theme-selector.component.html
 create mode 100644 frontend/src/app/components/theme-selector/theme-selector.component.scss
 create mode 100644 frontend/src/app/components/theme-selector/theme-selector.component.ts

diff --git a/frontend/src/app/components/theme-selector/theme-selector.component.html b/frontend/src/app/components/theme-selector/theme-selector.component.html
new file mode 100644
index 000000000..994ade99c
--- /dev/null
+++ b/frontend/src/app/components/theme-selector/theme-selector.component.html
@@ -0,0 +1,6 @@
+<div [formGroup]="themeForm" class="text-small text-center ml-2">
+    <select formControlName="theme" class="custom-select custom-select-sm form-control-secondary form-control mx-auto" style="width: 160px;" (change)="changeTheme()">
+        <option value="default" i18n="theme.mempool-theme">Mempool Theme</option>
+        <option value="contrast" i18n="theme.high-contrast">High Contrast</option>
+    </select>
+</div>
diff --git a/frontend/src/app/components/theme-selector/theme-selector.component.scss b/frontend/src/app/components/theme-selector/theme-selector.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/src/app/components/theme-selector/theme-selector.component.ts b/frontend/src/app/components/theme-selector/theme-selector.component.ts
new file mode 100644
index 000000000..7f38844bb
--- /dev/null
+++ b/frontend/src/app/components/theme-selector/theme-selector.component.ts
@@ -0,0 +1,31 @@
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
+import { ThemeService } from '../../services/theme.service';
+
+@Component({
+  selector: 'app-theme-selector',
+  templateUrl: './theme-selector.component.html',
+  styleUrls: ['./theme-selector.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ThemeSelectorComponent implements OnInit {
+  themeForm: UntypedFormGroup;
+  themes = ['default', 'contrast'];
+
+  constructor(
+    private formBuilder: UntypedFormBuilder,
+    private themeService: ThemeService,
+  ) { }
+
+  ngOnInit() {
+    this.themeForm = this.formBuilder.group({
+      theme: ['default']
+    });
+    this.themeForm.get('theme')?.setValue(this.themeService.theme);
+  }
+
+  changeTheme() {
+    const newTheme = this.themeForm.get('theme')?.value;
+    this.themeService.apply(newTheme);
+  }
+}
diff --git a/frontend/src/app/shared/components/global-footer/global-footer.component.html b/frontend/src/app/shared/components/global-footer/global-footer.component.html
index cc9cb3538..eee4756a9 100644
--- a/frontend/src/app/shared/components/global-footer/global-footer.component.html
+++ b/frontend/src/app/shared/components/global-footer/global-footer.component.html
@@ -21,6 +21,9 @@
           <div class="selector">
             <app-rate-unit-selector></app-rate-unit-selector>
           </div>
+          <div class="selector">
+            <app-theme-selector></app-theme-selector>
+          </div>
           <a *ngIf="stateService.isMempoolSpaceBuild" class="btn btn-purple sponsor d-none d-sm-flex justify-content-center" [routerLink]="['/login' | relativeUrl]">
             <span *ngIf="loggedIn" i18n="shared.my-account">My Account</span>
             <span *ngIf="!loggedIn" i18n="shared.sign-in">Sign In</span>
diff --git a/frontend/src/app/shared/shared.module.ts b/frontend/src/app/shared/shared.module.ts
index 5e58ef080..72d9eb04d 100644
--- a/frontend/src/app/shared/shared.module.ts
+++ b/frontend/src/app/shared/shared.module.ts
@@ -34,6 +34,7 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { LanguageSelectorComponent } from '../components/language-selector/language-selector.component';
 import { FiatSelectorComponent } from '../components/fiat-selector/fiat-selector.component';
 import { RateUnitSelectorComponent } from '../components/rate-unit-selector/rate-unit-selector.component';
+import { ThemeSelectorComponent } from '../components/theme-selector/theme-selector.component';
 import { BrowserOnlyDirective } from './directives/browser-only.directive';
 import { ServerOnlyDirective } from './directives/server-only.directive';
 import { ColoredPriceDirective } from './directives/colored-price.directive';
@@ -119,6 +120,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
     TxFeeRatingComponent,
     LanguageSelectorComponent,
     FiatSelectorComponent,
+    ThemeSelectorComponent,
     RateUnitSelectorComponent,
     ScriptpubkeyTypePipe,
     RelativeUrlPipe,
@@ -257,6 +259,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
     LanguageSelectorComponent,
     FiatSelectorComponent,
     RateUnitSelectorComponent,
+    ThemeSelectorComponent,
     ScriptpubkeyTypePipe,
     RelativeUrlPipe,
     Hex2asciiPipe,