From 8d81104894f98ee045e83db289b9884e06507bd2 Mon Sep 17 00:00:00 2001 From: nicolas Date: Mon, 17 Feb 2020 10:34:28 -0300 Subject: [PATCH] Components V2 (#562) * components v2 * Fix type * Adding TextBox component and some minor changes * replacing harcoded color by the one defined in varibales * TextBox: Replacing div by p --- .../dataDisplay/DividerLine/arrow-down.svg | 3 + .../dataDisplay/DividerLine/index.js | 30 +++++++ .../dataDisplay/TextBox/index.js | 21 +++++ src/components-v2/dataDisplay/index.js | 3 + src/components-v2/feedback/Loader/index.jsx | 20 +++++ src/components-v2/feedback/index.js | 2 + src/components-v2/index.js | 7 ++ .../layouts/ListContentLayout/Layout.jsx | 46 +++++++++++ .../layouts/ListContentLayout/List.jsx | 59 ++++++++++++++ .../layouts/ListContentLayout/index.js | 10 +++ .../layouts/ListContentLayout/style.js | 66 ++++++++++++++++ src/components-v2/layouts/index.js | 2 + .../safeUtils/AddressInfo/index.js | 77 ++++++++++++++++++ src/components-v2/safeUtils/index.js | 2 + src/components-v2/surfaces/Collapse/index.js | 48 +++++++++++ src/components-v2/surfaces/index.js | 2 + src/components-v2/utils/index.js | 2 + .../utils/modals/GenericModal/index.js | 79 +++++++++++++++++++ src/components-v2/utils/modals/index.js | 3 + src/components-v2/utils/modals/utils.js | 53 +++++++++++++ 20 files changed, 535 insertions(+) create mode 100644 src/components-v2/dataDisplay/DividerLine/arrow-down.svg create mode 100644 src/components-v2/dataDisplay/DividerLine/index.js create mode 100644 src/components-v2/dataDisplay/TextBox/index.js create mode 100644 src/components-v2/dataDisplay/index.js create mode 100644 src/components-v2/feedback/Loader/index.jsx create mode 100644 src/components-v2/feedback/index.js create mode 100644 src/components-v2/index.js create mode 100644 src/components-v2/layouts/ListContentLayout/Layout.jsx create mode 100644 src/components-v2/layouts/ListContentLayout/List.jsx create mode 100644 src/components-v2/layouts/ListContentLayout/index.js create mode 100644 src/components-v2/layouts/ListContentLayout/style.js create mode 100644 src/components-v2/layouts/index.js create mode 100644 src/components-v2/safeUtils/AddressInfo/index.js create mode 100644 src/components-v2/safeUtils/index.js create mode 100644 src/components-v2/surfaces/Collapse/index.js create mode 100644 src/components-v2/surfaces/index.js create mode 100644 src/components-v2/utils/index.js create mode 100644 src/components-v2/utils/modals/GenericModal/index.js create mode 100644 src/components-v2/utils/modals/index.js create mode 100644 src/components-v2/utils/modals/utils.js diff --git a/src/components-v2/dataDisplay/DividerLine/arrow-down.svg b/src/components-v2/dataDisplay/DividerLine/arrow-down.svg new file mode 100644 index 00000000..d2a75cf6 --- /dev/null +++ b/src/components-v2/dataDisplay/DividerLine/arrow-down.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components-v2/dataDisplay/DividerLine/index.js b/src/components-v2/dataDisplay/DividerLine/index.js new file mode 100644 index 00000000..0b5cb05e --- /dev/null +++ b/src/components-v2/dataDisplay/DividerLine/index.js @@ -0,0 +1,30 @@ +// @flow +import React from 'react' +import styled from 'styled-components' + +import Hairline from '~/components/layout/Hairline' +import { sm, md } from '~/theme/variables' +import ArrowDown from './arrow-down.svg' + +const Wrapper = styled.div` + display: flex; + align-items: center; + margin: ${md} 0; + + img { + margin: 0 ${sm}; + } +` + +type Props = { + withArrow: boolean, +} + +const DividerLine = ({ withArrow }: Props) => ( + + {withArrow && Arrow Down} + + +) + +export default DividerLine diff --git a/src/components-v2/dataDisplay/TextBox/index.js b/src/components-v2/dataDisplay/TextBox/index.js new file mode 100644 index 00000000..1d7cb8be --- /dev/null +++ b/src/components-v2/dataDisplay/TextBox/index.js @@ -0,0 +1,21 @@ +// @flow +import React from 'react' +import styled from 'styled-components' + +import { border } from '~/theme/variables' + +type Props = { + children: React.Node, +} + +const Box = styled.p` + padding: 10px; + word-wrap: break-word; + border: solid 2px ${border}; +` + +const TextBox = ({ children }: Props) => { + return {children} +} + +export default TextBox diff --git a/src/components-v2/dataDisplay/index.js b/src/components-v2/dataDisplay/index.js new file mode 100644 index 00000000..e3c8326a --- /dev/null +++ b/src/components-v2/dataDisplay/index.js @@ -0,0 +1,3 @@ +// @flow +export { default as DividerLine } from './DividerLine' +export { default as TextBox } from './TextBox' diff --git a/src/components-v2/feedback/Loader/index.jsx b/src/components-v2/feedback/Loader/index.jsx new file mode 100644 index 00000000..3d0a7ad3 --- /dev/null +++ b/src/components-v2/feedback/Loader/index.jsx @@ -0,0 +1,20 @@ +// @flow +import React from 'react' +import CircularProgress from '@material-ui/core/CircularProgress' +import styled from 'styled-components' + +const Wrapper = styled.div` + display: flex; + height: 100%; + width: 100%; + justify-content: center; + align-items: center; +` + +const Loader = () => ( + + + +) + +export default Loader diff --git a/src/components-v2/feedback/index.js b/src/components-v2/feedback/index.js new file mode 100644 index 00000000..bc932653 --- /dev/null +++ b/src/components-v2/feedback/index.js @@ -0,0 +1,2 @@ +// @flow +export { default as Loader } from './Loader' diff --git a/src/components-v2/index.js b/src/components-v2/index.js new file mode 100644 index 00000000..fbe142d0 --- /dev/null +++ b/src/components-v2/index.js @@ -0,0 +1,7 @@ +// @flow +export * from './dataDisplay' +export * from './feedback' +export * from './layouts' +export * from './safeUtils' +export * from './surfaces' +export * from './utils' diff --git a/src/components-v2/layouts/ListContentLayout/Layout.jsx b/src/components-v2/layouts/ListContentLayout/Layout.jsx new file mode 100644 index 00000000..3758bda0 --- /dev/null +++ b/src/components-v2/layouts/ListContentLayout/Layout.jsx @@ -0,0 +1,46 @@ +// @flow +import styled from 'styled-components' + +export const Wrapper = styled.div` + display: grid; + grid-template-columns: 245px auto; + grid-template-rows: 62px auto 25px; + min-height: 500px; + + .background { + box-shadow: 1px 2px 10px 0 rgba(212, 212, 211, 0.59); + background-color: white; + } +` +export const Nav = styled.div` + grid-column: 1/3; + grid-row: 1; + margin: 8px 0; + padding: 16px 0; + box-sizing: border-box; + display: flex; + justify-content: flex-end; +` + +export const Menu = styled.div.attrs(() => ({ className: 'background' }))` + grid-column: 1; + grid-row: 2/4; + border-right: solid 2px #e8e7e6; + border-top-left-radius: 8px; + border-bottom-left-radius: 8px; +` + +export const Content = styled.div.attrs(() => ({ className: 'background' }))` + grid-column: 2; + grid-row: 2; + border-top-right-radius: 8px; +` + +export const Footer = styled.div.attrs(() => ({ className: 'background' }))` + grid-column: 2; + grid-row: 3; + border-bottom-right-radius: 8px; + display: flex; + justify-content: center; + align-items: center; +` diff --git a/src/components-v2/layouts/ListContentLayout/List.jsx b/src/components-v2/layouts/ListContentLayout/List.jsx new file mode 100644 index 00000000..9c49bcdb --- /dev/null +++ b/src/components-v2/layouts/ListContentLayout/List.jsx @@ -0,0 +1,59 @@ +// @flow + +import React from 'react' +import styled from 'styled-components' +import cn from 'classnames' +import { withStyles } from '@material-ui/core/styles' + +// TODO: move these styles to a generic place +import styles from './style' + +const Wrapper = styled.div`` + +const Item = styled.div` + border-bottom: solid 2px rgb(232, 231, 230); + + .container { + display: flex; + align-items: flex-end; + } +` + +const IconImg = styled.img` + width: 20px; + margin-right: 10px; +` +type Props = { + items: Array<{ + id: string, + name: string, + iconUrl?: string, + }>, + activeItem: string, + onItemClick: () => void, + classes: Object, +} + +const List = ({ items, activeItem, onItemClick, classes }: Props) => { + return ( + + {items.map(i => ( + onItemClick(i.id)} + > +
+ {i.iconUrl && } + {i.name} +
+ + ))} + + ) +} + +export default withStyles(styles)(List) diff --git a/src/components-v2/layouts/ListContentLayout/index.js b/src/components-v2/layouts/ListContentLayout/index.js new file mode 100644 index 00000000..c0a07760 --- /dev/null +++ b/src/components-v2/layouts/ListContentLayout/index.js @@ -0,0 +1,10 @@ +// @flow +import * as LayoutComponents from './Layout' +import List from './List' + +const ListContentLayout = { + ...LayoutComponents, + List, +} + +export default ListContentLayout diff --git a/src/components-v2/layouts/ListContentLayout/style.js b/src/components-v2/layouts/ListContentLayout/style.js new file mode 100644 index 00000000..9a5663d8 --- /dev/null +++ b/src/components-v2/layouts/ListContentLayout/style.js @@ -0,0 +1,66 @@ +// @flow +import { + xs, + sm, + md, + border, + secondary, + bolderFont, + background, + largeFontSize, + fontColor, + screenSm, +} from '~/theme/variables' + +const styles = () => ({ + menuOption: { + alignItems: 'center', + borderRight: `solid 1px ${border}`, + boxSizing: 'border-box', + cursor: 'pointer', + flexGrow: '1', + flexShrink: '1', + fontSize: '13px', + justifyContent: 'center', + 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}`, + }, + '&:last-of-type': { + borderRight: 'none', + }, + '&:first-child': { + borderTopLeftRadius: sm, + }, + '& svg': { + display: 'block', + marginRight: xs, + maxWidth: '16px', + + [`@media (min-width: ${screenSm}px)`]: { + marginRight: sm, + }, + }, + '& .fill': { + fill: fontColor, + }, + }, + active: { + backgroundColor: background, + color: secondary, + fontWeight: bolderFont, + '& .fill': { + fill: secondary, + }, + }, +}) + +export default styles diff --git a/src/components-v2/layouts/index.js b/src/components-v2/layouts/index.js new file mode 100644 index 00000000..9eccd8fc --- /dev/null +++ b/src/components-v2/layouts/index.js @@ -0,0 +1,2 @@ +// @flow +export { default as ListContentLayout } from './ListContentLayout' diff --git a/src/components-v2/safeUtils/AddressInfo/index.js b/src/components-v2/safeUtils/AddressInfo/index.js new file mode 100644 index 00000000..22876719 --- /dev/null +++ b/src/components-v2/safeUtils/AddressInfo/index.js @@ -0,0 +1,77 @@ +// @flow +import React from 'react' +import styled from 'styled-components' + +import Paragraph from '~/components/layout/Paragraph' +import EtherscanBtn from '~/components/EtherscanBtn' +import CopyBtn from '~/components/CopyBtn' +import Identicon from '~/components/Identicon' +import Bold from '~/components/layout/Bold' +import { xs, border } from '~/theme/variables' +import Block from '~/components/layout/Block' + +const Wrapper = styled.div` + display: flex; + align-items: center; + + .icon-section { + margin-right: 10px; + } + + .data-section { + display: flex; + flex-direction: column; + + .address { + display: flex; + } + } +` +const StyledBlock = styled(Block)` + font-size: 12px; + line-height: 1.08; + letter-spacing: -0.5; + background-color: ${border}; + width: fit-content; + padding: 5px 10px; + margin-top: ${xs}; + border-radius: 3px; +` +type Props = { + safeName: string, + safeAddress: string, + ethBalance: string, +} + +const AddressInfo = ({ safeName, safeAddress, ethBalance }: Props) => { + return ( + +
+ +
+
+ {safeName && ( + + {safeName} + + )} +
+ + {safeAddress} + + + +
+ {ethBalance && ( + + + Balance: {`${ethBalance} ETH`} + + + )} +
+ + ) +} + +export default AddressInfo diff --git a/src/components-v2/safeUtils/index.js b/src/components-v2/safeUtils/index.js new file mode 100644 index 00000000..2bc93a5b --- /dev/null +++ b/src/components-v2/safeUtils/index.js @@ -0,0 +1,2 @@ +// @flow +export { default as AddressInfo } from './AddressInfo' diff --git a/src/components-v2/surfaces/Collapse/index.js b/src/components-v2/surfaces/Collapse/index.js new file mode 100644 index 00000000..34dbcffb --- /dev/null +++ b/src/components-v2/surfaces/Collapse/index.js @@ -0,0 +1,48 @@ +// @flow +import React from 'react' +import styled from 'styled-components' +import CollapseMUI from '@material-ui/core/Collapse' +import IconButton from '@material-ui/core/IconButton' +import ExpandLess from '@material-ui/icons/ExpandLess' +import ExpandMore from '@material-ui/icons/ExpandMore' + +const Wrapper = styled.div`` + +const Header = styled.div` + display: flex; + align-items: center; +` + +const Title = styled.div`` + +type Props = { + title: string, + children: React.Node, + description: React.Node, +} + +const Collapse = ({ title, description, children }: Props) => { + const [open, setOpen] = React.useState(false) + + const handleClick = () => { + setOpen(!open) + } + + return ( + + {title} +
+ + {open ? : } + + {description} +
+ + + {children} + + + ) +} + +export default Collapse diff --git a/src/components-v2/surfaces/index.js b/src/components-v2/surfaces/index.js new file mode 100644 index 00000000..43008db3 --- /dev/null +++ b/src/components-v2/surfaces/index.js @@ -0,0 +1,2 @@ +// @flow +export { default as Collapse } from './Collapse' diff --git a/src/components-v2/utils/index.js b/src/components-v2/utils/index.js new file mode 100644 index 00000000..7ae2231c --- /dev/null +++ b/src/components-v2/utils/index.js @@ -0,0 +1,2 @@ +// @flow +export * from './modals' diff --git a/src/components-v2/utils/modals/GenericModal/index.js b/src/components-v2/utils/modals/GenericModal/index.js new file mode 100644 index 00000000..213e6b6f --- /dev/null +++ b/src/components-v2/utils/modals/GenericModal/index.js @@ -0,0 +1,79 @@ +// @flow +import React from 'react' +import styled from 'styled-components' +import Close from '@material-ui/icons/Close' +import { makeStyles, createStyles } from '@material-ui/core/styles' +import IconButton from '@material-ui/core/IconButton' + +import Modal from '~/components/Modal' +import Hairline from '~/components/layout/Hairline' + +const TitleSection = styled.div` + display: flex; + justify-content: space-between; + margin: 10px 20px; +` +const BodySection = styled.div` + padding: 10px 20px; + max-height: 460px; + overflow-y: auto; +` +const FooterSection = styled.div` + margin: 10px 20px; +` + +const StyledClose = styled(Close)` + && { + height: 35px; + width: 35px; + } +` + +const useStyles = makeStyles(() => + createStyles({ + paper: { + height: 'auto', + position: 'static', + }, + }) +) + +type Props = { + title: string, + body: React.Node, + footer: React.Node, + onClose: () => void, +} + +const GenericModal = ({ title, body, footer, onClose }: Props) => { + const classes = useStyles() + + return ( + + + {title} + + + + + + + {body} + + {footer && ( + <> + + {footer} + + )} + + ) +} + +export default GenericModal diff --git a/src/components-v2/utils/modals/index.js b/src/components-v2/utils/modals/index.js new file mode 100644 index 00000000..74eb75da --- /dev/null +++ b/src/components-v2/utils/modals/index.js @@ -0,0 +1,3 @@ +// @flow +export { default as GenericModal } from './GenericModal' +export * from './utils' diff --git a/src/components-v2/utils/modals/utils.js b/src/components-v2/utils/modals/utils.js new file mode 100644 index 00000000..5c61376e --- /dev/null +++ b/src/components-v2/utils/modals/utils.js @@ -0,0 +1,53 @@ +// @flow +import React from 'react' +import styled from 'styled-components' + +import Paragraph from '~/components/layout/Paragraph' +import Button from '~/components/layout/Button' +import { lg } from '~/theme/variables' + +const StyledParagraph = styled(Paragraph)` + && { + font-size: ${lg}; + } +` +export const ModalTitle = ({ title }: { title: string }) => { + return ( + + {title} + + ) +} + +const FooterWrapper = styled.div` + display: flex; + justify-content: space-around; +` + +export const ModalFooterConfirmation = ({ + okText, + cancelText, + handleOk, + handleCancel, +}: { + okText: string, + cancelText: string, + handleOk: () => void, + handleCancel: () => void, +}) => { + return ( + + + + + ) +}