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
Blockstream · Sep 9, 2024 · 4cd0960 · 4cd0960
1 parent e095f55
commit 4cd0960
Show file tree

Hide file tree

Showing 21 changed files with 457 additions and 165 deletions.
diff --git 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
         <div className="container">
           <div className="row">
             <div className="col-sm-8">
-              <h1>{t`Address`}</h1>
-              <div className="block-hash">
-                <span>{display_addr}</span>
+              <h1 className="font-h2">{t`Address`}</h1>
+              <div className="block-hash font-p1">
+                <span className="text-gray">{display_addr}</span>
                 { process.browser && <div className="code-button">
                   <div className="code-button-btn" role="button" data-clipboardCopy={display_addr}></div>
                 </div> }
@@ -58,7 +58,7 @@ export default ({ t, addr, addrQR, addrTxs, goAddr, openTx, spends, tipHeight, l
         </div>
       </div>
       <div className="container">
-        <div className="stats-table">
+        <div className="stats-table font-p2">
         { is_confidential && [
           <div>
             <div>{ t`Confidential` }</div>
@@ -113,14 +113,14 @@ export default ({ t, addr, addrQR, addrTxs, goAddr, openTx, spends, tipHeight, l
 
         <div>
           <div className="transactions">
-            <h3>{txsShownText(total_txs, est_prev_total_seen_count, shown_txs, t)}</h3>
+            <h3 className="font-h3">{txsShownText(total_txs, est_prev_total_seen_count, shown_txs, t)}</h3>
             { addrTxs ? addrTxs.map(tx => txBox(tx, { openTx, tipHeight, t, spends, addr, ...S }))
                        : loader() }
           </div>
 
           <div className="load-more-container">
             <div>
-              { loading ? <div className="load-more disabled"><span>{t`Load more`}</span><div>{loader("small")}</div></div>
+              { loading ? <div className="load-more g-btn font-btn-2 disabled"><span>{t`Loading...`}</span><div>{loader("small")}</div></div>
                         : pagingNav(addr, last_seen_txid, est_curr_chain_seen_count, prev_paging_txids, next_paging_txids, prev_paging_est_count, t) }
             </div>
           </div>
@@ -144,9 +144,8 @@ const pagingNav = (addr, last_seen_txid, est_curr_chain_seen_count, prev_paging_
   process.browser
 
 ? last_seen_txid != null &&
-    <div className="load-more" role="button" data-loadmoreTxsLastTxid={last_seen_txid} data-loadmoreTxsAddr={addr.address}>
-      <span>{t`Load more`}</span>
-      <div><img alt="" src={`${staticRoot}img/icons/arrow_down.png`} /></div>
+    <div className="load-more g-btn primary-btn font-btn-2" role="button" data-loadmoreTxsLastTxid={last_seen_txid} data-loadmoreTxsAddr={addr.address}>
+      {t`Load more`}
     </div>
 
 : [

diff --git 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 ? <div className="load-more-container">{loader()}</div>
           : !assets.length ? <p>{t`No registered assets`}</p>
           : <div className="assets-table">
-            <h3 className="table-title">{t`All Assets`}</h3>
+            <h3 className="table-title font-h3">{t`All Assets`}</h3>
               <div className="assets-table-row header">
                 <a href={`assets?sort_field=name&sort_dir=${reverseSortDir}`}
                   className={`assets-table-cell sortable ${sort_field === "name" ? sort_dir : ""}`}>{t`Name`}

diff --git a/client/src/views/asset.js b/client/src/views/asset.js
@@ -61,7 +61,7 @@ export default ({ t, asset, assetTxs, goAsset, openTx, spends, tipHeight, loadin
         </div>
       </div>
       <div className="container">
-        <div className="stats-table">
+        <div className="stats-table font-p2">
           <div>
             <div>{t`Asset id`}</div>
             <div className="mono">{asset.asset_id}</div>
@@ -236,14 +236,14 @@ export default ({ t, asset, assetTxs, goAsset, openTx, spends, tipHeight, loadin
 
         <div>
           <div className="transactions">
-            <h3>{(is_native_asset ? txsShownTextNative : txsShownTextIssued)(total_txs, est_prev_total_seen_count, shown_txs, t)}</h3>
+            <h3 className="font-h3">{(is_native_asset ? txsShownTextNative : txsShownTextIssued)(total_txs, est_prev_total_seen_count, shown_txs, t)}</h3>
             { assetTxs ? assetTxs.map(tx => txBox(tx, { openTx, tipHeight, t, spends, ...S }))
                        : loader()}
           </div>
 
           <div className="load-more-container">
             <div>
-              { loading ? <div className="load-more disabled"><span>{t`Load more`}</span><div>{loader("small")}</div></div>
+              { loading ? <div className="load-more g-btn font-btn-2 disabled disabled"><span>{t`Loading...`}</span><div>{loader("small")}</div></div>
                         : pagingNav(asset, last_seen_txid, est_curr_chain_seen_count, prev_paging_txids, next_paging_txids, prev_paging_est_count, t) }
             </div>
           </div>
@@ -269,9 +269,8 @@ const pagingNav = (asset, last_seen_txid, est_curr_chain_seen_count, prev_paging
   process.browser
 
 ? last_seen_txid != null &&
-    <div className="load-more" role="button" data-loadmoreTxsLastTxid={last_seen_txid} data-loadmoreTxsAsset={asset.asset_id}>
-      <span>{t`Load more`}</span>
-      <div><img alt="" src={`${staticRoot}img/icons/arrow_down.png`} /></div>
+    <div className="load-more g-btn primary-btn font-btn-2" role="button" data-loadmoreTxsLastTxid={last_seen_txid} data-loadmoreTxsAsset={asset.asset_id}>
+      {t`Load more`}
     </div>
 
 : [

diff --git 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
     <div className="block-page">
       <div className="container">
         <div>
-          <h1 className="block-header-title">{t`Block ${b.height}`}</h1>
-          <div className="block-hash"><span>{b.id}</span>
+          <h1 className="block-header-title font-h2">{t`Block ${b.height}`}</h1>
+          <div className="block-hash font-p1"><span className="text-gray">{b.id}</span>
             { process.browser && <div className="code-button">
               <div className="code-button-btn" role="button" data-clipboardCopy={b.id}></div>
             </div> }
           </div>
-          <div className="prev-next-blocks-btns">
+          <div className="prev-next-blocks-btns font-h5">
             <div>
               { b.previousblockhash &&
                 <a href={`block/${b.previousblockhash}`}>
@@ -50,7 +50,7 @@ export default ({ t, block: b, blockStatus: status, blockTxs, openTx, spends, op
     <div className="container">
       {btnDetails(b.id, openBlock == b.id, page.query, t)}
 
-      <div className="stats-table">
+      <div className="stats-table font-p2">
         <div>
           <div>{t`Height`}</div>
           <div><a href={`block/${b.id}`}>{b.height}</a></div>
@@ -123,14 +123,14 @@ export default ({ t, block: b, blockStatus: status, blockTxs, openTx, spends, op
       </div>
 
       <div className="transactions">
-        <h3>{txsShownText(b.tx_count, goBlock.start_index, blockTxs && blockTxs.length, t)}</h3>
+        <h3 className="font-h3">{txsShownText(b.tx_count, goBlock.start_index, blockTxs && blockTxs.length, t)}</h3>
         { blockTxs ? blockTxs.map(tx => txBox( { ...tx, status: txsStatus }, { openTx, tipHeight, t, spends }))
                    : loader() }
       </div>
 
       <div className="load-more-container">
         <div>
-          { loading ? <div className="load-more disabled"><span>{t`Load more`}</span><div>{loader("small")}</div></div>
+          { loading ? <div className="load-more g-btn font-btn-2 disabled"><span>{t`Loading...`}</span><div>{loader("small")}</div></div>
                     : pagingNav(b, { ...S, t }) }
         </div>
       </div>
@@ -147,9 +147,8 @@ const pagingNav = (block, { nextBlockTxs, prevBlockTxs, t }) =>
   process.browser
 
 ? nextBlockTxs &&
-    <div className="load-more" role="button" data-loadmoreTxsIndex={nextBlockTxs} data-loadmoreTxsBlock={block.id}>
-      <span>{t`Load more`}</span>
-      <div><img alt="" src={`${staticRoot}img/icons/arrow_down.png`} /></div>
+    <div className="load-more g-btn primary-btn font-btn-2" role="button" data-loadmoreTxsIndex={nextBlockTxs} data-loadmoreTxsBlock={block.id}>
+      {t`Load more`}
     </div>
 
 : [
@@ -167,9 +166,9 @@ const pagingNav = (block, { nextBlockTxs, prevBlockTxs, t }) =>
 
 const btnDetails = (blockhash, isOpen, query, t) => process.browser
   // dynamic button in browser env
-  ? <div className="details-btn float-right mb-2" data-toggleBlock={blockhash}>{btnDetailsContent(isOpen, t)}</div>
+  ? <div className="details-btn font-btn-2 font-h5 float-right mb-2" data-toggleBlock={blockhash}>{btnDetailsContent(isOpen, t)}</div>
   // or a plain link in server-side rendered env
-  :  <a className="details-btn float-right mb-2" href={`block/${blockhash}${updateQuery(query, { expand: !isOpen })}`}>{btnDetailsContent(isOpen, t)}</a>
+  :  <a className="details-btn font-btn-2 font-h5 float-right mb-2" href={`block/${blockhash}${updateQuery(query, { expand: !isOpen })}`}>{btnDetailsContent(isOpen, t)}</a>
 
 const btnDetailsContent = (isOpen, t) =>
   <div role="button" tabindex="0">

diff --git 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 ? <p>{t`No recent blocks`}</p>
   : <div className="blocks-table">
-      <h3 className="table-title">{t`Latest Blocks`}</h3>
+      <h3 className="table-title font-h3">{t`Latest Blocks`}</h3>
       <div className="blocks-table-row header">
-        <div className="blocks-table-cell">{t`Height`}</div>
-        <div className="blocks-table-cell">{process.browser ? t`Timestamp` : t`Timestamp (UTC)`}</div>
-        <div className="blocks-table-cell">{t`Transactions`}</div>
-        <div className="blocks-table-cell">{t`Size (KB)`}</div>
-        <div className="blocks-table-cell">{t`Weight (KWU)`}</div>
+        <div className="blocks-table-cell font-h4">{t`Height`}</div>
+        <div className="blocks-table-cell font-h4">{process.browser ? t`Timestamp` : t`Timestamp (UTC)`}</div>
+        <div className="blocks-table-cell font-h4">{t`Transactions`}</div>
+        <div className="blocks-table-cell font-h4">{t`Size (KB)`}</div>
+        <div className="blocks-table-cell font-h4">{t`Weight (KWU)`}</div>
       </div>
       { blocks && blocks.map(b =>
         <div className="blocks-table-link-row">
         <a className="blocks-table-row block-data" href={`block/${b.id}`}>
-          <div className="blocks-table-cell highlighted-text" data-label={t`Height`}>{b.height}</div>
-          <div className="blocks-table-cell" data-label={t`Timestamp`}>{formatTime(b.timestamp, false)}</div>
-          <div className="blocks-table-cell" data-label={t`Transactions`}>{formatNumber(b.tx_count)}</div>
-          <div className="blocks-table-cell" data-label={t`Size (KB)`}>{formatNumber(b.size/1000)}</div>
-          <div className="blocks-table-cell" data-label={t`Weight (KWU)`}>{formatNumber(b.weight/1000)}</div>
+          <div className="blocks-table-cell highlighted-text font-p2" data-label={t`Height`}>{b.height}</div>
+          <div className="blocks-table-cell font-p2" data-label={t`Timestamp`}>{formatTime(b.timestamp, false)}</div>
+          <div className="blocks-table-cell font-p2" data-label={t`Transactions`}>{formatNumber(b.tx_count)}</div>
+          <div className="blocks-table-cell font-p2" data-label={t`Size (KB)`}>{formatNumber(b.size/1000)}</div>
+          <div className="blocks-table-cell font-p2" data-label={t`Weight (KWU)`}>{formatNumber(b.weight/1000)}</div>
         </a>
         </div>
       )}
       {blocks && viewMore ?
-      <a className="view-more" href="blocks/recent">
+      <a className="view-more font-link-semibold" href="blocks/recent">
       <span>{t`View more blocks`}</span>
         <div><img alt="" src={`${staticRoot}img/icons/arrow_right_blu.png`} /></div>
       </a> : ""}
@@ -51,9 +51,8 @@ const pagingNav = ({ nextBlocks, prevBlocks, t }) =>
   process.browser
 
 ? nextBlocks != null &&
-    <div className="load-more" role="button" data-loadmoreBlockHeight={''+nextBlocks}>
-      <span>{t`Load more`}</span>
-      <div><img alt="" src={`${staticRoot}img/icons/arrow_down.png`} /></div>
+    <div className="load-more g-btn primary-btn font-btn-2" role="button" data-loadmoreBlockHeight={''+nextBlocks}>
+      {t`Load more`}
     </div>
 
 : [

diff --git 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' && <input type="hidden" name={k} value={v} />
             ) }
-            <select className="language-selector" name="lang">
+            <select className="language-selector font-h4" name="lang">
               { Object.entries(t.langs).map(([ lang_id, lang_t ]) =>
                 <option value={lang_id} attrs={lang_id == t.lang_id ? { selected: true } : {}}>{lang_t`lang_name`}</option>
               ) }
@@ -35,13 +35,13 @@ export default ({ t, page }) =>
             <div className="footer_container_content_row_onion_container">
               <div className="footer_container_content_row_onion_icon"></div>
               <div className="footer_container_content_row_onion_link-container">
-                { process.env.ONION_V3 && <a className="footer_container_content_row_onion_link" href={ process.env.ONION_V3 } target="_blank">Onion V3</a> }
+                { process.env.ONION_V3 && <a className="footer_container_content_row_onion_link font-p4" href={ process.env.ONION_V3 } target="_blank">Onion V3</a> }
               </div>
             </div>
           }
 
         </div>
-        <div className="footer_container_content_copyright">
+        <div className="footer_container_content_copyright font-p3">
           <div>
           { process.env.TERMS && <span><a href={ process.env.TERMS } target="_blank">Terms &amp; </a></span> }
           { process.env.PRIVACY && <span><a href={ process.env.PRIVACY } target="_blank">Privacy</a></span> }

diff --git 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(
     <div className="mempool-page">
       <div className="container">
         <div>
-          <h1 className="transaction-header-title">{t`Mempool`}</h1>
+          <h1 className="transaction-header-title font-h2">{t`Mempool`}</h1>
         </div>
-        <div className="stats-table">
+        <div className="stats-table font-p2">
           <div>
             <div>{t`Total transactions`}</div>
             <div>{mempool.count}</div>

diff --git a/client/src/views/nav-toggle.js b/client/src/views/nav-toggle.js
@@ -21,15 +21,15 @@ export default (t, theme, page) =>
         }
       </div>
       <div className="section1">
-        <h4 className="menu-title">Wallets</h4>
+        <h4 className="menu-title font-h5">Wallets</h4>
         <div className="wallets-link">
             <div className="wallets-logo">
               <a href="https://store.blockstream.com/product/jade-hardware-wallet/?utm_source=Blockstream_Explorer&utm_medium=referral&utm_campaign=Blockstream_Explorer_Banner" className="darkmode" target="_blank"><img src={`${staticRoot}img/icons/jade_logo.svg`} alt="jade logo"/></a>
               <a href="https://blockstream.com/green/" className="darkmode" target="_blank"><img className="green-logo" src={`${staticRoot}img/icons/green_logo.svg`} alt="green logo"/></a>
               <a href="https://store.blockstream.com/product/jade-hardware-wallet/?utm_source=Blockstream_Explorer&utm_medium=referral&utm_campaign=Blockstream_Explorer_Banner" className="lightmode" target="_blank"><img src={`${staticRoot}img/icons/jade_logo_light.svg`} alt="jade logo"/></a>
               <a href="https://blockstream.com/green/" className="lightmode" target="_blank"><img className="green-logo" src={`${staticRoot}img/icons/green_logo_light.svg`} alt="green logo"/></a>
             </div>
-            <div className="store-icons">
+            <div className="store-icons font-p4">
               <a href="https://apps.apple.com/us/app/green-bitcoin-wallet/id1402243590" target="_blank">
                 <img className="darkmode" src={`${staticRoot}img/icons/apple.png`} />
                 <img className="lightmode" src={`${staticRoot}img/icons/apple_dark.png`} />
@@ -51,24 +51,24 @@ export default (t, theme, page) =>
       </div>
       <div className="section2">
         <div className="link-list">
-          <h4 className="menu-title">Explorers</h4>
-          <ul>
+          <h4 className="menu-title font-h5">Explorers</h4>
+          <ul className="font-p3">
             <li><a href="/" rel="external">Bitcoin</a></li>
             <li><a href="/liquid/" rel="external">Liquid Network</a></li>
             <li><a href="/testnet/" rel="external" target="_blank">Bitcoin Testnet</a></li>
             <li><a href="/liquidtestnet/" rel="external" target="_blank">Liquid Testnet</a></li>
           </ul>
-          <h4 className="menu-title">Developer Tools</h4>
-          <ul>
+          <h4 className="menu-title font-h5">Developer Tools</h4>
+          <ul className="font-p3">
             <li><a href="https://github.com/Blockstream/esplora/blob/master/API.md" target="_blank">API</a></li>
             <li><a href="tx/push">Broadcast Transactions</a></li>
             <li> { hasCam ? <a href="scan-qr">Scan QR</a> : ""}</li>
             <li> { process.env.IS_ELEMENTS ? <a href={`asset/${nativeAssetId}`}>Pegs</a> : ""}</li>
           </ul>
         </div>
         <div className="link-list">
-          <h4 className="menu-title">Other Products</h4>
-          <ul>
+          <h4 className="menu-title font-h5">Other Products</h4>
+          <ul className="font-p3">
             <li><a href="https://blockstream.com/liquid/" target="_blank">Liquid Network</a></li>
             <li><a href="https://blockstream.com/mining/" target="_blank">Blockstream Mining</a></li>
             <li><a href="https://blockstream.com/amp/" target="_blank">Blockstream AMP</a></li>
@@ -79,8 +79,8 @@ export default (t, theme, page) =>
           </ul>
         </div>
         <div className="link-list">
-          <h4 className="menu-title">Useful Links</h4>
-          <ul>
+          <h4 className="menu-title font-h5">Useful Links</h4>
+          <ul className="font-p3">
             <li><a href="https://help.blockstream.com/hc/en-us" target="_blank">Help Center</a></li>
             <li><a href="https://help.blockstream.com/hc/en-us/requests/new?ticket_form_id=8613" target="_blank">Submit a bug / request</a></li>
             <li><a href="https://blockstream.com/about/" target="_blank">About Blockstream</a></li>

diff --git a/client/src/views/navbar-menu.js b/client/src/views/navbar-menu.js
@@ -13,7 +13,7 @@ export default ({ t, theme, page }) =>
   <ul className="main-nav">
     { items && Object.entries(items).map(([ name, url ]) =>
         <li id={name.replace(/ /g, '')} className={`nav-item ${name == active ? 'active' : ''}`}>
-          <a className="nav-link" href={url} rel="external">
+          <a className="nav-link font-h4" href={url} rel="external">
             <span><img className="menu-logo" alt="" src={`${staticRoot}img/icons/${name.replace(/ /g, '')}-menu-logo.svg`} /></span>
             <span>{t(name)}</span>
           </a>

diff --git a/client/src/views/sub-navbar.js b/client/src/views/sub-navbar.js
@@ -4,7 +4,7 @@ import search from './search'
 export default ( t, isTouch, activeTab) =>
   <div className="sub-navbar">
     <div className="container sub-nav-container">
-      <div className="sub-nav">
+      <div className="sub-nav font-h4">
         <a href="." class={{ active: activeTab == 'dashBoard' }}>Dashboard</a>
         <a href="blocks/recent" class={{ active: activeTab == 'recentBlocks' }}>Blocks</a>
         <a href="tx/recent" class={{ active: activeTab == 'recentTxs' }}>Transactions</a>