machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Convert more css to variables

Browse Source
This commit is contained in:
natsoni
2024-04-10 14:39:29 +09:00
parent ba6a7b58aa
commit 3e3bd32705
30 changed files with 54 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/app/components/liquid-reserves-audit/expired-utxos-stats/expired-utxos-stats.component.html
View File

@@ -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>

2
frontend/src/app/components/liquid-reserves-audit/expired-utxos-stats/expired-utxos-stats.component.scss
View File

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

4
frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.html
View File

@@ -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>

2
frontend/src/app/components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component.scss
View File

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

8
frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html
View File

@@ -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 {

4
frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.ts
View File

@@ -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;

4
frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.html
View File

@@ -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>

6
frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.scss
View File

@@ -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);
}
}

6
frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.scss
View File

@@ -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);
}

6
frontend/src/app/components/liquid-reserves-audit/reserves-ratio-stats/reserves-ratio-stats.component.scss
View File

@@ -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;
}

4
frontend/src/app/components/liquid-reserves-audit/reserves-ratio/reserves-ratio.component.ts
View File

@@ -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)']
]
}
},

4
frontend/src/app/components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component.html
View File

@@ -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>

2
frontend/src/app/components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component.scss
View File

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