fix mui button styles

src/components/layout/Button/index.jsx

@@ -1,31 +1,26 @@
 // @flow
 import * as React from 'react'
 import Button from '@material-ui/core/Button'
-import { withStyles } from '@material-ui/core/styles'
-
-const styles = {
-  root: {
-    borderRadius: 0,
-  },
-}
 
 type Props = {
   minWidth?: number,
   minHeight?: number,
-  testId: string,
+  rounded?: boolean,
+  testId?: string,
 }
 
-const calculateStyleBased = (minWidth, minHeight) => ({
+const calculateStyleBased = (minWidth, minHeight, rounded) => ({
   minWidth: minWidth && `${minWidth}px`,
   minHeight: minHeight && `${minHeight}px`,
+  borderRadius: rounded ? '4px' : 0,
 })
 
 const GnoButton = ({
-  minWidth, minHeight, testId = '', ...props
+  minWidth, minHeight = 27, testId = '', rounded, ...props
 }: Props) => {
-  const style = calculateStyleBased(minWidth, minHeight)
+  const style = calculateStyleBased(minWidth, minHeight, rounded)
 
   return <Button style={style} data-testid={testId} {...props} />
 }
 
-export default withStyles(styles)(GnoButton)
+export default GnoButton

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

@@ -2,16 +2,16 @@
 import * as React from 'react'
 import { List } from 'immutable'
 import classNames from 'classnames/bind'
-import { type Token } from '~/logic/tokens/store/model/token'
 import CallMade from '@material-ui/icons/CallMade'
 import CallReceived from '@material-ui/icons/CallReceived'
-import Button from '@material-ui/core/Button'
 import Checkbox from '@material-ui/core/Checkbox'
 import TableRow from '@material-ui/core/TableRow'
 import TableCell from '@material-ui/core/TableCell'
 import { withStyles } from '@material-ui/core/styles'
+import { type Token } from '~/logic/tokens/store/model/token'
 import Col from '~/components/layout/Col'
 import Row from '~/components/layout/Row'
+import Button from '~/components/layout/Button'
 import ButtonLink from '~/components/layout/ButtonLink'
 import Paragraph from '~/components/layout/Paragraph'
 import Modal from '~/components/Modal'
@@ -168,10 +168,11 @@ class Balances extends React.Component<Props, State> {
                     <Button
                       variant="contained"
                       size="small"
-                      color="secondary"
+                      color="primary"
                       className={classes.send}
                       onClick={() => this.showSendFunds(row.asset.name)}
-                      data-testid="balance-send-btn"
+                      rounded
+                      testId="balance-send-btn"
                     >
                       <CallMade className={classNames(classes.leftIcon, classes.iconSmall)} />
                         Send
@@ -180,9 +181,10 @@ class Balances extends React.Component<Props, State> {
                   <Button
                     variant="contained"
                     size="small"
-                    color="secondary"
+                    color="primary"
                     className={classes.receive}
                     onClick={this.onShow('Receive')}
+                    rounded
                   >
                     <CallReceived className={classNames(classes.leftIcon, classes.iconSmall)} />
                       Receive

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

@@ -11,7 +11,7 @@ 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, boldFont } from '~/theme/variables'
+import { sm } from '~/theme/variables'
 import { styles } from './style'
 
 const controlsStyle = {
@@ -19,11 +19,6 @@ const controlsStyle = {
   padding: sm,
 }
 
-const saveButtonStyle = {
-  marginRight: sm,
-  fontWeight: boldFont,
-}
-
 export const SAFE_NAME_INPUT_TESTID = 'safe-name-input'
 export const SAFE_NAME_SUBMIT_BTN_TESTID = 'change-safe-name-btn'
 
@@ -74,7 +69,7 @@ const ChangeSafeName = (props: Props) => {
               <Col end="xs">
                 <Button
                   type="submit"
-                  style={saveButtonStyle}
+                  className={classes.saveBtn}
                   size="small"
                   variant="contained"
                   color="primary"

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

@@ -1,5 +1,5 @@
 // @flow
-import { lg } from '~/theme/variables'
+import { lg, sm, boldFont } from '~/theme/variables'
 
 export const styles = () => ({
   title: {
@@ -14,4 +14,8 @@ export const styles = () => ({
     display: 'flex',
     maxWidth: '460px',
   },
+  saveBtn: {
+    marginRight: sm,
+    fontWeight: boldFont,
+  },
 })

src/theme/mui.js

@@ -43,6 +43,9 @@ export default createMuiTheme({
   },
   overrides: {
     MuiButton: {
+      label: {
+        lineHeight: 1,
+      },
       root: {
         fontFamily: 'Roboto Mono, monospace',
         letterSpacing: '0.9px',