From 9ff7dd3e87e0f5a0d3e8a4a103e9fc54144d360a Mon Sep 17 00:00:00 2001 From: owlsua Date: Mon, 27 Jul 2026 11:28:08 +0200 Subject: [PATCH 01/26] feat(sidepanel): open the wallet in the browser side panel Chrome uses side_panel with openPanelOnActionClick, Firefox uses sidebar_action opened from the toolbar action click. The popup entry is dropped, so the expand-to-window flow on the create/restore page is gone and the extended-view styles now key off an .extended-view class set on for the standalone view. --- public/background-script.js | 14 ++++++++++++++ public/background.js | 9 +++++++++ public/index.css | 4 ++-- public/manifestDefault.json | 8 +++++--- public/manifestFirefox.json | 6 +++++- src/index.js | 8 ++++++++ src/pages/CreateRestore/CreateRestore.js | 7 +------ 7 files changed, 44 insertions(+), 12 deletions(-) diff --git a/public/background-script.js b/public/background-script.js index 76768d56..bdc5f286 100644 --- a/public/background-script.js +++ b/public/background-script.js @@ -3,6 +3,20 @@ let popupWindowId = null let connectWindowId = null let isPopupOpening = false +// Firefox has no sidePanel API: open the sidebar when the toolbar icon is clicked +if ( + typeof browser !== 'undefined' && + browser.action && + browser.sidebarAction && + browser.sidebarAction.open +) { + browser.action.onClicked.addListener(() => { + browser.sidebarAction.open().catch((error) => { + console.error('[Mintlayer] sidebarAction.open error:', error) + }) + }) +} + browser.runtime.onConnect.addListener((port) => { port.onMessage.addListener((msg) => { if (msg && msg.myProperty && msg.myProperty.message) { diff --git a/public/background.js b/public/background.js index 5c8550a4..c3b82d3c 100644 --- a/public/background.js +++ b/public/background.js @@ -11,6 +11,15 @@ let connectedSites = {} const pendingResponses = new Map() + // Open the wallet in the browser side panel when the toolbar icon is clicked + if (api.sidePanel && api.sidePanel.setPanelBehavior) { + api.sidePanel + .setPanelBehavior({ openPanelOnActionClick: true }) + .catch((error) => + console.error('[Mintlayer] setPanelBehavior error:', error), + ) + } + // Load connected sites from storage api.storage.local.get(['connectedSites'], (data) => { if (api.runtime.lastError) { diff --git a/public/index.css b/public/index.css index c34b8a2a..08958707 100644 --- a/public/index.css +++ b/public/index.css @@ -1,12 +1,12 @@ @media screen and (min-width: 801px) { - html { + html.extended-view { display: flex; justify-content: center; padding: 30px 0 30px 0; height: 100vh; } - body { + html.extended-view body { border-radius: 30px; } } diff --git a/public/manifestDefault.json b/public/manifestDefault.json index f88f87c7..d62c69af 100644 --- a/public/manifestDefault.json +++ b/public/manifestDefault.json @@ -18,14 +18,16 @@ }, "action": { "default_icon": "logo192.png", - "default_title": "Mojito", - "default_popup": "index.html" + "default_title": "Mojito" + }, + "side_panel": { + "default_path": "index.html" }, "background": { "service_worker": "background.js", "type": "module" }, - "permissions": ["scripting", "storage"], + "permissions": ["scripting", "storage", "sidePanel"], "content_scripts": [ { "run_at": "document_start", diff --git a/public/manifestFirefox.json b/public/manifestFirefox.json index 97a0a8cd..f4274cf6 100644 --- a/public/manifestFirefox.json +++ b/public/manifestFirefox.json @@ -34,9 +34,13 @@ "scripts": ["background-script.js"] }, "action": { + "default_icon": "logo192.png", + "default_title": "Mojito" + }, + "sidebar_action": { "default_icon": "logo192.png", "default_title": "Mojito", - "default_popup": "index.html" + "default_panel": "index.html" }, "content_security_policy": { "extension_pages": "script-src 'self' 'wasm-unsafe-eval'; object-src 'self'; img-src 'self' data:; style-src 'self' https://fonts.cdnfonts.com https://fonts.googleapis.com https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com https://fonts.cdnfonts.com; style-src-elem 'self' https://fonts.googleapis.com" diff --git a/src/index.js b/src/index.js index 5a63b24e..32c14bde 100644 --- a/src/index.js +++ b/src/index.js @@ -67,6 +67,14 @@ import '@Assets/styles/index.css' const root = ReactDOM.createRoot(document.getElementById('root')) +const isExtendedView = + window.location.href.includes('popup.html') || + [':300', ':800'].some((port) => window.location.href.includes(port)) + +if (isExtendedView) { + document.documentElement.classList.add('extended-view') +} + const storage = typeof browser !== 'undefined' && browser.storage ? browser.storage diff --git a/src/pages/CreateRestore/CreateRestore.js b/src/pages/CreateRestore/CreateRestore.js index c826a078..48e32873 100644 --- a/src/pages/CreateRestore/CreateRestore.js +++ b/src/pages/CreateRestore/CreateRestore.js @@ -38,12 +38,7 @@ const CreateRestorePage = () => { } const goToRestoreAccountPage = () => { - if (isDevMode) { - return navigate('/restore-account') - } - isExtended - ? navigate('/restore-account') - : expandHandler('/restore-account') + navigate('/restore-account') } return ( From 06cf4e74d25af9c5a8ddc3b4d2c2fdc3006d0886 Mon Sep 17 00:00:00 2001 From: owlsua Date: Mon, 27 Jul 2026 11:28:32 +0200 Subject: [PATCH 02/26] refactor(chart): drop the unused d3 tooltip from Arc The tooltip element was hidden by ArcChart.css, so the mouse handlers and the body-level node they wrote to had no visible effect. --- src/components/basic/Arc/Arc.js | 59 +---------------- src/components/basic/Arc/Arc.test.js | 64 +------------------ .../composed/Charts/ArcChart/ArcChart.css | 13 ---- .../composed/Charts/ArcChart/ArcChart.js | 6 +- 4 files changed, 4 insertions(+), 138 deletions(-) delete mode 100644 src/components/composed/Charts/ArcChart/ArcChart.css diff --git a/src/components/basic/Arc/Arc.js b/src/components/basic/Arc/Arc.js index b5e43afe..63b003d3 100644 --- a/src/components/basic/Arc/Arc.js +++ b/src/components/basic/Arc/Arc.js @@ -12,51 +12,7 @@ const createPieGenerator = () => .padAngle(0.02) .sort((a, b) => b.value - a.value) -const createTooltip = () => - d3 - .select('body') - .append('div') - .attr('class', 'chart-tooltip') - .attr('data-testid', 'tooltip-container') - .style('opacity', 0) - -const mouseMoveHandle = (tooltip, ev) => { - tooltip.style('left', `${ev.pageX}px`).style('top', `${ev.pageY - 35}px`) -} - -const mouseOverHandle = (tooltip, _, item) => { - tooltip - .attr('data-show', 'true') - .transition() - .duration(200) - .style('opacity', 0.9) - - tooltip.html( - `${item.data.asset}
${item.data.value} ${item.data.valueSymbol} `, - ) -} - -const mouseOutHandle = (tooltip) => { - tooltip - .attr('data-show', 'false') - .transition() - .duration(500) - .style('opacity', 0) -} - -const buildArc = ({ - container, - pathData, - arcGenerator, - tooltip, - mouseMoveFn = mouseMoveHandle, - mouseOverFn = mouseOverHandle, - mouseOutFn = mouseOutHandle, -}) => { - const mouseMoveHandleBinded = mouseMoveFn.bind(null, tooltip) - const mouseOverHandleBinded = mouseOverFn.bind(null, tooltip) - const mouseOutHandleBinded = mouseOutFn.bind(null, tooltip) - +const buildArc = ({ container, pathData, arcGenerator }) => { d3.select(container) .selectAll('path') .data(pathData) @@ -65,17 +21,6 @@ const buildArc = ({ .attr('stroke', 'none') .attr('fill', (item) => item.data.color) .attr('data-testid', (item) => `arc-${item.data.asset}-container`) - .on('mouseover', mouseMoveHandleBinded) - .on('mousemove', mouseOverHandleBinded) - .on('mouseout', mouseOutHandleBinded) } -export { - createPieGenerator, - createArcGenerator, - createTooltip, - buildArc, - mouseMoveHandle, - mouseOverHandle, - mouseOutHandle, -} +export { createPieGenerator, createArcGenerator, buildArc } diff --git a/src/components/basic/Arc/Arc.test.js b/src/components/basic/Arc/Arc.test.js index 1c9a2c4a..8ca887b2 100644 --- a/src/components/basic/Arc/Arc.test.js +++ b/src/components/basic/Arc/Arc.test.js @@ -1,15 +1,7 @@ import { render, screen } from '@testing-library/react' import * as d3 from 'd3' -import { - createArcGenerator, - createPieGenerator, - createTooltip, - buildArc, - mouseMoveHandle, - mouseOverHandle, - mouseOutHandle, -} from './Arc' +import { createArcGenerator, createPieGenerator, buildArc } from './Arc' const ArcData = [ { value: 10, asset: 'BTC', color: 'orange' }, @@ -35,61 +27,9 @@ test('CreatePieGenerator function', () => { expect(generator.endAngle()()).toBe(0.5 * Math.PI) }) -test('CreateTooltip function', () => { - createTooltip() - const tooltipComponent = screen.getByTestId('tooltip-container') - - expect(tooltipComponent).toBeInTheDocument() -}) - -test('mouseMoveHandle function', () => { - const d3Tooltip = d3 - .select('body') - .append('div') - .attr('data-testid', 'mousemove-tooltip-container') - - const tooltipContainer = screen.getByTestId('mousemove-tooltip-container') - - mouseMoveHandle(d3Tooltip, { pageX: 0, pageY: 0 }) - - expect(tooltipContainer).toHaveAttribute('style', 'left: 0px; top: -35px;') -}) - -test('mouseOverHandle function', () => { - const d3Tooltip = d3 - .select('body') - .append('div') - .attr('data-testid', 'mouseover-tooltip-container') - - const item = { data: { value: 10, asset: 'BTC' } } - - const tooltipContainer = screen.getByTestId('mouseover-tooltip-container') - - mouseOverHandle(d3Tooltip, null, item, 0) - - expect(tooltipContainer).toHaveTextContent( - `${item.data.asset} ${item.data.value}`, - ) - expect(tooltipContainer).toHaveAttribute('data-show', 'true') -}) - -test('mouseOutHandle function', () => { - const d3Tooltip = d3 - .select('body') - .append('div') - .attr('data-testid', 'mouseout-tooltip-container') - - const tooltipContainer = screen.getByTestId('mouseout-tooltip-container') - - mouseOutHandle(d3Tooltip, 0) - - expect(tooltipContainer).toHaveAttribute('data-show', 'false') -}) - test('Render Arc', () => { render(
- @@ -97,13 +37,11 @@ test('Render Arc', () => { ) const arcContainer = screen.getByTestId('arc-container') - const tooltipContainer = screen.getAllByTestId('tooltip-container') buildArc({ container: arcContainer, pathData: d3.pie()(ArcData), arcGenerator: d3.arc(), - tooltip: tooltipContainer, }) ArcData.forEach((item) => { diff --git a/src/components/composed/Charts/ArcChart/ArcChart.css b/src/components/composed/Charts/ArcChart/ArcChart.css deleted file mode 100644 index 11bbf017..00000000 --- a/src/components/composed/Charts/ArcChart/ArcChart.css +++ /dev/null @@ -1,13 +0,0 @@ -.chart-tooltip { - display: none; - position: absolute; - /* text-align: center; - height: 50px; - padding: 5px 15px; - font: 12px sans-serif; - background: rgb(var(--color-extra-light-gray)); - border: 0px; - border-radius: 8px; - pointer-events: none; - opacity: 0; */ -} diff --git a/src/components/composed/Charts/ArcChart/ArcChart.js b/src/components/composed/Charts/ArcChart/ArcChart.js index f00b854f..340837d0 100644 --- a/src/components/composed/Charts/ArcChart/ArcChart.js +++ b/src/components/composed/Charts/ArcChart/ArcChart.js @@ -2,8 +2,6 @@ import React, { useRef, useEffect, useState } from 'react' import { Svg, Arc } from '@BasicComponents' -import './ArcChart.css' - const DATASAMPLE = [ { value: 35, asset: 'ASSET 1', color: 'orange' }, { value: 65, asset: 'ASSET 2', color: 'lightblue' }, @@ -11,7 +9,6 @@ const DATASAMPLE = [ const ArcChart = ({ data = DATASAMPLE, width = '200px', height = '100px' }) => { const container = useRef(null) - const [tooltip] = useState(Arc.createTooltip) const [pieGenerator] = useState(Arc.createPieGenerator) const [arcGenerator] = useState(Arc.createArcGenerator) @@ -21,10 +18,9 @@ const ArcChart = ({ data = DATASAMPLE, width = '200px', height = '100px' }) => { Arc.buildArc({ pathData, arcGenerator, - tooltip, container: container.current, }) - }, [data, pieGenerator, arcGenerator, tooltip]) + }, [data, pieGenerator, arcGenerator]) const sorted = [...data].sort((a, b) => b.value - a.value) const firstColor = sorted[0]?.color || '#37DB8C' From 7a24284c71b38ebf7a531080d17b5eb74976b8ef Mon Sep 17 00:00:00 2001 From: owlsua Date: Mon, 27 Jul 2026 11:28:49 +0200 Subject: [PATCH 03/26] feat(wallet): restyle transaction actions as circular icon buttons Every action now renders the same round icon button with the label moved out of the button and under it; only Send keeps a filled variant. This removes the wide/small split and its mode-specific class lists. --- .../containers/Wallet/TransactionButton.css | 167 ++++++------------ .../containers/Wallet/TransactionButton.js | 48 ++--- 2 files changed, 65 insertions(+), 150 deletions(-) diff --git a/src/components/containers/Wallet/TransactionButton.css b/src/components/containers/Wallet/TransactionButton.css index 9f3a8a85..64559a29 100644 --- a/src/components/containers/Wallet/TransactionButton.css +++ b/src/components/containers/Wallet/TransactionButton.css @@ -1,90 +1,71 @@ -.transaction-item span { - font-weight: 600; - color: rgb(var(--color-lightest-blue)); +.transaction-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; + width: 64px; } -/* Base button reset */ +/* Circular icon button (base for every action) */ .button-transaction { - padding: 0; - border-radius: 16px; - transition: all 0.3s ease-in-out; -} - -/* Small square buttons (Swap, Staking, NFT, Sign, Addr.) */ -.button-transaction-small { display: flex; - flex-direction: column; align-items: center; justify-content: center; - gap: 2px; - width: 58px; - height: 58px; - min-width: 58px; - min-height: 58px; - background-color: rgb(var(--color-gray)); - border: 1px solid rgba(var(--color-light-green), 0.2); + width: 56px; + height: 56px; + min-width: 56px; + min-height: 56px; + padding: 0; + border: none; + border-radius: 50%; + background-color: rgb(var(--color-white)); + box-shadow: var(--shadow-sm); + cursor: pointer; + transition: background-color 0.2s ease; @media screen and (min-width: 801px) { - width: 64px; - height: 64px; - min-width: 64px; - min-height: 64px; + width: 60px; + height: 60px; + min-width: 60px; + min-height: 60px; } } -.button-transaction-small svg { - width: 24px; - height: 24px; +.button-transaction:hover:not(:disabled), +.button-transaction:focus-visible { + background-color: rgb(var(--mojito-green)); } -.button-transaction-small .button-transaction-label { - font-size: 11px; - font-weight: 600; - color: rgb(var(--color-lightest-blue)); +.button-transaction:hover:not(:disabled) svg path, +.button-transaction:focus-visible svg path { + stroke: rgb(var(--color-white)); } -.button-transaction-small:hover, -.button-transaction-small:focus { - background-color: rgba(var(--color-light-green), 0.15); +.button-transaction:disabled { + opacity: 0.5; + cursor: not-allowed; } -.button-transaction-small svg path { - stroke: rgb(var(--color-lightest-blue)); +/* Icon inside the circle */ +.button-transaction svg { + width: 26px; + height: 26px; } -.button-transaction-small:hover svg path, -.button-transaction-small:focus svg path { - stroke: rgb(var(--color-black)); +.button-transaction svg path { + stroke: rgb(var(--mojito-green)); + transition: stroke 0.2s ease; } -/* Wide buttons (Send, Receive) */ -.button-transaction-wide { - display: flex; - align-items: center; - justify-content: center; - gap: 6px; - width: 100%; - height: 58px; - min-height: 58px; - border-radius: 16px; - font-size: 16px; - font-weight: 700; - - @media screen and (min-width: 801px) { - height: 64px; - min-height: 64px; - } -} - -/* Send button (green) */ +/* Primary "Send" — filled green circle with a white icon */ .button-transaction-up { - background-color: rgb(var(--color-green)); - color: rgb(var(--color-dark-teal)); + background-color: rgb(var(--color-main-green)); + box-shadow: 0 6px 16px rgba(var(--color-main-green), 0.35); } -.button-transaction-up:hover, -.button-transaction-up:focus { - background-color: rgb(var(--color-darker-green)); +.button-transaction-up:hover:not(:disabled), +.button-transaction-up:focus-visible { + background-color: rgb(var(--mojito-green)); } .button-transaction-up svg { @@ -92,61 +73,19 @@ } .button-transaction-up svg path { - stroke: rgb(var(--color-dark-teal)); - transition: stroke 0.3s ease-in-out; -} - -.button-transaction-up:hover svg path, -.button-transaction-up:focus svg path { - stroke: rgb(var(--color-green)); + stroke: rgb(var(--color-white)); } -/* Receive button (outlined/light) */ -.button-transaction-receive { - color: rgb(var(--color-black)); - background-color: rgb(var(--color-gray)); - border: 1px solid rgba(var(--color-light-green), 0.2); -} - -.button-transaction-receive:hover, -.button-transaction-receive:focus { - background-color: rgba(var(--color-light-green), 0.15); +/* Label below the circle */ +.button-transaction-label { + font-size: 13px; + font-weight: 600; color: rgb(var(--color-black)); -} - -.button-transaction-receive svg path { - stroke: rgb(var(--color-lightest-blue)); -} - -.button-transaction-receive:hover svg path, -.button-transaction-receive:focus svg path { - stroke: rgb(var(--color-black)); -} - -/* Label inside wide buttons */ -.button-transaction-wide .button-transaction-label { - font-size: 16px; - font-weight: 700; - color: inherit; -} - -.transaction-buttons-wrapper { - display: flex; -} - -.transaction-item { - display: flex; - width: fit-content; - flex-direction: column; - align-items: center; -} - -.transaction-item-wide { - flex: 1; - max-width: 150px; + text-align: center; + line-height: 1.2; } .icon-arrow { - width: 18px; - height: 18px; + width: 22px; + height: 22px; } diff --git a/src/components/containers/Wallet/TransactionButton.js b/src/components/containers/Wallet/TransactionButton.js index f54d814a..3449439a 100644 --- a/src/components/containers/Wallet/TransactionButton.js +++ b/src/components/containers/Wallet/TransactionButton.js @@ -10,34 +10,10 @@ import { Button } from '@BasicComponents' import './TransactionButton.css' const TransactionButton = ({ title, mode, onClick, disabled }) => { - const isWide = mode === 'up' || !mode - const getButtonStyles = () => { - if (mode === 'up') - return [ - 'button-transaction', - 'button-transaction-wide', - 'button-transaction-up', - ] - if (!mode) - return [ - 'button-transaction', - 'button-transaction-wide', - 'button-transaction-receive', - ] - if (mode === 'staking') - return [ - 'button-transaction', - 'button-transaction-small', - 'button-transaction-staking', - ] - if (mode === 'swap') - return [ - 'button-transaction', - 'button-transaction-small', - 'button-transaction-swap', - ] - return ['button-transaction', 'button-transaction-small'] + const classes = ['button-transaction'] + if (mode === 'up') classes.push('button-transaction-up') + return classes } const getIcon = () => { @@ -61,7 +37,7 @@ const TransactionButton = ({ title, mode, onClick, disabled }) => { return (
+ {title && ( + + {title} + + )}
) } From e20d9dbb9663a10260a632d6fd85ebfa361285cc Mon Sep 17 00:00:00 2001 From: owlsua Date: Mon, 27 Jul 2026 11:29:07 +0200 Subject: [PATCH 04/26] chore(wallet): remove Transaction.css left over from the CSS modules move --- .../containers/Wallet/Transaction.css | 152 ------------------ 1 file changed, 152 deletions(-) delete mode 100644 src/components/containers/Wallet/Transaction.css diff --git a/src/components/containers/Wallet/Transaction.css b/src/components/containers/Wallet/Transaction.css deleted file mode 100644 index 4090a957..00000000 --- a/src/components/containers/Wallet/Transaction.css +++ /dev/null @@ -1,152 +0,0 @@ -.transaction { - display: flex; - align-items: center; - padding: 12px 29px 12px 8px; - margin-bottom: 0; - border-radius: 35px; - background: rgb(var(--color-gray)); - border: 1px solid rgba(var(--color-light-green), 0.2); - word-break: break-all; - cursor: pointer; - position: relative; - max-height: 72px; - min-height: 72px; - box-sizing: border-box; -} - -.transaction-logo-type { - display: flex; - align-items: center; - justify-content: center; - width: 60px; - min-width: 60px; - height: 60px; - background: rgb(var(--color-dim-green)); - border-radius: 50%; - position: relative; - z-index: 5; -} - -.transaction-logo-type-info { - font-size: 1.4rem; - font-weight: 600; - color: #fff; - background: rgb(var(--color-dark-gray)); -} - -.transaction-logo-type.transaction-logo-type-widthdrawal { - font-size: 1.4rem; - font-weight: 600; - color: #fff; - background: rgb(var(--color-dark-gray)); -} - -.transaction-logo-type.transaction-logo-type-same { - position: absolute; - z-index: 10; - left: 22px; - background: rgb(var(--color-dark-gray)); -} - -.transaction-logo-type.transaction-logo-type-same .loop-icon { - transform: rotate(90deg); - width: 24px; - height: 24px; -} - -.transaction-logo-type.transaction-logo-type-same .loop-icon path { - stroke: rgb(var(--color-white)) !important; -} - -.transaction-detail { - margin-left: 16px; - flex-grow: 1; -} - -.transaction-logo-type.transaction-logo-out { - background: rgb(var(--color-dim-corail)); -} - -.transaction-logo-type.transaction-logo-type-stake { - background: rgb(var(--color-dim-blue)); -} - -.transaction-logo-type.transaction-logo-type-delegate { - background: rgb(var(--color-dim-purple)); -} - -.transaction-logo-type.transaction-logo-type-unconfirmed { - background: rgb(var(--color-dim-yellow)); -} - -.arrow-icon { - width: 18px; - height: 22px; -} - -.arrow-icon-stake { - width: 18px; - height: 22px; - margin-left: -3px; -} - -.stake-icon { - width: 20px; - height: 20px; -} - -.unconfirmed-icon { - width: 20px; - height: 24px; - color: #fff; -} - -.delegation-icon { - width: 22px; - height: 22px; - margin-left: 2px; - margin-top: -2px; - color: rgb(var(--color-black)); -} - -.delegation-icon svg { - color: rgb(var(--color-black)); -} - -.arrow-icon-out { - transform: rotate(180deg); -} - -.transaction-date-amount { - display: flex; - align-items: center; - justify-content: space-between; -} - -.transaction-id-info { - font-size: 0.95rem; - font-weight: 600; - margin-bottom: 2px; - word-break: break-word; -} - -.transaction-id { - font-size: 1.1rem; - font-weight: 600; - margin-bottom: 2px; - word-break: break-all; -} - -.transaction-date { - font-size: 0.85rem; - font-weight: 400; -} - -.transaction-date span { - font-weight: 600; -} - -.transaction:hover { - transform: scale(1.02); - border: 1px solid rgba(var(--color-light-green), 0.5); -} From bb45711c4425c0dd31c46c9214901c198554c1a0 Mon Sep 17 00:00:00 2001 From: owlsua Date: Mon, 27 Jul 2026 11:29:20 +0200 Subject: [PATCH 05/26] fix(address-list): scroll the whole table instead of the tbody The table body was a block element with fixed percentage columns, which clipped long addresses in a narrow panel. It is now an ordinary auto-layout table inside a scroll container with a sticky header, so columns size to their content and overflow scrolls in both axes. --- .../composed/AddressList/AddressList.js | 76 ++++++++++--------- .../AddressList/AddressList.module.css | 51 ++++++------- .../AddressList/AddressListItem.module.css | 14 ++-- 3 files changed, 71 insertions(+), 70 deletions(-) diff --git a/src/components/composed/AddressList/AddressList.js b/src/components/composed/AddressList/AddressList.js index 87ea6f1b..88248efd 100644 --- a/src/components/composed/AddressList/AddressList.js +++ b/src/components/composed/AddressList/AddressList.js @@ -66,45 +66,47 @@ const AddressList = ({ search }) => {
) : ( - - - - - - - - - - - {requiredAddresses && requiredAddresses.length > 0 ? ( - filteredAddresses.map((address, index) => ( - - )) - ) : ( +
+
- ADDRESS - - STATUS - - BALANCE -
+ - + + + + - )} - -
- No addresses found - + ADDRESS + + STATUS + + BALANCE +
+ + + {requiredAddresses && requiredAddresses.length > 0 ? ( + filteredAddresses.map((address, index) => ( + + )) + ) : ( + + + No addresses found + + + )} + + + )} ) diff --git a/src/components/composed/AddressList/AddressList.module.css b/src/components/composed/AddressList/AddressList.module.css index 696fcc1c..1cceafeb 100644 --- a/src/components/composed/AddressList/AddressList.module.css +++ b/src/components/composed/AddressList/AddressList.module.css @@ -8,31 +8,22 @@ flex-direction: column; } -.table { - width: 100%; - display: block; -} - -.table thead { - display: block; - width: 100%; -} - -.table tbody { - display: block; - overflow-y: auto; - width: 100%; - height: 93%; +.tableScroll { + flex-grow: 1; + min-height: 0; + overflow: auto; } -.table thead tr, -.table tbody tr { - display: table; +.table { width: 100%; - table-layout: fixed; + border-spacing: 0; } .colHeader { + position: sticky; + top: 0; + z-index: 1; + background: rgb(var(--color-white)); text-align: left; padding: 14px 20px; font-size: 11px; @@ -43,21 +34,24 @@ user-select: none; } -/* Column widths */ +/* Column widths — auto layout: columns grow to fit content, + so nothing is clipped and horizontal scroll reveals everything */ .colAddress { - width: 45%; + min-width: 180px; } .colStatus { - width: 15%; + width: 1%; + white-space: nowrap; } .colBalance { - width: 30%; + min-width: 150px; } .colAction { - width: 10%; + width: 1%; + white-space: nowrap; } .loadingWrapper { @@ -73,19 +67,20 @@ color: rgba(var(--color-black), 0.4); } -.table tbody::-webkit-scrollbar { +.tableScroll::-webkit-scrollbar { width: 4px; + height: 4px; } -.table tbody::-webkit-scrollbar-track { +.tableScroll::-webkit-scrollbar-track { background: transparent; } -.table tbody::-webkit-scrollbar-thumb { +.tableScroll::-webkit-scrollbar-thumb { background: rgba(var(--color-black), 0.1); border-radius: 2px; } -.table tbody::-webkit-scrollbar-thumb:hover { +.tableScroll::-webkit-scrollbar-thumb:hover { background: rgba(var(--color-black), 0.2); } diff --git a/src/components/composed/AddressList/AddressListItem.module.css b/src/components/composed/AddressList/AddressListItem.module.css index 78c969b3..da282676 100644 --- a/src/components/composed/AddressList/AddressListItem.module.css +++ b/src/components/composed/AddressList/AddressListItem.module.css @@ -27,6 +27,7 @@ font-size: 14px; color: rgb(var(--color-black)); text-decoration: none; + white-space: nowrap; transition: color 0.15s ease; } @@ -58,6 +59,7 @@ .balanceAmount { font-size: var(--default-font-size); color: rgb(var(--color-black)); + white-space: nowrap; } .balanceAmount strong { @@ -194,21 +196,23 @@ font-size: 11px; } -/* Column widths */ +/* Column widths — must match AddressList thead (auto table layout) */ .colAddress { - width: 45%; + min-width: 180px; } .colStatus { - width: 15%; + width: 1%; + white-space: nowrap; } .colBalance { - width: 30%; + min-width: 150px; } .colAction { - width: 10%; + width: 1%; + white-space: nowrap; } @keyframes tokensSlideDown { From 85868025fe0e4456ed6f3c4d67391cf84bccaa15 Mon Sep 17 00:00:00 2001 From: owlsua Date: Mon, 27 Jul 2026 11:29:38 +0200 Subject: [PATCH 06/26] style: adapt the layout to the narrow side panel width Below the 801px extended-view breakpoint the page height is now driven by content and scrolls inside .App, and the dashboard, balance, delegation, transaction and create/restore screens stack, shrink or hide their widest parts instead of overflowing a fixed-size popup. --- src/assets/styles/index.css | 28 ++++++++++++ .../basic/PageWrapper/PageWrapper.module.css | 2 +- src/components/composed/Balance/Balance.css | 12 ++++- .../composed/InputList/InputsList.module.css | 4 ++ .../InputList/InputsListItem.module.css | 1 + .../composed/PriceChart/PriceChart.css | 5 +++ .../CreateAccount/CreateAccount.module.css | 38 ++++++++++++++++ .../containers/Dashboard/CryptoList.css | 45 ++++++++++++++++++- .../Dashboard/CryptoSharesChart.css | 24 ++++++++++ .../containers/Dashboard/Statistics.css | 37 +++++++++++++++ .../RestoreAccountJson/FileUpload.module.css | 4 ++ .../RestoreAccountMnemonic.css | 1 + .../Wallet/Delegation/Delegation.module.css | 20 +++++++++ .../containers/Wallet/ShowAddress.css | 2 + .../containers/Wallet/Transaction.module.css | 12 +++++ .../containers/Wallet/TransactionsList.css | 1 - .../layouts/VerticalGroup/VerticalGroup.css | 1 + .../CreateRestore/CreateRestore.module.css | 15 ++++--- src/pages/Dashboard/Dashboard.css | 8 +++- src/pages/Settings/Settings.module.css | 6 +-- .../SignInternalTransaction.module.css | 4 ++ src/pages/Wallet/Wallet.css | 2 + 22 files changed, 255 insertions(+), 17 deletions(-) diff --git a/src/assets/styles/index.css b/src/assets/styles/index.css index bca69fb3..5b980096 100644 --- a/src/assets/styles/index.css +++ b/src/assets/styles/index.css @@ -94,3 +94,31 @@ body { margin-left: auto; margin-right: auto; } + +/* Narrow side panel layout: fluid width down to a 320px minimum. + Anything below 800px is the side panel; the extended view is >=801px, + so this pairs exactly with the existing min-width: 801px breakpoint. */ +@media screen and (max-width: 800px) { + body { + width: 100%; + min-width: 400px; + height: 100vh; + /* Let page content grow with its height and scroll inside .App */ + --page-content-height: auto; + } + + #root { + height: 100%; + } + + .app-content { + height: 100%; + } + + .App { + flex: 1; + height: auto; + min-height: 0; + overflow-y: auto; + } +} diff --git a/src/components/basic/PageWrapper/PageWrapper.module.css b/src/components/basic/PageWrapper/PageWrapper.module.css index b70e9f3c..7aa2e459 100644 --- a/src/components/basic/PageWrapper/PageWrapper.module.css +++ b/src/components/basic/PageWrapper/PageWrapper.module.css @@ -2,7 +2,7 @@ position: relative; display: flex; flex-direction: column; - height: 530px; + height: var(--page-content-height, 530px); padding: 1rem; flex: 1; diff --git a/src/components/composed/Balance/Balance.css b/src/components/composed/Balance/Balance.css index 7b8a0465..2c036f45 100644 --- a/src/components/composed/Balance/Balance.css +++ b/src/components/composed/Balance/Balance.css @@ -8,12 +8,17 @@ padding: 16px 20px; min-height: max-content; + @media screen and (max-width: 560px) { + flex-direction: column; + align-items: flex-start; + justify-content: flex-start; + } + @media screen and (min-width: 801px) { flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: 20px 24px; - margin: 0 0 20px 0; border-radius: 20px; } } @@ -85,6 +90,11 @@ margin-top: 12px; width: 50%; gap: 10px; + + @media screen and (max-width: 560px) { + width: 100%; + } + @media screen and (min-width: 801px) { width: 100%; } diff --git a/src/components/composed/InputList/InputsList.module.css b/src/components/composed/InputList/InputsList.module.css index d6faf5af..ecad7d94 100644 --- a/src/components/composed/InputList/InputsList.module.css +++ b/src/components/composed/InputList/InputsList.module.css @@ -3,4 +3,8 @@ justify-content: space-around; flex-wrap: wrap; overflow-y: auto; + + @media screen and (max-width: 800px) { + max-height: 60vh; + } } diff --git a/src/components/composed/InputList/InputsListItem.module.css b/src/components/composed/InputList/InputsListItem.module.css index 30e1e3fd..8542154a 100644 --- a/src/components/composed/InputList/InputsListItem.module.css +++ b/src/components/composed/InputList/InputsListItem.module.css @@ -1,6 +1,7 @@ .listItem { position: relative; margin-bottom: 9px; + max-height: fit-content; } .number { diff --git a/src/components/composed/PriceChart/PriceChart.css b/src/components/composed/PriceChart/PriceChart.css index e7388a96..eeef1b1e 100644 --- a/src/components/composed/PriceChart/PriceChart.css +++ b/src/components/composed/PriceChart/PriceChart.css @@ -3,6 +3,11 @@ flex-direction: column; width: 120px; justify-content: center; + + /* Below 460px hide the per-item stats (24h change + chart) entirely */ + @media screen and (max-width: 459px) { + display: none; + } } .crypto-stats .crypto-stats-numbers { diff --git a/src/components/containers/CreateAccount/CreateAccount.module.css b/src/components/containers/CreateAccount/CreateAccount.module.css index e120cee7..1beb56b6 100644 --- a/src/components/containers/CreateAccount/CreateAccount.module.css +++ b/src/components/containers/CreateAccount/CreateAccount.module.css @@ -15,6 +15,7 @@ .itemWrapper { width: 400px; + max-width: 100%; } .setAccountInput { @@ -34,3 +35,40 @@ font-size: 20px; margin-bottom: 20px; } + +/* Narrow side panel: make the seed-phrase step fill the screen and pin the + action button to the bottom, like the "Choose an account" page. + Structure: form.setAccountFormWords > div.v-group > ul.inputsList + div.centeredLayout */ +@media screen and (max-width: 800px) { + .setAccountContainer { + flex: 1; + min-height: 0; + width: 100%; + } + + .setAccountFormWords { + display: flex; + flex-direction: column; + flex: 1; + min-height: 0; + margin-top: 1.5rem; + } + + .setAccountFormWords > div { + flex: 1; + min-height: 0; + width: 100%; + } + + .setAccountFormWords > div > ul { + flex: 1; + min-height: 0; + max-height: none; + width: 100%; + overflow-y: auto; + } + + .setAccountFormWords > div > div { + margin-top: auto; + } +} diff --git a/src/components/containers/Dashboard/CryptoList.css b/src/components/containers/Dashboard/CryptoList.css index cbc24e57..c262f171 100644 --- a/src/components/containers/Dashboard/CryptoList.css +++ b/src/components/containers/Dashboard/CryptoList.css @@ -24,7 +24,6 @@ display: flex; flex-direction: column; gap: 0.4rem; - height: 240px; overflow-y: auto; overflow-x: hidden; padding: 7px; @@ -49,6 +48,10 @@ max-height: 72px; min-height: 72px; box-sizing: border-box; + + @media screen and (max-width: 800px) { + padding: 8px 14px 8px 8px; + } } .logo-wrapper { @@ -65,11 +68,23 @@ justify-content: center; width: 393px; margin: 0 0 0 1rem; + + /* Narrow side panel: fill the row instead of a fixed width */ + @media screen and (max-width: 800px) { + width: auto; + flex: 1; + min-width: 0; + margin-left: 0.6rem; + } } .crypto-item .name-values h5 { font-size: 1.2rem; font-weight: bold; + + @media screen and (max-width: 800px) { + font-size: 1rem; + } } .crypto-item.add-item h5 { @@ -116,6 +131,10 @@ .crypto-item .name-values .values dt { font-weight: thin; margin: 0 1rem; + + @media screen and (max-width: 800px) { + margin: 0 0.4rem; + } } .crypto-item .name-values .values dd { @@ -127,12 +146,23 @@ .crypto-item svg { height: 60px; width: 60px; + + @media screen and (max-width: 800px) { + height: 44px; + width: 44px; + } } .crypto-item .logo-round { height: 60px; width: 60px; min-width: 60px; + + @media screen and (max-width: 800px) { + height: 44px; + width: 44px; + min-width: 44px; + } } .crypto-item .token-logo-round { @@ -141,6 +171,14 @@ min-width: 60px; min-height: 60px; font-size: 18px; + + @media screen and (max-width: 800px) { + height: 44px; + width: 44px; + min-width: 44px; + min-height: 44px; + font-size: 14px; + } } .crypto-item .token-logo-round img { @@ -156,6 +194,11 @@ border-radius: 50%; height: 60px; width: 60px; + + @media screen and (max-width: 800px) { + height: 44px; + width: 44px; + } } .crypto-item .connect-logo img { diff --git a/src/components/containers/Dashboard/CryptoSharesChart.css b/src/components/containers/Dashboard/CryptoSharesChart.css index e9abd733..4f365fa9 100644 --- a/src/components/containers/Dashboard/CryptoSharesChart.css +++ b/src/components/containers/Dashboard/CryptoSharesChart.css @@ -8,6 +8,14 @@ width: 325px; height: 168px; overflow: visible; + + /* Narrow side panel: let the scalable chart shrink to the panel width */ + @media screen and (max-width: 800px) { + width: 100%; + max-width: 400px; + height: auto; + aspect-ratio: 210 / 110; + } } .portifolio-chart h2 { @@ -19,6 +27,10 @@ text-align: center; font-weight: bold; font-size: 1.875rem; + + @media screen and (max-width: 800px) { + font-size: 1.4rem; + } } .portifolio-chart h2 em { @@ -37,6 +49,10 @@ font-size: 3rem; font-weight: 800; line-height: 1; + + @media screen and (max-width: 800px) { + font-size: 2rem; + } } .balance-symbol { @@ -49,10 +65,18 @@ .balance-integer { font-size: 4.2rem; font-weight: 800; + + @media screen and (max-width: 800px) { + font-size: 2.6rem; + } } .balance-decimal { font-size: 4.2rem; font-weight: 800; opacity: 0.25; + + @media screen and (max-width: 800px) { + font-size: 2.6rem; + } } diff --git a/src/components/containers/Dashboard/Statistics.css b/src/components/containers/Dashboard/Statistics.css index 02bb6ba9..fc6dab28 100644 --- a/src/components/containers/Dashboard/Statistics.css +++ b/src/components/containers/Dashboard/Statistics.css @@ -9,6 +9,10 @@ justify-content: flex-end; height: 100%; width: 100%; + + @media screen and (max-width: 800px) { + justify-content: center; + } } .stats-list ul { @@ -21,6 +25,12 @@ height: 100%; width: 100%; position: relative; + + /* Narrow side panel: place the stats side by side under the chart */ + @media screen and (max-width: 800px) { + flex-direction: row; + justify-content: center; + } } .stats-list ul::before { @@ -32,6 +42,10 @@ width: 1px; background: rgb(var(--color-light-gray)); opacity: 0.5; + + @media screen and (max-width: 800px) { + display: none; + } } .stat-item { @@ -45,6 +59,12 @@ flex: 1; justify-content: center; position: relative; + + @media screen and (max-width: 800px) { + padding: 4px 16px; + text-align: center; + align-items: center; + } } .stat-item + .stat-item::before { @@ -56,6 +76,16 @@ height: 1px; background: rgb(var(--color-light-gray)); opacity: 0.5; + + /* Turn the horizontal separator into a vertical one for the row layout */ + @media screen and (max-width: 800px) { + top: 18%; + bottom: 18%; + left: 0; + right: auto; + height: auto; + width: 1px; + } } .stat-item.stats-positive { @@ -77,9 +107,16 @@ } .stat-item dt { + display: flex; + align-items: baseline; + gap: 4px; font-weight: 700; font-size: 2.7rem; line-height: 1.1; + + @media screen and (max-width: 800px) { + font-size: 1.6rem; + } } .stats-positive dt { diff --git a/src/components/containers/RestoreAccount/RestoreAccountJson/FileUpload.module.css b/src/components/containers/RestoreAccount/RestoreAccountJson/FileUpload.module.css index 51deec01..ff068c9e 100644 --- a/src/components/containers/RestoreAccount/RestoreAccountJson/FileUpload.module.css +++ b/src/components/containers/RestoreAccount/RestoreAccountJson/FileUpload.module.css @@ -29,6 +29,10 @@ transition: border-color 0.2s, background 0.2s; + + @media screen and (max-width: 440px) { + min-width: 100%; + } } .dropzone:hover { diff --git a/src/components/containers/RestoreAccount/RestoreAccountMnemonic/RestoreAccountMnemonic.css b/src/components/containers/RestoreAccount/RestoreAccountMnemonic/RestoreAccountMnemonic.css index f849c00d..f0ce4329 100644 --- a/src/components/containers/RestoreAccount/RestoreAccountMnemonic/RestoreAccountMnemonic.css +++ b/src/components/containers/RestoreAccount/RestoreAccountMnemonic/RestoreAccountMnemonic.css @@ -21,6 +21,7 @@ .itemWrapper { width: 400px; + max-width: 100%; } .account-input { diff --git a/src/components/containers/Wallet/Delegation/Delegation.module.css b/src/components/containers/Wallet/Delegation/Delegation.module.css index f7b49b84..f9230dcd 100644 --- a/src/components/containers/Wallet/Delegation/Delegation.module.css +++ b/src/components/containers/Wallet/Delegation/Delegation.module.css @@ -139,3 +139,23 @@ width: 95%; } } + +/* Stacked layout: info row on top, full-width action buttons below */ +@media screen and (max-width: 650px) { + .card { + flex-wrap: wrap; + row-gap: 0.85rem; + border-radius: 24px; + } + + .actions { + flex-basis: 100%; + width: 100%; + } + + .actionButton { + flex: 1; + padding: 0.75rem 1rem; + font-size: 0.9rem; + } +} diff --git a/src/components/containers/Wallet/ShowAddress.css b/src/components/containers/Wallet/ShowAddress.css index c1f8b326..82f20dd1 100644 --- a/src/components/containers/Wallet/ShowAddress.css +++ b/src/components/containers/Wallet/ShowAddress.css @@ -7,6 +7,8 @@ .address { font-size: 1.25rem; line-height: 1.75rem; + word-wrap: break-word; + word-break: break-word; } .press:active { diff --git a/src/components/containers/Wallet/Transaction.module.css b/src/components/containers/Wallet/Transaction.module.css index 580e284e..36aafd32 100644 --- a/src/components/containers/Wallet/Transaction.module.css +++ b/src/components/containers/Wallet/Transaction.module.css @@ -13,6 +13,11 @@ max-height: 72px; min-height: 72px; box-sizing: border-box; + + @media screen and (max-width: 560px) { + min-height: max-content; + max-height: max-content; + } } .logoType { @@ -122,6 +127,13 @@ display: flex; align-items: center; justify-content: space-between; + gap: 5px; + + @media screen and (max-width: 560px) { + flex-direction: column; + align-items: flex-start; + justify-content: flex-start; + } } .idInfo { diff --git a/src/components/containers/Wallet/TransactionsList.css b/src/components/containers/Wallet/TransactionsList.css index ec852ffb..a3f73a73 100644 --- a/src/components/containers/Wallet/TransactionsList.css +++ b/src/components/containers/Wallet/TransactionsList.css @@ -2,7 +2,6 @@ display: flex; flex-direction: column; gap: 0.4rem; - height: 19rem; overflow: auto; padding: 7px; animation: fadeInList 0.3s ease-in-out; diff --git a/src/components/layouts/VerticalGroup/VerticalGroup.css b/src/components/layouts/VerticalGroup/VerticalGroup.css index 8a346c5d..11ceda40 100644 --- a/src/components/layouts/VerticalGroup/VerticalGroup.css +++ b/src/components/layouts/VerticalGroup/VerticalGroup.css @@ -3,6 +3,7 @@ display: flex; flex-direction: column; gap: 0.7rem; + max-width: 100%; @media screen and (min-width: 801px) { max-height: 100%; diff --git a/src/pages/CreateRestore/CreateRestore.module.css b/src/pages/CreateRestore/CreateRestore.module.css index 88376cfe..fa93908a 100644 --- a/src/pages/CreateRestore/CreateRestore.module.css +++ b/src/pages/CreateRestore/CreateRestore.module.css @@ -6,6 +6,7 @@ display: flex; flex-direction: column; align-items: center; + justify-content: center; height: 100%; text-align: center; } @@ -15,17 +16,17 @@ height: 80px; border-radius: 24px; padding: 16px; - margin: 3% 0 10px 0; + margin: 0 0 10px 0; background: linear-gradient(135deg, #e6f8f0, #fff); box-shadow: rgba(30, 187, 129, 0.18) 0px 10px 30px; border: 1px solid #e8ebf0; @media screen and (min-width: 801px) { - width: 110px; - height: 110px; - padding: 22px; - margin: 7% 0 15px 0; - border-radius: 32px; + width: 90px; + height: 90px; + padding: 18px; + margin: 0 0 15px 0; + border-radius: 28px; } } @@ -57,7 +58,7 @@ margin: 8px 0px 10px; @media screen and (min-width: 801px) { - font-size: 30px; + font-size: 28px; margin: 0 0 12px 0; } } diff --git a/src/pages/Dashboard/Dashboard.css b/src/pages/Dashboard/Dashboard.css index 6634648f..fbca453b 100644 --- a/src/pages/Dashboard/Dashboard.css +++ b/src/pages/Dashboard/Dashboard.css @@ -5,9 +5,15 @@ justify-content: center; align-items: center; gap: 55px; - min-height: 224px; + min-height: max-content; @media screen and (min-width: 801px) { margin-bottom: 2.75rem; } + + @media screen and (max-width: 800px) { + flex-direction: column; + gap: 1rem; + margin-bottom: 1rem; + } } diff --git a/src/pages/Settings/Settings.module.css b/src/pages/Settings/Settings.module.css index 4ea74956..ccd11aad 100644 --- a/src/pages/Settings/Settings.module.css +++ b/src/pages/Settings/Settings.module.css @@ -1,16 +1,12 @@ .wrapper { margin-top: 30px; - max-height: 435px; + max-height: 100%; overflow: auto; display: flex; flex-direction: column; gap: 24px; padding: 0 5px; animation: fadeIn 0.4s ease-in-out; - - @media screen and (min-width: 801px) { - max-height: 100%; - } } @keyframes fadeIn { diff --git a/src/pages/SignInternalTransaction/SignInternalTransaction.module.css b/src/pages/SignInternalTransaction/SignInternalTransaction.module.css index 6f9f7851..c63fd6b9 100644 --- a/src/pages/SignInternalTransaction/SignInternalTransaction.module.css +++ b/src/pages/SignInternalTransaction/SignInternalTransaction.module.css @@ -133,3 +133,7 @@ .buttonSignTransaction { width: 100%; } + +.result-title { + word-break: break-all; +} diff --git a/src/pages/Wallet/Wallet.css b/src/pages/Wallet/Wallet.css index 4c588135..5cd1ffce 100644 --- a/src/pages/Wallet/Wallet.css +++ b/src/pages/Wallet/Wallet.css @@ -21,7 +21,9 @@ align-items: flex-end; max-width: 100%; min-height: max-content; + margin: 15px 0 20px; gap: 6px; + flex-wrap: wrap; } .balance-transactions-wrapper { From 6dd379bf2f901f249992ce6d0dc167cf89143d29 Mon Sep 17 00:00:00 2001 From: owlsua Date: Fri, 31 Jul 2026 15:49:12 +0200 Subject: [PATCH 07/26] fix(sidepanel): stop applying the standalone window layout in a wide panel The extended view moved to an html.extended-view class, but body, .App and PageWrapper still sized themselves off a min-width: 801px media query. A side panel dragged past 800px therefore got height: auto, width: 111vh and rounded corners, so the card no longer filled the panel. Panel sizing is now the default at any width and the standalone window styles key off html.extended-view. PageWrapper takes its height from --page-content-height instead of a width breakpoint. --- src/assets/styles/index.css | 46 ++++++------------- .../basic/PageWrapper/PageWrapper.module.css | 4 +- 2 files changed, 17 insertions(+), 33 deletions(-) diff --git a/src/assets/styles/index.css b/src/assets/styles/index.css index 5b980096..0c3ef11f 100644 --- a/src/assets/styles/index.css +++ b/src/assets/styles/index.css @@ -47,14 +47,19 @@ html { body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - height: 600px; - width: 800px; + height: 100vh; + width: 100%; + min-width: 400px; background: #f0f2f5; + --page-content-height: auto; +} +html.extended-view body { @media screen and (min-width: 801px) { height: auto; border-radius: 30px; width: 111vh; + --page-content-height: 93%; } } @@ -79,10 +84,17 @@ body { position: relative; display: flex; flex-direction: column; - height: 530px; + flex: 1; + height: auto; + min-height: 0; + overflow-y: auto; +} +html.extended-view .App { @media screen and (min-width: 801px) { + flex: none; height: 93%; + overflow-y: hidden; } } @@ -94,31 +106,3 @@ body { margin-left: auto; margin-right: auto; } - -/* Narrow side panel layout: fluid width down to a 320px minimum. - Anything below 800px is the side panel; the extended view is >=801px, - so this pairs exactly with the existing min-width: 801px breakpoint. */ -@media screen and (max-width: 800px) { - body { - width: 100%; - min-width: 400px; - height: 100vh; - /* Let page content grow with its height and scroll inside .App */ - --page-content-height: auto; - } - - #root { - height: 100%; - } - - .app-content { - height: 100%; - } - - .App { - flex: 1; - height: auto; - min-height: 0; - overflow-y: auto; - } -} diff --git a/src/components/basic/PageWrapper/PageWrapper.module.css b/src/components/basic/PageWrapper/PageWrapper.module.css index 7aa2e459..69c099ea 100644 --- a/src/components/basic/PageWrapper/PageWrapper.module.css +++ b/src/components/basic/PageWrapper/PageWrapper.module.css @@ -2,12 +2,12 @@ position: relative; display: flex; flex-direction: column; - height: var(--page-content-height, 530px); + height: var(--page-content-height, auto); padding: 1rem; flex: 1; + min-height: 0; @media screen and (min-width: 801px) { - height: 93%; padding: 2rem; } } From 7b4544398aa74472d934645cfcbf668aec5e7ce0 Mon Sep 17 00:00:00 2001 From: owlsua Date: Fri, 31 Jul 2026 15:49:32 +0200 Subject: [PATCH 08/26] feat(styles): add font size and spacing design tokens --font-size-xs..5xl and --space-3xs..5xl, with a max-width: 500px block that scales both scales down for the narrow side panel. --- src/assets/styles/constants.css | 48 +++++++++++++++++++++++++++++++++ 1 file changed, 48 insertions(+) diff --git a/src/assets/styles/constants.css b/src/assets/styles/constants.css index 25d16e62..be9b4071 100644 --- a/src/assets/styles/constants.css +++ b/src/assets/styles/constants.css @@ -62,6 +62,54 @@ --border-radius-input: 16px; --round-size-big: 99px; --default-font-size: 14px; + + --font-size-xs: 11px; + --font-size-sm: 13px; + --font-size-md: 14px; + --font-size-lg: 16px; + --font-size-xl: 18px; + --font-size-2xl: 20px; + --font-size-3xl: 22px; + --font-size-4xl: 24px; + --font-size-5xl: 32px; + + --space-3xs: 4px; + --space-2xs: 6px; + --space-xs: 8px; + --space-sm: 10px; + --space-md: 12px; + --space-lg: 16px; + --space-xl: 20px; + --space-2xl: 24px; + --space-3xl: 28px; + --space-4xl: 32px; + --space-5xl: 36px; +} + +@media screen and (max-width: 500px) { + :root { + --font-size-xs: 10px; + --font-size-sm: 12px; + --font-size-md: 13px; + --font-size-lg: 14px; + --font-size-xl: 16px; + --font-size-2xl: 17px; + --font-size-3xl: 19px; + --font-size-4xl: 20px; + --font-size-5xl: 26px; + + --space-3xs: 3px; + --space-2xs: 4px; + --space-xs: 6px; + --space-sm: 8px; + --space-md: 10px; + --space-lg: 12px; + --space-xl: 14px; + --space-2xl: 16px; + --space-3xl: 20px; + --space-4xl: 24px; + --space-5xl: 28px; + } } @keyframes moveArrowUpRight { From 1b266d26c879df88157486f2ae106432624be105 Mon Sep 17 00:00:00 2001 From: owlsua Date: Fri, 31 Jul 2026 15:49:49 +0200 Subject: [PATCH 09/26] refactor(swap): move font sizes and paddings to design tokens The swap page now sizes text and spacing from --font-size-* and --space-*, so everything shrinks below 500px without per-component breakpoints. Values that did not sit on the scale were rounded to the nearest step (at most 2px). --- .../composed/ManualSwap/ManualSwap.css | 10 +++--- .../SwapInterface/SelectTokenSwap.module.css | 6 ++-- .../SwapInterface/SwapInterface.module.css | 33 ++++++++++--------- .../SwapInterface/SwapPopupContent.module.css | 18 +++++----- src/pages/OrderSwap/OrderSwap.module.css | 10 +++--- 5 files changed, 39 insertions(+), 38 deletions(-) diff --git a/src/components/composed/ManualSwap/ManualSwap.css b/src/components/composed/ManualSwap/ManualSwap.css index d6e916ff..feeb8a25 100644 --- a/src/components/composed/ManualSwap/ManualSwap.css +++ b/src/components/composed/ManualSwap/ManualSwap.css @@ -4,24 +4,24 @@ } .order-swap-title { - font-size: 1.5rem; + font-size: var(--font-size-4xl); font-weight: bold; - margin-bottom: 1rem; + margin-bottom: var(--space-lg); @media screen and (min-width: 801px) { - margin-bottom: 2rem; + margin-bottom: var(--space-4xl); } } .order-swap-form { display: flex; flex-direction: column; - gap: 1rem; + gap: var(--space-lg); width: 100%; } .swap-order-input { - padding: 1rem; + padding: var(--space-lg); } .swap-order-loading { diff --git a/src/components/composed/SwapInterface/SelectTokenSwap.module.css b/src/components/composed/SwapInterface/SelectTokenSwap.module.css index 916c0692..1373225d 100644 --- a/src/components/composed/SwapInterface/SelectTokenSwap.module.css +++ b/src/components/composed/SwapInterface/SelectTokenSwap.module.css @@ -6,16 +6,16 @@ .tokenSelect { display: flex; align-items: center; - gap: 10px; + gap: var(--space-sm); appearance: none; -webkit-appearance: none; -moz-appearance: none; position: relative; width: 100%; font-weight: 700; - font-size: 18px; + font-size: var(--font-size-xl); border-radius: 21px; - padding: 8px 30px 8px 13px; + padding: var(--space-xs) var(--space-3xl) var(--space-xs) var(--space-md); border: 1px solid rgba(var(--color-black), 0.06); background: rgb(var(--color-white)); color: rgb(var(--color-black)); diff --git a/src/components/composed/SwapInterface/SwapInterface.module.css b/src/components/composed/SwapInterface/SwapInterface.module.css index 7dd6d42d..bde6675e 100644 --- a/src/components/composed/SwapInterface/SwapInterface.module.css +++ b/src/components/composed/SwapInterface/SwapInterface.module.css @@ -4,46 +4,46 @@ width: 100%; background: rgb(var(--color-white)); border-radius: 16px; - gap: 4px; + gap: var(--space-3xs); min-height: max-content; - padding: 20px 24px; + padding: var(--space-xl) var(--space-2xl); color: rgb(var(--color-black)); box-shadow: none; } @media screen and (min-width: 801px) { .form { - gap: 12px; - padding: 28px 36px; + gap: var(--space-md); + padding: var(--space-3xl) var(--space-5xl); } } .row { display: flex; flex-direction: column; - gap: 10px; + gap: var(--space-sm); } .label { - font-size: 13px; + font-size: var(--font-size-sm); font-weight: 600; letter-spacing: 0.8px; color: rgba(var(--color-light-green), 1); text-transform: uppercase; - padding-left: 5px; + padding-left: var(--space-3xs); } .inputsWrapper { display: flex; align-items: center; - gap: 8px; + gap: var(--space-xs); } .amountInput { width: 32%; height: 100%; - padding: 12px 16px; - font-size: 20px; + padding: var(--space-md) var(--space-lg); + font-size: var(--font-size-2xl); font-weight: 700; border-radius: 36px; border: 1px solid rgba(var(--color-black), 0.08); @@ -73,14 +73,14 @@ .balance { color: rgba(var(--color-black), 0.35); - padding-left: 18px; - font-size: 14px; + padding-left: var(--space-lg); + font-size: var(--font-size-md); } .arrowRow { display: flex; justify-content: center; - padding: 4px 0; + padding: var(--space-3xs) 0; } .arrowIcon { @@ -113,13 +113,13 @@ /* Find orders button */ .findButton { width: 32%; - height: 100%; + height: 50px; font-weight: 600; - font-size: 16px; + font-size: var(--font-size-lg); display: flex; align-items: center; justify-content: center; - gap: 8px; + gap: var(--space-xs); border-radius: 36px; } @@ -130,6 +130,7 @@ .findOrderIcon { width: 18px; height: 18px; + min-width: 18px; max-width: 18px; max-height: 18px; } diff --git a/src/components/composed/SwapInterface/SwapPopupContent.module.css b/src/components/composed/SwapInterface/SwapPopupContent.module.css index 6b32bc1e..7122ebe7 100644 --- a/src/components/composed/SwapInterface/SwapPopupContent.module.css +++ b/src/components/composed/SwapInterface/SwapPopupContent.module.css @@ -1,26 +1,26 @@ .popup { display: flex; flex-direction: column; - gap: 10px; + gap: var(--space-sm); width: 100%; height: 88%; } .popup h2 { - font-size: 1.2rem; + font-size: var(--font-size-2xl); font-weight: bold; min-height: max-content; } .searchInput { width: 100%; - padding: 10px 16px; + padding: var(--space-sm) var(--space-lg); border-radius: 36px; border: 1px solid rgba(var(--color-black), 0.1); background: transparent; color: rgb(var(--color-black)); - font-size: 16px; - margin-bottom: 10px; + font-size: var(--font-size-lg); + margin-bottom: var(--space-sm); } .tokenList { @@ -28,15 +28,15 @@ flex-direction: column; overflow-y: auto; flex-grow: 1; - padding: 7px; - gap: 5px; + padding: var(--space-2xs); + gap: var(--space-3xs); } .tokenItem { display: flex; align-items: center; - padding: 10px 15px; - gap: 10px; + padding: var(--space-sm) var(--space-lg); + gap: var(--space-sm); border-radius: 10px; background: rgb(var(--color-gray)); border: 1px solid rgba(var(--color-light-green), 0.2); diff --git a/src/pages/OrderSwap/OrderSwap.module.css b/src/pages/OrderSwap/OrderSwap.module.css index fcf85f16..5fc2ad33 100644 --- a/src/pages/OrderSwap/OrderSwap.module.css +++ b/src/pages/OrderSwap/OrderSwap.module.css @@ -6,19 +6,19 @@ } .title { - font-size: 1.4rem; + font-size: var(--font-size-3xl); font-weight: bold; } .modeToggle { display: flex; align-items: center; - gap: 10px; + gap: var(--space-sm); } .modeLabel { font-weight: 500; - font-size: 14px; + font-size: var(--font-size-md); color: rgba(var(--color-black), 0.6); } @@ -27,13 +27,13 @@ width: 100%; flex-direction: column; align-items: center; - gap: 5px; + gap: var(--space-3xs); flex-grow: 1; min-height: 0; } @media screen and (min-width: 801px) { .content { - gap: 15px; + gap: var(--space-lg); } } From 675cf2bd266cd0d180eb8cc3b44d84b251106407 Mon Sep 17 00:00:00 2001 From: owlsua Date: Fri, 31 Jul 2026 15:50:06 +0200 Subject: [PATCH 10/26] refactor(staking): move font sizes and paddings to design tokens Same conversion as the swap page for the staking header, delegation cards, list, skeleton and delegation details. --- .../CurrentStaking/CurrentStaking.module.css | 18 +++---- .../Wallet/Delegation/Delegation.module.css | 34 +++++++------- .../Delegation/DelegationDetails.module.css | 47 ++++++++++--------- .../Delegation/DelegationList.module.css | 8 ++-- .../Delegation/DelegationSkeleton.module.css | 10 ++-- 5 files changed, 59 insertions(+), 58 deletions(-) diff --git a/src/components/composed/CurrentStaking/CurrentStaking.module.css b/src/components/composed/CurrentStaking/CurrentStaking.module.css index f220021d..acc0c2e4 100644 --- a/src/components/composed/CurrentStaking/CurrentStaking.module.css +++ b/src/components/composed/CurrentStaking/CurrentStaking.module.css @@ -2,7 +2,7 @@ display: flex; align-items: flex-start; justify-content: space-between; - margin: 30px 0 0; + margin: var(--space-3xl) 0 0; overflow: visible; } @@ -13,20 +13,20 @@ .titleRow { display: flex; align-items: center; - gap: 0.5rem; - margin-bottom: 0.4rem; + gap: var(--space-xs); + margin-bottom: var(--space-2xs); overflow: visible; } .title { - font-size: 1.5rem; + font-size: var(--font-size-4xl); font-weight: 700; color: rgb(var(--color-black)); margin: 0; } .totalStaked { - font-size: 0.95rem; + font-size: var(--font-size-lg); color: rgb(var(--color-dark-gray)); margin: 0; } @@ -40,7 +40,7 @@ display: flex; align-items: center; justify-content: center; - padding: 4px 8px; + padding: var(--space-3xs) var(--space-xs); border-radius: 8px; background: rgba(var(--color-orange), 0.2); border: none; @@ -53,14 +53,14 @@ } .poolButton { - padding: 0.6rem 1.2rem; - font-size: 0.85rem; + padding: var(--space-sm) var(--space-xl); + font-size: var(--font-size-sm); } .poolIcon { width: 13px; height: 13px; - margin-left: 8px; + margin-left: var(--space-xs); } .poolButton:hover .poolIcon { diff --git a/src/components/containers/Wallet/Delegation/Delegation.module.css b/src/components/containers/Wallet/Delegation/Delegation.module.css index f9230dcd..7e8a71e8 100644 --- a/src/components/containers/Wallet/Delegation/Delegation.module.css +++ b/src/components/containers/Wallet/Delegation/Delegation.module.css @@ -1,9 +1,9 @@ .card { display: flex; align-items: center; - gap: 1rem; + gap: var(--space-lg); min-height: max-content; - padding: 1rem 1.25rem; + padding: var(--space-lg) var(--space-xl); border-radius: 35px; background: rgb(var(--color-white)); border: 1px solid rgb(var(--color-medium-gray)); @@ -33,7 +33,7 @@ height: 56px; border-radius: 50%; background: rgb(var(--color-dim-blue)); - font-size: 1.5rem; + font-size: var(--font-size-4xl); color: rgb(var(--color-white)); flex-shrink: 0; } @@ -54,32 +54,32 @@ } .poolId { - font-size: 1rem; + font-size: var(--font-size-lg); font-weight: 600; color: rgb(var(--color-black)); margin: 0; display: flex; align-items: center; - gap: 0.5rem; + gap: var(--space-xs); } .inactiveBadge { display: inline-block; - font-size: 0.7rem; + font-size: var(--font-size-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: rgb(var(--color-orange)); background: rgba(var(--color-orange), 0.12); - padding: 0.2rem 0.6rem; + padding: var(--space-3xs) var(--space-sm); border-radius: 6px; flex-shrink: 0; } .date { - font-size: 0.8rem; + font-size: var(--font-size-sm); color: rgb(var(--color-dark-gray)); - margin: 0.2rem 0 0; + margin: var(--space-3xs) 0 0; } .amountBlock { @@ -89,27 +89,27 @@ } .amount { - font-size: 1.25rem; + font-size: var(--font-size-2xl); font-weight: 700; color: rgb(var(--color-black)); margin: 0; } .currency { - font-size: 0.75rem; + font-size: var(--font-size-sm); color: rgb(var(--color-dark-gray)); margin: 0; } .actions { display: flex; - gap: 0.5rem; + gap: var(--space-xs); flex-shrink: 0; } .actionButton { - padding: 0.5rem 1rem; - font-size: 0.8rem; + padding: var(--space-xs) var(--space-lg); + font-size: var(--font-size-sm); } .progressBar { @@ -144,7 +144,7 @@ @media screen and (max-width: 650px) { .card { flex-wrap: wrap; - row-gap: 0.85rem; + row-gap: var(--space-md); border-radius: 24px; } @@ -155,7 +155,7 @@ .actionButton { flex: 1; - padding: 0.75rem 1rem; - font-size: 0.9rem; + padding: var(--space-md) var(--space-lg); + font-size: var(--font-size-md); } } diff --git a/src/components/containers/Wallet/Delegation/DelegationDetails.module.css b/src/components/containers/Wallet/Delegation/DelegationDetails.module.css index 3ec9c729..553fe05e 100644 --- a/src/components/containers/Wallet/Delegation/DelegationDetails.module.css +++ b/src/components/containers/Wallet/Delegation/DelegationDetails.module.css @@ -1,7 +1,7 @@ .delegationDetails { display: flex; flex-direction: column; - gap: 20px; + gap: var(--space-xl); width: 100%; overflow-y: auto; flex: 1; @@ -15,9 +15,9 @@ display: flex; flex-direction: column; align-items: center; - gap: 6px; + gap: var(--space-2xs); min-height: max-content; - padding: 28px 20px 24px; + padding: var(--space-3xl) var(--space-xl) var(--space-2xl); background: rgb(var(--mojito-green-soft)); border-radius: 16px; border: 1.5px solid rgba(var(--mojito-green), 0.15); @@ -34,7 +34,7 @@ display: flex; align-items: center; justify-content: center; - margin-bottom: 4px; + margin-bottom: var(--space-3xs); } .bannerIcon svg { @@ -44,7 +44,7 @@ } .bannerLabel { - font-size: 11px; + font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; @@ -52,22 +52,23 @@ } .bannerAmount { - font-size: 32px; + font-size: var(--font-size-5xl); font-weight: 700; color: rgb(var(--color-black)); display: flex; align-items: baseline; - gap: 6px; - margin-top: 10px; + gap: var(--space-2xs); + margin-top: var(--space-sm); } .bannerAmountValue { - font-size: 32px; + font-size: var(--font-size-5xl); font-weight: 800; + line-break: anywhere; } .bannerTicker { - font-size: 14px; + font-size: var(--font-size-md); font-weight: 600; color: rgba(var(--color-black), 0.5); } @@ -75,14 +76,14 @@ .bannerStatus { display: inline-flex; align-items: center; - gap: 4px; - padding: 4px 12px; + gap: var(--space-3xs); + padding: var(--space-3xs) var(--space-md); border-radius: 99px; background: rgb(var(--color-white)); - font-size: 13px; + font-size: var(--font-size-sm); font-weight: 600; color: rgb(var(--mojito-green)); - margin-top: 4px; + margin-top: var(--space-3xs); } .bannerStatusDecommissioned { @@ -100,7 +101,7 @@ display: flex; justify-content: space-between; align-items: center; - padding: 14px 18px; + padding: var(--space-lg) var(--space-xl); border-bottom: 1px solid rgba(var(--color-black), 0.06); } @@ -109,14 +110,14 @@ } .detailLabel { - font-size: 13px; + font-size: var(--font-size-sm); font-weight: 400; color: rgba(var(--color-black), 0.6); flex-shrink: 0; } .detailValue { - font-size: 14px; + font-size: var(--font-size-md); font-weight: 600; color: rgb(var(--color-black)); text-align: right; @@ -124,15 +125,15 @@ max-width: 60%; display: flex; align-items: center; - gap: 8px; + gap: var(--space-xs); } .warning { background: rgba(var(--color-red), 0.08); border: 1.5px solid rgba(var(--color-red), 0.2); border-radius: 16px; - padding: 14px 18px; - font-size: 13px; + padding: var(--space-lg) var(--space-xl); + font-size: var(--font-size-sm); font-weight: 500; color: rgb(var(--color-red)); line-height: 1.5; @@ -140,17 +141,17 @@ .actionRow { display: flex; - gap: 10px; + gap: var(--space-sm); } .actionButton { flex: 1; - padding: 10px 20px; + padding: var(--space-sm) var(--space-xl); } .explorerButton { width: 100%; - padding: 10px 20px; + padding: var(--space-sm) var(--space-xl); } .explorerButton svg { diff --git a/src/components/containers/Wallet/Delegation/DelegationList.module.css b/src/components/containers/Wallet/Delegation/DelegationList.module.css index d7a867ae..421aab8d 100644 --- a/src/components/containers/Wallet/Delegation/DelegationList.module.css +++ b/src/components/containers/Wallet/Delegation/DelegationList.module.css @@ -1,8 +1,8 @@ .list { display: flex; flex-direction: column; - gap: 12px; - padding: 10px; + gap: var(--space-md); + padding: var(--space-sm); overflow: auto; flex-grow: 1; list-style: none; @@ -10,11 +10,11 @@ .empty { background: rgb(var(--color-white)); - font-size: 1rem; + font-size: var(--font-size-lg); color: rgb(var(--color-dark-gray)); list-style: none; text-align: center; - padding: 2rem 1.5rem; + padding: var(--space-4xl) var(--space-2xl); border-radius: 20px; border: 1px solid rgb(var(--color-medium-gray)); } diff --git a/src/components/containers/Wallet/Delegation/DelegationSkeleton.module.css b/src/components/containers/Wallet/Delegation/DelegationSkeleton.module.css index 4cca42d3..63c98ada 100644 --- a/src/components/containers/Wallet/Delegation/DelegationSkeleton.module.css +++ b/src/components/containers/Wallet/Delegation/DelegationSkeleton.module.css @@ -1,8 +1,8 @@ .card { display: flex; align-items: center; - gap: 1rem; - padding: 1rem 1.25rem; + gap: var(--space-lg); + padding: var(--space-lg) var(--space-xl); border-radius: 35px; background: rgb(var(--color-white)); border: 1px solid rgb(var(--color-medium-gray)); @@ -42,7 +42,7 @@ min-width: 0; display: flex; flex-direction: column; - gap: 0.4rem; + gap: var(--space-2xs); } .poolId { @@ -62,7 +62,7 @@ display: flex; flex-direction: column; align-items: flex-end; - gap: 0.3rem; + gap: var(--space-3xs); } .amountValue { @@ -77,7 +77,7 @@ .actions { display: flex; - gap: 0.5rem; + gap: var(--space-xs); flex-shrink: 0; } From fe6b63a1ee929d2d6092cf7880f23dc879c65ddf Mon Sep 17 00:00:00 2001 From: owlsua Date: Fri, 31 Jul 2026 15:51:45 +0200 Subject: [PATCH 11/26] style(wallet): use gray icons for secondary transaction buttons The default icon stroke was the same green as the filled Send button, which made the outlined buttons read as primary too. --- src/components/containers/Wallet/TransactionButton.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/containers/Wallet/TransactionButton.css b/src/components/containers/Wallet/TransactionButton.css index 64559a29..b8c9cb20 100644 --- a/src/components/containers/Wallet/TransactionButton.css +++ b/src/components/containers/Wallet/TransactionButton.css @@ -53,7 +53,7 @@ } .button-transaction svg path { - stroke: rgb(var(--mojito-green)); + stroke: rgb(var(--color-dark-gray)); transition: stroke 0.2s ease; } From 4d8927742782d8c6ab937307e9c61af87082275d Mon Sep 17 00:00:00 2001 From: owlsua Date: Fri, 31 Jul 2026 15:52:03 +0200 Subject: [PATCH 12/26] fix(wallet): break long amounts in the transaction details banner A long amount kept the banner on one line and pushed it past the panel width. --- src/components/containers/Wallet/TransactionDetails.module.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/containers/Wallet/TransactionDetails.module.css b/src/components/containers/Wallet/TransactionDetails.module.css index a0b4b876..5eb2af89 100644 --- a/src/components/containers/Wallet/TransactionDetails.module.css +++ b/src/components/containers/Wallet/TransactionDetails.module.css @@ -77,6 +77,7 @@ .bannerAmountValue { font-size: 32px; font-weight: 800; + line-break: anywhere; } .bannerAmountOut { From 02fe267e30950cf116beacef08c641ae99a2e25d Mon Sep 17 00:00:00 2001 From: owlsua Date: Fri, 31 Jul 2026 16:07:32 +0200 Subject: [PATCH 13/26] feat(styles): add a 28px step to the font size scale --font-size-5xl becomes 28px and the old 32px step moves to --font-size-6xl. --- src/assets/styles/constants.css | 6 ++++-- .../Wallet/Delegation/DelegationDetails.module.css | 4 ++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/assets/styles/constants.css b/src/assets/styles/constants.css index be9b4071..0e53c3be 100644 --- a/src/assets/styles/constants.css +++ b/src/assets/styles/constants.css @@ -71,7 +71,8 @@ --font-size-2xl: 20px; --font-size-3xl: 22px; --font-size-4xl: 24px; - --font-size-5xl: 32px; + --font-size-5xl: 28px; + --font-size-6xl: 32px; --space-3xs: 4px; --space-2xs: 6px; @@ -96,7 +97,8 @@ --font-size-2xl: 17px; --font-size-3xl: 19px; --font-size-4xl: 20px; - --font-size-5xl: 26px; + --font-size-5xl: 22px; + --font-size-6xl: 26px; --space-3xs: 3px; --space-2xs: 4px; diff --git a/src/components/containers/Wallet/Delegation/DelegationDetails.module.css b/src/components/containers/Wallet/Delegation/DelegationDetails.module.css index 553fe05e..45a34c2f 100644 --- a/src/components/containers/Wallet/Delegation/DelegationDetails.module.css +++ b/src/components/containers/Wallet/Delegation/DelegationDetails.module.css @@ -52,7 +52,7 @@ } .bannerAmount { - font-size: var(--font-size-5xl); + font-size: var(--font-size-6xl); font-weight: 700; color: rgb(var(--color-black)); display: flex; @@ -62,7 +62,7 @@ } .bannerAmountValue { - font-size: var(--font-size-5xl); + font-size: var(--font-size-6xl); font-weight: 800; line-break: anywhere; } From 62b2bc4befd1fcf773e103346386d507f4480be2 Mon Sep 17 00:00:00 2001 From: owlsua Date: Fri, 31 Jul 2026 16:07:46 +0200 Subject: [PATCH 14/26] refactor(login): move font sizes and paddings to design tokens Covers the account chooser, account cards and the unlock password screen. --- .../containers/Login/AccountCard.module.css | 10 +++--- .../containers/Login/Login.module.css | 34 +++++++++---------- .../containers/Login/SetPassword.module.css | 22 ++++++------ src/pages/Login/Login.module.css | 4 +-- 4 files changed, 35 insertions(+), 35 deletions(-) diff --git a/src/components/containers/Login/AccountCard.module.css b/src/components/containers/Login/AccountCard.module.css index 3a5b3250..f1eb8758 100644 --- a/src/components/containers/Login/AccountCard.module.css +++ b/src/components/containers/Login/AccountCard.module.css @@ -1,9 +1,9 @@ .card { display: flex; align-items: center; - gap: 14px; + gap: var(--space-lg); min-height: 72px; - padding: 16px 18px; + padding: var(--space-lg) var(--space-xl); border-radius: 16px; border: 1px solid rgba(var(--color-black), 0.1); background: rgb(var(--color-white)); @@ -13,7 +13,7 @@ box-shadow 0.2s; @media screen and (min-width: 801px) { - padding: 18px 22px; + padding: var(--space-xl) var(--space-2xl); border-radius: 18px; } } @@ -41,13 +41,13 @@ } .cardName { - font-size: 15px; + font-size: var(--font-size-lg); font-weight: 600; color: rgb(var(--color-black)); margin: 0; @media screen and (min-width: 801px) { - font-size: 17px; + font-size: var(--font-size-xl); } } diff --git a/src/components/containers/Login/Login.module.css b/src/components/containers/Login/Login.module.css index d016fe87..21547277 100644 --- a/src/components/containers/Login/Login.module.css +++ b/src/components/containers/Login/Login.module.css @@ -16,32 +16,32 @@ } .heading { - font-size: 22px; + font-size: var(--font-size-3xl); font-weight: 700; color: rgb(var(--color-black)); - margin: 20px 0 6px; + margin: var(--space-xl) 0 var(--space-2xs); @media screen and (min-width: 801px) { - font-size: 28px; - margin: 30px 0 8px; + font-size: var(--font-size-5xl); + margin: var(--space-3xl) 0 var(--space-xs); } } .subtitle { - font-size: 13px; + font-size: var(--font-size-sm); color: rgba(var(--color-black), 0.5); - margin: 0 0 24px; + margin: 0 0 var(--space-2xl); @media screen and (min-width: 801px) { - font-size: 15px; - margin: 0 0 32px; + font-size: var(--font-size-lg); + margin: 0 0 var(--space-4xl); } } .list { display: flex; flex-direction: column; - gap: 12px; + gap: var(--space-md); width: 100%; max-width: 400px; min-height: 312px; @@ -49,7 +49,7 @@ overflow: auto; @media screen and (min-width: 801px) { - gap: 14px; + gap: var(--space-lg); max-width: 460px; } } @@ -58,16 +58,16 @@ display: flex; align-items: center; justify-content: center; - gap: 8px; + gap: var(--space-xs); width: 100%; max-width: 400px; - padding: 16px; - margin-top: 40px; + padding: var(--space-lg); + margin-top: var(--space-5xl); border-radius: 16px; border: 1.5px dashed rgba(var(--color-black), 0.15); background: transparent; cursor: pointer; - font-size: 14px; + font-size: var(--font-size-md); color: rgba(var(--color-black), 0.45); transition: border-color 0.2s, @@ -75,9 +75,9 @@ @media screen and (min-width: 801px) { max-width: 460px; - padding: 18px; + padding: var(--space-xl); border-radius: 18px; - font-size: 15px; + font-size: var(--font-size-lg); } } @@ -87,7 +87,7 @@ } .addIcon { - font-size: 18px; + font-size: var(--font-size-xl); font-weight: 300; line-height: 1; } diff --git a/src/components/containers/Login/SetPassword.module.css b/src/components/containers/Login/SetPassword.module.css index e513a436..471c4fc2 100644 --- a/src/components/containers/Login/SetPassword.module.css +++ b/src/components/containers/Login/SetPassword.module.css @@ -4,7 +4,7 @@ justify-content: center; width: 60px; height: 60px; - margin: 0 auto 20px; + margin: 0 auto var(--space-xl); border-radius: 20px; background: rgb(var(--mojito-green-soft)); border: 1px solid rgba(30, 187, 129, 0.2); @@ -17,7 +17,7 @@ } .content { - margin-top: 2.5rem; + margin-top: var(--space-5xl); justify-content: space-between; align-items: center; align-content: center; @@ -39,7 +39,7 @@ flex-direction: column; align-items: center; justify-content: center; - gap: 30px; + gap: var(--space-3xl); } .loadingBig { @@ -57,7 +57,7 @@ .loadingText { margin-bottom: 60px; - font-size: 24px; + font-size: var(--font-size-4xl); font-weight: 400; text-align: center; color: rgb(var(--color-black)); @@ -68,12 +68,12 @@ height: 13px; max-width: 13px; max-height: 13px; - margin-left: 10px; + margin-left: var(--space-sm); } .loginPasswordSubmit { width: 100%; - margin-top: 5px; + margin-top: var(--space-3xs); } .loginPasswordSubmit:hover .loginButtonIcon { @@ -84,22 +84,22 @@ display: flex; flex-direction: column; align-items: center; - gap: 30px; + gap: var(--space-3xl); } .labelRow h1 { - font-size: 22px; - margin-bottom: 5px; + font-size: var(--font-size-3xl); + margin-bottom: var(--space-3xs); font-weight: 600; color: rgb(var(--color-black)); } .labelRow h2 { - font-size: 18px; + font-size: var(--font-size-xl); font-weight: 400; } .labelRow p { - font-size: 14px; + font-size: var(--font-size-md); color: rgb(var(--color-dark-gray)); } diff --git a/src/pages/Login/Login.module.css b/src/pages/Login/Login.module.css index 711b8838..3903e27e 100644 --- a/src/pages/Login/Login.module.css +++ b/src/pages/Login/Login.module.css @@ -11,9 +11,9 @@ .page { display: flex; flex: 1; - padding: 1rem; + padding: var(--space-lg); @media screen and (min-width: 801px) { - padding: 2rem; + padding: var(--space-4xl); } } From f109cfa4e0b39289d90730f78a997dba7e731006 Mon Sep 17 00:00:00 2001 From: owlsua Date: Fri, 31 Jul 2026 16:09:12 +0200 Subject: [PATCH 15/26] refactor(create-restore): move font sizes and paddings to design tokens The welcome screen now sizes text and spacing from the token scale in both the narrow and the >=801px branch. --- .../CreateRestore/CreateRestore.module.css | 62 +++++++++---------- 1 file changed, 31 insertions(+), 31 deletions(-) diff --git a/src/pages/CreateRestore/CreateRestore.module.css b/src/pages/CreateRestore/CreateRestore.module.css index fa93908a..b608eed6 100644 --- a/src/pages/CreateRestore/CreateRestore.module.css +++ b/src/pages/CreateRestore/CreateRestore.module.css @@ -15,8 +15,8 @@ width: 80px; height: 80px; border-radius: 24px; - padding: 16px; - margin: 0 0 10px 0; + padding: var(--space-lg); + margin: 0 0 var(--space-sm) 0; background: linear-gradient(135deg, #e6f8f0, #fff); box-shadow: rgba(30, 187, 129, 0.18) 0px 10px 30px; border: 1px solid #e8ebf0; @@ -24,55 +24,55 @@ @media screen and (min-width: 801px) { width: 90px; height: 90px; - padding: 18px; - margin: 0 0 15px 0; + padding: var(--space-xl); + margin: 0 0 var(--space-lg) 0; border-radius: 28px; } } .title { - font-size: 18px; + font-size: var(--font-size-xl); font-weight: 700; color: rgb(var(--color-black)); - margin: 0 0 30px 0; + margin: 0 0 var(--space-3xl) 0; @media screen and (min-width: 801px) { - font-size: 24px; - margin: 0 0 40px 0; + font-size: var(--font-size-4xl); + margin: 0 0 var(--space-5xl) 0; } } .logoText { - margin-bottom: 24px; + margin-bottom: var(--space-2xl); @media screen and (min-width: 801px) { - margin-bottom: 32px; + margin-bottom: var(--space-4xl); } } .heading { - font-size: 26px; + font-size: var(--font-size-4xl); font-weight: 700; line-height: 1.3; color: rgb(var(--color-black)); - margin: 8px 0px 10px; + margin: var(--space-xs) 0px var(--space-sm); @media screen and (min-width: 801px) { - font-size: 28px; - margin: 0 0 12px 0; + font-size: var(--font-size-5xl); + margin: 0 0 var(--space-md) 0; } } .subtitle { - font-size: 14px; + font-size: var(--font-size-md); font-weight: 400; line-height: 1.5; color: rgba(var(--color-black), 0.6); - margin: 0px 0px 28px; + margin: 0px 0px var(--space-3xl); @media screen and (min-width: 801px) { - font-size: 16px; - margin: 0 0 40px 0; + font-size: var(--font-size-lg); + margin: 0 0 var(--space-5xl) 0; max-width: 460px; } } @@ -80,7 +80,7 @@ .buttons { display: flex; flex-direction: column; - gap: 10px; + gap: var(--space-sm); width: 100%; max-width: 320px; @@ -91,15 +91,15 @@ .createButton { width: 100%; - padding: 14px 24px; + padding: var(--space-lg) var(--space-2xl); height: 46px; - font-size: 15px; + font-size: var(--font-size-lg); } .restoreButton { width: 100%; - padding: 14px 24px; + padding: var(--space-lg) var(--space-2xl); height: 46px; - font-size: 15px; + font-size: var(--font-size-lg); } .buttonIcon { @@ -107,7 +107,7 @@ height: 13px; max-width: 13px; max-height: 13px; - margin-left: 10px; + margin-left: var(--space-sm); } .restoreButton:hover .buttonIcon, @@ -118,21 +118,21 @@ .badges { display: flex; align-items: center; - gap: 8px; - margin-top: 28px; + gap: var(--space-xs); + margin-top: var(--space-3xl); @media screen and (min-width: 801px) { - margin-top: 40px; - gap: 12px; + margin-top: var(--space-5xl); + gap: var(--space-md); } } .badges span { - font-size: 12px; + font-size: var(--font-size-sm); color: rgba(var(--color-black), 0.35); @media screen and (min-width: 801px) { - font-size: 14px; + font-size: var(--font-size-md); } } @@ -147,7 +147,7 @@ .badgeWithIcon { display: inline-flex; align-items: center; - gap: 4px; + gap: var(--space-3xs); } .badgeIcon { From 40c1c83d119b156a053fe5924dd7446ccf09313f Mon Sep 17 00:00:00 2001 From: owlsua Date: Fri, 31 Jul 2026 16:59:29 +0200 Subject: [PATCH 16/26] feat(styles): add a display font size token --font-size-display is 80px, 64px below 500px. It sits apart from the t-shirt scale, which tops out at 32px. --- src/assets/styles/constants.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/assets/styles/constants.css b/src/assets/styles/constants.css index 0e53c3be..d74333ee 100644 --- a/src/assets/styles/constants.css +++ b/src/assets/styles/constants.css @@ -73,6 +73,7 @@ --font-size-4xl: 24px; --font-size-5xl: 28px; --font-size-6xl: 32px; + --font-size-display: 80px; --space-3xs: 4px; --space-2xs: 6px; @@ -99,6 +100,7 @@ --font-size-4xl: 20px; --font-size-5xl: 22px; --font-size-6xl: 26px; + --font-size-display: 64px; --space-3xs: 3px; --space-2xs: 4px; From 5258e832a2cccd2ed1bb98b35de550abb9ba9b48 Mon Sep 17 00:00:00 2001 From: owlsua Date: Fri, 31 Jul 2026 16:59:50 +0200 Subject: [PATCH 17/26] refactor(account): move create and restore account styles to design tokens Covers the seed word screens, the JSON upload flow, wallet details, restore success and the mnemonic form. One-off values far off the scale (4rem form offsets, the 100px description gap, the 60px loading margins) stay literal. --- .../CreateAccount/CreateAccount.module.css | 15 +++++------- .../CreateAccount/WordsListDescription.css | 8 +++---- .../RestoreAccountJson/FileUpload.module.css | 22 ++++++++--------- .../RestoreAccountJson.module.css | 7 ++---- .../RestoreSuccess.module.css | 4 ++-- .../WalletDetails.module.css | 24 +++++++++---------- .../RestoreAccountMnemonic.css | 22 ++++++++--------- .../CreateAccount/CreateAccount.module.css | 2 +- .../RestoreAccount/RestoreAccount.module.css | 14 +++++------ 9 files changed, 56 insertions(+), 62 deletions(-) diff --git a/src/components/containers/CreateAccount/CreateAccount.module.css b/src/components/containers/CreateAccount/CreateAccount.module.css index 1beb56b6..7c300e87 100644 --- a/src/components/containers/CreateAccount/CreateAccount.module.css +++ b/src/components/containers/CreateAccount/CreateAccount.module.css @@ -10,7 +10,7 @@ } .setAccountFormWords { - margin-top: 2rem; + margin-top: var(--space-4xl); } .itemWrapper { @@ -19,11 +19,11 @@ } .setAccountInput { - padding: 1.2rem 1.7rem; + padding: var(--space-xl) var(--space-3xl); } .createSubmitIcon { - margin-left: 10px; + margin-left: var(--space-sm); width: 15px; } @@ -32,13 +32,10 @@ } .title { - font-size: 20px; - margin-bottom: 20px; + font-size: var(--font-size-2xl); + margin-bottom: var(--space-xl); } -/* Narrow side panel: make the seed-phrase step fill the screen and pin the - action button to the bottom, like the "Choose an account" page. - Structure: form.setAccountFormWords > div.v-group > ul.inputsList + div.centeredLayout */ @media screen and (max-width: 800px) { .setAccountContainer { flex: 1; @@ -51,7 +48,7 @@ flex-direction: column; flex: 1; min-height: 0; - margin-top: 1.5rem; + margin-top: var(--space-2xl); } .setAccountFormWords > div { diff --git a/src/components/containers/CreateAccount/WordsListDescription.css b/src/components/containers/CreateAccount/WordsListDescription.css index 1db7bc55..d8e6308e 100644 --- a/src/components/containers/CreateAccount/WordsListDescription.css +++ b/src/components/containers/CreateAccount/WordsListDescription.css @@ -1,15 +1,15 @@ .words-list-description { - font-size: 22px; - margin-bottom: 20px; + font-size: var(--font-size-3xl); + margin-bottom: var(--space-xl); } .words-list-description:nth-child(2) { - font-size: 22px; + font-size: var(--font-size-3xl); margin: 0; } .word-list-highlighted { color: rgb(var(--mojito-green)); - font-size: 22px; + font-size: var(--font-size-3xl); margin: 0; } diff --git a/src/components/containers/RestoreAccount/RestoreAccountJson/FileUpload.module.css b/src/components/containers/RestoreAccount/RestoreAccountJson/FileUpload.module.css index ff068c9e..dae6f93f 100644 --- a/src/components/containers/RestoreAccount/RestoreAccountJson/FileUpload.module.css +++ b/src/components/containers/RestoreAccount/RestoreAccountJson/FileUpload.module.css @@ -1,16 +1,16 @@ .title { - margin-bottom: 0.5rem; - font-size: 1.5rem; + margin-bottom: var(--space-xs); + font-size: var(--font-size-4xl); font-weight: 700; text-align: center; color: rgb(var(--color-black)); } .subtitle { - font-size: 1rem; + font-size: var(--font-size-lg); text-align: center; color: rgb(var(--color-dark-gray)); - margin-bottom: 1.5rem; + margin-bottom: var(--space-2xl); } .dropzone { @@ -19,9 +19,9 @@ align-items: center; justify-content: center; min-width: 440px; - gap: 1rem; + gap: var(--space-lg); min-height: 200px; - padding: 2.5rem 2rem; + padding: var(--space-5xl) var(--space-4xl); border: 2px dashed rgb(var(--color-light-gray)); border-radius: 16px; background: rgb(var(--color-gray)); @@ -67,34 +67,34 @@ } .dropzoneText { - font-size: 1rem; + font-size: var(--font-size-lg); font-weight: 600; color: rgb(var(--color-black)); text-align: center; } .dropzoneHint { - font-size: 0.875rem; + font-size: var(--font-size-md); color: rgb(var(--color-dark-gray)); text-align: center; } .uploadedFileName { - font-size: 1rem; + font-size: var(--font-size-lg); font-weight: 600; color: rgb(var(--color-black)); text-align: center; } .uploadedStatus { - font-size: 0.875rem; + font-size: var(--font-size-md); color: rgb(var(--mojito-green)); font-weight: 500; text-align: center; } .uploadedChange { - font-size: 0.8125rem; + font-size: var(--font-size-sm); color: rgb(var(--color-dark-gray)); text-align: center; } diff --git a/src/components/containers/RestoreAccount/RestoreAccountJson/RestoreAccountJson.module.css b/src/components/containers/RestoreAccount/RestoreAccountJson/RestoreAccountJson.module.css index d0f6b7c9..51c785ce 100644 --- a/src/components/containers/RestoreAccount/RestoreAccountJson/RestoreAccountJson.module.css +++ b/src/components/containers/RestoreAccount/RestoreAccountJson/RestoreAccountJson.module.css @@ -1,12 +1,9 @@ .accountForm { - margin-top: 2rem; - @media (min-width: 801px) { - margin-top: 4rem; - } + margin-top: 4rem; } .submitIcon { - margin-left: 10px; + margin-left: var(--space-sm); width: 15px; } diff --git a/src/components/containers/RestoreAccount/RestoreAccountJson/RestoreSuccess.module.css b/src/components/containers/RestoreAccount/RestoreAccountJson/RestoreSuccess.module.css index a8991e36..c676057c 100644 --- a/src/components/containers/RestoreAccount/RestoreAccountJson/RestoreSuccess.module.css +++ b/src/components/containers/RestoreAccount/RestoreAccountJson/RestoreSuccess.module.css @@ -1,12 +1,12 @@ .title { - font-size: 1.75rem; + font-size: var(--font-size-5xl); font-weight: 700; text-align: center; color: rgb(var(--color-black)); } .description { - font-size: 1rem; + font-size: var(--font-size-lg); text-align: center; color: rgb(var(--color-dark-gray)); line-height: 1.5; diff --git a/src/components/containers/RestoreAccount/RestoreAccountJson/WalletDetails.module.css b/src/components/containers/RestoreAccount/RestoreAccountJson/WalletDetails.module.css index 26a3f6d4..941935f7 100644 --- a/src/components/containers/RestoreAccount/RestoreAccountJson/WalletDetails.module.css +++ b/src/components/containers/RestoreAccount/RestoreAccountJson/WalletDetails.module.css @@ -1,21 +1,21 @@ .title { - font-size: 1.5rem; + font-size: var(--font-size-4xl); font-weight: 700; text-align: center; color: rgb(var(--color-black)); @media (min-width: 801px) { - margin-bottom: 0.5rem; + margin-bottom: var(--space-xs); } } .subtitle { - font-size: 1rem; + font-size: var(--font-size-lg); text-align: center; color: rgb(var(--color-dark-gray)); @media (min-width: 801px) { - margin-bottom: 1.5rem; + margin-bottom: var(--space-2xl); } } @@ -30,8 +30,8 @@ .detailsRow { display: flex; align-items: center; - gap: 1rem; - padding: 1.25rem 1.5rem; + gap: var(--space-lg); + padding: var(--space-xl) var(--space-2xl); } .detailsRow + .detailsRow { @@ -56,7 +56,7 @@ } .detailsLabel { - font-size: 0.75rem; + font-size: var(--font-size-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; @@ -65,7 +65,7 @@ } .detailsValue { - font-size: 1rem; + font-size: var(--font-size-lg); font-weight: 600; color: rgb(var(--color-black)); word-break: break-word; @@ -74,14 +74,14 @@ .infoBanner { display: flex; align-items: center; - gap: 0.75rem; - padding: 0.875rem 1.25rem; + gap: var(--space-md); + padding: var(--space-lg) var(--space-xl); background: rgb(var(--mojito-green-50)); border: 1px solid rgba(30, 187, 129, 0.2); border-radius: 12px; @media (min-width: 801px) { - margin-top: 1rem; + margin-top: var(--space-lg); } } @@ -101,6 +101,6 @@ } .infoBannerText { - font-size: 0.875rem; + font-size: var(--font-size-md); color: rgb(var(--color-dark-gray)); } diff --git a/src/components/containers/RestoreAccount/RestoreAccountMnemonic/RestoreAccountMnemonic.css b/src/components/containers/RestoreAccount/RestoreAccountMnemonic/RestoreAccountMnemonic.css index f0ce4329..5a8eda88 100644 --- a/src/components/containers/RestoreAccount/RestoreAccountMnemonic/RestoreAccountMnemonic.css +++ b/src/components/containers/RestoreAccount/RestoreAccountMnemonic/RestoreAccountMnemonic.css @@ -11,12 +11,12 @@ } .account-form-address-type { - margin-top: 2.5em; + margin-top: var(--space-5xl); } .restore-mnemonic-title { - font-size: 20px; - margin-bottom: 20px; + font-size: var(--font-size-2xl); + margin-bottom: var(--space-xl); } .itemWrapper { @@ -25,14 +25,14 @@ } .account-input { - padding: 1.2rem 1.7rem; + padding: var(--space-xl) var(--space-3xl); } .words-description-wrapper { display: flex; flex-direction: column; align-items: center; - gap: 24px; + gap: var(--space-2xl); } .words-description-icon { @@ -52,25 +52,25 @@ } .words-description { - font-size: 22px; + font-size: var(--font-size-3xl); text-align: center; } .walletTypeTopTitle { - font-size: 1.2rem; - margin-bottom: 0.2rem; + font-size: var(--font-size-2xl); + margin-bottom: var(--space-3xs); } .walletTypeBottomTitle { - font-size: 0.8rem; + font-size: var(--font-size-sm); } .address-type-button { - padding: 0.9rem 0; + padding: var(--space-lg) 0; } .restore-submit-icon { - margin-left: 10px; + margin-left: var(--space-sm); transition: transform 0.3s ease; width: 17px; } diff --git a/src/pages/CreateAccount/CreateAccount.module.css b/src/pages/CreateAccount/CreateAccount.module.css index 5963b48d..2318cb74 100644 --- a/src/pages/CreateAccount/CreateAccount.module.css +++ b/src/pages/CreateAccount/CreateAccount.module.css @@ -4,7 +4,7 @@ .loadingText { margin-bottom: 60px; - font-size: 24px; + font-size: var(--font-size-4xl); font-weight: 400; text-align: center; } diff --git a/src/pages/RestoreAccount/RestoreAccount.module.css b/src/pages/RestoreAccount/RestoreAccount.module.css index 4705b58c..b12d5ddf 100644 --- a/src/pages/RestoreAccount/RestoreAccount.module.css +++ b/src/pages/RestoreAccount/RestoreAccount.module.css @@ -6,28 +6,28 @@ display: flex; flex-direction: column; align-items: center; - padding: 20px; + padding: var(--space-xl); } .title { - font-size: 24px; + font-size: var(--font-size-4xl); font-weight: 700; color: rgb(var(--color-black)); - margin-bottom: 8px; + margin-bottom: var(--space-xs); text-align: center; } .subtitle { - font-size: 14px; + font-size: var(--font-size-md); color: rgb(var(--color-dark-gray)); text-align: center; - margin-bottom: 28px; + margin-bottom: var(--space-3xl); } .cards { display: flex; flex-direction: column; - gap: 16px; + gap: var(--space-lg); width: 100%; max-width: 400px; } @@ -54,6 +54,6 @@ .loadingText { margin-bottom: 60px; - font-size: 24px; + font-size: var(--font-size-4xl); font-weight: 400; } From f0ebdea97792735055e1c21166ea2ed7d9dbfe93 Mon Sep 17 00:00:00 2001 From: owlsua Date: Fri, 31 Jul 2026 17:00:11 +0200 Subject: [PATCH 18/26] feat(create-restore): show the brand mark at the bottom in the side panel BrandBottomLogo pins the logo to the bottom of the welcome screen below 800px, where BrandPanel is hidden: full width, cropped to a 240px band, 320px once the viewport is at least 550px tall. The Mojito title takes its place as the brand element, so it grows to the display size and softens to 75% black, and the small logo icon above it is gone. --- .../basic/BrandBottomLogo/BrandBottomLogo.js | 17 ++++++++++ .../BrandBottomLogo.module.css | 32 +++++++++++++++++++ src/components/basic/index.js | 2 ++ src/pages/CreateRestore/CreateRestore.js | 5 ++- .../CreateRestore/CreateRestore.module.css | 12 +++++-- 5 files changed, 62 insertions(+), 6 deletions(-) create mode 100644 src/components/basic/BrandBottomLogo/BrandBottomLogo.js create mode 100644 src/components/basic/BrandBottomLogo/BrandBottomLogo.module.css diff --git a/src/components/basic/BrandBottomLogo/BrandBottomLogo.js b/src/components/basic/BrandBottomLogo/BrandBottomLogo.js new file mode 100644 index 00000000..e566a330 --- /dev/null +++ b/src/components/basic/BrandBottomLogo/BrandBottomLogo.js @@ -0,0 +1,17 @@ +import { ReactComponent as LogoIcon } from '@Assets/images/logo.svg' + +import styles from './BrandBottomLogo.module.css' + +const BrandBottomLogo = () => { + return ( + + ) +} + +export default BrandBottomLogo diff --git a/src/components/basic/BrandBottomLogo/BrandBottomLogo.module.css b/src/components/basic/BrandBottomLogo/BrandBottomLogo.module.css new file mode 100644 index 00000000..463ca569 --- /dev/null +++ b/src/components/basic/BrandBottomLogo/BrandBottomLogo.module.css @@ -0,0 +1,32 @@ +.brandBottomLogo { + display: none; +} + +@media screen and (max-width: 800px) { + .brandBottomLogo { + position: absolute; + left: 10px; + right: 10px; + bottom: 0; + display: flex; + justify-content: center; + align-items: flex-start; + height: 240px; + overflow: hidden; + pointer-events: none; + z-index: 0; + } +} + +@media screen and (min-width: 550px) { + .brandBottomLogo { + height: 320px; + } +} + +.logo { + width: 100%; + height: auto; + flex-shrink: 0; + opacity: 0.16; +} diff --git a/src/components/basic/index.js b/src/components/basic/index.js index 1e3e0b91..a61413b7 100644 --- a/src/components/basic/index.js +++ b/src/components/basic/index.js @@ -17,6 +17,7 @@ import EmptyListMessage from './EmptyList/EmptyList' import SwapTokenLogo from './SwapTokenLogo/SwapTokenLogo' import PageWrapper from './PageWrapper/PageWrapper.tsx' import BrandPanel from './BrandPanel/BrandPanel' +import BrandBottomLogo from './BrandBottomLogo/BrandBottomLogo' import OptionCard from './OptionCard/OptionCard' export { @@ -39,5 +40,6 @@ export { SwapTokenLogo, PageWrapper, BrandPanel, + BrandBottomLogo, OptionCard, } diff --git a/src/pages/CreateRestore/CreateRestore.js b/src/pages/CreateRestore/CreateRestore.js index 48e32873..d6255bf6 100644 --- a/src/pages/CreateRestore/CreateRestore.js +++ b/src/pages/CreateRestore/CreateRestore.js @@ -1,8 +1,7 @@ import { useContext } from 'react' import { useNavigate } from 'react-router' -import { Button, PageWrapper } from '@BasicComponents' -import { ReactComponent as LogoIcon } from '@Assets/images/logo.svg' +import { BrandBottomLogo, Button, PageWrapper } from '@BasicComponents' import { ReactComponent as ShieldIcon } from '@Assets/images/icon-shield.svg' import { ReactComponent as IconArrowTopRight } from '@Assets/images/icon-arrow-right-top.svg' import { AccountContext } from '@Contexts' @@ -47,7 +46,6 @@ const CreateRestorePage = () => { data-testid="create-restore" className={styles.page} > -

Mojito

A fresh way to hold Mintlayer assets

@@ -83,6 +81,7 @@ const CreateRestorePage = () => { Open source + ) } diff --git a/src/pages/CreateRestore/CreateRestore.module.css b/src/pages/CreateRestore/CreateRestore.module.css index b608eed6..10ca8b9f 100644 --- a/src/pages/CreateRestore/CreateRestore.module.css +++ b/src/pages/CreateRestore/CreateRestore.module.css @@ -3,12 +3,18 @@ } .page { + position: relative; + z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; text-align: center; + + @media screen and (max-width: 800px) { + padding-bottom: var(--space-5xl); + } } .logoIcon { @@ -31,13 +37,13 @@ } .title { - font-size: var(--font-size-xl); + font-size: var(--font-size-display); font-weight: 700; - color: rgb(var(--color-black)); + line-height: 1.1; + color: rgba(var(--color-black), 0.75); margin: 0 0 var(--space-3xl) 0; @media screen and (min-width: 801px) { - font-size: var(--font-size-4xl); margin: 0 0 var(--space-5xl) 0; } } From deea0310ec3e4b4456aaaf2de7afa28c512cbe7b Mon Sep 17 00:00:00 2001 From: owlsua Date: Mon, 3 Aug 2026 13:48:27 +0200 Subject: [PATCH 19/26] feat(dashboard): split the asset list into coins and tokens MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Native coins and Mintlayer tokens differ in what the UI can show: coins have a rate, a 24h change and a sparkline, tokens have none of that, so a token row looked like a row whose data failed to load. Items now carry an explicit type instead of being recognised by name, which a token ticker could collide with. Group titles only appear once real tokens are loaded, so a wallet without tokens looks unchanged. The groups are nested lists inside the scroll container, so they need flex-shrink: 0 and overflow: visible — the global * { overflow: hidden } would otherwise let them shrink to zero and swallow the list's scrolling. --- .../composed/PriceChart/PriceChart.js | 2 +- .../containers/Dashboard/CryptoList.css | 97 ++++++++++++------- .../containers/Dashboard/CryptoList.js | 66 ++++++++----- .../containers/Dashboard/CryptoList.test.js | 57 +++++++++++ src/pages/Dashboard/Dashboard.js | 37 +++---- 5 files changed, 181 insertions(+), 78 deletions(-) diff --git a/src/components/composed/PriceChart/PriceChart.js b/src/components/composed/PriceChart/PriceChart.js index b85e3ee2..77b2f1fd 100644 --- a/src/components/composed/PriceChart/PriceChart.js +++ b/src/components/composed/PriceChart/PriceChart.js @@ -8,7 +8,7 @@ import './PriceChart.css' const PriceChart = ({ data, item }) => { const { networkType } = useContext(SettingsContext) const isTestnet = networkType === AppInfo.NETWORK_TYPES.TESTNET - const isToken = item.name !== 'Mintlayer' && item.name !== 'Bitcoin' + const isToken = item.type === 'token' const color = AppInfo.COLOR_LIST[item.symbol.toLowerCase()] return ( diff --git a/src/components/containers/Dashboard/CryptoList.css b/src/components/containers/Dashboard/CryptoList.css index c262f171..b461fb7a 100644 --- a/src/components/containers/Dashboard/CryptoList.css +++ b/src/components/containers/Dashboard/CryptoList.css @@ -6,7 +6,7 @@ height: 100%; background: rgba(var(--color-gray), 0.85); z-index: 2; - border-radius: 45px; + border-radius: 25px; display: flex; align-items: flex-start; justify-content: flex-end; @@ -23,17 +23,42 @@ .crypto-list { display: flex; flex-direction: column; - gap: 0.4rem; + gap: var(--space-3xs); overflow-y: auto; overflow-x: hidden; - padding: 7px; + padding: var(--space-2xs); - @media screen and (min-width: 801px) { - padding: 10px; + @media screen and (min-width: 901px) { + padding: var(--space-sm); flex-grow: 1; } } +.crypto-group { + display: flex; + flex-direction: column; + flex-shrink: 0; + gap: var(--space-3xs); + overflow: visible; + list-style: none; +} + +.crypto-group-title { + flex-shrink: 0; + overflow: visible; + font-size: var(--font-size-xs); + font-weight: 600; + letter-spacing: 1px; + text-transform: uppercase; + color: rgb(var(--color-dark-gray)); + padding-left: var(--space-sm); + margin-top: var(--space-2xs); +} + +.crypto-group-title:first-child { + margin-top: 0; +} + .crypto-item { position: relative; display: flex; @@ -44,12 +69,12 @@ transition: all 0.3s ease-in-out; background-color: rgb(var(--color-gray)); border: 1px solid rgba(var(--color-light-green), 0.2); - border-radius: 35px; - max-height: 72px; + border-radius: 25px; + max-height: 76px; min-height: 72px; box-sizing: border-box; - @media screen and (max-width: 800px) { + @media screen and (max-width: 900px) { padding: 8px 14px 8px 8px; } } @@ -70,7 +95,7 @@ margin: 0 0 0 1rem; /* Narrow side panel: fill the row instead of a fixed width */ - @media screen and (max-width: 800px) { + @media screen and (max-width: 900px) { width: auto; flex: 1; min-width: 0; @@ -82,7 +107,7 @@ font-size: 1.2rem; font-weight: bold; - @media screen and (max-width: 800px) { + @media screen and (max-width: 900px) { font-size: 1rem; } } @@ -132,7 +157,7 @@ font-weight: thin; margin: 0 1rem; - @media screen and (max-width: 800px) { + @media screen and (max-width: 900px) { margin: 0 0.4rem; } } @@ -144,39 +169,39 @@ } .crypto-item svg { - height: 60px; - width: 60px; + height: 56px; + width: 56px; - @media screen and (max-width: 800px) { - height: 44px; - width: 44px; + @media screen and (max-width: 900px) { + height: 50px; + width: 50px; } } .crypto-item .logo-round { - height: 60px; - width: 60px; - min-width: 60px; - - @media screen and (max-width: 800px) { - height: 44px; - width: 44px; - min-width: 44px; + height: 56px; + width: 56px; + min-width: 56px; + + @media screen and (max-width: 900px) { + height: 50px; + width: 50px; + min-width: 50px; } } .crypto-item .token-logo-round { - height: 60px; - width: 60px; - min-width: 60px; - min-height: 60px; + height: 56px; + width: 56px; + min-width: 56px; + min-height: 56px; font-size: 18px; - @media screen and (max-width: 800px) { - height: 44px; - width: 44px; - min-width: 44px; - min-height: 44px; + @media screen and (max-width: 900px) { + height: 50px; + width: 50px; + min-width: 50px; + min-height: 50px; font-size: 14px; } } @@ -195,9 +220,9 @@ height: 60px; width: 60px; - @media screen and (max-width: 800px) { - height: 44px; - width: 44px; + @media screen and (max-width: 900px) { + height: 50px; + width: 50px; } } diff --git a/src/components/containers/Dashboard/CryptoList.js b/src/components/containers/Dashboard/CryptoList.js index 5fd387aa..57e2aa82 100644 --- a/src/components/containers/Dashboard/CryptoList.js +++ b/src/components/containers/Dashboard/CryptoList.js @@ -24,7 +24,7 @@ export const CryptoItem = ({ onClickItem, item }) => { Number(value), ]) const symbol = !isTestnet ? item.symbol : 'Testnet' - const isToken = item.name !== 'Mintlayer' && item.name !== 'Bitcoin' + const isToken = item.type === 'token' const onClick = () => { if (!isBtcUnavailable) { @@ -135,33 +135,51 @@ const CryptoList = ({ cryptoList, onWalletItemClick, onConnectItemClick }) => { (walletType) => !cryptoList.find((crypto) => crypto.name === walletType.name), ) + const coins = cryptoList.filter((crypto) => crypto.type !== 'token') + const tokens = cryptoList.filter((crypto) => crypto.type === 'token') + const showGroupTitles = tokens.some((token) => !token.isPlaceholder) + return ( - <> -

    - {cryptoList.length - ? cryptoList.map((crypto) => ( +
    + {showGroupTitles ?
    Coins
    : null} +
      + {coins.map((crypto) => ( + + ))} + + {missingWalletTypes.map((walletType) => ( + + ))} +
    + + {tokens.length ? ( + <> + {showGroupTitles ? ( +
    Tokens
    + ) : null} +
      + {tokens.map((token) => ( - )) - : null} - - {missingWalletTypes.length - ? missingWalletTypes.map((walletType) => ( - - )) - : null} -
    - + ))} +
+ + ) : null} + ) } diff --git a/src/components/containers/Dashboard/CryptoList.test.js b/src/components/containers/Dashboard/CryptoList.test.js index 1a5cf8b6..f90fea49 100644 --- a/src/components/containers/Dashboard/CryptoList.test.js +++ b/src/components/containers/Dashboard/CryptoList.test.js @@ -290,4 +290,61 @@ describe('CryptoList', () => { expect(onConnectItemClick).toHaveBeenCalled() }) + + const coin = { + id: 'Mintlayer', + name: 'Mintlayer', + symbol: 'ML', + balance: 100, + exchangeRate: 1, + historyRates: [], + change24h: 0, + type: 'coin', + } + + const token = { + id: 'token-id', + name: 'OHFORF', + symbol: 'OHFORF', + balance: 45, + change24h: 0, + historyRates: [], + type: 'token', + } + + const renderWithList = (list) => + render( + + + + + , + ) + + it('splits coins and tokens into separate groups', () => { + renderWithList([coin, token]) + + expect(screen.getByText('Coins')).toBeInTheDocument() + expect(screen.getByText('Tokens')).toBeInTheDocument() + + const groups = document.querySelectorAll('.crypto-group') + expect(groups).toHaveLength(2) + expect(groups[0]).toHaveTextContent('Mintlayer (ML)') + expect(groups[1]).toHaveTextContent('OHFORF (OHFORF)') + }) + + it('hides the group titles when there are no tokens', () => { + renderWithList([coin]) + + expect(screen.queryByText('Coins')).not.toBeInTheDocument() + expect(screen.queryByText('Tokens')).not.toBeInTheDocument() + expect(document.querySelectorAll('.crypto-group')).toHaveLength(1) + }) }) diff --git a/src/pages/Dashboard/Dashboard.js b/src/pages/Dashboard/Dashboard.js index 4cf086b0..f75f5d63 100644 --- a/src/pages/Dashboard/Dashboard.js +++ b/src/pages/Dashboard/Dashboard.js @@ -101,6 +101,24 @@ const DashboardPage = () => { network, fetchingBalances, disabled, + type: 'coin', + }) + } + + const addToken = (ticker, balance, id, fetchingBalances, isPlaceholder) => { + cryptos.push({ + id, + name: ticker, + symbol: ticker, + balance: NumbersHelper.floatStringToNumber(balance), + exchangeRate: undefined, + change24h: 0, + historyRates: [], + network: 'mintlayer', + fetchingBalances, + disabled: false, + type: 'token', + isPlaceholder, }) } @@ -153,29 +171,14 @@ const DashboardPage = () => { } if (mlFetchingTokens && isTokensEmpty) { - addCrypto( - 'Token', - 'Token', - 0, - undefined, - 0, - [], - 'mintlayer', - 'Mintlayer', - mlFetchingTokens, - ) + addToken('Token', 0, 'Mintlayer', mlFetchingTokens, true) } if (tokenBalances) { Object.keys(tokenBalances).forEach((token) => { - addCrypto( - tokenBalances[token].token_info.token_ticker.string, + addToken( tokenBalances[token].token_info.token_ticker.string, tokenBalances[token].balance, - undefined, - 0, - [], - 'mintlayer', token, mlFetchingTokens, ) From 2599ac4fd6fe49c665ae748ced2b0154c1875fbd Mon Sep 17 00:00:00 2001 From: owlsua Date: Mon, 3 Aug 2026 13:48:53 +0200 Subject: [PATCH 20/26] fix(delegation): let long amounts wrap inside the card MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit .amountBlock was flex-shrink: 0, so its base size stayed at max-content and the amount could never wrap — line-break: anywhere had no effect and a long value overflowed the card. It now shrinks, and the wrap uses overflow-wrap. Also drops the commented-out Add funds / Withdraw block with its orphaned .actions rules; both actions are reachable from the details popup. --- .../Wallet/Delegation/Delegation.js | 40 ------------------- .../Wallet/Delegation/Delegation.module.css | 31 ++------------ 2 files changed, 4 insertions(+), 67 deletions(-) diff --git a/src/components/containers/Wallet/Delegation/Delegation.js b/src/components/containers/Wallet/Delegation/Delegation.js index 0db1f67b..75ab7aaa 100644 --- a/src/components/containers/Wallet/Delegation/Delegation.js +++ b/src/components/containers/Wallet/Delegation/Delegation.js @@ -2,7 +2,6 @@ import React, { useState } from 'react' import { ReactComponent as StakeIcon } from '@Assets/images/icon-stake.svg' import { Loading, PopUp } from '@ComposedComponents' import { ML } from '@Helpers' -import { Button } from '@BasicComponents' import DelegationDetails from './DelegationDetails' @@ -82,8 +81,6 @@ const Delegation = ({ delegation }) => { .filter(Boolean) .join(' ') - const buttonExtraStyles = [styles.actionButton] - return (
  • {

    ML

    -
    - {delegation.type !== 'Unconfirmed' ? ( - <> - - - - ) : ( - <> - - - - )} -
    - {detailPopupOpen && ( Date: Mon, 3 Aug 2026 13:49:07 +0200 Subject: [PATCH 21/26] style(wallet): unify card corner radius at 25px The delegation card, transaction row, crypto row, offline mask and the compact skeleton had drifted to 35px, 45px and 25px. The skeleton also matches the row height it stands in for, so rows no longer jump when balances arrive. --- .../basic/SkeletonLoader/SkeletonLoader.css | 13 ++++++++++--- .../containers/Wallet/Transaction.module.css | 5 +++-- 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/src/components/basic/SkeletonLoader/SkeletonLoader.css b/src/components/basic/SkeletonLoader/SkeletonLoader.css index 346051f6..d65ebfb9 100644 --- a/src/components/basic/SkeletonLoader/SkeletonLoader.css +++ b/src/components/basic/SkeletonLoader/SkeletonLoader.css @@ -11,9 +11,16 @@ .card-compact { padding: 8px 20px 8px 12px; margin-bottom: 0; - border-radius: 35px; - max-height: 72px; - min-height: 72px; + border-radius: 25px; + max-height: 76px; + min-height: 76px; +} + +@media screen and (max-width: 900px) { + .card-compact { + max-height: 72px; + min-height: 72px; + } } .skeleton { diff --git a/src/components/containers/Wallet/Transaction.module.css b/src/components/containers/Wallet/Transaction.module.css index 36aafd32..7d605318 100644 --- a/src/components/containers/Wallet/Transaction.module.css +++ b/src/components/containers/Wallet/Transaction.module.css @@ -3,16 +3,17 @@ align-items: center; padding: 12px 29px 12px 8px; margin-bottom: 0; - border-radius: 35px; + border-radius: 22px; background: rgb(var(--color-gray)); border: 1px solid rgba(var(--color-light-green), 0.2); word-break: break-all; cursor: pointer; transition: all 0.3s ease-in-out; position: relative; - max-height: 72px; + max-height: 80px; min-height: 72px; box-sizing: border-box; + flex-shrink: 0; @media screen and (max-width: 560px) { min-height: max-content; From c946fcf1fdb569f86d25ea696e59dd95e0375774 Mon Sep 17 00:00:00 2001 From: owlsua Date: Mon, 3 Aug 2026 13:49:29 +0200 Subject: [PATCH 22/26] refactor(loading): extract LoadingScreen and scale it with the viewport The same text-plus-spinner block was duplicated in four places, three of them with their own copy of the styles and the fourth (SignMessage) referencing class names that had no CSS at all, so its spinner stayed at the default 80px. The spinner now steps down 190 -> 120 -> 88px so it does not fill half of a narrow side panel. The inner ring is overridden through div.spinner::after: plain .spinner::after ties with Loading's own rule and would depend on stylesheet order. --- .../composed/LoadingScreen/LoadingScreen.js | 17 ++++++ .../LoadingScreen/LoadingScreen.module.css | 60 +++++++++++++++++++ src/components/composed/index.js | 2 + .../containers/Login/SetPassword.module.css | 31 +--------- .../containers/Login/SetPassword.tsx | 10 +--- .../Message/SignMessage/SignMessage.js | 11 +--- .../CreateAccount/CreateAccount.module.css | 31 ---------- src/pages/CreateAccount/CreateAccount.tsx | 15 +---- .../RestoreAccount/RestoreAccount.module.css | 26 -------- src/pages/RestoreAccount/RestoreAccount.tsx | 14 +---- 10 files changed, 88 insertions(+), 129 deletions(-) create mode 100644 src/components/composed/LoadingScreen/LoadingScreen.js create mode 100644 src/components/composed/LoadingScreen/LoadingScreen.module.css diff --git a/src/components/composed/LoadingScreen/LoadingScreen.js b/src/components/composed/LoadingScreen/LoadingScreen.js new file mode 100644 index 00000000..2dfa7260 --- /dev/null +++ b/src/components/composed/LoadingScreen/LoadingScreen.js @@ -0,0 +1,17 @@ +import Loading from '../Loading/Loading.tsx' + +import styles from './LoadingScreen.module.css' + +const LoadingScreen = ({ text }) => { + return ( +
    +

    {text}

    + +
    + ) +} + +export default LoadingScreen diff --git a/src/components/composed/LoadingScreen/LoadingScreen.module.css b/src/components/composed/LoadingScreen/LoadingScreen.module.css new file mode 100644 index 00000000..7352e795 --- /dev/null +++ b/src/components/composed/LoadingScreen/LoadingScreen.module.css @@ -0,0 +1,60 @@ +.loadingScreen { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: var(--space-3xl); + flex: 1; + min-height: 0; + padding: var(--space-lg); + text-align: center; +} + +.text { + max-width: 24ch; + font-size: var(--font-size-4xl); + font-weight: 400; + line-height: 1.3; + color: rgb(var(--color-black)); +} + +.spinner { + width: 190px; + height: 190px; +} + +div.spinner::after { + width: 160px; + height: 160px; + border-width: 15px; +} + +@media screen and (max-width: 900px) { + .loadingScreen { + gap: var(--space-2xl); + } + + .spinner { + width: 120px; + height: 120px; + } + + div.spinner::after { + width: 100px; + height: 100px; + border-width: 10px; + } +} + +@media screen and (max-width: 500px) { + .spinner { + width: 88px; + height: 88px; + } + + div.spinner::after { + width: 72px; + height: 72px; + border-width: 7px; + } +} diff --git a/src/components/composed/index.js b/src/components/composed/index.js index e5afc4ca..fb97010f 100644 --- a/src/components/composed/index.js +++ b/src/components/composed/index.js @@ -6,6 +6,7 @@ import OptionButtons from './OptionButtons/OptionButtons' import Header from './Header/Header.tsx' import InputList from './InputList/InputsList.tsx' import Loading from './Loading/Loading.tsx' +import LoadingScreen from './LoadingScreen/LoadingScreen' import PopUp from './PopUp/Popup' import ProgressTracker from './ProgressTracker/ProgressTracker.tsx' import TextField from './TextField/TextField.tsx' @@ -42,6 +43,7 @@ export { Header, InputList, Loading, + LoadingScreen, PopUp, ProgressTracker, TextField, diff --git a/src/components/containers/Login/SetPassword.module.css b/src/components/containers/Login/SetPassword.module.css index 471c4fc2..e45863a2 100644 --- a/src/components/containers/Login/SetPassword.module.css +++ b/src/components/containers/Login/SetPassword.module.css @@ -29,40 +29,11 @@ .form { width: 340px; - @media (min-width: 801px) { + @media (min-width: 901px) { width: 400px; } } -.loadingWrapper { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: var(--space-3xl); -} - -.loadingBig { - width: 190px; - height: 190px; -} - -.loadingBig::after { - width: 160px; - height: 160px; - border: 15px solid #fff; - border-color: rgb(var(--color-main-green)) transparent rgb(var(--color-black)) - transparent; -} - -.loadingText { - margin-bottom: 60px; - font-size: var(--font-size-4xl); - font-weight: 400; - text-align: center; - color: rgb(var(--color-black)); -} - .loginButtonIcon { width: 13px; height: 13px; diff --git a/src/components/containers/Login/SetPassword.tsx b/src/components/containers/Login/SetPassword.tsx index 6b133c54..b433b54f 100644 --- a/src/components/containers/Login/SetPassword.tsx +++ b/src/components/containers/Login/SetPassword.tsx @@ -2,7 +2,7 @@ import { useState, FormEvent, ReactNode } from 'react' import { useLocation } from 'react-router' import { Button } from '@BasicComponents' -import { Loading, TextField } from '@ComposedComponents' +import { LoadingScreen, TextField } from '@ComposedComponents' import { VerticalGroup, CenteredLayout } from '@LayoutComponents' import { ReactComponent as IconArrowRight } from '@Assets/images/icon-arrow-right.svg' import { ReactComponent as IconShield } from '@Assets/images/icon-shield.svg' @@ -138,13 +138,7 @@ const SetPassword = ({ ) : ( -
    -

    - {' '} - Just a sec, we are validating your password...{' '} -

    - -
    + )} diff --git a/src/components/containers/Message/SignMessage/SignMessage.js b/src/components/containers/Message/SignMessage/SignMessage.js index 2aa9176d..f573f300 100644 --- a/src/components/containers/Message/SignMessage/SignMessage.js +++ b/src/components/containers/Message/SignMessage/SignMessage.js @@ -1,7 +1,7 @@ import React, { useState, useContext, useRef, useEffect } from 'react' import { Button, Textarea, Error } from '@BasicComponents' -import { TextField, PopUp, Loading } from '@ComposedComponents' +import { TextField, PopUp, LoadingScreen } from '@ComposedComponents' import { AccountContext, SettingsContext } from '@Contexts' import { CenteredLayout, VerticalGroup } from '@LayoutComponents' @@ -29,7 +29,6 @@ const SignMessage = () => { const [passErrorMessage, setPassErrorMessage] = useState('') const { accountID } = useContext(AccountContext) const { networkType } = useContext(SettingsContext) - const loadingExtraClasses = ['loading-big'] useEffect(() => { if (submitButtonRef.current) { @@ -253,13 +252,7 @@ const SignMessage = () => { allowClosing={!loading} > {loading ? ( - -

    - {' '} - Just a sec, we are validating your password...{' '} -

    - -     + ) : (

    Enter your Password

    diff --git a/src/pages/CreateAccount/CreateAccount.module.css b/src/pages/CreateAccount/CreateAccount.module.css index 2318cb74..106d523a 100644 --- a/src/pages/CreateAccount/CreateAccount.module.css +++ b/src/pages/CreateAccount/CreateAccount.module.css @@ -1,34 +1,3 @@ .createAccountPage { background: rgb(var(--color-white)); } - -.loadingText { - margin-bottom: 60px; - font-size: var(--font-size-4xl); - font-weight: 400; - text-align: center; -} - -.loadingText ~ div { - margin: 0 auto; -} - -.creatingLoadingWrapper { - display: flex; - justify-content: center; - align-items: center; - height: 50vh; -} - -.loadingBig { - width: 190px; - height: 190px; -} - -.loadingBig::after { - width: 160px; - height: 160px; - border: 15px solid #fff; - border-color: rgb(var(--color-main-green)) transparent rgb(var(--color-black)) - transparent; -} diff --git a/src/pages/CreateAccount/CreateAccount.tsx b/src/pages/CreateAccount/CreateAccount.tsx index bb1861ae..b451e046 100644 --- a/src/pages/CreateAccount/CreateAccount.tsx +++ b/src/pages/CreateAccount/CreateAccount.tsx @@ -1,8 +1,7 @@ import { useContext, useState } from 'react' import { useNavigate } from 'react-router' -import { Loading } from '@ComposedComponents' -import { CenteredLayout, VerticalGroup } from '@LayoutComponents' +import { LoadingScreen } from '@ComposedComponents' import { CreateAccount } from '@ContainerComponents' import { Account, loadAccountSubRoutines } from '@Entities' @@ -55,17 +54,7 @@ const CreateAccountPage = () => { return ( {creatingWallet ? ( -
    - - -

    - {' '} - Just a sec, we are creating your wallet...{' '} -

    - -     -     -
    + ) : ( { return ( {creatingWallet ? ( -
    - - -

    - Just a sec, we are restoring your wallet... -

    - -     -     -
    + ) : ( <> {!restoreMethod && ( From 07c81d3fb1155aa8be23c2bf159f4e621efcf8c4 Mon Sep 17 00:00:00 2001 From: owlsua Date: Mon, 3 Aug 2026 13:49:52 +0200 Subject: [PATCH 23/26] style(login): trim the account chooser in the extended view MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Cards and headings read as oversized on a wide window. The account name drops to 16px, the card loses 4px of vertical padding and 4px of min-height, and the gaps above the heading, below the subtitle and above the add-wallet button shrink by one step. --font-size-5xl goes 28px -> 26px, which also reaches the create-restore and restore-success headings — the same kind of large heading on a wide screen. --- src/assets/styles/constants.css | 2 +- .../containers/Login/AccountCard.module.css | 17 ++++------------- .../containers/Login/Login.module.css | 15 +++++++-------- 3 files changed, 12 insertions(+), 22 deletions(-) diff --git a/src/assets/styles/constants.css b/src/assets/styles/constants.css index d74333ee..f7f5847f 100644 --- a/src/assets/styles/constants.css +++ b/src/assets/styles/constants.css @@ -71,7 +71,7 @@ --font-size-2xl: 20px; --font-size-3xl: 22px; --font-size-4xl: 24px; - --font-size-5xl: 28px; + --font-size-5xl: 26px; --font-size-6xl: 32px; --font-size-display: 80px; diff --git a/src/components/containers/Login/AccountCard.module.css b/src/components/containers/Login/AccountCard.module.css index f1eb8758..29ea38c6 100644 --- a/src/components/containers/Login/AccountCard.module.css +++ b/src/components/containers/Login/AccountCard.module.css @@ -2,8 +2,8 @@ display: flex; align-items: center; gap: var(--space-lg); - min-height: 72px; - padding: var(--space-lg) var(--space-xl); + min-height: 68px; + padding: var(--space-md) var(--space-xl); border-radius: 16px; border: 1px solid rgba(var(--color-black), 0.1); background: rgb(var(--color-white)); @@ -11,9 +11,9 @@ transition: border-color 0.2s, box-shadow 0.2s; + flex-shrink: 0; - @media screen and (min-width: 801px) { - padding: var(--space-xl) var(--space-2xl); + @media screen and (min-width: 901px) { border-radius: 18px; } } @@ -28,11 +28,6 @@ height: 48px; border-radius: 50%; flex-shrink: 0; - - @media screen and (min-width: 801px) { - width: 56px; - height: 56px; - } } .cardInfo { @@ -45,10 +40,6 @@ font-weight: 600; color: rgb(var(--color-black)); margin: 0; - - @media screen and (min-width: 801px) { - font-size: var(--font-size-xl); - } } .deleteButton { diff --git a/src/components/containers/Login/Login.module.css b/src/components/containers/Login/Login.module.css index 21547277..2d81a7a0 100644 --- a/src/components/containers/Login/Login.module.css +++ b/src/components/containers/Login/Login.module.css @@ -21,9 +21,9 @@ color: rgb(var(--color-black)); margin: var(--space-xl) 0 var(--space-2xs); - @media screen and (min-width: 801px) { + @media screen and (min-width: 901px) { font-size: var(--font-size-5xl); - margin: var(--space-3xl) 0 var(--space-xs); + margin: var(--space-2xl) 0 var(--space-xs); } } @@ -32,9 +32,9 @@ color: rgba(var(--color-black), 0.5); margin: 0 0 var(--space-2xl); - @media screen and (min-width: 801px) { + @media screen and (min-width: 901px) { font-size: var(--font-size-lg); - margin: 0 0 var(--space-4xl); + margin: 0 0 var(--space-3xl); } } @@ -48,7 +48,7 @@ flex: 1; overflow: auto; - @media screen and (min-width: 801px) { + @media screen and (min-width: 901px) { gap: var(--space-lg); max-width: 460px; } @@ -62,7 +62,7 @@ width: 100%; max-width: 400px; padding: var(--space-lg); - margin-top: var(--space-5xl); + margin-top: var(--space-3xl); border-radius: 16px; border: 1.5px dashed rgba(var(--color-black), 0.15); background: transparent; @@ -73,11 +73,10 @@ border-color 0.2s, color 0.2s; - @media screen and (min-width: 801px) { + @media screen and (min-width: 901px) { max-width: 460px; padding: var(--space-xl); border-radius: 18px; - font-size: var(--font-size-lg); } } From ace3af36f42dde90cde15a02459cc5b2b5109272 Mon Sep 17 00:00:00 2001 From: owlsua Date: Mon, 3 Aug 2026 13:50:06 +0200 Subject: [PATCH 24/26] style: soften the background gradient in the extended view The radial spots dropped from 0.4 alpha to 0.18-0.22 and the base moved from a lilac rgb(225, 225, 245) to rgb(235, 242, 240). Only the extended view shows it: in the side panel the opaque body covers the html background. --- src/assets/styles/index.css | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/src/assets/styles/index.css b/src/assets/styles/index.css index 0c3ef11f..2320267d 100644 --- a/src/assets/styles/index.css +++ b/src/assets/styles/index.css @@ -13,35 +13,35 @@ html { background: radial-gradient( 50% 50% at 20% 30%, - rgba(105, 238, 150, 0.4) 0%, - rgba(145, 155, 200, 0.4) 59%, + rgba(105, 238, 150, 0.22) 0%, + rgba(145, 155, 200, 0.16) 59%, rgba(195, 192, 225, 0) 100% ), radial-gradient( 50% 50% at 80% 70%, - rgba(105, 238, 150, 0.4) 0%, - rgba(158, 188, 207, 0.4) 59%, + rgba(105, 238, 150, 0.22) 0%, + rgba(158, 188, 207, 0.16) 59%, rgba(195, 192, 225, 0) 100% ), radial-gradient( 50% 50% at 50% 50%, - rgba(105, 238, 150, 0.4) 0%, - rgba(145, 155, 200, 0.4) 59%, + rgba(105, 238, 150, 0.18) 0%, + rgba(145, 155, 200, 0.14) 59%, rgba(195, 192, 225, 0) 100% ), radial-gradient( 50% 50% at 30% 80%, - rgba(105, 238, 150, 0.4) 0%, - rgba(181, 139, 201, 0.4) 59%, + rgba(105, 238, 150, 0.18) 0%, + rgba(181, 139, 201, 0.14) 59%, rgba(195, 192, 225, 0) 100% ), radial-gradient( 50% 50% at 70% 20%, - rgba(105, 238, 150, 0.4) 0%, - rgba(145, 155, 200, 0.4) 59%, + rgba(105, 238, 150, 0.18) 0%, + rgba(145, 155, 200, 0.14) 59%, rgba(195, 192, 225, 0) 100% ), - rgb(225, 225, 245); + rgb(235, 242, 240); } body { @@ -55,10 +55,10 @@ body { } html.extended-view body { - @media screen and (min-width: 801px) { + @media screen and (min-width: 901px) { height: auto; - border-radius: 30px; - width: 111vh; + border-radius: 21px; + width: 112vh; --page-content-height: 93%; } } @@ -67,7 +67,7 @@ html.extended-view body { position: relative; height: 100%; - @media screen and (min-width: 801px) { + @media screen and (min-width: 901px) { display: flex; } } @@ -91,7 +91,7 @@ html.extended-view body { } html.extended-view .App { - @media screen and (min-width: 801px) { + @media screen and (min-width: 901px) { flex: none; height: 93%; overflow-y: hidden; From b3c738cf856cdc05d81854a440a83f910503cff6 Mon Sep 17 00:00:00 2001 From: owlsua Date: Mon, 3 Aug 2026 13:50:28 +0200 Subject: [PATCH 25/26] refactor(styles): move the extended view breakpoint to 900px Viewport widths of 801-900px now render the side panel layout instead of the standalone window one. The value is a literal in every CSS file, replaced across the tree; the popup window width in background-script.js and the dev server port checks look similar but are unrelated. --- public/index.css | 2 +- .../BrandBottomLogo.module.css | 2 +- .../basic/BrandPanel/BrandPanel.module.css | 2 +- src/components/basic/LogoRound/LogoRound.css | 2 +- .../basic/PageWrapper/PageWrapper.module.css | 2 +- src/components/composed/Balance/Balance.css | 10 ++++----- .../composed/Header/Header.module.css | 6 ++--- .../composed/InputList/InputsList.module.css | 2 +- .../composed/ManualSwap/ManualSwap.css | 2 +- .../composed/PopUp/Popup.module.css | 2 +- .../SendPageHeader/SendPageHeader.module.css | 4 ++-- .../composed/Sidebar/Sidebar.module.css | 2 +- .../SwapInterface/SwapInterface.module.css | 2 +- .../WalletHeader/WalletHeader.module.css | 4 ++-- .../CreateAccount/CreateAccount.module.css | 2 +- .../Dashboard/CryptoSharesChart.css | 10 ++++----- .../containers/Dashboard/Statistics.css | 12 +++++----- .../WalletDetails.module.css | 6 ++--- .../Wallet/Nft/NftDetails.module.css | 6 ++--- .../containers/Wallet/Nft/NftList.module.css | 2 +- .../containers/Wallet/TransactionButton.css | 2 +- .../containers/Wallet/TransactionsList.css | 2 +- .../layouts/VerticalGroup/VerticalGroup.css | 2 +- .../ConfirmBtcTransaction.module.css | 2 +- .../CreateRestore/CreateRestore.module.css | 22 +++++++++---------- src/pages/Dashboard/Dashboard.css | 4 ++-- src/pages/Login/Login.module.css | 4 ++-- src/pages/MessagePage/MessagePage.css | 2 +- src/pages/OrderSwap/OrderSwap.module.css | 2 +- .../SignExternalTransaction.css | 2 +- .../SignInternalTransaction.module.css | 2 +- 31 files changed, 64 insertions(+), 64 deletions(-) diff --git a/public/index.css b/public/index.css index 08958707..a4857239 100644 --- a/public/index.css +++ b/public/index.css @@ -1,4 +1,4 @@ -@media screen and (min-width: 801px) { +@media screen and (min-width: 901px) { html.extended-view { display: flex; justify-content: center; diff --git a/src/components/basic/BrandBottomLogo/BrandBottomLogo.module.css b/src/components/basic/BrandBottomLogo/BrandBottomLogo.module.css index 463ca569..ece1241e 100644 --- a/src/components/basic/BrandBottomLogo/BrandBottomLogo.module.css +++ b/src/components/basic/BrandBottomLogo/BrandBottomLogo.module.css @@ -2,7 +2,7 @@ display: none; } -@media screen and (max-width: 800px) { +@media screen and (max-width: 900px) { .brandBottomLogo { position: absolute; left: 10px; diff --git a/src/components/basic/BrandPanel/BrandPanel.module.css b/src/components/basic/BrandPanel/BrandPanel.module.css index c1c32e4b..54e33516 100644 --- a/src/components/basic/BrandPanel/BrandPanel.module.css +++ b/src/components/basic/BrandPanel/BrandPanel.module.css @@ -1,7 +1,7 @@ .brandPanel { display: none; - @media screen and (min-width: 801px) { + @media screen and (min-width: 901px) { position: relative; display: flex; align-items: center; diff --git a/src/components/basic/LogoRound/LogoRound.css b/src/components/basic/LogoRound/LogoRound.css index b2c38221..821a445b 100644 --- a/src/components/basic/LogoRound/LogoRound.css +++ b/src/components/basic/LogoRound/LogoRound.css @@ -5,7 +5,7 @@ width: 80px; min-width: 80px; - @media screen and (min-width: 801px) { + @media screen and (min-width: 901px) { height: 90px; width: 90px; min-width: 90px; diff --git a/src/components/basic/PageWrapper/PageWrapper.module.css b/src/components/basic/PageWrapper/PageWrapper.module.css index 69c099ea..135c19c6 100644 --- a/src/components/basic/PageWrapper/PageWrapper.module.css +++ b/src/components/basic/PageWrapper/PageWrapper.module.css @@ -7,7 +7,7 @@ flex: 1; min-height: 0; - @media screen and (min-width: 801px) { + @media screen and (min-width: 901px) { padding: 2rem; } } diff --git a/src/components/composed/Balance/Balance.css b/src/components/composed/Balance/Balance.css index 2c036f45..b6cfd78b 100644 --- a/src/components/composed/Balance/Balance.css +++ b/src/components/composed/Balance/Balance.css @@ -14,7 +14,7 @@ justify-content: flex-start; } - @media screen and (min-width: 801px) { + @media screen and (min-width: 901px) { flex-direction: column; align-items: flex-start; justify-content: flex-start; @@ -29,7 +29,7 @@ color: rgba(var(--color-black), 0.45); margin-bottom: 4px; - @media screen and (min-width: 801px) { + @media screen and (min-width: 901px) { font-size: 1.1rem; } } @@ -46,7 +46,7 @@ font-weight: 700; color: rgb(var(--color-black)); - @media screen and (min-width: 801px) { + @media screen and (min-width: 901px) { font-size: 2rem; } } @@ -56,7 +56,7 @@ font-weight: 600; color: rgba(var(--color-black), 0.35); - @media screen and (min-width: 801px) { + @media screen and (min-width: 901px) { font-size: 1rem; } } @@ -95,7 +95,7 @@ width: 100%; } - @media screen and (min-width: 801px) { + @media screen and (min-width: 901px) { width: 100%; } } diff --git a/src/components/composed/Header/Header.module.css b/src/components/composed/Header/Header.module.css index cb5ef6c7..7c2bc94b 100644 --- a/src/components/composed/Header/Header.module.css +++ b/src/components/composed/Header/Header.module.css @@ -14,7 +14,7 @@ align-items: center; gap: 10px; - @media screen and (min-width: 801px) { + @media screen and (min-width: 901px) { display: none; } } @@ -75,7 +75,7 @@ right: 22px; overflow: visible; - @media screen and (min-width: 801px) { + @media screen and (min-width: 901px) { display: none; } } @@ -86,7 +86,7 @@ top: 16px; right: 22px; - @media screen and (min-width: 801px) { + @media screen and (min-width: 901px) { display: flex; } } diff --git a/src/components/composed/InputList/InputsList.module.css b/src/components/composed/InputList/InputsList.module.css index ecad7d94..6edac4cc 100644 --- a/src/components/composed/InputList/InputsList.module.css +++ b/src/components/composed/InputList/InputsList.module.css @@ -4,7 +4,7 @@ flex-wrap: wrap; overflow-y: auto; - @media screen and (max-width: 800px) { + @media screen and (max-width: 900px) { max-height: 60vh; } } diff --git a/src/components/composed/ManualSwap/ManualSwap.css b/src/components/composed/ManualSwap/ManualSwap.css index feeb8a25..970f4e6e 100644 --- a/src/components/composed/ManualSwap/ManualSwap.css +++ b/src/components/composed/ManualSwap/ManualSwap.css @@ -8,7 +8,7 @@ font-weight: bold; margin-bottom: var(--space-lg); - @media screen and (min-width: 801px) { + @media screen and (min-width: 901px) { margin-bottom: var(--space-4xl); } } diff --git a/src/components/composed/PopUp/Popup.module.css b/src/components/composed/PopUp/Popup.module.css index 3d706c0b..52d4d053 100644 --- a/src/components/composed/PopUp/Popup.module.css +++ b/src/components/composed/PopUp/Popup.module.css @@ -41,7 +41,7 @@ animation-timing-function: ease; cursor: default; - @media screen and (min-width: 801px) { + @media screen and (min-width: 901px) { top: 40px; right: 40px; bottom: 40px; diff --git a/src/components/composed/SendPageHeader/SendPageHeader.module.css b/src/components/composed/SendPageHeader/SendPageHeader.module.css index ea2d08e7..8fcdb575 100644 --- a/src/components/composed/SendPageHeader/SendPageHeader.module.css +++ b/src/components/composed/SendPageHeader/SendPageHeader.module.css @@ -8,7 +8,7 @@ color: rgb(var(--color-black)); margin: 0; - @media screen and (min-width: 801px) { + @media screen and (min-width: 901px) { font-size: 28px; } } @@ -17,7 +17,7 @@ font-size: 22px; color: rgb(var(--color-main-green)); - @media screen and (min-width: 801px) { + @media screen and (min-width: 901px) { font-size: 28px; } } diff --git a/src/components/composed/Sidebar/Sidebar.module.css b/src/components/composed/Sidebar/Sidebar.module.css index ca65a5fa..3381a843 100644 --- a/src/components/composed/Sidebar/Sidebar.module.css +++ b/src/components/composed/Sidebar/Sidebar.module.css @@ -1,7 +1,7 @@ .sidebar { display: none; - @media screen and (min-width: 801px) { + @media screen and (min-width: 901px) { display: flex; flex-direction: column; width: 260px; diff --git a/src/components/composed/SwapInterface/SwapInterface.module.css b/src/components/composed/SwapInterface/SwapInterface.module.css index bde6675e..f87442de 100644 --- a/src/components/composed/SwapInterface/SwapInterface.module.css +++ b/src/components/composed/SwapInterface/SwapInterface.module.css @@ -11,7 +11,7 @@ box-shadow: none; } -@media screen and (min-width: 801px) { +@media screen and (min-width: 901px) { .form { gap: var(--space-md); padding: var(--space-3xl) var(--space-5xl); diff --git a/src/components/composed/WalletHeader/WalletHeader.module.css b/src/components/composed/WalletHeader/WalletHeader.module.css index 00a12ecb..ed75a430 100644 --- a/src/components/composed/WalletHeader/WalletHeader.module.css +++ b/src/components/composed/WalletHeader/WalletHeader.module.css @@ -24,7 +24,7 @@ margin: 0; color: rgb(var(--color-black)); - @media screen and (min-width: 801px) { + @media screen and (min-width: 901px) { font-size: 1.4rem; } } @@ -45,5 +45,5 @@ font-weight: 600; } -@media screen and (min-width: 801px) { +@media screen and (min-width: 901px) { } diff --git a/src/components/containers/CreateAccount/CreateAccount.module.css b/src/components/containers/CreateAccount/CreateAccount.module.css index 7c300e87..55f8a13b 100644 --- a/src/components/containers/CreateAccount/CreateAccount.module.css +++ b/src/components/containers/CreateAccount/CreateAccount.module.css @@ -36,7 +36,7 @@ margin-bottom: var(--space-xl); } -@media screen and (max-width: 800px) { +@media screen and (max-width: 900px) { .setAccountContainer { flex: 1; min-height: 0; diff --git a/src/components/containers/Dashboard/CryptoSharesChart.css b/src/components/containers/Dashboard/CryptoSharesChart.css index 4f365fa9..163211d0 100644 --- a/src/components/containers/Dashboard/CryptoSharesChart.css +++ b/src/components/containers/Dashboard/CryptoSharesChart.css @@ -10,7 +10,7 @@ overflow: visible; /* Narrow side panel: let the scalable chart shrink to the panel width */ - @media screen and (max-width: 800px) { + @media screen and (max-width: 900px) { width: 100%; max-width: 400px; height: auto; @@ -28,7 +28,7 @@ font-weight: bold; font-size: 1.875rem; - @media screen and (max-width: 800px) { + @media screen and (max-width: 900px) { font-size: 1.4rem; } } @@ -50,7 +50,7 @@ font-weight: 800; line-height: 1; - @media screen and (max-width: 800px) { + @media screen and (max-width: 900px) { font-size: 2rem; } } @@ -66,7 +66,7 @@ font-size: 4.2rem; font-weight: 800; - @media screen and (max-width: 800px) { + @media screen and (max-width: 900px) { font-size: 2.6rem; } } @@ -76,7 +76,7 @@ font-weight: 800; opacity: 0.25; - @media screen and (max-width: 800px) { + @media screen and (max-width: 900px) { font-size: 2.6rem; } } diff --git a/src/components/containers/Dashboard/Statistics.css b/src/components/containers/Dashboard/Statistics.css index fc6dab28..9de439e0 100644 --- a/src/components/containers/Dashboard/Statistics.css +++ b/src/components/containers/Dashboard/Statistics.css @@ -10,7 +10,7 @@ height: 100%; width: 100%; - @media screen and (max-width: 800px) { + @media screen and (max-width: 900px) { justify-content: center; } } @@ -27,7 +27,7 @@ position: relative; /* Narrow side panel: place the stats side by side under the chart */ - @media screen and (max-width: 800px) { + @media screen and (max-width: 900px) { flex-direction: row; justify-content: center; } @@ -43,7 +43,7 @@ background: rgb(var(--color-light-gray)); opacity: 0.5; - @media screen and (max-width: 800px) { + @media screen and (max-width: 900px) { display: none; } } @@ -60,7 +60,7 @@ justify-content: center; position: relative; - @media screen and (max-width: 800px) { + @media screen and (max-width: 900px) { padding: 4px 16px; text-align: center; align-items: center; @@ -78,7 +78,7 @@ opacity: 0.5; /* Turn the horizontal separator into a vertical one for the row layout */ - @media screen and (max-width: 800px) { + @media screen and (max-width: 900px) { top: 18%; bottom: 18%; left: 0; @@ -114,7 +114,7 @@ font-size: 2.7rem; line-height: 1.1; - @media screen and (max-width: 800px) { + @media screen and (max-width: 900px) { font-size: 1.6rem; } } diff --git a/src/components/containers/RestoreAccount/RestoreAccountJson/WalletDetails.module.css b/src/components/containers/RestoreAccount/RestoreAccountJson/WalletDetails.module.css index 941935f7..f28391f5 100644 --- a/src/components/containers/RestoreAccount/RestoreAccountJson/WalletDetails.module.css +++ b/src/components/containers/RestoreAccount/RestoreAccountJson/WalletDetails.module.css @@ -4,7 +4,7 @@ text-align: center; color: rgb(var(--color-black)); - @media (min-width: 801px) { + @media (min-width: 901px) { margin-bottom: var(--space-xs); } } @@ -14,7 +14,7 @@ text-align: center; color: rgb(var(--color-dark-gray)); - @media (min-width: 801px) { + @media (min-width: 901px) { margin-bottom: var(--space-2xl); } } @@ -80,7 +80,7 @@ border: 1px solid rgba(30, 187, 129, 0.2); border-radius: 12px; - @media (min-width: 801px) { + @media (min-width: 901px) { margin-top: var(--space-lg); } } diff --git a/src/components/containers/Wallet/Nft/NftDetails.module.css b/src/components/containers/Wallet/Nft/NftDetails.module.css index 23409da7..b8382f7b 100644 --- a/src/components/containers/Wallet/Nft/NftDetails.module.css +++ b/src/components/containers/Wallet/Nft/NftDetails.module.css @@ -3,7 +3,7 @@ max-width: 510px; height: 500px; - @media screen and (min-width: 801px) { + @media screen and (min-width: 901px) { height: 605px; } } @@ -19,7 +19,7 @@ background: rgb(var(--color-dim-green)); border-radius: 50%; - @media screen and (min-width: 801px) { + @media screen and (min-width: 901px) { width: 200px; height: 200px; } @@ -51,7 +51,7 @@ overflow: auto; margin-bottom: 20px; - @media screen and (min-width: 801px) { + @media screen and (min-width: 901px) { height: 630px; } } diff --git a/src/components/containers/Wallet/Nft/NftList.module.css b/src/components/containers/Wallet/Nft/NftList.module.css index 06b1e5a8..7021e759 100644 --- a/src/components/containers/Wallet/Nft/NftList.module.css +++ b/src/components/containers/Wallet/Nft/NftList.module.css @@ -9,7 +9,7 @@ overflow: auto; padding: 7px; - @media screen and (min-width: 801px) { + @media screen and (min-width: 901px) { padding: 10px; flex-grow: 1; } diff --git a/src/components/containers/Wallet/TransactionButton.css b/src/components/containers/Wallet/TransactionButton.css index b8c9cb20..6f8c02d2 100644 --- a/src/components/containers/Wallet/TransactionButton.css +++ b/src/components/containers/Wallet/TransactionButton.css @@ -23,7 +23,7 @@ cursor: pointer; transition: background-color 0.2s ease; - @media screen and (min-width: 801px) { + @media screen and (min-width: 901px) { width: 60px; height: 60px; min-width: 60px; diff --git a/src/components/containers/Wallet/TransactionsList.css b/src/components/containers/Wallet/TransactionsList.css index a3f73a73..96f8b70f 100644 --- a/src/components/containers/Wallet/TransactionsList.css +++ b/src/components/containers/Wallet/TransactionsList.css @@ -6,7 +6,7 @@ padding: 7px; animation: fadeInList 0.3s ease-in-out; - @media screen and (min-width: 801px) { + @media screen and (min-width: 901px) { padding: 10px; flex-grow: 1; } diff --git a/src/components/layouts/VerticalGroup/VerticalGroup.css b/src/components/layouts/VerticalGroup/VerticalGroup.css index 11ceda40..fa2baed0 100644 --- a/src/components/layouts/VerticalGroup/VerticalGroup.css +++ b/src/components/layouts/VerticalGroup/VerticalGroup.css @@ -5,7 +5,7 @@ gap: 0.7rem; max-width: 100%; - @media screen and (min-width: 801px) { + @media screen and (min-width: 901px) { max-height: 100%; } } diff --git a/src/pages/ConfirmBtcTransaction/ConfirmBtcTransaction.module.css b/src/pages/ConfirmBtcTransaction/ConfirmBtcTransaction.module.css index 14b52790..092514f3 100644 --- a/src/pages/ConfirmBtcTransaction/ConfirmBtcTransaction.module.css +++ b/src/pages/ConfirmBtcTransaction/ConfirmBtcTransaction.module.css @@ -29,7 +29,7 @@ flex-direction: column; height: 70%; - @media screen and (min-width: 801px) { + @media screen and (min-width: 901px) { height: 80%; } } diff --git a/src/pages/CreateRestore/CreateRestore.module.css b/src/pages/CreateRestore/CreateRestore.module.css index 10ca8b9f..82b4ca4a 100644 --- a/src/pages/CreateRestore/CreateRestore.module.css +++ b/src/pages/CreateRestore/CreateRestore.module.css @@ -12,7 +12,7 @@ height: 100%; text-align: center; - @media screen and (max-width: 800px) { + @media screen and (max-width: 900px) { padding-bottom: var(--space-5xl); } } @@ -27,7 +27,7 @@ box-shadow: rgba(30, 187, 129, 0.18) 0px 10px 30px; border: 1px solid #e8ebf0; - @media screen and (min-width: 801px) { + @media screen and (min-width: 901px) { width: 90px; height: 90px; padding: var(--space-xl); @@ -43,7 +43,7 @@ color: rgba(var(--color-black), 0.75); margin: 0 0 var(--space-3xl) 0; - @media screen and (min-width: 801px) { + @media screen and (min-width: 901px) { margin: 0 0 var(--space-5xl) 0; } } @@ -51,7 +51,7 @@ .logoText { margin-bottom: var(--space-2xl); - @media screen and (min-width: 801px) { + @media screen and (min-width: 901px) { margin-bottom: var(--space-4xl); } } @@ -63,7 +63,7 @@ color: rgb(var(--color-black)); margin: var(--space-xs) 0px var(--space-sm); - @media screen and (min-width: 801px) { + @media screen and (min-width: 901px) { font-size: var(--font-size-5xl); margin: 0 0 var(--space-md) 0; } @@ -76,7 +76,7 @@ color: rgba(var(--color-black), 0.6); margin: 0px 0px var(--space-3xl); - @media screen and (min-width: 801px) { + @media screen and (min-width: 901px) { font-size: var(--font-size-lg); margin: 0 0 var(--space-5xl) 0; max-width: 460px; @@ -90,7 +90,7 @@ width: 100%; max-width: 320px; - @media screen and (min-width: 801px) { + @media screen and (min-width: 901px) { max-width: 360px; } } @@ -127,7 +127,7 @@ gap: var(--space-xs); margin-top: var(--space-3xl); - @media screen and (min-width: 801px) { + @media screen and (min-width: 901px) { margin-top: var(--space-5xl); gap: var(--space-md); } @@ -137,7 +137,7 @@ font-size: var(--font-size-sm); color: rgba(var(--color-black), 0.35); - @media screen and (min-width: 801px) { + @media screen and (min-width: 901px) { font-size: var(--font-size-md); } } @@ -145,7 +145,7 @@ .badgeDot { font-size: 6px; - @media screen and (min-width: 801px) { + @media screen and (min-width: 901px) { font-size: 8px; } } @@ -160,7 +160,7 @@ width: 14px; height: 14px; - @media screen and (min-width: 801px) { + @media screen and (min-width: 901px) { width: 16px; height: 16px; } diff --git a/src/pages/Dashboard/Dashboard.css b/src/pages/Dashboard/Dashboard.css index fbca453b..bdcbff5e 100644 --- a/src/pages/Dashboard/Dashboard.css +++ b/src/pages/Dashboard/Dashboard.css @@ -7,11 +7,11 @@ gap: 55px; min-height: max-content; - @media screen and (min-width: 801px) { + @media screen and (min-width: 901px) { margin-bottom: 2.75rem; } - @media screen and (max-width: 800px) { + @media screen and (max-width: 900px) { flex-direction: column; gap: 1rem; margin-bottom: 1rem; diff --git a/src/pages/Login/Login.module.css b/src/pages/Login/Login.module.css index 3903e27e..911abdb6 100644 --- a/src/pages/Login/Login.module.css +++ b/src/pages/Login/Login.module.css @@ -3,7 +3,7 @@ flex-direction: row; padding: 0; - @media screen and (min-width: 801px) { + @media screen and (min-width: 901px) { padding: 0; } } @@ -13,7 +13,7 @@ flex: 1; padding: var(--space-lg); - @media screen and (min-width: 801px) { + @media screen and (min-width: 901px) { padding: var(--space-4xl); } } diff --git a/src/pages/MessagePage/MessagePage.css b/src/pages/MessagePage/MessagePage.css index ae9cedb4..f36db2b1 100644 --- a/src/pages/MessagePage/MessagePage.css +++ b/src/pages/MessagePage/MessagePage.css @@ -25,7 +25,7 @@ height: 362px; overflow: auto; - @media screen and (min-width: 801px) { + @media screen and (min-width: 901px) { height: auto; } } diff --git a/src/pages/OrderSwap/OrderSwap.module.css b/src/pages/OrderSwap/OrderSwap.module.css index 5fc2ad33..61e3b9b0 100644 --- a/src/pages/OrderSwap/OrderSwap.module.css +++ b/src/pages/OrderSwap/OrderSwap.module.css @@ -32,7 +32,7 @@ min-height: 0; } -@media screen and (min-width: 801px) { +@media screen and (min-width: 901px) { .content { gap: var(--space-lg); } diff --git a/src/pages/SignExternalTransaction/SignExternalTransaction.css b/src/pages/SignExternalTransaction/SignExternalTransaction.css index 5d3a3b88..720de7de 100644 --- a/src/pages/SignExternalTransaction/SignExternalTransaction.css +++ b/src/pages/SignExternalTransaction/SignExternalTransaction.css @@ -30,7 +30,7 @@ flex-direction: column; height: 70%; - @media screen and (min-width: 801px) { + @media screen and (min-width: 901px) { height: 80%; } } diff --git a/src/pages/SignInternalTransaction/SignInternalTransaction.module.css b/src/pages/SignInternalTransaction/SignInternalTransaction.module.css index c63fd6b9..e52a44f1 100644 --- a/src/pages/SignInternalTransaction/SignInternalTransaction.module.css +++ b/src/pages/SignInternalTransaction/SignInternalTransaction.module.css @@ -29,7 +29,7 @@ flex-direction: column; height: 70%; - @media screen and (min-width: 801px) { + @media screen and (min-width: 901px) { height: 80%; } } From 97e2c024413f1707b6975c57104359f641343086 Mon Sep 17 00:00:00 2001 From: owlsua Date: Mon, 3 Aug 2026 13:58:36 +0200 Subject: [PATCH 26/26] chore(release): bump version to 1.6.1 --- package-lock.json | 4 ++-- package.json | 2 +- public/manifestDefault.json | 2 +- public/manifestFirefox.json | 2 +- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index 498f5a1e..9a15afa2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "browser-extension", - "version": "1.6.0", + "version": "1.6.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "browser-extension", - "version": "1.6.0", + "version": "1.6.1", "dependencies": { "@bitcoinerlab/secp256k1": "^1.2.0", "@mintlayer/sdk": "1.0.37", diff --git a/package.json b/package.json index 3a370287..e774cc43 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "browser-extension", - "version": "1.6.0", + "version": "1.6.1", "private": true, "dependencies": { "@bitcoinerlab/secp256k1": "^1.2.0", diff --git a/public/manifestDefault.json b/public/manifestDefault.json index d62c69af..9d6cd56f 100644 --- a/public/manifestDefault.json +++ b/public/manifestDefault.json @@ -1,7 +1,7 @@ { "manifest_version": 3, "name": "Mojito - A Mintlayer Wallet", - "version": "1.6.0", + "version": "1.6.1", "short_name": "Mojito", "description": "Mojito is a non-custodial decentralized crypto wallet that lets you send and receive BTC and ML from any other address.", "homepage_url": "https://www.mintlayer.org/", diff --git a/public/manifestFirefox.json b/public/manifestFirefox.json index f4274cf6..706c3fdf 100644 --- a/public/manifestFirefox.json +++ b/public/manifestFirefox.json @@ -1,7 +1,7 @@ { "manifest_version": 3, "name": "Mojito - A Mintlayer Wallet", - "version": "1.6.0", + "version": "1.6.1", "description": "Mojito is a non-custodial decentralized crypto wallet that lets you send and receive BTC and ML from any other address.", "homepage_url": "https://www.mintlayer.org/", "icons": {