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;
}