Open
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a new light-mode theme (nymkappa) and updates the frontend’s styling/theme plumbing (largely Bootstrap 5 migration follow-ups) so UI elements render correctly across themes, including light-specific assets and colors.
Changes:
- Introduces the
nymkappatheme and corresponding mempool fee color palette, and includes it in theme generation. - Updates many templates/styles to Bootstrap 5 classnames and theme-variable-based colors for better light/dark compatibility.
- Adds a reusable
MiningPoolComponentto standardize mining pool logo/name rendering with light-logo fallback behavior.
Reviewed changes
Copilot reviewed 204 out of 219 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/src/theme-softsimon.scss | Adds --pink variable and Bootstrap v5 select indicator var update. |
| frontend/src/theme-contrast.scss | Adds --pink variable and Bootstrap v5 select indicator var update. |
| frontend/src/theme-bukele.scss | Adds --pink variable and Bootstrap v5 select indicator var update. |
| frontend/src/resources/profile/leather-light.svg | Adds light-mode SVG asset. |
| frontend/src/resources/profile/bitkey-light.svg | Adds light-mode SVG asset. |
| frontend/src/app/shared/shared.module.ts | Registers MiningPoolComponent in shared module. |
| frontend/src/app/shared/components/truncate/truncate.component.scss | Uses theme variable for disabled text color. |
| frontend/src/app/shared/components/testnet-alert/testnet-alert.component.scss | Updates close button styling for Bootstrap 5 alert dismiss button. |
| frontend/src/app/shared/components/testnet-alert/testnet-alert.component.html | Migrates to Bootstrap 5 alert-dismissible + btn-close. |
| frontend/src/app/shared/components/mining-pool/mining-pool.component.ts | New component for mining pool logo/name with light-logo fallback. |
| frontend/src/app/shared/components/mining-pool/mining-pool.component.scss | Styles for mining pool logo/name display. |
| frontend/src/app/shared/components/mining-pool/mining-pool.component.html | Template for mining pool logo + optional highlighted name. |
| frontend/src/app/shared/components/global-footer/global-footer.component.scss | Theme-variable color updates and footer icon coloring tweaks. |
| frontend/src/app/shared/components/global-footer/global-footer.component.html | Bootstrap 5 spacing class updates (ms/me). |
| frontend/src/app/services/theme.service.ts | Adds nymkappa theme + light fee colors selection logic. |
| frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.ts | Uses theme variable for chart legend text color. |
| frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.html | Bootstrap 5 radio button group markup (btn-check). |
| frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.scss | Uses theme variable for secondary text color. |
| frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.html | Bootstrap 5 float/text alignment class updates. |
| frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.scss | Uses theme variable for secondary text color. |
| frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.html | Bootstrap 5 float/text alignment class updates. |
| frontend/src/app/lightning/nodes-ranking/oldest-nodes/oldest-nodes.component.html | Bootstrap 5 float/text alignment class updates. |
| frontend/src/app/lightning/nodes-per-isp/nodes-per-isp.component.html | Bootstrap 5 spacing/float/text alignment class updates. |
| frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.html | Bootstrap 5 spacing/text alignment class updates. |
| frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.html | Bootstrap 5 spacing/float/text alignment class updates. |
| frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.html | Bootstrap 5 spacing/text alignment class updates. |
| frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.ts | Uses theme variable for chart legend text color. |
| frontend/src/app/lightning/nodes-list/nodes-list.component.html | Bootstrap 5 text alignment class updates. |
| frontend/src/app/lightning/node/node.component.html | Bootstrap 5 badge/spacing/text alignment class updates. |
| frontend/src/app/lightning/node/node-preview.component.html | Bootstrap 5 badge class updates. |
| frontend/src/app/lightning/node-statistics/node-statistics.component.scss | Uses theme variable for subtle borders. |
| frontend/src/app/lightning/node-statistics-chart/node-statistics-chart.component.ts | Uses theme variable for chart legend text color. |
| frontend/src/app/lightning/node-fee-chart/node-fee-chart.component.ts | Uses theme variable for chart legend text color. |
| frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.html | Bootstrap 5 spacing class updates. |
| frontend/src/app/lightning/justice-list/justice-list.component.html | Bootstrap 5 float/text alignment + badge class updates. |
| frontend/src/app/lightning/group/group.component.html | Bootstrap 5 spacing/text alignment class updates. |
| frontend/src/app/lightning/channels-statistics/channels-statistics.component.scss | Uses theme variable for subtle borders. |
| frontend/src/app/lightning/channel/closing-type/closing-type.component.html | Bootstrap 5 pill badge class update. |
| frontend/src/app/lightning/channel/channel.component.html | Bootstrap 5 badge class updates. |
| frontend/src/app/lightning/channel/channel-preview.component.html | Bootstrap 5 badge class updates. |
| frontend/src/app/lightning/channel/channel-box/channel-box.component.html | Bootstrap 5 badge class updates. |
| frontend/src/app/docs/api-docs/api-docs.component.html | Bootstrap 5 text alignment class updates. |
| frontend/src/app/dashboard/dashboard.component.html | Bootstrap 5 spacing + radio group markup updates. |
| frontend/src/app/components/wallet/wallet.component.html | Bootstrap 5 text alignment class updates. |
| frontend/src/app/components/tx-fee-rating/tx-fee-rating.component.html | Bootstrap 5 badge class updates. |
| frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.scss | Tooltip background adjustments for theme compatibility. |
| frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.html | Adds unit styling support in tooltip amounts. |
| frontend/src/app/components/twitter-widget/twitter-widget.component.html | Bootstrap 5 spacing class updates. |
| frontend/src/app/components/twitter-login/twitter-login.component.html | Bootstrap 5 spacing class updates. |
| frontend/src/app/components/treasuries/verify/treasuries-verify.component.scss | Tooltip background adjustments for theme compatibility. |
| frontend/src/app/components/treasuries/treasuries.component.html | Bootstrap 5 spacing class updates. |
| frontend/src/app/components/treasuries/treasuries-graph/treasuries-graph.component.ts | Uses theme variable for chart legend text color. |
| frontend/src/app/components/treasuries/supply/treasuries-supply.component.scss | Tooltip background adjustments for theme compatibility. |
| frontend/src/app/components/transactions-list/transactions-list.component.scss | Theme-variable color updates + badge styling tweaks. |
| frontend/src/app/components/transaction/transaction.component.scss | Removes duplicated pool-logo CSS; theme-variable color updates. |
| frontend/src/app/components/transaction/transaction.component.html | Bootstrap 5 spacing/float/text alignment class updates. |
| frontend/src/app/components/transaction/transaction-raw.component.scss | Theme-variable color updates. |
| frontend/src/app/components/transaction/transaction-raw.component.html | Bootstrap 5 spacing/float/text alignment class updates. |
| frontend/src/app/components/transaction/transaction-preview.component.html | Bootstrap 5 spacing/text alignment + badge updates. |
| frontend/src/app/components/transaction/transaction-details/transaction-details.component.scss | Removes duplicated pool-logo CSS; minor styling adjustments. |
| frontend/src/app/components/transaction/cpfp-info.component.html | Bootstrap 5 text alignment + badge updates. |
| frontend/src/app/components/trademark-policy/trademark-policy.component.scss | Sets table border variable for theme compatibility. |
| frontend/src/app/components/trademark-policy/trademark-policy.component.html | Bootstrap 5 text alignment class updates. |
| frontend/src/app/components/tracker/tracker.component.scss | Uses --red theme var for alert background. |
| frontend/src/app/components/tracker/tracker.component.html | Bootstrap 5 spacing class updates + conditional label behavior. |
| frontend/src/app/components/timezone-selector/timezone-selector.component.html | Migrates to Bootstrap 5 form-select. |
| frontend/src/app/components/theme-selector/theme-selector.component.ts | Adds nymkappa to supported theme list. |
| frontend/src/app/components/theme-selector/theme-selector.component.scss | Migrates selector styling to form-select. |
| frontend/src/app/components/theme-selector/theme-selector.component.html | Adds nymkappa option to theme dropdown. |
| frontend/src/app/components/test-transactions/test-transactions.component.html | Bootstrap 5 spacing/text alignment updates. |
| frontend/src/app/components/terms-of-service/terms-of-service.component.ts | Adds light-mode awareness for logo rendering. |
| frontend/src/app/components/terms-of-service/terms-of-service.component.html | Switches logo asset based on light-mode state + text alignment update. |
| frontend/src/app/components/stratum/stratum-list/stratum-list.component.scss | Removes duplicated pool-logo CSS. |
| frontend/src/app/components/stratum/stratum-list/stratum-list.component.html | Uses MiningPoolComponent instead of inline img+text. |
| frontend/src/app/components/statistics/statistics.component.scss | Updates selectors (first/last-of-type) for Bootstrap 5 markup. |
| frontend/src/app/components/stale-list/stale-list.component.scss | Removes duplicated pool-logo CSS. |
| frontend/src/app/components/simpleproof-widget/simpleproof-widget.component.html | Bootstrap 5 text alignment/float + badge updates. |
| frontend/src/app/components/search-form/search-results/search-results.component.html | Uses MiningPoolComponent for pool results display. |
| frontend/src/app/components/search-form/search-form.component.scss | Button class rename + focus styling tweaks. |
| frontend/src/app/components/search-form/search-form.component.html | Button class rename + Bootstrap 5 spacing updates. |
| frontend/src/app/components/reward-stats/reward-stats.component.scss | Uses theme variable for subtle borders. |
| frontend/src/app/components/rbf-timeline/rbf-timeline.component.scss | Uses theme var for icon/background color. |
| frontend/src/app/components/rbf-timeline/rbf-timeline-tooltip.component.scss | Tooltip styling adjustments and symbol coloring. |
| frontend/src/app/components/rbf-timeline/rbf-timeline-tooltip.component.html | Bootstrap 5 badge/spacing updates + fixed unit styling. |
| frontend/src/app/components/rbf-list/rbf-list.component.html | Bootstrap 5 float/spinner/badge updates + btn-check radios. |
| frontend/src/app/components/rate-unit-selector/rate-unit-selector.component.html | Migrates to Bootstrap 5 form-select. |
| frontend/src/app/components/push-transaction/push-transaction.component.html | Bootstrap 5 spacing/text alignment updates. |
| frontend/src/app/components/privacy-policy/privacy-policy.component.ts | Adds light-mode awareness for logo rendering. |
| frontend/src/app/components/privacy-policy/privacy-policy.component.html | Switches logo asset based on light-mode state + text alignment update. |
| frontend/src/app/components/price-chart/price-chart.component.html | Bootstrap 5 spacing + btn-check radio updates. |
| frontend/src/app/components/pool/pool.component.ts | Uses theme variable for chart legend text and slider colors. |
| frontend/src/app/components/pool/pool.component.scss | Theme-variable skeleton color + minor badge padding tweak. |
| frontend/src/app/components/ord-data/ord-data.component.scss | Badge styling adjustments for Bootstrap 5 variables. |
| frontend/src/app/components/ord-data/ord-data.component.html | Bootstrap 5 spacing class updates. |
| frontend/src/app/components/ngx-bootstrap-multiselect/ngx-bootstrap-multiselect.component.html | Bootstrap 5 input-group markup adjustments. |
| frontend/src/app/components/mining-dashboard/mining-dashboard.component.html | Bootstrap 5 spacing class updates. |
| frontend/src/app/components/menu/menu.component.scss | Theme-variable link/badge colors. |
| frontend/src/app/components/menu/menu.component.html | Bootstrap 5 spacing updates + themed external-link icon color. |
| frontend/src/app/components/mempool-graph/mempool-graph.component.ts | Uses theme variables in chart config + tooltip unit styling. |
| frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts | Uses theme vars for block loading backgrounds. |
| frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss | Uses theme vars for block faces and icons. |
| frontend/src/app/components/mempool-block/mempool-block.component.html | Bootstrap 5 float class update. |
| frontend/src/app/components/master-page/master-page.component.scss | Uses theme var for nav shadow + subtle color tweaks. |
| frontend/src/app/components/master-page-preview/master-page-preview.component.html | Bootstrap 5 spacing class updates. |
| frontend/src/app/components/loading-indicator/loading-indicator.component.html | Bootstrap 5 badge/spacing updates. |
| frontend/src/app/components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component.scss | Theme-variable border and text color updates. |
| frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.scss | Theme-variable border update. |
| frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.html | Bootstrap 5 text alignment/float updates. |
| frontend/src/app/components/liquid-reserves-audit/expired-utxos-stats/expired-utxos-stats.component.scss | Theme-variable border and text color updates. |
| frontend/src/app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.ts | Uses theme variable for chart legend text color. |
| frontend/src/app/components/language-selector/language-selector.component.html | Migrates to Bootstrap 5 form-select. |
| frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts | Uses theme variables in chart series styling. |
| frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts | Uses theme variable for chart legend text color. |
| frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.html | Bootstrap 5 spacing + btn-check radio updates. |
| frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts | Uses theme variable for chart legend text color. |
| frontend/src/app/components/hashrate-chart/hashrate-chart.component.html | Bootstrap 5 spacing + btn-check radio updates. |
| frontend/src/app/components/github-login.component/github-login.component.html | Bootstrap 5 spacing class updates. |
| frontend/src/app/components/footer/footer.component.html | Bootstrap 5 badge updates. |
| frontend/src/app/components/fiat-selector/fiat-selector.component.html | Migrates to Bootstrap 5 form-select. |
| frontend/src/app/components/fees-box/fees-box.component.scss | Theme-variable color/border updates + background pattern tweaks. |
| frontend/src/app/components/fee-distribution-graph/fee-distribution-graph.component.ts | Uses theme variable for label color. |
| frontend/src/app/components/faucet/faucet.component.html | Bootstrap 5 spacing/text alignment + input-group markup updates. |
| frontend/src/app/components/difficulty/difficulty-tooltip.component.scss | Tooltip background adjustment for theme compatibility. |
| frontend/src/app/components/difficulty-adjustments-table/difficulty-adjustments-table.component.html | Bootstrap 5 text alignment updates. |
| frontend/src/app/components/custom-dashboard/custom-dashboard.component.html | Bootstrap 5 spacing + radio group markup updates. |
| frontend/src/app/components/clipboard/clipboard.component.ts | Bootstrap 5 spacing class update for default button class. |
| frontend/src/app/components/clipboard/clipboard.component.scss | Tooltip/copy message styling adjustments. |
| frontend/src/app/components/calculator/calculator.component.scss | Layout tweaks + datepicker theming for light mode. |
| frontend/src/app/components/calculator/calculator.component.html | Bootstrap 5 input-group markup adjustments + layout tweaks. |
| frontend/src/app/components/blocks-list/blocks-list.component.scss | Theme-variable link color + removes duplicated pool-name CSS. |
| frontend/src/app/components/blockchain/blockchain.component.scss | Uses theme variable for toggle icon color. |
| frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss | Uses theme vars for block faces/icons + removes duplicated pool-logo CSS. |
| frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html | Uses MiningPoolComponent for pool display. |
| frontend/src/app/components/block/block.component.scss | Theme-variable subtitle icon color + layout tweak; removes duplicated pool-logo CSS. |
| frontend/src/app/components/block/block-transactions.component.html | Bootstrap 5 text alignment/float updates. |
| frontend/src/app/components/block/block-preview.component.html | Bootstrap 5 badge background class update. |
| frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.ts | Uses theme variable for chart legend/label colors. |
| frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.ts | Uses theme variable for chart legend colors. |
| frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.scss | Tooltip background + fixed-unit symbol coloring tweaks. |
| frontend/src/app/components/block-overview-graph/block-overview-graph.component.scss | Uses theme var for overlay background. |
| frontend/src/app/components/block-overview-graph/block-overview-graph.component.html | Bootstrap 5 spacing updates for spinner/labels. |
| frontend/src/app/components/block-filters/block-filters.component.ts | Click-away behavior updated for btn-check radios. |
| frontend/src/app/components/block-filters/block-filters.component.scss | Theme-variable color updates + overlay background var usage. |
| frontend/src/app/components/block-filters/block-filters.component.html | Bootstrap 5 float + btn-check radio group markup updates. |
| frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.ts | Uses theme variable for chart legend text color. |
| frontend/src/app/components/block-fees-graph/block-fees-graph.component.ts | Uses theme variable for chart legend text color. |
| frontend/src/app/components/block-fees-graph/block-fees-graph.component.html | Bootstrap 5 spacing + btn-check radio updates. |
| frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.ts | Uses theme variable for chart legend text color. |
| frontend/src/app/components/bitcoin-invoice/bitcoin-invoice.component.scss | Theme-variable input text color. |
| frontend/src/app/components/bitcoin-invoice/bitcoin-invoice.component.html | Bootstrap 5 form/input-group markup adjustments. |
| frontend/src/app/components/assets/assets-nav/assets-nav.component.html | Bootstrap 5 input-group markup adjustment. |
| frontend/src/app/components/amount/amount.component.ts | Adds unitStyle input for unit styling customization. |
| frontend/src/app/components/amount/amount.component.html | Applies unitStyle to unit symbol spans. |
| frontend/src/app/components/amount-selector/amount-selector.component.html | Migrates to Bootstrap 5 form-select. |
| frontend/src/app/components/address/address.component.scss | Theme-variable border color update. |
| frontend/src/app/components/address-labels/address-labels.component.html | Bootstrap 5 badge pill class updates. |
| frontend/src/app/components/address-group/address-group.component.html | Bootstrap 5 float update. |
| frontend/src/app/components/address-graph/address-graph.component.ts | Uses theme variable for chart legend and label colors. |
| frontend/src/app/components/acceleration/pending-stats/pending-stats.component.scss | Theme-variable border update. |
| frontend/src/app/components/acceleration/active-acceleration-box/active-acceleration-box.component.html | Bootstrap 5 float class updates. |
| frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.scss | Theme-variable inactive color. |
| frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.html | Bootstrap 5 spacing updates + themed separators. |
| frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.scss | Removes duplicated pool-logo CSS + theme-variable no-data color. |
| frontend/src/app/components/acceleration/acceleration-stats/acceleration-stats.component.scss | Theme-variable border update. |
| frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.ts | Uses theme variable for chart legend text color. |
| frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss | Theme-variable icon/background and badge text color tweaks. |
| frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.html | Bootstrap 5 badge class updates. |
| frontend/src/app/components/acceleration-timeline/acceleration-timeline-tooltip.component.scss | Tooltip background adjustment; removes duplicated pool-logo CSS. |
| frontend/src/app/components/acceleration-timeline/acceleration-timeline-tooltip.component.html | Uses MiningPoolComponent + adds unit styling in fee-rate display. |
| frontend/src/app/components/accelerate-checkout/accelerate-fee-graph.component.scss | Theme-variable border/text color updates. |
| frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.ts | Tracks theme state to support light-mode rendering logic. |
| frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.scss | Theme-variable colors + Bootstrap row child sizing tweaks. |
| frontend/src/app/components/about/about.component.ts | Adds theme-state tracking for light-mode rendering. |
| frontend/src/app/components/about/about.component.scss | Uses --pink variable for themed accent color. |
| frontend/src/app/app.constants.ts | Adds lightMempoolFeeColors palette. |
| frontend/package.json | Updates Bootstrap to ~5.3.8. |
| frontend/generate-themes.js | Includes nymkappa in generated theme outputs. |
Files not reviewed (1)
- frontend/package-lock.json: Language not supported
frontend/src/app/components/theme-selector/theme-selector.component.html
Show resolved
Hide resolved
frontend/src/app/components/privacy-policy/privacy-policy.component.ts
Outdated
Show resolved
Hide resolved
frontend/src/app/components/terms-of-service/terms-of-service.component.ts
Outdated
Show resolved
Hide resolved
Contributor
fml |
natsoni
force-pushed
the
natsoni/let-there-be-light
branch
from
01d3e58 to
d0d4a2d
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Builds on #6022
This PR adds light mode to the list of color themes.