From 7f6ab0b854b31d7f465db9f80715c800eee5fbab Mon Sep 17 00:00:00 2001 From: natsoni Date: Tue, 9 Apr 2024 16:15:05 +0900 Subject: [PATCH] Add wiz theme --- frontend/angular.json | 5 + .../block-overview-graph/block-scene.ts | 4 +- .../theme-selector.component.html | 1 + .../theme-selector.component.ts | 2 +- frontend/src/app/services/theme.service.ts | 4 +- frontend/src/theme-wiz.scss | 100 ++++++++++++++++++ 6 files changed, 110 insertions(+), 6 deletions(-) create mode 100644 frontend/src/theme-wiz.scss diff --git a/frontend/angular.json b/frontend/angular.json index f631cce4d..f55c09934 100644 --- a/frontend/angular.json +++ b/frontend/angular.json @@ -175,6 +175,11 @@ "bundleName": "contrast", "inject": false }, + { + "input": "src/theme-wiz.scss", + "bundleName": "wiz", + "inject": false + }, "node_modules/@fortawesome/fontawesome-svg-core/styles.css" ], "vendorChunk": true, diff --git a/frontend/src/app/components/block-overview-graph/block-scene.ts b/frontend/src/app/components/block-overview-graph/block-scene.ts index 6f420a1da..bef907a7a 100644 --- a/frontend/src/app/components/block-overview-graph/block-scene.ts +++ b/frontend/src/app/components/block-overview-graph/block-scene.ts @@ -69,7 +69,7 @@ export default class BlockScene { } setColorFunction(colorFunction: ((tx: TxView) => Color) | null): void { - this.theme.theme !== 'default' ? this.getColor = colorFunction || contrastColorFunction : this.getColor = colorFunction || defaultColorFunction; + this.theme.theme === 'contrast' ? this.getColor = colorFunction || contrastColorFunction : this.getColor = colorFunction || defaultColorFunction; this.updateAllColors(); } @@ -246,7 +246,7 @@ export default class BlockScene { this.flip = flip; this.vertexArray = vertexArray; this.highlightingEnabled = highlighting; - theme.theme !== 'default' ? this.getColor = colorFunction || contrastColorFunction : this.getColor = colorFunction || defaultColorFunction; + theme.theme === 'contrast' ? this.getColor = colorFunction || contrastColorFunction : this.getColor = colorFunction || defaultColorFunction; this.theme = theme; this.scene = { diff --git a/frontend/src/app/components/theme-selector/theme-selector.component.html b/frontend/src/app/components/theme-selector/theme-selector.component.html index 259ba33ae..2dc69dbaf 100644 --- a/frontend/src/app/components/theme-selector/theme-selector.component.html +++ b/frontend/src/app/components/theme-selector/theme-selector.component.html @@ -2,5 +2,6 @@ diff --git a/frontend/src/app/components/theme-selector/theme-selector.component.ts b/frontend/src/app/components/theme-selector/theme-selector.component.ts index 7f38844bb..e6e67dbca 100644 --- a/frontend/src/app/components/theme-selector/theme-selector.component.ts +++ b/frontend/src/app/components/theme-selector/theme-selector.component.ts @@ -10,7 +10,7 @@ import { ThemeService } from '../../services/theme.service'; }) export class ThemeSelectorComponent implements OnInit { themeForm: UntypedFormGroup; - themes = ['default', 'contrast']; + themes = ['default', 'contrast', 'wiz']; constructor( private formBuilder: UntypedFormBuilder, diff --git a/frontend/src/app/services/theme.service.ts b/frontend/src/app/services/theme.service.ts index da374bf13..098089597 100644 --- a/frontend/src/app/services/theme.service.ts +++ b/frontend/src/app/services/theme.service.ts @@ -22,9 +22,7 @@ export class ThemeService { apply(theme) { this.theme = theme; if (theme !== 'default') { - if (theme === 'contrast') { - this.mempoolFeeColors = contrastMempoolFeeColors; - } + theme === 'contrast' ? this.mempoolFeeColors = contrastMempoolFeeColors : this.mempoolFeeColors = defaultMempoolFeeColors; try { if (!this.style) { this.style = document.createElement('link'); diff --git a/frontend/src/theme-wiz.scss b/frontend/src/theme-wiz.scss new file mode 100644 index 000000000..6c5023466 --- /dev/null +++ b/frontend/src/theme-wiz.scss @@ -0,0 +1,100 @@ +/* Theme */ +$bg: #11131f; +$active-bg: #000000; +$hover-bg: #12131e; +$fg: #fff; +$title-fg: #2055e3; + +$taproot: #eba814; +$taproot-light: #d5a90a; +$taproot-dark: #9d7c05; + +/* Bootstrap */ +$body-bg: $bg; +$body-color: $fg; +$gray-800: $bg; +$gray-700: $fg; + +$nav-tabs-link-active-bg: $active-bg; + +$primary: #007cfa; +$secondary: #272f4e; +$tertiary: #6225b2; +$success: #0aab2f; +$info: #10e0ff; + +$h5-font-size: 1.15rem !default; + +$pagination-bg: $body-bg; +$pagination-border-color: $gray-800; +$pagination-disabled-bg: $fg; +$pagination-disabled-border-color: $bg; +$pagination-active-color: $fg; +$pagination-active-bg: $tertiary; +$pagination-hover-bg: $hover-bg; +$pagination-hover-border-color: $bg; +$pagination-disabled-bg: $bg; + +$custom-select-indicator-color: $fg; + +.input-group-text { + background-color: #1c2031 !important; + border: 1px solid #20263e !important; +} + +$link-color: $info; +$link-decoration: none !default; +$link-hover-color: darken($link-color, 15%) !default; +$link-hover-decoration: underline !default; + +$dropdown-bg: $bg; +$dropdown-link-color: $fg; + +$dropdown-link-hover-color: $fg; +$dropdown-link-hover-bg: $active-bg; + +$dropdown-link-active-color: $fg; +$dropdown-link-active-bg: $active-bg; + +:root { + --bg: #{$bg}; + --active-bg: #{$active-bg}; + --hover-bg: #{$hover-bg}; + --fg: #{$fg}; + --color-fg: #fff; + --title-fg: #{$title-fg}; + + --primary: #{$primary}; + --secondary: #{$secondary}; + --tertiary: #{$tertiary}; + --success: #{$success}; + --info: #{$info}; + + --box-bg: #171c2a; + --stat-box-bg: #0b1018; + --alert-bg: #3a1c61; + --navbar-bg: #212121; + --transparent-fg: #ffffffbb; + --fade-out-box-bg-start: rgba(23, 28, 42, 0); + --fade-out-box-bg-end: rgba(23, 28, 42, 1); + + --testnet: #1d486f; + --signet: #6f1d5d; + --liquid: #116761; + --liquidtestnet: #494a4a; + + --mainnet-alt: #9339f4; + --testnet-alt: #183550; + --signet-alt: #471850; + --liquidtestnet-alt: #272e46; + + --taproot: #eba814; + --taproot-light: #d5a90a; + --taproot-dark: #9d7c05; + + --green: #83fd00; + --red: #ff3d00; + --yellow: #ffcc00; + --grey: #7e7e7e; + --tooltip-grey: #b1b1b1; +}