beenull/ente
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

improved Message box button reponsive styling

Browse source
This commit is contained in:
Abhinav-grd 2021-05-08 11:38:41 +05:30
parent 37157455c0
commit 6f078e0c4b
1 changed files with 45 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

74
src/components/MessageDialog.tsx
View file

@ -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>
);