Make sure that token list/settings tabs don't jump when switching

src/routes/safe/components/Balances/index.jsx

@@ -131,10 +131,12 @@ class Balances extends React.Component<Props, State> {
               color="secondary"
               disableRipple
             />
-            <Paragraph className={classes.zero}>Hide zero balances</Paragraph>
+            <Paragraph size="lg">Hide zero balances</Paragraph>
           </Col>
           <Col xs={6} end="sm">
-            <ButtonLink onClick={this.onShow('Token')} testId="manage-tokens-btn">Manage Tokens</ButtonLink>
+            <ButtonLink size="lg" onClick={this.onShow('Token')} testId="manage-tokens-btn">
+              Manage Tokens
+            </ButtonLink>
             <Modal
               title="Manage Tokens"
               description="Enable and disable tokens to be listed"

src/routes/safe/components/Balances/style.js

@@ -6,9 +6,6 @@ export const styles = (theme: Object) => ({
     width: '20px',
     marginRight: sm,
   },
-  zero: {
-    letterSpacing: '-0.5px',
-  },
   message: {
     margin: `${sm} 0`,
   },

src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/index.jsx

@@ -44,7 +44,9 @@ export const sendReplaceOwner = async (
 ) => {
   const gnosisSafe = await getGnosisSafeInstanceAt(safeAddress)
   const safeOwners = await gnosisSafe.getOwners()
-  const index = safeOwners.findIndex(ownerAddress => ownerAddress.toLowerCase() === ownerAddressToRemove.toLowerCase())
+  const index = safeOwners.findIndex(
+    (ownerAddress) => ownerAddress.toLowerCase() === ownerAddressToRemove.toLowerCase(),
+  )
   const prevAddress = index === 0 ? SENTINEL_ADDRESS : safeOwners[index - 1]
   const txData = gnosisSafe.contract.methods
     .swapOwner(prevAddress, ownerAddressToRemove, values.ownerAddress)
@@ -97,7 +99,7 @@ const ReplaceOwner = ({
   }
 
   return (
-    <React.Fragment>
+    <>
       <SharedSnackbarConsumer>
         {({ openSnackbar }) => {
           const onReplaceOwner = () => {
@@ -127,7 +129,7 @@ const ReplaceOwner = ({
               open={isOpen}
               paperClassName={classes.biggerModalWindow}
             >
-              <React.Fragment>
+              <>
                 {activeScreen === 'checkOwner' && (
                   <OwnerForm
                     onClose={onClose}
@@ -152,12 +154,12 @@ const ReplaceOwner = ({
                     threshold={threshold}
                   />
                 )}
-              </React.Fragment>
+              </>
             </Modal>
           )
         }}
       </SharedSnackbarConsumer>
-    </React.Fragment>
+    </>
   )
 }
 

src/routes/safe/components/Settings/index.jsx

@@ -91,25 +91,18 @@ class Settings extends React.Component<Props, State> {
 
     return (
       <>
-        <Row align="center" className={classes.message}>
+        <Row className={classes.message}>
-          <Col xs={6}>
+          <Paragraph size="lg" color="error" onClick={this.onShow('RemoveSafe')}>
-            <Paragraph className={classes.settings} size="lg" weight="bolder">
+            <Span className={cn(classes.links, classes.removeSafeText)}>Remove Safe</Span>
-              Settings
+            <Img alt="Trash Icon" className={classes.removeSafeIcon} src={RemoveSafeIcon} />
-            </Paragraph>
+          </Paragraph>
-          </Col>
+          <RemoveSafeModal
-          <Col xs={6} end="sm">
+            onClose={this.onHide('RemoveSafe')}
-            <Paragraph noMargin size="lg" color="error" onClick={this.onShow('RemoveSafe')}>
+            isOpen={showRemoveSafe}
-              <Span className={cn(classes.links, classes.removeSafeText)}>Remove Safe</Span>
+            etherScanLink={etherScanLink}
-              <Img alt="Trash Icon" className={classes.removeSafeIcon} src={RemoveSafeIcon} />
+            safeAddress={safeAddress}
-            </Paragraph>
+            safeName={safeName}
-            <RemoveSafeModal
+          />
-              onClose={this.onHide('RemoveSafe')}
-              isOpen={showRemoveSafe}
-              etherScanLink={etherScanLink}
-              safeAddress={safeAddress}
-              safeName={safeName}
-            />
-          </Col>
         </Row>
         <Block className={classes.root}>
           <Col xs={3} layout="column">
@@ -128,7 +121,7 @@ class Settings extends React.Component<Props, State> {
               >
                 Owners (
                 {owners.size}
-                )
+)
               </Row>
               <Hairline />
               <Row

src/routes/safe/components/Settings/style.js

@@ -38,6 +38,7 @@ export const styles = () => ({
   },
   message: {
     margin: `${sm} 0`,
+    justifyContent: 'flex-end',
   },
   links: {
     textDecoration: 'underline',