Update font sizes, make control row in settings absolutely positioned

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

@@ -11,16 +11,10 @@ import TextField from '~/components/forms/TextField'
 import GnoForm from '~/components/forms/GnoForm'
 import Row from '~/components/layout/Row'
 import Paragraph from '~/components/layout/Paragraph'
-import Hairline from '~/components/layout/Hairline'
 import Button from '~/components/layout/Button'
-import { sm } from '~/theme/variables'
+import { lg } from '~/theme/variables'
 import { styles } from './style'
 
-const controlsStyle = {
-  backgroundColor: 'white',
-  padding: sm,
-}
-
 export const SAFE_NAME_INPUT_TEST_ID = 'safe-name-input'
 export const SAFE_NAME_SUBMIT_BTN_TEST_ID = 'change-safe-name-btn'
 
@@ -48,7 +42,7 @@ const ChangeSafeName = (props: Props) => {
         {() => (
           <>
             <Block className={classes.formContainer}>
-              <Heading tag="h3">Modify Safe name</Heading>
+              <Heading tag="h2">Modify Safe name</Heading>
               <Paragraph>
                 You can change the name of this Safe. This name is only stored locally and never shared with Gnosis or
                 any third parties.
@@ -66,8 +60,7 @@ const ChangeSafeName = (props: Props) => {
                 />
               </Block>
             </Block>
-            <Hairline />
-            <Row style={controlsStyle} align="end" grow>
+            <Row className={classes.controlsRow} align="end" grow>
               <Col end="xs">
                 <Button
                   type="submit"

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

@@ -1,10 +1,9 @@
 // @flow
-import { lg, sm, boldFont } from '~/theme/variables'
+import { lg, sm, boldFont, border } from '~/theme/variables'
 
 export const styles = () => ({
   formContainer: {
     padding: lg,
-    minHeight: '369px',
   },
   root: {
     display: 'flex',
@@ -13,5 +12,14 @@ export const styles = () => ({
   saveBtn: {
     marginRight: sm,
     fontWeight: boldFont,
+    boxShadow: '1px 2px 10px 0 rgba(212, 212, 211, 0.59)',
+  },
+  controlsRow: {
+    padding: lg,
+    position: 'absolute',
+    bottom: 0,
+    boxSizing: 'border-box',
+    width: '100%',
+    borderTop: `2px solid ${border}`,
   },
 })

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

@@ -98,7 +98,7 @@ class Settings extends React.Component<Props, State> {
             </Paragraph>
           </Col>
           <Col xs={6} end="sm">
-            <Paragraph noMargin size="md" color="error" onClick={this.onShow('RemoveSafe')}>
+            <Paragraph noMargin size="lg" color="error" onClick={this.onShow('RemoveSafe')}>
               <Span className={cn(classes.links, classes.removeSafeText)}>Remove Safe</Span>
               <Img alt="Trash Icon" className={classes.removeSafeIcon} src={RemoveSafeIcon} />
             </Paragraph>

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

@@ -1,6 +1,6 @@
 // @flow
 import {
-  sm, lg, border, secondary, bolderFont, background,
+  sm, md, lg, border, secondary, bolderFont, background, largeFontSize,
 } from '~/theme/variables'
 
 export const styles = () => ({
@@ -15,11 +15,12 @@ export const styles = () => ({
     letterSpacing: '-0.5px',
   },
   menu: {
-    borderRight: `solid 1px ${border}`,
+    borderRight: `solid 2px ${border}`,
     height: '100%',
   },
   menuOption: {
-    padding: lg,
+    fontSize: largeFontSize,
+    padding: `${md} 0 ${md} ${lg}`,
     alignItems: 'center',
     cursor: 'pointer',
   },
@@ -30,6 +31,7 @@ export const styles = () => ({
   },
   container: {
     height: '100%',
+    position: 'relative',
   },
   message: {
     margin: `${sm} 0`,

src/theme/mui.js

@@ -15,6 +15,7 @@ import {
   regularFont,
   boldFont,
   buttonLargeFontSize,
+  largeFontSize,
   border,
   xs,
   secondaryText,
@@ -49,6 +50,7 @@ export default createMuiTheme({
     MuiButton: {
       label: {
         lineHeight: 1,
+        fontSize: largeFontSize,
         fontWeight: regularFont,
       },
       root: {