Fix safe list colors

This commit is contained in:
Mikhail Mikheev 2019-09-17 17:49:29 +04:00
parent b6b8311250
commit f22c044aa6
5 changed files with 84 additions and 8 deletions

View File

@ -12,14 +12,14 @@ import Col from '~/components/layout/Col'
import Img from '~/components/layout/Img' 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 { border, sm, md } from '~/theme/variables' import {
border, sm, md, headerHeight,
} from '~/theme/variables'
import Provider from './Provider' import Provider from './Provider'
import SafeListHeader from './SafeListHeader' import SafeListHeader from './SafeListHeader'
const logo = require('../assets/gnosis-safe-logo.svg') const logo = require('../assets/gnosis-safe-logo.svg')
export const headerHeight = '53px'
type Props = Open & { type Props = Open & {
classes: Object, classes: Object,
providerDetails: React.Node, providerDetails: React.Node,

View File

@ -0,0 +1,63 @@
// @flow
import * as React from 'react'
import { makeStyles } from '@material-ui/core/styles'
import { List } from 'immutable'
import MuiList from '@material-ui/core/List'
import ListItem from '@material-ui/core/ListItem'
import ListItemIcon from '@material-ui/core/ListItemIcon'
import ListItemText from '@material-ui/core/ListItemText'
import Link from '~/components/layout/Link'
import Hairline from '~/components/layout/Hairline'
import Identicon from '~/components/Identicon'
import { sm, secondary, primary } from '~/theme/variables'
import { shortVersionOf } from '~/logic/wallets/ethAddresses'
import { type Safe } from '~/routes/safe/store/models/safe'
import { SAFELIST_ADDRESS } from '~/routes/routes'
type SafeListProps = {
safes: List<Safe>,
}
const useStyles = makeStyles({
icon: {
marginRight: sm,
},
listItemRoot: {
paddingTop: 0,
paddingBottom: 0,
},
safeName: {
color: secondary,
},
safeAddress: {
color: primary,
},
})
const SafeList = ({ safes }: SafeListProps) => {
const classes = useStyles()
return (
<MuiList>
{safes.map((safe) => (
<React.Fragment key={safe.address}>
<Link to={`${SAFELIST_ADDRESS}/${safe.address}`}>
<ListItem classes={{ root: classes.listItemRoot }}>
<ListItemIcon>
<Identicon address={safe.address} diameter={32} className={classes.icon} />
</ListItemIcon>
<ListItemText
primary={safe.name}
secondary={shortVersionOf(safe.address, 4)}
classes={{ primary: classes.safeName, secondary: classes.safeAddress }}
/>
</ListItem>
</Link>
<Hairline />
</React.Fragment>
))}
</MuiList>
)
}
export default SafeList

View File

@ -1,7 +1,12 @@
// @flow // @flow
import * as React from 'react' import * as React from 'react'
import { List } from 'immutable'
import { connect } from 'react-redux'
import Drawer from '@material-ui/core/Drawer' import Drawer from '@material-ui/core/Drawer'
import { type Safe } from '~/routes/safe/store/models/safe'
import { safesListSelector } from '~/routes/safeList/store/selectors'
import useSidebarStyles from './style' import useSidebarStyles from './style'
import SafeList from './SafeList'
const { useState } = React const { useState } = React
@ -17,9 +22,10 @@ export const SidebarContext = React.createContext<TSidebarContext>({
type SidebarProps = { type SidebarProps = {
children: React.Node, children: React.Node,
safes: List<Safe>,
} }
const Sidebar = ({ children }: SidebarProps) => { const Sidebar = ({ children, safes }: SidebarProps) => {
const [isOpen, setIsOpen] = useState<boolean>(false) const [isOpen, setIsOpen] = useState<boolean>(false)
const classes = useSidebarStyles() const classes = useSidebarStyles()
@ -33,14 +39,19 @@ const Sidebar = ({ children }: SidebarProps) => {
className={classes.sidebar} className={classes.sidebar}
open={isOpen} open={isOpen}
onKeyDown={toggleSidebar} onKeyDown={toggleSidebar}
onClick={toggleSidebar}
classes={{ paper: classes.sidebarPaper }} classes={{ paper: classes.sidebarPaper }}
> >
<div className={classes.headerPlaceholder} /> <div className={classes.headerPlaceholder} />
Wop <SafeList safes={safes} />
</Drawer> </Drawer>
{children} {children}
</SidebarContext.Provider> </SidebarContext.Provider>
) )
} }
export default Sidebar export default connect<Object, Object, ?Function, ?Object>(
// $FlowFixMe
(state) => ({ safes: safesListSelector(state) }),
null,
)(Sidebar)

View File

@ -1,6 +1,6 @@
// @flow // @flow
import { makeStyles } from '@material-ui/core/styles' import { makeStyles } from '@material-ui/core/styles'
import { headerHeight } from '~/components/Header/component/Layout' import { headerHeight } from '~/theme/variables'
const sidebarWidth = '400px' const sidebarWidth = '400px'
@ -12,7 +12,7 @@ const useSidebarStyles = makeStyles({
width: sidebarWidth, width: sidebarWidth,
}, },
headerPlaceholder: { headerPlaceholder: {
height: headerHeight, height: headerHeight, // for some reason it didn't want to work with an imported variable 🤔
}, },
}) })

View File

@ -17,6 +17,7 @@ const lg = '24px'
const xl = '32px' const xl = '32px'
const xxl = '40px' const xxl = '40px'
const marginButtonImg = '12px' const marginButtonImg = '12px'
const headerHeight = '53px'
module.exports = { module.exports = {
primary, primary,
@ -29,6 +30,7 @@ module.exports = {
warning: warningColor, warning: warningColor,
error: errorColor, error: errorColor,
connected: connectedColor, connected: connectedColor,
headerHeight,
xs, xs,
sm, sm,
md, md,