add high contrast theme

2023-01-03 05:24:14 -06:00
parent 1ca05a029a
commit 79dd263fb1
54 changed files with 446 additions and 149 deletions
--- 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
@@ -233,7 +233,7 @@ export class BlockFeeRatesGraphComponent implements OnInit {
        borderRadius: 4,
        shadowColor: 'rgba(0, 0, 0, 0.5)',
        textStyle: {
-          color: '#b1b1b1',
+          color: 'var(--tooltip-grey)',
          align: 'left',
        },
        borderColor: '#000',
--- 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
@@ -151,7 +151,7 @@ export class BlockFeesGraphComponent implements OnInit {
        borderRadius: 4,
        shadowColor: 'rgba(0, 0, 0, 0.5)',
        textStyle: {
-          color: '#b1b1b1',
+          color: 'var(--tooltip-grey)',
          align: 'left',
        },
        borderColor: '#000',
--- a/frontend/src/app/components/block-health-graph/block-health-graph.component.ts
+++ b/frontend/src/app/components/block-health-graph/block-health-graph.component.ts
@@ -131,7 +131,7 @@ export class BlockHealthGraphComponent implements OnInit {
        borderRadius: 4,
        shadowColor: 'rgba(0, 0, 0, 0.5)',
        textStyle: {
-          color: '#b1b1b1',
+          color: 'var(--tooltip-grey)',
          align: 'left',
        },
        borderColor: '#000',
--- 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
@@ -3,7 +3,7 @@
  background: rgba(#11131f, 0.95);
  border-radius: 4px;
  box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
-  color: #b1b1b1;
+  color: var(--tooltip-grey);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
--- a/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.ts
+++ b/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.ts
@@ -150,7 +150,7 @@ export class BlockRewardsGraphComponent implements OnInit {
        borderRadius: 4,
        shadowColor: 'rgba(0, 0, 0, 0.5)',
        textStyle: {
-          color: '#b1b1b1',
+          color: 'var(--tooltip-grey)',
          align: 'left',
        },
        borderColor: '#000',
--- 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
@@ -146,7 +146,7 @@ export class BlockSizesWeightsGraphComponent implements OnInit {
        borderRadius: 4,
        shadowColor: 'rgba(0, 0, 0, 0.5)',
        textStyle: {
-          color: '#b1b1b1',
+          color: 'var(--tooltip-grey)',
          align: 'left',
        },
        borderColor: '#000',
--- a/frontend/src/app/components/block/block.component.scss
+++ b/frontend/src/app/components/block/block.component.scss
@@ -175,9 +175,7 @@ h1 {
  }

  a {
-    color: #1ad8f4;
    &:hover, &:focus {
-      color: #09a3ba;
      display: inline-block;
    }
  }
--- a/frontend/src/app/components/difficulty/difficulty.component.scss
+++ b/frontend/src/app/components/difficulty/difficulty.component.scss
@@ -96,7 +96,7 @@
 }

 .card-title {
-  color: #4a68b9;
+  color: var(--title-fg);
  font-size: 1rem;
 }

--- a/frontend/src/app/components/fees-box/fees-box.component.scss
+++ b/frontend/src/app/components/fees-box/fees-box.component.scss
@@ -1,5 +1,5 @@
 .card-title {
-  color: #4a68b9;
+  color: var(--title-fg);
  font-size: 10px;
  margin-bottom: 4px;
  font-size: 1rem;
@@ -79,6 +79,7 @@
  display: flex;
  flex-direction: row;
  transition: background-color 1s;
+  color: var(--color-fg);
  &.priority {
    @media (767px < width < 992px), (width < 576px) {
      width: 100%;
--- a/frontend/src/app/components/fees-box/fees-box.component.ts
+++ b/frontend/src/app/components/fees-box/fees-box.component.ts
@@ -1,6 +1,6 @@
-import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
+import { Component, OnInit, ChangeDetectionStrategy, OnDestroy, ChangeDetectorRef } from '@angular/core';
 import { StateService } from '../../services/state.service';
-import { Observable, combineLatest } from 'rxjs';
+import { Observable, combineLatest, Subscription } from 'rxjs';
 import { Recommendedfees } from '../../interfaces/websocket.interface';
 import { feeLevels } from '../../app.constants';
 import { map, startWith, tap } from 'rxjs/operators';
@@ -12,15 +12,18 @@ import { ThemeService } from 'src/app/services/theme.service';
  styleUrls: ['./fees-box.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class FeesBoxComponent implements OnInit {
+export class FeesBoxComponent implements OnInit, OnDestroy {
  isLoading$: Observable<boolean>;
  recommendedFees$: Observable<Recommendedfees>;
+  themeSubscription: Subscription;
  gradient = 'linear-gradient(to right, #2e324e, #2e324e)';
  noPriority = '#2e324e';
+  fees: Recommendedfees;

  constructor(
    private stateService: StateService,
    private themeService: ThemeService,
+    private cd: ChangeDetectorRef,
  ) { }

  ngOnInit(): void {
@@ -33,18 +36,32 @@ export class FeesBoxComponent implements OnInit {
    this.recommendedFees$ = this.stateService.recommendedFees$
      .pipe(
        tap((fees) => {
-          let feeLevelIndex = feeLevels.slice().reverse().findIndex((feeLvl) => fees.minimumFee >= feeLvl);
-          feeLevelIndex = feeLevelIndex >= 0 ? feeLevels.length - feeLevelIndex : feeLevelIndex;
-          const startColor = '#' + (this.themeService.mempoolFeeColors[feeLevelIndex - 1] || this.themeService.mempoolFeeColors[this.themeService.mempoolFeeColors.length - 1]);
-
-          feeLevelIndex = feeLevels.slice().reverse().findIndex((feeLvl) => fees.fastestFee >= feeLvl);
-          feeLevelIndex = feeLevelIndex >= 0 ? feeLevels.length - feeLevelIndex : feeLevelIndex;
-          const endColor = '#' + (this.themeService.mempoolFeeColors[feeLevelIndex - 1] || this.themeService.mempoolFeeColors[this.themeService.mempoolFeeColors.length - 1]);
-
-          this.gradient = `linear-gradient(to right, ${startColor}, ${endColor})`;
-          this.noPriority = startColor;
+          this.fees = fees;
+          this.setFeeGradient();
        }
      )
    );
+    this.themeSubscription = this.themeService.themeChanged$.subscribe(() => {
+      this.setFeeGradient();
+    })
+  }
+
+  setFeeGradient() {
+    let feeLevelIndex = feeLevels.slice().reverse().findIndex((feeLvl) => this.fees.minimumFee >= feeLvl);
+    feeLevelIndex = feeLevelIndex >= 0 ? feeLevels.length - feeLevelIndex : feeLevelIndex;
+    const startColor = '#' + (this.themeService.mempoolFeeColors[feeLevelIndex - 1] || this.themeService.mempoolFeeColors[this.themeService.mempoolFeeColors.length - 1]);
+
+    feeLevelIndex = feeLevels.slice().reverse().findIndex((feeLvl) => this.fees.fastestFee >= feeLvl);
+    feeLevelIndex = feeLevelIndex >= 0 ? feeLevels.length - feeLevelIndex : feeLevelIndex;
+    const endColor = '#' + (this.themeService.mempoolFeeColors[feeLevelIndex - 1] || this.themeService.mempoolFeeColors[this.themeService.mempoolFeeColors.length - 1]);
+
+    this.gradient = `linear-gradient(to right, ${startColor}, ${endColor})`;
+    this.noPriority = startColor;
+
+    this.cd.markForCheck();
+  }
+
+  ngOnDestroy(): void {
+    this.themeSubscription.unsubscribe();
  }
 }
--- a/frontend/src/app/components/footer/footer.component.scss
+++ b/frontend/src/app/components/footer/footer.component.scss
@@ -40,16 +40,8 @@
  }
 }

-.txPerSecond {
-  color: #4a9ff4;
-}
-
 .mempoolSize {
-  color: #4a68b9;
-}
-
-.unconfirmedTx {
-  color: #f14d80;
+  color: var(--title-fg);
 }

 .info-block {
--- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss
+++ b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss
@@ -94,7 +94,7 @@
    }
    .card-title {
      font-size: 1rem;
-      color: #4a68b9;
+      color: var(--title-fg);
    }
    .card-text {
      font-size: 18px;
--- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts
+++ b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts
@@ -242,7 +242,7 @@ export class HashrateChartComponent implements OnInit {
        borderRadius: 4,
        shadowColor: 'rgba(0, 0, 0, 0.5)',
        textStyle: {
-          color: '#b1b1b1',
+          color: 'var(--tooltip-grey)',
          align: 'left',
        },
        borderColor: '#000',
--- 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
@@ -225,7 +225,7 @@ export class HashrateChartPoolsComponent implements OnInit {
        borderRadius: 4,
        shadowColor: 'rgba(0, 0, 0, 0.5)',
        textStyle: {
-          color: '#b1b1b1',
+          color: 'var(--tooltip-grey)',
          align: 'left',
        },
        borderColor: '#000',
--- a/frontend/src/app/components/liquid-master-page/liquid-master-page.component.scss
+++ b/frontend/src/app/components/liquid-master-page/liquid-master-page.component.scss
@@ -47,7 +47,7 @@ li.nav-item {
 }

 .navbar-nav {
-  background: #212121;
+  background: var(--navbar-bg);
  bottom: 0;
  box-shadow: 0px 0px 15px 0px #000;
  flex-direction: row;
--- a/frontend/src/app/components/master-page/master-page.component.scss
+++ b/frontend/src/app/components/master-page/master-page.component.scss
@@ -58,7 +58,7 @@ li.nav-item {
 }

 .navbar-nav {
-  background: #212121;
+  background: var(--navbar-bg);
  bottom: 0;
  box-shadow: 0px 0px 15px 0px #000;
  flex-direction: row;
--- a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.html
+++ b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.html
@@ -55,7 +55,7 @@
          <a class="title-link" href="" [routerLink]="['/blocks' | relativeUrl]">
            <h5 class="card-title d-inline" i18n="dashboard.recent-blocks">Recent Blocks</h5>
            <span>&nbsp;</span>
-            <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: #4a68b9"></fa-icon>
+            <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: var(--title-fg)"></fa-icon>
          </a>
          <app-blocks-list [attr.data-cy]="'latest-blocks'" [widget]=true></app-blocks-list>
        </div>
@@ -69,7 +69,7 @@
          <a class="title-link" href="" [routerLink]="['/graphs/mining/hashrate-difficulty' | relativeUrl]">
            <h5 class="card-title d-inline" i18n="dashboard.adjustments">Adjustments</h5>
            <span>&nbsp;</span>
-            <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: #4a68b9"></fa-icon>
+            <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: var(--title-fg)"></fa-icon>
          </a>
          <app-difficulty-adjustments-table [attr.data-cy]="'difficulty-adjustments-table'"></app-difficulty-adjustments-table>
        </div>
--- a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss
+++ b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss
@@ -32,10 +32,10 @@

 .card-title {
  font-size: 1rem;
-  color: #4a68b9;
+  color: var(--title-fg);
 }
 .card-title > a {
-  color: #4a68b9;
+  color: var(--title-fg);
 }

 .card-body.pool-ranking {
--- a/frontend/src/app/components/pool-ranking/pool-ranking.component.scss
+++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.scss
@@ -99,7 +99,7 @@
    }
    .card-title {
      font-size: 1rem;
-      color: #4a68b9;
+      color: var(--title-fg);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
--- a/frontend/src/app/components/pool-ranking/pool-ranking.component.ts
+++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.ts
@@ -146,7 +146,7 @@ export class PoolRankingComponent implements OnInit {
        name: pool.name + ((isMobile() || this.widget) ? `` : ` (${pool.share}%)`),
        label: {
          overflow: 'none',
-          color: '#b1b1b1',
+          color: 'var(--tooltip-grey)',
          alignTo: 'edge',
          edgeDistance: edgeDistance,
        },
@@ -156,7 +156,7 @@ export class PoolRankingComponent implements OnInit {
          borderRadius: 4,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
          textStyle: {
-            color: '#b1b1b1',
+            color: 'var(--tooltip-grey)',
          },
          borderColor: '#000',
          formatter: () => {
@@ -184,7 +184,7 @@ export class PoolRankingComponent implements OnInit {
      name: 'Other' + (isMobile() ? `` : ` (${totalShareOther.toFixed(2)}%)`),
      label: {
        overflow: 'none',
-        color: '#b1b1b1',
+        color: 'var(--tooltip-grey)',
        alignTo: 'edge',
        edgeDistance: edgeDistance
      },
@@ -193,7 +193,7 @@ export class PoolRankingComponent implements OnInit {
        borderRadius: 4,
        shadowColor: 'rgba(0, 0, 0, 0.5)',
        textStyle: {
-          color: '#b1b1b1',
+          color: 'var(--tooltip-grey)',
        },
        borderColor: '#000',
        formatter: () => {
--- a/frontend/src/app/components/pool/pool.component.scss
+++ b/frontend/src/app/components/pool/pool.component.scss
@@ -190,7 +190,7 @@ div.scrollable {
 }

 .data-title {
-  color: #4a68b9;
+  color: var(--title-fg);
  font-size: 14px;
 }

--- a/frontend/src/app/components/pool/pool.component.ts
+++ b/frontend/src/app/components/pool/pool.component.ts
@@ -175,7 +175,7 @@ export class PoolComponent implements OnInit {
        borderRadius: 4,
        shadowColor: 'rgba(0, 0, 0, 0.5)',
        textStyle: {
-          color: '#b1b1b1',
+          color: 'var(--tooltip-grey)',
          align: 'left',
        },
        borderColor: '#000',
--- a/frontend/src/app/components/reward-stats/reward-stats.component.scss
+++ b/frontend/src/app/components/reward-stats/reward-stats.component.scss
@@ -1,5 +1,5 @@
 .card-title {
-  color: #4a68b9;
+  color: var(--title-fg);
  font-size: 10px;
  margin-bottom: 4px;  
  font-size: 1rem;
--- a/frontend/src/app/components/search-form/search-results/search-results.component.scss
+++ b/frontend/src/app/components/search-form/search-results/search-results.component.scss
@@ -1,5 +1,5 @@
 .card-title {
-  color: #4a68b9;
+  color: var(--title-fg);
  font-size: 10px;
  margin-bottom: 4px;
  font-size: 1rem;
--- a/frontend/src/app/components/transactions-list/transactions-list.component.scss
+++ b/frontend/src/app/components/transactions-list/transactions-list.component.scss
@@ -13,15 +13,15 @@
 	}
 }
 .green {
-  color:#28a745;
+  color: var(--green);
 }

 .red {
-  color:var(--red);
+  color: var(--red);
 }

 .grey {
-  color:#6c757d;
+  color: var(--grey);
 }

 .mobile-bottomcol {
@@ -159,7 +159,7 @@ h2 {
 }

 .grey-info-text {
-	color:#6c757d;
+	color: var(--grey);
 	font-style: italic;
 	font-size: 12px;
 }
--- 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
@@ -3,7 +3,7 @@
  background: rgba(#11131f, 0.95);
  border-radius: 4px;
  box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
-  color: #b1b1b1;
+  color: var(--tooltip-grey);
  padding: 10px 15px;
  text-align: left;
  pointer-events: none;