status-im
/
safe-react
mirror of https://github.com/status-im/safe-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

(Fix) Layout inaccuracies (#2072) 

Co-authored-by: lukasgnosis <lukas.schor@gnosis.pm>
Co-authored-by: Daniel Sanchez <daniel.sanchez@gnosis.pm>
This commit is contained in:
Agustín Longoni 2021-03-30 15:46:41 -03:00 committed by GitHub
parent 9352aee5fd
commit f8ccff0796
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 92 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -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",

4
src/components/AppLayout/Header/components/Layout.tsx
View File

@ -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',

32
src/components/AppLayout/Header/components/ProviderDetails/ConnectDetails.tsx
View File

@ -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)

14
src/components/AppLayout/Header/components/ProviderDetails/UserDetails.tsx
View File

@ -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>
)
}

4
src/components/AppLayout/Sidebar/SafeHeader/index.tsx
View File

@ -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>

10
src/components/AppLayout/index.tsx
View File

@ -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`

2
src/components/ConnectButton/index.tsx
View File

@ -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>
)

2
src/components/CookiesBanner/index.tsx
View File

@ -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',

27
src/routes/safe/components/AddressBook/index.tsx
View File

@ -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>

16
src/routes/safe/components/AddressBook/style.ts
View File

@ -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,
},

48
src/routes/safe/components/Balances/Coins/index.tsx
View File

@ -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>

19
src/routes/safe/components/Balances/Coins/styles.ts
View File

@ -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,
},

2
src/theme/variables.js
View File

@ -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'

2
src/theme/variables.scss
View File

@ -13,7 +13,7 @@ $warning: #ffc05f;
$fancy: #f02525;
$secondary: #008C73;
$headerHeight: 53px;
$headerHeight: 52px;
$marginButtonImg: 12px;
$lg: 24px;

4
yarn.lock
View File

@ -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"