fix: UI/UX tweaks

This commit is contained in:
Sérgio Salgado 2021-12-21 15:04:50 +00:00
parent c641d6d3fa
commit d78594c325
6 changed files with 18 additions and 19 deletions

View file

@ -1,4 +1,4 @@
import { spacer, white, errorColor } from 'src/styling/variables' import { spacer, white } from 'src/styling/variables'
const styles = { const styles = {
grid: { grid: {
flex: 1, flex: 1,
@ -32,7 +32,7 @@ const styles = {
marginLeft: 8 marginLeft: 8
}, },
error: { error: {
color: errorColor marginTop: 20
} }
} }

View file

@ -5,6 +5,7 @@ import * as R from 'ramda'
import React from 'react' import React from 'react'
import * as Yup from 'yup' import * as Yup from 'yup'
import ErrorMessage from 'src/components/ErrorMessage'
import Modal from 'src/components/Modal' import Modal from 'src/components/Modal'
import { Link } from 'src/components/buttons' import { Link } from 'src/components/buttons'
import { TextInput } from 'src/components/inputs/formik' import { TextInput } from 'src/components/inputs/formik'
@ -32,7 +33,10 @@ const BlackListModal = ({
LTC: 'LPKvbjwV1Kaksktzkr7TMK3FQtQEEe6Wqa', LTC: 'LPKvbjwV1Kaksktzkr7TMK3FQtQEEe6Wqa',
DASH: 'XqQ7gU8eM76rEfey726cJpT2RGKyJyBrcn', DASH: 'XqQ7gU8eM76rEfey726cJpT2RGKyJyBrcn',
ZEC: 't1KGyyv24eL354C9gjveBGEe8Xz9UoPKvHR', ZEC: 't1KGyyv24eL354C9gjveBGEe8Xz9UoPKvHR',
BCH: 'qrd6za97wm03lfyg82w0c9vqgc727rhemg5yd9k3dm' BCH: 'qrd6za97wm03lfyg82w0c9vqgc727rhemg5yd9k3dm',
USDT: '0x5754284f345afc66a98fbb0a0afe71e0f007b949',
XMR:
'888tNkZrPN6JsEgekjMnABU4TBzc2Dt29EPAvkRxbANsAnjyPbb3iQ1YBRk1UXcdRsiKc9dhwMVgN5S9cQUiyoogDavup3H'
} }
return ( return (
@ -53,9 +57,8 @@ const BlackListModal = ({
.trim() .trim()
.required('An address is required') .required('An address is required')
})} })}
onSubmit={({ address }, { resetForm }) => { onSubmit={({ address }) => {
handleAddToBlacklist(address.trim()) handleAddToBlacklist(address.trim())
resetForm()
}}> }}>
<Form id="address-form"> <Form id="address-form">
<H3 className={classes.modalTitle}> <H3 className={classes.modalTitle}>
@ -63,7 +66,6 @@ const BlackListModal = ({
? `Blacklist ${R.toLower(selectedCoin.display)} address` ? `Blacklist ${R.toLower(selectedCoin.display)} address`
: ''} : ''}
</H3> </H3>
<span className={classes.error}>{errorMsg}</span>
<Field <Field
name="address" name="address"
fullWidth fullWidth
@ -72,6 +74,9 @@ const BlackListModal = ({
placeholder={`ex: ${placeholderAddress[selectedCoin.code]}`} placeholder={`ex: ${placeholderAddress[selectedCoin.code]}`}
component={TextInput} component={TextInput}
/> />
{!R.isNil(errorMsg) && (
<ErrorMessage className={classes.error}>{errorMsg}</ErrorMessage>
)}
</Form> </Form>
</Formik> </Formik>
<div className={classes.footer}> <div className={classes.footer}>

View file

@ -212,7 +212,9 @@ const Funding = () => {
<div className={classes.addressWrapper}> <div className={classes.addressWrapper}>
<div className={classes.mono}> <div className={classes.mono}>
<strong> <strong>
<CopyToClipboard buttonClassname={classes.copyToClipboard}> <CopyToClipboard
buttonClassname={classes.copyToClipboard}
key={selected.cryptoCode}>
{formatAddress( {formatAddress(
selected.cryptoCode, selected.cryptoCode,
selected.fundingAddress selected.fundingAddress

View file

@ -8,7 +8,6 @@ import { DeleteDialog } from 'src/components/DeleteDialog'
import { Link, Button, IconButton } from 'src/components/buttons' import { Link, Button, IconButton } from 'src/components/buttons'
import DataTable from 'src/components/tables/DataTable' import DataTable from 'src/components/tables/DataTable'
import { Label3, TL1 } from 'src/components/typography' import { Label3, TL1 } from 'src/components/typography'
import { ReactComponent as CardIdIcon } from 'src/styling/icons/ID/card/zodiac.svg'
import { ReactComponent as PhoneIdIcon } from 'src/styling/icons/ID/phone/zodiac.svg' import { ReactComponent as PhoneIdIcon } from 'src/styling/icons/ID/phone/zodiac.svg'
import { ReactComponent as DeleteIcon } from 'src/styling/icons/action/delete/enabled.svg' import { ReactComponent as DeleteIcon } from 'src/styling/icons/action/delete/enabled.svg'
@ -49,7 +48,6 @@ const GET_CUSTOMERS = gql`
id id
phone phone
idCardData idCardData
phone
} }
} }
` `
@ -102,12 +100,6 @@ const IndividualDiscounts = () => {
<div className={classes.identification}> <div className={classes.identification}>
<PhoneIdIcon /> <PhoneIdIcon />
<span>{customer.phone}</span> <span>{customer.phone}</span>
{customer?.idCardData?.documentNumber && (
<>
<CardIdIcon />
<span>{customer?.idCardData?.documentNumber}</span>
</>
)}
</div> </div>
) )
} }

View file

@ -183,10 +183,10 @@ const InfoPanel = ({ step, config = {}, liveValues = {}, currency }) => {
return ( return (
<> <>
<H5 className={classes.infoTitle}>Trigger overview so far</H5> <H5 className={classes.infoTitle}>Trigger overview so far</H5>
<Info3 noMargin className={classes.infoText}> <Info3 noMargin>
{oldText} {oldText}
{step !== 1 && ', '} {step !== 1 && ', '}
{newText} <span className={classes.infoCurrentText}>{newText}</span>
{!isLastStep && '...'} {!isLastStep && '...'}
</Info3> </Info3>
</> </>

View file

@ -61,7 +61,7 @@ const getDefaultSettings = () => {
return [ return [
{ {
name: 'expirationTime', name: 'expirationTime',
header: 'Expiration Time', header: 'Expiration time',
width: 196, width: 196,
size: 'sm', size: 'sm',
editable: false editable: false
@ -101,7 +101,7 @@ const getOverrides = () => {
}, },
{ {
name: 'expirationTime', name: 'expirationTime',
header: 'Expiration Time', header: 'Expiration time',
width: 196, width: 196,
size: 'sm', size: 'sm',
editable: false editable: false