style: fix positioning of car page button
This commit is contained in:
parent
2a1356d192
commit
840788e044
4 changed files with 115 additions and 115 deletions
|
|
@ -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',
|
||||||
|
|
|
||||||
|
|
@ -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}
|
|
||||||
/> */}
|
|
||||||
</>
|
|
||||||
)
|
)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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]]
|
||||||
|
|
|
||||||
|
|
@ -13,6 +13,7 @@ import TermsConditions from './TermsConditions'
|
||||||
|
|
||||||
const localStyles = {
|
const localStyles = {
|
||||||
contentWrapper: {
|
contentWrapper: {
|
||||||
|
width: '100%',
|
||||||
marginLeft: 48,
|
marginLeft: 48,
|
||||||
paddingTop: 15
|
paddingTop: 15
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue