Merge pull request #4944 from mempool/natsoni/more-css-fix

More css fixes
2024-04-10 15:15:47 +09:00 · 2024-04-10 15:15:47 +09:00 · 165340324c
commit 165340324c
parent 735dddd604 3e3bd32705
30 changed files with 54 additions and 51 deletions
--- a/frontend/src/app/components/accelerate-preview/accelerate-fee-graph.component.scss
+++ b/frontend/src/app/components/accelerate-preview/accelerate-fee-graph.component.scss
@ -76,7 +76,7 @@

      &.tx {
        .fill {
-          background: #3bcc49;
+          background: var(--green);
        }
        .line {
          .fee-rate {
--- a/frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.ts
+++ b/frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.ts
@ -218,7 +218,7 @@ export class AccelerationFeesGraphComponent implements OnInit, OnDestroy {
          splitLine: {
            lineStyle: {
              type: 'dotted',
-              color: '#ffffff66',
+              color: 'var(--transparent-fg)',
              opacity: 0.25,
            }
          },
--- a/frontend/src/app/components/acceleration/acceleration-stats/acceleration-stats.component.scss
+++ b/frontend/src/app/components/acceleration/acceleration-stats/acceleration-stats.component.scss
@ -50,7 +50,7 @@
      margin-bottom: 0;
    }
    .card-text span {
-      color: #ffffff66;
+      color: var(--transparent-fg);
      font-size: 12px;
      top: 0px;
    }
--- a/frontend/src/app/components/acceleration/pending-stats/pending-stats.component.scss
+++ b/frontend/src/app/components/acceleration/pending-stats/pending-stats.component.scss
@ -50,7 +50,7 @@
      margin-bottom: 0;
    }
    .card-text span {
-      color: #ffffff66;
+      color: var(--transparent-fg);
      font-size: 12px;
      top: 0px;
    }
--- a/frontend/src/app/components/address-graph/address-graph.component.ts
+++ b/frontend/src/app/components/address-graph/address-graph.component.ts
@ -113,7 +113,7 @@ export class AddressGraphComponent implements OnChanges {
            : `${data.length} transactions`;
          const date = new Date(data[0].data[0]).toLocaleTimeString(this.locale, { year: 'numeric', month: 'short', day: 'numeric' });
          const val = data.reduce((total, d) => total + d.data[2].value, 0);
-          const color = val === 0 ? '' : (val > 0 ? '#1a9436' : '#dc3545');
+          const color = val === 0 ? '' : (val > 0 ? 'var(--green)' : 'var(--red)');
          const symbol = val > 0 ? '+' : '';
          return `
            <div>
--- a/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.scss
+++ b/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.scss
@ -100,7 +100,7 @@
    .card-text {
      font-size: 18px;
      span {
-        color: #ffffff66;
+        color: var(--transparent-fg);
        font-size: 12px;
      }
    }
--- a/frontend/src/app/components/difficulty-mining/difficulty-mining.component.scss
+++ b/frontend/src/app/components/difficulty-mining/difficulty-mining.component.scss
@ -4,7 +4,7 @@
  justify-content: space-around;
  height: 76px;
  .shared-block {
-    color: #ffffff66;
+    color: var(--transparent-fg);
    font-size: 12px;
  }
  .item {
--- a/frontend/src/app/components/difficulty-mining/difficulty-mining.component.ts
+++ b/frontend/src/app/components/difficulty-mining/difficulty-mining.component.ts
@ -49,24 +49,24 @@ export class DifficultyMiningComponent implements OnInit {
    .pipe(
      map(([blocks, da]) => {
        const maxHeight = blocks.reduce((max, block) => Math.max(max, block.height), 0);
-        let colorAdjustments = '#ffffff66';
+        let colorAdjustments = 'var(--transparent-fg)';
        if (da.difficultyChange > 0) {
-          colorAdjustments = '#3bcc49';
+          colorAdjustments = 'var(--green)';
        }
        if (da.difficultyChange < 0) {
-          colorAdjustments = '#dc3545';
+          colorAdjustments = 'var(--red)';
        }

-        let colorPreviousAdjustments = '#dc3545';
+        let colorPreviousAdjustments = 'var(--red)';
        if (da.previousRetarget) {
          if (da.previousRetarget >= 0) {
-            colorPreviousAdjustments = '#3bcc49';
+            colorPreviousAdjustments = 'var(--green)';
          }
          if (da.previousRetarget === 0) {
-            colorPreviousAdjustments = '#ffffff66';
+            colorPreviousAdjustments = 'var(--transparent-fg)';
          }
        } else {
-          colorPreviousAdjustments = '#ffffff66';
+          colorPreviousAdjustments = 'var(--transparent-fg)';
        }

        this.blocksUntilHalving = 210000 - (maxHeight % 210000);
--- a/frontend/src/app/components/difficulty/difficulty.component.html
+++ b/frontend/src/app/components/difficulty/difficulty.component.html
@ -5,7 +5,7 @@
    <div class="widget-toggler">
      <a href="" (click)="setMode('difficulty')" class="toggler-option"
        [ngClass]="{'inactive': mode === 'difficulty'}"><small i18n="statistics.average-small">difficulty</small></a>
-      <span style="color: #ffffff66; font-size: 8px"> | </span>
+      <span style="color: var(--transparent-fg); font-size: 8px"> | </span>
      <a href="" (click)="setMode('halving')" class="toggler-option"
        [ngClass]="{'inactive': mode === 'halving'}"><small i18n="statistics.median-small">halving</small></a>
    </div>
--- a/frontend/src/app/components/difficulty/difficulty.component.scss
+++ b/frontend/src/app/components/difficulty/difficulty.component.scss
@ -183,7 +183,7 @@
    fill: var(--secondary);

    &.behind {
-      fill: #D81B60;
+      fill: var(--red);
    }
    &.mined {
      fill: url(#diff-gradient);
@ -208,10 +208,10 @@
 }

 .blocks-ahead {
-  color: #3bcc49;
+  color: var(--green);
 }
 .blocks-behind {
-  color: #D81B60;
+  color: var(--red);
 }

 .halving-progress {
@ -250,5 +250,5 @@
 }

 .inactive {
-  color: #ffffff66;
+  color: var(--transparent-fg);
 }
--- a/frontend/src/app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.ts
+++ b/frontend/src/app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.ts
@ -137,7 +137,7 @@ export class LbtcPegsGraphComponent implements OnInit, OnChanges {
        splitLine: {
          lineStyle: {
            type: 'dotted',
-            color: '#ffffff66',
+            color: 'var(--transparent-fg)',
            opacity: 0.25,
          }
        }
--- a/frontend/src/app/components/liquid-reserves-audit/expired-utxos-stats/expired-utxos-stats.component.html
+++ b/frontend/src/app/components/liquid-reserves-audit/expired-utxos-stats/expired-utxos-stats.component.html
@ -2,7 +2,7 @@
  <div class="item">
    <h5 class="card-title" i18n="liquid.non-dust-expired">Non-Dust Expired</h5>
    <div *ngIf="(stats$ | async) as expiredStats; else loadingData" class="card-text">
-      <div class="fee-text" i18n-ngbTooltip="liquid.expired-utxos-non-dust" ngbTooltip="Total amount of BTC held in non-dust Federation UTXOs that have expired timelocks" placement="top">{{ (+expiredStats.nonDust.total) / 100000000 | number: '1.5-5' }} <span style="color: #b86d12;">BTC</span></div>
+      <div class="fee-text" i18n-ngbTooltip="liquid.expired-utxos-non-dust" ngbTooltip="Total amount of BTC held in non-dust Federation UTXOs that have expired timelocks" placement="top">{{ (+expiredStats.nonDust.total) / 100000000 | number: '1.5-5' }} <span style="color: var(--orange);">BTC</span></div>
      <div class="fiat">{{ expiredStats.nonDust.count }} <span i18n="shared.utxos">UTXOs</span></div>
    </div>
  </div>
@ -12,7 +12,7 @@
      <h5 class="card-title"><ng-container i18n="liquid.total-expired">Total Expired</ng-container>&nbsp;<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: var(--title-fg)"></fa-icon></h5>
    </a>
    <div *ngIf="(stats$ | async) as expiredStats; else loadingData" class="card-text">
-      <div class="fee-text" i18n-ngbTooltip="liquid.expired-utxos" ngbTooltip="Total amount of BTC held in Federation UTXOs that have expired timelocks" placement="top">{{ (+expiredStats.all.total) / 100000000 | number: '1.5-5' }} <span style="color: #b86d12;">BTC</span></div>
+      <div class="fee-text" i18n-ngbTooltip="liquid.expired-utxos" ngbTooltip="Total amount of BTC held in Federation UTXOs that have expired timelocks" placement="top">{{ (+expiredStats.all.total) / 100000000 | number: '1.5-5' }} <span style="color: var(--orange);">BTC</span></div>
      <div class="fiat">{{ expiredStats.all.count }} <span i18n="shared.utxos">UTXOs</span></div>
    </div>
  </div>
--- a/frontend/src/app/components/liquid-reserves-audit/expired-utxos-stats/expired-utxos-stats.component.scss
+++ b/frontend/src/app/components/liquid-reserves-audit/expired-utxos-stats/expired-utxos-stats.component.scss
@ -36,7 +36,7 @@
      margin-bottom: 0;
    }
    .card-text span {
-      color: #ffffff66;
+      color: var(--transparent-fg);
      font-size: 12px;
      top: 0px;
    }
--- a/frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.html
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.html
@ -12,7 +12,7 @@
        <ng-container *ngIf="widget; else regularRows">
          <tr *ngFor="let address of addresses | slice:0:5">
            <td class="address text-left widget">
-              <a href="{{ env.MEMPOOL_WEBSITE_URL + '/address/' + address.bitcoinaddress }}" target="_blank" style="color:#b86d12">
+              <a href="{{ env.MEMPOOL_WEBSITE_URL + '/address/' + address.bitcoinaddress }}" target="_blank" style="color:var(--orange)">
                <app-truncate [text]="address.bitcoinaddress" [lastChars]="6"></app-truncate>
              </a>
            </td>
@ -24,7 +24,7 @@
        <ng-template #regularRows>
          <tr *ngFor="let address of addresses | slice:(page - 1) * pageSize:page * pageSize">
            <td class="address text-left">
-              <a href="{{ env.MEMPOOL_WEBSITE_URL + '/address/' + address.bitcoinaddress }}" target="_blank" style="color:#b86d12">
+              <a href="{{ env.MEMPOOL_WEBSITE_URL + '/address/' + address.bitcoinaddress }}" target="_blank" style="color:var(--orange)">
                <app-truncate [text]="address.bitcoinaddress" [lastChars]="6"></app-truncate>
              </a>
            </td>
--- a/frontend/src/app/components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component.scss
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component.scss
@ -32,7 +32,7 @@
    }

    .card-text span {
-      color: #ffffff66;
+      color: var(--transparent-fg);
      font-size: 12px;
      top: 0px;
    }
--- a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html
@ -18,7 +18,7 @@
        <ng-container *ngIf="widget; else regularRows">
          <tr *ngFor="let utxo of utxos | slice:0:6">
            <td class="txid text-left widget">
-              <a href="{{ env.MEMPOOL_WEBSITE_URL + '/tx/' + utxo.txid + ':' + utxo.txindex }}" target="_blank" style="color:#b86d12">
+              <a href="{{ env.MEMPOOL_WEBSITE_URL + '/tx/' + utxo.txid + ':' + utxo.txindex }}" target="_blank" style="color:var(--orange)">
                <app-truncate [text]="utxo.txid + ':' + utxo.txindex" [lastChars]="6"></app-truncate>
              </a>
            </td>
@ -33,12 +33,12 @@
        <ng-template #regularRows>
          <tr *ngFor="let utxo of utxos | slice:(page - 1) * pageSize:page * pageSize">
            <td class="txid text-left">
-              <a href="{{ env.MEMPOOL_WEBSITE_URL + '/tx/' + utxo.txid + ':' + utxo.txindex }}" target="_blank" style="color:#b86d12">
+              <a href="{{ env.MEMPOOL_WEBSITE_URL + '/tx/' + utxo.txid + ':' + utxo.txindex }}" target="_blank" style="color:var(--orange)">
                <app-truncate [text]="utxo.txid + ':' + utxo.txindex" [lastChars]="6"></app-truncate>
              </a>
            </td>
            <td class="address text-left">
-              <a href="{{ env.MEMPOOL_WEBSITE_URL + '/address/' + utxo.bitcoinaddress }}" target="_blank" style="color:#b86d12">
+              <a href="{{ env.MEMPOOL_WEBSITE_URL + '/address/' + utxo.bitcoinaddress }}" target="_blank" style="color:var(--orange)">
                <app-truncate [text]="utxo.bitcoinaddress" [lastChars]="6"></app-truncate>
              </a>
            </td>
@ -62,7 +62,7 @@
            <td class="expires-in text-left" [ngStyle]="{ 'color': getGradientColor(utxo.blocknumber + utxo.timelock - lastReservesBlockUpdate) }">
              {{ utxo.blocknumber + utxo.timelock - lastReservesBlockUpdate < 0 ? -(utxo.blocknumber + utxo.timelock - lastReservesBlockUpdate) : utxo.blocknumber + utxo.timelock - lastReservesBlockUpdate }} <span i18n="shared.blocks" class="symbol">blocks</span>
            </td>
-            <td *ngIf="!widget && showExpiredUtxos === true" class="is-dust text-right" [ngStyle]="{ 'color': !utxo.isDust ? '#D81B60' : '' }">
+            <td *ngIf="!widget && showExpiredUtxos === true" class="is-dust text-right" [ngStyle]="{ 'color': !utxo.isDust ? 'var(--red)' : '' }">
              @if (utxo.isDust) {
                ✔
              } @else {
--- a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.ts
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.ts
@ -122,8 +122,8 @@ export class FederationUtxosListComponent implements OnInit {

  getGradientColor(value: number): string {
    const distanceToGreen = Math.abs(4032 - value);
-    const green = '#7CB342';
-    const red = '#D81B60';
+    const green = 'var(--green)';
+    const red = 'var(--red)';
  
    if (value < 0) {
      return red;
--- a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.html
+++ b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.html
@ -61,7 +61,7 @@
            </td>
            <td class="output text-left">
              <ng-container *ngIf="peg.bitcointxid; else redeemInProgress">
-                <a href="{{ env.MEMPOOL_WEBSITE_URL + '/tx/' + peg.bitcointxid + ':' + peg.bitcoinindex }}" target="_blank" style="color:#b86d12">
+                <a href="{{ env.MEMPOOL_WEBSITE_URL + '/tx/' + peg.bitcointxid + ':' + peg.bitcoinindex }}" target="_blank" style="color:var(--orange)">
                  <app-truncate [text]="peg.bitcointxid + ':' + peg.bitcoinindex" [lastChars]="6"></app-truncate>
                </a>
              </ng-container>
@ -73,7 +73,7 @@
            </td>
            <td class="address text-left">
              <ng-container *ngIf="peg.bitcoinaddress; else noRedeem">
-                <a href="{{ env.MEMPOOL_WEBSITE_URL + '/address/' + peg.bitcoinaddress }}" target="_blank" style="color:#b86d12">
+                <a href="{{ env.MEMPOOL_WEBSITE_URL + '/address/' + peg.bitcoinaddress }}" target="_blank" style="color:var(--orange)">
                  <app-truncate [text]="peg.bitcoinaddress" [lastChars]="6"></app-truncate>
                </a>
              </ng-container>
--- a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.scss
+++ b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.scss
@ -102,11 +102,11 @@ tr, td, th {
 }

 .credit {
-  color: #7CB342;
+  color: var(--green);
 }

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

 .glow-effect {
@ -118,6 +118,6 @@ tr, td, th {
      color: #777983;
  }
  100% {
-      color: #D81B60;
+      color: var(--red);
  }
 }
--- a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.scss
+++ b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.scss
@ -31,7 +31,7 @@
    }

    .card-text span {
-      color: #ffffff66;
+      color: var(--transparent-fg);
      font-size: 12px;
      top: 0px;
    }
@ -72,9 +72,9 @@
 }

 .credit {
-  color: #7CB342;
+  color: var(--green);
 }

 .debit {
-  color: #D81B60;
+  color: var(--red);
 }
--- a/frontend/src/app/components/liquid-reserves-audit/reserves-ratio-stats/reserves-ratio-stats.component.scss
+++ b/frontend/src/app/components/liquid-reserves-audit/reserves-ratio-stats/reserves-ratio-stats.component.scss
@ -36,15 +36,15 @@
        top: -2px;
      }
      .danger {
-        color: #D81B60;
+        color: var(--red);
      }
      .correct {
-        color: #7CB342;
+        color: var(--green);
      }
    }

    .card-text span {
-      color: #ffffff66;
+      color: var(--transparent-fg);
      font-size: 12px;
      top: 0px;
    }
--- a/frontend/src/app/components/liquid-reserves-audit/reserves-ratio/reserves-ratio.component.ts
+++ b/frontend/src/app/components/liquid-reserves-audit/reserves-ratio/reserves-ratio.component.ts
@ -95,8 +95,8 @@ export class ReservesRatioComponent implements OnInit, OnChanges {
            lineStyle: {
              width: 6,
              color: [
-                [0.49, '#D81B60'],
-                [1, '#7CB342']
+                [0.49, 'var(--red)'],
+                [1, 'var(--green)']
              ]
            }
          },
--- a/frontend/src/app/components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component.html
+++ b/frontend/src/app/components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component.html
@ -11,9 +11,9 @@
  <div class="item">
    <h5 class="card-title" i18n="dashboard.btc-holdings">BTC Holdings</h5>
    <div *ngIf="(currentReserves$ | async) as currentReserves; else loadingData" class="card-text">
-      <div class="fee-text">{{ (+currentReserves.amount) / 100000000 | number: '1.2-2' }} <span style="color: #b86d12;">BTC</span></div>
+      <div class="fee-text">{{ (+currentReserves.amount) / 100000000 | number: '1.2-2' }} <span style="color: var(--orange);">BTC</span></div>
      <span class="fiat">
-        <span><ng-container i18n="shared.as-of-block">As of block</ng-container>&nbsp;<a href="{{ env.MEMPOOL_WEBSITE_URL + '/block/' + currentReserves.hash }}" target="_blank" style="color:#b86d12">{{ currentReserves.lastBlockUpdate }}</a></span>
+        <span><ng-container i18n="shared.as-of-block">As of block</ng-container>&nbsp;<a href="{{ env.MEMPOOL_WEBSITE_URL + '/block/' + currentReserves.hash }}" target="_blank" style="color:var(--orange)">{{ currentReserves.lastBlockUpdate }}</a></span>
      </span>
    </div>
  </div>
--- a/frontend/src/app/components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component.scss
+++ b/frontend/src/app/components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component.scss
@ -35,7 +35,7 @@
      margin-bottom: 0;
    }
    .card-text span {
-      color: #ffffff66;
+      color: var(--transparent-fg);
      font-size: 12px;
      top: 0px;
    }
--- a/frontend/src/app/components/search-form/search-results/search-results.component.scss
+++ b/frontend/src/app/components/search-form/search-results/search-results.component.scss
@ -8,7 +8,7 @@
 }

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

 .dropdown-menu {
--- a/frontend/src/app/components/transactions-list/transactions-list.component.html
+++ b/frontend/src/app/components/transactions-list/transactions-list.component.html
@ -204,7 +204,7 @@
                    <ng-template [ngIf]="vout.pegout" [ngIfElse]="defaultscriptpubkey_type">
                      <ng-container i18n="transactions-list.peg-out-to">Peg-out to <ng-container *ngTemplateOutlet="pegOutLink"></ng-container></ng-container>
                      <ng-template #pegOutLink>
-                        <a *ngIf="stateService.env.BASE_MODULE === 'liquid'; else localPegoutLink" target="_blank" style="color:#b86d12" [attr.href]="'https://mempool.space/address/' + vout.pegout.scriptpubkey_address" title="{{ vout.pegout.scriptpubkey_address }}">
+                        <a *ngIf="stateService.env.BASE_MODULE === 'liquid'; else localPegoutLink" target="_blank" style="color:var(--orange)" [attr.href]="'https://mempool.space/address/' + vout.pegout.scriptpubkey_address" title="{{ vout.pegout.scriptpubkey_address }}">
                          <app-truncate [text]="vout.pegout.scriptpubkey_address"></app-truncate>
                        </a>
                        <ng-template #localPegoutLink>
--- a/frontend/src/app/dashboard/dashboard.component.scss
+++ b/frontend/src/app/dashboard/dashboard.component.scss
@ -105,7 +105,7 @@
        font-size: 12px;
      }
      .bitcoin-color {
-        color: #b86d12;
+        color: var(--orange);
      }
    }
    .progress {
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@ -101,6 +101,7 @@ $dropdown-link-active-bg: $active-bg;
  --yellow: #ffd800;
  --grey: #6c757d;
  --tooltip-grey: #b1b1b1;
+  --orange: #b86d12;
 }

 html, body {
--- a/frontend/src/theme-contrast.scss
+++ b/frontend/src/theme-contrast.scss
@ -98,4 +98,5 @@ $dropdown-link-active-bg: $active-bg;
  --yellow: #ffcc00;
  --grey: #7e7e7e;
  --tooltip-grey: #b1b1b1;
+  --orange: #ff9f00;
 }
--- a/frontend/src/theme-wiz.scss
+++ b/frontend/src/theme-wiz.scss
@ -98,4 +98,5 @@ $dropdown-link-active-bg: $active-bg;
  --yellow: #ffcc00;
  --grey: #7e7e7e;
  --tooltip-grey: #b1b1b1;
+  --orange: #ff9f00;
 }