From 463e66081c0d30e0d6e4db67e0e6623dd5881e53 Mon Sep 17 00:00:00 2001 From: natsoni Date: Fri, 26 Apr 2024 16:59:25 +0200 Subject: [PATCH] CSS theme changes --- .../accelerator-dashboard.component.ts | 2 +- .../block-overview-graph.component.ts | 4 +-- .../block-overview-graph/block-scene.ts | 4 +-- .../components/block-overview-graph/utils.ts | 2 +- .../block-overview-tooltip.component.scss | 6 ++--- .../blockchain/blockchain.component.scss | 2 +- .../theme-selector.component.html | 2 +- frontend/src/app/services/theme.service.ts | 2 +- frontend/src/styles.scss | 25 ++++++++++++----- frontend/src/theme-bukele.scss | 27 +++++++++++-------- frontend/src/theme-contrast.scss | 5 ++++ frontend/src/theme-wiz.scss | 5 ++++ 12 files changed, 56 insertions(+), 30 deletions(-) diff --git a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts index 282927b4a..5f9017bbd 100644 --- a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts +++ b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts @@ -148,7 +148,7 @@ export class AcceleratorDashboardComponent implements OnInit, OnDestroy { } else { const rate = tx.fee / tx.vsize; // color by simple single-tx fee rate const feeLevelIndex = feeLevels.findIndex((feeLvl) => Math.max(1, rate) < feeLvl) - 1; - return this.theme.theme === 'contrast' ? contrastColors[feeLevelIndex] || contrastColors[contrastColors.length - 1] : normalColors[feeLevelIndex] || normalColors[normalColors.length - 1]; + return this.theme.theme === 'contrast' || this.theme.theme === 'bukele' ? contrastColors[feeLevelIndex] || contrastColors[contrastColors.length - 1] : normalColors[feeLevelIndex] || normalColors[normalColors.length - 1]; } } diff --git a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts index ceb12738d..6231ba70d 100644 --- a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts +++ b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts @@ -651,13 +651,13 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On getFilterColorFunction(flags: bigint, gradient: 'fee' | 'age'): ((tx: TxView) => Color) { return (tx: TxView) => { if ((this.filterMode === 'and' && (tx.bigintFlags & flags) === flags) || (this.filterMode === 'or' && (flags === 0n || (tx.bigintFlags & flags) > 0n))) { - if (this.themeService.theme !== 'contrast') { + if (this.themeService.theme !== 'contrast' && this.themeService.theme !== 'bukele') { return (gradient === 'age') ? ageColorFunction(tx, defaultColors.fee, defaultAuditColors, this.relativeTime || (Date.now() / 1000)) : defaultColorFunction(tx, defaultColors.fee, defaultAuditColors, this.relativeTime || (Date.now() / 1000)); } else { return (gradient === 'age') ? ageColorFunction(tx, contrastColors.fee, contrastAuditColors, this.relativeTime || (Date.now() / 1000)) : contrastColorFunction(tx, contrastColors.fee, contrastAuditColors, this.relativeTime || (Date.now() / 1000)); } } else { - if (this.themeService.theme !== 'contrast') { + if (this.themeService.theme !== 'contrast' && this.themeService.theme !== 'bukele') { return (gradient === 'age') ? { r: 1, g: 1, b: 1, a: 0.05 } : defaultColorFunction( tx, defaultColors.unmatchedfee, 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 9dd76dec9..c59fcb7d4 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 === 'contrast' ? this.getColor = colorFunction || contrastColorFunction : this.getColor = colorFunction || defaultColorFunction; + this.theme.theme === 'contrast' || this.theme.theme === 'bukele' ? 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 === 'contrast' ? this.getColor = colorFunction || contrastColorFunction : this.getColor = colorFunction || defaultColorFunction; + theme.theme === 'contrast' || theme.theme === 'bukele' ? this.getColor = colorFunction || contrastColorFunction : this.getColor = colorFunction || defaultColorFunction; this.theme = theme; this.scene = { diff --git a/frontend/src/app/components/block-overview-graph/utils.ts b/frontend/src/app/components/block-overview-graph/utils.ts index ec6181853..9a6d9da43 100644 --- a/frontend/src/app/components/block-overview-graph/utils.ts +++ b/frontend/src/app/components/block-overview-graph/utils.ts @@ -177,7 +177,7 @@ export function ageColorFunction( return auditColors.accelerated; } - const color = theme !== 'contrast' ? defaultColorFunction(tx, colors, auditColors, relativeTime) : contrastColorFunction(tx, colors, auditColors, relativeTime); + const color = theme !== 'contrast' && theme !== 'bukele' ? defaultColorFunction(tx, colors, auditColors, relativeTime) : contrastColorFunction(tx, colors, auditColors, relativeTime); const ageLevel = (!tx.time ? 0 : (0.8 * Math.tanh((1 / 15) * Math.log2((Math.max(1, 0.6 * ((relativeTime - tx.time) - 60))))))); return { diff --git a/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.scss b/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.scss index 2125c3128..28708506b 100644 --- a/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.scss +++ b/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.scss @@ -30,7 +30,7 @@ th, td { } .badge.badge-accelerated { - background-color: var(--tertiary); + background-color: #653b9c; box-shadow: #ad7de57f 0px 0px 12px -2px; color: white; animation: acceleratePulse 1s infinite; @@ -71,7 +71,7 @@ th, td { } @keyframes acceleratePulse { - 0% { background-color: var(--tertiary); box-shadow: #ad7de57f 0px 0px 12px -2px; } + 0% { background-color: #653b9c; box-shadow: #ad7de57f 0px 0px 12px -2px; } 50% { background-color: #8457bb; box-shadow: #ad7de5 0px 0px 18px -2px;} - 100% { background-color: var(--tertiary); box-shadow: #ad7de57f 0px 0px 12px -2px; } + 100% { background-color: #653b9c; box-shadow: #ad7de57f 0px 0px 12px -2px; } } \ No newline at end of file diff --git a/frontend/src/app/components/blockchain/blockchain.component.scss b/frontend/src/app/components/blockchain/blockchain.component.scss index 4da3746e4..700f57a27 100644 --- a/frontend/src/app/components/blockchain/blockchain.component.scss +++ b/frontend/src/app/components/blockchain/blockchain.component.scss @@ -68,7 +68,7 @@ } .block-display-toggle { - color: white; + color: var(--fg); font-size: 0.8rem; position: absolute; bottom: 15.8em; 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 ecb96a99c..1610e816d 100644 --- a/frontend/src/app/components/theme-selector/theme-selector.component.html +++ b/frontend/src/app/components/theme-selector/theme-selector.component.html @@ -3,6 +3,6 @@ - + diff --git a/frontend/src/app/services/theme.service.ts b/frontend/src/app/services/theme.service.ts index 7981f37a3..3bdb1c65b 100644 --- a/frontend/src/app/services/theme.service.ts +++ b/frontend/src/app/services/theme.service.ts @@ -24,7 +24,7 @@ export class ThemeService { apply(theme) { this.theme = theme; if (theme !== 'default') { - theme === 'contrast' ? this.mempoolFeeColors = contrastMempoolFeeColors : this.mempoolFeeColors = defaultMempoolFeeColors; + theme === 'contrast' || theme === 'bukele' ? this.mempoolFeeColors = contrastMempoolFeeColors : this.mempoolFeeColors = defaultMempoolFeeColors; try { if (!this.style) { this.style = document.createElement('link'); diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index 12783a332..dd0ce8bef 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -106,6 +106,11 @@ $dropdown-link-active-bg: $active-bg; --grey: #6c757d; --tooltip-grey: #b1b1b1; --orange: #b86d12; + + --search-button: #4d2d77; + --search-button-border: #472a6e; + --search-button-focus: #533180; + --search-button-shadow: #7c58ab80; } html, body { @@ -192,21 +197,21 @@ main { .btn-purple:not(:disabled):not(.disabled):active, .btn-purple:not(:disabled):not(.disabled).active, .show > .btn-purple.dropdown-toggle { color: #fff; - background-color: #4d2d77; - border-color: #472a6e; + background-color: var(--search-button); + border-color: var(--search-button-border); } .btn-purple:focus, .btn-purple.focus { color: #fff; - background-color: #533180; - border-color: #4d2d77; - box-shadow: 0 0 0 0.2rem rgb(124 88 171 / 50%); + background-color: var(--search-button-focus); + border-color: var(--search-button); + box-shadow: 0 0 0 0.2rem var(--search-button-shadow); } .btn-purple:hover { color: #fff; - background-color: #533180; - border-color: #4d2d77; + background-color: var(--search-button-focus); + border-color: var(--search-button); } .form-control.form-control-secondary { @@ -1299,3 +1304,9 @@ a { .badge-info { background-color: var(--info); } + +.btn-primary { + color: var(--fg); + background-color: var(--primary); + border-color: var(--primary); +} \ No newline at end of file diff --git a/frontend/src/theme-bukele.scss b/frontend/src/theme-bukele.scss index e9124194e..e81058dab 100644 --- a/frontend/src/theme-bukele.scss +++ b/frontend/src/theme-bukele.scss @@ -1,9 +1,9 @@ /* Theme */ -$bg: #1c1e4d; -$active-bg: #313945; +$bg: #313945; +$active-bg: #000000; $hover-bg: #E5E5E5; -$fg: #FFFFFF; -$title-fg: #c9a892; +$fg: #ffffff; +$title-fg: #c19a81; $taproot: #eba814; $taproot-light: #d5a90a; @@ -17,11 +17,11 @@ $gray-700: $fg; $nav-tabs-link-active-bg: $active-bg; -$primary: #343992; -$secondary: #32345e; -$tertiary: #a08674; +$primary: #007cfa; +$secondary: #1c1e4d; +$tertiary: #8c7566; $success: #009900; -$info: #e4d3c8; +$info: #dac3b4; $h5-font-size: 1.15rem !default; @@ -74,14 +74,14 @@ $dropdown-link-active-bg: $active-bg; --skeleton-bg: #2e324e; --skeleton-bg-light: #5d6182; - --box-bg: #15173a; - --stat-box-bg: #0e0f28; + --box-bg: #272d37; + --stat-box-bg: #1c2027; --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); - --opacity: 0.7; + --opacity: 0.57; --testnet: #1d486f; --signet: #6f1d5d; @@ -103,4 +103,9 @@ $dropdown-link-active-bg: $active-bg; --grey: #7e7e7e; --tooltip-grey: #b1b1b1; --orange: #ff9f00; + + --search-button: #645449; + --search-button-border: #605046; + --search-button-focus: #786457; + --search-button-shadow: #a0867480; } diff --git a/frontend/src/theme-contrast.scss b/frontend/src/theme-contrast.scss index a3faddaef..61188a361 100644 --- a/frontend/src/theme-contrast.scss +++ b/frontend/src/theme-contrast.scss @@ -103,4 +103,9 @@ $dropdown-link-active-bg: $active-bg; --grey: #7e7e7e; --tooltip-grey: #b1b1b1; --orange: #ff9f00; + + --search-button: #4d2d77; + --search-button-border: #472a6e; + --search-button-focus: #533180; + --search-button-shadow: #7c58ab80; } diff --git a/frontend/src/theme-wiz.scss b/frontend/src/theme-wiz.scss index f46576c11..d560a6575 100644 --- a/frontend/src/theme-wiz.scss +++ b/frontend/src/theme-wiz.scss @@ -103,4 +103,9 @@ $dropdown-link-active-bg: $active-bg; --grey: #7e7e7e; --tooltip-grey: #b1b1b1; --orange: #ff9f00; + + --search-button: #4d2d77; + --search-button-border: #472a6e; + --search-button-focus: #533180; + --search-button-shadow: #7c58ab80; }