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 88d9f75ed..a1e5de4b0 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 @@ -76,7 +76,7 @@ &.tx { .fill { - background: #3bcc49; + background: var(--green); } .line { .fee-rate { diff --git a/frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.ts b/frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.ts index df13df75d..cbc45de1f 100644 --- a/frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.ts +++ b/frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.ts @@ -218,7 +218,7 @@ export class AccelerationFeesGraphComponent implements OnInit, OnDestroy { splitLine: { lineStyle: { type: 'dotted', - color: '#ffffff66', + color: 'var(--transparent-fg)', opacity: 0.25, } }, 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 e685d98af..97ed53f36 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 @@ -50,7 +50,7 @@ margin-bottom: 0; } .card-text span { - color: #ffffff66; + color: var(--transparent-fg); font-size: 12px; top: 0px; } 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 e685d98af..97ed53f36 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 @@ -50,7 +50,7 @@ margin-bottom: 0; } .card-text span { - color: #ffffff66; + color: var(--transparent-fg); font-size: 12px; top: 0px; } diff --git a/frontend/src/app/components/address-graph/address-graph.component.ts b/frontend/src/app/components/address-graph/address-graph.component.ts index 4e31e663f..6ae3dd8e8 100644 --- a/frontend/src/app/components/address-graph/address-graph.component.ts +++ b/frontend/src/app/components/address-graph/address-graph.component.ts @@ -113,7 +113,7 @@ export class AddressGraphComponent implements OnChanges { : `${data.length} transactions`; const date = new Date(data[0].data[0]).toLocaleTimeString(this.locale, { year: 'numeric', month: 'short', day: 'numeric' }); const val = data.reduce((total, d) => total + d.data[2].value, 0); - const color = val === 0 ? '' : (val > 0 ? '#1a9436' : '#dc3545'); + const color = val === 0 ? '' : (val > 0 ? 'var(--green)' : 'var(--red)'); const symbol = val > 0 ? '+' : ''; return `
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 d38bb4843..ed531e63d 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 @@ -100,7 +100,7 @@ .card-text { font-size: 18px; span { - color: #ffffff66; + color: var(--transparent-fg); font-size: 12px; } } 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 7965ff5d6..77f54f267 100644 --- a/frontend/src/app/components/difficulty-mining/difficulty-mining.component.scss +++ b/frontend/src/app/components/difficulty-mining/difficulty-mining.component.scss @@ -4,7 +4,7 @@ justify-content: space-around; height: 76px; .shared-block { - color: #ffffff66; + color: var(--transparent-fg); font-size: 12px; } .item { diff --git a/frontend/src/app/components/difficulty-mining/difficulty-mining.component.ts b/frontend/src/app/components/difficulty-mining/difficulty-mining.component.ts index c650e2c02..90b41d749 100644 --- a/frontend/src/app/components/difficulty-mining/difficulty-mining.component.ts +++ b/frontend/src/app/components/difficulty-mining/difficulty-mining.component.ts @@ -49,24 +49,24 @@ export class DifficultyMiningComponent implements OnInit { .pipe( map(([blocks, da]) => { const maxHeight = blocks.reduce((max, block) => Math.max(max, block.height), 0); - let colorAdjustments = '#ffffff66'; + let colorAdjustments = 'var(--transparent-fg)'; if (da.difficultyChange > 0) { - colorAdjustments = '#3bcc49'; + colorAdjustments = 'var(--green)'; } if (da.difficultyChange < 0) { - colorAdjustments = '#dc3545'; + colorAdjustments = 'var(--red)'; } - let colorPreviousAdjustments = '#dc3545'; + let colorPreviousAdjustments = 'var(--red)'; if (da.previousRetarget) { if (da.previousRetarget >= 0) { - colorPreviousAdjustments = '#3bcc49'; + colorPreviousAdjustments = 'var(--green)'; } if (da.previousRetarget === 0) { - colorPreviousAdjustments = '#ffffff66'; + colorPreviousAdjustments = 'var(--transparent-fg)'; } } else { - colorPreviousAdjustments = '#ffffff66'; + colorPreviousAdjustments = 'var(--transparent-fg)'; } this.blocksUntilHalving = 210000 - (maxHeight % 210000); diff --git a/frontend/src/app/components/difficulty/difficulty.component.html b/frontend/src/app/components/difficulty/difficulty.component.html index ff31d4f57..c9b3d183b 100644 --- a/frontend/src/app/components/difficulty/difficulty.component.html +++ b/frontend/src/app/components/difficulty/difficulty.component.html @@ -5,7 +5,7 @@
difficulty - | + | halving
diff --git a/frontend/src/app/components/difficulty/difficulty.component.scss b/frontend/src/app/components/difficulty/difficulty.component.scss index 697a6f534..d10b800a8 100644 --- a/frontend/src/app/components/difficulty/difficulty.component.scss +++ b/frontend/src/app/components/difficulty/difficulty.component.scss @@ -183,7 +183,7 @@ fill: var(--secondary); &.behind { - fill: #D81B60; + fill: var(--red); } &.mined { fill: url(#diff-gradient); @@ -208,10 +208,10 @@ } .blocks-ahead { - color: #3bcc49; + color: var(--green); } .blocks-behind { - color: #D81B60; + color: var(--red); } .halving-progress { @@ -250,5 +250,5 @@ } .inactive { - color: #ffffff66; + color: var(--transparent-fg); } \ No newline at end of file diff --git a/frontend/src/app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.ts b/frontend/src/app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.ts index 4359d8fa3..aca469ff8 100644 --- a/frontend/src/app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.ts +++ b/frontend/src/app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.ts @@ -137,7 +137,7 @@ export class LbtcPegsGraphComponent implements OnInit, OnChanges { splitLine: { lineStyle: { type: 'dotted', - color: '#ffffff66', + color: 'var(--transparent-fg)', opacity: 0.25, } } 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 fb68a530d..0bd2fae3c 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 @@ -2,7 +2,7 @@
Non-Dust Expired
-
{{ (+expiredStats.nonDust.total) / 100000000 | number: '1.5-5' }} BTC
+
{{ (+expiredStats.nonDust.total) / 100000000 | number: '1.5-5' }} BTC
{{ expiredStats.nonDust.count }} UTXOs
@@ -12,7 +12,7 @@
Total Expired 
-
{{ (+expiredStats.all.total) / 100000000 | number: '1.5-5' }} BTC
+
{{ (+expiredStats.all.total) / 100000000 | number: '1.5-5' }} BTC
{{ expiredStats.all.count }} UTXOs
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 1a2fd6864..e831a433a 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 @@ -36,7 +36,7 @@ margin-bottom: 0; } .card-text span { - color: #ffffff66; + color: var(--transparent-fg); font-size: 12px; top: 0px; } diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.html b/frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.html index 61de92e5d..31d27400d 100644 --- a/frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.html +++ b/frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.html @@ -12,7 +12,7 @@ - + @@ -24,7 +24,7 @@ - + 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 aa345fbfd..43f555ca9 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 @@ -32,7 +32,7 @@ } .card-text span { - color: #ffffff66; + color: var(--transparent-fg); font-size: 12px; top: 0px; } diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html index f890a0710..c9c7bd86b 100644 --- a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html +++ b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html @@ -18,7 +18,7 @@ - + @@ -33,12 +33,12 @@ - + - + @@ -62,7 +62,7 @@ {{ utxo.blocknumber + utxo.timelock - lastReservesBlockUpdate < 0 ? -(utxo.blocknumber + utxo.timelock - lastReservesBlockUpdate) : utxo.blocknumber + utxo.timelock - lastReservesBlockUpdate }} blocks - + @if (utxo.isDust) { ✔ } @else { diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.ts b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.ts index 78181375d..e245e01ea 100644 --- a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.ts +++ b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.ts @@ -122,8 +122,8 @@ export class FederationUtxosListComponent implements OnInit { getGradientColor(value: number): string { const distanceToGreen = Math.abs(4032 - value); - const green = '#7CB342'; - const red = '#D81B60'; + const green = 'var(--green)'; + const red = 'var(--red)'; if (value < 0) { return red; diff --git a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.html b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.html index 2b0c49bd2..ac9953b4a 100644 --- a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.html +++ b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.html @@ -61,7 +61,7 @@ - + @@ -73,7 +73,7 @@ - + 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 3af119fad..62dd5c336 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 @@ -102,11 +102,11 @@ tr, td, th { } .credit { - color: #7CB342; + color: var(--green); } .debit { - color: #D81B60; + color: var(--red); } .glow-effect { @@ -118,6 +118,6 @@ tr, td, th { color: #777983; } 100% { - color: #D81B60; + color: var(--red); } } 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 9a7e6f0ea..a797b1658 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 @@ -31,7 +31,7 @@ } .card-text span { - color: #ffffff66; + color: var(--transparent-fg); font-size: 12px; top: 0px; } @@ -72,9 +72,9 @@ } .credit { - color: #7CB342; + color: var(--green); } .debit { - color: #D81B60; + color: var(--red); } \ No newline at end of file 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 fd7197a88..87a3c8be4 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 @@ -36,15 +36,15 @@ top: -2px; } .danger { - color: #D81B60; + color: var(--red); } .correct { - color: #7CB342; + color: var(--green); } } .card-text span { - color: #ffffff66; + color: var(--transparent-fg); font-size: 12px; top: 0px; } 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 04429d2ac..471bffea6 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 @@ -95,8 +95,8 @@ export class ReservesRatioComponent implements OnInit, OnChanges { lineStyle: { width: 6, color: [ - [0.49, '#D81B60'], - [1, '#7CB342'] + [0.49, 'var(--red)'], + [1, 'var(--green)'] ] } }, diff --git a/frontend/src/app/components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component.html b/frontend/src/app/components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component.html index 65b40f39c..a88797a74 100644 --- a/frontend/src/app/components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component.html +++ b/frontend/src/app/components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component.html @@ -11,9 +11,9 @@
BTC Holdings
-
{{ (+currentReserves.amount) / 100000000 | number: '1.2-2' }} BTC
+
{{ (+currentReserves.amount) / 100000000 | number: '1.2-2' }} BTC
- As of block {{ currentReserves.lastBlockUpdate }} + As of block {{ currentReserves.lastBlockUpdate }}
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 47d29eb45..dc9e9d83c 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 @@ -35,7 +35,7 @@ margin-bottom: 0; } .card-text span { - color: #ffffff66; + color: var(--transparent-fg); font-size: 12px; top: 0px; } diff --git a/frontend/src/app/components/search-form/search-results/search-results.component.scss b/frontend/src/app/components/search-form/search-results/search-results.component.scss index 5540d7e7a..370e4b39c 100644 --- a/frontend/src/app/components/search-form/search-results/search-results.component.scss +++ b/frontend/src/app/components/search-form/search-results/search-results.component.scss @@ -8,7 +8,7 @@ } .danger { - color: #dc3545; + color: var(--red); } .dropdown-menu { diff --git a/frontend/src/app/components/transactions-list/transactions-list.component.html b/frontend/src/app/components/transactions-list/transactions-list.component.html index 625a7c70e..1b3cc82eb 100644 --- a/frontend/src/app/components/transactions-list/transactions-list.component.html +++ b/frontend/src/app/components/transactions-list/transactions-list.component.html @@ -204,7 +204,7 @@ Peg-out to - + diff --git a/frontend/src/app/dashboard/dashboard.component.scss b/frontend/src/app/dashboard/dashboard.component.scss index 3acfbf9bb..84eabead2 100644 --- a/frontend/src/app/dashboard/dashboard.component.scss +++ b/frontend/src/app/dashboard/dashboard.component.scss @@ -105,7 +105,7 @@ font-size: 12px; } .bitcoin-color { - color: #b86d12; + color: var(--orange); } } .progress { diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index d8623e912..37a8a02cb 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -101,6 +101,7 @@ $dropdown-link-active-bg: $active-bg; --yellow: #ffd800; --grey: #6c757d; --tooltip-grey: #b1b1b1; + --orange: #b86d12; } html, body { diff --git a/frontend/src/theme-contrast.scss b/frontend/src/theme-contrast.scss index a72a090de..470bad2e9 100644 --- a/frontend/src/theme-contrast.scss +++ b/frontend/src/theme-contrast.scss @@ -98,4 +98,5 @@ $dropdown-link-active-bg: $active-bg; --yellow: #ffcc00; --grey: #7e7e7e; --tooltip-grey: #b1b1b1; + --orange: #ff9f00; } diff --git a/frontend/src/theme-wiz.scss b/frontend/src/theme-wiz.scss index a72a090de..470bad2e9 100644 --- a/frontend/src/theme-wiz.scss +++ b/frontend/src/theme-wiz.scss @@ -98,4 +98,5 @@ $dropdown-link-active-bg: $active-bg; --yellow: #ffcc00; --grey: #7e7e7e; --tooltip-grey: #b1b1b1; + --orange: #ff9f00; }