Merge pull request #1838 from oasisprotocol/lw/balance-mobile

Move balance into the same row as Manage button on mobile
oasisprotocol · Jan 25, 2024 · a59f787 · a59f787
2 parents 46f72cb + db51c9c
commit a59f787
Show file tree

Hide file tree

Showing 5 changed files with 124 additions and 145 deletions.
diff --git a/.changelog/1838.feature.md 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
@@ -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) => {
         </Box>
       )}
 
-      <Box flex="grow" gap={size === 'small' ? undefined : 'xsmall'}>
+      <Box fill="horizontal" gap={size === 'small' ? undefined : 'xsmall'}>
         {props.name && (
           <Box data-testid="account-name">
             <Text weight="bold">{props.name}</Text>
@@ -92,22 +91,20 @@ export const Account = memo((props: AccountProps) => {
         <Box>
           <Text weight="bold">{address}</Text>
         </Box>
-        <Box direction="row-responsive">
-          <Box flex="grow">
-            {props.displayDerivation && <DerivationFormatter {...props.displayDerivation} />}
-            {props.displayManageButton && (
-              <Box direction="row">
-                <StyledManageButton
-                  label={t('toolbar.settings.manageAccount', 'Manage')}
-                  onClick={e => {
-                    // TODO: clicking using Tab + Enter on Manage only triggers parent listener `props.onClick`.
-                    props.displayManageButton?.onClickManage(props.address)
-                    e.stopPropagation()
-                  }}
-                />
-              </Box>
-            )}
-          </Box>
+        <Box direction="row" gap="large" justify="between" wrap>
+          {props.displayDerivation && <DerivationFormatter {...props.displayDerivation} />}
+          {props.displayManageButton && (
+            <Box direction="row">
+              <StyledManageButton
+                label={t('toolbar.settings.manageAccount', 'Manage')}
+                onClick={e => {
+                  // TODO: clicking using Tab + Enter on Manage only triggers parent listener `props.onClick`.
+                  props.displayManageButton?.onClickManage(props.address)
+                  e.stopPropagation()
+                }}
+              />
+            </Box>
+          )}
           {props.displayBalance && (
             <Box height="24px">
               {props.balance ? <AmountFormatter amount={props.balance.total} /> : <Spinner />}

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
@@ -30,7 +30,6 @@ exports[`<Account  /> 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[`<Account  /> 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[`<Account  /> 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[`<Account  /> should match snapshot 1`] = `
   flex-direction: row;
 }
 
-.c15 {
+.c16 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -200,6 +204,16 @@ exports[`<Account  /> 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[`<Account  /> should match snapshot 1`] = `
   line-height: normal;
 }
 
-.c16 {
+.c17 {
   font-size: 18px;
   line-height: 24px;
 }
@@ -301,26 +315,13 @@ exports[`<Account  /> 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;
+  }
 }
 
 <body>
@@ -398,24 +399,23 @@ exports[`<Account  /> should match snapshot 1`] = `
             class="c12"
           >
             <div
-              class="c10"
+              class="c13"
             >
-              <div
-                class="c13"
+              toolbar.wallets.type.mnemonic
+               
+              <span
+                class="c14"
               >
-                toolbar.wallets.type.mnemonic
-                 
-                <span
-                  class="c14"
-                >
-                  (
-                  m/44'/474'/0'/0'/0'
-                  )
-                </span>
-              </div>
+                (
+                m/44'/474'/0'/0'/0'
+                )
+              </span>
             </div>
             <div
               class="c15"
+            />
+            <div
+              class="c16"
             >
               <span>
                 <div
@@ -425,7 +425,7 @@ exports[`<Account  /> should match snapshot 1`] = `
                   0.000001
                 </div>
                 <span
-                  class="c16"
+                  class="c17"
                 >
                   <span
                     class="notranslate"