Fix safe list colors
This commit is contained in:
parent
b6b8311250
commit
f22c044aa6
|
@ -12,14 +12,14 @@ import Col from '~/components/layout/Col'
|
|||
import Img from '~/components/layout/Img'
|
||||
import Row from '~/components/layout/Row'
|
||||
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 SafeListHeader from './SafeListHeader'
|
||||
|
||||
const logo = require('../assets/gnosis-safe-logo.svg')
|
||||
|
||||
export const headerHeight = '53px'
|
||||
|
||||
type Props = Open & {
|
||||
classes: Object,
|
||||
providerDetails: React.Node,
|
||||
|
|
|
@ -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
|
|
@ -1,7 +1,12 @@
|
|||
// @flow
|
||||
import * as React from 'react'
|
||||
import { List } from 'immutable'
|
||||
import { connect } from 'react-redux'
|
||||
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 SafeList from './SafeList'
|
||||
|
||||
const { useState } = React
|
||||
|
||||
|
@ -17,9 +22,10 @@ export const SidebarContext = React.createContext<TSidebarContext>({
|
|||
|
||||
type SidebarProps = {
|
||||
children: React.Node,
|
||||
safes: List<Safe>,
|
||||
}
|
||||
|
||||
const Sidebar = ({ children }: SidebarProps) => {
|
||||
const Sidebar = ({ children, safes }: SidebarProps) => {
|
||||
const [isOpen, setIsOpen] = useState<boolean>(false)
|
||||
const classes = useSidebarStyles()
|
||||
|
||||
|
@ -33,14 +39,19 @@ const Sidebar = ({ children }: SidebarProps) => {
|
|||
className={classes.sidebar}
|
||||
open={isOpen}
|
||||
onKeyDown={toggleSidebar}
|
||||
onClick={toggleSidebar}
|
||||
classes={{ paper: classes.sidebarPaper }}
|
||||
>
|
||||
<div className={classes.headerPlaceholder} />
|
||||
Wop
|
||||
<SafeList safes={safes} />
|
||||
</Drawer>
|
||||
{children}
|
||||
</SidebarContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
export default Sidebar
|
||||
export default connect<Object, Object, ?Function, ?Object>(
|
||||
// $FlowFixMe
|
||||
(state) => ({ safes: safesListSelector(state) }),
|
||||
null,
|
||||
)(Sidebar)
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
// @flow
|
||||
import { makeStyles } from '@material-ui/core/styles'
|
||||
import { headerHeight } from '~/components/Header/component/Layout'
|
||||
import { headerHeight } from '~/theme/variables'
|
||||
|
||||
const sidebarWidth = '400px'
|
||||
|
||||
|
@ -12,7 +12,7 @@ const useSidebarStyles = makeStyles({
|
|||
width: sidebarWidth,
|
||||
},
|
||||
headerPlaceholder: {
|
||||
height: headerHeight,
|
||||
height: headerHeight, // for some reason it didn't want to work with an imported variable 🤔
|
||||
},
|
||||
})
|
||||
|
||||
|
|
|
@ -17,6 +17,7 @@ const lg = '24px'
|
|||
const xl = '32px'
|
||||
const xxl = '40px'
|
||||
const marginButtonImg = '12px'
|
||||
const headerHeight = '53px'
|
||||
|
||||
module.exports = {
|
||||
primary,
|
||||
|
@ -29,6 +30,7 @@ module.exports = {
|
|||
warning: warningColor,
|
||||
error: errorColor,
|
||||
connected: connectedColor,
|
||||
headerHeight,
|
||||
xs,
|
||||
sm,
|
||||
md,
|
||||
|
|
Loading…
Reference in New Issue