status-im/safe-react
2
0
Fork 0
mirror of https://github.com/status-im/safe-react.git synced 2025-02-20 13:38:25 +00:00
Code Issues Projects Releases Wiki Activity

(Fix) Basic mobile responsiveness (#532)

Browse Source 
* (fix) header mobile version

* (fix) send / receive responsive

* (fix) footer overflowing

* (fix) responsive settings menu

* (fix) scrolling menu tabs

* (fix) responsive tables

* (fix) a few modal windows' responsive issues

* (remove) unused files

* (fix) sidebar responsive

* (fix) load safe responsive

* (fix) create safe responsiveness

* (fix) text wrap

* (fix) remove modal responsiveness

* (fix) name wrap

* (update) yarn.lock
This commit is contained in:
Gabriel Rodríguez Alsina 2020-02-06 12:40:29 -03:00 committed by GitHub
parent 16b3dc0f2a
commit 165a088b1b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
37 changed files with 972 additions and 1369 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@ -8,6 +8,6 @@
<title>Gnosis Safe Multisig</title> <title>Gnosis Safe Multisig</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root" style="overflow: hidden;"></div>
</body> </body>
</html> </html>

1
src/components/CookiesBanner/index.jsx
View File

@ -51,7 +51,6 @@ const useStyles = makeStyles({
gridTemplateColumns: '1fr', gridTemplateColumns: '1fr',
paddingBottom: '30px', paddingBottom: '30px',
rowGap: '10px', rowGap: '10px',
[`@media (min-width: ${screenSm}px)`]: { [`@media (min-width: ${screenSm}px)`]: {
gridTemplateColumns: '1fr 1fr 1fr', gridTemplateColumns: '1fr 1fr 1fr',
paddingBottom: '0', paddingBottom: '0',

9
src/components/Footer/index.jsx
View File

@ -10,8 +10,10 @@ import GnoButtonLink from '~/components/layout/ButtonLink'
const useStyles = makeStyles({ const useStyles = makeStyles({
footer: { footer: {
boxSizing: 'border-box',
display: 'flex', display: 'flex',
flexDirection: 'row', flexDirection: 'row',
flexShrink: '1',
flexWrap: 'wrap', flexWrap: 'wrap',
justifyContent: 'center', justifyContent: 'center',
margin: '0 auto', margin: '0 auto',
@ -55,7 +57,6 @@ const Footer = () => {
<footer className={classes.footer}> <footer className={classes.footer}>
<span className={classes.item}> <span className={classes.item}>
© ©
{' '}
{date.getFullYear()} {date.getFullYear()}
{' '} {' '}
Gnosis Gnosis
@ -85,7 +86,11 @@ const Footer = () => {
Preferences Preferences
</GnoButtonLink> </GnoButtonLink>
<span className={classes.sep}>|</span> <span className={classes.sep}>|</span>
<Link className={cn(classes.item, classes.link)} to="https://github.com/gnosis/safe-react/releases" target="_blank"> <Link
className={cn(classes.item, classes.link)}
to="https://github.com/gnosis/safe-react/releases"
target="_blank"
>
{appVersion} {appVersion}
</Link> </Link>
</footer> </footer>

7
src/components/Header/components/CircleDot.jsx
View File

@ -4,15 +4,20 @@ import { withStyles } from '@material-ui/core/styles'
import Dot from '@material-ui/icons/FiberManualRecord' import Dot from '@material-ui/icons/FiberManualRecord'
import Block from '~/components/layout/Block' import Block from '~/components/layout/Block'
import Img from '~/components/layout/Img' import Img from '~/components/layout/Img'
import { fancy, border, warning } from '~/theme/variables' import {
fancy, border, warning, screenSm,
} from '~/theme/variables'
const key = require('../assets/key.svg') const key = require('../assets/key.svg')
const triangle = require('../assets/triangle.svg') const triangle = require('../assets/triangle.svg')
const styles = () => ({ const styles = () => ({
root: { root: {
display: 'none',
[`@media (min-width: ${screenSm}px)`]: {
display: 'flex', display: 'flex',
}, },
},
dot: { dot: {
position: 'relative', position: 'relative',
backgroundColor: '#ffffff', backgroundColor: '#ffffff',

32
src/components/Header/components/Layout.jsx
View File

@ -13,7 +13,7 @@ import Img from '~/components/layout/Img'
import Row from '~/components/layout/Row' import Row from '~/components/layout/Row'
import Spacer from '~/components/Spacer' import Spacer from '~/components/Spacer'
import { import {
border, sm, md, headerHeight, border, sm, md, headerHeight, screenSm,
} from '~/theme/variables' } from '~/theme/variables'
import Provider from './Provider' import Provider from './Provider'
import NetworkLabel from './NetworkLabel' import NetworkLabel from './NetworkLabel'
@ -30,26 +30,34 @@ type Props = Open & {
const styles = () => ({ const styles = () => ({
root: { root: {
backgroundColor: 'white', backgroundColor: 'white',
padding: 0,
boxShadow: '0 0 10px 0 rgba(33, 48, 77, 0.1)',
minWidth: '280px',
borderRadius: sm, borderRadius: sm,
boxShadow: '0 0 10px 0 rgba(33, 48, 77, 0.1)',
marginTop: '11px', marginTop: '11px',
minWidth: '280px',
padding: 0,
}, },
summary: { summary: {
borderBottom: `solid 2px ${border}`,
alignItems: 'center', alignItems: 'center',
height: headerHeight,
boxShadow: '0 2px 4px 0 rgba(212, 212, 211, 0.59)',
backgroundColor: 'white', backgroundColor: 'white',
zIndex: 1301, borderBottom: `solid 2px ${border}`,
boxShadow: '0 2px 4px 0 rgba(212, 212, 211, 0.59)',
flexWrap: 'nowrap',
height: headerHeight,
position: 'fixed', position: 'fixed',
width: '100%', width: '100%',
zIndex: 1301,
}, },
logo: { logo: {
padding: `${sm} ${md}`,
flexBasis: '95px', flexBasis: '95px',
flexGrow: 0, flexShrink: '0',
flexGrow: '0',
maxWidth: '55px',
padding: sm,
[`@media (min-width: ${screenSm}px)`]: {
maxWidth: 'none',
paddingLeft: md,
paddingRight: md,
},
}, },
popper: { popper: {
zIndex: 2000, zIndex: 2000,
@ -79,10 +87,10 @@ const Layout = openHoc(
<Provider open={open} toggle={toggle} info={providerInfo}> <Provider open={open} toggle={toggle} info={providerInfo}>
{(providerRef) => ( {(providerRef) => (
<Popper <Popper
open={open}
anchorEl={providerRef.current} anchorEl={providerRef.current}
placement="bottom"
className={classes.popper} className={classes.popper}
open={open}
placement="bottom"
popperOptions={{ positionFixed: true }} popperOptions={{ positionFixed: true }}
> >
{({ TransitionProps }) => ( {({ TransitionProps }) => (

16
src/components/Header/components/NetworkLabel.jsx
View File

@ -5,7 +5,7 @@ import { getNetwork } from '~/config'
import Paragraph from '~/components/layout/Paragraph' import Paragraph from '~/components/layout/Paragraph'
import Col from '~/components/layout/Col' import Col from '~/components/layout/Col'
import { import {
xs, sm, md, border, xs, sm, md, border, screenSm,
} from '~/theme/variables' } from '~/theme/variables'
const network = getNetwork() const network = getNetwork()
@ -14,14 +14,22 @@ const formattedNetwork = network[0].toUpperCase() + network.substring(1).toLower
const useStyles = makeStyles({ const useStyles = makeStyles({
container: { container: {
flexGrow: 0, flexGrow: 0,
padding: `0 ${md}`, padding: `0 ${sm}`,
[`@media (min-width: ${screenSm}px)`]: {
paddingLeft: md,
paddingRight: md,
},
}, },
text: { text: {
background: border, background: border,
padding: `${xs} ${sm}`,
borderRadius: '3px', borderRadius: '3px',
marginLeft: sm,
lineHeight: 'normal', lineHeight: 'normal',
margin: '0',
padding: `${xs} ${sm}`,
[`@media (min-width: ${screenSm}px)`]: {
marginLeft: '8px',
},
}, },
}) })

21
src/components/Header/components/Provider.jsx
View File

@ -7,7 +7,7 @@ import ExpandMore from '@material-ui/icons/ExpandMore'
import Col from '~/components/layout/Col' import Col from '~/components/layout/Col'
import Divider from '~/components/layout/Divider' import Divider from '~/components/layout/Divider'
import { type Open } from '~/components/hoc/OpenHoc' import { type Open } from '~/components/hoc/OpenHoc'
import { sm, md } from '~/theme/variables' import { sm, md, screenSm } from '~/theme/variables'
type Props = Open & { type Props = Open & {
classes: Object, classes: Object,
@ -18,22 +18,29 @@ type Props = Open & {
const styles = () => ({ const styles = () => ({
root: { root: {
height: '100%',
display: 'flex',
alignItems: 'center', alignItems: 'center',
display: 'flex',
height: '100%',
[`@media (min-width: ${screenSm}px)`]: {
flexBasis: '284px', flexBasis: '284px',
marginRight: '20px', marginRight: '20px',
}, },
},
provider: { provider: {
padding: `${sm} ${md}`,
alignItems: 'center', alignItems: 'center',
flex: '1 1 auto',
display: 'flex',
cursor: 'pointer', cursor: 'pointer',
display: 'flex',
flex: '1 1 auto',
padding: sm,
[`@media (min-width: ${screenSm}px)`]: {
paddingLeft: md,
paddingRight: md,
},
}, },
expand: { expand: {
width: '30px',
height: '30px', height: '30px',
width: '30px',
}, },
}) })

36
src/components/Header/components/ProviderInfo/ProviderAccessible.jsx
View File

@ -4,7 +4,7 @@ import { withStyles } from '@material-ui/core/styles'
import Dot from '@material-ui/icons/FiberManualRecord' import Dot from '@material-ui/icons/FiberManualRecord'
import Paragraph from '~/components/layout/Paragraph' import Paragraph from '~/components/layout/Paragraph'
import Col from '~/components/layout/Col' import Col from '~/components/layout/Col'
import { connected as connectedBg, sm } from '~/theme/variables' import { screenSm, connected as connectedBg, sm } from '~/theme/variables'
import Identicon from '~/components/Identicon' import Identicon from '~/components/Identicon'
import { shortVersionOf } from '~/logic/wallets/ethAddresses' import { shortVersionOf } from '~/logic/wallets/ethAddresses'
import CircleDot from '~/components/Header/components/CircleDot' import CircleDot from '~/components/Header/components/CircleDot'
@ -21,23 +21,33 @@ const styles = () => ({
network: { network: {
fontFamily: 'Averta, sans-serif', fontFamily: 'Averta, sans-serif',
}, },
logo: { identicon: {
height: '15px', display: 'none',
width: '15px', [`@media (min-width: ${screenSm}px)`]: {
top: '12px', display: 'block',
position: 'relative', },
right: '10px', },
backgroundColor: '#ffffff', dot: {
backgroundColor: '#fff',
borderRadius: '15px', borderRadius: '15px',
color: connectedBg, color: connectedBg,
display: 'none',
height: '15px',
position: 'relative',
right: '10px',
top: '12px',
width: '15px',
[`@media (min-width: ${screenSm}px)`]: {
display: 'block',
},
}, },
account: { account: {
paddingRight: sm, alignItems: 'start',
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
justifyContent: 'left',
alignItems: 'start',
flexGrow: 1, flexGrow: 1,
justifyContent: 'left',
paddingRight: sm,
}, },
address: { address: {
letterSpacing: '-0.5px', letterSpacing: '-0.5px',
@ -56,8 +66,8 @@ const ProviderInfo = ({
<> <>
{connected && ( {connected && (
<> <>
<Identicon address={identiconAddress} diameter={30} /> <Identicon className={classes.identicon} address={identiconAddress} diameter={30} />
<Dot className={classes.logo} /> <Dot className={classes.dot} />
</> </>
)} )}
{!connected && <CircleDot keySize={14} circleSize={35} dotSize={16} dotTop={24} dotRight={11} mode="warning" />} {!connected && <CircleDot keySize={14} circleSize={35} dotSize={16} dotTop={24} dotRight={11} mode="warning" />}

7
src/components/Header/components/ProviderInfo/ProviderDisconnected.jsx
View File

@ -17,15 +17,16 @@ const styles = () => ({
fontFamily: 'Averta, sans-serif', fontFamily: 'Averta, sans-serif',
}, },
account: { account: {
paddingRight: sm, alignItems: 'start',
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
justifyContent: 'center',
alignItems: 'start',
flexGrow: 1, flexGrow: 1,
justifyContent: 'center',
paddingRight: sm,
}, },
connect: { connect: {
letterSpacing: '-0.5px', letterSpacing: '-0.5px',
whiteSpace: 'nowrap',
}, },
}) })

8
src/components/Header/components/SafeListHeader/index.jsx
View File

@ -8,7 +8,7 @@ import ExpandLessIcon from '@material-ui/icons/ExpandLess'
import Paragraph from '~/components/layout/Paragraph' import Paragraph from '~/components/layout/Paragraph'
import Col from '~/components/layout/Col' import Col from '~/components/layout/Col'
import { import {
xs, sm, md, border, xs, sm, md, border, screenSm,
} from '~/theme/variables' } from '~/theme/variables'
import { safesCountSelector } from '~/routes/safe/store/selectors' import { safesCountSelector } from '~/routes/safe/store/selectors'
import { SidebarContext } from '~/components/Sidebar' import { SidebarContext } from '~/components/Sidebar'
@ -18,7 +18,11 @@ export const TOGGLE_SIDEBAR_BTN_TESTID = 'TOGGLE_SIDEBAR_BTN'
const useStyles = makeStyles({ const useStyles = makeStyles({
container: { container: {
flexGrow: 0, flexGrow: 0,
padding: `0 ${md}`, padding: `0 ${sm}`,
[`@media (min-width: ${screenSm}px)`]: {
paddingLeft: md,
paddingRight: md,
},
}, },
counter: { counter: {
background: border, background: border,

6
src/components/Header/index.jsx
View File

@ -81,11 +81,11 @@ class HeaderComponent extends React.PureComponent<Props, State> {
return ( return (
<UserDetails <UserDetails
provider={provider}
network={network}
userAddress={userAddress}
connected={available} connected={available}
network={network}
onDisconnect={this.onDisconnect} onDisconnect={this.onDisconnect}
provider={provider}
userAddress={userAddress}
/> />
) )
} }

0
src/components/Sidebar/LegalLinks.jsx
View File

1
src/components/Sidebar/SafeList/index.jsx
View File

@ -57,6 +57,7 @@ const useStyles = makeStyles({
}, },
safeName: { safeName: {
color: primary, color: primary,
overflowWrap: 'break-word',
}, },
safeAddress: { safeAddress: {
color: disabled, color: disabled,

28
src/components/Sidebar/index.jsx
View File

@ -97,32 +97,34 @@ const Sidebar = ({
<SidebarContext.Provider value={{ isOpen, toggleSidebar }}> <SidebarContext.Provider value={{ isOpen, toggleSidebar }}>
<ClickAwayListener onClickAway={toggleSidebar}> <ClickAwayListener onClickAway={toggleSidebar}>
<Drawer <Drawer
className={classes.sidebar}
open={isOpen}
onKeyDown={handleEsc}
classes={{ paper: classes.sidebarPaper }}
ModalProps={{ onBackdropClick: toggleSidebar }} ModalProps={{ onBackdropClick: toggleSidebar }}
className={classes.sidebar}
classes={{ paper: classes.sidebarPaper }}
onKeyDown={handleEsc}
open={isOpen}
> >
<Row align="center"> <Row className={classes.topComponents} align="center">
<Row className={classes.searchWrapper} align="center">
<SearchIcon className={classes.searchIcon} /> <SearchIcon className={classes.searchIcon} />
<SearchBar <SearchBar
classes={searchClasses} classes={searchClasses}
onCancelSearch={handleFilterCancel}
onChange={handleFilterChange}
placeholder="Search by name or address" placeholder="Search by name or address"
searchIcon={<div />} searchIcon={<div />}
onChange={handleFilterChange}
onCancelSearch={handleFilterCancel}
value={filter} value={filter}
/> />
<Divider /> </Row>
<Spacer /> <Divider className={classes.divider} />
<Spacer className={classes.spacer} />
<Button <Button
component={Link}
to={WELCOME_ADDRESS}
className={classes.addSafeBtn} className={classes.addSafeBtn}
variant="contained"
size="small"
color="primary" color="primary"
component={Link}
onClick={toggleSidebar} onClick={toggleSidebar}
size="small"
to={WELCOME_ADDRESS}
variant="contained"
> >
+ Add Safe + Add Safe
</Button> </Button>

51
src/components/Sidebar/style.js
View File

@ -1,7 +1,7 @@
// @flow // @flow
import { makeStyles } from '@material-ui/core/styles' import { makeStyles } from '@material-ui/core/styles'
import { import {
xs, mediumFontSize, secondaryText, md, headerHeight, xs, mediumFontSize, secondaryText, md, headerHeight, screenSm,
} from '~/theme/variables' } from '~/theme/variables'
const sidebarWidth = '400px' const sidebarWidth = '400px'
@ -12,17 +12,50 @@ const sidebarBorderRadius = '8px'
const useSidebarStyles = makeStyles({ const useSidebarStyles = makeStyles({
sidebar: { sidebar: {
width: sidebarWidth,
marginLeft: sidebarMarginLeft,
borderRadius: sidebarBorderRadius, borderRadius: sidebarBorderRadius,
marginLeft: sidebarMarginLeft,
top: sidebarMarginTop, top: sidebarMarginTop,
width: sidebarWidth,
}, },
sidebarPaper: { sidebarPaper: {
width: sidebarWidth,
marginLeft: sidebarMarginLeft,
top: `calc(${headerHeight} + ${sidebarMarginTop})`,
maxHeight: `calc(100vh - ${headerHeight} - ${sidebarMarginTop} - ${sidebarMarginBottom})`,
borderRadius: sidebarBorderRadius, borderRadius: sidebarBorderRadius,
marginLeft: sidebarMarginLeft,
maxHeight: `calc(100vh - ${headerHeight} - ${sidebarMarginTop} - ${sidebarMarginBottom})`,
top: `calc(${headerHeight} + ${sidebarMarginTop})`,
width: sidebarWidth,
maxWidth: `calc(100% - ${sidebarMarginLeft} - ${sidebarMarginLeft})`,
[`@media (min-width: ${screenSm}px)`]: {
maxWidth: 'none',
},
},
topComponents: {
alignItems: 'center',
flexFlow: 'column',
paddingBottom: '30px',
[`@media (min-width: ${screenSm}px)`]: {
flexFlow: 'row',
paddingBottom: '0',
},
},
searchWrapper: {
width: '100%',
[`@media (min-width: ${screenSm}px)`]: {
width: 'auto',
},
},
divider: {
display: 'none',
[`@media (min-width: ${screenSm}px)`]: {
display: 'block',
},
},
spacer: {
display: 'none',
[`@media (min-width: ${screenSm}px)`]: {
display: 'block',
},
}, },
headerPlaceholder: { headerPlaceholder: {
minHeight: headerHeight, minHeight: headerHeight,
@ -48,14 +81,16 @@ const useSidebarStyles = makeStyles({
}, },
}, },
searchContainer: { searchContainer: {
width: '190px', flexGrow: '1',
marginLeft: xs, marginLeft: xs,
marginRight: xs, marginRight: xs,
minWidth: '190px',
}, },
searchRoot: { searchRoot: {
letterSpacing: '-0.5px', letterSpacing: '-0.5px',
border: 'none', border: 'none',
boxShadow: 'none', boxShadow: 'none',
flexGrow: '1',
'& > button': { '& > button': {
display: 'none', display: 'none',
}, },

6
src/components/Spacer/index.jsx
View File

@ -1,8 +1,12 @@
// @flow // @flow
import * as React from 'react' import * as React from 'react'
type Props = {
className?: string,
}
const style = { const style = {
flexGrow: 1, flexGrow: 1,
} }
export default () => <div style={style} /> export default ({ className }: Props) => <div className={className} style={style} />

12
src/components/layout/Divider/index.js
View File

@ -2,11 +2,15 @@
import * as React from 'react' import * as React from 'react'
import { border } from '~/theme/variables' import { border } from '~/theme/variables'
const style = { type Props = {
height: '100%', className?: string,
borderRight: `solid 2px ${border}`,
} }
const Divider = () => <div style={style} /> const style = {
borderRight: `solid 2px ${border}`,
height: '100%',
}
const Divider = ({ className }: Props) => <div className={className} style={style} />
export default Divider export default Divider

9
src/components/layout/Hairline/index.js
View File

@ -12,16 +12,19 @@ const calculateStyleFrom = (color?: string, margin?: Size) => ({
}) })
type Props = { type Props = {
margin?: Size, className?: string,
color?: string, color?: string,
margin?: Size,
style?: Object, style?: Object,
} }
const Hairline = ({ margin, color, style }: Props) => { const Hairline = ({
margin, color, style, className,
}: Props) => {
const calculatedStyles = calculateStyleFrom(color, margin) const calculatedStyles = calculateStyleFrom(color, margin)
const mergedStyles = { ...calculatedStyles, ...(style || {}) } const mergedStyles = { ...calculatedStyles, ...(style || {}) }
return <div style={mergedStyles} /> return <div style={mergedStyles} className={className} />
} }
export default Hairline export default Hairline

22
src/routes/load/components/OwnerList/index.jsx
View File

@ -1,6 +1,7 @@
// @flow // @flow
import React, { useState, useEffect } from 'react' import React, { useState, useEffect } from 'react'
import { withStyles } from '@material-ui/core/styles' import { withStyles } from '@material-ui/core/styles'
import TableContainer from '@material-ui/core/TableContainer'
import Block from '~/components/layout/Block' import Block from '~/components/layout/Block'
import Field from '~/components/forms/Field' import Field from '~/components/forms/Field'
import { required } from '~/components/forms/validator' import { required } from '~/components/forms/validator'
@ -14,7 +15,7 @@ import Hairline from '~/components/layout/Hairline'
import EtherscanBtn from '~/components/EtherscanBtn' import EtherscanBtn from '~/components/EtherscanBtn'
import CopyBtn from '~/components/CopyBtn' import CopyBtn from '~/components/CopyBtn'
import { import {
sm, md, lg, border, disabled, extraSmallFontSize, sm, md, lg, border, disabled, extraSmallFontSize, screenSm,
} from '~/theme/variables' } from '~/theme/variables'
import { getOwnerNameBy, getOwnerAddressBy } from '~/routes/open/components/fields' import { getOwnerNameBy, getOwnerAddressBy } from '~/routes/open/components/fields'
import { FIELD_LOAD_ADDRESS, THRESHOLD } from '~/routes/load/components/fields' import { FIELD_LOAD_ADDRESS, THRESHOLD } from '~/routes/load/components/fields'
@ -30,8 +31,13 @@ const styles = () => ({
display: 'flex', display: 'flex',
justifyContent: 'flex-start', justifyContent: 'flex-start',
}, },
ownerNames: { ownerName: {
maxWidth: '400px', marginBottom: '15px',
minWidth: '100%',
[`@media (min-width: ${screenSm}px)`]: {
marginBottom: '0',
minWidth: '0',
},
}, },
ownerAddresses: { ownerAddresses: {
alignItems: 'center', alignItems: 'center',
@ -118,6 +124,7 @@ const OwnerListComponent = (props: Props) => {
</Paragraph> </Paragraph>
</Block> </Block>
<Hairline /> <Hairline />
<TableContainer>
<Row className={classes.header}> <Row className={classes.header}>
<Col xs={4}>NAME</Col> <Col xs={4}>NAME</Col>
<Col xs={8}>ADDRESS</Col> <Col xs={8}>ADDRESS</Col>
@ -126,16 +133,16 @@ const OwnerListComponent = (props: Props) => {
<Block margin="md" padding="md"> <Block margin="md" padding="md">
{owners.map((address, index) => ( {owners.map((address, index) => (
<Row key={address} className={classes.owner}> <Row key={address} className={classes.owner}>
<Col xs={4}> <Col className={classes.ownerName} xs={4}>
<Field <Field
className={classes.name} className={classes.name}
name={getOwnerNameBy(index)}
component={TextField} component={TextField}
type="text"
validate={required}
initialValue={`Owner #${index + 1}`} initialValue={`Owner #${index + 1}`}
name={getOwnerNameBy(index)}
placeholder="Owner Name*" placeholder="Owner Name*"
text="Owner Name" text="Owner Name"
type="text"
validate={required}
/> />
</Col> </Col>
<Col xs={8}> <Col xs={8}>
@ -151,6 +158,7 @@ const OwnerListComponent = (props: Props) => {
</Row> </Row>
))} ))}
</Block> </Block>
</TableContainer>
</> </>
) )
} }

32
src/routes/load/components/ReviewInformation/index.jsx
View File

@ -2,6 +2,7 @@
import * as React from 'react' import * as React from 'react'
import classNames from 'classnames' import classNames from 'classnames'
import { withStyles } from '@material-ui/core/styles' import { withStyles } from '@material-ui/core/styles'
import TableContainer from '@material-ui/core/TableContainer'
import Block from '~/components/layout/Block' import Block from '~/components/layout/Block'
import Identicon from '~/components/Identicon' import Identicon from '~/components/Identicon'
import OpenPaper from '~/components/Stepper/OpenPaper' import OpenPaper from '~/components/Stepper/OpenPaper'
@ -12,7 +13,7 @@ import Paragraph from '~/components/layout/Paragraph'
import CopyBtn from '~/components/CopyBtn' import CopyBtn from '~/components/CopyBtn'
import Hairline from '~/components/layout/Hairline' import Hairline from '~/components/layout/Hairline'
import { import {
xs, sm, lg, border, xs, sm, lg, border, screenSm,
} from '~/theme/variables' } from '~/theme/variables'
import { shortVersionOf } from '~/logic/wallets/ethAddresses' import { shortVersionOf } from '~/logic/wallets/ethAddresses'
import { getAccountsFrom } from '~/routes/open/utils/safeDataExtractor' import { getAccountsFrom } from '~/routes/open/utils/safeDataExtractor'
@ -22,7 +23,23 @@ import type { LayoutProps } from '../Layout'
const styles = () => ({ const styles = () => ({
root: { root: {
flexDirection: 'column',
minHeight: '300px', minHeight: '300px',
[`@media (min-width: ${screenSm}px)`]: {
flexDirection: 'row',
},
},
detailsColumn: {
minWidth: '100%',
[`@media (min-width: ${screenSm}px)`]: {
minWidth: '0',
},
},
ownersColumn: {
minWidth: '100%',
[`@media (min-width: ${screenSm}px)`]: {
minWidth: '0',
},
}, },
details: { details: {
padding: lg, padding: lg,
@ -40,9 +57,10 @@ const styles = () => ({
whiteSpace: 'nowrap', whiteSpace: 'nowrap',
}, },
owner: { owner: {
alignItems: 'center',
minWidth: 'fit-content',
padding: sm, padding: sm,
paddingLeft: lg, paddingLeft: lg,
alignItems: 'center',
}, },
user: { user: {
justifyContent: 'left', justifyContent: 'left',
@ -101,7 +119,7 @@ class ReviewComponent extends React.PureComponent<Props, State> {
return ( return (
<> <>
<Row className={classes.root}> <Row className={classes.root}>
<Col xs={4} layout="column"> <Col className={classes.detailsColumn} xs={4} layout="column">
<Block className={classes.details}> <Block className={classes.details}>
<Block margin="lg"> <Block margin="lg">
<Paragraph size="lg" color="primary" noMargin> <Paragraph size="lg" color="primary" noMargin>
@ -147,7 +165,8 @@ class ReviewComponent extends React.PureComponent<Props, State> {
</Block> </Block>
</Block> </Block>
</Col> </Col>
<Col xs={8} layout="column"> <Col className={classes.ownersColumn} xs={8} layout="column">
<TableContainer>
<Block className={classes.owners}> <Block className={classes.owners}>
<Paragraph size="lg" color="primary" noMargin> <Paragraph size="lg" color="primary" noMargin>
{`${getNumOwnersFrom(values)} Safe owners`} {`${getNumOwnersFrom(values)} Safe owners`}
@ -155,7 +174,7 @@ class ReviewComponent extends React.PureComponent<Props, State> {
</Block> </Block>
<Hairline /> <Hairline />
{owners.map((address, index) => ( {owners.map((address, index) => (
<React.Fragment key={address}> <>
<Row className={classes.owner}> <Row className={classes.owner}>
<Col xs={1} align="center"> <Col xs={1} align="center">
<Identicon address={address} diameter={32} /> <Identicon address={address} diameter={32} />
@ -176,8 +195,9 @@ class ReviewComponent extends React.PureComponent<Props, State> {
</Col> </Col>
</Row> </Row>
{index !== owners.length - 1 && <Hairline />} {index !== owners.length - 1 && <Hairline />}
</React.Fragment> </>
))} ))}
</TableContainer>
</Col> </Col>
</Row> </Row>
</> </>

34
src/routes/open/components/ReviewInformation/index.jsx
View File

@ -2,6 +2,7 @@
import * as React from 'react' import * as React from 'react'
import classNames from 'classnames' import classNames from 'classnames'
import { withStyles } from '@material-ui/core/styles' import { withStyles } from '@material-ui/core/styles'
import TableContainer from '@material-ui/core/TableContainer'
import { estimateGasForDeployingSafe } from '~/logic/contracts/safeContracts' import { estimateGasForDeployingSafe } from '~/logic/contracts/safeContracts'
import { getNamesFrom, getAccountsFrom } from '~/routes/open/utils/safeDataExtractor' import { getNamesFrom, getAccountsFrom } from '~/routes/open/utils/safeDataExtractor'
import Block from '~/components/layout/Block' import Block from '~/components/layout/Block'
@ -14,7 +15,7 @@ import Row from '~/components/layout/Row'
import Paragraph from '~/components/layout/Paragraph' import Paragraph from '~/components/layout/Paragraph'
import { formatAmount } from '~/logic/tokens/utils/formatAmount' import { formatAmount } from '~/logic/tokens/utils/formatAmount'
import { import {
sm, md, lg, border, background, sm, md, lg, border, background, screenSm,
} from '~/theme/variables' } from '~/theme/variables'
import Hairline from '~/components/layout/Hairline' import Hairline from '~/components/layout/Hairline'
import { getWeb3 } from '~/logic/wallets/getWeb3' import { getWeb3 } from '~/logic/wallets/getWeb3'
@ -25,6 +26,21 @@ const { useEffect, useState } = React
const styles = () => ({ const styles = () => ({
root: { root: {
minHeight: '300px', minHeight: '300px',
[`@media (min-width: ${screenSm}px)`]: {
flexDirection: 'row',
},
},
detailsColumn: {
minWidth: '100%',
[`@media (min-width: ${screenSm}px)`]: {
minWidth: '0',
},
},
ownersColumn: {
minWidth: '100%',
[`@media (min-width: ${screenSm}px)`]: {
minWidth: '0',
},
}, },
details: { details: {
padding: lg, padding: lg,
@ -33,10 +49,10 @@ const styles = () => ({
}, },
info: { info: {
backgroundColor: background, backgroundColor: background,
padding: lg,
justifyContent: 'center',
textAlign: 'center',
flexDirection: 'column', flexDirection: 'column',
justifyContent: 'center',
padding: lg,
textAlign: 'center',
}, },
owners: { owners: {
padding: lg, padding: lg,
@ -49,8 +65,10 @@ const styles = () => ({
whiteSpace: 'nowrap', whiteSpace: 'nowrap',
}, },
owner: { owner: {
padding: md,
alignItems: 'center', alignItems: 'center',
minWidth: 'fit-content',
padding: sm,
paddingLeft: lg,
}, },
user: { user: {
justifyContent: 'left', justifyContent: 'left',
@ -102,7 +120,7 @@ const ReviewComponent = ({ values, classes, userAccount }: Props) => {
return ( return (
<> <>
<Row className={classes.root}> <Row className={classes.root}>
<Col xs={4} layout="column"> <Col className={classes.detailsColumn} xs={4} layout="column">
<Block className={classes.details}> <Block className={classes.details}>
<Block margin="lg"> <Block margin="lg">
<Paragraph size="lg" color="primary" noMargin> <Paragraph size="lg" color="primary" noMargin>
@ -127,7 +145,8 @@ const ReviewComponent = ({ values, classes, userAccount }: Props) => {
</Block> </Block>
</Block> </Block>
</Col> </Col>
<Col xs={8} layout="column"> <Col className={classes.ownersColumn} xs={8} layout="column">
<TableContainer>
<Block className={classes.owners}> <Block className={classes.owners}>
<Paragraph size="lg" color="primary" noMargin> <Paragraph size="lg" color="primary" noMargin>
{`${numOwners} Safe owners`} {`${numOwners} Safe owners`}
@ -158,6 +177,7 @@ const ReviewComponent = ({ values, classes, userAccount }: Props) => {
<Hairline /> <Hairline />
</React.Fragment> </React.Fragment>
))} ))}
</TableContainer>
</Col> </Col>
</Row> </Row>
<Row className={classes.info} align="center"> <Row className={classes.info} align="center">

10
src/routes/open/components/SafeOwnersConfirmationsForm/index.jsx
View File

@ -132,7 +132,7 @@ const SafeOwners = (props: Props) => {
return ( return (
<Row key={`owner${index}`} className={classes.owner}> <Row key={`owner${index}`} className={classes.owner}>
<Col xs={4}> <Col className={classes.ownerName} xs={4}>
<Field <Field
className={classes.name} className={classes.name}
name={getOwnerNameBy(index)} name={getOwnerNameBy(index)}
@ -143,7 +143,7 @@ const SafeOwners = (props: Props) => {
text="Owner Name" text="Owner Name"
/> />
</Col> </Col>
<Col xs={6}> <Col className={classes.ownerAddress} xs={6}>
<AddressInput <AddressInput
name={addressName} name={addressName}
component={TextField} component={TextField}
@ -193,8 +193,8 @@ const SafeOwners = (props: Props) => {
<Paragraph size="md" color="primary"> <Paragraph size="md" color="primary">
Any transaction requires the confirmation of: Any transaction requires the confirmation of:
</Paragraph> </Paragraph>
<Row margin="xl" align="center"> <Row className={classes.ownersAmount} margin="xl" align="center">
<Col xs={2}> <Col className={classes.ownersAmountItem} xs={2}>
<Field <Field
name={FIELD_CONFIRMATIONS} name={FIELD_CONFIRMATIONS}
component={SelectField} component={SelectField}
@ -208,7 +208,7 @@ const SafeOwners = (props: Props) => {
))} ))}
</Field> </Field>
</Col> </Col>
<Col xs={10}> <Col className={classes.ownersAmountItem} xs={10}>
<Paragraph size="lg" color="primary" noMargin className={classes.owners}> <Paragraph size="lg" color="primary" noMargin className={classes.owners}>
out of out of
{' '} {' '}

37
src/routes/open/components/SafeOwnersConfirmationsForm/style.js
View File

@ -1,6 +1,6 @@
// @flow // @flow
import { import {
md, lg, sm, disabled, extraSmallFontSize, md, lg, sm, disabled, extraSmallFontSize, screenSm,
} from '~/theme/variables' } from '~/theme/variables'
export const styles = () => ({ export const styles = () => ({
@ -11,11 +11,32 @@ export const styles = () => ({
padding: `${md} ${lg}`, padding: `${md} ${lg}`,
}, },
owner: { owner: {
padding: `0 ${lg}`, flexDirection: 'column',
marginTop: '12px', marginTop: '12px',
padding: `0 ${lg}`,
'&:first-child': { '&:first-child': {
marginTop: 0, marginTop: 0,
}, },
[`@media (min-width: ${screenSm}px)`]: {
flexDirection: 'row',
},
},
ownerName: {
marginBottom: '5px',
minWidth: '100%',
[`@media (min-width: ${screenSm}px)`]: {
marginBottom: '0',
minWidth: '0',
},
},
ownerAddress: {
marginBottom: '15px',
minWidth: '100%',
[`@media (min-width: ${screenSm}px)`]: {
marginBottom: '0',
minWidth: '0',
},
}, },
header: { header: {
padding: `${sm} ${lg}`, padding: `${sm} ${lg}`,
@ -45,4 +66,16 @@ export const styles = () => ({
owners: { owners: {
paddingLeft: md, paddingLeft: md,
}, },
ownersAmount: {
flexDirection: 'column',
[`@media (min-width: ${screenSm}px)`]: {
flexDirection: 'row',
},
},
ownersAmountItem: {
minWidth: '100%',
[`@media (min-width: ${screenSm}px)`]: {
minWidth: '0',
},
},
}) })

3
src/routes/safe/components/AddressBook/index.jsx
View File

@ -9,6 +9,7 @@ import { withStyles } from '@material-ui/core/styles'
import classNames from 'classnames/bind' import classNames from 'classnames/bind'
import CallMade from '@material-ui/icons/CallMade' import CallMade from '@material-ui/icons/CallMade'
import { useDispatch, useSelector } from 'react-redux' import { useDispatch, useSelector } from 'react-redux'
import TableContainer from '@material-ui/core/TableContainer'
import Block from '~/components/layout/Block' import Block from '~/components/layout/Block'
import Row from '~/components/layout/Row' import Row from '~/components/layout/Row'
import { type Column, cellWidth } from '~/components/Table/TableHead' import { type Column, cellWidth } from '~/components/Table/TableHead'
@ -123,6 +124,7 @@ const AddressBookTable = ({ classes }: Props) => {
</Col> </Col>
</Row> </Row>
<Block className={classes.formContainer}> <Block className={classes.formContainer}>
<TableContainer>
<Table <Table
label="Owners" label="Owners"
columns={columns} columns={columns}
@ -214,6 +216,7 @@ const AddressBookTable = ({ classes }: Props) => {
) )
})} })}
</Table> </Table>
</TableContainer>
</Block> </Block>
<CreateEditEntryModal <CreateEditEntryModal
onClose={() => setEditCreateEntryModalOpen(false)} onClose={() => setEditCreateEntryModalOpen(false)}

14
src/routes/safe/components/Balances/Receive/index.jsx
View File

@ -14,7 +14,7 @@ import Col from '~/components/layout/Col'
import EtherscanBtn from '~/components/EtherscanBtn' import EtherscanBtn from '~/components/EtherscanBtn'
import CopyBtn from '~/components/CopyBtn' import CopyBtn from '~/components/CopyBtn'
import { import {
sm, lg, md, secondaryText, sm, lg, md, secondaryText, screenSm,
} from '~/theme/variables' } from '~/theme/variables'
import { copyToClipboard } from '~/utils/clipboard' import { copyToClipboard } from '~/utils/clipboard'
@ -53,11 +53,23 @@ const styles = () => ({
}, },
}, },
addressContainer: { addressContainer: {
flexDirection: 'column',
justifyContent: 'center',
margin: `${lg} 0`, margin: `${lg} 0`,
[`@media (min-width: ${screenSm}px)`]: {
flexDirection: 'row',
},
}, },
address: { address: {
marginLeft: sm, marginLeft: sm,
marginRight: sm, marginRight: sm,
maxWidth: '70%',
overflowWrap: 'break-word',
[`@media (min-width: ${screenSm}px)`]: {
maxWidth: 'none',
},
}, },
}) })

21
src/routes/safe/components/Balances/index.jsx
View File

@ -4,6 +4,7 @@ import { List } from 'immutable'
import classNames from 'classnames/bind' import classNames from 'classnames/bind'
import TableRow from '@material-ui/core/TableRow' import TableRow from '@material-ui/core/TableRow'
import TableCell from '@material-ui/core/TableCell' import TableCell from '@material-ui/core/TableCell'
import TableContainer from '@material-ui/core/TableContainer'
import { withStyles } from '@material-ui/core/styles' import { withStyles } from '@material-ui/core/styles'
import CallMade from '@material-ui/icons/CallMade' import CallMade from '@material-ui/icons/CallMade'
import CallReceived from '@material-ui/icons/CallReceived' import CallReceived from '@material-ui/icons/CallReceived'
@ -148,14 +149,15 @@ class Balances extends React.Component<Props, State> {
</Modal> </Modal>
</Col> </Col>
</Row> </Row>
<TableContainer>
<Table <Table
label="Balances"
defaultOrderBy={BALANCE_TABLE_ASSET_ID}
defaultRowsPerPage={10}
columns={columns} columns={columns}
data={filteredData} data={filteredData}
size={filteredData.size}
defaultFixed defaultFixed
defaultOrderBy={BALANCE_TABLE_ASSET_ID}
defaultRowsPerPage={10}
label="Balances"
size={filteredData.size}
> >
{(sortedData: Array<BalanceRow>) => sortedData.map((row: any, index: number) => ( {(sortedData: Array<BalanceRow>) => sortedData.map((row: any, index: number) => (
<TableRow tabIndex={-1} key={index} className={classes.hide} data-testid={BALANCE_ROW_TEST_ID}> <TableRow tabIndex={-1} key={index} className={classes.hide} data-testid={BALANCE_ROW_TEST_ID}>
@ -225,16 +227,17 @@ class Balances extends React.Component<Props, State> {
</TableRow> </TableRow>
))} ))}
</Table> </Table>
</TableContainer>
<SendModal <SendModal
onClose={this.hideSendFunds} activeScreenType="sendFunds"
createTransaction={createTransaction}
ethBalance={ethBalance}
isOpen={sendFunds.isOpen} isOpen={sendFunds.isOpen}
onClose={this.hideSendFunds}
safeAddress={safeAddress} safeAddress={safeAddress}
safeName={safeName} safeName={safeName}
ethBalance={ethBalance}
tokens={activeTokens}
selectedToken={sendFunds.selectedToken} selectedToken={sendFunds.selectedToken}
createTransaction={createTransaction} tokens={activeTokens}
activeScreenType="sendFunds"
/> />
<Modal <Modal
title="Receive Tokens" title="Receive Tokens"

5
src/routes/safe/components/Balances/style.js
View File

@ -20,7 +20,10 @@ export const styles = (theme: Object) => ({
fontSize: 16, fontSize: 16,
}, },
receiveModal: { receiveModal: {
height: '544px', height: 'auto',
maxWidth: 'calc(100% - 30px)',
minHeight: '544px',
overflow: 'hidden',
}, },
hide: { hide: {
'&:hover': { '&:hover': {

47
src/routes/safe/components/Layout.jsx
View File

@ -133,10 +133,11 @@ const Layout = (props: Props) => {
return ( return (
<> <>
<Block className={classes.container} margin="xl"> <Block className={classes.container} margin="xl">
<Row className={classes.userInfo}>
<Identicon address={address} diameter={50} /> <Identicon address={address} diameter={50} />
<Block className={classes.name}> <Block className={classes.name}>
<Row> <Row>
<Heading tag="h2" color="primary" testId={SAFE_VIEW_NAME_HEADING_TEST_ID}> <Heading className={classes.nameText} tag="h2" color="primary" testId={SAFE_VIEW_NAME_HEADING_TEST_ID}>
{name} {name}
</Heading> </Heading>
{!granted && <Block className={classes.readonly}>Read Only</Block>} {!granted && <Block className={classes.readonly}>Read Only</Block>}
@ -149,77 +150,69 @@ const Layout = (props: Props) => {
<EtherscanBtn type="address" value={address} /> <EtherscanBtn type="address" value={address} />
</Block> </Block>
</Block> </Block>
</Row>
<Block className={classes.balance}> <Block className={classes.balance}>
<Row align="end" className={classes.actions}>
<Button <Button
variant="contained"
size="small"
color="primary"
className={classes.send} className={classes.send}
onClick={() => showSendFunds('Ether')} color="primary"
disabled={!granted} disabled={!granted}
onClick={() => showSendFunds('Ether')}
size="small"
variant="contained"
> >
<CallMade alt="Send Transaction" className={classNames(classes.leftIcon, classes.iconSmall)} /> <CallMade alt="Send Transaction" className={classNames(classes.leftIcon, classes.iconSmall)} />
Send Send
</Button> </Button>
<Button <Button
variant="contained"
size="small"
color="primary"
className={classes.receive} className={classes.receive}
color="primary"
onClick={onShow('Receive')} onClick={onShow('Receive')}
size="small"
variant="contained"
> >
<CallReceived alt="Receive Transaction" className={classNames(classes.leftIcon, classes.iconSmall)} /> <CallReceived alt="Receive Transaction" className={classNames(classes.leftIcon, classes.iconSmall)} />
Receive Receive
</Button> </Button>
</Row>
</Block> </Block>
</Block> </Block>
<Row> <Tabs variant="scrollable" value={location.pathname} onChange={handleCallToRouter} indicatorColor="secondary" textColor="secondary">
<Tabs
value={location.pathname}
onChange={handleCallToRouter}
indicatorColor="secondary"
textColor="secondary"
>
<Tab <Tab
classes={{ classes={{
selected: classes.tabWrapperSelected, selected: classes.tabWrapperSelected,
wrapper: classes.tabWrapper, wrapper: classes.tabWrapper,
}} }}
data-testid={BALANCES_TAB_BTN_TEST_ID}
label={labelBalances} label={labelBalances}
value={`${match.url}/balances`} value={`${match.url}/balances`}
data-testid={BALANCES_TAB_BTN_TEST_ID}
/> />
<Tab <Tab
classes={{ classes={{
selected: classes.tabWrapperSelected, selected: classes.tabWrapperSelected,
wrapper: classes.tabWrapper, wrapper: classes.tabWrapper,
}} }}
data-testid={TRANSACTIONS_TAB_BTN_TEST_ID}
label={labelTransactions} label={labelTransactions}
value={`${match.url}/transactions`} value={`${match.url}/transactions`}
data-testid={TRANSACTIONS_TAB_BTN_TEST_ID}
/> />
<Tab <Tab
classes={{ classes={{
selected: classes.tabWrapperSelected, selected: classes.tabWrapperSelected,
wrapper: classes.tabWrapper, wrapper: classes.tabWrapper,
}} }}
data-testid={ADDRESS_BOOK_TAB_BTN_TEST_ID}
label={labelAddressBook} label={labelAddressBook}
value={`${match.url}/address-book`} value={`${match.url}/address-book`}
data-testid={ADDRESS_BOOK_TAB_BTN_TEST_ID}
/> />
<Tab <Tab
classes={{ classes={{
selected: classes.tabWrapperSelected, selected: classes.tabWrapperSelected,
wrapper: classes.tabWrapper, wrapper: classes.tabWrapper,
}} }}
data-testid={SETTINGS_TAB_BTN_TEST_ID}
label={labelSettings} label={labelSettings}
value={`${match.url}/settings`} value={`${match.url}/settings`}
data-testid={SETTINGS_TAB_BTN_TEST_ID}
/> />
</Tabs> </Tabs>
</Row>
<Hairline color={border} style={{ marginTop: '-2px' }} /> <Hairline color={border} style={{ marginTop: '-2px' }} />
<Switch> <Switch>
<Route <Route
@ -283,13 +276,7 @@ const Layout = (props: Props) => {
/> />
)} )}
/> />
<Route <Route exact path={`${match.path}/address-book`} render={() => <AddressBookTable />} />
exact
path={`${match.path}/address-book`}
render={() => (
<AddressBookTable />
)}
/>
<Redirect to={`${match.path}/balances`} /> <Redirect to={`${match.path}/balances`} />
</Switch> </Switch>
<SendModal <SendModal
@ -304,11 +291,11 @@ const Layout = (props: Props) => {
activeScreenType="chooseTxType" activeScreenType="chooseTxType"
/> />
<Modal <Modal
title="Receive Tokens"
description="Receive Tokens Form" description="Receive Tokens Form"
handleClose={onHide('Receive')} handleClose={onHide('Receive')}
open={showReceive} open={showReceive}
paperClassName={classes.receiveModal} paperClassName={classes.receiveModal}
title="Receive Tokens"
> >
<Receive safeName={name} safeAddress={address} onClose={onHide('Receive')} /> <Receive safeName={name} safeAddress={address} onClose={onHide('Receive')} />
</Modal> </Modal>

3
src/routes/safe/components/Settings/ManageOwners/index.jsx
View File

@ -5,6 +5,7 @@ import { List } from 'immutable'
import { withStyles } from '@material-ui/core/styles' import { withStyles } from '@material-ui/core/styles'
import TableRow from '@material-ui/core/TableRow' import TableRow from '@material-ui/core/TableRow'
import TableCell from '@material-ui/core/TableCell' import TableCell from '@material-ui/core/TableCell'
import TableContainer from '@material-ui/core/TableContainer'
import Block from '~/components/layout/Block' import Block from '~/components/layout/Block'
import Col from '~/components/layout/Col' import Col from '~/components/layout/Col'
import Table from '~/components/Table' import Table from '~/components/Table'
@ -145,6 +146,7 @@ class ManageOwners extends React.Component<Props, State> {
Add, remove and replace owners or rename existing owners. Owner names are only stored locally and never Add, remove and replace owners or rename existing owners. Owner names are only stored locally and never
shared with Gnosis or any third parties. shared with Gnosis or any third parties.
</Paragraph> </Paragraph>
<TableContainer>
<Table <Table
label="Owners" label="Owners"
defaultOrderBy={OWNERS_TABLE_NAME_ID} defaultOrderBy={OWNERS_TABLE_NAME_ID}
@ -205,6 +207,7 @@ class ManageOwners extends React.Component<Props, State> {
</TableRow> </TableRow>
))} ))}
</Table> </Table>
</TableContainer>
</Block> </Block>
{granted && ( {granted && (
<> <>

2
src/routes/safe/components/Settings/RemoveSafeModal/index.jsx
View File

@ -38,7 +38,7 @@ type Props = Actions & {
const RemoveSafeComponent = ({ const RemoveSafeComponent = ({
onClose, isOpen, classes, safeAddress, etherScanLink, safeName, removeSafe, onClose, isOpen, classes, safeAddress, etherScanLink, safeName, removeSafe,
}: Props) => ( }: Props) => (
<Modal title="Remove Safe" description="Remove the selected Safe" handleClose={onClose} open={isOpen}> <Modal paperClassName={classes.modal} title="Remove Safe" description="Remove the selected Safe" handleClose={onClose} open={isOpen}>
<Row align="center" grow className={classes.heading}> <Row align="center" grow className={classes.heading}>
<Paragraph className={classes.manage} noMargin weight="bolder"> <Paragraph className={classes.manage} noMargin weight="bolder">
Remove Safe Remove Safe

9
src/routes/safe/components/Settings/RemoveSafeModal/style.js
View File

@ -5,10 +5,10 @@ import {
export const styles = () => ({ export const styles = () => ({
heading: { heading: {
padding: `${sm} ${lg}`, boxSizing: 'border-box',
justifyContent: 'space-between', justifyContent: 'space-between',
maxHeight: '75px', maxHeight: '75px',
boxSizing: 'border-box', padding: `${sm} ${lg}`,
}, },
container: { container: {
minHeight: '369px', minHeight: '369px',
@ -54,4 +54,9 @@ export const styles = () => ({
cursor: 'pointer', cursor: 'pointer',
}, },
}, },
modal: {
height: 'auto',
maxWidth: 'calc(100% - 30px)',
overflow: 'hidden',
},
}) })

8
src/routes/safe/components/Settings/SafeDetails/style.js
View File

@ -12,16 +12,16 @@ export const styles = () => ({
maxWidth: '460px', maxWidth: '460px',
}, },
saveBtn: { saveBtn: {
marginRight: sm,
fontWeight: boldFont, fontWeight: boldFont,
marginRight: sm,
}, },
controlsRow: { controlsRow: {
padding: lg, borderTop: `2px solid ${border}`,
position: 'absolute',
bottom: 0, bottom: 0,
boxSizing: 'border-box', boxSizing: 'border-box',
padding: lg,
position: 'absolute',
width: '100%', width: '100%',
borderTop: `2px solid ${border}`,
}, },
versionNumber: { versionNumber: {
height: '21px', height: '21px',

10
src/routes/safe/components/Settings/index.jsx
View File

@ -117,7 +117,7 @@ class Settings extends React.Component<Props, State> {
/> />
</Row> </Row>
<Block className={classes.root}> <Block className={classes.root}>
<Col xs={3} layout="column"> <Col className={classes.menuWrapper} layout="column">
<Block className={classes.menu}> <Block className={classes.menu}>
<Row <Row
className={cn(classes.menuOption, menuOptionIndex === 1 && classes.active)} className={cn(classes.menuOption, menuOptionIndex === 1 && classes.active)}
@ -126,7 +126,7 @@ class Settings extends React.Component<Props, State> {
<SafeDetailsIcon /> <SafeDetailsIcon />
Safe details Safe details
</Row> </Row>
<Hairline /> <Hairline className={classes.hairline} />
<Row <Row
className={cn(classes.menuOption, menuOptionIndex === 2 && classes.active)} className={cn(classes.menuOption, menuOptionIndex === 2 && classes.active)}
onClick={this.handleChange(2)} onClick={this.handleChange(2)}
@ -138,7 +138,7 @@ class Settings extends React.Component<Props, State> {
{owners.size} {owners.size}
</Paragraph> </Paragraph>
</Row> </Row>
<Hairline /> <Hairline className={classes.hairline} />
<Row <Row
className={cn(classes.menuOption, menuOptionIndex === 3 && classes.active)} className={cn(classes.menuOption, menuOptionIndex === 3 && classes.active)}
onClick={this.handleChange(3)} onClick={this.handleChange(3)}
@ -146,10 +146,10 @@ class Settings extends React.Component<Props, State> {
<RequiredConfirmationsIcon /> <RequiredConfirmationsIcon />
Policies Policies
</Row> </Row>
<Hairline /> <Hairline className={classes.hairline} />
</Block> </Block>
</Col> </Col>
<Col xs={9} layout="column"> <Col className={classes.contents} layout="column">
<Block className={classes.container}> <Block className={classes.container}>
{menuOptionIndex === 1 && ( {menuOptionIndex === 1 && (
<SafeDetails safeAddress={safeAddress} safeName={safeName} updateSafe={updateSafe} /> <SafeDetails safeAddress={safeAddress} safeName={safeName} updateSafe={updateSafe} />

74
src/routes/safe/components/Settings/style.js
View File

@ -1,37 +1,86 @@
// @flow // @flow
import { import {
xs, sm, md, border, secondary, bolderFont, background, largeFontSize, fontColor, xs, sm, md, border, secondary, bolderFont, background, largeFontSize, fontColor, screenSm,
} from '~/theme/variables' } from '~/theme/variables'
export const styles = () => ({ export const styles = () => ({
root: { root: {
backgroundColor: 'white', backgroundColor: 'white',
boxShadow: '1px 2px 10px 0 rgba(212, 212, 211, 0.59)',
minHeight: '505px',
marginBottom: '54px',
display: 'flex',
borderRadius: sm, borderRadius: sm,
boxShadow: '1px 2px 10px 0 rgba(212, 212, 211, 0.59)',
display: 'flex',
flexDirection: 'column',
marginBottom: '54px',
minHeight: '505px',
[`@media (min-width: ${screenSm}px)`]: {
flexDirection: 'row',
},
}, },
settings: { settings: {
letterSpacing: '-0.5px', letterSpacing: '-0.5px',
}, },
menuWrapper: {
display: 'flex',
flexDirection: 'row',
flexGrow: '0',
maxWidth: '100%',
[`@media (min-width: ${screenSm}px)`]: {
flexDirection: 'row',
maxWidth: 'unset',
},
},
menu: { menu: {
borderRight: `solid 2px ${border}`, borderBottom: `solid 2px ${border}`,
display: 'flex',
flexDirection: 'row',
flexGrow: '1',
height: '100%', height: '100%',
width: '100%',
[`@media (min-width: ${screenSm}px)`]: {
borderBottom: 'none',
borderRight: `solid 2px ${border}`,
flexDirection: 'column',
width: '250px',
},
}, },
menuOption: { menuOption: {
alignItems: 'center', alignItems: 'center',
borderRight: `solid 1px ${border}`,
boxSizing: 'border-box',
cursor: 'pointer', cursor: 'pointer',
fontSize: largeFontSize, flexGrow: '1',
flexShrink: '1',
fontSize: '13px',
justifyContent: 'center',
lineHeight: '1.2', lineHeight: '1.2',
minWidth: '0',
padding: `${md} ${sm}`,
width: '100%',
[`@media (min-width: ${screenSm}px)`]: {
borderRight: 'none',
flexGrow: '0',
fontSize: largeFontSize,
justifyContent: 'flex-start',
padding: `${md} 0 ${md} ${md}`, padding: `${md} 0 ${md} ${md}`,
},
'&:last-of-type': {
borderRight: 'none',
},
'&:first-child': { '&:first-child': {
borderTopLeftRadius: sm, borderTopLeftRadius: sm,
}, },
'& svg': { '& svg': {
display: 'block', display: 'block',
marginRight: xs,
maxWidth: '16px',
[`@media (min-width: ${screenSm}px)`]: {
marginRight: sm, marginRight: sm,
}, },
},
'& .fill': { '& .fill': {
fill: fontColor, fill: fontColor,
}, },
@ -44,7 +93,18 @@ export const styles = () => ({
fill: secondary, fill: secondary,
}, },
}, },
contents: {
width: '100%',
},
hairline: {
display: 'none',
[`@media (min-width: ${screenSm}px)`]: {
display: 'block',
},
},
container: { container: {
flexGrow: '1',
height: '100%', height: '100%',
position: 'relative', position: 'relative',
}, },

3
src/routes/safe/components/Transactions/TxsTable/index.jsx
View File

@ -8,6 +8,7 @@ import ExpandLess from '@material-ui/icons/ExpandLess'
import ExpandMore from '@material-ui/icons/ExpandMore' import ExpandMore from '@material-ui/icons/ExpandMore'
import TableRow from '@material-ui/core/TableRow' import TableRow from '@material-ui/core/TableRow'
import TableCell from '@material-ui/core/TableCell' import TableCell from '@material-ui/core/TableCell'
import TableContainer from '@material-ui/core/TableContainer'
import { withStyles } from '@material-ui/core/styles' import { withStyles } from '@material-ui/core/styles'
import Block from '~/components/layout/Block' import Block from '~/components/layout/Block'
import Row from '~/components/layout/Row' import Row from '~/components/layout/Row'
@ -81,6 +82,7 @@ const TxsTable = ({
return ( return (
<Block className={classes.container}> <Block className={classes.container}>
<TableContainer>
<Table <Table
label="Transactions" label="Transactions"
defaultOrderBy={TX_TABLE_ID} defaultOrderBy={TX_TABLE_ID}
@ -152,6 +154,7 @@ const TxsTable = ({
</React.Fragment> </React.Fragment>
))} ))}
</Table> </Table>
</TableContainer>
</Block> </Block>
) )
} }

68
src/routes/safe/components/style.js
View File

@ -1,12 +1,21 @@
// @flow // @flow
import { import {
sm, xs, smallFontSize, secondaryText, secondary, sm, xs, smallFontSize, secondaryText, secondary, screenSm,
} from '~/theme/variables' } from '~/theme/variables'
export const styles = () => ({ export const styles = () => ({
container: { container: {
display: 'flex',
alignItems: 'center', alignItems: 'center',
display: 'flex',
flexWrap: 'wrap',
},
userInfo: {
flexWrap: 'nowrap',
marginBottom: sm,
[`@media (min-width: ${screenSm}px)`]: {
marginBottom: '0',
},
}, },
name: { name: {
marginLeft: sm, marginLeft: sm,
@ -16,12 +25,22 @@ export const styles = () => ({
}, },
address: { address: {
marginRight: sm, marginRight: sm,
overflow: 'hidden',
maxWidth: '50%',
[`@media (min-width: ${screenSm}px)`]: {
overflow: 'visible',
maxWidth: 'none',
},
}, },
user: { user: {
justifyContent: 'left', justifyContent: 'left',
}, },
receiveModal: { receiveModal: {
height: '544px', height: 'auto',
maxWidth: 'calc(100% - 30px)',
minHeight: '544px',
overflow: 'hidden',
}, },
open: { open: {
paddingLeft: sm, paddingLeft: sm,
@ -31,39 +50,53 @@ export const styles = () => ({
}, },
}, },
readonly: { readonly: {
backgroundColor: secondaryText,
borderRadius: xs,
color: '#ffffff',
fontSize: smallFontSize, fontSize: smallFontSize,
letterSpacing: '0.5px', letterSpacing: '0.5px',
color: '#ffffff',
backgroundColor: secondaryText,
textTransform: 'uppercase',
padding: `0 ${sm}`,
marginLeft: sm,
borderRadius: xs,
lineHeight: '28px', lineHeight: '28px',
marginLeft: sm,
padding: `0 ${sm}`,
textTransform: 'uppercase',
}, },
iconSmall: { iconSmall: {
fontSize: 16, fontSize: 16,
}, },
balance: { balance: {
marginLeft: 'auto', display: 'flex',
overflow: 'hidden', overflow: 'hidden',
width: '100%',
[`@media (min-width: ${screenSm}px)`]: {
marginLeft: 'auto',
width: 'auto',
},
}, },
receive: { receive: {
width: '95px',
minWidth: '95px',
marginLeft: sm,
borderRadius: '4px', borderRadius: '4px',
marginLeft: sm,
width: '50%',
'& > span': { '& > span': {
fontSize: '14px', fontSize: '14px',
}, },
[`@media (min-width: ${screenSm}px)`]: {
minWidth: '95px',
width: 'auto',
},
}, },
send: { send: {
width: '75px',
minWidth: '75px',
borderRadius: '4px', borderRadius: '4px',
width: '50%',
'& > span': { '& > span': {
fontSize: '14px', fontSize: '14px',
}, },
[`@media (min-width: ${screenSm}px)`]: {
minWidth: '75px',
width: 'auto',
},
}, },
leftIcon: { leftIcon: {
marginRight: sm, marginRight: sm,
@ -84,4 +117,9 @@ export const styles = () => ({
fill: secondary, fill: secondary,
}, },
}, },
nameText: {
overflowWrap: 'break-word',
wordBreak: 'break-word',
whiteSpace: 'normal',
},
}) })

737
yarn.lock
View File

File diff suppressed because it is too large Load Diff