fix: fee discount selector alignment

This commit is contained in:
José Oliveira 2021-11-16 18:49:00 +00:00
parent c200b0824a
commit 82490145cd
2 changed files with 37 additions and 29 deletions

View file

@ -137,32 +137,32 @@ const Wallet = ({ name: SCREEN_KEY }) => {
return ( return (
<> <>
<TitleSection <div className={classes.header}>
title="Wallet Settings" <TitleSection
button={{ title="Wallet Settings"
text: 'Advanced settings', button={{
icon: SettingsIcon, text: 'Advanced settings',
inverseIcon: ReverseSettingsIcon, icon: SettingsIcon,
toggle: setAdvancedSettings inverseIcon: ReverseSettingsIcon,
}} toggle: setAdvancedSettings
/> }}
/>
<Box alignItems="center" justifyContent="end">
<Label1 className={classes.feeDiscountLabel}>Fee discount</Label1>
<Box
display="flex"
alignItems="center"
justifyContent="end"
mr="-4px">
<P className={classes.selection}>{selectedDiscount}</P>
<IconButton onClick={() => setEditingFeeDiscount(true)}>
<EditIcon />
</IconButton>
</Box>
</Box>
</div>
{!advancedSettings && ( {!advancedSettings && (
<> <>
<Box alignItems="center" justifyContent="end">
<Label1 className={classes.cashboxReset}>Fee discount</Label1>
<Box
display="flex"
alignItems="center"
justifyContent="end"
mr="-4px">
<P className={classes.selection}>{selectedDiscount}</P>
<IconButton
onClick={() => setEditingFeeDiscount(true)}
className={classes.button}>
<EditIcon />
</IconButton>
</Box>
</Box>
<EditableTable <EditableTable
name="test" name="test"
namespaces={R.map(R.path(['code']))(cryptoCurrencies)} namespaces={R.map(R.path(['code']))(cryptoCurrencies)}
@ -213,7 +213,7 @@ const Wallet = ({ name: SCREEN_KEY }) => {
width={478} width={478}
handleClose={() => setEditingFeeDiscount(null)} handleClose={() => setEditingFeeDiscount(null)}
open={true}> open={true}>
<P className={classes.descriptions}> <P>
Set a priority level for your outgoing BTC transactions, selecting a Set a priority level for your outgoing BTC transactions, selecting a
percentage off of the fee estimate your wallet uses. percentage off of the fee estimate your wallet uses.
</P> </P>
@ -222,9 +222,8 @@ const Wallet = ({ name: SCREEN_KEY }) => {
value={selectedDiscount} value={selectedDiscount}
options={radioButtonOptions} options={radioButtonOptions}
onChange={handleRadioButtons} onChange={handleRadioButtons}
className={classes.radioButtons}
/> />
<DialogActions className={classes.actions}> <DialogActions>
<Button <Button
onClick={() => onClick={() =>
saveFeeDiscount({ BTC_feeMultiplier: selectedDiscount }) saveFeeDiscount({ BTC_feeMultiplier: selectedDiscount })

View file

@ -1,7 +1,16 @@
import { offColor } from 'src/styling/variables'
export default { export default {
tableWidth: { header: {
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
marginRight: 90 justifyContent: 'space-between'
},
feeDiscountLabel: {
color: offColor,
margin: [[13, 0, -5, 20]]
},
selection: {
marginRight: 12
} }
} }