From d7c056eadeac683e189b25195b1e6a95616f3fa3 Mon Sep 17 00:00:00 2001
From: Mikhail Mikheev <mmvsha73@gmail.com>
Date: Thu, 5 Sep 2019 17:10:45 +0400
Subject: [PATCH] Update font sizes, make control row in settings absolutely
 positioned

---
 .../components/Settings/ChangeSafeName/index.jsx    | 13 +++----------
 .../components/Settings/ChangeSafeName/style.js     | 12 ++++++++++--
 src/routes/safe/components/Settings/index.jsx       |  2 +-
 src/routes/safe/components/Settings/style.js        |  8 +++++---
 src/theme/mui.js                                    |  2 ++
 5 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/src/routes/safe/components/Settings/ChangeSafeName/index.jsx b/src/routes/safe/components/Settings/ChangeSafeName/index.jsx
index 4713515c..30eaea1c 100644
--- a/src/routes/safe/components/Settings/ChangeSafeName/index.jsx
+++ b/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"
diff --git a/src/routes/safe/components/Settings/ChangeSafeName/style.js b/src/routes/safe/components/Settings/ChangeSafeName/style.js
index b7426867..38b64874 100644
--- a/src/routes/safe/components/Settings/ChangeSafeName/style.js
+++ b/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}`,
   },
 })
diff --git a/src/routes/safe/components/Settings/index.jsx b/src/routes/safe/components/Settings/index.jsx
index 3893648d..559ea5fa 100644
--- a/src/routes/safe/components/Settings/index.jsx
+++ b/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>
diff --git a/src/routes/safe/components/Settings/style.js b/src/routes/safe/components/Settings/style.js
index 32807bfb..fde905d3 100644
--- a/src/routes/safe/components/Settings/style.js
+++ b/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`,
diff --git a/src/theme/mui.js b/src/theme/mui.js
index c78b3012..9daa73df 100644
--- a/src/theme/mui.js
+++ b/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: {