From 4cd096070bb5c133b457edc5da5c39f9312b8652 Mon Sep 17 00:00:00 2001 From: Serhii Prykhozhyi Date: Wed, 14 Aug 2024 08:12:20 -0600 Subject: [PATCH] update typography - replace fonts with open source fonts ChakraPetch-Bold and Inter-VariableFont_opsz - update css classes to use new fonts - update header copyright date - adjust spacing - added plus/minus icons --- client/src/views/addr.js | 17 +- client/src/views/asset-list.js | 2 +- client/src/views/asset.js | 11 +- client/src/views/block.js | 21 +- client/src/views/blocks.js | 29 +- client/src/views/footer.js | 6 +- client/src/views/mempool.js | 4 +- client/src/views/nav-toggle.js | 20 +- client/src/views/navbar-menu.js | 2 +- client/src/views/sub-navbar.js | 2 +- client/src/views/transactions.js | 12 +- client/src/views/tx.js | 14 +- flavors/blockstream/config.env | 2 +- flavors/blockstream/extras.css | 6 +- flavors/liquid-mainnet/extras.css | 1 + www/font/ChakraPetch-Bold.ttf | Bin 0 -> 71436 bytes www/font/Inter-VariableFont_opsz,wght.ttf | Bin 0 -> 874708 bytes www/img/icons/minus.png | Bin 122 -> 93 bytes www/img/icons/plus.png | Bin 190 -> 123 bytes www/light-theme_style.css | 21 +- www/style.css | 452 ++++++++++++++++++---- 21 files changed, 457 insertions(+), 165 deletions(-) create mode 100644 www/font/ChakraPetch-Bold.ttf create mode 100644 www/font/Inter-VariableFont_opsz,wght.ttf diff --git a/client/src/views/addr.js b/client/src/views/addr.js index 97d43b67..a8ea417f 100644 --- a/client/src/views/addr.js +++ b/client/src/views/addr.js @@ -43,9 +43,9 @@ export default ({ t, addr, addrQR, addrTxs, goAddr, openTx, spends, tipHeight, l
-

{t`Address`}

-
- {display_addr} +

{t`Address`}

+
+ {display_addr} { process.browser &&
} @@ -58,7 +58,7 @@ export default ({ t, addr, addrQR, addrTxs, goAddr, openTx, spends, tipHeight, l
-
+
{ is_confidential && [
{ t`Confidential` }
@@ -113,14 +113,14 @@ export default ({ t, addr, addrQR, addrTxs, goAddr, openTx, spends, tipHeight, l
-

{txsShownText(total_txs, est_prev_total_seen_count, shown_txs, t)}

+

{txsShownText(total_txs, est_prev_total_seen_count, shown_txs, t)}

{ addrTxs ? addrTxs.map(tx => txBox(tx, { openTx, tipHeight, t, spends, addr, ...S })) : loader() }
- { loading ?
{t`Load more`}
{loader("small")}
+ { loading ?
{t`Loading...`}
{loader("small")}
: pagingNav(addr, last_seen_txid, est_curr_chain_seen_count, prev_paging_txids, next_paging_txids, prev_paging_est_count, t) }
@@ -144,9 +144,8 @@ const pagingNav = (addr, last_seen_txid, est_curr_chain_seen_count, prev_paging_ process.browser ? last_seen_txid != null && -
- {t`Load more`} -
+
+ {t`Load more`}
: [ diff --git a/client/src/views/asset-list.js b/client/src/views/asset-list.js index 30216c8f..c8124bda 100644 --- a/client/src/views/asset-list.js +++ b/client/src/views/asset-list.js @@ -17,7 +17,7 @@ export default ({ assetList, goAssetList, loading, t, ...S }) => { { !assets ?
{loader()}
: !assets.length ?

{t`No registered assets`}

:
-
+
{t`Asset id`}
{asset.asset_id}
@@ -236,14 +236,14 @@ export default ({ t, asset, assetTxs, goAsset, openTx, spends, tipHeight, loadin
-

{(is_native_asset ? txsShownTextNative : txsShownTextIssued)(total_txs, est_prev_total_seen_count, shown_txs, t)}

+

{(is_native_asset ? txsShownTextNative : txsShownTextIssued)(total_txs, est_prev_total_seen_count, shown_txs, t)}

{ assetTxs ? assetTxs.map(tx => txBox(tx, { openTx, tipHeight, t, spends, ...S })) : loader()}
- { loading ?
{t`Load more`}
{loader("small")}
+ { loading ?
{t`Loading...`}
{loader("small")}
: pagingNav(asset, last_seen_txid, est_curr_chain_seen_count, prev_paging_txids, next_paging_txids, prev_paging_est_count, t) }
@@ -269,9 +269,8 @@ const pagingNav = (asset, last_seen_txid, est_curr_chain_seen_count, prev_paging process.browser ? last_seen_txid != null && -
- {t`Load more`} -
+
+ {t`Load more`}
: [ diff --git a/client/src/views/block.js b/client/src/views/block.js index cf685bc1..31c504c6 100644 --- a/client/src/views/block.js +++ b/client/src/views/block.js @@ -16,13 +16,13 @@ export default ({ t, block: b, blockStatus: status, blockTxs, openTx, spends, op
-

{t`Block ${b.height}`}

-
{b.id} +

{t`Block ${b.height}`}

+
{b.id} { process.browser &&
}
-
+
{ b.previousblockhash && @@ -50,7 +50,7 @@ export default ({ t, block: b, blockStatus: status, blockTxs, openTx, spends, op
{btnDetails(b.id, openBlock == b.id, page.query, t)} -
+
{t`Height`}
 @@ -123,14 +123,14 @@ export default ({ t, block: b, blockStatus: status, blockTxs, openTx, spends, op
-

{txsShownText(b.tx_count, goBlock.start_index, blockTxs && blockTxs.length, t)}

+

{txsShownText(b.tx_count, goBlock.start_index, blockTxs && blockTxs.length, t)}

{ blockTxs ? blockTxs.map(tx => txBox( { ...tx, status: txsStatus }, { openTx, tipHeight, t, spends })) : loader() }
- { loading ?
{t`Load more`}
{loader("small")}
+ { loading ?
{t`Loading...`}
{loader("small")}
: pagingNav(b, { ...S, t }) }
@@ -147,9 +147,8 @@ const pagingNav = (block, { nextBlockTxs, prevBlockTxs, t }) => process.browser ? nextBlockTxs && -
- {t`Load more`} -
+
+ {t`Load more`}
: [ @@ -167,9 +166,9 @@ const pagingNav = (block, { nextBlockTxs, prevBlockTxs, t }) => const btnDetails = (blockhash, isOpen, query, t) => process.browser // dynamic button in browser env - ?
{btnDetailsContent(isOpen, t)}
+ ?
{btnDetailsContent(isOpen, t)}
// or a plain link in server-side rendered env - : {btnDetailsContent(isOpen, t)} + : {btnDetailsContent(isOpen, t)} const btnDetailsContent = (isOpen, t) =>
diff --git a/client/src/views/blocks.js b/client/src/views/blocks.js index f7d29a76..f6f290cc 100644 --- a/client/src/views/blocks.js +++ b/client/src/views/blocks.js @@ -9,27 +9,27 @@ export const blks = (blocks, viewMore, loadMore, { t, loading, ...S }) => { !blocks ? loader() : !blocks.length ?

{t`No recent blocks`}

:
-

{t`Latest Blocks`}

+

{t`Latest Blocks`}

-
{t`Height`}
-
{process.browser ? t`Timestamp` : t`Timestamp (UTC)`}
-
{t`Transactions`}
-
{t`Size (KB)`}
-
{t`Weight (KWU)`}
+
{t`Height`}
+
{process.browser ? t`Timestamp` : t`Timestamp (UTC)`}
+
{t`Transactions`}
+
{t`Size (KB)`}
+
{t`Weight (KWU)`}
{ blocks && blocks.map(b => )} {blocks && viewMore ? - + {t`View more blocks`}
: ""} @@ -51,9 +51,8 @@ const pagingNav = ({ nextBlocks, prevBlocks, t }) => process.browser ? nextBlocks != null && -
- {t`Load more`} -
+
+ {t`Load more`}
: [ diff --git a/client/src/views/footer.js b/client/src/views/footer.js index a6c74789..06e43d04 100644 --- a/client/src/views/footer.js +++ b/client/src/views/footer.js @@ -13,7 +13,7 @@ export default ({ t, page }) => { !process.browser && Object.entries(page.query).map(([k, v]) => k != 'lang' && ) } - { Object.entries(t.langs).map(([ lang_id, lang_t ]) => ) } @@ -35,13 +35,13 @@ export default ({ t, page }) =>
- { process.env.ONION_V3 && Onion V3 } + { process.env.ONION_V3 && Onion V3 }
}
-
+
{ process.env.TERMS && Terms & } { process.env.PRIVACY && Privacy } diff --git a/client/src/views/mempool.js b/client/src/views/mempool.js index 6539d150..62a338b3 100644 --- a/client/src/views/mempool.js +++ b/client/src/views/mempool.js @@ -11,9 +11,9 @@ export default ({ t, mempool, feeEst, ...S }) => mempool && feeEst && layout(
-

{t`Mempool`}

+

{t`Mempool`}

-
+
{t`Total transactions`}
{mempool.count}
diff --git a/client/src/views/nav-toggle.js b/client/src/views/nav-toggle.js index 8804718a..85b29159 100644 --- a/client/src/views/nav-toggle.js +++ b/client/src/views/nav-toggle.js @@ -21,7 +21,7 @@ export default (t, theme, page) => }
-

Wallets

+

Wallets

jade logo @@ -29,7 +29,7 @@ export default (t, theme, page) => jade logo green logo
-
+
-

Explorers

-
-

Other Products

-
-

Useful Links

-