Minor CSS changes

Signed-off-by: BOUTIER Charly <[email protected]>
gridsuite · Dec 15, 2023 · cbc8b53 · cbc8b53
1 parent 574b8a3
commit cbc8b53
Showing 1 changed file with 63 additions and 101 deletions.
diff --git a/src/components/TopBar/AboutDialog.js b/src/components/TopBar/AboutDialog.js
@@ -19,7 +19,6 @@ import {
     DialogActions,
     DialogContent,
     DialogTitle,
-    Fade,
     Grid,
     Stack,
     Tooltip,
@@ -158,40 +157,36 @@ const AboutDialog = ({
         >
             <DialogTitle id="alert-dialog-title">
                 <FormattedMessage id={'about-dialog/title'} />
-            </DialogTitle>
-            <DialogContent id="alert-dialog-description">
-                <Box>
-                    {startingGlobalVersion !== undefined &&
-                        startingGlobalVersion !== null &&
-                        actualGlobalVersion !== null &&
-                        startingGlobalVersion !== actualGlobalVersion && (
-                            <Collapse in={open}>
-                                <Alert
-                                    severity="warning"
-                                    variant="outlined"
-                                    action={
-                                        <LoadingButton
-                                            color="inherit"
-                                            size="small"
-                                            startIcon={
-                                                <Refresh fontSize="small" />
-                                            }
-                                            loadingPosition="start"
-                                            loading={isRefreshing}
-                                            onClick={() => {
-                                                setRefreshState(true);
-                                                window.location.reload();
-                                            }}
-                                        >
-                                            <FormattedMessage id="refresh" />
-                                        </LoadingButton>
-                                    }
-                                    sx={{ marginBottom: 1 }}
-                                >
-                                    <FormattedMessage id="about-dialog/alert-running-old-version-msg" />
-                                </Alert>
-                            </Collapse>
-                        )}
+                {startingGlobalVersion !== undefined &&
+                    startingGlobalVersion !== null &&
+                    actualGlobalVersion !== null &&
+                    startingGlobalVersion !== actualGlobalVersion && (
+                        <Collapse in={open}>
+                            <Alert
+                                severity="warning"
+                                variant="outlined"
+                                action={
+                                    <LoadingButton
+                                        color="inherit"
+                                        size="small"
+                                        startIcon={<Refresh fontSize="small" />}
+                                        loadingPosition="start"
+                                        loading={isRefreshing}
+                                        onClick={() => {
+                                            setRefreshState(true);
+                                            window.location.reload();
+                                        }}
+                                    >
+                                        <FormattedMessage id="refresh" />
+                                    </LoadingButton>
+                                }
+                                sx={{ marginBottom: 2 }}
+                            >
+                                <FormattedMessage id="about-dialog/alert-running-old-version-msg" />
+                            </Alert>
+                        </Collapse>
+                    )}
+                <Box sx={{ height: '5em' }}>
                     <Box
                         sx={{
                             display: 'flex',
@@ -210,75 +205,42 @@ const AboutDialog = ({
                         columnSpacing={1}
                         justifyContent="center"
                         alignItems="center"
-                        sx={{
-                            textAlign: 'center',
-                            marginTop: 0,
-                            'dt, dd': {
-                                margin: 0,
-                                height: '2em',
-                            },
-                            '.MuiGrid-item': {
-                                height: '100%',
-                            },
-                            dt: {
-                                '&:after': {
-                                    content: '" :"',
-                                },
-                                '&:before': {
-                                    content: "'\\A'",
-                                    whiteSpace: 'pre',
-                                },
-                                '&:first-child': {
-                                    '&:before': {
-                                        content: "''",
-                                    },
-                                },
-                                textAlign: 'right',
-                            },
-                            dd: {
-                                //paddingLeft: '0.5em',
-                                textAlign: 'left',
-                            },
-                        }}
                     >
-                        <Grid item component="dt" xs={6}>
-                            <FormattedMessage id="about-dialog/version" />
-                        </Grid>
-                        <Grid
-                            item
-                            component="dd"
-                            xs={6}
-                            fontSize={
-                                !loadingGlobalVersion &&
-                                actualGlobalVersion &&
-                                '1.5em'
-                            }
-                            fontWeight={
-                                !loadingGlobalVersion &&
-                                actualGlobalVersion &&
-                                'bold'
-                            }
-                            fontStyle={
-                                !loadingGlobalVersion &&
-                                !actualGlobalVersion &&
-                                'italic'
-                            }
-                        >
-                            {loadingGlobalVersion
-                                ? '…'
-                                : actualGlobalVersion || 'unknown'}
-                            <Fade
-                                in={loadingGlobalVersion}
-                                style={{ transitionDelay: '100ms' }}
-                                unmountOnExit
+                        {loadingGlobalVersion && (
+                            <CircularProgress size="1.2rem" />
+                        )}
+                        {!loadingGlobalVersion && (
+                            <Grid
+                                item
+                                sx={{
+                                    display: 'flex',
+                                    alignItems: 'baseline',
+                                }}
                             >
-                                <CircularProgress size="1rem" />
-                            </Fade>
-                        </Grid>
+                                <FormattedMessage
+                                    id="about-dialog/version"
+                                    sx={{
+                                        display: 'inline-block',
+                                        lineHeight: '1',
+                                        fontSize: '1em',
+                                    }}
+                                />
+                                <Box
+                                    sx={{
+                                        display: 'inline-block',
+                                        lineHeight: '1',
+                                        fontSize: '1.3em',
+                                        fontWeight: 'bold',
+                                    }}
+                                >
+                                    &nbsp;{actualGlobalVersion}
+                                </Box>
+                            </Grid>
+                        )}
                     </Grid>
                 </Box>
-
-                {/* TODO found how to scroll only in this box, to keep logo and global version always visible */}
+            </DialogTitle>
+            <DialogContent id="alert-dialog-description">
                 <Box
                     sx={{
                         '.MuiAccordion-root': {
@@ -448,7 +410,7 @@ const Module = ({ type, name, version, gitTag, license }) => {
         >
             <Tooltip
                 TransitionComponent={Zoom}
-                enterDelay={3500}
+                enterDelay={2500}
                 enterNextDelay={350}
                 leaveDelay={200}
                 placement="bottom-start"