Merge pull request #940 from amvanbaren/bugfix/issue-936

Fix banner double button

Author: amvanbaren

webui/src/components/banner.tsx

@@ -9,74 +9,48 @@
  ********************************************************************************/
 
 import React, { FunctionComponent, PropsWithChildren } from 'react';
-import { Box, Paper, Card, Grid, Button, Divider, CardActions, CardContent, Hidden, Collapse } from '@mui/material';
+import { Paper, Grid, Button, Collapse } from '@mui/material';
 
 export const Banner: FunctionComponent<PropsWithChildren<BannerProps>> = props => {
-    const renderButtons = <>
-        <Box sx={{ flexGrow: 1 }} component='span'/>
-        <Grid item sx={{ whiteSpace: 'nowrap', alignSelf: 'flex-end', paddingLeft: '90px !important' }}>
-            <Button
-                variant='outlined'
-                onClick={props.dismissButtonOnClick}
-            >
-                {props.dismissButtonLabel ?? 'Close'}
-            </Button>
-        </Grid>
-    </>;
-
     const cardColor = props.theme === 'dark' ? '#fff' : '#000';
     const cardBackground = `${props.color}.${props.theme}`;
     return <>
         <Collapse in={props.open}>
-            <Paper elevation={0} sx={{ display: 'block', width: '100%', mx: 'auto' }}>
-                <Card
-                    elevation={0}
-                    sx={{
+            <Paper
+                elevation={0}
+                sx={{
+                    display: 'block',
+                    width: '100%',
+                    mx: 'auto',
+                    pb: 1, pr: 1, pl: 2, pt: 1.25,
+                    color: cardColor,
+                    bgcolor: cardBackground,
+                    '& a': {
                         color: cardColor,
-                        bgcolor: cardBackground,
-                        '& a': {
-                            color: cardColor,
-                            fontWeight: 'bold'
-                        }
-                    }}
+                        fontWeight: 'bold'
+                    }
+                }}
+            >
+                <Grid
+                    container
+                    spacing={2}
                 >
-                    <CardContent sx={{ pb: 1, pr: 1, pl: 2, pt: 1.25 }}>
-                        <Grid
-                            container
-                            wrap='nowrap'
-                            spacing={2}
-                            direction='row'
-                            justifyContent='flex-start'
-                            alignItems='flex-start'
-                        >
-                            <Grid item sx={{ alignSelf: 'center' }}>
-                                {props.children}
-                            </Grid>
-                            {
-                                props.showDismissButton ?
-                                    <Hidden smDown>
-                                        {renderButtons}
-                                    </Hidden> : null
-                            }
-                        </Grid>
-                    </CardContent>
+                    <Grid item xs={12} sm sx={{ alignSelf: 'center' }}>
+                        {props.children}
+                    </Grid>
                     {
-                        props.showDismissButton ?
-                            <>
-                                <Hidden mdUp>
-                                    <CardActions>
-                                        {renderButtons}
-                                    </CardActions>
-                                </Hidden>
-
-                                <Hidden smDown>
-                                    <div />
-                                </Hidden>
-                            </> : null
+                        props.showDismissButton &&
+                            <Grid item xs={12} sm='auto' sx={{ whiteSpace: 'nowrap', alignSelf: 'flex-end', paddingLeft: '90px !important' }}>
+                                <Button
+                                    sx={{ float: 'right' }}
+                                    variant='outlined'
+                                    onClick={props.dismissButtonOnClick}
+                                >
+                                    {props.dismissButtonLabel ?? 'Close'}
+                                </Button>
+                            </Grid>
                     }
-                </Card>
-
-                <Divider />
+                </Grid>
             </Paper>
         </Collapse>
     </>;