style: fix positioning of car page button

This commit is contained in:
Liordino Neto 2020-03-16 21:00:01 -03:00 committed by Josh Harvey
parent 2a1356d192
commit 840788e044
4 changed files with 115 additions and 115 deletions

View file

@ -46,9 +46,7 @@ const booleanPropertiesTableStyles = {
flex: 'wrap' flex: 'wrap'
}, },
rightAligned: { rightAligned: {
display: 'flex', marginLeft: 'auto'
position: 'absolute',
right: 0
}, },
radioButtons: { radioButtons: {
display: 'flex', display: 'flex',

View file

@ -73,120 +73,118 @@ const CoinATMRadar = memo(() => {
if (!coinAtmRadarConfig) return null if (!coinAtmRadarConfig) return null
return ( return (
<> <div className={classes.content}>
<div className={classes.rightAligned}> <div>
<div className={classes.button}> <div className={classes.rowWrapper}>
<a <H4>Coin ATM Radar share settings</H4>
target="_blank" <div className={classes.transparentButton}>
rel="noopener noreferrer" <button onClick={handleOpenHelpPopper}>
href="https://coinatmradar.com/"> <HelpIcon />
<Button>Coin ATM Radar page</Button> <Popper
</a> open={helpPopperOpen}
anchorEl={helpPopperAnchorEl}
placement="bottom"
onClose={handleCloseHelpPopper}>
<div className={classes.popoverContent}>
<P>
For details on configuring this panel, please read the
relevant knowledgebase article{' '}
<a
target="_blank"
rel="noopener noreferrer"
href="https://support.lamassu.is/hc/en-us/articles/360023720472-Coin-ATM-Radar">
here
</a>
.
</P>
</div>
</Popper>
</button>
</div>
</div> </div>
</div> <div className={classes.rowWrapper}>
<div className={classes.rowWrapper}> <P>Share information?</P>
<H4>Coin ATM Radar share settings</H4> <div className={classes.switchWrapper}>
<div className={classes.transparentButton}> <Switch
<button onClick={handleOpenHelpPopper}> checked={coinAtmRadarConfig.active}
<HelpIcon /> onChange={event =>
<Popper save({
open={helpPopperOpen} active: event.target.checked
anchorEl={helpPopperAnchorEl} })
placement="bottom" }
onClose={handleCloseHelpPopper}> />
<div className={classes.popoverContent}> </div>
<P> <Label2>{coinAtmRadarConfig.active ? 'Yes' : 'No'}</Label2>
For details on configuring this panel, please read the
relevant knowledgebase article{' '}
<a
target="_blank"
rel="noopener noreferrer"
href="https://support.lamassu.is/hc/en-us/articles/360023720472-Coin-ATM-Radar">
here
</a>
.
</P>
</div>
</Popper>
</button>
</div> </div>
</div> <BooleanPropertiesTable
<div className={classes.rowWrapper}> title={'Machine info'}
<P>Share information?</P> disabled={!coinAtmRadarConfig.active}
<div className={classes.switchWrapper}> data={coinAtmRadarConfig}
<Switch elements={[
checked={coinAtmRadarConfig.active} // {
onChange={event => // name: 'location',
save({ // display: 'Location',
active: event.target.checked // value: coinAtmRadarConfig.location
}) // },
{
name: 'commissions',
display: 'Commissions',
value: coinAtmRadarConfig.commissions
},
{
name: 'supportedCryptocurrencies',
display: 'Supported Cryptocurrencies',
value: coinAtmRadarConfig.supportedCryptocurrencies
},
{
name: 'supportedFiat',
display: 'Supported Fiat',
value: coinAtmRadarConfig.supportedFiat
},
{
name: 'supportedBuySellDirection',
display: 'Supported Buy Sell Direction',
value: coinAtmRadarConfig.supportedBuySellDirection
},
{
name: 'limitsAndVerification',
display: 'Limits And Verification',
value: coinAtmRadarConfig.limitsAndVerification
} }
/> ]}
</div> save={save}
<Label2>{coinAtmRadarConfig.active ? 'Yes' : 'No'}</Label2> />
{/* <BooleanPropertiesTable
title={'Operator info'}
disabled={!coinAtmRadarConfig.active}
data={coinAtmRadarConfig}
elements={[
{
name: 'operatorName',
display: 'Operator Name',
value: coinAtmRadarConfig.operatorName
},
{
name: 'operatorPhoneNumber',
display: 'Operator Phone Number',
value: coinAtmRadarConfig.operatorPhoneNumber
},
{
name: 'operatorEmail',
display: 'Operator Email',
value: coinAtmRadarConfig.operatorEmail
}
]}
save={save}
/> */}
</div> </div>
<BooleanPropertiesTable <a
title={'Machine info'} target="_blank"
disabled={!coinAtmRadarConfig.active} rel="noopener noreferrer"
data={coinAtmRadarConfig} href="https://coinatmradar.com/">
elements={[ <Button>Coin ATM Radar page</Button>
// { </a>
// name: 'location', </div>
// display: 'Location',
// value: coinAtmRadarConfig.location
// },
{
name: 'commissions',
display: 'Commissions',
value: coinAtmRadarConfig.commissions
},
{
name: 'supportedCryptocurrencies',
display: 'Supported Cryptocurrencies',
value: coinAtmRadarConfig.supportedCryptocurrencies
},
{
name: 'supportedFiat',
display: 'Supported Fiat',
value: coinAtmRadarConfig.supportedFiat
},
{
name: 'supportedBuySellDirection',
display: 'Supported Buy Sell Direction',
value: coinAtmRadarConfig.supportedBuySellDirection
},
{
name: 'limitsAndVerification',
display: 'Limits And Verification',
value: coinAtmRadarConfig.limitsAndVerification
}
]}
save={save}
/>
{/* <BooleanPropertiesTable
title={'Operator info'}
disabled={!coinAtmRadarConfig.active}
data={coinAtmRadarConfig}
elements={[
{
name: 'operatorName',
display: 'Operator Name',
value: coinAtmRadarConfig.operatorName
},
{
name: 'operatorPhoneNumber',
display: 'Operator Phone Number',
value: coinAtmRadarConfig.operatorPhoneNumber
},
{
name: 'operatorEmail',
display: 'Operator Email',
value: coinAtmRadarConfig.operatorEmail
}
]}
save={save}
/> */}
</>
) )
}) })

