From f01dce32edeb6fa04c18dd2c1dea49f9ba3b5e68 Mon Sep 17 00:00:00 2001 From: lukaw3d Date: Tue, 23 Jan 2024 20:49:13 +0100 Subject: [PATCH 1/3] Move balance into the same row as Manage button on mobile --- .changelog/1838.feature.md | 1 + .../Toolbar/Features/Account/Account.tsx | 30 +++++++++---------- 2 files changed, 15 insertions(+), 16 deletions(-) create mode 100644 .changelog/1838.feature.md diff --git a/.changelog/1838.feature.md b/.changelog/1838.feature.md new file mode 100644 index 0000000000..fda0df2867 --- /dev/null +++ b/.changelog/1838.feature.md @@ -0,0 +1 @@ +Improve mobile layout diff --git a/src/app/components/Toolbar/Features/Account/Account.tsx b/src/app/components/Toolbar/Features/Account/Account.tsx index ec7da230db..4e4af7efde 100644 --- a/src/app/components/Toolbar/Features/Account/Account.tsx +++ b/src/app/components/Toolbar/Features/Account/Account.tsx @@ -92,22 +92,20 @@ export const Account = memo((props: AccountProps) => { {address} - - - {props.displayDerivation && } - {props.displayManageButton && ( - - { - // TODO: clicking using Tab + Enter on Manage only triggers parent listener `props.onClick`. - props.displayManageButton?.onClickManage(props.address) - e.stopPropagation() - }} - /> - - )} - + + {props.displayDerivation && } + {props.displayManageButton && ( + + { + // TODO: clicking using Tab + Enter on Manage only triggers parent listener `props.onClick`. + props.displayManageButton?.onClickManage(props.address) + e.stopPropagation() + }} + /> + + )} {props.displayBalance && ( {props.balance ? : } From 9e38d470c50321f6ba303e445dc961dc96b511d0 Mon Sep 17 00:00:00 2001 From: lukaw3d Date: Tue, 23 Jan 2024 20:49:31 +0100 Subject: [PATCH 2/3] Fix overflowing in ImportAccountsSelector --- src/app/components/Toolbar/Features/Account/Account.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/app/components/Toolbar/Features/Account/Account.tsx b/src/app/components/Toolbar/Features/Account/Account.tsx index 4e4af7efde..2b958555ec 100644 --- a/src/app/components/Toolbar/Features/Account/Account.tsx +++ b/src/app/components/Toolbar/Features/Account/Account.tsx @@ -59,7 +59,6 @@ export const Account = memo((props: AccountProps) => { border={{ color: props.isActive ? 'neutral-2' : 'brand' }} pad="small" flex={{ shrink: 0 }} - fill="horizontal" role="checkbox" aria-checked={props.isActive} onClick={props.onClick ? () => props.onClick!(props.address) : undefined} @@ -83,7 +82,7 @@ export const Account = memo((props: AccountProps) => { )} - + {props.name && ( {props.name} From db51c9c291a7b9cd8a6a166dd275fcc854c5bcb9 Mon Sep 17 00:00:00 2001 From: lukaw3d Date: Thu, 25 Jan 2024 17:11:23 +0100 Subject: [PATCH 3/3] Update jest snapshots --- .../__snapshots__/Account.test.tsx.snap | 74 ++++++------ .../__snapshots__/index.test.tsx.snap | 114 +++++++++--------- .../__snapshots__/index.test.tsx.snap | 47 +++----- 3 files changed, 108 insertions(+), 127 deletions(-) diff --git a/src/app/components/Toolbar/Features/Account/__tests__/__snapshots__/Account.test.tsx.snap b/src/app/components/Toolbar/Features/Account/__tests__/__snapshots__/Account.test.tsx.snap index 405c69f878..de97df42bb 100644 --- a/src/app/components/Toolbar/Features/Account/__tests__/__snapshots__/Account.test.tsx.snap +++ b/src/app/components/Toolbar/Features/Account/__tests__/__snapshots__/Account.test.tsx.snap @@ -30,7 +30,6 @@ exports[` should match snapshot 1`] = ` -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; - width: 100%; padding: 12px; border-radius: 5px; cursor: pointer; @@ -134,9 +133,7 @@ exports[` should match snapshot 1`] = ` -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - -webkit-flex: 1 0 auto; - -ms-flex: 1 0 auto; - flex: 1 0 auto; + width: 100%; } .c11 { @@ -165,6 +162,13 @@ exports[` should match snapshot 1`] = ` -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; } .c13 { @@ -185,7 +189,7 @@ exports[` should match snapshot 1`] = ` flex-direction: row; } -.c15 { +.c16 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -200,6 +204,16 @@ exports[` should match snapshot 1`] = ` height: 24px; } +.c15 { + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + -webkit-align-self: stretch; + -ms-flex-item-align: stretch; + align-self: stretch; + width: 48px; +} + .c9 { font-size: 18px; line-height: 24px; @@ -211,7 +225,7 @@ exports[` should match snapshot 1`] = ` line-height: normal; } -.c16 { +.c17 { font-size: 18px; line-height: 24px; } @@ -301,26 +315,13 @@ exports[` should match snapshot 1`] = ` } @media only screen and (max-width:768px) { - .c12 { - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-flex-basis: auto; - -ms-flex-preferred-size: auto; - flex-basis: auto; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; - -webkit-align-items: stretch; - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; - } + } @media only screen and (max-width:768px) { - + .c15 { + width: 24px; + } } @@ -398,24 +399,23 @@ exports[` should match snapshot 1`] = ` class="c12" >
-
- toolbar.wallets.type.mnemonic - - - ( - m/44'/474'/0'/0'/0' - ) - -
+ ( + m/44'/474'/0'/0'/0' + ) +
+
should match snapshot 1`] = ` 0.000001
should match snapshot 1`] = ` -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; - width: 100%; padding: 12px; border-radius: 5px; cursor: pointer; @@ -48,9 +47,7 @@ exports[` should match snapshot 1`] = ` -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - -webkit-flex: 1 0 auto; - -ms-flex: 1 0 auto; - flex: 1 0 auto; + width: 100%; } .c4 { @@ -79,6 +76,13 @@ exports[` should match snapshot 1`] = ` -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; } .c7 { @@ -95,7 +99,7 @@ exports[` should match snapshot 1`] = ` flex-direction: row; } -.c10 { +.c11 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -110,7 +114,7 @@ exports[` should match snapshot 1`] = ` height: 24px; } -.c12 { +.c13 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -148,13 +152,23 @@ exports[` should match snapshot 1`] = ` overflow-y: auto; } +.c10 { + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + -webkit-align-self: stretch; + -ms-flex-item-align: stretch; + align-self: stretch; + width: 48px; +} + .c5 { font-size: 18px; line-height: 24px; font-weight: bold; } -.c11 { +.c12 { font-size: 18px; line-height: 24px; } @@ -219,7 +233,7 @@ exports[` should match snapshot 1`] = ` border: 0; } -.c13 { +.c14 { display: inline-block; box-sizing: border-box; cursor: pointer; @@ -248,44 +262,44 @@ exports[` should match snapshot 1`] = ` font-weight: bold; } -.c13:hover { +.c14:hover { box-shadow: 0px 0px 0px 2px #0092f6; } -.c13:focus { +.c14:focus { outline: none; box-shadow: 0 0 2px 2px #6FFFB0; } -.c13:focus > circle, -.c13:focus > ellipse, -.c13:focus > line, -.c13:focus > path, -.c13:focus > polygon, -.c13:focus > polyline, -.c13:focus > rect { +.c14:focus > circle, +.c14:focus > ellipse, +.c14:focus > line, +.c14:focus > path, +.c14:focus > polygon, +.c14:focus > polyline, +.c14:focus > rect { outline: none; box-shadow: 0 0 2px 2px #6FFFB0; } -.c13:focus::-moz-focus-inner { +.c14:focus::-moz-focus-inner { border: 0; } -.c13:focus:not(:focus-visible) { +.c14:focus:not(:focus-visible) { outline: none; box-shadow: none; } -.c13:focus:not(:focus-visible) > circle,.c13:focus:not(:focus-visible) > ellipse, -.c13:focus:not(:focus-visible) > line,.c13:focus:not(:focus-visible) > path, -.c13:focus:not(:focus-visible) > polygon,.c13:focus:not(:focus-visible) > polyline, -.c13:focus:not(:focus-visible) > rect { +.c14:focus:not(:focus-visible) > circle,.c14:focus:not(:focus-visible) > ellipse, +.c14:focus:not(:focus-visible) > line,.c14:focus:not(:focus-visible) > path, +.c14:focus:not(:focus-visible) > polygon,.c14:focus:not(:focus-visible) > polyline, +.c14:focus:not(:focus-visible) > rect { outline: none; box-shadow: none; } -.c13:focus:not(:focus-visible)::-moz-focus-inner { +.c14:focus:not(:focus-visible)::-moz-focus-inner { border: 0; } @@ -320,26 +334,7 @@ exports[` should match snapshot 1`] = ` } @media only screen and (max-width:768px) { - .c6 { - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-flex-basis: auto; - -ms-flex-preferred-size: auto; - flex-basis: auto; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; - -webkit-align-items: stretch; - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; - } -} - -@media only screen and (max-width:768px) { - .c12 { + .c13 { margin-top: 12px; } } @@ -367,6 +362,12 @@ exports[` should match snapshot 1`] = ` } +@media only screen and (max-width:768px) { + .c10 { + width: 24px; + } +} +
should match snapshot 1`] = ` class="c6" >
-
- -
+ toolbar.settings.manageAccount +
+
should match snapshot 1`] = ` 0.0000001
should match snapshot 1`] = `
-
+ Manage +