Skip to content

Commit 4cd0960

Browse files
author
Serhii Prykhozhyi
committed
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
1 parent e095f55 commit 4cd0960

File tree

21 files changed

+457
-165
lines changed

21 files changed

+457
-165
lines changed

‎client/src/views/addr.js‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -43,9 +43,9 @@ export default ({ t, addr, addrQR, addrTxs, goAddr, openTx, spends, tipHeight, l
4343
<div className="container">
4444
<div className="row">
4545
<div className="col-sm-8">
46-
<h1>{t`Address`}</h1>
47-
<div className="block-hash">
48-
<span>{display_addr}</span>
46+
<h1 className="font-h2">{t`Address`}</h1>
47+
<div className="block-hash font-p1">
48+
<span className="text-gray">{display_addr}</span>
4949
{ process.browser && <div className="code-button">
5050
<div className="code-button-btn" role="button" data-clipboardCopy={display_addr}></div>
5151
</div> }
@@ -58,7 +58,7 @@ export default ({ t, addr, addrQR, addrTxs, goAddr, openTx, spends, tipHeight, l
5858
</div>
5959
</div>
6060
<div className="container">
61-
<div className="stats-table">
61+
<div className="stats-table font-p2">
6262
{ is_confidential && [
6363
<div>
6464
<div>{ t`Confidential` }</div>
@@ -113,14 +113,14 @@ export default ({ t, addr, addrQR, addrTxs, goAddr, openTx, spends, tipHeight, l
113113

114114
<div>
115115
<div className="transactions">
116-
<h3>{txsShownText(total_txs, est_prev_total_seen_count, shown_txs, t)}</h3>
116+
<h3 className="font-h3">{txsShownText(total_txs, est_prev_total_seen_count, shown_txs, t)}</h3>
117117
{ addrTxs ? addrTxs.map(tx => txBox(tx, { openTx, tipHeight, t, spends, addr, ...S }))
118118
: loader() }
119119
</div>
120120

121121
<div className="load-more-container">
122122
<div>
123-
{ loading ? <div className="load-more disabled"><span>{t`Load more`}</span><div>{loader("small")}</div></div>
123+
{ loading ? <div className="load-more g-btn font-btn-2 disabled"><span>{t`Loading...`}</span><div>{loader("small")}</div></div>
124124
: pagingNav(addr, last_seen_txid, est_curr_chain_seen_count, prev_paging_txids, next_paging_txids, prev_paging_est_count, t) }
125125
</div>
126126
</div>
@@ -144,9 +144,8 @@ const pagingNav = (addr, last_seen_txid, est_curr_chain_seen_count, prev_paging_
144144
process.browser
145145

146146
? last_seen_txid != null &&
147-
<div className="load-more" role="button" data-loadmoreTxsLastTxid={last_seen_txid} data-loadmoreTxsAddr={addr.address}>
148-
<span>{t`Load more`}</span>
149-
<div><img alt="" src={`${staticRoot}img/icons/arrow_down.png`} /></div>
147+
<div className="load-more g-btn primary-btn font-btn-2" role="button" data-loadmoreTxsLastTxid={last_seen_txid} data-loadmoreTxsAddr={addr.address}>
148+
{t`Load more`}
150149
</div>
151150

152151
: [

‎client/src/views/asset-list.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export default ({ assetList, goAssetList, loading, t, ...S }) => {
1717
{ !assets ? <div className="load-more-container">{loader()}</div>
1818
: !assets.length ? <p>{t`No registered assets`}</p>
1919
: <div className="assets-table">
20-
<h3 className="table-title">{t`All Assets`}</h3>
20+
<h3 className="table-title font-h3">{t`All Assets`}</h3>
2121
<div className="assets-table-row header">
2222
<a href={`assets?sort_field=name&sort_dir=${reverseSortDir}`}
2323
className={`assets-table-cell sortable ${sort_field === "name" ? sort_dir : ""}`}>{t`Name`}

‎client/src/views/asset.js‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ export default ({ t, asset, assetTxs, goAsset, openTx, spends, tipHeight, loadin
6161
</div>
6262
</div>
6363
<div className="container">
64-
<div className="stats-table">
64+
<div className="stats-table font-p2">
6565
<div>
6666
<div>{t`Asset id`}</div>
6767
<div className="mono">{asset.asset_id}</div>
@@ -236,14 +236,14 @@ export default ({ t, asset, assetTxs, goAsset, openTx, spends, tipHeight, loadin
236236

237237
<div>
238238
<div className="transactions">
239-
<h3>{(is_native_asset ? txsShownTextNative : txsShownTextIssued)(total_txs, est_prev_total_seen_count, shown_txs, t)}</h3>
239+
<h3 className="font-h3">{(is_native_asset ? txsShownTextNative : txsShownTextIssued)(total_txs, est_prev_total_seen_count, shown_txs, t)}</h3>
240240
{ assetTxs ? assetTxs.map(tx => txBox(tx, { openTx, tipHeight, t, spends, ...S }))
241241
: loader()}
242242
</div>
243243

244244
<div className="load-more-container">
245245
<div>
246-
{ loading ? <div className="load-more disabled"><span>{t`Load more`}</span><div>{loader("small")}</div></div>
246+
{ loading ? <div className="load-more g-btn font-btn-2 disabled disabled"><span>{t`Loading...`}</span><div>{loader("small")}</div></div>
247247
: pagingNav(asset, last_seen_txid, est_curr_chain_seen_count, prev_paging_txids, next_paging_txids, prev_paging_est_count, t) }
248248
</div>
249249
</div>
@@ -269,9 +269,8 @@ const pagingNav = (asset, last_seen_txid, est_curr_chain_seen_count, prev_paging
269269
process.browser
270270

271271
? last_seen_txid != null &&
272-
<div className="load-more" role="button" data-loadmoreTxsLastTxid={last_seen_txid} data-loadmoreTxsAsset={asset.asset_id}>
273-
<span>{t`Load more`}</span>
274-
<div><img alt="" src={`${staticRoot}img/icons/arrow_down.png`} /></div>
272+
<div className="load-more g-btn primary-btn font-btn-2" role="button" data-loadmoreTxsLastTxid={last_seen_txid} data-loadmoreTxsAsset={asset.asset_id}>
273+
{t`Load more`}
275274
</div>
276275

277276
: [

‎client/src/views/block.js‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,13 @@ export default ({ t, block: b, blockStatus: status, blockTxs, openTx, spends, op
1616
<div className="block-page">
1717
<div className="container">
1818
<div>
19-
<h1 className="block-header-title">{t`Block ${b.height}`}</h1>
20-
<div className="block-hash"><span>{b.id}</span>
19+
<h1 className="block-header-title font-h2">{t`Block ${b.height}`}</h1>
20+
<div className="block-hash font-p1"><span className="text-gray">{b.id}</span>
2121
{ process.browser && <div className="code-button">
2222
<div className="code-button-btn" role="button" data-clipboardCopy={b.id}></div>
2323
</div> }
2424
</div>
25-
<div className="prev-next-blocks-btns">
25+
<div className="prev-next-blocks-btns font-h5">
2626
<div>
2727
{ b.previousblockhash &&
2828
<a href={`block/${b.previousblockhash}`}>
@@ -50,7 +50,7 @@ export default ({ t, block: b, blockStatus: status, blockTxs, openTx, spends, op
5050
<div className="container">
5151
{btnDetails(b.id, openBlock == b.id, page.query, t)}
5252

53-
<div className="stats-table">
53+
<div className="stats-table font-p2">
5454
<div>
5555
<div>{t`Height`}</div>
5656
<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
123123
</div>
124124

125125
<div className="transactions">
126-
<h3>{txsShownText(b.tx_count, goBlock.start_index, blockTxs && blockTxs.length, t)}</h3>
126+
<h3 className="font-h3">{txsShownText(b.tx_count, goBlock.start_index, blockTxs && blockTxs.length, t)}</h3>
127127
{ blockTxs ? blockTxs.map(tx => txBox( { ...tx, status: txsStatus }, { openTx, tipHeight, t, spends }))
128128
: loader() }
129129
</div>
130130

131131
<div className="load-more-container">
132132
<div>
133-
{ loading ? <div className="load-more disabled"><span>{t`Load more`}</span><div>{loader("small")}</div></div>
133+
{ loading ? <div className="load-more g-btn font-btn-2 disabled"><span>{t`Loading...`}</span><div>{loader("small")}</div></div>
134134
: pagingNav(b, { ...S, t }) }
135135
</div>
136136
</div>
@@ -147,9 +147,8 @@ const pagingNav = (block, { nextBlockTxs, prevBlockTxs, t }) =>
147147
process.browser
148148

149149
? nextBlockTxs &&
150-
<div className="load-more" role="button" data-loadmoreTxsIndex={nextBlockTxs} data-loadmoreTxsBlock={block.id}>
151-
<span>{t`Load more`}</span>
152-
<div><img alt="" src={`${staticRoot}img/icons/arrow_down.png`} /></div>
150+
<div className="load-more g-btn primary-btn font-btn-2" role="button" data-loadmoreTxsIndex={nextBlockTxs} data-loadmoreTxsBlock={block.id}>
151+
{t`Load more`}
153152
</div>
154153

155154
: [
@@ -167,9 +166,9 @@ const pagingNav = (block, { nextBlockTxs, prevBlockTxs, t }) =>
167166

168167
const btnDetails = (blockhash, isOpen, query, t) => process.browser
169168
// dynamic button in browser env
170-
? <div className="details-btn float-right mb-2" data-toggleBlock={blockhash}>{btnDetailsContent(isOpen, t)}</div>
169+
? <div className="details-btn font-btn-2 font-h5 float-right mb-2" data-toggleBlock={blockhash}>{btnDetailsContent(isOpen, t)}</div>
171170
// or a plain link in server-side rendered env
172-
: <a className="details-btn float-right mb-2" href={`block/${blockhash}${updateQuery(query, { expand: !isOpen })}`}>{btnDetailsContent(isOpen, t)}</a>
171+
: <a className="details-btn font-btn-2 font-h5 float-right mb-2" href={`block/${blockhash}${updateQuery(query, { expand: !isOpen })}`}>{btnDetailsContent(isOpen, t)}</a>
173172

174173
const btnDetailsContent = (isOpen, t) =>
175174
<div role="button" tabindex="0">

‎client/src/views/blocks.js‎

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -9,27 +9,27 @@ export const blks = (blocks, viewMore, loadMore, { t, loading, ...S }) =>
99
{ !blocks ? loader()
1010
: !blocks.length ? <p>{t`No recent blocks`}</p>
1111
: <div className="blocks-table">
12-
<h3 className="table-title">{t`Latest Blocks`}</h3>
12+
<h3 className="table-title font-h3">{t`Latest Blocks`}</h3>
1313
<div className="blocks-table-row header">
14-
<div className="blocks-table-cell">{t`Height`}</div>
15-
<div className="blocks-table-cell">{process.browser ? t`Timestamp` : t`Timestamp (UTC)`}</div>
16-
<div className="blocks-table-cell">{t`Transactions`}</div>
17-
<div className="blocks-table-cell">{t`Size (KB)`}</div>
18-
<div className="blocks-table-cell">{t`Weight (KWU)`}</div>
14+
<div className="blocks-table-cell font-h4">{t`Height`}</div>
15+
<div className="blocks-table-cell font-h4">{process.browser ? t`Timestamp` : t`Timestamp (UTC)`}</div>
16+
<div className="blocks-table-cell font-h4">{t`Transactions`}</div>
17+
<div className="blocks-table-cell font-h4">{t`Size (KB)`}</div>
18+
<div className="blocks-table-cell font-h4">{t`Weight (KWU)`}</div>
1919
</div>
2020
{ blocks && blocks.map(b =>
2121
<div className="blocks-table-link-row">
2222
<a className="blocks-table-row block-data" href={`block/${b.id}`}>
23-
<div className="blocks-table-cell highlighted-text" data-label={t`Height`}>{b.height}</div>
24-
<div className="blocks-table-cell" data-label={t`Timestamp`}>{formatTime(b.timestamp, false)}</div>
25-
<div className="blocks-table-cell" data-label={t`Transactions`}>{formatNumber(b.tx_count)}</div>
26-
<div className="blocks-table-cell" data-label={t`Size (KB)`}>{formatNumber(b.size/1000)}</div>
27-
<div className="blocks-table-cell" data-label={t`Weight (KWU)`}>{formatNumber(b.weight/1000)}</div>
23+
<div className="blocks-table-cell highlighted-text font-p2" data-label={t`Height`}>{b.height}</div>
24+
<div className="blocks-table-cell font-p2" data-label={t`Timestamp`}>{formatTime(b.timestamp, false)}</div>
25+
<div className="blocks-table-cell font-p2" data-label={t`Transactions`}>{formatNumber(b.tx_count)}</div>
26+
<div className="blocks-table-cell font-p2" data-label={t`Size (KB)`}>{formatNumber(b.size/1000)}</div>
27+
<div className="blocks-table-cell font-p2" data-label={t`Weight (KWU)`}>{formatNumber(b.weight/1000)}</div>
2828
</a>
2929
</div>
3030
)}
3131
{blocks && viewMore ?
32-
<a className="view-more" href="blocks/recent">
32+
<a className="view-more font-link-semibold" href="blocks/recent">
3333
<span>{t`View more blocks`}</span>
3434
<div><img alt="" src={`${staticRoot}img/icons/arrow_right_blu.png`} /></div>
3535
</a> : ""}
@@ -51,9 +51,8 @@ const pagingNav = ({ nextBlocks, prevBlocks, t }) =>
5151
process.browser
5252

5353
? nextBlocks != null &&
54-
<div className="load-more" role="button" data-loadmoreBlockHeight={''+nextBlocks}>
55-
<span>{t`Load more`}</span>
56-
<div><img alt="" src={`${staticRoot}img/icons/arrow_down.png`} /></div>
54+
<div className="load-more g-btn primary-btn font-btn-2" role="button" data-loadmoreBlockHeight={''+nextBlocks}>
55+
{t`Load more`}
5756
</div>
5857

5958
: [

‎client/src/views/footer.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export default ({ t, page }) =>
1313
{ !process.browser && Object.entries(page.query).map(([k, v]) =>
1414
k != 'lang' && <input type="hidden" name={k} value={v} />
1515
) }
16-
<select className="language-selector" name="lang">
16+
<select className="language-selector font-h4" name="lang">
1717
{ Object.entries(t.langs).map(([ lang_id, lang_t ]) =>
1818
<option value={lang_id} attrs={lang_id == t.lang_id ? { selected: true } : {}}>{lang_t`lang_name`}</option>
1919
) }
@@ -35,13 +35,13 @@ export default ({ t, page }) =>
3535
<div className="footer_container_content_row_onion_container">
3636
<div className="footer_container_content_row_onion_icon"></div>
3737
<div className="footer_container_content_row_onion_link-container">
38-
{ process.env.ONION_V3 && <a className="footer_container_content_row_onion_link" href={ process.env.ONION_V3 } target="_blank">Onion V3</a> }
38+
{ process.env.ONION_V3 && <a className="footer_container_content_row_onion_link font-p4" href={ process.env.ONION_V3 } target="_blank">Onion V3</a> }
3939
</div>
4040
</div>
4141
}
4242

4343
</div>
44-
<div className="footer_container_content_copyright">
44+
<div className="footer_container_content_copyright font-p3">
4545
<div>
4646
{ process.env.TERMS && <span><a href={ process.env.TERMS } target="_blank">Terms &amp; </a></span> }
4747
{ process.env.PRIVACY && <span><a href={ process.env.PRIVACY } target="_blank">Privacy</a></span> }

‎client/src/views/mempool.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,9 @@ export default ({ t, mempool, feeEst, ...S }) => mempool && feeEst && layout(
1111
<div className="mempool-page">
1212
<div className="container">
1313
<div>
14-
<h1 className="transaction-header-title">{t`Mempool`}</h1>
14+
<h1 className="transaction-header-title font-h2">{t`Mempool`}</h1>
1515
</div>
16-
<div className="stats-table">
16+
<div className="stats-table font-p2">
1717
<div>
1818
<div>{t`Total transactions`}</div>
1919
<div>{mempool.count}</div>

‎client/src/views/nav-toggle.js‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -21,15 +21,15 @@ export default (t, theme, page) =>
2121
}
2222
</div>
2323
<div className="section1">
24-
<h4 className="menu-title">Wallets</h4>
24+
<h4 className="menu-title font-h5">Wallets</h4>
2525
<div className="wallets-link">
2626
<div className="wallets-logo">
2727
<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>
2828
<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>
2929
<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>
3030
<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>
3131
</div>
32-
<div className="store-icons">
32+
<div className="store-icons font-p4">
3333
<a href="https://apps.apple.com/us/app/green-bitcoin-wallet/id1402243590" target="_blank">
3434
<img className="darkmode" src={`${staticRoot}img/icons/apple.png`} />
3535
<img className="lightmode" src={`${staticRoot}img/icons/apple_dark.png`} />
@@ -51,24 +51,24 @@ export default (t, theme, page) =>
5151
</div>
5252
<div className="section2">
5353
<div className="link-list">
54-
<h4 className="menu-title">Explorers</h4>
55-
<ul>
54+
<h4 className="menu-title font-h5">Explorers</h4>
55+
<ul className="font-p3">
5656
<li><a href="/" rel="external">Bitcoin</a></li>
5757
<li><a href="/liquid/" rel="external">Liquid Network</a></li>
5858
<li><a href="/testnet/" rel="external" target="_blank">Bitcoin Testnet</a></li>
5959
<li><a href="/liquidtestnet/" rel="external" target="_blank">Liquid Testnet</a></li>
6060
</ul>
61-
<h4 className="menu-title">Developer Tools</h4>
62-
<ul>
61+
<h4 className="menu-title font-h5">Developer Tools</h4>
62+
<ul className="font-p3">
6363
<li><a href="https://github.com/Blockstream/esplora/blob/master/API.md" target="_blank">API</a></li>
6464
<li><a href="tx/push">Broadcast Transactions</a></li>
6565
<li> { hasCam ? <a href="scan-qr">Scan QR</a> : ""}</li>
6666
<li> { process.env.IS_ELEMENTS ? <a href={`asset/${nativeAssetId}`}>Pegs</a> : ""}</li>
6767
</ul>
6868
</div>
6969
<div className="link-list">
70-
<h4 className="menu-title">Other Products</h4>
71-
<ul>
70+
<h4 className="menu-title font-h5">Other Products</h4>
71+
<ul className="font-p3">
7272
<li><a href="https://blockstream.com/liquid/" target="_blank">Liquid Network</a></li>
7373
<li><a href="https://blockstream.com/mining/" target="_blank">Blockstream Mining</a></li>
7474
<li><a href="https://blockstream.com/amp/" target="_blank">Blockstream AMP</a></li>
@@ -79,8 +79,8 @@ export default (t, theme, page) =>
7979
</ul>
8080
</div>
8181
<div className="link-list">
82-
<h4 className="menu-title">Useful Links</h4>
83-
<ul>
82+
<h4 className="menu-title font-h5">Useful Links</h4>
83+
<ul className="font-p3">
8484
<li><a href="https://help.blockstream.com/hc/en-us" target="_blank">Help Center</a></li>
8585
<li><a href="https://help.blockstream.com/hc/en-us/requests/new?ticket_form_id=8613" target="_blank">Submit a bug / request</a></li>
8686
<li><a href="https://blockstream.com/about/" target="_blank">About Blockstream</a></li>

‎client/src/views/navbar-menu.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export default ({ t, theme, page }) =>
1313
<ul className="main-nav">
1414
{ items && Object.entries(items).map(([ name, url ]) =>
1515
<li id={name.replace(/ /g, '')} className={`nav-item ${name == active ? 'active' : ''}`}>
16-
<a className="nav-link" href={url} rel="external">
16+
<a className="nav-link font-h4" href={url} rel="external">
1717
<span><img className="menu-logo" alt="" src={`${staticRoot}img/icons/${name.replace(/ /g, '')}-menu-logo.svg`} /></span>
1818
<span>{t(name)}</span>
1919
</a>

‎client/src/views/sub-navbar.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import search from './search'
44
export default ( t, isTouch, activeTab) =>
55
<div className="sub-navbar">
66
<div className="container sub-nav-container">
7-
<div className="sub-nav">
7+
<div className="sub-nav font-h4">
88
<a href="." class={{ active: activeTab == 'dashBoard' }}>Dashboard</a>
99
<a href="blocks/recent" class={{ active: activeTab == 'recentBlocks' }}>Blocks</a>
1010
<a href="tx/recent" class={{ active: activeTab == 'recentTxs' }}>Transactions</a>

0 commit comments

Comments
 (0)