From f8ccff0796f15d010b03bee54e6caad3e3122c68 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Tue, 30 Mar 2021 15:46:41 -0300
Subject: [PATCH] (Fix) Layout inaccuracies (#2072)

Co-authored-by: lukasgnosis <lukas.schor@gnosis.pm>
Co-authored-by: Daniel Sanchez <daniel.sanchez@gnosis.pm>
---
 package.json                                  |  2 +-
 .../AppLayout/Header/components/Layout.tsx    |  4 +-
 .../ProviderDetails/ConnectDetails.tsx        | 32 ++++++-------
 .../ProviderDetails/UserDetails.tsx           | 14 ++++--
 .../AppLayout/Sidebar/SafeHeader/index.tsx    |  4 +-
 src/components/AppLayout/index.tsx            | 10 ++--
 src/components/ConnectButton/index.tsx        |  2 +-
 src/components/CookiesBanner/index.tsx        |  2 +-
 .../safe/components/AddressBook/index.tsx     | 27 ++++++++---
 .../safe/components/AddressBook/style.ts      | 16 ++-----
 .../safe/components/Balances/Coins/index.tsx  | 48 +++++++++++--------
 .../safe/components/Balances/Coins/styles.ts  | 19 +-------
 src/theme/variables.js                        |  2 +-
 src/theme/variables.scss                      |  2 +-
 yarn.lock                                     |  4 +-
 15 files changed, 92 insertions(+), 96 deletions(-)

diff --git a/package.json b/package.json
index dd954f4a..f3ef8608 100644
--- a/package.json
+++ b/package.json
@@ -161,7 +161,7 @@
     "@gnosis.pm/safe-apps-sdk": "1.0.3",
     "@gnosis.pm/safe-apps-sdk-v1": "npm:@gnosis.pm/safe-apps-sdk@0.4.2",
     "@gnosis.pm/safe-contracts": "1.1.1-dev.2",
-    "@gnosis.pm/safe-react-components": "https://github.com/gnosis/safe-react-components.git#80f5db6",
+    "@gnosis.pm/safe-react-components": "https://github.com/gnosis/safe-react-components.git#a68a67e",
     "@gnosis.pm/util-contracts": "2.0.6",
     "@ledgerhq/hw-transport-node-hid-singleton": "5.45.0",
     "@material-ui/core": "^4.11.0",
diff --git a/src/components/AppLayout/Header/components/Layout.tsx b/src/components/AppLayout/Header/components/Layout.tsx
index 85051334..fae9690d 100644
--- a/src/components/AppLayout/Header/components/Layout.tsx
+++ b/src/components/AppLayout/Header/components/Layout.tsx
@@ -12,7 +12,7 @@ import Spacer from 'src/components/Spacer'
 import Col from 'src/components/layout/Col'
 import Img from 'src/components/layout/Img'
 import Row from 'src/components/layout/Row'
-import { border, headerHeight, md, screenSm, sm } from 'src/theme/variables'
+import { headerHeight, md, screenSm, sm } from 'src/theme/variables'
 import { useStateHandler } from 'src/logic/hooks/useStateHandler'
 
 import SafeLogo from '../assets/gnosis-safe-multisig-logo.svg'
@@ -29,8 +29,6 @@ const styles = () => ({
   summary: {
     alignItems: 'center',
     backgroundColor: 'white',
-    borderBottom: `solid 2px ${border}`,
-    boxShadow: '0 2px 4px 0 rgba(212, 212, 211, 0.59)',
     flexWrap: 'nowrap',
     height: headerHeight,
     position: 'fixed',
diff --git a/src/components/AppLayout/Header/components/ProviderDetails/ConnectDetails.tsx b/src/components/AppLayout/Header/components/ProviderDetails/ConnectDetails.tsx
index 0b52d4e5..e3ebe602 100644
--- a/src/components/AppLayout/Header/components/ProviderDetails/ConnectDetails.tsx
+++ b/src/components/AppLayout/Header/components/ProviderDetails/ConnectDetails.tsx
@@ -6,13 +6,11 @@ import ConnectButton from 'src/components/ConnectButton'
 import Block from 'src/components/layout/Block'
 import Paragraph from 'src/components/layout/Paragraph'
 import Row from 'src/components/layout/Row'
-import { lg, md } from 'src/theme/variables'
 import { KeyRing } from 'src/components/AppLayout/Header/components/KeyRing'
+import { Card } from '@gnosis.pm/safe-react-components'
+import styled from 'styled-components'
 
 const styles = () => ({
-  container: {
-    padding: `${md} 12px`,
-  },
   logo: {
     justifyContent: 'center',
   },
@@ -22,8 +20,8 @@ const styles = () => ({
     textAlign: 'center',
   },
   connect: {
-    padding: `${md} ${lg}`,
     textAlign: 'center',
+    marginTop: '60px',
   },
   connectText: {
     letterSpacing: '1px',
@@ -33,22 +31,24 @@ const styles = () => ({
   },
 })
 
+const StyledCard = styled(Card)`
+  padding: 20px;
+`
 const ConnectDetails = ({ classes }) => (
-  <>
-    <div className={classes.container}>
-      <Row align="center" margin="lg">
-        <Paragraph className={classes.text} noMargin size="lg" weight="bolder">
-          Connect a Wallet
-        </Paragraph>
-      </Row>
-    </div>
-    <Row className={classes.logo} margin="lg">
-      <KeyRing center circleSize={75} dotRight={25} dotSize={25} dotTop={50} keySize={32} mode="error" />
+  <StyledCard>
+    <Row align="center" margin="lg">
+      <Paragraph className={classes.text} noMargin size="xl" weight="bolder">
+        Connect a Wallet
+      </Paragraph>
+    </Row>
+
+    <Row className={classes.logo}>
+      <KeyRing center circleSize={60} dotRight={20} dotSize={20} dotTop={50} keySize={28} mode="error" />
     </Row>
     <Block className={classes.connect}>
       <ConnectButton data-testid="heading-connect-btn" />
     </Block>
-  </>
+  </StyledCard>
 )
 
 export default withStyles(styles as any)(ConnectDetails)
diff --git a/src/components/AppLayout/Header/components/ProviderDetails/UserDetails.tsx b/src/components/AppLayout/Header/components/ProviderDetails/UserDetails.tsx
index d50fa6cf..1598904f 100644
--- a/src/components/AppLayout/Header/components/ProviderDetails/UserDetails.tsx
+++ b/src/components/AppLayout/Header/components/ProviderDetails/UserDetails.tsx
@@ -2,7 +2,7 @@ import { makeStyles } from '@material-ui/core/styles'
 import Dot from '@material-ui/icons/FiberManualRecord'
 import classNames from 'classnames'
 import * as React from 'react'
-import { EthHashInfo, Identicon } from '@gnosis.pm/safe-react-components'
+import { EthHashInfo, Identicon, Card } from '@gnosis.pm/safe-react-components'
 
 import Spacer from 'src/components/Spacer'
 import Block from 'src/components/layout/Block'
@@ -18,6 +18,7 @@ import { getExplorerInfo } from 'src/config'
 import { KeyRing } from 'src/components/AppLayout/Header/components/KeyRing'
 import { CircleDot } from '../CircleDot'
 import { createStyles } from '@material-ui/core'
+import styled from 'styled-components'
 
 import WalletIcon from '../../assets/wallet.svg'
 
@@ -91,6 +92,9 @@ const styles = createStyles({
   },
 })
 
+const StyledCard = styled(Card)`
+  padding: 0px;
+`
 type Props = {
   connected: boolean
   network: ETHEREUM_NETWORK
@@ -116,11 +120,11 @@ export const UserDetails = ({
   const classes = useStyles()
 
   return (
-    <>
+    <StyledCard>
       <Block className={classes.container}>
         <Row align="center" className={classes.identicon} margin="md">
           {connected ? (
-            <Identicon address={userAddress || 'random'} size="lg" />
+            <Identicon address={userAddress || 'random'} size="xxl" />
           ) : (
             <KeyRing circleSize={75} dotRight={25} dotSize={25} dotTop={50} hideDot keySize={30} mode="warning" />
           )}
@@ -185,11 +189,11 @@ export const UserDetails = ({
           variant="contained"
           data-testid="disconnect-btn"
         >
-          <Paragraph className={classes.disconnectText} color="white" noMargin size="md">
+          <Paragraph className={classes.disconnectText} color="white" noMargin size="lg">
             Disconnect
           </Paragraph>
         </Button>
       </Row>
-    </>
+    </StyledCard>
   )
 }
diff --git a/src/components/AppLayout/Sidebar/SafeHeader/index.tsx b/src/components/AppLayout/Sidebar/SafeHeader/index.tsx
index 149f7d84..fad57d55 100644
--- a/src/components/AppLayout/Sidebar/SafeHeader/index.tsx
+++ b/src/components/AppLayout/Sidebar/SafeHeader/index.tsx
@@ -45,7 +45,7 @@ const IconContainer = styled.div`
 `
 const StyledButton = styled(Button)`
   &&.MuiButton-root {
-    padding: 0 16px;
+    padding: 0 12px;
   }
   *:first-child {
     margin: 0 4px 0 0;
@@ -170,7 +170,7 @@ const SafeHeader = ({
         <StyledText size="xl">{balance}</StyledText>
         <StyledButton size="md" disabled={!granted} color="primary" variant="contained" onClick={onNewTransactionClick}>
           <FixedIcon type="arrowSentWhite" />
-          <Text size="lg" color="white">
+          <Text size="xl" color="white">
             New transaction
           </Text>
         </StyledButton>
diff --git a/src/components/AppLayout/index.tsx b/src/components/AppLayout/index.tsx
index e70a31b4..72fb20a0 100644
--- a/src/components/AppLayout/index.tsx
+++ b/src/components/AppLayout/index.tsx
@@ -17,16 +17,16 @@ const Container = styled.div`
 `
 
 const HeaderWrapper = styled.nav`
-  height: 54px;
+  height: 52px;
   width: 100%;
-  z-index: 1;
+  z-index: 2;
 
   background-color: white;
-  box-shadow: 0 0 4px 0 rgba(212, 212, 211, 0.59);
+  box-shadow: 0 2px 4px 0 rgba(40, 54, 61, 0.18);
 `
 
 const BodyWrapper = styled.div`
-  height: calc(100% - 54px);
+  height: calc(100% - 52px);
   width: 100%;
   display: flex;
   flex-direction: row;
@@ -41,7 +41,7 @@ const SidebarWrapper = styled.aside`
 
   padding: 8px 8px 0 8px;
   background-color: ${({ theme }) => theme.colors.white};
-  border-right: 2px solid ${({ theme }) => theme.colors.separator};
+  box-shadow: 0 2px 4px 0 rgba(40, 54, 61, 0.18);
 `
 
 const ContentWrapper = styled.section`
diff --git a/src/components/ConnectButton/index.tsx b/src/components/ConnectButton/index.tsx
index 4d3c23dd..dc9bbd2e 100644
--- a/src/components/ConnectButton/index.tsx
+++ b/src/components/ConnectButton/index.tsx
@@ -73,7 +73,7 @@ export const onConnectButtonClick = async () => {
 }
 
 const ConnectButton = (props): React.ReactElement => (
-  <Button color="primary" minWidth={140} onClick={onConnectButtonClick} variant="contained" {...props}>
+  <Button color="primary" minWidth={240} onClick={onConnectButtonClick} variant="contained" {...props}>
     Connect
   </Button>
 )
diff --git a/src/components/CookiesBanner/index.tsx b/src/components/CookiesBanner/index.tsx
index 9219aab6..781ae6de 100644
--- a/src/components/CookiesBanner/index.tsx
+++ b/src/components/CookiesBanner/index.tsx
@@ -21,7 +21,7 @@ const useStyles = makeStyles({
   container: {
     backgroundColor: '#fff',
     bottom: '0',
-    boxShadow: '0 2px 4px 0 rgba(212, 212, 211, 0.59)',
+    boxShadow: '1px 2px 10px 0 rgba(40, 54, 61, 0.18)',
     boxSizing: 'border-box',
     display: 'flex',
     justifyContent: 'center',
diff --git a/src/routes/safe/components/AddressBook/index.tsx b/src/routes/safe/components/AddressBook/index.tsx
index 7460f663..38570218 100644
--- a/src/routes/safe/components/AddressBook/index.tsx
+++ b/src/routes/safe/components/AddressBook/index.tsx
@@ -11,7 +11,6 @@ import { styles } from './style'
 import Table from 'src/components/Table'
 import { cellWidth } from 'src/components/Table/TableHead'
 import Block from 'src/components/layout/Block'
-import Button from 'src/components/layout/Button'
 import ButtonLink from 'src/components/layout/ButtonLink'
 import Col from 'src/components/layout/Col'
 import Img from 'src/components/layout/Img'
@@ -40,7 +39,19 @@ import { addressBookQueryParamsSelector, safesListSelector } from 'src/logic/saf
 import { checksumAddress } from 'src/utils/checksumAddress'
 import { grantedSelector } from 'src/routes/safe/container/selector'
 import { useAnalytics, SAFE_NAVIGATION_EVENT } from 'src/utils/googleAnalytics'
+import { FixedIcon, Text, Button } from '@gnosis.pm/safe-react-components'
+import styled from 'styled-components'
 
+const StyledButton = styled(Button)`
+  &&.MuiButton-root {
+    margin: 4px 12px 4px 0px;
+    padding: 0 12px;
+    min-width: auto;
+  }
+  svg {
+    margin: 0 6px 0 0;
+  }
+`
 const useStyles = makeStyles(styles)
 
 interface AddressBookSelectedEntry extends AddressBookEntry {
@@ -202,19 +213,21 @@ const AddressBookTable = (): ReactElement => {
                           testId={REMOVE_ENTRY_BUTTON}
                         />
                         {granted ? (
-                          <Button
-                            className={classes.send}
+                          <StyledButton
                             color="primary"
                             onClick={() => {
                               setSelectedEntry({ entry: row })
                               setSendFundsModalOpen(true)
                             }}
-                            size="small"
-                            testId={SEND_ENTRY_BUTTON}
+                            size="md"
                             variant="contained"
+                            data-testid={SEND_ENTRY_BUTTON}
                           >
-                            Send
-                          </Button>
+                            <FixedIcon type="arrowSentWhite" />
+                            <Text size="xl" color="white">
+                              Send
+                            </Text>
+                          </StyledButton>
                         ) : null}
                       </Row>
                     </TableCell>
diff --git a/src/routes/safe/components/AddressBook/style.ts b/src/routes/safe/components/AddressBook/style.ts
index a8314a31..e6611ec0 100644
--- a/src/routes/safe/components/AddressBook/style.ts
+++ b/src/routes/safe/components/AddressBook/style.ts
@@ -1,4 +1,4 @@
-import { lg, marginButtonImg, md, sm } from 'src/theme/variables'
+import { lg, md, sm } from 'src/theme/variables'
 import { createStyles } from '@material-ui/core'
 
 export const styles = createStyles({
@@ -37,7 +37,7 @@ export const styles = createStyles({
   },
   editEntryButton: {
     cursor: 'pointer',
-    marginBottom: marginButtonImg,
+    marginBottom: '16px',
   },
   editEntryButtonNonOwner: {
     cursor: 'pointer',
@@ -45,13 +45,13 @@ export const styles = createStyles({
   removeEntryButton: {
     marginLeft: lg,
     marginRight: lg,
-    marginBottom: marginButtonImg,
+    marginBottom: '16px',
     cursor: 'pointer',
   },
   removeEntryButtonDisabled: {
     marginLeft: lg,
     marginRight: lg,
-    marginBottom: marginButtonImg,
+    marginBottom: '16px',
     cursor: 'default',
   },
   removeEntryButtonNonOwner: {
@@ -65,14 +65,6 @@ export const styles = createStyles({
     boxSizing: 'border-box',
     justifyContent: 'flex-end',
   },
-  send: {
-    width: '75px',
-    minWidth: '75px',
-    borderRadius: '4px',
-    '& > span': {
-      fontSize: '14px',
-    },
-  },
   leftIcon: {
     marginRight: sm,
   },
diff --git a/src/routes/safe/components/Balances/Coins/index.tsx b/src/routes/safe/components/Balances/Coins/index.tsx
index 20335252..81f92e87 100644
--- a/src/routes/safe/components/Balances/Coins/index.tsx
+++ b/src/routes/safe/components/Balances/Coins/index.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useMemo } from 'react'
+import styled from 'styled-components'
 import { useSelector } from 'react-redux'
 import { List } from 'immutable'
 import TableCell from '@material-ui/core/TableCell'
@@ -8,11 +9,11 @@ import TableRow from '@material-ui/core/TableRow'
 import { Skeleton } from '@material-ui/lab'
 
 import InfoIcon from 'src/assets/icons/info_red.svg'
+import { FixedIcon, Text, Button } from '@gnosis.pm/safe-react-components'
 
 import Img from 'src/components/layout/Img'
 import Table from 'src/components/Table'
 import { cellWidth } from 'src/components/Table/TableHead'
-import Button from 'src/components/layout/Button'
 import Row from 'src/components/layout/Row'
 import { BALANCE_ROW_TEST_ID } from 'src/routes/safe/components/Balances'
 import AssetTableCell from 'src/routes/safe/components/Balances/AssetTableCell'
@@ -30,6 +31,17 @@ import { makeStyles } from '@material-ui/core/styles'
 import { styles } from './styles'
 import { currentCurrencySelector } from 'src/logic/currencyValues/store/selectors'
 
+const StyledButton = styled(Button)`
+  &&.MuiButton-root {
+    margin: 4px 12px 4px 0px;
+    padding: 0 12px;
+    min-width: auto;
+  }
+  svg {
+    margin: 0 6px 0 0;
+  }
+`
+
 const useStyles = makeStyles(styles)
 
 type Props = {
@@ -137,31 +149,25 @@ const Coins = (props: Props): React.ReactElement => {
               <TableCell component="td">
                 <Row align="end" className={classes.actions}>
                   {granted && (
-                    <Button
-                      className={classes.send}
+                    <StyledButton
                       color="primary"
                       onClick={() => showSendFunds(row.asset.address)}
-                      size="small"
-                      testId="balance-send-btn"
+                      size="md"
                       variant="contained"
+                      data-testid="balance-send-btn"
                     >
-                      {/* <CallMade alt="Send Transaction" className={classNames(classes.leftIcon, classes.iconSmall)} /> */}
-                      Send
-                    </Button>
+                      <FixedIcon type="arrowSentWhite" />
+                      <Text size="xl" color="white">
+                        Send
+                      </Text>
+                    </StyledButton>
                   )}
-                  <Button
-                    className={classes.receive}
-                    color="primary"
-                    onClick={showReceiveFunds}
-                    size="small"
-                    variant="contained"
-                  >
-                    {/* <CallReceived
-                      alt="Receive Transaction"
-                      className={classNames(classes.leftIcon, classes.iconSmall)}
-                    /> */}
-                    Receive
-                  </Button>
+                  <StyledButton color="primary" onClick={showReceiveFunds} size="md" variant="contained">
+                    <FixedIcon type="arrowReceivedWhite" />
+                    <Text size="xl" color="white">
+                      Receive
+                    </Text>
+                  </StyledButton>
                 </Row>
               </TableCell>
             </TableRow>
diff --git a/src/routes/safe/components/Balances/Coins/styles.ts b/src/routes/safe/components/Balances/Coins/styles.ts
index ae4ae6ac..bd221514 100644
--- a/src/routes/safe/components/Balances/Coins/styles.ts
+++ b/src/routes/safe/components/Balances/Coins/styles.ts
@@ -1,4 +1,4 @@
-import { sm, xs } from 'src/theme/variables'
+import { sm } from 'src/theme/variables'
 import { createStyles } from '@material-ui/core'
 
 export const styles = createStyles({
@@ -25,23 +25,6 @@ export const styles = createStyles({
     justifyContent: 'flex-end',
     visibility: 'hidden',
   },
-  receive: {
-    width: '95px',
-    minWidth: '95px',
-    marginLeft: sm,
-    borderRadius: xs,
-    '& > span': {
-      fontSize: '14px',
-    },
-  },
-  send: {
-    width: '75px',
-    minWidth: '75px',
-    borderRadius: xs,
-    '& > span': {
-      fontSize: '14px',
-    },
-  },
   leftIcon: {
     marginRight: sm,
   },
diff --git a/src/theme/variables.js b/src/theme/variables.js
index 71f4625d..66811e2a 100644
--- a/src/theme/variables.js
+++ b/src/theme/variables.js
@@ -5,7 +5,7 @@ const disabled = '#5D6D74'
 const errorColor = '#f02525'
 const fancyColor = '#f02525'
 const fontColor = '#001428'
-const headerHeight = '53px'
+const headerHeight = '52px'
 const lg = '24px'
 const marginButtonImg = '12px'
 const md = '16px'
diff --git a/src/theme/variables.scss b/src/theme/variables.scss
index ad157751..f94de36c 100644
--- a/src/theme/variables.scss
+++ b/src/theme/variables.scss
@@ -13,7 +13,7 @@ $warning: #ffc05f;
 $fancy: #f02525;
 $secondary: #008C73;
 
-$headerHeight: 53px;
+$headerHeight: 52px;
 $marginButtonImg: 12px;
 
 $lg: 24px;
diff --git a/yarn.lock b/yarn.lock
index 00a9ec29..56873e07 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1596,9 +1596,9 @@
     solc "0.5.14"
     truffle "^5.1.21"
 
-"@gnosis.pm/safe-react-components@https://github.com/gnosis/safe-react-components.git#80f5db6":
+"@gnosis.pm/safe-react-components@https://github.com/gnosis/safe-react-components.git#a68a67e":
   version "0.5.0"
-  resolved "https://github.com/gnosis/safe-react-components.git#80f5db672d417ea410d58c8d713e46e16e3c7e7f"
+  resolved "https://github.com/gnosis/safe-react-components.git#a68a67e634d0be091856ebba9f6874eebb767cd7"
   dependencies:
     classnames "^2.2.6"
     react-media "^1.10.0"