Fix X of Y annotations in the modals

src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/OwnerForm/style.js

@@ -11,10 +11,10 @@ export const styles = () => ({
     maxHeight: '75px',
   },
   annotation: {
-    letterSpacing: '-1px',
     color: secondaryText,
     marginRight: 'auto',
     marginLeft: '20px',
+    lineHeight: 'normal',
   },
   manage: {
     fontSize: '24px',

src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/style.js

@@ -14,10 +14,10 @@ export const styles = () => ({
     maxHeight: '75px',
   },
   annotation: {
-    letterSpacing: '-1px',
     color: secondaryText,
     marginRight: 'auto',
     marginLeft: '20px',
+    lineHeight: 'normal',
   },
   manage: {
     fontSize: '24px',

src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/ThresholdForm/style.js

@@ -11,10 +11,10 @@ export const styles = () => ({
     maxHeight: '75px',
   },
   annotation: {
-    letterSpacing: '-1px',
     color: secondaryText,
     marginRight: 'auto',
     marginLeft: '20px',
+    lineHeight: 'normal',
   },
   manage: {
     fontSize: '24px',

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

@@ -5,9 +5,8 @@ import {
 
 export const styles = () => ({
   heading: {
-    padding: `${sm} ${lg}`,
+    padding: lg,
     justifyContent: 'space-between',
-    maxHeight: '75px',
     boxSizing: 'border-box',
   },
   manage: {
@@ -15,7 +14,6 @@ export const styles = () => ({
   },
   container: {
     padding: `${md} ${lg}`,
-    paddingBottom: '40px',
   },
   close: {
     height: '35px',

src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/CheckOwner/index.jsx

@@ -34,19 +34,14 @@ type Props = {
 }
 
 const CheckOwner = ({
-  classes,
-  onClose,
-  ownerAddress,
-  ownerName,
-  network,
-  onSubmit,
+  classes, onClose, ownerAddress, ownerName, network, onSubmit,
 }: Props) => {
   const handleSubmit = (values) => {
     onSubmit(values)
   }
 
   return (
-    <React.Fragment>
+    <>
       <Row align="center" grow className={classes.heading}>
         <Paragraph weight="bolder" className={classes.manage} noMargin>
           Remove owner
@@ -59,9 +54,7 @@ const CheckOwner = ({
       <Hairline />
       <Block className={classes.formContainer}>
         <Row margin="md">
-          <Paragraph>
-            Review the owner you want to remove from the active Safe:
-          </Paragraph>
+          <Paragraph>Review the owner you want to remove from the active Safe:</Paragraph>
         </Row>
         <Row className={classes.owner}>
           <Col xs={1} align="center">
@@ -100,7 +93,7 @@ const CheckOwner = ({
           Next
         </Button>
       </Row>
-    </React.Fragment>
+    </>
   )
 }
 

src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/CheckOwner/style.js

@@ -11,7 +11,7 @@ export const styles = () => ({
     maxHeight: '75px',
   },
   annotation: {
-    letterSpacing: '-1px',
+    lineHeight: 'normal',
     color: secondaryText,
     marginRight: 'auto',
     marginLeft: '20px',

src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/Review/style.js

@@ -14,7 +14,7 @@ export const styles = () => ({
     maxHeight: '75px',
   },
   annotation: {
-    letterSpacing: '-1px',
+    lineHeight: 'normal',
     color: secondaryText,
     marginRight: 'auto',
     marginLeft: '20px',

src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/ThresholdForm/index.jsx

@@ -40,7 +40,7 @@ const ThresholdForm = ({
   const defaultThreshold = threshold > 1 ? threshold - 1 : threshold
 
   return (
-    <React.Fragment>
+    <>
       <Row align="center" grow className={classes.heading}>
         <Paragraph weight="bolder" className={classes.manage} noMargin>
           Remove owner
@@ -56,7 +56,7 @@ const ThresholdForm = ({
           const numOptions = owners.size > 1 ? owners.size - 1 : 1
 
           return (
-            <React.Fragment>
+            <>
               <Block className={classes.formContainer}>
                 <Row>
                   <Paragraph weight="bolder" className={classes.headingText}>
@@ -72,8 +72,8 @@ const ThresholdForm = ({
                   <Col xs={2}>
                     <Field
                       name="threshold"
-                      render={props => (
-                        <React.Fragment>
+                      render={(props) => (
+                        <>
                           <SelectField {...props} disableError>
                             {[...Array(Number(numOptions))].map((x, index) => (
                               <MenuItem key={index} value={`${index + 1}`}>
@@ -86,7 +86,7 @@ const ThresholdForm = ({
                               {props.meta.error}
                             </Paragraph>
                           )}
-                        </React.Fragment>
+                        </>
                       )}
                       validate={composeValidators(required, mustBeInteger, minValue(1), maxValue(numOptions))}
                       data-testid="threshold-select-input"
@@ -119,11 +119,11 @@ owner(s)
                   Review
                 </Button>
               </Row>
-            </React.Fragment>
+            </>
           )
         }}
       </GnoForm>
-    </React.Fragment>
+    </>
   )
 }
 

src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/ThresholdForm/style.js

@@ -11,7 +11,7 @@ export const styles = () => ({
     maxHeight: '75px',
   },
   annotation: {
-    letterSpacing: '-1px',
+    lineHeight: 'normal',
     color: secondaryText,
     marginRight: 'auto',
     marginLeft: '20px',

src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/OwnerForm/style.js

@@ -11,10 +11,10 @@ export const styles = () => ({
     maxHeight: '75px',
   },
   annotation: {
-    letterSpacing: '-1px',
     color: secondaryText,
     marginRight: 'auto',
     marginLeft: '20px',
+    lineHeight: 'normal',
   },
   manage: {
     fontSize: '24px',

src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/style.js

@@ -14,10 +14,10 @@ export const styles = () => ({
     maxHeight: '75px',
   },
   annotation: {
-    letterSpacing: '-1px',
     color: secondaryText,
     marginRight: 'auto',
     marginLeft: '20px',
+    lineHeight: 'normal',
   },
   manage: {
     fontSize: '24px',