improved Message box button reponsive styling
This commit is contained in:
parent
37157455c0
commit
6f078e0c4b
|
@ -52,35 +52,51 @@ export default function MessageDialog({
|
|||
</Modal.Body>
|
||||
)}
|
||||
<Modal.Footer style={{ borderTop: 'none' }}>
|
||||
{attributes.close && (
|
||||
<Button
|
||||
variant={`outline-${
|
||||
attributes.close?.variant ?? 'secondary'
|
||||
}`}
|
||||
onClick={props.onHide}
|
||||
style={{
|
||||
padding: '6px 3em',
|
||||
marginRight: '20px',
|
||||
}}
|
||||
>
|
||||
{attributes.close?.text ?? constants.OK}
|
||||
</Button>
|
||||
)}
|
||||
{attributes.proceed && (
|
||||
<Button
|
||||
variant={`outline-${
|
||||
attributes.proceed?.variant ?? 'primary'
|
||||
}`}
|
||||
onClick={() => {
|
||||
attributes.proceed.action();
|
||||
props.onHide();
|
||||
}}
|
||||
style={{ padding: '6px 3em', marginRight: '20px' }}
|
||||
disabled={attributes.proceed.disabled}
|
||||
>
|
||||
{attributes.proceed.text}
|
||||
</Button>
|
||||
)}
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
}}
|
||||
>
|
||||
{attributes.close && (
|
||||
<Button
|
||||
variant={`outline-${
|
||||
attributes.close?.variant ?? 'secondary'
|
||||
}`}
|
||||
onClick={props.onHide}
|
||||
style={{
|
||||
padding: '6px 3em',
|
||||
margin: '0 20px',
|
||||
marginBottom: '20px',
|
||||
flex: 1,
|
||||
whiteSpace: 'nowrap',
|
||||
}}
|
||||
>
|
||||
{attributes.close?.text ?? constants.OK}
|
||||
</Button>
|
||||
)}
|
||||
{attributes.proceed && (
|
||||
<Button
|
||||
variant={`outline-${
|
||||
attributes.proceed?.variant ?? 'primary'
|
||||
}`}
|
||||
onClick={() => {
|
||||
attributes.proceed.action();
|
||||
props.onHide();
|
||||
}}
|
||||
style={{
|
||||
padding: '6px 3em',
|
||||
margin: '0 20px',
|
||||
marginBottom: '20px',
|
||||
flex: 1,
|
||||
whiteSpace: 'nowrap',
|
||||
}}
|
||||
disabled={attributes.proceed.disabled}
|
||||
>
|
||||
{attributes.proceed.text}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</Modal.Footer>
|
||||
</Modal>
|
||||
);
|
||||
|
|
Loading…
Reference in a new issue