From 6a767ce5c4d61fc0bc5eaa76a5e23866a4be4931 Mon Sep 17 00:00:00 2001 From: natsoni Date: Mon, 22 Apr 2024 12:36:43 +0200 Subject: [PATCH 1/7] Make links color manageable with themes --- frontend/src/styles.scss | 9 +++++++++ frontend/src/theme-contrast.scss | 4 +++- frontend/src/theme-wiz.scss | 4 +++- 3 files changed, 15 insertions(+), 2 deletions(-) diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index d92a3ec36..1825bbe6a 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -72,6 +72,8 @@ $dropdown-link-active-bg: $active-bg; --tertiary: #{$tertiary}; --success: #{$success}; --info: #{$info}; + --link-color: #{$info}; + --link-hover-color: #{$link-hover-color}; --icon: #f1f1f1; --box-bg: #24273e; @@ -1276,4 +1278,11 @@ app-global-footer { .btn-secondary { background-color: var(--secondary); border-color: var(--secondary); +} + +a { + color: var(--link-color); + &:hover { + color: var(--link-hover-color); + } } \ No newline at end of file diff --git a/frontend/src/theme-contrast.scss b/frontend/src/theme-contrast.scss index 470bad2e9..9b8af4528 100644 --- a/frontend/src/theme-contrast.scss +++ b/frontend/src/theme-contrast.scss @@ -21,7 +21,7 @@ $primary: #007cfa; $secondary: #272f4e; $tertiary: #6225b2; $success: #0aab2f; -$info: #10e0ff; +$info: #00ddff; $h5-font-size: 1.15rem !default; @@ -69,6 +69,8 @@ $dropdown-link-active-bg: $active-bg; --tertiary: #{$tertiary}; --success: #{$success}; --info: #{$info}; + --link-color: #{$info}; + --link-hover-color: #{$link-hover-color}; --icon: #f1f1f1; --box-bg: #171c2a; diff --git a/frontend/src/theme-wiz.scss b/frontend/src/theme-wiz.scss index 470bad2e9..9b8af4528 100644 --- a/frontend/src/theme-wiz.scss +++ b/frontend/src/theme-wiz.scss @@ -21,7 +21,7 @@ $primary: #007cfa; $secondary: #272f4e; $tertiary: #6225b2; $success: #0aab2f; -$info: #10e0ff; +$info: #00ddff; $h5-font-size: 1.15rem !default; @@ -69,6 +69,8 @@ $dropdown-link-active-bg: $active-bg; --tertiary: #{$tertiary}; --success: #{$success}; --info: #{$info}; + --link-color: #{$info}; + --link-hover-color: #{$link-hover-color}; --icon: #f1f1f1; --box-bg: #171c2a; From 4a76cb083aa3514d55fb21783c10fa1397720210 Mon Sep 17 00:00:00 2001 From: natsoni Date: Tue, 23 Apr 2024 18:59:26 +0200 Subject: [PATCH 2/7] More css included in color themes --- .../acceleration-fees-graph.component.scss | 3 +- .../accelerator-dashboard.component.scss | 3 +- .../address-graph.component.scss | 3 +- .../address/address-preview.component.scss | 2 +- .../components/address/address.component.scss | 2 +- .../app/components/asset/asset.component.scss | 2 +- .../block-fee-rates-graph.component.scss | 3 +- .../block-fees-graph.component.scss | 3 +- .../block-health-graph.component.scss | 3 +- .../block-overview-tooltip.component.scss | 2 +- .../block-rewards-graph.component.scss | 3 +- .../block-sizes-weights-graph.component.scss | 3 +- .../blockchain-blocks.component.scss | 4 +- .../blockchain-blocks.component.ts | 6 +- .../blockchain/blockchain.component.scss | 2 +- .../app/components/clock/clock.component.ts | 16 ++--- .../difficulty-mining.component.scss | 3 +- .../difficulty-tooltip.component.scss | 4 +- .../difficulty/difficulty.component.html | 4 +- .../difficulty/difficulty.component.scss | 5 +- .../fees-box/fees-box.component.scss | 2 +- .../components/fees-box/fees-box.component.ts | 4 +- .../hashrate-chart.component.scss | 3 +- .../hashrate-chart-pools.component.scss | 3 +- .../mempool-blocks.component.scss | 4 +- .../mining-dashboard.component.scss | 3 +- .../rbf-timeline-tooltip.component.scss | 4 +- .../rbf-timeline/rbf-timeline.component.scss | 4 +- .../transactions-list.component.scss | 3 +- .../tx-bowtie-graph-tooltip.component.scss | 2 +- .../tx-bowtie-graph.component.ts | 4 +- .../app/dashboard/dashboard.component.scss | 6 +- .../lightning-dashboard.component.scss | 3 +- .../nodes-networks-chart.component.scss | 3 +- .../lightning-statistics-chart.component.scss | 3 +- frontend/src/styles.scss | 65 +++++++++++-------- frontend/src/theme-contrast.scss | 10 +-- frontend/src/theme-wiz.scss | 10 +-- 38 files changed, 124 insertions(+), 88 deletions(-) diff --git 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 index 96273dead..984bc2b4c 100644 --- 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; diff --git a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.scss b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.scss index 563e189cf..e6763f60a 100644 --- 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; diff --git a/frontend/src/app/components/address-graph/address-graph.component.scss b/frontend/src/app/components/address-graph/address-graph.component.scss index 3752203c1..62393644b 100644 --- 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; diff --git a/frontend/src/app/components/address/address-preview.component.scss b/frontend/src/app/components/address/address-preview.component.scss index 623d72db2..f03e13541 100644 --- 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; diff --git a/frontend/src/app/components/address/address.component.scss b/frontend/src/app/components/address/address.component.scss index 78ca0e80d..da615376c 100644 --- 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; diff --git a/frontend/src/app/components/asset/asset.component.scss b/frontend/src/app/components/asset/asset.component.scss index 6f8bc0915..56b1d6258 100644 --- 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; diff --git 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 index ed531e63d..5d8c286d3 100644 --- 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; diff --git 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 index b73d55685..ec3aeadc8 100644 --- 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; diff --git 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 index 7b8154bae..992906e5c 100644 --- 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; 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 507d4c18d..2125c3128 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 @@ -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); diff --git 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 index 7b8154bae..992906e5c 100644 --- 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; diff --git 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 index 7b8154bae..992906e5c 100644 --- 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; diff --git a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss index 269fdab42..b11a35513 100644 --- 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 { diff --git a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts index 1d0e284f8..1a7598079 100644 --- 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)", }; } diff --git a/frontend/src/app/components/blockchain/blockchain.component.scss b/frontend/src/app/components/blockchain/blockchain.component.scss index b0a589a04..4da3746e4 100644 --- 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; diff --git a/frontend/src/app/components/clock/clock.component.ts b/frontend/src/app/components/clock/clock.component.ts index 90f24a753..4a9b19e78 100644 --- 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% )`, diff --git a/frontend/src/app/components/difficulty-mining/difficulty-mining.component.scss b/frontend/src/app/components/difficulty-mining/difficulty-mining.component.scss index 77f54f267..bd396928f 100644 --- 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; diff --git a/frontend/src/app/components/difficulty/difficulty-tooltip.component.scss b/frontend/src/app/components/difficulty/difficulty-tooltip.component.scss index 5b4a8a02f..e4fd989af 100644 --- 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; diff --git a/frontend/src/app/components/difficulty/difficulty.component.html b/frontend/src/app/components/difficulty/difficulty.component.html index c9b3d183b..e9bf36515 100644 --- a/frontend/src/app/components/difficulty/difficulty.component.html +++ b/frontend/src/app/components/difficulty/difficulty.component.html @@ -15,8 +15,8 @@ - - + + diff --git a/frontend/src/app/components/difficulty/difficulty.component.scss b/frontend/src/app/components/difficulty/difficulty.component.scss index d10b800a8..8de7fae2c 100644 --- 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; } diff --git a/frontend/src/app/components/fees-box/fees-box.component.scss b/frontend/src/app/components/fees-box/fees-box.component.scss index 0272936ee..c5843f58b 100644 --- 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%; diff --git a/frontend/src/app/components/fees-box/fees-box.component.ts b/frontend/src/app/components/fees-box/fees-box.component.ts index e923b26e9..78fd102ca 100644 --- 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; recommendedFees$: Observable; 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( diff --git a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss index dc19dc9d1..b6b49eed2 100644 --- 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; diff --git 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 index 64a4dcb3d..a2e3b8866 100644 --- 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; diff --git a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss index 660ad6f54..5f7b15092 100644 --- 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 { diff --git a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss index a7948b40e..f1c49c9e7 100644 --- 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; diff --git a/frontend/src/app/components/rbf-timeline/rbf-timeline-tooltip.component.scss b/frontend/src/app/components/rbf-timeline/rbf-timeline-tooltip.component.scss index cd31aa562..eeb40a52d 100644 --- 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; diff --git a/frontend/src/app/components/rbf-timeline/rbf-timeline.component.scss b/frontend/src/app/components/rbf-timeline/rbf-timeline.component.scss index 6803e82ae..1026d6ea9 100644 --- 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 { diff --git a/frontend/src/app/components/transactions-list/transactions-list.component.scss b/frontend/src/app/components/transactions-list/transactions-list.component.scss index 2bae3de2c..7efe0ef11 100644 --- 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 { diff --git 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 index 0c973ad00..dfb429096 100644 --- 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); diff --git 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 index 30e85a6e7..f371fdf0a 100644 --- 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 = 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, diff --git a/frontend/src/app/dashboard/dashboard.component.scss b/frontend/src/app/dashboard/dashboard.component.scss index 84eabead2..9ad09981f 100644 --- a/frontend/src/app/dashboard/dashboard.component.scss +++ b/frontend/src/app/dashboard/dashboard.component.scss @@ -301,7 +301,8 @@ .main-title { position: relative; - color: #ffffff91; + color: var(--fg); + opacity: var(--opacity); margin-top: -13px; font-size: 10px; text-transform: uppercase; @@ -435,7 +436,8 @@ .in-progress-message { position: relative; - color: #ffffff91; + color: var(--fg); + opacity: var(--opacity); margin-top: 20px; text-align: center; padding-bottom: 3px; diff --git a/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.scss b/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.scss index 7fb011146..f125b30c1 100644 --- a/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.scss +++ b/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.scss @@ -66,7 +66,8 @@ .main-title { position: relative; - color: #ffffff91; + color: var(--fg); + opacity: var(--opacity); margin-top: -13px; font-size: 10px; text-transform: uppercase; diff --git a/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.scss b/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.scss index ab8cb92da..a747586ad 100644 --- a/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.scss +++ b/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-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; diff --git a/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.scss b/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.scss index 1779394c9..165c513e5 100644 --- a/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.scss +++ b/frontend/src/app/lightning/statistics-chart/lightning-statistics-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; diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index 1825bbe6a..12783a332 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -64,7 +64,6 @@ $dropdown-link-active-bg: $active-bg; --active-bg: #{$active-bg}; --hover-bg: #{$hover-bg}; --fg: #{$fg}; - --color-fg: #ffffff; --title-fg: #{$title-fg}; --primary: #{$primary}; @@ -72,9 +71,11 @@ $dropdown-link-active-bg: $active-bg; --tertiary: #{$tertiary}; --success: #{$success}; --info: #{$info}; - --link-color: #{$info}; + --link-color: #{$link-color}; --link-hover-color: #{$link-hover-color}; --icon: #f1f1f1; + --skeleton-bg: #2e324e; + --skeleton-bg-light: #5d6182; --box-bg: #24273e; --stat-box-bg: #181b2d; @@ -83,6 +84,7 @@ $dropdown-link-active-bg: $active-bg; --transparent-fg: #ffffff66; --fade-out-box-bg-start: rgba(36, 39, 62, 0); --fade-out-box-bg-end: rgba(36, 39, 62, 1); + --opacity: 0.57; --testnet: #1d486f; --signet: #6f1d5d; @@ -100,7 +102,7 @@ $dropdown-link-active-bg: $active-bg; --green: #3bcc49; --red: #dc3545; - --yellow: #ffd800; + --yellow: #fff000; --grey: #6c757d; --tooltip-grey: #b1b1b1; --orange: #b86d12; @@ -173,13 +175,13 @@ main { } .form-control { - color: #fff; + color: var(--fg); background-color: var(--secondary); border: 1px solid rgba(17, 19, 31, 0.2); } .form-control:focus { - color: #fff; + color: var(--fg); background-color: var(--secondary); } @@ -208,7 +210,7 @@ main { } .form-control.form-control-secondary { - color: var(--fg); + color: #fff; background-color: var(--secondary); border: 1px solid var(--secondary); } @@ -231,11 +233,11 @@ main { position: relative; animation: progress 2s ease-in-out infinite; - background: #2e324e no-repeat; + background: var(--skeleton-bg) no-repeat; background-image: linear-gradient( 90deg, rgba(255, 255, 255, 0), - #5d6182, + var(--skeleton-bg-light), rgba(255, 255, 255, 0) ); background-size: 200px 100%; @@ -273,14 +275,14 @@ main { .progress-text { span { - color: var(--fg) !important; + color: #fff !important; } } .block-size, .blocks-container { .symbol { font-size: 16px; - color: var(--fg) !important; + color: #fff !important; } } @@ -420,18 +422,18 @@ html:lang(ru) .card-title { font-size: 12px; font-weight: 700; margin-bottom: 2px; - color: var(--fg); + color: #fff; .total-value { float: right; } } .active { - color: yellow !important; + color: var(--yellow) !important; .value, .total-partial { - color: yellow !important; + color: var(--yellow) !important; .symbol { - color: yellow !important; + color: var(--yellow) !important; } } } @@ -479,7 +481,7 @@ html:lang(ru) .card-title { .total-label { width: 100%; text-align: left; - color: var(--fg); + color: #fff; margin-top: 5px; font-size: 14px; span { @@ -730,19 +732,19 @@ h1, h2, h3 { } .progress-mempool { - background: repeating-linear-gradient(to right, $secondary, $secondary 0%, $primary 0%, var(--mainnet-alt) 100%); + background: repeating-linear-gradient(to right, var(--secondary), var(--secondary) 0%, var(--primary) 0%, var(--mainnet-alt) 100%); } .progress-mempool.testnet { - background: repeating-linear-gradient(to right, $secondary, $secondary 0%, var(--testnet) 0%, var(--testnet-alt) 100%); + background: repeating-linear-gradient(to right, var(--secondary), var(--secondary) 0%, var(--testnet) 0%, var(--testnet-alt) 100%); } .progress-mempool.signet { - background: repeating-linear-gradient(to right, $secondary, $secondary 0%, var(--signet) 0%, var(--signet-alt) 100%); + background: repeating-linear-gradient(to right, var(--secondary), var(--secondary) 0%, var(--signet) 0%, var(--signet-alt) 100%); } .progress-mempool.liquid { - background: repeating-linear-gradient(to right, $secondary, $secondary 0%, var(--liquid) 0%, var(--testnet-alt) 100%); + background: repeating-linear-gradient(to right, var(--secondary), var(--secondary) 0%, var(--liquid) 0%, var(--testnet-alt) 100%); } .progress-dark { @@ -754,11 +756,11 @@ h1, h2, h3 { } .progress-light { - background-color: #2e324e; + background-color: var(--skeleton-bg); } .progress.progress-health { - background: repeating-linear-gradient(to right, $secondary, $secondary 0%, $primary 0%, $success 100%); + background: repeating-linear-gradient(to right, var(--secondary), var(--secondary) 0%, var(--primary) 0%, $success 100%); justify-content: flex-end; } @@ -771,7 +773,7 @@ h1, h2, h3 { } .alert-mempool { - color: var(--fg); + color: #fff; background-color: var(--tertiary); border-color: var(--alert-bg); width: 100%; @@ -1139,7 +1141,7 @@ th { display: block; width: 100%; padding: 1rem 2rem; - color: var(--fg); + color: #fff; font-weight: bold; &:focus, &:hover, &:active { text-decoration: none; @@ -1223,7 +1225,7 @@ th { } .blink-bg { - color: var(--fg); + color: #fff; background: repeating-linear-gradient($taproot-dark, $taproot-dark 0.163525%, $taproot-light 100%) !important; animation: shadowyBackground 1s infinite; box-shadow: -10px -15px 75px rgba($taproot, 1); @@ -1246,7 +1248,7 @@ app-master-page, app-liquid-master-page { display: flex; flex-direction: column; min-height: 100vh; - padding-bottom: 60px; + padding-bottom: 56px; @media (min-width: 992px) { padding-bottom: 0px; } @@ -1270,8 +1272,10 @@ app-global-footer { .dropdown-menu { background-color: var(--bg); + color: var(--fg); .dropdown-item:hover, .dropdown-item:focus { background-color: var(--active-bg); + color: var(--fg); } } @@ -1285,4 +1289,13 @@ a { &:hover { color: var(--link-hover-color); } -} \ No newline at end of file +} + +.badge-primary { + color: var(--fg); + background-color: var(--primary); +} + +.badge-info { + background-color: var(--info); +} diff --git a/frontend/src/theme-contrast.scss b/frontend/src/theme-contrast.scss index 9b8af4528..a3faddaef 100644 --- a/frontend/src/theme-contrast.scss +++ b/frontend/src/theme-contrast.scss @@ -61,7 +61,6 @@ $dropdown-link-active-bg: $active-bg; --active-bg: #{$active-bg}; --hover-bg: #{$hover-bg}; --fg: #{$fg}; - --color-fg: #fff; --title-fg: #{$title-fg}; --primary: #{$primary}; @@ -69,17 +68,20 @@ $dropdown-link-active-bg: $active-bg; --tertiary: #{$tertiary}; --success: #{$success}; --info: #{$info}; - --link-color: #{$info}; + --link-color: #{$link-color}; --link-hover-color: #{$link-hover-color}; --icon: #f1f1f1; + --skeleton-bg: #2e324e; + --skeleton-bg-light: #5d6182; --box-bg: #171c2a; --stat-box-bg: #0b1018; --alert-bg: #3a1c61; - --navbar-bg: #212121; + --navbar-bg: #121212; --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.9; --testnet: #1d486f; --signet: #6f1d5d; @@ -97,7 +99,7 @@ $dropdown-link-active-bg: $active-bg; --green: #83fd00; --red: #ff3d00; - --yellow: #ffcc00; + --yellow: #fff000; --grey: #7e7e7e; --tooltip-grey: #b1b1b1; --orange: #ff9f00; diff --git a/frontend/src/theme-wiz.scss b/frontend/src/theme-wiz.scss index 9b8af4528..f46576c11 100644 --- a/frontend/src/theme-wiz.scss +++ b/frontend/src/theme-wiz.scss @@ -61,7 +61,6 @@ $dropdown-link-active-bg: $active-bg; --active-bg: #{$active-bg}; --hover-bg: #{$hover-bg}; --fg: #{$fg}; - --color-fg: #fff; --title-fg: #{$title-fg}; --primary: #{$primary}; @@ -69,17 +68,20 @@ $dropdown-link-active-bg: $active-bg; --tertiary: #{$tertiary}; --success: #{$success}; --info: #{$info}; - --link-color: #{$info}; + --link-color: #{$link-color}; --link-hover-color: #{$link-hover-color}; --icon: #f1f1f1; + --skeleton-bg: #2e324e; + --skeleton-bg-light: #5d6182; --box-bg: #171c2a; --stat-box-bg: #0b1018; --alert-bg: #3a1c61; - --navbar-bg: #212121; + --navbar-bg: #121212; --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.57; --testnet: #1d486f; --signet: #6f1d5d; @@ -97,7 +99,7 @@ $dropdown-link-active-bg: $active-bg; --green: #83fd00; --red: #ff3d00; - --yellow: #ffcc00; + --yellow: #fff000; --grey: #7e7e7e; --tooltip-grey: #b1b1b1; --orange: #ff9f00; From a7e501570ccabf37d7eda9e6546b89d90ea26663 Mon Sep 17 00:00:00 2001 From: natsoni Date: Fri, 26 Apr 2024 16:05:51 +0200 Subject: [PATCH 3/7] Add El Salvador theme --- frontend/angular.json | 5 + .../theme-selector.component.html | 1 + .../theme-selector.component.ts | 2 +- frontend/src/theme-bukele.scss | 106 ++++++++++++++++++ 4 files changed, 113 insertions(+), 1 deletion(-) create mode 100644 frontend/src/theme-bukele.scss diff --git a/frontend/angular.json b/frontend/angular.json index 46cc3f667..190982225 100644 --- a/frontend/angular.json +++ b/frontend/angular.json @@ -181,6 +181,11 @@ "bundleName": "wiz", "inject": false }, + { + "input": "src/theme-bukele.scss", + "bundleName": "bukele", + "inject": false + }, "node_modules/@fortawesome/fontawesome-svg-core/styles.css" ], "vendorChunk": true, 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 9bacaa08b..ecb96a99c 100644 --- 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 @@ + 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 57cbee865..be207910c 100644 --- 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( diff --git a/frontend/src/theme-bukele.scss b/frontend/src/theme-bukele.scss new file mode 100644 index 000000000..e9124194e --- /dev/null +++ b/frontend/src/theme-bukele.scss @@ -0,0 +1,106 @@ +/* Theme */ +$bg: #1c1e4d; +$active-bg: #313945; +$hover-bg: #E5E5E5; +$fg: #FFFFFF; +$title-fg: #c9a892; + +$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: #343992; +$secondary: #32345e; +$tertiary: #a08674; +$success: #009900; +$info: #e4d3c8; + +$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}; + --title-fg: #{$title-fg}; + + --primary: #{$primary}; + --secondary: #{$secondary}; + --tertiary: #{$tertiary}; + --success: #{$success}; + --info: #{$info}; + --link-color: #{$link-color}; + --link-hover-color: #{$link-hover-color}; + --icon: #f1f1f1; + --skeleton-bg: #2e324e; + --skeleton-bg-light: #5d6182; + + --box-bg: #15173a; + --stat-box-bg: #0e0f28; + --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; + + --testnet: #1d486f; + --signet: #6f1d5d; + --liquid: #116761; + --liquidtestnet: #494a4a; + + --mainnet-alt: #a08674; + --testnet-alt: #183550; + --signet-alt: #471850; + --liquidtestnet-alt: #272e46; + + --taproot: #eba814; + --taproot-light: #d5a90a; + --taproot-dark: #9d7c05; + + --green: #83fd00; + --red: #ff3d00; + --yellow: #fff000; + --grey: #7e7e7e; + --tooltip-grey: #b1b1b1; + --orange: #ff9f00; +} From 463e66081c0d30e0d6e4db67e0e6623dd5881e53 Mon Sep 17 00:00:00 2001 From: natsoni Date: Fri, 26 Apr 2024 16:59:25 +0200 Subject: [PATCH 4/7] 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; } From 4c697d000802decca827b41d8f1b905aaaf7a7ea Mon Sep 17 00:00:00 2001 From: Mononaut Date: Tue, 7 May 2024 22:42:06 +0000 Subject: [PATCH 5/7] Update onbtc theme & branding --- frontend/custom-sv-config.json | 8 +- .../liquid-master-page.component.scss | 5 +- .../master-page-preview.component.html | 2 +- .../master-page-preview.component.scss | 3 +- .../master-page/master-page.component.html | 54 +- .../master-page/master-page.component.scss | 5 +- frontend/src/app/services/state.service.ts | 4 +- .../global-footer.component.html | 36 +- .../global-footer/global-footer.component.ts | 15 +- frontend/src/index.sv.html | 2 +- frontend/src/resources/elsalvador.svg | 27 +- frontend/src/resources/onbtc.svg | 112 +-- frontend/src/resources/onbtclogo.svg | 678 ++++++++++++++++++ frontend/src/theme-bukele.scss | 64 +- frontend/src/theme-contrast.scss | 3 +- frontend/src/theme-wiz.scss | 3 +- 16 files changed, 829 insertions(+), 192 deletions(-) create mode 100644 frontend/src/resources/onbtclogo.svg diff --git a/frontend/custom-sv-config.json b/frontend/custom-sv-config.json index f64f41be8..7a62d1ec5 100644 --- a/frontend/custom-sv-config.json +++ b/frontend/custom-sv-config.json @@ -1,12 +1,12 @@ { - "theme": "contrast", + "theme": "bukele", "enterprise": "onbtc", "branding": { "name": "onbtc", - "title": "Oficina Nacional del Bitcoin", + "title": "Bitcoin Office", "site_id": 19, - "header_img": "/resources/onbtc.svg", - "img": "/resources/elsalvador.svg", + "header_img": "/resources/onbtclogo.svg", + "footer_img": "/resources/onbtclogo.svg", "rounded_corner": true }, "dashboard": { diff --git 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 index b0f3ce9c6..17bc8aeb5 100644 --- 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; diff --git 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 index 49efce400..8f3204ec4 100644 --- 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 @@ } @if (enterpriseInfo?.header_img) { - enterpriseInfo.title + enterpriseInfo.title } @else { diff --git 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 index fb0fd5c24..bb2e5b706 100644 --- 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; } diff --git a/frontend/src/app/components/master-page/master-page.component.html b/frontend/src/app/components/master-page/master-page.component.html index 18fbeac68..169dd24a3 100644 --- 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 @@ - -
- -
-
- @if (enterpriseInfo?.header_img) { - enterpriseInfo.title + enterpriseInfo.title } @else { + +
+ +
+
+ } @@ -38,24 +38,28 @@ - -
- -
-
- - - @if (enterpriseInfo?.header_img) { - enterpriseInfo.title - } @else { - - - } -
-
Offline
-
Reconnecting...
-
- + @if (enterpriseInfo?.header_img) { + enterpriseInfo.title + } @else { + +
+ +
+
+ + + @if (enterpriseInfo?.header_img) { + enterpriseInfo.title + } @else { + + + } +
+
Offline
+
Reconnecting...
+
+ + }
diff --git a/frontend/src/app/components/master-page/master-page.component.scss b/frontend/src/app/components/master-page/master-page.component.scss index 8704d193a..6bd4fd821 100644 --- 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; diff --git a/frontend/src/app/services/state.service.ts b/frontend/src/app/services/state.service.ts index 36fdf0b03..be44716d8 100644 --- a/frontend/src/app/services/state.service.ts +++ b/frontend/src/app/services/state.service.ts @@ -27,7 +27,9 @@ export interface Customization { name: string; site_id?: number; title: string; - img: string; + img?: string; + header_img?: string; + footer_img?: string; rounded_corner: boolean; }, dashboard: { diff --git a/frontend/src/app/shared/components/global-footer/global-footer.component.html b/frontend/src/app/shared/components/global-footer/global-footer.component.html index 5b0fd77b9..a14076022 100644 --- a/frontend/src/app/shared/components/global-footer/global-footer.component.html +++ b/frontend/src/app/shared/components/global-footer/global-footer.component.html @@ -4,13 +4,19 @@
-

- Explore the full Bitcoin ecosystem - ® -

+ @if (!enterpriseInfo?.footer_img) { +

+ Explore the full Bitcoin ecosystem + ® +

+ }
@@ -32,14 +38,16 @@
- -

- Explore the full Bitcoin ecosystem - ® -

+ @if (!enterpriseInfo?.footer_img) { + +

+ Explore the full Bitcoin ecosystem + ® +

+ }
diff --git a/frontend/src/app/shared/components/global-footer/global-footer.component.ts b/frontend/src/app/shared/components/global-footer/global-footer.component.ts index a0ab07401..469a12076 100644 --- a/frontend/src/app/shared/components/global-footer/global-footer.component.ts +++ b/frontend/src/app/shared/components/global-footer/global-footer.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit, Inject, LOCALE_ID, HostListener } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit, Inject, LOCALE_ID, HostListener, OnDestroy } from '@angular/core'; import { Router, ActivatedRoute } from '@angular/router'; import { Observable, merge, of, Subject, Subscription } from 'rxjs'; import { tap, takeUntil } from 'rxjs/operators'; @@ -8,6 +8,7 @@ import { LanguageService } from '../../../services/language.service'; import { NavigationService } from '../../../services/navigation.service'; import { StorageService } from '../../../services/storage.service'; import { WebsocketService } from '../../../services/websocket.service'; +import { EnterpriseService } from '../../../services/enterprise.service'; @Component({ selector: 'app-global-footer', @@ -15,7 +16,7 @@ import { WebsocketService } from '../../../services/websocket.service'; styleUrls: ['./global-footer.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, }) -export class GlobalFooterComponent implements OnInit { +export class GlobalFooterComponent implements OnInit, OnDestroy { private destroy$: Subject = new Subject(); env: Env; officialMempoolSpace = this.stateService.env.OFFICIAL_MEMPOOL_SPACE; @@ -32,10 +33,14 @@ export class GlobalFooterComponent implements OnInit { urlSubscription: Subscription; isServicesPage = false; + enterpriseInfo: any; + enterpriseInfo$: Subscription; + constructor( public stateService: StateService, private languageService: LanguageService, private navigationService: NavigationService, + private enterpriseService: EnterpriseService, @Inject(LOCALE_ID) public locale: string, private storageService: StorageService, private route: ActivatedRoute, @@ -54,6 +59,9 @@ export class GlobalFooterComponent implements OnInit { this.navigationService.subnetPaths.subscribe((paths) => { this.networkPaths = paths; }); + this.enterpriseInfo$ = this.enterpriseService.info$.subscribe(info => { + this.enterpriseInfo = info; + }); this.network$ = merge(of(''), this.stateService.networkChanged$).pipe( tap((network: string) => { return network; @@ -73,6 +81,9 @@ export class GlobalFooterComponent implements OnInit { this.destroy$.next(true); this.destroy$.complete(); this.urlSubscription.unsubscribe(); + if (this.enterpriseInfo$) { + this.enterpriseInfo$.unsubscribe(); + } } networkLink(network) { diff --git a/frontend/src/index.sv.html b/frontend/src/index.sv.html index a18c1d7fe..58cfd179b 100644 --- a/frontend/src/index.sv.html +++ b/frontend/src/index.sv.html @@ -3,7 +3,7 @@ - Oficina Nacional del Bitcoin - Bitcoin Explorer + Bitcoin Office - Explorer diff --git a/frontend/src/resources/elsalvador.svg b/frontend/src/resources/elsalvador.svg index eb2aff426..fc5a59185 100644 --- a/frontend/src/resources/elsalvador.svg +++ b/frontend/src/resources/elsalvador.svg @@ -1,37 +1,12 @@ - - - - - + transform="translate(-15.744428,-40.187135)"> + d="m 17.787525,49.237549 c 0,1.063761 -0.270162,1.384578 -1.65474,1.384578 h -0.388357 v 0.320817 h 6.179946 c 2.718501,0 3.647182,-1.874246 3.647182,-3.208169 0,-1.317038 -0.928681,-2.347029 -2.51588,-2.819812 v -0.03377 c 1.131301,-0.202621 1.924901,-1.097532 1.924901,-2.059982 0,-0.810485 -0.337702,-1.384578 -1.029991,-1.874246 -0.607864,-0.439013 -1.908016,-0.658519 -3.393905,-0.658519 -0.320817,0 -1.604084,0.01689 -2.532765,0.05065 -0.489668,0.01689 -1.65474,0.08443 -2.127522,0.101311 v 0.320817 h 0.590978 c 1.181957,0 1.300153,0.506553 1.300153,1.469003 z m 1.401463,-8.577631 c 0.422127,-0.01688 1.114417,-0.05065 1.485889,-0.05065 2.076867,0 2.786041,1.080646 2.786041,2.262603 0,1.317038 -0.810485,1.958672 -2.431454,1.958672 h -1.840476 z m 0,4.491436 h 1.823591 c 1.975556,0 2.971777,1.333923 2.971777,2.634076 0,1.317038 -0.641634,2.701616 -2.870467,2.701616 -1.418348,0 -1.924901,-0.455898 -1.924901,-1.739165 z" /> + d="m 31.329346,50.622127 c -1.165072,0 -1.435233,-0.337702 -1.435233,-1.333923 v -7.159282 c 0,-1.131302 0.371472,-1.367693 1.435233,-1.367693 v -0.320817 h -4.103079 v 0.320817 c 0.945565,0.05065 1.266382,0.303931 1.266382,1.215727 v 7.193052 c 0,1.131302 -0.219506,1.401463 -1.266382,1.452119 v 0.320817 h 4.103079 z" /> + d="m 38.505484,41.048275 h 2.938008 c 0.675404,0 0.979335,0.388358 1.232612,1.874246 h 0.303932 l -0.270162,-2.735386 h -0.320817 c -0.03377,0.202621 -0.287046,0.253277 -0.523438,0.253277 h -8.121733 c -0.118195,0 -0.236391,-0.01689 -0.337702,-0.05066 -0.10131,-0.03377 -0.168851,-0.10131 -0.185736,-0.202621 h -0.320817 l -0.270161,2.735386 h 0.303932 c 0.253276,-1.485888 0.557208,-1.874246 1.232612,-1.874246 h 2.938007 v 8.341239 c 0,0.911796 -0.303932,1.232613 -1.333923,1.232613 H 35.14535 v 0.320817 h 5.318806 v -0.320817 h -0.624749 c -1.029991,0 -1.333923,-0.320817 -1.333923,-1.232613 z" /> + d="m 54.732034,43.209568 -0.151966,-2.448339 h -0.253277 c -0.03377,0.05065 -0.118196,0.10131 -0.303932,0.10131 -0.523438,0 -1.435233,-0.675404 -3.562756,-0.675404 -3.528985,0 -6.06175,2.363914 -6.06175,5.639623 0,3.123744 2.465224,5.386347 5.892899,5.386347 1.992442,0 2.735387,-0.607863 3.816033,-0.455898 0.405242,-0.658518 0.86114,-1.705395 1.080646,-2.465224 h -0.320817 c -1.148186,2.043097 -2.786041,2.498995 -4.119964,2.498995 -2.566535,0 -4.761598,-2.245719 -4.761598,-5.301922 0,-2.836696 1.75605,-4.879793 4.575862,-4.879793 1.840476,0 3.292594,1.029991 3.849803,2.600305 z" /> + d="m 68.83106,45.404631 c 0,-3.039318 -2.735386,-5.217496 -5.92667,-5.217496 -3.596526,0 -6.179946,2.380799 -6.179946,5.740934 0,3.157514 2.786041,5.285036 6.095521,5.285036 3.275709,0 6.011095,-2.397684 6.011095,-5.808474 z m -1.587199,0.557208 c 0,2.397684 -1.317038,4.829139 -4.069309,4.829139 -2.718501,0 -4.862909,-2.228833 -4.862909,-5.386347 0,-2.026212 1.181957,-4.795368 4.153735,-4.795368 2.786041,0 4.778483,2.211948 4.778483,5.352576 z" /> + d="m 74.588877,50.622127 c -1.165072,0 -1.435233,-0.337702 -1.435233,-1.333923 v -7.159282 c 0,-1.131302 0.371472,-1.367693 1.435233,-1.367693 v -0.320817 h -4.103079 v 0.320817 c 0.945565,0.05065 1.266382,0.303931 1.266382,1.215727 v 7.193052 c 0,1.131302 -0.219506,1.401463 -1.266382,1.452119 v 0.320817 h 4.103079 z" /> + d="m 87.252675,51.061139 v -9.421885 c 0,-0.658519 0.270161,-0.878025 1.536544,-0.878025 v -0.320817 h -3.951114 v 0.320817 c 1.350808,0.03377 1.65474,0.219506 1.65474,1.249497 v 6.72027 l -7.952882,-8.290584 h -2.65096 v 0.320817 c 0.590978,0.01689 1.029991,0.151966 1.418348,0.422127 v 8.307469 c 0,0.776715 -0.337702,1.131302 -1.384578,1.131302 h -0.06754 v 0.320817 h 3.917343 v -0.320817 c -1.435234,0 -1.705395,-0.253277 -1.705395,-1.469004 v -7.243708 l 8.746481,9.151724 z" /> + d="m 27.851044,62.280894 c 0,-3.039318 -2.735386,-5.217496 -5.92667,-5.217496 -3.596526,0 -6.179946,2.380799 -6.179946,5.740934 0,3.157513 2.786041,5.285036 6.095521,5.285036 3.275709,0 6.011095,-2.397684 6.011095,-5.808474 z m -1.587199,0.557208 c 0,2.397684 -1.317038,4.829138 -4.069309,4.829138 -2.718501,0 -4.862909,-2.228833 -4.862909,-5.386346 0,-2.026212 1.181957,-4.795369 4.153735,-4.795369 2.786041,0 4.778483,2.211948 4.778483,5.352577 z" /> + d="m 36.749491,60.81189 h -0.287047 c -0.05065,0.726059 -0.354587,1.080646 -0.979336,1.080646 h -3.343249 v -3.967998 h 3.208168 c 1.046877,0 1.384579,0.405242 1.401464,1.384578 h 0.287046 v -1.992442 h -7.564524 v 0.320817 c 1.181957,0.01689 1.266382,0.506553 1.266382,1.5872 v 6.618959 c 0,1.367693 -0.185736,1.587199 -1.232612,1.654739 v 0.320817 h 4.103079 v -0.320817 c -1.266382,0 -1.469003,-0.354587 -1.469003,-1.300152 V 62.5004 h 3.123743 c 0.810485,0 1.165072,0.303932 1.198842,1.283267 h 0.287047 z" /> + d="m 45.715447,60.81189 h -0.287046 c -0.05066,0.726059 -0.354587,1.080646 -0.979336,1.080646 h -3.34325 v -3.967998 h 3.208169 c 1.046876,0 1.384578,0.405242 1.401463,1.384578 h 0.287047 V 57.316674 H 38.43797 v 0.320817 c 1.181956,0.01689 1.266382,0.506553 1.266382,1.5872 v 6.618959 c 0,1.367693 -0.185736,1.587199 -1.232612,1.654739 v 0.320817 h 4.103079 v -0.320817 c -1.266383,0 -1.469004,-0.354587 -1.469004,-1.300152 V 62.5004 h 3.123744 c 0.810484,0 1.165071,0.303932 1.198842,1.283267 h 0.287046 z" /> + d="m 51.540777,67.498389 c -1.165072,0 -1.435234,-0.337702 -1.435234,-1.333923 v -7.159282 c 0,-1.131301 0.371472,-1.367693 1.435234,-1.367693 v -0.320817 h -4.10308 v 0.320817 c 0.945566,0.05066 1.266383,0.303932 1.266383,1.215727 v 7.193053 c 0,1.131301 -0.219506,1.401463 -1.266383,1.452118 v 0.320817 h 4.10308 z" /> + d="m 63.512285,60.085831 -0.151966,-2.44834 h -0.253276 c -0.03377,0.05066 -0.118196,0.101311 -0.303932,0.101311 -0.523438,0 -1.435234,-0.675404 -3.562756,-0.675404 -3.528986,0 -6.061751,2.363914 -6.061751,5.639623 0,3.123744 2.465225,5.386347 5.8929,5.386347 1.992442,0 2.735386,-0.607864 3.816032,-0.455898 0.405243,-0.658519 0.86114,-1.705395 1.080647,-2.465224 h -0.320817 c -1.148187,2.043097 -2.786042,2.498994 -4.119964,2.498994 -2.566535,0 -4.761598,-2.245718 -4.761598,-5.301921 0,-2.836697 1.75605,-4.879794 4.575862,-4.879794 1.840475,0 3.292594,1.029991 3.849802,2.600306 z" /> - - - - - - - - - - - - + d="m 72.444469,60.81189 h -0.320817 c -0.08443,0.979336 -0.371472,1.266382 -0.979335,1.266382 h -3.022433 v -4.153734 h 3.562756 c 0.607863,0 1.029991,0.303932 1.249497,1.739165 h 0.303932 L 73.102988,57.316674 H 64.99814 v 0.320817 h 0.371473 c 1.131301,0 1.350808,0.405243 1.350808,1.350808 v 7.125512 c 0,1.013106 -0.236392,1.384578 -1.5872,1.384578 h -0.472783 v 0.320817 h 8.965988 l 0.270162,-2.51588 h -0.303932 c -0.422127,1.452119 -0.776715,1.908017 -1.958671,1.908017 h -2.600306 c -0.624748,0 -0.911795,-0.151966 -0.911795,-0.928681 v -3.596526 h 2.853582 c 0.692289,0 1.013106,0.135081 1.148186,1.333923 h 0.320817 z" /> diff --git a/frontend/src/resources/onbtclogo.svg b/frontend/src/resources/onbtclogo.svg new file mode 100644 index 000000000..c07b7661b --- /dev/null +++ b/frontend/src/resources/onbtclogo.svg @@ -0,0 +1,678 @@ + + diff --git a/frontend/src/theme-bukele.scss b/frontend/src/theme-bukele.scss index e81058dab..afb2d2e76 100644 --- a/frontend/src/theme-bukele.scss +++ b/frontend/src/theme-bukele.scss @@ -1,9 +1,10 @@ /* Theme */ -$bg: #313945; +$bg: #11131f; $active-bg: #000000; -$hover-bg: #E5E5E5; -$fg: #ffffff; -$title-fg: #c19a81; +$hover-bg: #12131e; +$fg: #d2d2d2; +$nav-bg: #111e60; +$title-fg: #2055e3; $taproot: #eba814; $taproot-light: #d5a90a; @@ -18,10 +19,10 @@ $gray-700: $fg; $nav-tabs-link-active-bg: $active-bg; $primary: #007cfa; -$secondary: #1c1e4d; -$tertiary: #8c7566; -$success: #009900; -$info: #dac3b4; +$secondary: #272f4e; +$tertiary: #ff9900; +$success: #0aab2f; +$info: #00ddff; $h5-font-size: 1.15rem !default; @@ -61,6 +62,7 @@ $dropdown-link-active-bg: $active-bg; --active-bg: #{$active-bg}; --hover-bg: #{$hover-bg}; --fg: #{$fg}; + --nav-bg: #{$nav-bg}; --title-fg: #{$title-fg}; --primary: #{$primary}; @@ -70,25 +72,24 @@ $dropdown-link-active-bg: $active-bg; --info: #{$info}; --link-color: #{$link-color}; --link-hover-color: #{$link-hover-color}; - --icon: #f1f1f1; + --icon: #d2d2d2; --skeleton-bg: #2e324e; --skeleton-bg-light: #5d6182; - --box-bg: #272d37; - --stat-box-bg: #1c2027; + --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); - --opacity: 0.57; + --opacity: 0.9; --testnet: #1d486f; --signet: #6f1d5d; --liquid: #116761; --liquidtestnet: #494a4a; - --mainnet-alt: #a08674; + --mainnet-alt: #9339f4; --testnet-alt: #183550; --signet-alt: #471850; --liquidtestnet-alt: #272e46; @@ -104,8 +105,35 @@ $dropdown-link-active-bg: $active-bg; --tooltip-grey: #b1b1b1; --orange: #ff9f00; - --search-button: #645449; - --search-button-border: #605046; - --search-button-focus: #786457; - --search-button-shadow: #a0867480; + --search-button: #d5a90a; + --search-button-border: #d5a90a; + --search-button-focus: #eba814; + --search-button-shadow: #eba814; } + +.navbar { + --secondary: #041437; +} + +.nav-item.active, .btn-purple { + --icon: white; +} + +.btn-purple:not(:disabled):not(.disabled):active, .btn-purple:not(:disabled):not(.disabled).active, .show > .btn-purple.dropdown-toggle { + color: #fff; + background-color: var(--search-button); + border-color: var(--search-button-border); +} + +.btn-purple:focus, .btn-purple.focus { + color: #fff; + 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: var(--search-button-focus); + border-color: var(--search-button); +} \ No newline at end of file diff --git a/frontend/src/theme-contrast.scss b/frontend/src/theme-contrast.scss index 61188a361..6d80f1edb 100644 --- a/frontend/src/theme-contrast.scss +++ b/frontend/src/theme-contrast.scss @@ -3,6 +3,7 @@ $bg: #11131f; $active-bg: #000000; $hover-bg: #12131e; $fg: #fff; +$nav-bg: $bg; $title-fg: #2055e3; $taproot: #eba814; @@ -61,6 +62,7 @@ $dropdown-link-active-bg: $active-bg; --active-bg: #{$active-bg}; --hover-bg: #{$hover-bg}; --fg: #{$fg}; + --nav-bg: #{$nav-bg}; --title-fg: #{$title-fg}; --primary: #{$primary}; @@ -77,7 +79,6 @@ $dropdown-link-active-bg: $active-bg; --box-bg: #171c2a; --stat-box-bg: #0b1018; --alert-bg: #3a1c61; - --navbar-bg: #121212; --transparent-fg: #ffffffbb; --fade-out-box-bg-start: rgba(23, 28, 42, 0); --fade-out-box-bg-end: rgba(23, 28, 42, 1); diff --git a/frontend/src/theme-wiz.scss b/frontend/src/theme-wiz.scss index d560a6575..2dd5eb67b 100644 --- a/frontend/src/theme-wiz.scss +++ b/frontend/src/theme-wiz.scss @@ -3,6 +3,7 @@ $bg: #11131f; $active-bg: #000000; $hover-bg: #12131e; $fg: #fff; +$nav-bg: $bg; $title-fg: #2055e3; $taproot: #eba814; @@ -61,6 +62,7 @@ $dropdown-link-active-bg: $active-bg; --active-bg: #{$active-bg}; --hover-bg: #{$hover-bg}; --fg: #{$fg}; + --nav-bg: #{$nav-bg}; --title-fg: #{$title-fg}; --primary: #{$primary}; @@ -77,7 +79,6 @@ $dropdown-link-active-bg: $active-bg; --box-bg: #171c2a; --stat-box-bg: #0b1018; --alert-bg: #3a1c61; - --navbar-bg: #121212; --transparent-fg: #ffffffbb; --fade-out-box-bg-start: rgba(23, 28, 42, 0); --fade-out-box-bg-end: rgba(23, 28, 42, 1); From 788a95b26078841888126c660f0036eb32f34603 Mon Sep 17 00:00:00 2001 From: Mononaut Date: Tue, 7 May 2024 23:31:51 +0000 Subject: [PATCH 6/7] disable selector when forcing custom theme --- frontend/src/app/services/theme.service.ts | 6 ++++-- .../global-footer/global-footer.component.html | 16 ++++++++++------ 2 files changed, 14 insertions(+), 8 deletions(-) diff --git a/frontend/src/app/services/theme.service.ts b/frontend/src/app/services/theme.service.ts index 3bdb1c65b..0a0fdc505 100644 --- a/frontend/src/app/services/theme.service.ts +++ b/frontend/src/app/services/theme.service.ts @@ -17,7 +17,7 @@ export class ThemeService { private storageService: StorageService, private stateService: StateService, ) { - const theme = this.storageService.getValue('theme-preference') || this.stateService.env.customize?.theme || 'default'; + const theme = this.stateService.env.customize?.theme || this.storageService.getValue('theme-preference') || 'default'; this.apply(theme); } @@ -44,7 +44,9 @@ export class ThemeService { this.style = null; } } - this.storageService.setValue('theme-preference', theme); + if (!this.stateService.env.customize?.theme) { + this.storageService.setValue('theme-preference', theme); + } this.themeChanged$.next(this.theme); } } diff --git a/frontend/src/app/shared/components/global-footer/global-footer.component.html b/frontend/src/app/shared/components/global-footer/global-footer.component.html index a14076022..1a3d68cba 100644 --- a/frontend/src/app/shared/components/global-footer/global-footer.component.html +++ b/frontend/src/app/shared/components/global-footer/global-footer.component.html @@ -27,17 +27,21 @@
-
- -
+ @if (!env.customize?.theme) { +
+ +
+ }
-
- -
+ @if (!env.customize?.theme) { +
+ +
+ } @if (!enterpriseInfo?.footer_img) {