View file

@ -2,10 +2,14 @@ import baseStyles from 'src/pages/Logs.styles'
import { booleanPropertiesTableStyles } from 'src/components/booleanPropertiesTable/BooleanPropertiesTable.styles' import { booleanPropertiesTableStyles } from 'src/components/booleanPropertiesTable/BooleanPropertiesTable.styles'
const { button } = baseStyles const { button } = baseStyles
const { rowWrapper, rightAligned } = booleanPropertiesTableStyles const { rowWrapper } = booleanPropertiesTableStyles
const mainStyles = { const mainStyles = {
button, button,
content: {
display: 'flex',
justifyContent: 'space-between'
},
transparentButton: { transparentButton: {
'& > *': { '& > *': {
margin: 'auto 15px' margin: 'auto 15px'
@ -21,7 +25,6 @@ const mainStyles = {
display: 'flex', display: 'flex',
marginLeft: 120 marginLeft: 120
}, },
rightAligned,
popoverContent: { popoverContent: {
width: 272, width: 272,
padding: [[10, 15]] padding: [[10, 15]]

View file

@ -13,6 +13,7 @@ import TermsConditions from './TermsConditions'
const localStyles = { const localStyles = {
contentWrapper: { contentWrapper: {
width: '100%',
marginLeft: 48, marginLeft: 48,
paddingTop: 15 paddingTop: 15
} }