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 @@ +
+ +
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/dashboard/dashboard.component.html b/frontend/src/app/dashboard/dashboard.component.html index 03cd613f4..6db3af855 100644 --- a/frontend/src/app/dashboard/dashboard.component.html +++ b/frontend/src/app/dashboard/dashboard.component.html @@ -140,7 +140,10 @@ - +
+ + +
Terms of Service diff --git a/frontend/src/app/dashboard/dashboard.component.scss b/frontend/src/app/dashboard/dashboard.component.scss index 452ee1175..5246b8a13 100644 --- a/frontend/src/app/dashboard/dashboard.component.scss +++ b/frontend/src/app/dashboard/dashboard.component.scss @@ -323,4 +323,11 @@ margin-bottom: 10px; text-decoration: none; color: inherit; +} + +.pref-selectors { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; } \ No newline at end of file diff --git a/frontend/src/app/shared/shared.module.ts b/frontend/src/app/shared/shared.module.ts index 29aff8958..7269e002b 100644 --- a/frontend/src/app/shared/shared.module.ts +++ b/frontend/src/app/shared/shared.module.ts @@ -34,6 +34,7 @@ import { TxFeaturesComponent } from '../components/tx-features/tx-features.compo import { TxFeeRatingComponent } from '../components/tx-fee-rating/tx-fee-rating.component'; import { ReactiveFormsModule } from '@angular/forms'; import { LanguageSelectorComponent } from '../components/language-selector/language-selector.component'; +import { ThemeSelectorComponent } from '../components/theme-selector/theme-selector.component'; import { ColoredPriceDirective } from './directives/colored-price.directive'; import { NoSanitizePipe } from './pipes/no-sanitize.pipe'; import { MempoolBlocksComponent } from '../components/mempool-blocks/mempool-blocks.component'; @@ -92,6 +93,7 @@ import { GeolocationComponent } from '../shared/components/geolocation/geolocati TxFeaturesComponent, TxFeeRatingComponent, LanguageSelectorComponent, + ThemeSelectorComponent, ScriptpubkeyTypePipe, RelativeUrlPipe, NoSanitizePipe, @@ -197,6 +199,7 @@ import { GeolocationComponent } from '../shared/components/geolocation/geolocati TxFeaturesComponent, TxFeeRatingComponent, LanguageSelectorComponent, + ThemeSelectorComponent, ScriptpubkeyTypePipe, RelativeUrlPipe, Hex2asciiPipe,