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/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..a4857239 100644 --- a/public/index.css +++ b/public/index.css @@ -1,12 +1,12 @@ -@media screen and (min-width: 801px) { - html { +@media screen and (min-width: 901px) { + 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..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/", @@ -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..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": { @@ -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/assets/styles/constants.css b/src/assets/styles/constants.css index 25d16e62..f7f5847f 100644 --- a/src/assets/styles/constants.css +++ b/src/assets/styles/constants.css @@ -62,6 +62,58 @@ --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: 26px; + --font-size-6xl: 32px; + --font-size-display: 80px; + + --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: 22px; + --font-size-6xl: 26px; + --font-size-display: 64px; + + --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 { diff --git a/src/assets/styles/index.css b/src/assets/styles/index.css index bca69fb3..2320267d 100644 --- a/src/assets/styles/index.css +++ b/src/assets/styles/index.css @@ -13,48 +13,53 @@ 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 { -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; +} - @media screen and (min-width: 801px) { +html.extended-view body { + @media screen and (min-width: 901px) { height: auto; - border-radius: 30px; - width: 111vh; + border-radius: 21px; + width: 112vh; + --page-content-height: 93%; } } @@ -62,7 +67,7 @@ body { position: relative; height: 100%; - @media screen and (min-width: 801px) { + @media screen and (min-width: 901px) { display: flex; } } @@ -79,10 +84,17 @@ body { position: relative; display: flex; flex-direction: column; - height: 530px; + flex: 1; + height: auto; + min-height: 0; + overflow-y: auto; +} - @media screen and (min-width: 801px) { +html.extended-view .App { + @media screen and (min-width: 901px) { + flex: none; height: 93%; + overflow-y: hidden; } } 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/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..ece1241e --- /dev/null +++ b/src/components/basic/BrandBottomLogo/BrandBottomLogo.module.css @@ -0,0 +1,32 @@ +.brandBottomLogo { + display: none; +} + +@media screen and (max-width: 900px) { + .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/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 b70e9f3c..135c19c6 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: 530px; + height: var(--page-content-height, auto); padding: 1rem; flex: 1; + min-height: 0; - @media screen and (min-width: 801px) { - height: 93%; + @media screen and (min-width: 901px) { padding: 2rem; } } 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/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/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 { diff --git a/src/components/composed/Balance/Balance.css b/src/components/composed/Balance/Balance.css index 7b8a0465..b6cfd78b 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 (min-width: 801px) { + @media screen and (max-width: 560px) { + flex-direction: column; + align-items: flex-start; + justify-content: flex-start; + } + + @media screen and (min-width: 901px) { flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: 20px 24px; - margin: 0 0 20px 0; border-radius: 20px; } } @@ -24,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; } } @@ -41,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; } } @@ -51,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; } } @@ -85,7 +90,12 @@ margin-top: 12px; width: 50%; gap: 10px; - @media screen and (min-width: 801px) { + + @media screen and (max-width: 560px) { + width: 100%; + } + + @media screen and (min-width: 901px) { width: 100%; } } 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' 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/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 d6faf5af..6edac4cc 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: 900px) { + 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/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/ManualSwap/ManualSwap.css b/src/components/composed/ManualSwap/ManualSwap.css index d6e916ff..970f4e6e 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; + @media screen and (min-width: 901px) { + 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/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/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/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/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/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..f87442de 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) { +@media screen and (min-width: 901px) { .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/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/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/CreateAccount/CreateAccount.module.css b/src/components/containers/CreateAccount/CreateAccount.module.css index e120cee7..55f8a13b 100644 --- a/src/components/containers/CreateAccount/CreateAccount.module.css +++ b/src/components/containers/CreateAccount/CreateAccount.module.css @@ -10,19 +10,20 @@ } .setAccountFormWords { - margin-top: 2rem; + margin-top: var(--space-4xl); } .itemWrapper { width: 400px; + max-width: 100%; } .setAccountInput { - padding: 1.2rem 1.7rem; + padding: var(--space-xl) var(--space-3xl); } .createSubmitIcon { - margin-left: 10px; + margin-left: var(--space-sm); width: 15px; } @@ -31,6 +32,40 @@ } .title { - font-size: 20px; - margin-bottom: 20px; + font-size: var(--font-size-2xl); + margin-bottom: var(--space-xl); +} + +@media screen and (max-width: 900px) { + .setAccountContainer { + flex: 1; + min-height: 0; + width: 100%; + } + + .setAccountFormWords { + display: flex; + flex-direction: column; + flex: 1; + min-height: 0; + margin-top: var(--space-2xl); + } + + .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/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/Dashboard/CryptoList.css b/src/components/containers/Dashboard/CryptoList.css index cbc24e57..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,18 +23,42 @@ .crypto-list { display: flex; flex-direction: column; - gap: 0.4rem; - height: 240px; + 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; @@ -45,10 +69,14 @@ 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: 900px) { + padding: 8px 14px 8px 8px; + } } .logo-wrapper { @@ -65,11 +93,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: 900px) { + 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: 900px) { + font-size: 1rem; + } } .crypto-item.add-item h5 { @@ -116,6 +156,10 @@ .crypto-item .name-values .values dt { font-weight: thin; margin: 0 1rem; + + @media screen and (max-width: 900px) { + margin: 0 0.4rem; + } } .crypto-item .name-values .values dd { @@ -125,22 +169,41 @@ } .crypto-item svg { - height: 60px; - width: 60px; + height: 56px; + width: 56px; + + @media screen and (max-width: 900px) { + height: 50px; + width: 50px; + } } .crypto-item .logo-round { - height: 60px; - width: 60px; - min-width: 60px; + 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: 900px) { + height: 50px; + width: 50px; + min-width: 50px; + min-height: 50px; + font-size: 14px; + } } .crypto-item .token-logo-round img { @@ -156,6 +219,11 @@ border-radius: 50%; height: 60px; width: 60px; + + @media screen and (max-width: 900px) { + height: 50px; + width: 50px; + } } .crypto-item .connect-logo img { 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 ( - <> - + + ) : 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/components/containers/Dashboard/CryptoSharesChart.css b/src/components/containers/Dashboard/CryptoSharesChart.css index e9abd733..163211d0 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: 900px) { + 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: 900px) { + 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: 900px) { + font-size: 2rem; + } } .balance-symbol { @@ -49,10 +65,18 @@ .balance-integer { font-size: 4.2rem; font-weight: 800; + + @media screen and (max-width: 900px) { + font-size: 2.6rem; + } } .balance-decimal { font-size: 4.2rem; font-weight: 800; opacity: 0.25; + + @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 02bb6ba9..9de439e0 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: 900px) { + 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: 900px) { + 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: 900px) { + display: none; + } } .stat-item { @@ -45,6 +59,12 @@ flex: 1; justify-content: center; position: relative; + + @media screen and (max-width: 900px) { + 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: 900px) { + 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: 900px) { + font-size: 1.6rem; + } } .stats-positive dt { diff --git a/src/components/containers/Login/AccountCard.module.css b/src/components/containers/Login/AccountCard.module.css index 3a5b3250..29ea38c6 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; - min-height: 72px; - padding: 16px 18px; + gap: var(--space-lg); + 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: 18px 22px; + @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 { @@ -41,14 +36,10 @@ } .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; - } } .deleteButton { diff --git a/src/components/containers/Login/Login.module.css b/src/components/containers/Login/Login.module.css index d016fe87..2d81a7a0 100644 --- a/src/components/containers/Login/Login.module.css +++ b/src/components/containers/Login/Login.module.css @@ -16,40 +16,40 @@ } .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; + @media screen and (min-width: 901px) { + font-size: var(--font-size-5xl); + margin: var(--space-2xl) 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; + @media screen and (min-width: 901px) { + font-size: var(--font-size-lg); + margin: 0 0 var(--space-3xl); } } .list { display: flex; flex-direction: column; - gap: 12px; + gap: var(--space-md); width: 100%; max-width: 400px; min-height: 312px; flex: 1; overflow: auto; - @media screen and (min-width: 801px) { - gap: 14px; + @media screen and (min-width: 901px) { + gap: var(--space-lg); max-width: 460px; } } @@ -58,26 +58,25 @@ 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-3xl); 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, color 0.2s; - @media screen and (min-width: 801px) { + @media screen and (min-width: 901px) { max-width: 460px; - padding: 18px; + padding: var(--space-xl); border-radius: 18px; - font-size: 15px; } } @@ -87,7 +86,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..e45863a2 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; @@ -29,51 +29,22 @@ .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: 30px; -} - -.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: 24px; - font-weight: 400; - text-align: center; - color: rgb(var(--color-black)); -} - .loginButtonIcon { width: 13px; 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 +55,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/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/components/containers/RestoreAccount/RestoreAccountJson/FileUpload.module.css b/src/components/containers/RestoreAccount/RestoreAccountJson/FileUpload.module.css index 51deec01..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)); @@ -29,6 +29,10 @@ transition: border-color 0.2s, background 0.2s; + + @media screen and (max-width: 440px) { + min-width: 100%; + } } .dropzone:hover { @@ -63,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..f28391f5 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; + @media (min-width: 901px) { + 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; + @media (min-width: 901px) { + 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; + @media (min-width: 901px) { + 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 f849c00d..5a8eda88 100644 --- a/src/components/containers/RestoreAccount/RestoreAccountMnemonic/RestoreAccountMnemonic.css +++ b/src/components/containers/RestoreAccount/RestoreAccountMnemonic/RestoreAccountMnemonic.css @@ -11,27 +11,28 @@ } .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 { width: 400px; + max-width: 100%; } .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 { @@ -51,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/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 && ( { - 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} + + )}
    ) } 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 { diff --git a/src/components/containers/Wallet/TransactionsList.css b/src/components/containers/Wallet/TransactionsList.css index ec852ffb..96f8b70f 100644 --- a/src/components/containers/Wallet/TransactionsList.css +++ b/src/components/containers/Wallet/TransactionsList.css @@ -2,12 +2,11 @@ display: flex; flex-direction: column; gap: 0.4rem; - height: 19rem; overflow: auto; 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 8a346c5d..fa2baed0 100644 --- a/src/components/layouts/VerticalGroup/VerticalGroup.css +++ b/src/components/layouts/VerticalGroup/VerticalGroup.css @@ -3,8 +3,9 @@ display: flex; flex-direction: column; 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/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/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/CreateAccount/CreateAccount.module.css b/src/pages/CreateAccount/CreateAccount.module.css index 5963b48d..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: 24px; - 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...{' '} -

    - -     -     -
    + ) : ( { } const goToRestoreAccountPage = () => { - if (isDevMode) { - return navigate('/restore-account') - } - isExtended - ? navigate('/restore-account') - : expandHandler('/restore-account') + navigate('/restore-account') } return ( @@ -52,7 +46,6 @@ const CreateRestorePage = () => { data-testid="create-restore" className={styles.page} > -

    Mojito

    A fresh way to hold Mintlayer assets

    @@ -88,6 +81,7 @@ const CreateRestorePage = () => { Open source + ) } diff --git a/src/pages/CreateRestore/CreateRestore.module.css b/src/pages/CreateRestore/CreateRestore.module.css index 88376cfe..82b4ca4a 100644 --- a/src/pages/CreateRestore/CreateRestore.module.css +++ b/src/pages/CreateRestore/CreateRestore.module.css @@ -3,75 +3,82 @@ } .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: 900px) { + padding-bottom: var(--space-5xl); + } } .logoIcon { width: 80px; height: 80px; border-radius: 24px; - padding: 16px; - margin: 3% 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; - @media screen and (min-width: 801px) { - width: 110px; - height: 110px; - padding: 22px; - margin: 7% 0 15px 0; - border-radius: 32px; + @media screen and (min-width: 901px) { + width: 90px; + height: 90px; + padding: var(--space-xl); + margin: 0 0 var(--space-lg) 0; + border-radius: 28px; } } .title { - font-size: 18px; + font-size: var(--font-size-display); font-weight: 700; - color: rgb(var(--color-black)); - margin: 0 0 30px 0; + 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: 24px; - margin: 0 0 40px 0; + @media screen and (min-width: 901px) { + 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; + @media screen and (min-width: 901px) { + 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: 30px; - margin: 0 0 12px 0; + @media screen and (min-width: 901px) { + 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; + @media screen and (min-width: 901px) { + font-size: var(--font-size-lg); + margin: 0 0 var(--space-5xl) 0; max-width: 460px; } } @@ -79,26 +86,26 @@ .buttons { display: flex; flex-direction: column; - gap: 10px; + gap: var(--space-sm); width: 100%; max-width: 320px; - @media screen and (min-width: 801px) { + @media screen and (min-width: 901px) { max-width: 360px; } } .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 { @@ -106,7 +113,7 @@ height: 13px; max-width: 13px; max-height: 13px; - margin-left: 10px; + margin-left: var(--space-sm); } .restoreButton:hover .buttonIcon, @@ -117,28 +124,28 @@ .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; + @media screen and (min-width: 901px) { + 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; + @media screen and (min-width: 901px) { + font-size: var(--font-size-md); } } .badgeDot { font-size: 6px; - @media screen and (min-width: 801px) { + @media screen and (min-width: 901px) { font-size: 8px; } } @@ -146,14 +153,14 @@ .badgeWithIcon { display: inline-flex; align-items: center; - gap: 4px; + gap: var(--space-3xs); } .badgeIcon { 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 6634648f..bdcbff5e 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) { + @media screen and (min-width: 901px) { margin-bottom: 2.75rem; } + + @media screen and (max-width: 900px) { + flex-direction: column; + gap: 1rem; + margin-bottom: 1rem; + } } 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, ) diff --git a/src/pages/Login/Login.module.css b/src/pages/Login/Login.module.css index 711b8838..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; } } @@ -11,9 +11,9 @@ .page { display: flex; flex: 1; - padding: 1rem; + padding: var(--space-lg); - @media screen and (min-width: 801px) { - padding: 2rem; + @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 fcf85f16..61e3b9b0 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) { +@media screen and (min-width: 901px) { .content { - gap: 15px; + gap: var(--space-lg); } } diff --git a/src/pages/RestoreAccount/RestoreAccount.module.css b/src/pages/RestoreAccount/RestoreAccount.module.css index 4705b58c..eb960e86 100644 --- a/src/pages/RestoreAccount/RestoreAccount.module.css +++ b/src/pages/RestoreAccount/RestoreAccount.module.css @@ -6,54 +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; } - -.loadingWrapper { - 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; -} - -.loadingText { - margin-bottom: 60px; - font-size: 24px; - font-weight: 400; -} diff --git a/src/pages/RestoreAccount/RestoreAccount.tsx b/src/pages/RestoreAccount/RestoreAccount.tsx index e5c09817..46fe3801 100644 --- a/src/pages/RestoreAccount/RestoreAccount.tsx +++ b/src/pages/RestoreAccount/RestoreAccount.tsx @@ -5,9 +5,8 @@ import { AccountContext } from '@Contexts' import { Account } from '@Entities' import { BTC } from '@Cryptos' -import { Loading } from '@ComposedComponents' +import { LoadingScreen } from '@ComposedComponents' import { PageWrapper, OptionCard } from '@BasicComponents' -import { CenteredLayout, VerticalGroup } from '@LayoutComponents' import { RestoreAccount } from '@ContainerComponents' import { ReactComponent as IconDocumentFilled } from '@Assets/images/icon-document-filled.svg' import { ReactComponent as IconUpload } from '@Assets/images/icon-upload.svg' @@ -65,16 +64,7 @@ const RestoreAccountPage = () => { return ( {creatingWallet ? ( -

    - - -

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

    - -     -     -
    + ) : ( <> {!restoreMethod && ( 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/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 6f9f7851..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%; } } @@ -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 {