From 7e920f4baed59b8f89fa93cb40a058b9b6a67c07 Mon Sep 17 00:00:00 2001 From: natsoni Date: Sat, 6 Apr 2024 15:48:35 +0900 Subject: [PATCH] Replace more hardcoded css --- .../about/about-sponsors.component.scss | 2 +- .../accelerate-fee-graph.component.scss | 4 ++-- .../accelerate-preview.component.html | 4 ++-- .../accelerate-preview.component.scss | 4 ++-- .../acceleration-fees-graph.component.scss | 2 +- .../acceleration-stats.component.scss | 2 +- .../accelerations-list.component.scss | 4 ++-- .../accelerator-dashboard.component.html | 4 ++-- .../accelerator-dashboard.component.scss | 6 +++--- .../accelerator-dashboard.component.ts | 7 +++++-- .../pending-stats.component.scss | 2 +- .../address/address-preview.component.scss | 2 +- .../components/address/address.component.scss | 2 +- .../src/app/components/app/app.component.ts | 2 -- .../app/components/asset/asset.component.scss | 2 +- .../block-fee-rates-graph.component.scss | 2 +- .../block-filters.component.scss | 16 +++++++-------- .../block-overview-tooltip.component.scss | 14 ++++++------- .../app/components/block/block.component.scss | 2 +- .../blockchain-blocks.component.scss | 2 +- .../blocks-list/blocks-list.component.scss | 2 +- .../clock-face/clock-face.component.scss | 4 ++-- .../app/components/clock/clock.component.scss | 2 +- .../difficulty-mining.component.html | 2 +- .../difficulty-mining.component.scss | 6 +++--- .../difficulty/difficulty.component.scss | 10 +++++----- .../expired-utxos-stats.component.html | 2 +- .../expired-utxos-stats.component.scss | 2 +- .../federation-addresses-list.component.scss | 2 +- .../federation-addresses-stats.component.html | 4 ++-- .../federation-addresses-stats.component.scss | 2 +- .../federation-utxos-list.component.scss | 2 +- .../recent-pegs-list.component.scss | 2 +- .../recent-pegs-stats.component.html | 4 ++-- .../recent-pegs-stats.component.scss | 2 +- .../reserves-ratio-stats.component.html | 2 +- .../reserves-ratio-stats.component.scss | 2 +- .../reserves-ratio.component.ts | 2 +- .../reserves-supply-stats.component.scss | 2 +- .../app/components/menu/menu.component.scss | 10 +++++----- .../rbf-list/rbf-list.component.scss | 2 +- .../rbf-timeline/rbf-timeline.component.scss | 20 +++++++++---------- .../app/components/start/start.component.scss | 2 +- .../transaction-preview.component.scss | 2 +- .../transaction/transaction.component.scss | 8 ++++---- .../app/dashboard/dashboard.component.html | 4 ++-- .../app/dashboard/dashboard.component.scss | 6 +++--- .../docs/api-docs/api-docs-nav.component.scss | 6 +++--- .../app/docs/api-docs/api-docs.component.scss | 14 ++++++------- .../channel-close-box.component.scss | 20 +++++++++---------- .../app/lightning/group/group.component.scss | 2 +- .../app/lightning/node/node.component.scss | 2 +- .../global-footer.component.html | 2 +- .../global-footer.component.scss | 10 +++++----- frontend/src/styles.scss | 1 + frontend/src/theme-contrast.scss | 1 + 56 files changed, 128 insertions(+), 125 deletions(-) diff --git a/frontend/src/app/components/about/about-sponsors.component.scss b/frontend/src/app/components/about/about-sponsors.component.scss index 7c01bb9a3..0ee27d1f5 100644 --- a/frontend/src/app/components/about/about-sponsors.component.scss +++ b/frontend/src/app/components/about/about-sponsors.component.scss @@ -14,7 +14,7 @@ } .become-sponsor { - background-color: #1d1f31; + background-color: var(--bg); border-radius: 16px; padding: 12px 20px; width: 400px; diff --git a/frontend/src/app/components/accelerate-preview/accelerate-fee-graph.component.scss b/frontend/src/app/components/accelerate-preview/accelerate-fee-graph.component.scss index 8d36387f3..88d9f75ed 100644 --- a/frontend/src/app/components/accelerate-preview/accelerate-fee-graph.component.scss +++ b/frontend/src/app/components/accelerate-preview/accelerate-fee-graph.component.scss @@ -92,7 +92,7 @@ &.target { .fill { - background: #653b9c; + background: var(--tertiary); } .fee { position: absolute; @@ -114,7 +114,7 @@ } &.active, &:hover { .fill { - background: #105fb0; + background: var(--primary); } .line { .fee-rate .label { diff --git a/frontend/src/app/components/accelerate-preview/accelerate-preview.component.html b/frontend/src/app/components/accelerate-preview/accelerate-preview.component.html index a848a645b..622da3744 100644 --- a/frontend/src/app/components/accelerate-preview/accelerate-preview.component.html +++ b/frontend/src/app/components/accelerate-preview/accelerate-preview.component.html @@ -179,10 +179,10 @@ - Maximum acceleration cost + Maximum acceleration cost - + {{ maxCost | number }} diff --git a/frontend/src/app/components/accelerate-preview/accelerate-preview.component.scss b/frontend/src/app/components/accelerate-preview/accelerate-preview.component.scss index 2e2b19ee8..5275bec64 100644 --- a/frontend/src/app/components/accelerate-preview/accelerate-preview.component.scss +++ b/frontend/src/app/components/accelerate-preview/accelerate-preview.component.scss @@ -1,6 +1,6 @@ .fee-card { padding: 15px; - background-color: #1d1f31; + background-color: var(--bg); .feerate { display: flex; @@ -23,7 +23,7 @@ } .feerate.active { - background-color: #105fb0 !important; + background-color: var(--primary) !important; opacity: 1; border: 1px solid #007fff !important; } 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 11b468a24..96273dead 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 @@ -62,7 +62,7 @@ h5 { .card-title { font-size: 1rem; - color: #4a68b9; + color: var(--title-fg); } .disabled { diff --git a/frontend/src/app/components/acceleration/acceleration-stats/acceleration-stats.component.scss b/frontend/src/app/components/acceleration/acceleration-stats/acceleration-stats.component.scss index fcc5564a8..e685d98af 100644 --- a/frontend/src/app/components/acceleration/acceleration-stats/acceleration-stats.component.scss +++ b/frontend/src/app/components/acceleration/acceleration-stats/acceleration-stats.component.scss @@ -1,5 +1,5 @@ .card-title { - color: #4a68b9; + color: var(--title-fg); font-size: 10px; margin-bottom: 4px; font-size: 1rem; diff --git a/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.scss b/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.scss index 85e655b25..d4579bcf6 100644 --- a/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.scss +++ b/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.scss @@ -59,7 +59,7 @@ tr, td, th { } .progress { - background-color: #2d3348; + background-color: var(--secondary); } .txid { @@ -148,7 +148,7 @@ tr, td, th { .tooltip-custom .tooltiptext { visibility: hidden; - color: #fff; + color: var(--fg); text-align: center; padding: 5px 0; border-radius: 6px; diff --git a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.html b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.html index 147e07e69..0e1c65382 100644 --- a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.html +++ b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.html @@ -40,7 +40,7 @@
Mempool Goggles: Accelerations
  - +
@@ -85,7 +85,7 @@
Recent Accelerations
  - +
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 c8755c94e..e14f53dfb 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 @@ -7,7 +7,7 @@ } .card { - background-color: #1d1f31; + background-color: var(--bg); } .graph-card { @@ -29,10 +29,10 @@ .card-title { font-size: 1rem; - color: #4a68b9; + color: var(--title-fg); } .card-title > a { - color: #4a68b9; + color: var(--title-fg); } .card-body.pool-ranking { 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 dda2b036b..44335f4b8 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 @@ -8,12 +8,14 @@ import { Observable, catchError, combineLatest, distinctUntilChanged, interval, import { Color } from '../../block-overview-graph/sprite-types'; import { hexToColor } from '../../block-overview-graph/utils'; import TxView from '../../block-overview-graph/tx-view'; -import { feeLevels, defaultMempoolFeeColors } from '../../../app.constants'; +import { feeLevels, defaultMempoolFeeColors, contrastMempoolFeeColors } from '../../../app.constants'; import { ServicesApiServices } from '../../../services/services-api.service'; import { detectWebGL } from '../../../shared/graphs.utils'; +import { ThemeService } from '../../../services/theme.service'; const acceleratedColor: Color = hexToColor('8F5FF6'); const normalColors = defaultMempoolFeeColors.map(hex => hexToColor(hex + '5F')); +const contrastColors = contrastMempoolFeeColors.map(hex => hexToColor(hex + '5F')); interface AccelerationBlock extends BlockExtended { accelerationCount: number, @@ -34,6 +36,7 @@ export class AcceleratorDashboardComponent implements OnInit { webGlEnabled = true; graphHeight: number = 300; + theme: ThemeService; constructor( private seoService: SeoService, @@ -128,7 +131,7 @@ export class AcceleratorDashboardComponent implements OnInit { } 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 normalColors[feeLevelIndex] || normalColors[defaultMempoolFeeColors.length - 1]; + return this.theme.theme === 'contrast' ? contrastColors[feeLevelIndex] || contrastColors[contrastColors.length - 1] : normalColors[feeLevelIndex] || normalColors[normalColors.length - 1]; } } diff --git a/frontend/src/app/components/acceleration/pending-stats/pending-stats.component.scss b/frontend/src/app/components/acceleration/pending-stats/pending-stats.component.scss index fcc5564a8..e685d98af 100644 --- a/frontend/src/app/components/acceleration/pending-stats/pending-stats.component.scss +++ b/frontend/src/app/components/acceleration/pending-stats/pending-stats.component.scss @@ -1,5 +1,5 @@ .card-title { - color: #4a68b9; + color: var(--title-fg); font-size: 10px; margin-bottom: 4px; font-size: 1rem; diff --git a/frontend/src/app/components/address/address-preview.component.scss b/frontend/src/app/components/address/address-preview.component.scss index 21e7faab5..623d72db2 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: #FFF; + background-color: var(--fg); 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 fe0729b94..7107c73f2 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: #FFF; + background-color: var(--fg); padding: 10px; padding-bottom: 5px; display: inline-block; diff --git a/frontend/src/app/components/app/app.component.ts b/frontend/src/app/components/app/app.component.ts index 49eb691c7..ace0122f0 100644 --- a/frontend/src/app/components/app/app.component.ts +++ b/frontend/src/app/components/app/app.component.ts @@ -4,7 +4,6 @@ import { Router, NavigationEnd } from '@angular/router'; import { StateService } from '../../services/state.service'; import { OpenGraphService } from '../../services/opengraph.service'; import { NgbTooltipConfig } from '@ng-bootstrap/ng-bootstrap'; -import { ThemeService } from 'src/app/services/theme.service'; @Component({ selector: 'app-root', @@ -20,7 +19,6 @@ export class AppComponent implements OnInit { private stateService: StateService, private openGraphService: OpenGraphService, private location: Location, - private theme: ThemeService, tooltipConfig: NgbTooltipConfig, @Inject(LOCALE_ID) private locale: string, ) { diff --git a/frontend/src/app/components/asset/asset.component.scss b/frontend/src/app/components/asset/asset.component.scss index 45e68042d..6f8bc0915 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: #FFF; + background-color: var(--fg); 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 21dd458b5..d38bb4843 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 @@ -95,7 +95,7 @@ } .card-title { font-size: 1rem; - color: #4a68b9; + color: var(--title-fg); } .card-text { font-size: 18px; diff --git a/frontend/src/app/components/block-filters/block-filters.component.scss b/frontend/src/app/components/block-filters/block-filters.component.scss index 1009efd72..d5f1d5968 100644 --- a/frontend/src/app/components/block-filters/block-filters.component.scss +++ b/frontend/src/app/components/block-filters/block-filters.component.scss @@ -64,7 +64,7 @@ .filter-tag { font-size: 0.9em; background: #181b2daf; - border: solid 1px #105fb0; + border: solid 1px var(--primary); color: white; border-radius: 0.2rem; padding: 0.2em 0.5em; @@ -73,15 +73,15 @@ pointer-events: all; &.selected { - background-color: #105fb0; + background-color: var(--primary); } } &.any-mode { .filter-tag { - border: solid 1px #1a9436; + border: solid 1px var(--success); &.selected { - background-color: #1a9436; + background-color: var(--success); } } } @@ -107,15 +107,15 @@ } &.blue { - border: solid 1px #105fb0; + border: solid 1px var(--primary); &.active { - background: #105fb0; + background: var(--primary); } } &.green { - border: solid 1px #1a9436; + border: solid 1px var(--success); &.active { - background: #1a9436; + background: var(--success); } } } 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 135f1cfe6..df34ce346 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: #653b9c; + background-color: var(--tertiary); box-shadow: #ad7de57f 0px 0px 12px -2px; color: white; animation: acceleratePulse 1s infinite; @@ -51,27 +51,27 @@ th, td { .filter-tag { background: #181b2daf; - border: solid 1px #105fb0; + border: solid 1px var(--primary); color: white; transition: background-color 300ms; &.matching { - background-color: #105fb0; + background-color: var(--primary); } } &.any-mode { .filter-tag { - border: solid 1px #1a9436; + border: solid 1px var(--success); &.matching { - background-color: #1a9436; + background-color: var(--success); } } } } @keyframes acceleratePulse { - 0% { background-color: #653b9c; box-shadow: #ad7de57f 0px 0px 12px -2px; } + 0% { background-color: var(--tertiary); box-shadow: #ad7de57f 0px 0px 12px -2px; } 50% { background-color: #8457bb; box-shadow: #ad7de5 0px 0px 18px -2px;} - 100% { background-color: #653b9c; box-shadow: #ad7de57f 0px 0px 12px -2px; } + 100% { background-color: var(--tertiary); box-shadow: #ad7de57f 0px 0px 12px -2px; } } \ No newline at end of file diff --git a/frontend/src/app/components/block/block.component.scss b/frontend/src/app/components/block/block.component.scss index a7ebafbe5..70f388e73 100644 --- a/frontend/src/app/components/block/block.component.scss +++ b/frontend/src/app/components/block/block.component.scss @@ -22,7 +22,7 @@ } .qr-wrapper { - background-color: #FFF; + background-color: var(--fg); padding: 10px; padding-bottom: 5px; display: inline-block; 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 0cbadf01b..59082d5c5 100644 --- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss +++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss @@ -144,7 +144,7 @@ } .loading .bitcoin-block.mined-block { - background: #2d3348; + background: var(--secondary); } @keyframes opacityPulse { diff --git a/frontend/src/app/components/blocks-list/blocks-list.component.scss b/frontend/src/app/components/blocks-list/blocks-list.component.scss index 6dba7441f..2315844ae 100644 --- a/frontend/src/app/components/blocks-list/blocks-list.component.scss +++ b/frontend/src/app/components/blocks-list/blocks-list.component.scss @@ -266,7 +266,7 @@ tr, td, th { .tooltip-custom .tooltiptext { visibility: hidden; - color: #fff; + color: var(--fg); text-align: center; padding: 5px 0; border-radius: 6px; diff --git a/frontend/src/app/components/clock-face/clock-face.component.scss b/frontend/src/app/components/clock-face/clock-face.component.scss index 1ca2ce914..904de9d96 100644 --- a/frontend/src/app/components/clock-face/clock-face.component.scss +++ b/frontend/src/app/components/clock-face/clock-face.component.scss @@ -29,8 +29,8 @@ } &.hour { - fill: #105fb0; - stroke: #105fb0; + fill: var(--primary); + stroke: var(--primary); stroke-width: 6px; } } diff --git a/frontend/src/app/components/clock/clock.component.scss b/frontend/src/app/components/clock/clock.component.scss index 34aadcd74..7423c1d8f 100644 --- a/frontend/src/app/components/clock/clock.component.scss +++ b/frontend/src/app/components/clock/clock.component.scss @@ -161,7 +161,7 @@ } .side.bottom { - background: #105fb0; + background: var(--primary); transform: rotateX(-90deg); margin-top: var(--half-side); } diff --git a/frontend/src/app/components/difficulty-mining/difficulty-mining.component.html b/frontend/src/app/components/difficulty-mining/difficulty-mining.component.html index 0865708af..4d135dfbe 100644 --- a/frontend/src/app/components/difficulty-mining/difficulty-mining.component.html +++ b/frontend/src/app/components/difficulty-mining/difficulty-mining.component.html @@ -40,7 +40,7 @@
Current Period
{{ epochData.progress | number: '1.2-2' }} %
-
 
+
 
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 69e2892ee..7965ff5d6 100644 --- a/frontend/src/app/components/difficulty-mining/difficulty-mining.component.scss +++ b/frontend/src/app/components/difficulty-mining/difficulty-mining.component.scss @@ -79,12 +79,12 @@ } .card { - background-color: #1d1f31; + background-color: var(--bg); height: 100%; } .card-title { - color: #4a68b9; + color: var(--title-fg); font-size: 1rem; overflow: hidden; text-overflow: ellipsis; @@ -94,7 +94,7 @@ .progress { display: inline-flex; width: 100%; - background-color: #2d3348; + background-color: var(--secondary); height: 1.1rem; max-width: 180px; } diff --git a/frontend/src/app/components/difficulty/difficulty.component.scss b/frontend/src/app/components/difficulty/difficulty.component.scss index eda486966..697a6f534 100644 --- a/frontend/src/app/components/difficulty/difficulty.component.scss +++ b/frontend/src/app/components/difficulty/difficulty.component.scss @@ -177,10 +177,10 @@ .epoch-blocks { display: block; width: 100%; - background: #2d3348; + background: var(--secondary); .rect { - fill: #2d3348; + fill: var(--secondary); &.behind { fill: #D81B60; @@ -189,7 +189,7 @@ fill: url(#diff-gradient); } &.ahead { - fill: #1a9436; + fill: var(--success); } &.hover { @@ -223,12 +223,12 @@ height: 100%; } .background { - background: linear-gradient(to right, #105fb0, #9339f4); + background: linear-gradient(to right, var(--primary), #9339f4); left: 0; right: 0; } .remaining { - background: #2d3348; + background: var(--secondary); right: 0; } .label { diff --git a/frontend/src/app/components/liquid-reserves-audit/expired-utxos-stats/expired-utxos-stats.component.html b/frontend/src/app/components/liquid-reserves-audit/expired-utxos-stats/expired-utxos-stats.component.html index 44dfedd26..fb68a530d 100644 --- a/frontend/src/app/components/liquid-reserves-audit/expired-utxos-stats/expired-utxos-stats.component.html +++ b/frontend/src/app/components/liquid-reserves-audit/expired-utxos-stats/expired-utxos-stats.component.html @@ -9,7 +9,7 @@
-
Total Expired 
+
Total Expired 
{{ (+expiredStats.all.total) / 100000000 | number: '1.5-5' }} BTC
diff --git a/frontend/src/app/components/liquid-reserves-audit/expired-utxos-stats/expired-utxos-stats.component.scss b/frontend/src/app/components/liquid-reserves-audit/expired-utxos-stats/expired-utxos-stats.component.scss index d2044f6de..1a2fd6864 100644 --- a/frontend/src/app/components/liquid-reserves-audit/expired-utxos-stats/expired-utxos-stats.component.scss +++ b/frontend/src/app/components/liquid-reserves-audit/expired-utxos-stats/expired-utxos-stats.component.scss @@ -14,7 +14,7 @@ } .card-title { - color: #4a68b9; + color: var(--title-fg); font-size: 10px; margin-bottom: 4px; font-size: 1rem; diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.scss b/frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.scss index b711f659b..5fbab9cc5 100644 --- a/frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.scss +++ b/frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.scss @@ -33,7 +33,7 @@ tr, td, th { } .progress { - background-color: #2d3348; + background-color: var(--secondary); } .address { diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component.html b/frontend/src/app/components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component.html index 9240cf228..5017ad4b2 100644 --- a/frontend/src/app/components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component.html +++ b/frontend/src/app/components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component.html @@ -2,7 +2,7 @@
-
Liquid Federation Wallet 
+
Liquid Federation Wallet 
{{ federationWalletStats.address_count }} addresses
@@ -16,7 +16,7 @@
-
Liquid Federation Wallet 
+
Liquid Federation Wallet 
diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component.scss b/frontend/src/app/components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component.scss index 4ddce6501..aa345fbfd 100644 --- a/frontend/src/app/components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component.scss +++ b/frontend/src/app/components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component.scss @@ -15,7 +15,7 @@ .card-title { margin: 0; - color: #4a68b9; + color: var(--title-fg); font-size: 10px; font-size: 1rem; white-space: nowrap; diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.scss b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.scss index 6a2353f0c..cdd5a5ed9 100644 --- a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.scss +++ b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.scss @@ -24,7 +24,7 @@ tr, td, th { } .progress { - background-color: #2d3348; + background-color: var(--secondary); } .txid { diff --git a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.scss b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.scss index 7a3d9e49f..3af119fad 100644 --- a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.scss +++ b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.scss @@ -27,7 +27,7 @@ tr, td, th { } .progress { - background-color: #2d3348; + background-color: var(--secondary); } .transaction { diff --git a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.html b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.html index 6f012e84e..44b801a30 100644 --- a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.html +++ b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.html @@ -2,7 +2,7 @@
-
Recent Peg-In / Out's 
+
Recent Peg-In / Out's 
@@ -26,7 +26,7 @@
-
Recent Peg-In / Out's 
+
Recent Peg-In / Out's 
diff --git a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.scss b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.scss index 4cfef8e7a..9a7e6f0ea 100644 --- a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.scss +++ b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.scss @@ -15,7 +15,7 @@ .card-title { margin: 0; - color: #4a68b9; + color: var(--title-fg); font-size: 10px; font-size: 1rem; white-space: nowrap; diff --git a/frontend/src/app/components/liquid-reserves-audit/reserves-ratio-stats/reserves-ratio-stats.component.html b/frontend/src/app/components/liquid-reserves-audit/reserves-ratio-stats/reserves-ratio-stats.component.html index dede76b3f..49ba80d0c 100644 --- a/frontend/src/app/components/liquid-reserves-audit/reserves-ratio-stats/reserves-ratio-stats.component.html +++ b/frontend/src/app/components/liquid-reserves-audit/reserves-ratio-stats/reserves-ratio-stats.component.html @@ -23,7 +23,7 @@
Emergency Keys
diff --git a/frontend/src/app/components/liquid-reserves-audit/reserves-ratio-stats/reserves-ratio-stats.component.scss b/frontend/src/app/components/liquid-reserves-audit/reserves-ratio-stats/reserves-ratio-stats.component.scss index 13123431e..fd7197a88 100644 --- a/frontend/src/app/components/liquid-reserves-audit/reserves-ratio-stats/reserves-ratio-stats.component.scss +++ b/frontend/src/app/components/liquid-reserves-audit/reserves-ratio-stats/reserves-ratio-stats.component.scss @@ -22,7 +22,7 @@ .card-title { margin-bottom: 4px; - color: #4a68b9; + color: var(--title-fg); font-size: 10px; font-size: 1rem; white-space: nowrap; diff --git a/frontend/src/app/components/liquid-reserves-audit/reserves-ratio/reserves-ratio.component.ts b/frontend/src/app/components/liquid-reserves-audit/reserves-ratio/reserves-ratio.component.ts index 13f948fcd..04429d2ac 100644 --- a/frontend/src/app/components/liquid-reserves-audit/reserves-ratio/reserves-ratio.component.ts +++ b/frontend/src/app/components/liquid-reserves-audit/reserves-ratio/reserves-ratio.component.ts @@ -141,7 +141,7 @@ export class ReservesRatioComponent implements OnInit, OnChanges { show: true, offsetCenter: [0, '-127%'], fontSize: 18, - color: '#4a68b9', + color: 'var(--title-fg)', fontFamily: 'inherit', fontWeight: 500, }, diff --git a/frontend/src/app/components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component.scss b/frontend/src/app/components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component.scss index 6ffb900ed..47d29eb45 100644 --- a/frontend/src/app/components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component.scss +++ b/frontend/src/app/components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component.scss @@ -13,7 +13,7 @@ } .card-title { - color: #4a68b9; + color: var(--title-fg); font-size: 10px; margin-bottom: 4px; font-size: 1rem; diff --git a/frontend/src/app/components/menu/menu.component.scss b/frontend/src/app/components/menu/menu.component.scss index 8a2e55c20..ec7e7250f 100644 --- a/frontend/src/app/components/menu/menu.component.scss +++ b/frontend/src/app/components/menu/menu.component.scss @@ -28,7 +28,7 @@ .sidenav.open { left: 0px; display: block; - background-color: #1d1f31; + background-color: var(--bg); } .sidenav a, button{ @@ -42,7 +42,7 @@ .sidenav nav { width: 100%; height: calc(100vh - 65px); - background-color: #1d1f31; + background-color: var(--bg); padding-left: 20px; padding-right: 20px; padding-top: 20px; @@ -61,7 +61,7 @@ } .badge-og { - background-color: #4a68b9; + background-color: var(--title-fg); } .badge-pleb { @@ -73,7 +73,7 @@ } .badge-whale { - background-color: #653b9c; + background-color: var(--tertiary); } .badge-silver { @@ -85,5 +85,5 @@ } .badge-platinum { - background-color: #653b9c; + background-color: var(--tertiary); } \ No newline at end of file diff --git a/frontend/src/app/components/rbf-list/rbf-list.component.scss b/frontend/src/app/components/rbf-list/rbf-list.component.scss index 792bb8836..ff4dcf9b7 100644 --- a/frontend/src/app/components/rbf-list/rbf-list.component.scss +++ b/frontend/src/app/components/rbf-list/rbf-list.component.scss @@ -25,7 +25,7 @@ } .timeline-wrapper.mined { - border: solid 4px #1a9436; + border: solid 4px var(--success); } .no-replacements { 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 23c252190..6803e82ae 100644 --- a/frontend/src/app/components/rbf-timeline/rbf-timeline.component.scss +++ b/frontend/src/app/components/rbf-timeline/rbf-timeline.component.scss @@ -101,7 +101,7 @@ right: -5px; top: 0; transform: translateY(-50%); - background: #105fb0; + background: var(--primary); border-radius: 5px; &.left { @@ -112,7 +112,7 @@ } &.fullrbf { - background: #1bd8f4; + background: var(--info); } } &.first-node { @@ -165,20 +165,20 @@ &.mined { .shape-border { - background: #1a9436; + background: var(--success); } } .shape-border:hover { padding: 0px; .shape { - background: #1bd8f4; + background: var(--info); } } &.selected.mined { .shape-border { - background: #1a9436; + background: var(--success); height: calc(1em + 16px); width: calc(1em + 16px); @@ -190,7 +190,7 @@ padding: 4px; .shape { border-width: 1px; - border-color: #1bd8f4 + border-color: var(--info) } } } @@ -207,9 +207,9 @@ width: 20px; height: 108px; bottom: 50%; - border-right: solid 10px #105fb0; + border-right: solid 10px var(--primary); &.fullrbf { - border-right: solid 10px #1bd8f4; + border-right: solid 10px var(--info); } &.last-pipe { height: 150px; @@ -218,10 +218,10 @@ } .corner { - border-bottom: solid 10px #105fb0; + border-bottom: solid 10px var(--primary); border-bottom-right-radius: 10px; &.fullrbf { - border-bottom: solid 10px #1bd8f4; + border-bottom: solid 10px var(--info); } } } diff --git a/frontend/src/app/components/start/start.component.scss b/frontend/src/app/components/start/start.component.scss index e321b8d6f..50e520cc5 100644 --- a/frontend/src/app/components/start/start.component.scss +++ b/frontend/src/app/components/start/start.component.scss @@ -32,7 +32,7 @@ cursor: pointer; opacity: 0.8; transition: opacity 500ms; - background: radial-gradient(#1d1f31 0%, transparent 50%); + background: radial-gradient(var(--bg) 0%, transparent 50%); &:hover { opacity: 1; diff --git a/frontend/src/app/components/transaction/transaction-preview.component.scss b/frontend/src/app/components/transaction/transaction-preview.component.scss index 0b26e539a..986ee7d8e 100644 --- a/frontend/src/app/components/transaction/transaction-preview.component.scss +++ b/frontend/src/app/components/transaction/transaction-preview.component.scss @@ -113,7 +113,7 @@ max-width: 100%; margin: auto; table-layout: auto; - background: #2d3348af; + background: var(--secondary)af; border-top-left-radius: 5px; border-top-right-radius: 5px; diff --git a/frontend/src/app/components/transaction/transaction.component.scss b/frontend/src/app/components/transaction/transaction.component.scss index a30454225..80caa6003 100644 --- a/frontend/src/app/components/transaction/transaction.component.scss +++ b/frontend/src/app/components/transaction/transaction.component.scss @@ -61,7 +61,7 @@ } .badge.badge-accelerated { - background-color: #653b9c; + background-color: var(--tertiary); color: white; } @@ -256,7 +256,7 @@ } .blink-bg { - color: #fff; + color: var(--fg); background: repeating-linear-gradient(#daad0a 0%, #daad0a 5%, #987805 100%) !important; animation: shadowyBackground 1s infinite; box-shadow: 0px 0px 20px rgba(#eba814, 1); @@ -279,7 +279,7 @@ display: flex !important; align-self: auto; margin-left: auto; - background-color: #653b9c; + background-color: var(--tertiary); @media (max-width: 849px) { margin-left: 5px; } @@ -302,7 +302,7 @@ align-self: auto; margin-top: 3px; margin-left: auto; - background-color: #653b9c; + background-color: var(--tertiary); @media (max-width: 995px) { margin-left: 0px; } diff --git a/frontend/src/app/dashboard/dashboard.component.html b/frontend/src/app/dashboard/dashboard.component.html index a6b67384b..4ffae4dc4 100644 --- a/frontend/src/app/dashboard/dashboard.component.html +++ b/frontend/src/app/dashboard/dashboard.component.html @@ -20,7 +20,7 @@
Mempool Goggles: {{ goggleCycle[goggleIndex].name }}
  - +
@@ -97,7 +97,7 @@
Recent Blocks
  - + diff --git a/frontend/src/app/dashboard/dashboard.component.scss b/frontend/src/app/dashboard/dashboard.component.scss index 08d77beeb..3acfbf9bb 100644 --- a/frontend/src/app/dashboard/dashboard.component.scss +++ b/frontend/src/app/dashboard/dashboard.component.scss @@ -399,11 +399,11 @@ .goggle-badge { margin: 6px 5px 8px; background: none; - border: solid 2px #105fb0; + border: solid 2px var(--primary); cursor: pointer; &.active { - background: #105fb0; + background: var(--primary); } } @@ -418,7 +418,7 @@ } .card-liquid { - background-color: #1d1f31; + background-color: var(--bg); height: 418px; @media (min-width: 992px) { height: 512px; diff --git a/frontend/src/app/docs/api-docs/api-docs-nav.component.scss b/frontend/src/app/docs/api-docs/api-docs-nav.component.scss index c22d95ed2..4609ed2fd 100644 --- a/frontend/src/app/docs/api-docs/api-docs-nav.component.scss +++ b/frontend/src/app/docs/api-docs/api-docs-nav.component.scss @@ -6,7 +6,7 @@ p { } a { - color: #fff; + color: var(--fg); text-decoration: none; display: block; margin: 5px 0; @@ -17,13 +17,13 @@ a { text-align: center; padding: 20px; margin: 20px 20px 20px 0; - background-color: #1d1f31; + background-color: var(--bg); border-radius: 12px; } #enterprise-cta-desktop p { margin: 0 auto 16px auto; - color: #fff; + color: var(--fg); font-weight: 400; } diff --git a/frontend/src/app/docs/api-docs/api-docs.component.scss b/frontend/src/app/docs/api-docs/api-docs.component.scss index 9a4ec8dc9..ce8c37121 100644 --- a/frontend/src/app/docs/api-docs/api-docs.component.scss +++ b/frontend/src/app/docs/api-docs/api-docs.component.scss @@ -211,7 +211,7 @@ h3 { } .endpoint-container .section-header span { - color: #fff; + color: var(--fg); background-color: var(--tertiary); font-size: 12px; text-transform: uppercase; @@ -254,7 +254,7 @@ h3 { #doc-nav-mobile button { width: 100%; background-color: var(--primary); - color: #fff; + color: var(--fg); border-color: var(--primary); border-radius: 0.5rem 0.5rem 0 0; } @@ -318,7 +318,7 @@ h3 { #enterprise-cta-mobile { padding: 20px; - background-color: #1d1f31; + background-color: var(--bg); border-radius: 0.25rem; text-align: center; position: fixed; @@ -343,8 +343,8 @@ h3 { } #enterprise-cta-mobile .btn-secondary:hover { - background-color: #2d3348; - border-color: #2d3348; + background-color: var(--secondary); + border-color: var(--secondary); } #enterprise-cta-mobile .no-line-break { @@ -438,7 +438,7 @@ dl { dt { font-weight: bold; - color: #4a68b9; + color: var(--title-fg); padding: 5px 0; } @@ -447,7 +447,7 @@ dd { & > dl { padding-left: 1em; - border-left: 2px solid #4a68b9; + border-left: 2px solid var(--title-fg); margin-left: 1em; margin-top: 5px; } diff --git a/frontend/src/app/lightning/channel/channel-close-box/channel-close-box.component.scss b/frontend/src/app/lightning/channel/channel-close-box/channel-close-box.component.scss index f55550eb3..12a8cb53c 100644 --- a/frontend/src/app/lightning/channel/channel-close-box/channel-close-box.component.scss +++ b/frontend/src/app/lightning/channel/channel-close-box/channel-close-box.component.scss @@ -60,19 +60,19 @@ justify-content: center; &.left { - background: #105fb0; + background: var(--primary); } &.center { background: repeating-linear-gradient( 60deg, - #105fb0 0, - #105fb0 12px, - #1a9436 12px, - #1a9436 24px + var(--primary) 0, + var(--primary) 12px, + var(--success) 12px, + var(--success) 24px ); } &.right { - background: #1a9436; + background: var(--success); } .value { @@ -93,10 +93,10 @@ .bar.center { background: repeating-linear-gradient( 60deg, - #105fb0 0, - #105fb0 8px, - #1a9436 8px, - #1a9436 16px + var(--primary) 0, + var(--primary) 8px, + var(--success) 8px, + var(--success) 16px ) } } diff --git a/frontend/src/app/lightning/group/group.component.scss b/frontend/src/app/lightning/group/group.component.scss index 6deb4ca14..61bc87ca8 100644 --- a/frontend/src/app/lightning/group/group.component.scss +++ b/frontend/src/app/lightning/group/group.component.scss @@ -12,7 +12,7 @@ h1 { } .qr-wrapper { - background-color: #FFF; + background-color: var(--fg); padding: 10px; padding-bottom: 5px; display: inline-block; diff --git a/frontend/src/app/lightning/node/node.component.scss b/frontend/src/app/lightning/node/node.component.scss index dcbac7fa7..9d70bae30 100644 --- a/frontend/src/app/lightning/node/node.component.scss +++ b/frontend/src/app/lightning/node/node.component.scss @@ -14,7 +14,7 @@ } .qr-wrapper { - background-color: #FFF; + background-color: var(--fg); padding: 10px; padding-bottom: 5px; display: inline-block; 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 eee4756a9..635cf8d42 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 @@ -93,7 +93,7 @@ Matrix -
+

{{ (backendInfo$ | async)?.hostname }} (v{{ (backendInfo$ | async )?.version }}) [{{ (backendInfo$ | async )?.gitCommit | slice:0:8 }}] diff --git a/frontend/src/app/shared/components/global-footer/global-footer.component.scss b/frontend/src/app/shared/components/global-footer/global-footer.component.scss index 5467f09c1..2db64e976 100644 --- a/frontend/src/app/shared/components/global-footer/global-footer.component.scss +++ b/frontend/src/app/shared/components/global-footer/global-footer.component.scss @@ -1,5 +1,5 @@ footer { - background-color: #1d1f31; + background-color: var(--bg); margin-top: 30px; &.services { @media (min-width: 768px) { @@ -34,11 +34,11 @@ footer .row.main .branding > p { footer .row.main .branding .btn { display: inline-block; - color: #fff !important; + color: var(--fg) !important; } footer .row.main .branding button.account { - background-color: #2d3348; + background-color: var(--secondary); } footer .row.main .branding .cta { @@ -59,7 +59,7 @@ footer .row.main .links > div:first-child { } footer .links .category { - color: #4a68b9; + color: var(--title-fg); font-weight: 700; } @@ -114,7 +114,7 @@ footer .row.social-links svg { footer .row.version { padding-top: 20px !important; padding-bottom: 20px !important; - background-color: #1d1f31; + background-color: var(--bg); } footer .row.version p { diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index 88f664982..93cdda7fe 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -76,6 +76,7 @@ $dropdown-link-active-bg: $active-bg; --box-bg: #24273e; --stat-box-bg: #181b2d; --alert-bg: #3a1c61; + --navbar-bg: #212121; --transparent-fg: #ffffff66; --fade-out-box-bg-start: rgba(36, 39, 62, 0); --fade-out-box-bg-end: rgba(36, 39, 62, 1); diff --git a/frontend/src/theme-contrast.scss b/frontend/src/theme-contrast.scss index 3e85adf2a..24d365789 100644 --- a/frontend/src/theme-contrast.scss +++ b/frontend/src/theme-contrast.scss @@ -75,6 +75,7 @@ $dropdown-link-active-bg: $active-bg; --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);