diff --git a/.github/dependabot.yml b/.github/dependabot.yml index 8352de555..c27a8ea5e 100644 --- a/.github/dependabot.yml +++ b/.github/dependabot.yml @@ -6,6 +6,11 @@ updates: schedule: interval: daily open-pull-requests-limit: 10 + cooldown: + default-days: 7 + semver-major-days: 30 + semver-minor-days: 14 + semver-patch-days: 3 ignore: - dependency-name: "*" update-types: @@ -33,6 +38,11 @@ updates: schedule: interval: daily open-pull-requests-limit: 10 + cooldown: + default-days: 7 + semver-major-days: 30 + semver-minor-days: 14 + semver-patch-days: 3 ignore: - dependency-name: "*" update-types: @@ -44,6 +54,11 @@ updates: directory: "/docker/backend" schedule: interval: weekly + cooldown: + default-days: 3 + semver-major-days: 14 + semver-minor-days: 7 + semver-patch-days: 3 ignore: - dependency-name: "*" update-types: @@ -53,6 +68,11 @@ updates: directory: "/docker/frontend" schedule: interval: weekly + cooldown: + default-days: 3 + semver-major-days: 14 + semver-minor-days: 7 + semver-patch-days: 3 ignore: - dependency-name: "*" update-types: @@ -62,6 +82,11 @@ updates: directory: "/" schedule: interval: weekly + cooldown: + default-days: 3 + semver-major-days: 14 + semver-minor-days: 7 + semver-patch-days: 3 ignore: - dependency-name: "*" update-types: diff --git a/frontend/generate-themes.js b/frontend/generate-themes.js index da7f06c20..ef8785203 100644 --- a/frontend/generate-themes.js +++ b/frontend/generate-themes.js @@ -3,7 +3,7 @@ const fs = require('fs'); const path = require('path'); const crypto = require('crypto'); -const THEMES = ['contrast', 'softsimon', 'bukele']; +const THEMES = ['contrast', 'softsimon', 'bukele', 'nymkappa']; const STAGING_DIR = path.join(__dirname, '.theme-build'); const DIST_DIR = path.join(__dirname, 'dist/mempool/browser'); const MANIFEST_FILE = path.join(__dirname, 'theme-manifest.json'); diff --git a/frontend/src/app/app.constants.ts b/frontend/src/app/app.constants.ts index 730da5a81..8bf6b73a2 100644 --- a/frontend/src/app/app.constants.ts +++ b/frontend/src/app/app.constants.ts @@ -82,6 +82,48 @@ export const contrastMempoolFeeColors = [ 'ffb700', ]; + export const lightMempoolFeeColors = [ + '49c284', + '99c246', + 'a0c343', + 'a7c240', + 'b0c13c', + 'b8c03b', + 'bebe3a', + 'beb238', + 'bcac37', + 'bba336', + 'b99e35', + 'b79334', + 'b68f33', + 'b68a32', + 'b48430', + 'b17f30', + 'b07b2f', + 'ae722e', + 'ad6b2d', + 'ab652b', + 'aa5b2a', + 'a95629', + 'a74c28', + 'a34126', + 'a13a25', + 'a02d24', + '9e2423', + '9c222a', + '9c2132', + '9b203a', + '99203e', + '972043', + '951f45', + '931e48', + '921d49', + '921c4e', + '901b50', + '8e1a53', + '8b1954', +]; + export const chartColors = [ '#A81524', '#D81B60', diff --git a/frontend/src/app/components/about/about.component.html b/frontend/src/app/components/about/about.component.html index 7c408f5d4..60a71fa77 100644 --- a/frontend/src/app/components/about/about.component.html +++ b/frontend/src/app/components/about/about.component.html @@ -2,7 +2,11 @@
® - + @if (isLightMode) { + + } @else { + + }
v{{ packetJsonVersion }} [{{ frontendGitCommitHash }}] [{{ stateService.env.GIT_COMMIT_HASH_MEMPOOL_SPACE }}] @@ -126,13 +130,23 @@ Blockstream - + @if (isLightMode) { + + + + } @else { + + } Unchained - + @if (isLightMode) { + + } @else { + + } Bitkey @@ -212,11 +226,19 @@ Onramp Bitcoin - + @if (isLightMode) { + + } @else { + + } Cake Wallet - + @if (isLightMode) { + + } @else { + + } Leather @@ -294,7 +316,11 @@ NixOS - + @if (isLightMode) { + + } @else { + + } StartOS @@ -384,13 +410,21 @@

Community Alliances

- + @if (isLightMode) { + + } @else { + + } - + @if (isLightMode) { + + } @else { + + }
@@ -439,7 +473,11 @@

Powered By

- + @if (isLightMode) { + + } @else { + + }

@@ -447,7 +485,11 @@

Managed By

- + @if (isLightMode) { + + } @else { + + }
diff --git a/frontend/src/app/components/about/about.component.scss b/frontend/src/app/components/about/about.component.scss index cb0babd61..630499166 100644 --- a/frontend/src/app/components/about/about.component.scss +++ b/frontend/src/app/components/about/about.component.scss @@ -198,7 +198,7 @@ margin: auto; line-height: 1.8; font-size: 87.5%; - color: #e83e8c; + color: var(--pink); word-wrap: break-word; font-family: SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace; ul { diff --git a/frontend/src/app/components/about/about.component.ts b/frontend/src/app/components/about/about.component.ts index 8b5a21bd2..75b4cbbe0 100644 --- a/frontend/src/app/components/about/about.component.ts +++ b/frontend/src/app/components/about/about.component.ts @@ -1,9 +1,9 @@ -import { ChangeDetectionStrategy, Component, ElementRef, Inject, LOCALE_ID, OnInit, ViewChild } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Inject, LOCALE_ID, OnInit, ViewChild } from '@angular/core'; import { WebsocketService } from '@app/services/websocket.service'; import { SeoService } from '@app/services/seo.service'; import { OpenGraphService } from '@app/services/opengraph.service'; import { StateService } from '@app/services/state.service'; -import { Observable } from 'rxjs'; +import { Observable, Subscription } from 'rxjs'; import { ApiService } from '@app/services/api.service'; import { IBackendInfo } from '@interfaces/websocket.interface'; import { Router, ActivatedRoute } from '@angular/router'; @@ -11,6 +11,7 @@ import { map, share, tap } from 'rxjs/operators'; import { ITranslators } from '@interfaces/node-api.interface'; import { DOCUMENT } from '@angular/common'; import { EnterpriseService } from '@app/services/enterprise.service'; +import { ThemeService } from '../../services/theme.service'; @Component({ selector: 'app-about', @@ -26,6 +27,8 @@ export class AboutComponent implements OnInit { packetJsonVersion = this.stateService.env.PACKAGE_JSON_VERSION; officialMempoolSpace = this.stateService.env.OFFICIAL_MEMPOOL_SPACE; showNavigateToSponsor = false; + themeStateSubscription: Subscription; + loadedTheme = 'default'; profiles$: Observable; translators$: Observable; @@ -41,6 +44,8 @@ export class AboutComponent implements OnInit { private apiService: ApiService, private router: Router, private route: ActivatedRoute, + private themeService: ThemeService, + private cd: ChangeDetectorRef, @Inject(LOCALE_ID) public locale: string, @Inject(DOCUMENT) private document: Document, ) { } @@ -88,6 +93,14 @@ export class AboutComponent implements OnInit { }), tap(() => this.goToAnchor()) ); + + this.themeStateSubscription = this.themeService.themeState$.subscribe((state) => { + if (state.loading) { + return; + } + this.loadedTheme = state.theme; + this.cd.markForCheck(); + }); } ngAfterViewInit() { @@ -137,4 +150,12 @@ export class AboutComponent implements OnInit { this.enterpriseService.goal(6); return true; } + + get isLightMode(): boolean { + return this.loadedTheme === 'nymkappa'; + } + + ngOnDestroy(): void { + this.themeStateSubscription?.unsubscribe(); + } } diff --git a/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.html b/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.html index d6650e47a..449188c19 100644 --- a/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.html +++ b/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.html @@ -412,18 +412,18 @@

Pay  with

@if (canPayWithCashapp) { - + } @if (canPayWithApplePay) { @if (canPayWithCashapp) { }
- +
} @if (canPayWithGooglePay) { @if (canPayWithCashapp || canPayWithApplePay) { }
- +
} @if (canPayWithCardOnFile) { diff --git a/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.scss b/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.scss index c54612429..9bbc76bb9 100644 --- a/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.scss +++ b/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.scss @@ -45,15 +45,15 @@ .rate { font-size: 0.9em; .symbol { - color: white; + color: var(--fg); } } } } .btn-border { - border: solid 1px black; - background-color: #0c4a87; + border: solid 1px color-mix(in srgb, var(--primary) 68%, black); + background-color: color-mix(in srgb, var(--primary) 77%, black); } .feerate.active { @@ -172,11 +172,11 @@ } .table-background { - background-color: var(--bg); + background-color: var(--stat-box-bg); } .checkout-text { - color: rgb(186, 186, 186); + color: var(--transparent-fg); font-size: 14px; } diff --git a/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.ts b/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.ts index 53e2c1caf..8cebc26cb 100644 --- a/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.ts +++ b/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.ts @@ -13,6 +13,7 @@ import { EnterpriseService } from '@app/services/enterprise.service'; import { ApiService } from '@app/services/api.service'; import { isDevMode } from '@angular/core'; import { StorageService } from '@app/services/storage.service'; +import { ThemeService } from '../../services/theme.service'; export type PaymentMethod = 'balance' | 'bitcoin' | 'cashapp' | 'applePay' | 'googlePay' | 'cardOnFile'; @@ -133,6 +134,9 @@ export class AccelerateCheckout implements OnInit, OnDestroy { loadingBtcpayInvoice = false; invoice = undefined; + themeStateSubscription: Subscription; + loadedTheme = 'default'; + constructor( public stateService: StateService, private apiService: ApiService, @@ -142,7 +146,8 @@ export class AccelerateCheckout implements OnInit, OnDestroy { private cd: ChangeDetectorRef, private authService: AuthServiceMempool, private enterpriseService: EnterpriseService, - private storageService: StorageService + private storageService: StorageService, + private themeService: ThemeService, ) { this.isProdDomain = this.stateService.isProdDomain; @@ -183,6 +188,14 @@ export class AccelerateCheckout implements OnInit, OnDestroy { this.conversions = conversions; } ); + + this.themeStateSubscription = this.themeService.themeState$.subscribe((state) => { + if (state.loading) { + return; + } + this.loadedTheme = state.theme; + this.cd.markForCheck(); + }); } ngOnDestroy(): void { @@ -192,6 +205,9 @@ export class AccelerateCheckout implements OnInit, OnDestroy { if (this.authSubscription$) { this.authSubscription$.unsubscribe(); } + if (this.themeStateSubscription) { + this.themeStateSubscription.unsubscribe(); + } } ngOnChanges(changes: SimpleChanges): void { @@ -1092,6 +1108,10 @@ export class AccelerateCheckout implements OnInit, OnDestroy { return Date.now() - this.timePaid; } + get isLightMode(): boolean { + return this.loadedTheme === 'nymkappa'; + } + @HostListener('window:resize', ['$event']) onResize(): void { this.isMobile = window.innerWidth <= 767.98; diff --git a/frontend/src/app/components/accelerate-checkout/accelerate-fee-graph.component.scss b/frontend/src/app/components/accelerate-checkout/accelerate-fee-graph.component.scss index 919fdec4a..4322fd75c 100644 --- a/frontend/src/app/components/accelerate-checkout/accelerate-fee-graph.component.scss +++ b/frontend/src/app/components/accelerate-checkout/accelerate-fee-graph.component.scss @@ -50,7 +50,7 @@ right: 0; top: 0; left: -4.5em; - border-top: dashed white 1.5px; + border-top: dashed var(--fg) 1.5px; .fee-rate { width: 100%; @@ -68,7 +68,7 @@ } .rate .symbol { - color: white; + color: var(--fg); } } } diff --git a/frontend/src/app/components/acceleration-timeline/acceleration-timeline-tooltip.component.html b/frontend/src/app/components/acceleration-timeline/acceleration-timeline-tooltip.component.html index fb4549c50..522359607 100644 --- a/frontend/src/app/components/acceleration-timeline/acceleration-timeline-tooltip.component.html +++ b/frontend/src/app/components/acceleration-timeline/acceleration-timeline-tooltip.component.html @@ -21,26 +21,26 @@ Fee - {{ accelerationInfo.fee | number }} sats + {{ accelerationInfo.fee | number }} sats Out-of-band fees @if (accelerationInfo.status === 'accelerated') { - {{ accelerationInfo.feeDelta | number }} sats + {{ accelerationInfo.feeDelta | number }} sats } @else { - {{ accelerationInfo.bidBoost | number }} sats + {{ accelerationInfo.bidBoost | number }} sats } @if (accelerationInfo.status === 'seen') { Fee rate - + } @else if (accelerationInfo.status === 'accelerated' || accelerationInfo.status === 'mined') { Accelerated fee rate @if (accelerationInfo.status === 'accelerated') { - + } @else { - + } } @@ -48,12 +48,14 @@ Accelerated by - +
diff --git a/frontend/src/app/components/acceleration-timeline/acceleration-timeline-tooltip.component.scss b/frontend/src/app/components/acceleration-timeline/acceleration-timeline-tooltip.component.scss index a8c4cd5cf..1ad826621 100644 --- a/frontend/src/app/components/acceleration-timeline/acceleration-timeline-tooltip.component.scss +++ b/frontend/src/app/components/acceleration-timeline/acceleration-timeline-tooltip.component.scss @@ -1,7 +1,7 @@ .acceleration-tooltip { position: fixed; z-index: 3; - background: color-mix(in srgb, var(--active-bg) 95%, transparent); + background: color-mix(in srgb, #11131f 95%, transparent); border-radius: 4px; box-shadow: 1px 1px 10px rgba(0,0,0,0.5); color: var(--tooltip-grey); @@ -26,15 +26,6 @@ vertical-align: top; } - .pool-logo { - width: 22px; - height: 22px; - position: relative; - top: -1px; - margin-right: 4px; - margin-bottom: 4px; - } - .oobFees { color: #905cf4; } diff --git a/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss b/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss index 2bd46199a..d05afa3d0 100644 --- a/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss +++ b/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss @@ -171,7 +171,7 @@ width: 100%; height: 100%; border-radius: 50%; - background: white; + background: var(--fg); z-index: 1; } @@ -224,7 +224,7 @@ .badge.badge-waiting { opacity: 0.5; background-color: var(--grey); - color: white; + color: var(--nav-icon); } .badge.badge-accelerated { 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 5ece2284d..d27d7db1b 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 @@ -225,7 +225,7 @@ export class AccelerationFeesGraphComponent implements OnInit, OnChanges, OnDest name: this.totalBidBoostLabel, inactiveColor: 'rgb(110, 112, 121)', textStyle: { - color: 'white', + color: 'var(--fg)', }, itemStyle: { color: '#FFB300', @@ -236,7 +236,7 @@ export class AccelerationFeesGraphComponent implements OnInit, OnChanges, OnDest name: this.acceleratedLabel, inactiveColor: 'rgb(110, 112, 121)', textStyle: { - color: 'white', + color: 'var(--fg)', }, icon: 'roundRect', }, 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 733116776..e93898d97 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 @@ -55,7 +55,7 @@ top: 0px; } .fee-text{ - border-bottom: 1px solid #ffffff1c; + border-bottom: 1px solid var(--border-subtle); width: fit-content; margin: auto; line-height: 1.45; diff --git a/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.html b/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.html index 47d653f78..e6763a9a8 100644 --- a/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.html +++ b/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.html @@ -52,9 +52,9 @@ @if (acceleration.minedByPoolUniqueId && pools[acceleration.minedByPoolUniqueId]) { - - - {{ pools[acceleration.minedByPoolUniqueId].name }} + + } @else { ~ 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 9d695ce38..06e1ca48c 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 @@ -83,14 +83,6 @@ tr, td, th { @media (max-width: 700px) { display: none; } - - .pool-logo { - width: 18px; - height: 18px; - position: relative; - top: -1px; - margin-right: 2px; - } } .status { @@ -189,7 +181,7 @@ tr, td, th { } .no-data { - color: rgba(255, 255, 255, 0.4); + color: var(--transparent-fg); display: flex; height: 280px; width: 100%; 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 d37cfaf5b..c55654d50 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 @@ -44,13 +44,13 @@
24h - | + | 1m - | + | 1y - | + | all
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 e6763f60a..9b4c93cb0 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 @@ -188,5 +188,5 @@ } .inactive { - color: #ffffff66; + color: var(--transparent-fg); } \ No newline at end of file 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 733116776..e93898d97 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 @@ -55,7 +55,7 @@ top: 0px; } .fee-text{ - border-bottom: 1px solid #ffffff1c; + border-bottom: 1px solid var(--border-subtle); width: fit-content; margin: auto; line-height: 1.45; 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 c117e8fc0..2d4d77f13 100644 --- a/frontend/src/app/components/address-graph/address-graph.component.ts +++ b/frontend/src/app/components/address-graph/address-graph.component.ts @@ -216,7 +216,7 @@ export class AddressGraphComponent implements OnChanges, OnDestroy { name: $localize`:@@7e69426bd97a606d8ae6026762858e6e7c86a1fd:Balance`, inactiveColor: 'var(--grey)', textStyle: { - color: 'white', + color: 'var(--fg)', }, icon: 'roundRect', }, @@ -224,7 +224,7 @@ export class AddressGraphComponent implements OnChanges, OnDestroy { name: 'Fiat', inactiveColor: 'var(--grey)', textStyle: { - color: 'white', + color: 'var(--fg)', }, icon: 'roundRect', } @@ -413,7 +413,7 @@ export class AddressGraphComponent implements OnChanges, OnDestroy { right: this.adjustedRight, selectedDataBackground: { lineStyle: { - color: '#fff', + color: 'var(--fg)', opacity: 0.45, }, }, @@ -538,7 +538,7 @@ export class AddressGraphComponent implements OnChanges, OnDestroy { top: this.image ? imgHeight + 10 : 0, z: 100, style: { - fill: '#fff', + fill: 'var(--fg)', text: this.label, font: this.isMobile() ? '18px sans-serif' : '24px sans-serif', textAlign: 'center' diff --git a/frontend/src/app/components/address/address.component.scss b/frontend/src/app/components/address/address.component.scss index ebd3130a1..06e15ad67 100644 --- a/frontend/src/app/components/address/address.component.scss +++ b/frontend/src/app/components/address/address.component.scss @@ -2,7 +2,7 @@ position: absolute; top: 30px; right: 0px; - border: solid 10px var(--active-bg); + border: solid 10px var(--secondary); border-radius: 5px; background-color: #fff; padding: 10px; @@ -132,4 +132,4 @@ h1 { padding-top: 0; padding-bottom: 0; font-size: 0.8rem; -} \ No newline at end of file +} diff --git a/frontend/src/app/components/amount/amount.component.html b/frontend/src/app/components/amount/amount.component.html index ac469939f..56a8d46b1 100644 --- a/frontend/src/app/components/amount/amount.component.html +++ b/frontend/src/app/components/amount/amount.component.html @@ -23,7 +23,7 @@ @if ((viewAmountMode$ | async) === 'btc' || (viewAmountMode$ | async) === 'fiat' || ignoreViewMode === true) { ‎{{ addPlus && satoshis >= 0 ? '+' : '' }}{{ satoshis / 100000000 | number : digitsInfo }} - + BTC } @else { @@ -32,7 +32,7 @@ } @else { ‎{{ addPlus && satoshis >= 0 ? '+' : '' }}{{ satoshis | amountShortener : (satoshis < 1000 && satoshis > -1000 ? 0 : 1) : undefined : true }} } - + sats } diff --git a/frontend/src/app/components/amount/amount.component.ts b/frontend/src/app/components/amount/amount.component.ts index 2ad0c0fc5..817f5741a 100644 --- a/frontend/src/app/components/amount/amount.component.ts +++ b/frontend/src/app/components/amount/amount.component.ts @@ -27,6 +27,7 @@ export class AmountComponent implements OnInit, OnDestroy { @Input() forceBtc: boolean = false; @Input() ignoreViewMode: boolean = false; @Input() forceBlockConversion: boolean = false; // true = displays fiat price as 0 if blockConversion is undefined instead of falling back to conversions + @Input() unitStyle: any; constructor( private stateService: StateService, diff --git a/frontend/src/app/components/bitcoin-invoice/bitcoin-invoice.component.html b/frontend/src/app/components/bitcoin-invoice/bitcoin-invoice.component.html index 74a6f8bf1..8c320b557 100644 --- a/frontend/src/app/components/bitcoin-invoice/bitcoin-invoice.component.html +++ b/frontend/src/app/components/bitcoin-invoice/bitcoin-invoice.component.html @@ -19,7 +19,7 @@
-
+
diff --git a/frontend/src/app/components/bitcoin-invoice/bitcoin-invoice.component.scss b/frontend/src/app/components/bitcoin-invoice/bitcoin-invoice.component.scss index b88a2ef74..cf4f3c576 100644 --- a/frontend/src/app/components/bitcoin-invoice/bitcoin-invoice.component.scss +++ b/frontend/src/app/components/bitcoin-invoice/bitcoin-invoice.component.scss @@ -146,5 +146,5 @@ .input-dark { background-color: var(--bg); border-color: var(--active-bg); - color: white; + color: var(--fg); } diff --git a/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.ts b/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.ts index 8394ce608..86c7e4619 100644 --- a/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.ts +++ b/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.ts @@ -156,7 +156,7 @@ export class BlockFeeRatesGraphComponent implements OnInit { name: percentile, inactiveColor: 'rgb(110, 112, 121)', textStyle: { - color: 'white', + color: 'var(--fg)', }, icon: 'roundRect', enabled: false, diff --git a/frontend/src/app/components/block-fees-graph/block-fees-graph.component.ts b/frontend/src/app/components/block-fees-graph/block-fees-graph.component.ts index beda9ccac..82caae836 100644 --- a/frontend/src/app/components/block-fees-graph/block-fees-graph.component.ts +++ b/frontend/src/app/components/block-fees-graph/block-fees-graph.component.ts @@ -192,7 +192,7 @@ export class BlockFeesGraphComponent implements OnInit { name: feesBtcLabel, inactiveColor: 'rgb(110, 112, 121)', textStyle: { - color: 'white', + color: 'var(--fg)', }, icon: 'roundRect', }, @@ -200,7 +200,7 @@ export class BlockFeesGraphComponent implements OnInit { name: feesFiatLabel, inactiveColor: 'rgb(110, 112, 121)', textStyle: { - color: 'white', + color: 'var(--fg)', }, icon: 'roundRect', }, diff --git a/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.ts b/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.ts index 12111799c..9ac3fb01f 100644 --- a/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.ts +++ b/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.ts @@ -245,7 +245,7 @@ export class BlockFeesSubsidyGraphComponent implements OnInit { name: this.subsidyLabel, inactiveColor: 'var(--grey)', textStyle: { - color: 'white', + color: 'var(--fg)', }, icon: 'roundRect', }, @@ -253,7 +253,7 @@ export class BlockFeesSubsidyGraphComponent implements OnInit { name: this.feesLabel, inactiveColor: 'var(--grey)', textStyle: { - color: 'white', + color: 'var(--fg)', }, icon: 'roundRect', }, @@ -261,7 +261,7 @@ export class BlockFeesSubsidyGraphComponent implements OnInit { name: this.subsidyUsdLabel, inactiveColor: 'var(--grey)', textStyle: { - color: 'white', + color: 'var(--fg)', }, icon: 'roundRect', }, @@ -269,7 +269,7 @@ export class BlockFeesSubsidyGraphComponent implements OnInit { name: this.feesUsdLabel, inactiveColor: 'var(--grey)', textStyle: { - color: 'white', + color: 'var(--fg)', }, icon: 'roundRect', }, @@ -277,7 +277,7 @@ export class BlockFeesSubsidyGraphComponent implements OnInit { name: this.subsidyPercentLabel, inactiveColor: 'var(--grey)', textStyle: { - color: 'white', + color: 'var(--fg)', }, icon: 'roundRect', }, @@ -285,7 +285,7 @@ export class BlockFeesSubsidyGraphComponent implements OnInit { name: this.feesPercentLabel, inactiveColor: 'var(--grey)', textStyle: { - color: 'white', + color: 'var(--fg)', }, icon: 'roundRect', }, 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 c001ab8b9..268212729 100644 --- a/frontend/src/app/components/block-filters/block-filters.component.scss +++ b/frontend/src/app/components/block-filters/block-filters.component.scss @@ -55,7 +55,7 @@ h5 { font-size: 0.8rem; - color: white; + color: var(--fg); margin: 0; margin-top: 0.5em; } @@ -113,6 +113,7 @@ pointer-events: all; line-height: 1.5; background: #181b2daf; + color: #fff; &:first-child { border-top-left-radius: 0.2rem; @@ -156,7 +157,7 @@ &:hover { opacity: 1; - background: #181b2d7f; + background: var(--block-goggles-overlay); } } @@ -166,7 +167,7 @@ background: none; &:hover { - background: #181b2d7f; + background: var(--block-goggles-overlay); } } } @@ -178,14 +179,14 @@ background: none; &:hover { - background: #181b2d7f; + background: var(--block-goggles-overlay); } } } &.menu-open { pointer-events: all; - background: #181b2d7f; + background: var(--block-goggles-overlay); } &.small { diff --git a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.scss b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.scss index af5135db7..17a4704f4 100644 --- a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.scss +++ b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.scss @@ -50,7 +50,7 @@ .loader-wrapper { position: absolute; - background: #181b2d7f; + background: var(--block-goggles-overlay); left: 0; right: 0; top: 0; diff --git a/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.html b/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.html index ac919c1cd..9443c7fe6 100644 --- a/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.html +++ b/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.html @@ -36,32 +36,32 @@ Amount - + Fee - {{ fee | number }} sats   + {{ fee | number }} sats   Fee rate - + Effective fee rate Accelerated fee rate - + Virtual size - + Weight - + Audit status 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 0b2c05948..ac362fb75 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: color-mix(in srgb, var(--active-bg) 95%, transparent); + background: color-mix(in srgb, #11131f 95%, transparent); border-radius: 4px; box-shadow: 1px 1px 10px rgba(0,0,0,0.5); color: var(--tooltip-grey); @@ -13,12 +13,18 @@ max-width: 400px; pointer-events: none; z-index: 11; + --link-color: #1bd8f4; + --link-hover-color: #09a3ba; &.clickable { pointer-events: all; } } +.block-overview-tooltip ::ng-deep .fixed-unit-color .symbol { + color: #ffffff66; +} + th, td { &.label { width: 30%; diff --git a/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.ts b/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.ts index 3f2786504..137cabe74 100644 --- a/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.ts +++ b/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.ts @@ -188,7 +188,7 @@ export class BlockRewardsGraphComponent implements OnInit { name: 'Rewards BTC', inactiveColor: 'rgb(110, 112, 121)', textStyle: { - color: 'white', + color: 'var(--fg)', }, icon: 'roundRect', }, @@ -196,7 +196,7 @@ export class BlockRewardsGraphComponent implements OnInit { name: 'Rewards ' + this.currency, inactiveColor: 'rgb(110, 112, 121)', textStyle: { - color: 'white', + color: 'var(--fg)', }, icon: 'roundRect', }, diff --git a/frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.ts b/frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.ts index 915ed66b5..1223be9c8 100644 --- a/frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.ts +++ b/frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.ts @@ -188,7 +188,7 @@ export class BlockSizesWeightsGraphComponent implements OnInit { name: $localize`:@@7faaaa08f56427999f3be41df1093ce4089bbd75:Size`, inactiveColor: 'rgb(110, 112, 121)', textStyle: { - color: 'white', + color: 'var(--fg)', }, icon: 'roundRect', }, @@ -196,7 +196,7 @@ export class BlockSizesWeightsGraphComponent implements OnInit { name: $localize`:@@919f2fd60a898850c24b1584362bbf18a4628bcb:Weight`, inactiveColor: 'rgb(110, 112, 121)', textStyle: { - color: 'white', + color: 'var(--fg)', }, icon: 'roundRect', }, @@ -204,7 +204,7 @@ export class BlockSizesWeightsGraphComponent implements OnInit { name: $localize`Size per weight`, inactiveColor: 'rgb(110, 112, 121)', textStyle: { - color: 'white', + color: 'var(--fg)', }, icon: 'roundRect', }, @@ -262,7 +262,7 @@ export class BlockSizesWeightsGraphComponent implements OnInit { label: { position: 'end', show: true, - color: '#ffffff', + color: 'var(--fg)', formatter: `1 MB` } }], diff --git a/frontend/src/app/components/block/block.component.html b/frontend/src/app/components/block/block.component.html index b18db6584..be0a094ac 100644 --- a/frontend/src/app/components/block/block.component.html +++ b/frontend/src/app/components/block/block.component.html @@ -195,8 +195,7 @@ {{ block.extras.pool.minerNames[1] }} } - - {{ block.extras.pool.name }} + @@ -254,8 +253,7 @@

Stale Block @if (block?.extras?.pool) { - - {{ block?.extras?.pool.name }} + }

} @else { @@ -288,8 +286,7 @@ } @else { Winning Block @if (canonicalBlock?.extras?.pool) { - - {{ canonicalBlock?.extras?.pool.name }} + } } } @else { diff --git a/frontend/src/app/components/block/block.component.scss b/frontend/src/app/components/block/block.component.scss index 2e9bfc575..9225e8b8a 100644 --- a/frontend/src/app/components/block/block.component.scss +++ b/frontend/src/app/components/block/block.component.scss @@ -65,7 +65,7 @@ } .block-subtitle.actual fa-icon { - color: rgba(255, 255, 255, 0.4); + color: var(--transparent-fg); font-size: 18px; margin-left: 8px; } @@ -86,20 +86,6 @@ h1 { vertical-align: top; } -.pool-logo { - width: 25px; - height: 25px; - position: relative; - top: -1px; - margin-right: 2px; - - &.large { - width: 30px; - height: 30px; - margin: 0 0.3em; - } -} - .row { flex-direction: column; @media (min-width: 768px) { @@ -292,14 +278,6 @@ h1 { } } -.pool-logo { - width: 15px; - height: 15px; - position: relative; - top: -1px; - margin-right: 2px; -} - .stale-block-alert { border-radius: 0; margin-bottom: 0; diff --git a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html index d97ece4ff..fee6516aa 100644 --- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html +++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html @@ -79,11 +79,11 @@
- + {{ block.extras.pool.minerNames[1] }} - {{ block.extras.pool.name }} +
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 e53d2e7ae..692891958 100644 --- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss +++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss @@ -26,7 +26,7 @@ } .timestamp-info { - color: #fff; + color: var(--fg); position: relative; z-index: 11; font-size: 14px; @@ -136,7 +136,7 @@ position:absolute; top: calc(-0.192 * var(--block-size)); left: calc(-0.16 * var(--block-size)); - background-color: #232838; + background-color: var(--block-top); transform:skew(40deg); transform-origin:top; } @@ -148,7 +148,7 @@ position: absolute; top: calc(-0.096 * var(--block-size)); left: calc(-0.16 * var(--block-size)); - background-color: #191c27; + background-color: var(--block-side); transform: skewY(50deg); transform-origin: top; @@ -173,7 +173,7 @@ position:absolute; top: calc(-0.096 * var(--block-size)); left: calc(-0.08 * var(--block-size)); - background-color: #232838; + background-color: var(--block-top); transform:skew(40deg); transform-origin:top; } @@ -185,7 +185,7 @@ position: absolute; top: calc(-0.048 * var(--block-size)); left: calc(-0.08 * var(--block-size)); - background-color: #191c27; + background-color: var(--block-side); transform: skewY(50deg); transform-origin: top; @@ -220,7 +220,7 @@ height: 0; border-left: calc(var(--block-size) * 0.2) solid transparent; border-right: calc(var(--block-size) * 0.2) solid transparent; - border-bottom: calc(var(--block-size) * 0.2) solid var(--fg); + border-bottom: calc(var(--block-size) * 0.2) solid var(--nav-icon); } .flashing { @@ -247,7 +247,7 @@ position: relative; top: 19px; z-index: 101; - color: #FFF; + color: var(--fg); overflow: hidden; text-overflow: ellipsis; max-width: 145px; @@ -257,18 +257,6 @@ } } -.pool-logo { - width: 15px; - height: 15px; - position: relative; - top: -1px; - margin-right: 2px; -} - -.pool-logo.faded { - filter: grayscale(100%) brightness(1.5); -} - .animated { transition: all 0.15s ease-in-out; white-space: nowrap; @@ -285,7 +273,7 @@ width: calc(0.6 * var(--block-size)); height: calc(0.25 * var(--block-size)); border-left: solid calc(0.3 * var(--block-size)) transparent; - border-bottom: solid calc(0.3 * var(--block-size)) white; + border-bottom: solid calc(0.3 * var(--block-size)) var(--fg); border-right: solid calc(0.3 * var(--block-size)) transparent; transform: translate(calc(0.2 * var(--block-size)), calc(1.1 * var(--block-size))); border-radius: 2px; diff --git a/frontend/src/app/components/blockchain/blockchain.component.scss b/frontend/src/app/components/blockchain/blockchain.component.scss index 32225598a..68a301eea 100644 --- a/frontend/src/app/components/blockchain/blockchain.component.scss +++ b/frontend/src/app/components/blockchain/blockchain.component.scss @@ -53,7 +53,7 @@ } .time-toggle { - color: var(--fg); + color: var(--nav-icon); font-size: 0.8rem; position: absolute; bottom: -2.2em; @@ -67,7 +67,7 @@ } .block-display-toggle { - color: var(--fg); + color: var(--nav-icon); font-size: 0.8rem; position: absolute; bottom: 16.1em; diff --git a/frontend/src/app/components/blocks-list/blocks-list.component.html b/frontend/src/app/components/blocks-list/blocks-list.component.html index 56a68692a..737e636c0 100644 --- a/frontend/src/app/components/blocks-list/blocks-list.component.html +++ b/frontend/src/app/components/blocks-list/blocks-list.component.html @@ -35,16 +35,12 @@
- - {{ block.extras.pool.name }} + {{ block.extras.coinbaseRaw | hex2ascii }}
- - {{ block.extras.pool.name }} + {{ block.extras.coinbaseRaw | hex2ascii }}
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 6c47eb0bf..1ec55b6ac 100644 --- a/frontend/src/app/components/blocks-list/blocks-list.component.scss +++ b/frontend/src/app/components/blocks-list/blocks-list.component.scss @@ -39,7 +39,7 @@ tr, td, th { } .clear-link { - color: white; + color: var(--fg); } .disabled { @@ -73,16 +73,6 @@ tr, td, th { width: 60%; } } -.pool-name { - display: inline-block; - vertical-align: text-top; - padding-left: 10px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - max-width: 160px; -} - .height { width: 8%; } diff --git a/frontend/src/app/components/calculator/calculator.component.html b/frontend/src/app/components/calculator/calculator.component.html index fd939db86..05329c7cb 100644 --- a/frontend/src/app/components/calculator/calculator.component.html +++ b/frontend/src/app/components/calculator/calculator.component.html @@ -20,7 +20,7 @@ [maxDate]="todayDateModel" [dayTemplate]="dayTemplate" /> - +
diff --git a/frontend/src/app/components/clipboard/clipboard.component.scss b/frontend/src/app/components/clipboard/clipboard.component.scss index 6ae620ae7..49c607a8b 100644 --- a/frontend/src/app/components/clipboard/clipboard.component.scss +++ b/frontend/src/app/components/clipboard/clipboard.component.scss @@ -8,8 +8,8 @@ } .copied-message { - background: color-mix(in srgb, var(--active-bg) 95%, transparent); - color: var(--fg); + background: color-mix(in srgb, #11131f 95%, transparent); + color: var(--tooltip-grey); font-family: sans-serif; font-size: .8rem; font-weight: 400; diff --git a/frontend/src/app/components/clock/clock.component.html b/frontend/src/app/components/clock/clock.component.html index 3d23f68dc..8c4eafd22 100644 --- a/frontend/src/app/components/clock/clock.component.html +++ b/frontend/src/app/components/clock/clock.component.html @@ -40,7 +40,7 @@

Price

- +

diff --git a/frontend/src/app/components/clock/clock.component.scss b/frontend/src/app/components/clock/clock.component.scss index 7423c1d8f..8c913b9f5 100644 --- a/frontend/src/app/components/clock/clock.component.scss +++ b/frontend/src/app/components/clock/clock.component.scss @@ -56,7 +56,7 @@ ::ng-deep .symbol { font-size: inherit; - color: white; + color: var(--fg); } } diff --git a/frontend/src/app/components/clockchain/clockchain.component.scss b/frontend/src/app/components/clockchain/clockchain.component.scss index 6ffc144e9..89d12cd6c 100644 --- a/frontend/src/app/components/clockchain/clockchain.component.scss +++ b/frontend/src/app/components/clockchain/clockchain.component.scss @@ -3,7 +3,7 @@ left: -0.5px; top: 0; .divider-line { - stroke: white; + stroke: var(--nav-icon); stroke-width: 4px; stroke-linecap: butt; stroke-dasharray: 25px 25px; diff --git a/frontend/src/app/components/custom-dashboard/custom-dashboard.component.html b/frontend/src/app/components/custom-dashboard/custom-dashboard.component.html index e52a0ae10..e54603789 100644 --- a/frontend/src/app/components/custom-dashboard/custom-dashboard.component.html +++ b/frontend/src/app/components/custom-dashboard/custom-dashboard.component.html @@ -327,7 +327,7 @@
- +
{{ widget.props?.label }} diff --git a/frontend/src/app/components/difficulty/difficulty-tooltip.component.scss b/frontend/src/app/components/difficulty/difficulty-tooltip.component.scss index e4fd989af..972a46420 100644 --- a/frontend/src/app/components/difficulty/difficulty-tooltip.component.scss +++ b/frontend/src/app/components/difficulty/difficulty-tooltip.component.scss @@ -1,6 +1,6 @@ .difficulty-tooltip { position: fixed; - background: color-mix(in srgb, var(--active-bg) 95%, transparent); + background: color-mix(in srgb, #11131f 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/fee-distribution-graph/fee-distribution-graph.component.ts b/frontend/src/app/components/fee-distribution-graph/fee-distribution-graph.component.ts index 34d2c6d66..2a7aeeab5 100644 --- a/frontend/src/app/components/fee-distribution-graph/fee-distribution-graph.component.ts +++ b/frontend/src/app/components/fee-distribution-graph/fee-distribution-graph.component.ts @@ -167,7 +167,7 @@ export class FeeDistributionGraphComponent implements OnInit, OnChanges, OnDestr label: { show: true, position: 'top', - color: '#ffffff', + color: 'var(--fg)', textShadowBlur: 0, fontSize: this.smallScreen ? 10 : 12, formatter: (label: { data: number[] }): string => { 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 d1a5b4fff..1fe464fa8 100644 --- a/frontend/src/app/components/fees-box/fees-box.component.scss +++ b/frontend/src/app/components/fees-box/fees-box.component.scss @@ -41,7 +41,7 @@ top: 0px; } .fee-text{ - border-bottom: 1px solid #ffffff1c; + border-bottom: 1px solid var(--border-subtle); width: fit-content; margin: auto; font-size: 20px; @@ -79,7 +79,7 @@ display: flex; flex-direction: row; transition: background-color 1s; - color: #fff; + color: var(--fg); &.priority { width: 75%; border-radius: 0px 10px 10px 0px; @@ -103,10 +103,10 @@ height: 22px; background: repeating-linear-gradient( 90deg, - rgb(45, 51, 72), - rgb(45, 51, 72) 2px, - rgb(29, 31, 49) 2px, - rgb(29, 31, 49) 4px + var(--secondary), + var(--secondary) 2px, + var(--bg) 2px, + var(--bg) 4px ); } } diff --git a/frontend/src/app/components/github-login.component/github-login.component.html b/frontend/src/app/components/github-login.component/github-login.component.html index 13d5ee049..e8e04cf0f 100644 --- a/frontend/src/app/components/github-login.component/github-login.component.html +++ b/frontend/src/app/components/github-login.component/github-login.component.html @@ -1,5 +1,5 @@ - {{ buttonString }} + {{ buttonString }} diff --git a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts index ca3a42bd2..5c429fd6c 100644 --- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts +++ b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts @@ -292,7 +292,7 @@ export class HashrateChartComponent implements OnInit { name: $localize`:@@79a9dc5b1caca3cbeb1733a19515edacc5fc7920:Hashrate`, inactiveColor: 'rgb(110, 112, 121)', textStyle: { - color: 'white', + color: 'var(--fg)', }, icon: 'roundRect', itemStyle: { @@ -303,7 +303,7 @@ export class HashrateChartComponent implements OnInit { name: $localize`:@@25148835d92465353fc5fe8897c27d5369978e5a:Difficulty`, inactiveColor: 'rgb(110, 112, 121)', textStyle: { - color: 'white', + color: 'var(--fg)', }, icon: 'roundRect', }, @@ -311,7 +311,7 @@ export class HashrateChartComponent implements OnInit { name: $localize`Hashrate (MA)`, inactiveColor: 'rgb(110, 112, 121)', textStyle: { - color: 'white', + color: 'var(--fg)', }, icon: 'roundRect', itemStyle: { diff --git a/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts b/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts index 53dc0e54d..cc45cbc7f 100644 --- a/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts +++ b/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts @@ -174,7 +174,7 @@ export class HashrateChartPoolsComponent implements OnInit { name: name, inactiveColor: 'rgb(110, 112, 121)', textStyle: { - color: 'white', + color: 'var(--fg)', }, icon: 'roundRect', itemStyle: { diff --git a/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts b/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts index eaf588527..dfec9f355 100644 --- a/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts +++ b/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts @@ -137,7 +137,7 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges, On silent: true, symbol: 'none', lineStyle: { - color: '#fff', + color: 'var(--fg)', opacity: 1, width: 2, }, @@ -145,7 +145,7 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges, On yAxis: 1667, label: { show: false, - color: '#ffffff', + color: 'var(--fg)', } }], } @@ -156,12 +156,19 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges, On name: 'MA', data: this.MA, type: 'line', + color: 'var(--fg)', smooth: false, showSymbol: false, symbol: 'none', lineStyle: { width: 2, - color: 'white', + color: 'var(--fg)', + }, + emphasis: { + lineStyle: { + width: 2, + color: 'var(--fg)', + }, } }); } @@ -191,11 +198,12 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges, On bottom: 0, selectedDataBackground: { lineStyle: { - color: '#fff', + color: 'var(--fg)', opacity: 0.45, }, areaStyle: { opacity: 0, + color: 'var(--fg)', } }, }], 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 77077987a..94a570a55 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 @@ -133,7 +133,7 @@ export class LbtcPegsGraphComponent implements OnInit, OnChanges { name: 'LBTC', inactiveColor: 'var(--grey)', textStyle: { - color: 'white', + color: 'var(--fg)', }, icon: 'roundRect', }, @@ -141,7 +141,7 @@ export class LbtcPegsGraphComponent implements OnInit, OnChanges { name: 'BTC', inactiveColor: 'var(--grey)', textStyle: { - color: 'white', + color: 'var(--fg)', }, icon: 'roundRect', }, @@ -149,7 +149,7 @@ export class LbtcPegsGraphComponent implements OnInit, OnChanges { name: 'USD', inactiveColor: 'var(--grey)', textStyle: { - color: 'white', + color: 'var(--fg)', }, icon: 'roundRect', } 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 e831a433a..5854a0ea2 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 @@ -41,8 +41,8 @@ top: 0px; } .fee-text{ - border-bottom: 1px solid #ffffff1c; - color: #ffffff; + border-bottom: 1px solid var(--border-subtle); + color: var(--fg); width: fit-content; margin: auto; line-height: 1.45; 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 186b61ff5..e27712770 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 @@ -37,7 +37,7 @@ top: 0px; } .fee-text{ - border-bottom: 1px solid #ffffff1c; + border-bottom: 1px solid var(--border-subtle); width: fit-content; margin: auto; line-height: 1.45; 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 dc9e9d83c..e33589855 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 @@ -40,8 +40,8 @@ top: 0px; } .fee-text{ - border-bottom: 1px solid #ffffff1c; - color: #ffffff; + border-bottom: 1px solid var(--border-subtle); + color: var(--fg); width: fit-content; margin: auto; line-height: 1.45; 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 6cb7f0bd4..abc00f83c 100644 --- a/frontend/src/app/components/master-page/master-page.component.scss +++ b/frontend/src/app/components/master-page/master-page.component.scss @@ -77,7 +77,7 @@ li.nav-item { .navbar-nav { background: var(--nav-bg); bottom: 0; - box-shadow: 0px 0px 15px 0px #000; + box-shadow: 0 0 15px 0 var(--nav-shadow); flex-direction: row; left: 0; justify-content: space-between; @@ -141,7 +141,7 @@ li.nav-item { } nav { - box-shadow: 0px 0px 15px 0px #000; + box-shadow: 0px 0px 15px 0px var(--nav-shadow); } .connection-badge { @@ -302,8 +302,8 @@ nav { align-self: center; cursor: pointer; .anon { - border: 1.5px solid lightgrey; - color: lightgrey; + border: 1.5px solid var(--transparent-fg); + color: var(--transparent-fg); border-radius: 5px; } } 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 2e829b21e..4913e45d5 100644 --- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss +++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss @@ -72,7 +72,7 @@ position:absolute; top: calc(-0.192 * var(--block-size)); left: calc(-0.16 * var(--block-size)); - background-color: #232838; + background-color: var(--block-top); transform:skew(40deg); transform-origin:top; transition: transform 1s, left 1s; @@ -85,7 +85,7 @@ position: absolute; top: calc(-0.096 * var(--block-size)); left: calc(-0.16 * var(--block-size)); - background-color: #191c27; + background-color: var(--block-side); z-index: -1; transform: skewY(50deg); @@ -94,11 +94,11 @@ } .mempool-block.bitcoin-block::after { - background-color: #403834; + background-color: var(--mempool-block-top); } .mempool-block.bitcoin-block::before { - background-color: #2d2825; + background-color: var(--mempool-block-side); } .mempool-block.hide-block { @@ -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 var(--fg); + border-bottom: calc(var(--block-size) * 0.3) solid var(--nav-icon); } .blockLink { @@ -164,7 +164,7 @@ width: calc(0.6 * var(--block-size)); height: calc(0.25 * var(--block-size)); border-left: solid calc(0.3 * var(--block-size)) transparent; - border-bottom: solid calc(0.3 * var(--block-size)) white; + border-bottom: solid calc(0.3 * var(--block-size)) var(--fg); border-right: solid calc(0.3 * var(--block-size)) transparent; transform: translate(calc(-0.2 * var(--block-size)), calc(1.1 * var(--block-size))); border-radius: 2px; @@ -174,7 +174,7 @@ .blink{ width:400px; height:400px; - border-bottom: solid calc(0.3 * var(--block-size)) #FFF; + border-bottom: solid calc(0.3 * var(--block-size)) var(--fg); animation: blink 0.2s infinite; } @keyframes blink{ diff --git a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts index 6d8c180c6..3c6a6e30c 100644 --- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts +++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts @@ -399,7 +399,7 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy { getStyleForMempoolBlock(mempoolBlock: MempoolBlock, index: number) { const emptyBackgroundSpacePercentage = Math.max(100 - mempoolBlock.blockVSize / this.stateService.blockVSize * 100, 0); const usedBlockSpace = 100 - emptyBackgroundSpacePercentage; - const backgroundGradients = [`repeating-linear-gradient(to right, #554b45, #554b45 ${emptyBackgroundSpacePercentage}%`]; + const backgroundGradients = [`repeating-linear-gradient(to right, var(--mempool-block-loading), var(--mempool-block-loading) ${emptyBackgroundSpacePercentage}%`]; const gradientColors = []; const trimmedFeeRange = index === 0 ? mempoolBlock.feeRange.slice(0, -1) : mempoolBlock.feeRange; @@ -426,7 +426,7 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy { getStyleForMempoolEmptyBlock(index: number) { return { 'right': this.containerOffset + index * this.blockOffset + 'px', - 'background': '#554b45', + 'background': 'var(--mempool-block-loading)', }; } diff --git a/frontend/src/app/components/mempool-graph/mempool-graph.component.ts b/frontend/src/app/components/mempool-graph/mempool-graph.component.ts index b1db6b96b..1409ea8bb 100644 --- a/frontend/src/app/components/mempool-graph/mempool-graph.component.ts +++ b/frontend/src/app/components/mempool-graph/mempool-graph.component.ts @@ -180,7 +180,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges { yAxis: '1000000', label: { show: false, - color: '#ffffff', + color: 'var(--fg)', } }], }, @@ -281,7 +281,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges { progressPercentageText = `
${formatNumber(progressPercentage, this.locale, '1.2-2')} - % + % ${this.vbytesPipe.transform(sum, 2, 'vB', 'MvB', false)} @@ -308,12 +308,12 @@ export class MempoolGraphComponent implements OnInit, OnChanges { - ${(item.value[1] / 1_000_000).toFixed(2)} MvB + ${(item.value[1] / 1_000_000).toFixed(2)} MvB - ${(totalValueArray[index] / 1_000_000).toFixed(2)} MvB + ${(totalValueArray[index] / 1_000_000).toFixed(2)} MvB @@ -393,7 +393,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges { bottom: 0, selectedDataBackground: { lineStyle: { - color: '#fff', + color: 'var(--fg)', opacity: 0.45, }, areaStyle: { diff --git a/frontend/src/app/components/menu/menu.component.html b/frontend/src/app/components/menu/menu.component.html index 6c0bdb61c..606eade67 100644 --- a/frontend/src/app/components/menu/menu.component.html +++ b/frontend/src/app/components/menu/menu.component.html @@ -43,7 +43,7 @@ {{ item.title }} @if (item.isExternal === true) { - + } diff --git a/frontend/src/app/components/menu/menu.component.scss b/frontend/src/app/components/menu/menu.component.scss index 8c2fa4842..0688107a6 100644 --- a/frontend/src/app/components/menu/menu.component.scss +++ b/frontend/src/app/components/menu/menu.component.scss @@ -47,7 +47,7 @@ .sidenav a, .sidenav button{ text-decoration: none; - color: lightgray; + color: var(--transparent-fg); margin-left: 20px; } @@ -72,7 +72,8 @@ } .badge-default { - background-color: black; + background-color: var(--secondary); + color: var(--fg); } .badge-og { diff --git a/frontend/src/app/components/pool-ranking/pool-ranking.component.html b/frontend/src/app/components/pool-ranking/pool-ranking.component.html index 84bd949bb..69682b560 100644 --- a/frontend/src/app/components/pool-ranking/pool-ranking.component.html +++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.html @@ -109,7 +109,7 @@ {{ pool.rank }} - + {{ pool.name }} {{ pool.lastEstimatedHashrate | number: '1.2-2' }} {{ miningStats.miningUnits.hashrateUnit }} diff --git a/frontend/src/app/components/pool-ranking/pool-ranking.component.ts b/frontend/src/app/components/pool-ranking/pool-ranking.component.ts index afb653326..6749db501 100644 --- a/frontend/src/app/components/pool-ranking/pool-ranking.component.ts +++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.ts @@ -147,7 +147,7 @@ export class PoolRankingComponent implements OnInit { name: pool.name + ((isMobile() || this.widget) ? `` : ` (${pool.share}%)`), label: { overflow: 'none', - color: 'var(--tooltip-grey)', + color: 'var(--grey)', alignTo: 'edge', edgeDistance: edgeDistance, }, @@ -190,7 +190,7 @@ export class PoolRankingComponent implements OnInit { name: $localize`Other (${percentage})`, label: { overflow: 'none', - color: 'var(--tooltip-grey)', + color: 'var(--grey)', alignTo: 'edge', edgeDistance: edgeDistance }, @@ -252,12 +252,12 @@ export class PoolRankingComponent implements OnInit { itemStyle: { borderRadius: 1, borderWidth: 1, - borderColor: '#000', + borderColor: 'var(--bg)', }, emphasis: { itemStyle: { shadowBlur: 40, - shadowColor: 'rgba(0, 0, 0, 0.75)', + shadowColor: 'var(--bg)', }, labelLine: { lineStyle: { diff --git a/frontend/src/app/components/pool/pool.component.html b/frontend/src/app/components/pool/pool.component.html index 85105a058..7135e5a21 100644 --- a/frontend/src/app/components/pool/pool.component.html +++ b/frontend/src/app/components/pool/pool.component.html @@ -5,8 +5,7 @@
- +

{{ poolStats.pool.name }}

@@ -108,6 +107,7 @@ + {{ poolStats.estimatedHashrate | amountShortener : 3 : 'H/s' : false : true }} Unknown + @@ -134,12 +135,14 @@ + {{ formatNumber(poolStats.blockCount['24h'], this.locale, '1.0-0') }} ({{ formatNumber(100 * poolStats.blockShare['24h'], this.locale, '1.0-0') }}%) {{ formatNumber(poolStats.blockCount['1w'], this.locale, '1.0-0') }} ({{ formatNumber(100 * poolStats.blockShare['1w'], this.locale, '1.0-0') }}%) {{ formatNumber(poolStats.blockCount['all'], this.locale, '1.0-0') }} ({{ formatNumber(100 * poolStats.blockShare['all'], this.locale, '1.0-0') }}%) + @@ -157,7 +160,9 @@ + + @@ -491,6 +496,7 @@ +
@@ -500,6 +506,7 @@
+ @@ -516,6 +523,7 @@ +
@@ -525,6 +533,7 @@
+ @@ -542,6 +551,7 @@ +
@@ -551,6 +561,7 @@
+ @@ -567,6 +578,7 @@ +
@@ -576,6 +588,7 @@
+ diff --git a/frontend/src/app/components/pool/pool.component.ts b/frontend/src/app/components/pool/pool.component.ts index 65f82b160..1b006549c 100644 --- a/frontend/src/app/components/pool/pool.component.ts +++ b/frontend/src/app/components/pool/pool.component.ts @@ -245,7 +245,7 @@ export class PoolComponent implements OnInit { name: $localize`:@@79a9dc5b1caca3cbeb1733a19515edacc5fc7920:Hashrate`, inactiveColor: 'rgb(110, 112, 121)', textStyle: { - color: 'white', + color: 'var(--fg)', }, icon: 'roundRect', itemStyle: { @@ -256,7 +256,7 @@ export class PoolComponent implements OnInit { name: $localize`:mining.pool-dominance:Pool Dominance`, inactiveColor: 'rgb(110, 112, 121)', textStyle: { - color: 'white', + color: 'var(--fg)', }, icon: 'roundRect', }, @@ -325,7 +325,7 @@ export class PoolComponent implements OnInit { moveOnMouseMove: false, }, { fillerColor: '#aaaaff15', - borderColor: '#ffffff88', + borderColor: 'var(--transparent-fg)', showDetail: false, show: true, type: 'slider', @@ -336,7 +336,7 @@ export class PoolComponent implements OnInit { right: 15, selectedDataBackground: { lineStyle: { - color: '#fff', + color: 'var(--fg)', opacity: 0.45, }, areaStyle: { diff --git a/frontend/src/app/components/price-chart/price-chart.component.html b/frontend/src/app/components/price-chart/price-chart.component.html index c566c1186..488e0c40b 100644 --- a/frontend/src/app/components/price-chart/price-chart.component.html +++ b/frontend/src/app/components/price-chart/price-chart.component.html @@ -28,27 +28,27 @@
-
+
diff --git a/frontend/src/app/components/privacy-policy/privacy-policy.component.html b/frontend/src/app/components/privacy-policy/privacy-policy.component.html index 029e968e5..89d5a8394 100644 --- a/frontend/src/app/components/privacy-policy/privacy-policy.component.html +++ b/frontend/src/app/components/privacy-policy/privacy-policy.component.html @@ -1,7 +1,11 @@

- + @if (isLightMode) { + + } @else { + + }

Privacy Policy

diff --git a/frontend/src/app/components/privacy-policy/privacy-policy.component.ts b/frontend/src/app/components/privacy-policy/privacy-policy.component.ts index 77d2a995a..e5eff6f2e 100644 --- a/frontend/src/app/components/privacy-policy/privacy-policy.component.ts +++ b/frontend/src/app/components/privacy-policy/privacy-policy.component.ts @@ -1,7 +1,9 @@ -import { Component } from '@angular/core'; +import { ChangeDetectorRef, Component } from '@angular/core'; import { Env, StateService } from '@app/services/state.service'; import { SeoService } from '@app/services/seo.service'; import { OpenGraphService } from '@app/services/opengraph.service'; +import { Subscription } from 'rxjs'; +import { ThemeService } from '../../services/theme.service'; @Component({ selector: 'app-privacy-policy', @@ -11,16 +13,36 @@ import { OpenGraphService } from '@app/services/opengraph.service'; }) export class PrivacyPolicyComponent { officialMempoolSpace = this.stateService.env.OFFICIAL_MEMPOOL_SPACE; + themeStateSubscription: Subscription; + loadedTheme = 'default'; constructor( private stateService: StateService, private seoService: SeoService, private ogService: OpenGraphService, + private themeService: ThemeService, + private cd: ChangeDetectorRef, ) { } ngOnInit(): void { this.seoService.setTitle('Privacy Policy'); this.seoService.setDescription('Trusted third parties are security holes, as are trusted first parties...you should only trust your own self-hosted instance of The Mempool Open Source Project®.'); this.ogService.setManualOgImage('privacy.jpg'); + + this.themeStateSubscription = this.themeService.themeState$.subscribe((state) => { + if (state.loading) { + return; + } + this.loadedTheme = state.theme; + this.cd.markForCheck(); + }); + } + + ngOnDestroy(): void { + this.themeStateSubscription?.unsubscribe(); + } + + get isLightMode(): boolean { + return this.loadedTheme === 'nymkappa'; } } diff --git a/frontend/src/app/components/rbf-list/rbf-list.component.html b/frontend/src/app/components/rbf-list/rbf-list.component.html index d1b018be7..efcecf9e6 100644 --- a/frontend/src/app/components/rbf-list/rbf-list.component.html +++ b/frontend/src/app/components/rbf-list/rbf-list.component.html @@ -4,7 +4,7 @@
-
+
- - - + + + + + @@ -91,7 +93,7 @@ }
- Student Name -
- - -
- 		- ID -
- - -
- 		Proof
+ Student Name +
+ + +
+ 		+ ID +
+ + +
+ 		Proof
- + diff --git a/frontend/src/app/components/simpleproof-widget/simpleproof-widget.component.html b/frontend/src/app/components/simpleproof-widget/simpleproof-widget.component.html index a2c62d7a1..564cf0df8 100644 --- a/frontend/src/app/components/simpleproof-widget/simpleproof-widget.component.html +++ b/frontend/src/app/components/simpleproof-widget/simpleproof-widget.component.html @@ -19,10 +19,12 @@
- - - - + + + + + + @@ -32,7 +34,7 @@ diff --git a/frontend/src/app/components/stratum/stratum-list/stratum-list.component.scss b/frontend/src/app/components/stratum/stratum-list/stratum-list.component.scss index 3d274ef2a..0d2a9819d 100644 --- a/frontend/src/app/components/stratum/stratum-list/stratum-list.component.scss +++ b/frontend/src/app/components/stratum/stratum-list/stratum-list.component.scss @@ -128,11 +128,3 @@ td { position: relative; color: #FFF; } - -.pool-logo { - width: 15px; - height: 15px; - position: relative; - top: -1px; - margin-right: 2px; -} \ No newline at end of file diff --git a/frontend/src/app/components/svg-images/svg-images.component.html b/frontend/src/app/components/svg-images/svg-images.component.html index 4fe04db6e..2e421b959 100644 --- a/frontend/src/app/components/svg-images/svg-images.component.html +++ b/frontend/src/app/components/svg-images/svg-images.component.html @@ -1,87 +1,87 @@ - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + @@ -94,13 +94,39 @@ - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -120,13 +146,13 @@ - - - - - - - + + + + + + + @@ -157,15 +183,15 @@ - - - - - - - + + + + + + + - + @@ -208,7 +234,7 @@ - + @@ -233,13 +259,13 @@ Mempool Accelerator® - - - - - - - + + + + + + + @@ -252,7 +278,7 @@ - + @@ -292,7 +318,7 @@ - + @@ -362,15 +388,15 @@ - - - - - - - + + + + + + + - + @@ -791,7 +817,7 @@ - + diff --git a/frontend/src/app/components/terms-of-service/terms-of-service.component.html b/frontend/src/app/components/terms-of-service/terms-of-service.component.html index 16f2f3fe5..6892b4e13 100644 --- a/frontend/src/app/components/terms-of-service/terms-of-service.component.html +++ b/frontend/src/app/components/terms-of-service/terms-of-service.component.html @@ -1,7 +1,11 @@

- + @if (isLightMode) { + + } @else { + + }

Terms of Service

diff --git a/frontend/src/app/components/terms-of-service/terms-of-service.component.ts b/frontend/src/app/components/terms-of-service/terms-of-service.component.ts index 9877ba0ec..e7b3c7c3c 100644 --- a/frontend/src/app/components/terms-of-service/terms-of-service.component.ts +++ b/frontend/src/app/components/terms-of-service/terms-of-service.component.ts @@ -1,7 +1,9 @@ -import { Component } from '@angular/core'; +import { ChangeDetectorRef, Component } from '@angular/core'; import { Env, StateService } from '@app/services/state.service'; import { SeoService } from '@app/services/seo.service'; import { OpenGraphService } from '@app/services/opengraph.service'; +import { Subscription } from 'rxjs'; +import { ThemeService } from '../../services/theme.service'; @Component({ selector: 'app-terms-of-service', @@ -10,16 +12,36 @@ import { OpenGraphService } from '@app/services/opengraph.service'; }) export class TermsOfServiceComponent { officialMempoolSpace = this.stateService.env.OFFICIAL_MEMPOOL_SPACE; + themeStateSubscription: Subscription; + loadedTheme = 'default'; constructor( private stateService: StateService, private seoService: SeoService, private ogService: OpenGraphService, + private themeService: ThemeService, + private cd: ChangeDetectorRef, ) { } ngOnInit(): void { this.seoService.setTitle('Terms of Service'); this.seoService.setDescription('Out of respect for the Bitcoin community, the mempool.space website is Bitcoin Only and does not display any advertising.'); this.ogService.setManualOgImage('tos.jpg'); + + this.themeStateSubscription = this.themeService.themeState$.subscribe((state) => { + if (state.loading) { + return; + } + this.loadedTheme = state.theme; + this.cd.markForCheck(); + }); + } + + ngOnDestroy(): void { + this.themeStateSubscription?.unsubscribe(); + } + + get isLightMode(): boolean { + return this.loadedTheme === 'nymkappa'; } } 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 e74767e21..63fce0263 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 72846de6b..39a4e8f4c 100644 --- a/frontend/src/app/components/theme-selector/theme-selector.component.ts +++ b/frontend/src/app/components/theme-selector/theme-selector.component.ts @@ -12,7 +12,7 @@ import { Subscription } from 'rxjs'; }) export class ThemeSelectorComponent implements OnInit, OnDestroy { themeForm: UntypedFormGroup; - themes = ['default', 'contrast', 'softsimon', 'bukele']; + themes = ['default', 'contrast', 'softsimon', 'bukele', 'nymkappa']; themeStateSubscription: Subscription; constructor( @@ -36,7 +36,7 @@ export class ThemeSelectorComponent implements OnInit, OnDestroy { changeTheme() { const newTheme = this.themeForm.get('theme')?.value; - this.themeService.apply(newTheme); + this.themeService.setTheme(newTheme); } ngOnDestroy() { diff --git a/frontend/src/app/components/trademark-policy/trademark-policy.component.scss b/frontend/src/app/components/trademark-policy/trademark-policy.component.scss index 8e885958c..ec9ea9621 100644 --- a/frontend/src/app/components/trademark-policy/trademark-policy.component.scss +++ b/frontend/src/app/components/trademark-policy/trademark-policy.component.scss @@ -30,4 +30,8 @@ ol ol ol li { font-size: 1.15rem; } + + .table { + --bs-table-border-color: var(--fg); + } } diff --git a/frontend/src/app/components/transaction/transaction-details/transaction-details.component.html b/frontend/src/app/components/transaction/transaction-details/transaction-details.component.html index 2dfd124c2..4c13ea95b 100644 --- a/frontend/src/app/components/transaction/transaction-details/transaction-details.component.html +++ b/frontend/src/app/components/transaction/transaction-details/transaction-details.component.html @@ -169,7 +169,7 @@ } @if (!tx?.acceleration && acceleratorAvailable && accelerateCtaType === 'button' && !showAccelerationSummary && notAcceleratedOnLoad) {
- Accelerate + Accelerate @@ -304,7 +304,7 @@
@if (pool) { } @else { diff --git a/frontend/src/app/components/transaction/transaction-details/transaction-details.component.scss b/frontend/src/app/components/transaction/transaction-details/transaction-details.component.scss index af2255427..aac49e36b 100644 --- a/frontend/src/app/components/transaction/transaction-details/transaction-details.component.scss +++ b/frontend/src/app/components/transaction/transaction-details/transaction-details.component.scss @@ -29,14 +29,6 @@ vertical-align: top; } -.pool-logo { - width: 25px; - height: 25px; - position: relative; - top: -1px; - margin-right: 2px; -} - .badge.badge-accelerated { background-color: var(--tertiary); color: white; @@ -161,11 +153,7 @@ } .accelerateDeepMempool { - background-color: var(--tertiary); margin-left: 5px; - --bs-btn-active-bg: var(--tertiary); - --bs-btn-active-border-color: transparent; - --bs-btn-active-color: var(--fg); } .goggles-icon { @@ -173,14 +161,6 @@ width: 2.7em; } -.pool-logo { - width: 15px; - height: 15px; - position: relative; - top: -1px; - margin-right: 2px; -} - .oobFees { color: #905cf4; } diff --git a/frontend/src/app/components/transaction/transaction-raw.component.scss b/frontend/src/app/components/transaction/transaction-raw.component.scss index 8d5402ca0..936e86ada 100644 --- a/frontend/src/app/components/transaction/transaction-raw.component.scss +++ b/frontend/src/app/components/transaction/transaction-raw.component.scss @@ -202,6 +202,6 @@ } .icon-symbol { - color: rgba(255, 255, 255, 0.4); + color: var(--transparent-fg); margin-left: 5px; } \ No newline at end of file diff --git a/frontend/src/app/components/transaction/transaction.component.scss b/frontend/src/app/components/transaction/transaction.component.scss index e1be2890c..942a68076 100644 --- a/frontend/src/app/components/transaction/transaction.component.scss +++ b/frontend/src/app/components/transaction/transaction.component.scss @@ -294,14 +294,6 @@ width: 2.7em; } -.pool-logo { - width: 15px; - height: 15px; - position: relative; - top: -1px; - margin-right: 2px; -} - .oobFees { color: #905cf4; } 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 f9ccd8b03..41633a0a7 100644 --- a/frontend/src/app/components/transactions-list/transactions-list.component.html +++ b/frontend/src/app/components/transactions-list/transactions-list.component.html @@ -521,7 +521,7 @@
@if (!tx.status?.confirmed && acceleratedTxids) { -
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 1a441d613..81b097c47 100644 --- a/frontend/src/app/components/transactions-list/transactions-list.component.scss +++ b/frontend/src/app/components/transactions-list/transactions-list.component.scss @@ -145,7 +145,7 @@ .sig-overflow { // background-color: var(--tertiary); - color: white; + color: var(--fg); border-radius: 50%; font-size: 10px; font-weight: bold; @@ -283,7 +283,7 @@ h2 { } .sigged { - background-color: #ffffff22; + background-color: color-mix(in srgb, var(--fg) 12%, transparent); } .summary { @@ -336,6 +336,7 @@ h2 { --bs-btn-border-color: transparent; background-color: var(--bs-btn-bg); border-color: var(--bs-btn-border-color); + color: var(--fg); position: relative; top: -2px; font-size: 81%; @@ -368,13 +369,13 @@ h2 { } .merkle-branch:nth-child(2n + 1), .internal-key { - color: #cccccc; + color: var(--transparent-fg); font-weight: 500; } .merkle-branch, .internal-key, .leaf-version { &:hover { - color: white; + color: var(--fg); font-weight: 600; } } @@ -394,7 +395,7 @@ h2 { white-space: nowrap; &:first-child { - color: white; + color: var(--fg); width: 50%; white-space: nowrap; } diff --git a/frontend/src/app/components/treasuries/supply/treasuries-supply.component.scss b/frontend/src/app/components/treasuries/supply/treasuries-supply.component.scss index 18d212b6e..1835a4ac4 100644 --- a/frontend/src/app/components/treasuries/supply/treasuries-supply.component.scss +++ b/frontend/src/app/components/treasuries/supply/treasuries-supply.component.scss @@ -222,7 +222,7 @@ .supply-tooltip { position: fixed; - background: color-mix(in srgb, var(--active-bg) 95%, transparent); + background: color-mix(in srgb, #11131f 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/treasuries/treasuries-graph/treasuries-graph.component.ts b/frontend/src/app/components/treasuries/treasuries-graph/treasuries-graph.component.ts index f62bbd2f0..d1c15ec2b 100644 --- a/frontend/src/app/components/treasuries/treasuries-graph/treasuries-graph.component.ts +++ b/frontend/src/app/components/treasuries/treasuries-graph/treasuries-graph.component.ts @@ -178,7 +178,7 @@ export class TreasuriesGraphComponent implements OnInit, OnChanges, OnDestroy { name: treasury.wallet, inactiveColor: 'var(--grey)', textStyle: { - color: 'white', + color: 'var(--fg)', }, icon: 'roundRect', })); diff --git a/frontend/src/app/components/treasuries/verify/treasuries-verify.component.scss b/frontend/src/app/components/treasuries/verify/treasuries-verify.component.scss index 0d1972ca6..ecf5a7661 100644 --- a/frontend/src/app/components/treasuries/verify/treasuries-verify.component.scss +++ b/frontend/src/app/components/treasuries/verify/treasuries-verify.component.scss @@ -215,7 +215,7 @@ .verify-tooltip { position: fixed; - background: color-mix(in srgb, var(--active-bg) 95%, transparent); + background: color-mix(in srgb, #11131f 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/twitter-login/twitter-login.component.html b/frontend/src/app/components/twitter-login/twitter-login.component.html index 9e2526c6f..59780bd0a 100644 --- a/frontend/src/app/components/twitter-login/twitter-login.component.html +++ b/frontend/src/app/components/twitter-login/twitter-login.component.html @@ -1,6 +1,6 @@ - {{ buttonString }} + {{ buttonString }} diff --git a/frontend/src/app/components/twitter-widget/twitter-widget.component.html b/frontend/src/app/components/twitter-widget/twitter-widget.component.html index 8e8b4e64b..8186e9766 100644 --- a/frontend/src/app/components/twitter-widget/twitter-widget.component.html +++ b/frontend/src/app/components/twitter-widget/twitter-widget.component.html @@ -7,9 +7,12 @@ failed to load X timeline } - diff --git a/frontend/src/app/components/twitter-widget/twitter-widget.component.ts b/frontend/src/app/components/twitter-widget/twitter-widget.component.ts index 502d67b96..7b7931aaf 100644 --- a/frontend/src/app/components/twitter-widget/twitter-widget.component.ts +++ b/frontend/src/app/components/twitter-widget/twitter-widget.component.ts @@ -1,5 +1,6 @@ import { Component, Input, ChangeDetectionStrategy, SecurityContext, SimpleChanges, OnChanges } from '@angular/core'; import { LanguageService } from '@app/services/language.service'; +import { StateService } from '@app/services/state.service'; import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'; @Component({ @@ -21,6 +22,7 @@ export class TwitterWidgetComponent implements OnChanges { iframeSrc: SafeResourceUrl; constructor( + private stateService: StateService, private languageService: LanguageService, public sanitizer: DomSanitizer, ) { @@ -38,7 +40,7 @@ export class TwitterWidgetComponent implements OnChanges { if (!this.handle) { return; } - const url = `/api/v1/services/x/${this.handle}`; + const url = `${this.stateService.env.TWIDGET_API}/api/v1/social/x/${this.handle}`; this.iframeSrc = this.sanitizer.bypassSecurityTrustResourceUrl(this.sanitizer.sanitize(SecurityContext.URL, url)); } diff --git a/frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.html b/frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.html index b75fe9319..0996fa4b4 100644 --- a/frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.html +++ b/frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.html @@ -29,7 +29,7 @@

Peg Out

-

+

@@ -106,7 +106,7 @@ - +

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 dfb429096..9875e57a4 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: color-mix(in srgb, var(--active-bg) 95%, transparent); + background: color-mix(in srgb, #11131f 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/dashboard/dashboard.component.html b/frontend/src/app/dashboard/dashboard.component.html index 1fd8af358..27beb7e1a 100644 --- a/frontend/src/app/dashboard/dashboard.component.html +++ b/frontend/src/app/dashboard/dashboard.component.html @@ -372,7 +372,7 @@

- + Audit in progress ({{ ((auditStatus.lastBlockAudit / auditStatus.bitcoinHeaders * 100) > 99.9 ? 99.9 : (auditStatus.lastBlockAudit / auditStatus.bitcoinHeaders * 100)) | number:'1.0-1' }}%) diff --git a/frontend/src/app/lightning/channels-list/channels-list.component.html b/frontend/src/app/lightning/channels-list/channels-list.component.html index 75a6df128..dd959ea99 100644 --- a/frontend/src/app/lightning/channels-list/channels-list.component.html +++ b/frontend/src/app/lightning/channels-list/channels-list.component.html @@ -1,6 +1,6 @@
-
+
diff --git a/frontend/src/app/lightning/channels-statistics/channels-statistics.component.scss b/frontend/src/app/lightning/channels-statistics/channels-statistics.component.scss index 614b9bd94..322d23616 100644 --- a/frontend/src/app/lightning/channels-statistics/channels-statistics.component.scss +++ b/frontend/src/app/lightning/channels-statistics/channels-statistics.component.scss @@ -62,7 +62,7 @@ top: 0px; } .fee-text{ - border-bottom: 1px solid #ffffff1c; + border-bottom: 1px solid var(--border-subtle); width: fit-content; margin: auto; line-height: 1.45; diff --git a/frontend/src/app/lightning/group/group.component.html b/frontend/src/app/lightning/group/group.component.html index ea233a6ec..e13fb0b27 100644 --- a/frontend/src/app/lightning/group/group.component.html +++ b/frontend/src/app/lightning/group/group.component.html @@ -55,7 +55,7 @@
-
+
diff --git a/frontend/src/app/lightning/node-fee-chart/node-fee-chart.component.ts b/frontend/src/app/lightning/node-fee-chart/node-fee-chart.component.ts index 5d7c74071..2f473d3ea 100644 --- a/frontend/src/app/lightning/node-fee-chart/node-fee-chart.component.ts +++ b/frontend/src/app/lightning/node-fee-chart/node-fee-chart.component.ts @@ -180,7 +180,7 @@ export class NodeFeeChartComponent implements OnInit { name: $localize`Outgoing Fees`, inactiveColor: 'rgb(110, 112, 121)', textStyle: { - color: 'white', + color: 'var(--fg)', }, icon: 'roundRect', }, @@ -188,7 +188,7 @@ export class NodeFeeChartComponent implements OnInit { name: $localize`Incoming Fees`, inactiveColor: 'rgb(110, 112, 121)', textStyle: { - color: 'white', + color: 'var(--fg)', }, icon: 'roundRect', }, diff --git a/frontend/src/app/lightning/node-statistics-chart/node-statistics-chart.component.ts b/frontend/src/app/lightning/node-statistics-chart/node-statistics-chart.component.ts index 78fe7bb96..34f12dea5 100644 --- a/frontend/src/app/lightning/node-statistics-chart/node-statistics-chart.component.ts +++ b/frontend/src/app/lightning/node-statistics-chart/node-statistics-chart.component.ts @@ -152,7 +152,7 @@ export class NodeStatisticsChartComponent implements OnInit { name: $localize`:@@807cf11e6ac1cde912496f764c176bdfdd6b7e19:Channels`, inactiveColor: 'rgb(110, 112, 121)', textStyle: { - color: 'white', + color: 'var(--fg)', }, icon: 'roundRect', }, @@ -160,7 +160,7 @@ export class NodeStatisticsChartComponent implements OnInit { name: $localize`:@@ce9dfdc6dccb28dc75a78c704e09dc18fb02dcfa:Capacity`, inactiveColor: 'rgb(110, 112, 121)', textStyle: { - color: 'white', + color: 'var(--fg)', }, icon: 'roundRect', }, diff --git a/frontend/src/app/lightning/node-statistics/node-statistics.component.scss b/frontend/src/app/lightning/node-statistics/node-statistics.component.scss index 7b3f778b1..15b9e9af3 100644 --- a/frontend/src/app/lightning/node-statistics/node-statistics.component.scss +++ b/frontend/src/app/lightning/node-statistics/node-statistics.component.scss @@ -57,7 +57,7 @@ top: 0px; } .fee-text{ - border-bottom: 1px solid #ffffff1c; + border-bottom: 1px solid var(--border-subtle); width: fit-content; margin: auto; line-height: 1.45; diff --git a/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.ts b/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.ts index 0d7ff06d7..74f658ee7 100644 --- a/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.ts +++ b/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.ts @@ -267,8 +267,8 @@ export class NodesChannelsMap implements OnInit { map: 'world', roam: this.style === 'widget' ? false : true, itemStyle: { - borderColor: 'black', - color: '#272b3f' + borderColor: this.resolveCssVariable('--world-map-border', '#000'), + color: this.resolveCssVariable('--world-map-bg', '#272b3f'), }, scaleLimit: { min: 1.3, @@ -353,6 +353,13 @@ export class NodesChannelsMap implements OnInit { }; } + private resolveCssVariable(name: string, fallback: string): string { + if (typeof document === 'undefined') { + return fallback; + } + return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback; + } + onChartInit(ec) { if (this.chartInstance !== undefined) { return; diff --git a/frontend/src/app/lightning/nodes-map/nodes-map.component.ts b/frontend/src/app/lightning/nodes-map/nodes-map.component.ts index 421ca8a61..a6052eb13 100644 --- a/frontend/src/app/lightning/nodes-map/nodes-map.component.ts +++ b/frontend/src/app/lightning/nodes-map/nodes-map.component.ts @@ -165,8 +165,8 @@ export class NodesMap implements OnInit, OnChanges { map: 'world', roam: true, itemStyle: { - borderColor: 'black', - color: '#272b3f' + borderColor: 'var(--world-map-border)', + color: 'var(--world-map-bg)', }, scaleLimit: { min: 1.3, diff --git a/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.ts b/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.ts index 146e06250..626325203 100644 --- a/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.ts +++ b/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.ts @@ -300,7 +300,7 @@ export class NodesNetworksChartComponent implements OnInit, OnChanges { name: $localize`Darknet Only (Tor, I2P, cjdns)`, inactiveColor: 'rgb(110, 112, 121)', textStyle: { - color: 'white', + color: 'var(--fg)', }, icon: 'roundRect', }, @@ -308,7 +308,7 @@ export class NodesNetworksChartComponent implements OnInit, OnChanges { name: $localize`Clearnet Only (IPv4, IPv6)`, inactiveColor: 'rgb(110, 112, 121)', textStyle: { - color: 'white', + color: 'var(--fg)', }, icon: 'roundRect', }, @@ -316,7 +316,7 @@ export class NodesNetworksChartComponent implements OnInit, OnChanges { name: $localize`Clearnet and Darknet`, inactiveColor: 'rgb(110, 112, 121)', textStyle: { - color: 'white', + color: 'var(--fg)', }, icon: 'roundRect', }, @@ -324,7 +324,7 @@ export class NodesNetworksChartComponent implements OnInit, OnChanges { name: $localize`:@@e5d8bb389c702588877f039d72178f219453a72d:Unknown`, inactiveColor: 'rgb(110, 112, 121)', textStyle: { - color: 'white', + color: 'var(--fg)', }, icon: 'roundRect', }, diff --git a/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.ts b/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.ts index 5c74f0eeb..0bde4a5b0 100644 --- a/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.ts +++ b/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.ts @@ -86,7 +86,7 @@ export class NodesPerCountryChartComponent implements OnInit { name: country.name.en + (this.isMobile() ? `` : ` (${country.share}%)`), label: { overflow: 'truncate', - color: 'var(--tooltip-grey)', + color: 'var(--grey)', alignTo: 'edge', edgeDistance: edgeDistance, }, @@ -120,7 +120,7 @@ export class NodesPerCountryChartComponent implements OnInit { name: $localize`Other (${totalShareOther.toFixed(2) + '%'})`, label: { overflow: 'truncate', - color: 'var(--tooltip-grey)', + color: 'var(--grey)', alignTo: 'edge', edgeDistance: edgeDistance }, @@ -180,12 +180,12 @@ export class NodesPerCountryChartComponent implements OnInit { itemStyle: { borderRadius: 1, borderWidth: 1, - borderColor: '#000', + borderColor: 'var(--bg)', }, emphasis: { itemStyle: { shadowBlur: 40, - shadowColor: 'rgba(0, 0, 0, 0.75)', + shadowColor: 'var(--bg)', }, labelLine: { lineStyle: { diff --git a/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.ts b/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.ts index 460572ea0..0bae69a02 100644 --- a/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.ts +++ b/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.ts @@ -145,7 +145,7 @@ export class NodesPerISPChartComponent implements OnInit { label: { overflow: 'truncate', width: isMobile() ? 75 : this.widget ? 125 : 250, - color: 'var(--tooltip-grey)', + color: 'var(--grey)', alignTo: 'edge', edgeDistance: edgeDistance, }, @@ -179,7 +179,7 @@ export class NodesPerISPChartComponent implements OnInit { name: $localize`Other (${totalShareOther.toFixed(2) + '%'})`, label: { overflow: 'truncate', - color: 'var(--tooltip-grey)', + color: 'var(--grey)', alignTo: 'edge', edgeDistance: edgeDistance }, @@ -239,12 +239,12 @@ export class NodesPerISPChartComponent implements OnInit { itemStyle: { borderRadius: 1, borderWidth: 1, - borderColor: '#000', + borderColor: 'var(--bg)', }, emphasis: { itemStyle: { shadowBlur: 40, - shadowColor: 'rgba(0, 0, 0, 0.75)', + shadowColor: 'var(--bg)', }, labelLine: { lineStyle: { diff --git a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.scss b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.scss index aa72d3f46..c9ea82739 100644 --- a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.scss +++ b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.scss @@ -43,7 +43,7 @@ tr, td, th { .capacity-ratio { font-size: 12px; - color: darkgrey; + color: var(--transparent-fg); } .fiat { diff --git a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.scss b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.scss index 759173f9d..841d12c1a 100644 --- a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.scss +++ b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.scss @@ -46,7 +46,7 @@ tr, td, th { .capacity-ratio { font-size: 12px; - color: darkgrey; + color: var(--transparent-fg); } .geolocation { diff --git a/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.ts b/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.ts index 41245844b..d335e8b30 100644 --- a/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.ts +++ b/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.ts @@ -206,7 +206,7 @@ export class LightningStatisticsChartComponent implements OnInit, OnChanges { name: $localize`:@@807cf11e6ac1cde912496f764c176bdfdd6b7e19:Channels`, inactiveColor: 'rgb(110, 112, 121)', textStyle: { - color: 'white', + color: 'var(--fg)', }, icon: 'roundRect', }, @@ -214,7 +214,7 @@ export class LightningStatisticsChartComponent implements OnInit, OnChanges { name: $localize`:@@ce9dfdc6dccb28dc75a78c704e09dc18fb02dcfa:Capacity`, inactiveColor: 'rgb(110, 112, 121)', textStyle: { - color: 'white', + color: 'var(--fg)', }, icon: 'roundRect', }, diff --git a/frontend/src/app/services/state.service.ts b/frontend/src/app/services/state.service.ts index ebfdd0824..9529f83c9 100644 --- a/frontend/src/app/services/state.service.ts +++ b/frontend/src/app/services/state.service.ts @@ -89,6 +89,7 @@ export interface Env { PACKAGE_JSON_VERSION_MEMPOOL_SPACE?: string; STRATUM_ENABLED: boolean; SERVICES_API?: string; + TWIDGET_API?: string; customize?: Customization; PROD_DOMAINS: string[]; } @@ -135,6 +136,7 @@ const defaultEnv: Env = { 'ADDITIONAL_CURRENCIES': false, 'STRATUM_ENABLED': false, 'SERVICES_API': 'https://mempool.space/api/v1/services', + 'TWIDGET_API': 'https://mempool.ninja', 'PROD_DOMAINS': [], }; diff --git a/frontend/src/app/services/theme.service.ts b/frontend/src/app/services/theme.service.ts index 0f184e9d2..8efdcd8b4 100644 --- a/frontend/src/app/services/theme.service.ts +++ b/frontend/src/app/services/theme.service.ts @@ -1,6 +1,6 @@ import { Injectable } from '@angular/core'; import { BehaviorSubject } from 'rxjs'; -import { defaultMempoolFeeColors, contrastMempoolFeeColors } from '@app/app.constants'; +import { defaultMempoolFeeColors, contrastMempoolFeeColors, lightMempoolFeeColors } from '@app/app.constants'; import { StorageService } from '@app/services/storage.service'; import { StateService } from '@app/services/state.service'; @@ -20,15 +20,48 @@ export class ThemeService { ) { let theme = this.stateService.env.customize?.theme || this.storageService.getValue('theme-preference') || 'default'; // theme preference must be a valid known public theme - if (!this.stateService.env.customize?.theme && !['default', 'contrast', 'softsimon'].includes(theme)) { + if (!this.stateService.env.customize?.theme && !['default', 'contrast', 'softsimon', 'nymkappa'].includes(theme)) { theme = 'default'; this.storageService.setValue('theme-preference', 'default'); } + if (!this.stateService.env.customize?.theme) { + const aprilThemeState = this.storageService.getValue('april-theme'); + if (this.isAprilFirst()) { + if (aprilThemeState !== 'dismissed') { + if (aprilThemeState !== 'active') { + this.storageService.setValue('april-theme-backup', this.storageService.getValue('theme-preference') || 'default'); + this.storageService.setValue('april-theme', 'active'); + } + theme = 'nymkappa'; + } + } else if (aprilThemeState === 'active') { + theme = this.storageService.getValue('april-theme-backup') || 'default'; + this.storageService.setValue('theme-preference', theme); + this.clearAprilTheme(); + } else if (aprilThemeState === 'dismissed') { + this.clearAprilTheme(); + } + } this.themeState$ = new BehaviorSubject({ theme, loading: false }); this.apply(theme); } - apply(theme: string): void { + setTheme(theme: string): void { + if (!this.stateService.env.customize?.theme && this.isAprilFirst()) { + this.storageService.setValue('april-theme', 'dismissed'); + this.storageService.removeItem('april-theme-backup'); + } else { + this.clearAprilTheme(); + } + this.apply(theme); + } + + clearAprilTheme(): void { + this.storageService.removeItem('april-theme'); + this.storageService.removeItem('april-theme-backup'); + } + + private apply(theme: string): void { if (this.theme === theme) { return; } @@ -64,7 +97,7 @@ export class ThemeService { this.style.media = 'all'; this.initialLoad = false; } - this.mempoolFeeColors = theme === 'contrast' || theme === 'bukele' ? contrastMempoolFeeColors : defaultMempoolFeeColors; + this.mempoolFeeColors = this.getMempoolFeeColors(theme); this.themeState$.next({ theme, loading: false }); }; this.style.onerror = () => this.apply('default'); @@ -86,4 +119,21 @@ export class ThemeService { } return `${theme}.css`; } + + private getMempoolFeeColors(theme: string): string[] { + switch (theme) { + case 'contrast': + case 'bukele': + return contrastMempoolFeeColors; + case 'nymkappa': + return lightMempoolFeeColors; + default: + return defaultMempoolFeeColors; + } + } + + private isAprilFirst(): boolean { + const now = new Date(); + return now.getMonth() === 3 && now.getDate() === 1; + } } 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 723c7afb5..db3095513 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 @@ -9,7 +9,7 @@ footer { } footer a { - color: rgba(255, 255, 255, 0.4); + color: var(--footer-fg); } footer p { @@ -114,6 +114,12 @@ footer .row.social-links a { footer .row.social-links svg { width: 20px; margin: 10px 0 10px 0; + fill: var(--fg); +} + +footer .row.social-links svg * { + fill: var(--fg) !important; + stroke: var(--fg) !important; } footer .row.version { @@ -126,7 +132,7 @@ footer .row.version p { margin-bottom: 0; text-align: center; font-size: 12px; - color: rgba(255, 255, 255, 0.4); + color: var(--footer-fg); } footer .row.version p a { diff --git a/frontend/src/app/shared/components/mining-pool/mining-pool.component.html b/frontend/src/app/shared/components/mining-pool/mining-pool.component.html new file mode 100644 index 000000000..dddd19a9a --- /dev/null +++ b/frontend/src/app/shared/components/mining-pool/mining-pool.component.html @@ -0,0 +1,9 @@ + + +@if (showName) { + @if (searchText) { + + } @else { + {{ name }} + } +} diff --git a/frontend/src/app/shared/components/mining-pool/mining-pool.component.scss b/frontend/src/app/shared/components/mining-pool/mining-pool.component.scss new file mode 100644 index 000000000..b32cb34fd --- /dev/null +++ b/frontend/src/app/shared/components/mining-pool/mining-pool.component.scss @@ -0,0 +1,22 @@ +.mining-pool-logo { + width: 15px; + height: 15px; + position: relative; + top: -1px; + margin-right: 5px; +} + +.mining-pool-name { + display: inline; + color: var(--fg); + + &.truncate { + display: inline-block; + vertical-align: text-top; + padding-left: 10px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + max-width: 160px; + } +} diff --git a/frontend/src/app/shared/components/mining-pool/mining-pool.component.ts b/frontend/src/app/shared/components/mining-pool/mining-pool.component.ts new file mode 100644 index 000000000..b18bea2e4 --- /dev/null +++ b/frontend/src/app/shared/components/mining-pool/mining-pool.component.ts @@ -0,0 +1,78 @@ +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core'; +import { ThemeService } from '@app/services/theme.service'; +import { Subscription } from 'rxjs'; + +@Component({ + selector: 'app-mining-pool', + templateUrl: './mining-pool.component.html', + styleUrls: ['./mining-pool.component.scss'], + standalone: false, + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class MiningPoolComponent implements OnInit, OnDestroy { + private static readonly missingLightLogoSlugs = new Set(); + private themeStateSubscription: Subscription; + private loadedTheme = 'default'; + + constructor( + private themeService: ThemeService, + private cd: ChangeDetectorRef, + ) { } + + @Input() slug: string; + @Input() name: string | null = null; + @Input() showName: boolean = true; + @Input() searchText: string | null = null; + @Input() logoStyle: string | null = null; + @Input() logoClass: string | null = null; + @Input() textStyle: string | null = null; + @Input() textClass: string | null = null; + @Input() forceStandardLogo: boolean = false; + + ngOnInit(): void { + this.themeStateSubscription = this.themeService.themeState$.subscribe((state) => { + if (state.loading) { + return; + } + this.loadedTheme = state.theme; + this.cd.markForCheck(); + }); + } + + ngOnDestroy(): void { + this.themeStateSubscription?.unsubscribe(); + } + + get logoSrc(): string { + return `/resources/mining-pools/${this.slug}${this.useLightLogo ? '.light' : ''}.svg`; + } + + get logoAlt(): string { + return this.name ? `Logo of ${this.name} mining pool` : 'Mining pool logo'; + } + + onImageError(event: Event): void { + const target = event.target as HTMLImageElement | null; + + if (!target) { + return; + } + + // If light logo is missing, fall back to the standard logo and don't try to load the light logo again + if (this.useLightLogo && target.src.endsWith(`${this.slug}.light.svg`)) { + MiningPoolComponent.missingLightLogoSlugs.add(this.slug); + target.src = `/resources/mining-pools/${this.slug}.svg`; + return; + } + + if (target.src.endsWith('/resources/mining-pools/default.svg') || target.src.endsWith('/resources/mining-pools/default.light.svg')) { + return; + } + + target.src = !this.forceStandardLogo && this.loadedTheme === 'nymkappa' ? '/resources/mining-pools/default.light.svg' : '/resources/mining-pools/default.svg'; + } + + get useLightLogo(): boolean { + return !this.forceStandardLogo && this.loadedTheme === 'nymkappa' && !MiningPoolComponent.missingLightLogoSlugs.has(this.slug); + } +} diff --git a/frontend/src/app/shared/components/truncate/truncate.component.scss b/frontend/src/app/shared/components/truncate/truncate.component.scss index 739376ed2..6d761ac1e 100644 --- a/frontend/src/app/shared/components/truncate/truncate.component.scss +++ b/frontend/src/app/shared/components/truncate/truncate.component.scss @@ -41,7 +41,7 @@ .disabled { pointer-events: none; opacity: 0.8; - color: #fff; + color: var(--transparent-fg); } } diff --git a/frontend/src/app/shared/shared.module.ts b/frontend/src/app/shared/shared.module.ts index eabb7bbd3..457f0a945 100644 --- a/frontend/src/app/shared/shared.module.ts +++ b/frontend/src/app/shared/shared.module.ts @@ -107,6 +107,7 @@ import { GeolocationComponent } from '@app/shared/components/geolocation/geoloca import { TestnetAlertComponent } from '@app/shared/components/testnet-alert/testnet-alert.component'; import { GlobalFooterComponent } from '@app/shared/components/global-footer/global-footer.component'; import { MempoolErrorComponent } from '@app/shared/components/mempool-error/mempool-error.component'; +import { MiningPoolComponent } from '@app/shared/components/mining-pool/mining-pool.component'; import { AccelerationsListComponent } from '@components/acceleration/accelerations-list/accelerations-list.component'; import { PendingStatsComponent } from '@components/acceleration/pending-stats/pending-stats.component'; import { AccelerationStatsComponent } from '@components/acceleration/acceleration-stats/acceleration-stats.component'; @@ -231,6 +232,7 @@ import { GithubLogin } from '@components/github-login.component/github-login.com GeolocationComponent, TestnetAlertComponent, GlobalFooterComponent, + MiningPoolComponent, CalculatorComponent, BitcoinsatoshisPipe, BlockViewComponent, @@ -383,6 +385,7 @@ import { GithubLogin } from '@components/github-login.component/github-login.com ToggleComponent, GeolocationComponent, TestnetAlertComponent, + MiningPoolComponent, PreviewTitleComponent, GlobalFooterComponent, MempoolErrorComponent, diff --git a/frontend/src/resources/apple-pay-light.png b/frontend/src/resources/apple-pay-light.png new file mode 100644 index 000000000..a110429ab Binary files /dev/null and b/frontend/src/resources/apple-pay-light.png differ diff --git a/frontend/src/resources/cash-app-light.svg b/frontend/src/resources/cash-app-light.svg new file mode 100644 index 000000000..cd86c0174 --- /dev/null +++ b/frontend/src/resources/cash-app-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/resources/google-pay-light.png b/frontend/src/resources/google-pay-light.png new file mode 100644 index 000000000..b24c01580 Binary files /dev/null and b/frontend/src/resources/google-pay-light.png differ diff --git a/frontend/src/resources/mempool-holdings-light.png b/frontend/src/resources/mempool-holdings-light.png new file mode 100644 index 000000000..2994065f3 Binary files /dev/null and b/frontend/src/resources/mempool-holdings-light.png differ diff --git a/frontend/src/resources/mempool-logo-bigger-light.png b/frontend/src/resources/mempool-logo-bigger-light.png new file mode 100644 index 000000000..21afdac8d Binary files /dev/null and b/frontend/src/resources/mempool-logo-bigger-light.png differ diff --git a/frontend/src/resources/mempool-space-logo-bigger-light.png b/frontend/src/resources/mempool-space-logo-bigger-light.png new file mode 100644 index 000000000..fbd12841c Binary files /dev/null and b/frontend/src/resources/mempool-space-logo-bigger-light.png differ diff --git a/frontend/src/resources/profile/bitkey-light.svg b/frontend/src/resources/profile/bitkey-light.svg new file mode 100644 index 000000000..6444bacd3 --- /dev/null +++ b/frontend/src/resources/profile/bitkey-light.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/resources/profile/cake-wallet-light.svg b/frontend/src/resources/profile/cake-wallet-light.svg new file mode 100644 index 000000000..dc06100ff --- /dev/null +++ b/frontend/src/resources/profile/cake-wallet-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/resources/profile/leather-light.svg b/frontend/src/resources/profile/leather-light.svg new file mode 100644 index 000000000..e06c3c2aa --- /dev/null +++ b/frontend/src/resources/profile/leather-light.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/frontend/src/resources/profile/liquid-light.svg b/frontend/src/resources/profile/liquid-light.svg new file mode 100644 index 000000000..b51b1dfc6 --- /dev/null +++ b/frontend/src/resources/profile/liquid-light.svg @@ -0,0 +1,39 @@ + + + brand/logo-products/liquid + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/frontend/src/resources/profile/onbtc-full-light.svg b/frontend/src/resources/profile/onbtc-full-light.svg new file mode 100644 index 000000000..ff7439ee0 --- /dev/null +++ b/frontend/src/resources/profile/onbtc-full-light.svg @@ -0,0 +1,318 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/frontend/src/resources/profile/start9-light.png b/frontend/src/resources/profile/start9-light.png new file mode 100644 index 000000000..f5cd28283 Binary files /dev/null and b/frontend/src/resources/profile/start9-light.png differ diff --git a/frontend/src/resources/wiz-light.png b/frontend/src/resources/wiz-light.png new file mode 100644 index 000000000..ec46e83c3 Binary files /dev/null and b/frontend/src/resources/wiz-light.png differ diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index b4c73b2e9..480c432ae 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -97,6 +97,8 @@ $dropdown-link-active-bg: $active-bg; --hover-bg: #{$hover-bg}; --fg: #{$fg}; --nav-bg: #{$nav-bg}; + --nav-icon: #fff; + --nav-shadow: #000; --title-fg: #{$title-fg}; --primary: #{$primary}; @@ -112,12 +114,22 @@ $dropdown-link-active-bg: $active-bg; --box-bg: #171c2a; --stat-box-bg: #0b1018; + --border-subtle: rgba(255, 255, 255, 0.11); + --block-top: #232838; + --block-side: #191c27; + --block-goggles-overlay: #181b2d7f; + --mempool-block-top: #403834; + --mempool-block-side: #2d2825; + --mempool-block-loading: #554b45; --alert-bg: #3a1c61; --navbar-bg: #212121; --transparent-fg: #ffffffbb; + --footer-fg: rgba(255, 255, 255, 0.4); --fade-out-box-bg-start: rgba(23, 28, 42, 0); --fade-out-box-bg-end: rgba(23, 28, 42, 1); --opacity: 0.57; + --world-map-bg: #272b3f; + --world-map-border: #000; --testnet: #1d486f; --signet: #6f1d5d; @@ -148,6 +160,9 @@ $dropdown-link-active-bg: $active-bg; --search-button-focus: #533180; --search-button-shadow: #7c58ab80; + --bs-body-color: var(--fg); + --bs-body-bg: var(--active-bg); + --bs-card-color: var(--fg); --bs-border-radius: 0.25rem; --bs-btn-border-color: transparent; --bs-btn-disabled-border-color: transparent; @@ -159,6 +174,7 @@ html, body { body { background-color: var(--active-bg); + color: var(--fg); padding-bottom: 60px; } @@ -227,11 +243,31 @@ main { .form-control:focus { color: var(--fg); background-color: var(--secondary); + border-color: rgba(17, 19, 31, 0.2); } .btn-purple { - background-color: var(--tertiary); - border-color: var(--tertiary); + --bs-btn-color: #fff; + --bs-btn-bg: var(--tertiary); + --bs-btn-border-color: var(--tertiary); + --bs-btn-hover-color: #fff; + --bs-btn-hover-bg: var(--search-button-focus); + --bs-btn-hover-border-color: var(--search-button); + --bs-btn-active-color: #fff; + --bs-btn-active-bg: var(--search-button); + --bs-btn-active-border-color: var(--search-button-border); + --bs-btn-disabled-color: #fff; + --bs-btn-disabled-bg: var(--tertiary); + --bs-btn-disabled-border-color: var(--tertiary); + background-color: var(--bs-btn-bg); + border-color: var(--bs-btn-border-color); + color: var(--bs-btn-color); +} + +.btn-purple.disabled, .btn-purple:disabled { + background-color: var(--bs-btn-disabled-bg); + border-color: var(--bs-btn-disabled-border-color); + color: var(--bs-btn-disabled-color); } .btn-purple:not(:disabled):not(.disabled):active, .btn-purple:not(:disabled):not(.disabled).active, .show > .btn-purple.dropdown-toggle { @@ -254,7 +290,7 @@ main { } .form-control.form-control-secondary { - color: #fff; + color: var(--fg); background-color: var(--secondary); border: 1px solid var(--secondary); } @@ -325,14 +361,14 @@ main { .progress-text { span { - color: #fff !important; + color: var(--fg) !important; } } .block-size, .blocks-container { .symbol { font-size: 16px; - color: #fff !important; + color: var(--fg) !important; } } @@ -345,7 +381,7 @@ main { color: var(--fg); padding-top: 20px; padding-bottom: 10px; - border-top: 3px solid var(--fg); + border-top: 3px solid var(--nav-icon); display: flex; flex-direction: row; justify-content: space-between; @@ -381,6 +417,8 @@ main { .table { margin-bottom: 0; font-size: 0.9rem; + color: var(--fg); + --bs-table-color: var(--fg); @media (min-width: 576px) { font-size: 1rem; } @@ -414,6 +452,10 @@ main { color: var(--yellow); } +.fg-color { + color: var(--fg); +} + .table-striped { --bs-table-striped-bg: var(--stat-box-bg); --bs-table-striped-color: var(--fg); @@ -488,6 +530,9 @@ html:lang(ru) .card-title { color: #fff; .total-value { float: right; + .symbol { + color: #ffffffbb; + } } } .active { @@ -593,6 +638,11 @@ html:lang(ru) .card-title { span { font-size: 10px; } + .total-parcial-vbytes { + .symbol { + color: #ffffffbb; + } + } .symbol { font-size: 9px; } @@ -1289,7 +1339,7 @@ th { display: block; width: 100%; padding: 1rem 2rem; - color: #fff; + color: var(--fg); font-weight: bold; &:focus, &:hover, &:active { text-decoration: none; @@ -1346,6 +1396,7 @@ th { border: 1px solid var(--tertiary); } .page-item.disabled .page-link { + color: var(--transparent-fg); background-color: var(--bg); border: 1px solid var(--bg); } @@ -1373,7 +1424,7 @@ th { } .blink-bg { - color: #fff; + color: var(--fg); 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); @@ -1414,13 +1465,17 @@ app-global-footer { } .info-link fa-icon { - color: rgba(255, 255, 255, 0.4); + color: var(--transparent-fg); margin-left: 5px; } .dropdown-menu { background-color: var(--bg); color: var(--fg); + + .dropdown-item { + color: var(--fg); + } .dropdown-item:hover, .dropdown-item:focus { background-color: var(--active-bg); color: var(--fg); @@ -1430,11 +1485,12 @@ app-global-footer { .btn-secondary { background-color: var(--secondary); border-color: var(--secondary); + color: var(--fg); } a { color: var(--link-color); - &:hover { + &:hover:where(:not(.health-badge):not(.btn-purple)) { color: var(--link-hover-color); } } @@ -1484,6 +1540,10 @@ button { } .btn-success { + --bs-btn-color: #fff; + --bs-btn-hover-color: #fff; + --bs-btn-active-color: #fff; + --bs-btn-disabled-color: #fff; color: #fff; &:focus, &:hover, &:active, &:disabled { color: #fff; @@ -1494,6 +1554,10 @@ button { padding: 0.25em 0.4em; } +a.badge:hover, a.badge:focus { + text-decoration: none; +} + .table th, .table td { padding: 0.75rem; } @@ -1572,7 +1636,7 @@ button { } .nav-tabs .nav-link.active { - color: #fff; + color: var(--fg); } .text-muted { diff --git a/frontend/src/theme-bukele.scss b/frontend/src/theme-bukele.scss index 6d3e21125..b6a49469a 100644 --- a/frontend/src/theme-bukele.scss +++ b/frontend/src/theme-bukele.scss @@ -4,7 +4,7 @@ $bg: #11131f; $active-bg: #000000; $hover-bg: #12131e; -$fg: #d2d2d2; +$fg: #fff; $nav-bg: #111e60; $title-fg: #2055e3; @@ -105,7 +105,7 @@ $dropdown-link-active-bg: $active-bg; --green: #83fd00; --red: #ff3d00; --yellow: #fff000; - --grey: #7e7e7e; + --grey: #6c757d; --tooltip-grey: #b1b1b1; --orange: #ff9f00; --pink: #e83e8c; diff --git a/frontend/src/theme-nymkappa.scss b/frontend/src/theme-nymkappa.scss new file mode 100644 index 000000000..b5d253c50 --- /dev/null +++ b/frontend/src/theme-nymkappa.scss @@ -0,0 +1,220 @@ +@use "sass:color"; + +/* Theme */ +$bg: #fafafa; +$active-bg: #eef2f9; +$hover-bg: #eaeff8; +$fg: #182033; +$nav-bg: #fdfdfd; +$title-fg: #2055e3; + +$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: #6bb8dc; +$secondary: #dadce1; +$tertiary: #a377ff; +$success: #258751; +$info: #426de6; + +$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; + +$form-select-indicator-color: $fg; + +.input-group-text { + background-color: #eef2f7 !important; + border: 1px solid #d6dbe7 !important; +} + +$link-color: color.adjust($info, $lightness: -10%); +$link-decoration: none !default; +$link-hover-color: color.adjust($link-color, $lightness: -15%) !default; +$link-hover-decoration: underline !default; + +$dropdown-bg: $bg; +$dropdown-link-color: $fg; + +$dropdown-link-hover-color: $fg; +$dropdown-link-hover-bg: $hover-bg; + +$dropdown-link-active-color: $fg; +$dropdown-link-active-bg: $hover-bg; + +:root { + --bg: #{$bg}; + --active-bg: #{$active-bg}; + --hover-bg: #{$hover-bg}; + --fg: #{$fg}; + --nav-bg: #{$nav-bg}; + --nav-icon: #485464; + --nav-shadow: #dddddd; + --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: #cdd8eb; + --skeleton-bg-light: #f3f6fc; + + --box-bg: #ffffff; + --stat-box-bg: #e2e9f6; + --border-subtle: rgba(15, 23, 42, 0.12); + --block-top: #c9d1e2; + --block-side: #b6c1d8; + --block-goggles-overlay: #eef2f8cc; + --mempool-block-top: #d9dde1; + --mempool-block-side: #c8cdd3; + --mempool-block-loading: #b3bac2; + --alert-bg: #c4b5fd; + --transparent-fg: #2a2d40b3; + --footer-fg: rgba(15, 23, 42, 0.6); + --fade-out-box-bg-start: rgba(255, 255, 255, 0); + --fade-out-box-bg-end: rgba(255, 255, 255, 1); + --opacity: 0.7; + --world-map-bg: #ccd9ef; + --world-map-border: #94a5c1; + + --testnet: #93c5fd; + --signet: #f0abfc; + --liquid: #5eead4; + --liquidtestnet: #d1d5db; + + --mainnet-alt: #a78bfa; + --testnet-alt: #bfdbfe; + --signet-alt: #f5d0fe; + --liquidtestnet-alt: #e5e7eb; + + --taproot: #eba814; + --taproot-light: #d5a90a; + --taproot-dark: #9d7c05; + + --green: #22a559; + --red: #e24d5e; + --yellow: #1f2747; + --grey: #94a3b8; + --tooltip-grey: #b1b1b1; + --orange: #f7931a; + --pink: #db2777; + + --search-button: #a377ff; + --search-button-border: #a377ff; + --search-button-focus: #9c6dff; + --search-button-shadow: #9c6dff; + + --bs-btn-hover-bg: #{$secondary}; + --bs-btn-hover-border-color: #{$secondary}; +} + +.form-select { + --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23182033' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); +} + +.nav-tabs { + --bs-nav-tabs-link-active-bg: var(--active-bg); + --bs-nav-tabs-link-active-color: var(--fg); + --bs-nav-tabs-link-active-border-color: var(--secondary) var(--secondary) var(--active-bg); +} + +#divider { + background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='104%25' height='100%25' fill='none' stroke='%23485464' stroke-width='4' stroke-dasharray='10%2c17' stroke-dashoffset='18' stroke-linecap='square'/%3e%3c/svg%3e"); +} + +.btn-primary { + --bs-btn-hover-bg: #56aed7; + --bs-btn-hover-border-color: #56aed7; + --bs-btn-focus-shadow-rgb: 86, 174, 215; + --bs-btn-active-bg: #42a4d2; + --bs-btn-active-border-color: #42a4d2; +} + +.btn-secondary { + --bs-btn-hover-bg: #c8cdd3; + --bs-btn-hover-border-color: #c8cdd3; + --bs-btn-focus-shadow-rgb: 200, 205, 211; + --bs-btn-active-bg: #b6c1d8; + --bs-btn-active-border-color: #b6c1d8; + --bs-btn-hover-color: var(--fg); +} + +.btn-outline-secondary { + --bs-btn-hover-bg: var(--secondary); + --bs-btn-hover-border-color: var(--secondary); + --bs-btn-focus-shadow-rgb: 218, 220, 225; + --bs-btn-active-bg: var(--secondary); + --bs-btn-active-border-color: var(--secondary); + --bs-btn-hover-color: var(--fg); +} + +.btn-outline-info { + --bs-btn-color: var(--link-color); + --bs-btn-border-color: var(--link-color); + --bs-btn-hover-color: var(--bg); + --bs-btn-hover-bg: var(--link-color); + --bs-btn-hover-border-color: var(--link-color); + --bs-btn-active-color: var(--bg); + --bs-btn-active-bg: var(--link-color); + --bs-btn-active-border-color: var(--link-color); +} + +.tooltip-inner { + color: #fff; +} + +.bg-info { + background-color: var(--info) !important; +} + +.bg-warning { + color: var(--fg); +} + +.bg-secondary { + background-color: var(--secondary) !important; + color: var(--fg); +} + +.constants { color: #d27300 } +.control { color: #4ab5e1 } +.stack { color: #d78b00 } +.splice { color: #34aedf } +.logic { color: #34aedf } +.arithmetic { color: #9cd4a7 } +.crypto { color: #fa3d3d } +.locktime { color: #d27300 } +.reserved { color: #d27300 } + +.text-light { + color: var(--fg) !important; +} + +.dropdown-menu { + --bs-dropdown-link-active-bg: #c0c0c0; + + .dropdown-item:hover, .dropdown-item:focus { + background-color: #d0d0d0; + } +}
FilenameHashVerifiedProof
FilenameHashVerifiedProof
- + diff --git a/frontend/src/app/components/simpleproof-widget/simpleproof-widget.component.scss b/frontend/src/app/components/simpleproof-widget/simpleproof-widget.component.scss index e52b383a1..fd26ea081 100644 --- a/frontend/src/app/components/simpleproof-widget/simpleproof-widget.component.scss +++ b/frontend/src/app/components/simpleproof-widget/simpleproof-widget.component.scss @@ -150,6 +150,7 @@ td.verified { font-weight: normal; background: var(--nav-bg); color: white; + text-decoration: none; display: flex; flex-direction: row; diff --git a/frontend/src/app/components/stale-list/stale-list.component.html b/frontend/src/app/components/stale-list/stale-list.component.html index eb5e754d2..6002176b7 100644 --- a/frontend/src/app/components/stale-list/stale-list.component.html +++ b/frontend/src/app/components/stale-list/stale-list.component.html @@ -57,11 +57,11 @@
- + {{ chainTip.stale.extras.pool.minerNames[1] }} - {{ chainTip.stale.extras.pool.name }} +
@@ -103,11 +103,11 @@
- + {{ chainTip.canonical.extras.pool.minerNames[1] }} - {{ chainTip.canonical.extras.pool.name }} +
diff --git a/frontend/src/app/components/stale-list/stale-list.component.scss b/frontend/src/app/components/stale-list/stale-list.component.scss index 148ce7c40..d1c910476 100644 --- a/frontend/src/app/components/stale-list/stale-list.component.scss +++ b/frontend/src/app/components/stale-list/stale-list.component.scss @@ -188,18 +188,6 @@ } } -.pool-logo { - width: 15px; - height: 15px; - position: relative; - top: -1px; - margin-right: 2px; - - &.faded { - filter: grayscale(100%) brightness(1.5); - } -} - .beta { font-size: 10px; margin: 5px; diff --git a/frontend/src/app/components/statistics/statistics.component.html b/frontend/src/app/components/statistics/statistics.component.html index 405020ec3..acd7a64f1 100644 --- a/frontend/src/app/components/statistics/statistics.component.html +++ b/frontend/src/app/components/statistics/statistics.component.html @@ -13,7 +13,7 @@
- +
diff --git a/frontend/src/app/components/statistics/statistics.component.scss b/frontend/src/app/components/statistics/statistics.component.scss index 6254371d5..79eead479 100644 --- a/frontend/src/app/components/statistics/statistics.component.scss +++ b/frontend/src/app/components/statistics/statistics.component.scss @@ -126,13 +126,6 @@ } } -.btn-group-toggle { - display: inline-flex; - @media (min-width: 830px) { - display: block; - } -} - .small-buttons { width: 100%; display: flex; diff --git a/frontend/src/app/components/stratum/stratum-list/stratum-list.component.html b/frontend/src/app/components/stratum/stratum-list/stratum-list.component.html index c13c885d0..644916fec 100644 --- a/frontend/src/app/components/stratum/stratum-list/stratum-list.component.html +++ b/frontend/src/app/components/stratum/stratum-list/stratum-list.component.html @@ -33,8 +33,7 @@
@if (pools[row.job.pool]) { - - {{ pools[row.job.pool].name}} + } Miner - + @if (pool.minerNames[1].length > 16) { {{ pool.minerNames[1].slice(0, 15) }}… @@ -312,8 +312,7 @@ {{ pool.minerNames[1] }} } - - {{ pool.name }} +