Merge pull request #5044 from mempool/mononaut/onbtc-imgs-themed

onbtc theme
2024-05-08 10:06:13 +07:00
parent f2a6828015 c15393981d
commit 7f5b5f487e
61 changed files with 1115 additions and 285 deletions
--- a/frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.scss
+++ b/frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.scss
@@ -11,7 +11,8 @@

 .main-title {
  position: relative;
-  color: #ffffff91;
+  color: var(--fg);
+  opacity: var(--opacity);
  margin-top: -13px;
  font-size: 10px;
  text-transform: uppercase;
--- a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.scss
+++ b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.scss
@@ -60,7 +60,8 @@

 .main-title {
  position: relative;
-  color: #ffffff91;
+  color: var(--fg);
+  opacity: var(--opacity);
  margin-top: -13px;
  font-size: 10px;
  text-transform: uppercase;
--- 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];
    }
  }

--- a/frontend/src/app/components/address-graph/address-graph.component.scss
+++ b/frontend/src/app/components/address-graph/address-graph.component.scss
@@ -11,7 +11,8 @@

 .main-title {
  position: relative;
-  color: #ffffff91;
+  color: var(--fg);
+  opacity: var(--opacity);
  margin-top: -13px;
  font-size: 10px;
  text-transform: uppercase;
--- a/frontend/src/app/components/address/address-preview.component.scss
+++ b/frontend/src/app/components/address/address-preview.component.scss
@@ -3,7 +3,7 @@
 }

 .qr-wrapper {
-  background-color: var(--fg);
+  background-color: #fff;
  padding: 10px;
  padding-bottom: 5px;
  display: inline-block;
--- a/frontend/src/app/components/address/address.component.scss
+++ b/frontend/src/app/components/address/address.component.scss
@@ -1,5 +1,5 @@
 .qr-wrapper {
-  background-color: var(--fg);
+  background-color: #fff;
  padding: 10px;
  padding-bottom: 5px;
  display: inline-block;
--- a/frontend/src/app/components/asset/asset.component.scss
+++ b/frontend/src/app/components/asset/asset.component.scss
@@ -1,5 +1,5 @@
 .qr-wrapper {
-  background-color: var(--fg);
+  background-color: #fff;
  padding: 10px;
  padding-bottom: 5px;
  display: inline-block;
--- a/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.scss
+++ b/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.scss
@@ -11,7 +11,8 @@

 .main-title {
  position: relative;
-  color: #ffffff91;
+  color: var(--fg);
+  opacity: var(--opacity);
  margin-top: -13px;
  font-size: 10px;
  text-transform: uppercase;
--- a/frontend/src/app/components/block-fees-graph/block-fees-graph.component.scss
+++ b/frontend/src/app/components/block-fees-graph/block-fees-graph.component.scss
@@ -11,7 +11,8 @@

 .main-title {
  position: relative;
-  color: #ffffff91;
+  color: var(--fg);
+  opacity: var(--opacity);
  margin-top: -13px;
  font-size: 10px;
  text-transform: uppercase;
--- a/frontend/src/app/components/block-health-graph/block-health-graph.component.scss
+++ b/frontend/src/app/components/block-health-graph/block-health-graph.component.scss
@@ -11,7 +11,8 @@

 .main-title {
  position: relative;
-  color: #ffffff91;
+  color: var(--fg);
+  opacity: var(--opacity);
  margin-top: -13px;
  font-size: 10px;
  text-transform: uppercase;
--- 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,
--- 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 = {
--- 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 {
--- 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
@@ -1,6 +1,6 @@
 .block-overview-tooltip {
  position: absolute;
-  background: rgba(#11131f, 0.95);
+	background: color-mix(in srgb, var(--active-bg) 95%, transparent);
  border-radius: 4px;
  box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
  color: var(--tooltip-grey);
@@ -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; }
 }
--- a/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.scss
+++ b/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.scss
@@ -11,7 +11,8 @@

 .main-title {
  position: relative;
-  color: #ffffff91;
+  color: var(--fg);
+  opacity: var(--opacity);
  margin-top: -13px;
  font-size: 10px;
  text-transform: uppercase;
--- a/frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.scss
+++ b/frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.scss
@@ -11,7 +11,8 @@

 .main-title {
  position: relative;
-  color: #ffffff91;
+  color: var(--fg);
+  opacity: var(--opacity);
  margin-top: -13px;
  font-size: 10px;
  text-transform: uppercase;
--- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss
+++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss
@@ -63,7 +63,7 @@
 .fee-span {
  font-size: 11px;
  margin-bottom: 5px;
-  color: #fff000;
+  color: var(--yellow);
 }

 .transaction-count {
@@ -130,7 +130,7 @@
  height: 0;
  border-left: calc(var(--block-size) * 0.3) solid transparent;
  border-right: calc(var(--block-size) * 0.3) solid transparent;
-  border-bottom: calc(var(--block-size) * 0.3) solid #FFF;
+  border-bottom: calc(var(--block-size) * 0.3) solid var(--fg);
 }

 .flashing {
--- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
+++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
@@ -350,7 +350,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
    return {
      left: addLeft + this.blockOffset * index + 'px',
      background: `repeating-linear-gradient(
-        #2d3348,
+        var(--secondary),
        var(--secondary) ${greenBackgroundHeight}%,
        ${this.gradientColors[this.network][0]} ${Math.max(greenBackgroundHeight, 0)}%,
        ${this.gradientColors[this.network][1]} 100%
@@ -362,7 +362,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
  convertStyleForLoadingBlock(style) {
    return {
      ...style,
-      background: "#2d3348",
+      background: "var(--secondary)",
    };
  }

@@ -371,7 +371,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {

    return {
      left: addLeft + (this.blockOffset * index) + 'px',
-      background: "#2d3348",
+      background: "var(--secondary)",
    };
  }

--- a/frontend/src/app/components/blockchain/blockchain.component.scss
+++ b/frontend/src/app/components/blockchain/blockchain.component.scss
@@ -54,7 +54,7 @@
 }

 .time-toggle {
-  color: white;
+  color: var(--fg);
  font-size: 0.8rem;
  position: absolute;
  bottom: -1.8em;
@@ -68,7 +68,7 @@
 }

 .block-display-toggle {
-  color: white;
+  color: var(--fg);
  font-size: 0.8rem;
  position: absolute;
  bottom: 15.8em;
--- a/frontend/src/app/components/clock/clock.component.ts
+++ b/frontend/src/app/components/clock/clock.component.ts
@@ -32,12 +32,12 @@ export class ClockComponent implements OnInit {
  limitHeight: number;

  gradientColors = {
-    '': ['#9339f4', '#105fb0'],
-    liquid: ['#116761', '#183550'],
-    'liquidtestnet': ['#494a4a', '#272e46'],
-    testnet: ['#1d486f', '#183550'],
-    testnet4: ['#1d486f', '#183550'],
-    signet: ['#6f1d5d', '#471850'],
+    '': ['var(--mainnet-alt)', 'var(--primary)'],
+    liquid: ['var(--liquid)', 'var(--testnet-alt)'],
+    'liquidtestnet': ['var(--liquidtestnet)', 'var(--liquidtestnet-alt)'],
+    testnet: ['var(--testnet)', 'var(--testnet-alt)'],
+    testnet4: ['var(--testnet)', 'var(--testnet-alt)'],
+    signet: ['var(--signet)', 'var(--signet-alt)'],
  };

  constructor(
@@ -100,8 +100,8 @@ export class ClockComponent implements OnInit {

    return {
      background: `repeating-linear-gradient(
-        #2d3348,
-        #2d3348 ${greenBackgroundHeight}%,
+        var(--secondary),
+        var(--secondary) ${greenBackgroundHeight}%,
        ${this.gradientColors[''][0]} ${Math.max(greenBackgroundHeight, 0)}%,
        ${this.gradientColors[''][1]} 100%
      )`,
--- a/frontend/src/app/components/difficulty-mining/difficulty-mining.component.scss
+++ b/frontend/src/app/components/difficulty-mining/difficulty-mining.component.scss
@@ -119,7 +119,8 @@

 .main-title {
  position: relative;
-  color: #ffffff91;
+  color: var(--fg);
+  opacity: var(--opacity);
  margin-top: -13px;
  font-size: 10px;
  text-transform: uppercase;
--- a/frontend/src/app/components/difficulty/difficulty-tooltip.component.scss
+++ b/frontend/src/app/components/difficulty/difficulty-tooltip.component.scss
@@ -1,9 +1,9 @@
 .difficulty-tooltip {
  position: fixed;
-  background: rgba(#11131f, 0.95);
+  background: color-mix(in srgb, var(--active-bg) 95%, transparent);
  border-radius: 4px;
  box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
-  color: #b1b1b1;
+  color: var(--tooltip-grey);
  padding: 10px 15px;
  text-align: left;
  pointer-events: none;
--- a/frontend/src/app/components/difficulty/difficulty.component.html
+++ b/frontend/src/app/components/difficulty/difficulty.component.html
@@ -15,8 +15,8 @@
          <svg #epochSvg class="epoch-blocks" height="22px" width="100%" viewBox="0 0 224 9" shape-rendering="crispEdges" preserveAspectRatio="none">
            <defs>
              <linearGradient id="diff-gradient" x1="0%" y1="0%" x2="100%" y2="0%" gradientUnits="userSpaceOnUse">
-                <stop offset="0%" stop-color="#105fb0" />
-                <stop offset="100%" stop-color="#9339f4" />
+                <stop offset="0%" stop-color="var(--primary)" />
+                <stop offset="100%" stop-color="var(--mainnet-alt)" />
              </linearGradient>
              <linearGradient id="diff-hover-gradient" x1="0%" y1="0%" x2="100%" y2="0%" gradientUnits="userSpaceOnUse">
                <stop offset="0%" stop-color="#2486eb" />
--- a/frontend/src/app/components/difficulty/difficulty.component.scss
+++ b/frontend/src/app/components/difficulty/difficulty.component.scss
@@ -128,7 +128,8 @@

 .main-title {
  position: relative;
-  color: #ffffff91;
+  color: var(--fg);
+  opacity: var(--opacity);
  margin-top: -13px;
  font-size: 10px;
  text-transform: uppercase;
@@ -223,7 +224,7 @@
    height: 100%;
  }
  .background {
-    background: linear-gradient(to right, var(--primary), #9339f4);
+    background: linear-gradient(to right, var(--primary), var(--mainnet-alt));
    left: 0;
    right: 0;
  }
--- a/frontend/src/app/components/fees-box/fees-box.component.scss
+++ b/frontend/src/app/components/fees-box/fees-box.component.scss
@@ -79,7 +79,7 @@
  display: flex;
  flex-direction: row;
  transition: background-color 1s;
-  color: var(--color-fg);
+  color: #fff;
  &.priority {
    @media (767px < width < 992px), (width < 576px) {
      width: 100%;
--- a/frontend/src/app/components/fees-box/fees-box.component.ts
+++ b/frontend/src/app/components/fees-box/fees-box.component.ts
@@ -16,8 +16,8 @@ export class FeesBoxComponent implements OnInit, OnDestroy {
  isLoading$: Observable<boolean>;
  recommendedFees$: Observable<Recommendedfees>;
  themeSubscription: Subscription;
-  gradient = 'linear-gradient(to right, #2e324e, #2e324e)';
-  noPriority = '#2e324e';
+  gradient = 'linear-gradient(to right, var(--skeleton-bg), var(--skeleton-bg))';
+  noPriority = 'var(--skeleton-bg)';
  fees: Recommendedfees;

  constructor(
--- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss
+++ b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss
@@ -11,7 +11,8 @@

 .main-title {
  position: relative;
-  color: #ffffff91;
+  color: var(--fg);
+  opacity: var(--opacity);
  margin-top: -13px;
  font-size: 10px;
  text-transform: uppercase;
--- a/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.scss
+++ b/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.scss
@@ -11,7 +11,8 @@

 .main-title {
  position: relative;
-  color: #ffffff91;
+  color: var(--fg);
+  opacity: var(--opacity);
  margin-top: -13px;
  font-size: 10px;
  text-transform: uppercase;
--- a/frontend/src/app/components/liquid-master-page/liquid-master-page.component.scss
+++ b/frontend/src/app/components/liquid-master-page/liquid-master-page.component.scss
@@ -4,6 +4,7 @@
  top: 0;
  width: 100%;
  z-index: 100;
+  background-color: var(--bg);
 }

 li.nav-item.active {
@@ -17,7 +18,7 @@ fa-icon {
 .navbar {
  z-index: 100;
  min-height: 64px;
-  background-color: var(--bg);
+  background-color: var(--nav-bg);
 }

 li.nav-item {
@@ -48,7 +49,7 @@ li.nav-item {
 }

 .navbar-nav {
-  background: var(--navbar-bg);
+  background: var(--nav-bg);
  bottom: 0;
  box-shadow: 0px 0px 15px 0px #000;
  flex-direction: row;
--- a/frontend/src/app/components/master-page-preview/master-page-preview.component.html
+++ b/frontend/src/app/components/master-page-preview/master-page-preview.component.html
@@ -6,7 +6,7 @@
        <img [src]="enterpriseInfo.img" class="subdomain_logo" [class]="{'rounded': enterpriseInfo.rounded_corner}">
      }
      @if (enterpriseInfo?.header_img) {
-        <img *ngIf="enterpriseInfo.header_img" [src]="enterpriseInfo?.header_img" alt="enterpriseInfo.title" height="36px">
+        <img *ngIf="enterpriseInfo.header_img" [src]="enterpriseInfo?.header_img" alt="enterpriseInfo.title" height="60px" class="mr-3">
      } @else {
        <app-svg-images *ngIf="!officialMempoolSpace" name="mempoolSpace" viewBox="0 0 500 126" width="500" height="126" class="mempool-logo" style="width: 200px; height: 50px"></app-svg-images>
        <app-svg-images *ngIf="officialMempoolSpace" name="officialMempoolSpace" style="width: 200px; height: 50px" width="500" height="126" viewBox="0 0 500 126"></app-svg-images>
--- a/frontend/src/app/components/master-page-preview/master-page-preview.component.scss
+++ b/frontend/src/app/components/master-page-preview/master-page-preview.component.scss
@@ -5,6 +5,7 @@
  max-width: 1200px;
  max-height: 600px;
  padding-top: 80px;
+  background: var(--nav-bg);

  header {
    position: absolute;
@@ -18,7 +19,7 @@
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
-    background: var(--stat-box-bg);
+    background: var(--nav-bg);
    text-align: start;
    font-size: 1.8em;
  }
--- a/frontend/src/app/components/master-page/master-page.component.html
+++ b/frontend/src/app/components/master-page/master-page.component.html
@@ -17,16 +17,16 @@

  <!-- Large screen -->
  <a class="navbar-brand d-none d-md-flex" [ngClass]="{'dual-logos': subdomain}" [routerLink]="['/' | relativeUrl]" (click)="brandClick($event)">
-    <ng-template [ngIf]="subdomain && enterpriseInfo">
-      <div class="subdomain_container">
-        <img [src]="enterpriseInfo.img || '/api/v1/services/enterprise/images/' + subdomain + '/logo?imageMd5=' + enterpriseInfo.imageMd5" class="subdomain_logo" [class]="{'rounded': enterpriseInfo.rounded_corner}">
-      </div>
-      <div class="vertical-line"></div>
-    </ng-template>
    <ng-container *ngIf="{ val: connectionState$ | async } as connectionState">
      @if (enterpriseInfo?.header_img) {
-        <img [src]="enterpriseInfo?.header_img" alt="enterpriseInfo.title" height="36px">
+        <img [src]="enterpriseInfo?.header_img" alt="enterpriseInfo.title" height="48px" class="mr-3">
      } @else {
+        <ng-template [ngIf]="subdomain && enterpriseInfo">
+          <div class="subdomain_container">
+            <img [src]="enterpriseInfo.img || '/api/v1/services/enterprise/images/' + subdomain + '/logo?imageMd5=' + enterpriseInfo.imageMd5" class="subdomain_logo" [class]="{'rounded': enterpriseInfo.rounded_corner}">
+          </div>
+          <div class="vertical-line"></div>
+        </ng-template>
        <app-svg-images *ngIf="!officialMempoolSpace" name="mempoolSpace" viewBox="0 0 500 126" class="mempool-logo" [ngStyle]="{'opacity': connectionState.val === 2 ? 1 : 0.5 }"></app-svg-images>
        <app-svg-images *ngIf="officialMempoolSpace" name="officialMempoolSpace" viewBox="0 0 500 126"></app-svg-images>
      }
@@ -38,24 +38,28 @@
  </a>
  <!-- Mobile -->
  <a class="navbar-brand d-flex d-md-none justify-content-center" [ngClass]="{'dual-logos': subdomain, 'mr-0': subdomain}" [routerLink]="['/' | relativeUrl]" (click)="brandClick($event)">
-    <ng-template [ngIf]="subdomain && enterpriseInfo">
-      <div class="subdomain_container">
-        <img [src]="enterpriseInfo.img || '/api/v1/services/enterprise/images/' + subdomain + '/logo?imageMd5=' + enterpriseInfo.imageMd5" class="subdomain_logo" [class]="{'rounded': enterpriseInfo.rounded_corner}">
-      </div>
-      <div class="vertical-line"></div>
-    </ng-template>
-    <ng-container *ngIf="{ val: connectionState$ | async } as connectionState">
-      @if (enterpriseInfo?.header_img) {
-        <img [src]="enterpriseInfo?.header_img" alt="enterpriseInfo.title" height="36px">
-      } @else {
-        <app-svg-images *ngIf="!officialMempoolSpace" name="mempoolSpace" viewBox="0 0 500 126" class="mempool-logo" [ngStyle]="{'opacity': connectionState.val === 2 ? 1 : 0.5 }"></app-svg-images>
-        <app-svg-images *ngIf="officialMempoolSpace" name="officialMempoolSpace" viewBox="0 0 500 126"></app-svg-images>
-      }
-        <div class="connection-badge">
-        <div class="badge badge-warning" *ngIf="connectionState.val === 0" i18n="master-page.offline">Offline</div>
-        <div class="badge badge-warning" *ngIf="connectionState.val === 1" i18n="master-page.reconnecting">Reconnecting...</div>
-      </div>
-    </ng-container>
+    @if (enterpriseInfo?.header_img) {
+      <img [src]="enterpriseInfo?.header_img" alt="enterpriseInfo.title" height="42px">
+    } @else {
+      <ng-template [ngIf]="subdomain && enterpriseInfo">
+        <div class="subdomain_container">
+          <img [src]="enterpriseInfo.img || '/api/v1/services/enterprise/images/' + subdomain + '/logo?imageMd5=' + enterpriseInfo.imageMd5" class="subdomain_logo" [class]="{'rounded': enterpriseInfo.rounded_corner}">
+        </div>
+        <div class="vertical-line"></div>
+      </ng-template>
+      <ng-container *ngIf="{ val: connectionState$ | async } as connectionState">
+        @if (enterpriseInfo?.header_img) {
+          <img [src]="enterpriseInfo?.header_img" alt="enterpriseInfo.title" height="36px">
+        } @else {
+          <app-svg-images *ngIf="!officialMempoolSpace" name="mempoolSpace" viewBox="0 0 500 126" class="mempool-logo" [ngStyle]="{'opacity': connectionState.val === 2 ? 1 : 0.5 }"></app-svg-images>
+          <app-svg-images *ngIf="officialMempoolSpace" name="officialMempoolSpace" viewBox="0 0 500 126"></app-svg-images>
+        }
+          <div class="connection-badge">
+          <div class="badge badge-warning" *ngIf="connectionState.val === 0" i18n="master-page.offline">Offline</div>
+          <div class="badge badge-warning" *ngIf="connectionState.val === 1" i18n="master-page.reconnecting">Reconnecting...</div>
+        </div>
+      </ng-container>
+    }
  </a>

  <div (window:resize)="onResize()" ngbDropdown class="dropdown-container" *ngIf="env.TESTNET_ENABLED || env.TESTNET4_ENABLED || env.SIGNET_ENABLED || env.LIQUID_ENABLED || env.LIQUID_TESTNET_ENABLED">
--- a/frontend/src/app/components/master-page/master-page.component.scss
+++ b/frontend/src/app/components/master-page/master-page.component.scss
@@ -3,6 +3,7 @@
  position: -webkit-sticky;
  top: 0;
  width: 100%;
+  background-color: var(--bg);
  z-index: 100;
 }

@@ -18,7 +19,7 @@ fa-icon {
  z-index: 100;
  min-height: 64px;
  width: 100%;
-  background-color: var(--bg);
+  background-color: var(--nav-bg);
 }

 li.nav-item {
@@ -59,7 +60,7 @@ li.nav-item {
 }

 .navbar-nav {
-  background: var(--navbar-bg);
+  background: var(--nav-bg);
  bottom: 0;
  box-shadow: 0px 0px 15px 0px #000;
  flex-direction: row;
--- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss
+++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss
@@ -56,7 +56,7 @@
 .fee-span {
  font-size: 11px;
  margin-bottom: 5px;
-  color: #fff000;
+  color: var(--yellow);
 }

 .transaction-count {
@@ -119,7 +119,7 @@
  height: 0;
  border-left: calc(var(--block-size) * 0.3) solid transparent;
  border-right: calc(var(--block-size) * 0.3) solid transparent;
-  border-bottom: calc(var(--block-size) * 0.3) solid #FFF;
+  border-bottom: calc(var(--block-size) * 0.3) solid var(--fg);
 }

 .blockLink {
--- a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss
+++ b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss
@@ -63,7 +63,8 @@

 .main-title {
  position: relative;
-  color: #ffffff91;
+  color: var(--fg);
+  opacity: var(--opacity);
  margin-top: -13px;
  font-size: 10px;
  text-transform: uppercase;
--- a/frontend/src/app/components/rbf-timeline/rbf-timeline-tooltip.component.scss
+++ b/frontend/src/app/components/rbf-timeline/rbf-timeline-tooltip.component.scss
@@ -1,10 +1,10 @@
 .rbf-tooltip {
  position: fixed;
  z-index: 3;
-  background: rgba(#11131f, 0.95);
+  background: color-mix(in srgb, var(--active-bg) 95%, transparent);
  border-radius: 4px;
  box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
-  color: #b1b1b1;
+  color: var(--tooltip-grey);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
--- a/frontend/src/app/components/rbf-timeline/rbf-timeline.component.scss
+++ b/frontend/src/app/components/rbf-timeline/rbf-timeline.component.scss
@@ -159,7 +159,7 @@

      &.selected {
        .shape-border {
-          background: #9339f4;
+          background: var(--mainnet-alt);
        }
      }

@@ -183,7 +183,7 @@
          width: calc(1em + 16px);

          .shape {
-            border: solid 4px #9339f4;
+            border: solid 4px var(--mainnet-alt);
          }

          &:hover {
--- a/frontend/src/app/components/theme-selector/theme-selector.component.html
+++ b/frontend/src/app/components/theme-selector/theme-selector.component.html
@@ -3,5 +3,6 @@
        <option value="default" i18n="mempool-goggles.classic">Classic</option>
        <option value="contrast">BlueMatt</option>
        <option value="wiz">wiz</option>
+        <option value="bukele">Bukele</option>
    </select>
 </div>
--- a/frontend/src/app/components/theme-selector/theme-selector.component.ts
+++ b/frontend/src/app/components/theme-selector/theme-selector.component.ts
@@ -11,7 +11,7 @@ import { Subscription } from 'rxjs';
 })
 export class ThemeSelectorComponent implements OnInit {
  themeForm: UntypedFormGroup;
-  themes = ['default', 'contrast', 'wiz'];
+  themes = ['default', 'contrast', 'wiz', 'bukele'];
  themeSubscription: Subscription;

  constructor(
--- a/frontend/src/app/components/transactions-list/transactions-list.component.scss
+++ b/frontend/src/app/components/transactions-list/transactions-list.component.scss
@@ -103,7 +103,8 @@ td.amount.large {
 	margin-top: 10px;
 }
 .assetBox {
-	background-color: #653b9c90;
+	background: color-mix(in srgb, var(--tertiary) 56%, transparent);
+
 }

 .details-container {
--- a/frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.scss
+++ b/frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.scss
@@ -1,6 +1,6 @@
 .bowtie-graph-tooltip {
  position: absolute;
-  background: rgba(#11131f, 0.95);
+  background: color-mix(in srgb, var(--active-bg) 95%, transparent);
  border-radius: 4px;
  box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
  color: var(--tooltip-grey);
--- a/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.ts
+++ b/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.ts
@@ -84,7 +84,7 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
  refreshOutspends$: ReplaySubject<string> = new ReplaySubject();

  gradientColors = {
-    '': ['#9339f4', '#105fb0', '#9339f400'],
+    '': ['var(--mainnet-alt)', 'var(--primary)', 'color-mix(in srgb, var(--mainnet-alt) 1%, transparent)'],
    // liquid: ['#116761', '#183550'],
    liquid: ['#09a197', '#0f62af', '#09a19700'],
    // 'liquidtestnet': ['#494a4a', '#272e46'],
@@ -96,7 +96,7 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
    signet: ['#d24fc8', '#a84fd2', '#d24fc800'],
  };

-  gradient: string[] = ['#105fb0', '#105fb0'];
+  gradient: string[] = ['var(--primary)', 'var(--primary)'];

  constructor(
    private router: Router,