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

Replace DividerLine and Hairline by component from SR (#2175)

Browse Source 
* Add Divider and Icon component (SRC) to Divider (SR)

* Use divider in all places where DividerLine and Hairline were used
This commit is contained in:
Agustín Longoni 2021-04-28 11:52:41 -03:00 committed by GitHub
parent ed2cd3f746
commit 44074475d7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 81 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/Divider/divider.stories.tsx Normal file
View File

@ -0,0 +1,27 @@
import React from 'react'
import Divider from './index'
export default {
title: 'Data Display/Divider',
component: Divider,
parameters: {
componentSubtitle: 'Used to separate content.',
},
}
export const Horizontal = (): React.ReactElement => (
<>
<div>Some content</div>
<Divider />
<div>Some content2</div>
</>
)
export const Arrow = (): React.ReactElement => (
<>
<div>Some content</div>
<Divider withArrow />
<div>Some content2</div>
</>
)

29
src/components/Divider/index.tsx Normal file
View File

@ -0,0 +1,29 @@
import React, { ReactElement } from 'react'
import styled from 'styled-components'
import { Icon, Divider as DividerSRC } from '@gnosis.pm/safe-react-components'
const Wrapper = styled.div`
display: flex;
align-items: center;
margin: 8px 0;
svg {
margin: 0 12px 0 4px;
}
`
const StyledDivider = styled(DividerSRC)`
width: 100%;
`
type Props = {
withArrow?: boolean
}
const Divider = ({ withArrow }: Props): ReactElement => (
<Wrapper>
{withArrow && <Icon type="arrowDown" size="md" />}
<StyledDivider />
</Wrapper>
)
export default Divider

3
src/components/DividerLine/arrow-down.svg
View File

@ -1,3 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="21" viewBox="0 0 13 21">
<path fill="#B2B5B2" fill-rule="evenodd" d="M8.7 11.266V0H4.27v11.266H0l6.484 9.172 6.493-9.172z"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 195 B

30
src/components/DividerLine/index.tsx
View File

@ -1,30 +0,0 @@
import React from 'react'
import styled from 'styled-components'
import ArrowDown from './arrow-down.svg'
import Hairline from 'src/components/layout/Hairline'
import { md, sm } from 'src/theme/variables'
const Wrapper = styled.div`
display: flex;
align-items: center;
margin: ${md} 0;
img {
margin: 0 ${sm};
}
`
type Props = {
withArrow: boolean
}
const DividerLine = ({ withArrow }: Props) => (
<Wrapper>
{withArrow && <img alt="Arrow Down" src={ArrowDown} />}
<Hairline />
</Wrapper>
)
export default DividerLine

8
src/routes/safe/components/Apps/components/ConfirmTxModal/ReviewConfirm.tsx
View File

@ -3,10 +3,8 @@ import { Text, EthHashInfo, ModalFooterConfirmation } from '@gnosis.pm/safe-reac
import styled from 'styled-components'
import { useDispatch } from 'react-redux'
import DividerLine from 'src/components/DividerLine'
import TextBox from 'src/components/TextBox'
import ModalTitle from 'src/components/ModalTitle'
import Hairline from 'src/components/layout/Hairline'
import Heading from 'src/components/layout/Heading'
import { createTransaction } from 'src/logic/safe/store/actions/createTransaction'
import { MULTI_SEND_ADDRESS } from 'src/logic/contracts/safeContracts'
@ -26,9 +24,11 @@ import { DecodedData } from 'src/types/transactions/decode.d'
import { fromTokenUnit } from 'src/logic/tokens/utils/humanReadableValue'
import { getExplorerInfo } from 'src/config'
import Block from 'src/components/layout/Block'
import Divider from 'src/components/Divider'
import GasEstimationInfo from '../GasEstimationInfo'
import { ConfirmTxModalProps, DecodedTxDetail } from '.'
import Hairline from 'src/components/layout/Hairline'
const { nativeCoin } = getNetworkInfo()
@ -225,7 +225,7 @@ export const ReviewConfirm = ({
<Text size="md" strong>{`${ethBalance} ${nativeCoin.symbol}`}</Text>
</StyledBlock>
<DividerLine withArrow />
<Divider withArrow />
{/* Txs decoded */}
<BasicTxInfo
@ -237,7 +237,7 @@ export const ReviewConfirm = ({
<DecodeTxsWrapper>
<DecodeTxs txs={txs} decodedData={decodedData} onTxItemClick={showDecodedTxData} />
</DecodeTxsWrapper>
{!isMultiSend && <DividerLine withArrow={false} />}
{!isMultiSend && <Divider />}
{/* Warning gas estimation */}
{params?.safeTxGas && (
<div className="section">

20
src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/FormDivisor/index.tsx
View File

@ -1,20 +0,0 @@
import React from 'react'
import Col from 'src/components/layout/Col'
import Hairline from 'src/components/layout/Hairline'
import Row from 'src/components/layout/Row'
import ArrowDown from 'src/routes/safe/components/Balances/SendModal/screens/assets/arrow-down.svg'
import { sm } from 'src/theme/variables'
const FormDivisor = () => (
<Row margin="md">
<Col xs={1}>
<img alt="Arrow Down" src={ArrowDown} style={{ marginLeft: sm }} />
</Col>
<Col center="xs" layout="column" xs={11}>
<Hairline />
</Col>
</Row>
)
export default FormDivisor

12
src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/index.tsx
View File

@ -7,6 +7,7 @@ import { EthHashInfo } from '@gnosis.pm/safe-react-components'
import { getExplorerInfo, getNetworkInfo } from 'src/config'
import { toTokenUnit } from 'src/logic/tokens/utils/humanReadableValue'
import Divider from 'src/components/Divider'
import Block from 'src/components/layout/Block'
import Button from 'src/components/layout/Button'
import Col from 'src/components/layout/Col'
@ -20,13 +21,11 @@ import { TX_NOTIFICATION_TYPES } from 'src/logic/safe/transactions'
import { getEthAsToken } from 'src/logic/tokens/utils/tokenHelpers'
import SafeInfo from 'src/routes/safe/components/Balances/SendModal/SafeInfo'
import { setImageToPlaceholder } from 'src/routes/safe/components/Balances/utils'
import { sm } from 'src/theme/variables'
import { TxParametersDetail } from 'src/routes/safe/components/Transactions/helpers/TxParametersDetail'
import { useEstimateTransactionGas, EstimationStatus } from 'src/logic/hooks/useEstimateTransactionGas'
import { TransactionFees } from 'src/components/TransactionsFees'
import { EditableTxParameters } from 'src/routes/safe/components/Transactions/helpers/EditableTxParameters'
import ArrowDown from '../../assets/arrow-down.svg'
import { styles } from './style'
import { TxParameters } from 'src/routes/safe/container/hooks/useTransactionParameters'
@ -113,14 +112,7 @@ const ReviewCustomTx = ({ onClose, onPrev, tx }: Props): React.ReactElement => {
<Hairline />
<Block className={classes.container}>
<SafeInfo />
<Row margin="md">
<Col xs={1}>
<img alt="Arrow Down" src={ArrowDown} style={{ marginLeft: sm }} />
</Col>
<Col center="xs" layout="column" xs={11}>
<Hairline />
</Col>
</Row>
<Divider withArrow />
<Row margin="xs">
<Paragraph color="disabled" noMargin size="md" style={{ letterSpacing: '-0.5px' }}>
Recipient

13
src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/SendCustomTx/index.tsx
View File

@ -6,6 +6,7 @@ import { makeStyles } from '@material-ui/core/styles'
import Switch from '@material-ui/core/Switch'
import Close from '@material-ui/icons/Close'
import Divider from 'src/components/Divider'
import QRIcon from 'src/assets/icons/qrcode.svg'
import Field from 'src/components/forms/Field'
import GnoForm from 'src/components/forms/GnoForm'
@ -24,11 +25,8 @@ import { ScanQRModal } from 'src/components/ScanQRModal'
import { safeSelector } from 'src/logic/safe/store/selectors'
import SafeInfo from 'src/routes/safe/components/Balances/SendModal/SafeInfo'
import { ContractsAddressBookInput } from 'src/routes/safe/components/Balances/SendModal/screens/AddressBookInput'
import { sm } from 'src/theme/variables'
import { sameString } from 'src/utils/strings'
import ArrowDown from '../../assets/arrow-down.svg'
import { styles } from './style'
import { getExplorerInfo, getNetworkInfo } from 'src/config'
import { EthHashInfo } from '@gnosis.pm/safe-react-components'
@ -135,14 +133,7 @@ const SendCustomTx: React.FC<Props> = ({ initialValues, onClose, onNext, contrac
<>
<Block className={classes.formContainer}>
<SafeInfo />
<Row margin="md">
<Col xs={1}>
<img alt="Arrow Down" src={ArrowDown} style={{ marginLeft: sm }} />
</Col>
<Col center="xs" layout="column" xs={11}>
<Hairline />
</Col>
</Row>
<Divider withArrow />
{selectedEntry && selectedEntry.address ? (
<div
onKeyDown={(e) => {

4
src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/index.tsx
View File

@ -3,6 +3,7 @@ import React from 'react'
import { useSelector } from 'react-redux'
import Switch from '@material-ui/core/Switch'
import { styles } from './style'
import Divider from 'src/components/Divider'
import GnoForm from 'src/components/forms/GnoForm'
import Block from 'src/components/layout/Block'
import Hairline from 'src/components/layout/Hairline'
@ -12,7 +13,6 @@ import Paragraph from 'src/components/layout/Paragraph'
import Buttons from './Buttons'
import ContractABI from './ContractABI'
import { EthAddressInput } from './EthAddressInput'
import FormDivisor from './FormDivisor'
import FormErrorMessage from './FormErrorMessage'
import { Header } from './Header'
import { MethodsDropdown } from './MethodsDropdown'
@ -108,7 +108,7 @@ const ContractInteraction: React.FC<ContractInteractionProps> = ({
<>
<Block className={classes.formContainer}>
<SafeInfo />
<FormDivisor />
<Divider withArrow />
<EthAddressInput
name="contractAddress"
onScannedValue={mutators.setContractAddress}

13
src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx
View File

@ -4,6 +4,7 @@ import IconButton from '@material-ui/core/IconButton'
import { makeStyles } from '@material-ui/core/styles'
import Close from '@material-ui/icons/Close'
import { getExplorerInfo } from 'src/config'
import Divider from 'src/components/Divider'
import Block from 'src/components/layout/Block'
import Button from 'src/components/layout/Button'
import Col from 'src/components/layout/Col'
@ -17,12 +18,9 @@ import { safeParamAddressFromStateSelector } from 'src/logic/safe/store/selector
import { TX_NOTIFICATION_TYPES } from 'src/logic/safe/transactions'
import SafeInfo from 'src/routes/safe/components/Balances/SendModal/SafeInfo'
import { setImageToPlaceholder } from 'src/routes/safe/components/Balances/utils'
import { sm } from 'src/theme/variables'
import { textShortener } from 'src/utils/strings'
import { generateERC721TransferTxData } from 'src/logic/collectibles/utils'
import ArrowDown from '../assets/arrow-down.svg'
import { styles } from './style'
import { EthHashInfo } from '@gnosis.pm/safe-react-components'
import { EstimationStatus, useEstimateTransactionGas } from 'src/logic/hooks/useEstimateTransactionGas'
@ -165,14 +163,7 @@ const ReviewCollectible = ({ onClose, onPrev, tx }: Props): React.ReactElement =
<Hairline />
<Block className={classes.container}>
<SafeInfo />
<Row margin="md">
<Col xs={1}>
<img alt="Arrow Down" src={ArrowDown} style={{ marginLeft: sm }} />
</Col>
<Col center="xs" layout="column" xs={11}>
<Hairline />
</Col>
</Row>
<Divider withArrow />
<Row margin="xs">
<Paragraph color="disabled" noMargin size="md" style={{ letterSpacing: '-0.5px' }}>
Recipient

12
src/routes/safe/components/Balances/SendModal/screens/ReviewSendFundsTx/index.tsx
View File

@ -7,6 +7,7 @@ import { Button, EthHashInfo } from '@gnosis.pm/safe-react-components'
import { toTokenUnit } from 'src/logic/tokens/utils/humanReadableValue'
import { getExplorerInfo, getNetworkInfo } from 'src/config'
import Divider from 'src/components/Divider'
import Block from 'src/components/layout/Block'
import Col from 'src/components/layout/Col'
import Hairline from 'src/components/layout/Hairline'
@ -24,14 +25,12 @@ import SafeInfo from 'src/routes/safe/components/Balances/SendModal/SafeInfo'
import { setImageToPlaceholder } from 'src/routes/safe/components/Balances/utils'
import { extendedSafeTokensSelector } from 'src/routes/safe/container/selector'
import { SpendingLimit } from 'src/logic/safe/store/models/safe'
import { sm } from 'src/theme/variables'
import { sameString } from 'src/utils/strings'
import { TokenProps } from 'src/logic/tokens/store/model/token'
import { RecordOf } from 'immutable'
import { EstimationStatus, useEstimateTransactionGas } from 'src/logic/hooks/useEstimateTransactionGas'
import { TransactionFees } from 'src/components/TransactionsFees'
import ArrowDown from '../assets/arrow-down.svg'
import { styles } from './style'
import { EditableTxParameters } from 'src/routes/safe/components/Transactions/helpers/EditableTxParameters'
import { TxParametersDetail } from 'src/routes/safe/components/Transactions/helpers/TxParametersDetail'
@ -207,14 +206,7 @@ const ReviewSendFundsTx = ({ onClose, onPrev, tx }: ReviewTxProps): React.ReactE
<Block className={classes.container}>
{/* SafeInfo */}
<SafeInfo />
<Row margin="md">
<Col xs={1}>
<img alt="Arrow Down" src={ArrowDown} style={{ marginLeft: sm }} />
</Col>
<Col center="xs" layout="column" xs={11}>
<Hairline />
</Col>
</Row>
<Divider withArrow />
{/* Recipient */}
<Row margin="xs">

13
src/routes/safe/components/Balances/SendModal/screens/SendCollectible/index.tsx
View File

@ -5,6 +5,7 @@ import Close from '@material-ui/icons/Close'
import React, { useState } from 'react'
import { useSelector } from 'react-redux'
import Divider from 'src/components/Divider'
import GnoForm from 'src/components/forms/GnoForm'
import Block from 'src/components/layout/Block'
import Button from 'src/components/layout/Button'
@ -23,11 +24,8 @@ import { AddressBookInput } from 'src/routes/safe/components/Balances/SendModal/
import { NFTToken } from 'src/logic/collectibles/sources/collectibles.d'
import { getExplorerInfo } from 'src/config'
import { sameAddress } from 'src/logic/wallets/ethAddresses'
import { sm } from 'src/theme/variables'
import { sameString } from 'src/utils/strings'
import ArrowDown from 'src/routes/safe/components/Balances/SendModal/screens/assets/arrow-down.svg'
import { CollectibleSelectField } from './CollectibleSelectField'
import { styles } from './style'
import TokenSelectField from './TokenSelectField'
@ -159,14 +157,7 @@ const SendCollectible = ({
<WhenFieldChanges field="assetAddress" set="nftTokenId" to={''} />
<Block className={classes.formContainer}>
<SafeInfo />
<Row margin="md">
<Col xs={1}>
<img alt="Arrow Down" src={ArrowDown} style={{ marginLeft: sm }} />
</Col>
<Col center="xs" layout="column" xs={11}>
<Hairline />
</Col>
</Row>
<Divider withArrow />
{selectedEntry && selectedEntry.address ? (
<div
onKeyDown={(e) => {

13
src/routes/safe/components/Balances/SendModal/screens/SendFunds/index.tsx
View File

@ -32,15 +32,13 @@ import TokenSelectField from 'src/routes/safe/components/Balances/SendModal/scre
import { fromTokenUnit } from 'src/logic/tokens/utils/humanReadableValue'
import { extendedSafeTokensSelector } from 'src/routes/safe/container/selector'
import { safeSpendingLimitsSelector } from 'src/logic/safe/store/selectors'
import { sm } from 'src/theme/variables'
import { sameString } from 'src/utils/strings'
import ArrowDown from '../assets/arrow-down.svg'
import { styles } from './style'
import { EthHashInfo } from '@gnosis.pm/safe-react-components'
import { spendingLimitAllowedBalance, getSpendingLimitByTokenAddress } from 'src/logic/safe/utils/spendingLimits'
import { getBalanceAndDecimalsFromToken } from 'src/logic/tokens/utils/tokenHelpers'
import Divider from 'src/components/Divider'
const formMutators = {
setMax: (args, state, utils) => {
@ -234,14 +232,7 @@ const SendFunds = ({
<>
<Block className={classes.formContainer}>
<SafeInfo />
<Row margin="md">
<Col xs={1}>
<img alt="Arrow Down" src={ArrowDown} style={{ marginLeft: sm }} />
</Col>
<Col center="xs" layout="column" xs={11}>
<Hairline />
</Col>
</Row>
<Divider withArrow />
{selectedEntry && selectedEntry.address ? (
<div
onKeyDown={(e) => {

11
src/routes/safe/components/Transactions/helpers/EditTxParametersForm/index.tsx
View File

@ -18,7 +18,7 @@ import { minValue } from 'src/components/forms/validator'
import { ParametersStatus, areSafeParamsEnabled, areEthereumParamsVisible, ethereumTxParametersTitle } from '../utils'
const StyledDivider = styled(Divider)`
margin: 16px 0;
margin: 0px;
`
const SafeOptions = styled.div`
@ -46,9 +46,6 @@ const StyledLink = styled(Link)`
margin-right: 5px;
}
`
const StyledIconButton = styled(IconButton)`
margin: 10px 0 0 0;
`
const StyledText = styled(Text)`
margin: 0 0 4px 0;
`
@ -111,9 +108,9 @@ export const EditTxParametersForm = ({
<Title size="sm" withoutMargin>
Advanced options
</Title>
<StyledIconButton disableRipple onClick={onCloseFormHandler}>
<IconButton disableRipple onClick={onCloseFormHandler}>
<Close className={classes.closeIcon} />
</StyledIconButton>
</IconButton>
</Row>
<StyledDivider />
@ -207,7 +204,7 @@ export const EditTxParametersForm = ({
</>
)}
<StyledDivider />
<Divider />
{/* Footer */}
<Row align="center" className={classes.buttonRow}>

5
src/routes/safe/components/Transactions/helpers/EditTxParametersForm/style.ts
View File

@ -6,7 +6,7 @@ export const styles = createStyles({
padding: `${md} ${lg}`,
justifyContent: 'space-between',
boxSizing: 'border-box',
maxHeight: '75px',
height: '75px',
},
annotation: {
letterSpacing: '-1px',
@ -31,8 +31,9 @@ export const styles = createStyles({
marginRight: sm,
},
buttonRow: {
height: '84px',
height: '52px',
justifyContent: 'center',
alignItems: 'center',
'& > button': {
fontFamily: 'Averta',
fontSize: md,