Fix/cr UI fixes (#2675)

This PR contains multiple UI fixes for the change request. It changes font sizes, icon colors, margins and paddings to be more consistent.
2025-06-04 01:18:20 +02:00 · 2022-12-12 16:32:38 +01:00 · 2022-12-12 16:32:38 +01:00 · cef4181f11
commit cef4181f11
parent 5086ec7921
11 changed files with 67 additions and 35 deletions
--- a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/Change.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/Change.tsx
@ -87,7 +87,7 @@ export const Change: FC<{
                    </StyledAlert>
                }
            />
-            <Box sx={{ p: 2 }}>
+            <Box sx={theme => ({ padding: theme.spacing(3) })}>
                {change.action === 'updateEnabled' && (
                    <ToggleStatusChange
                        enabled={change.payload.enabled}
--- a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/StrategyChange.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/StrategyChange.tsx
@ -1,14 +1,22 @@
-import { Box, Link, styled, Typography } from '@mui/material';
+import { Box, styled, Typography } from '@mui/material';
 import { FC, ReactNode } from 'react';

-export const ChangeItemWrapper = styled(Box)(({ theme }) => ({
+export const ChangeItemWrapper = styled(Box)({
    display: 'flex',
    justifyContent: 'space-between',
-    padding: theme.spacing(1),
+    alignItems: 'center',
+});
+
+export const ChangeItemCreateEditWrapper = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: theme.spacing(2),
 }));

 const ChangeItemInfo: FC = styled(Box)(({ theme }) => ({
    display: 'flex',
+    alignItems: 'center',
    gap: theme.spacing(1),
 }));

@ -17,17 +25,19 @@ export const StrategyAddedChange: FC<{ discard?: ReactNode }> = ({
    discard,
 }) => {
    return (
-        <ChangeItemWrapper>
+        <ChangeItemCreateEditWrapper>
            <ChangeItemInfo>
                <Typography
-                    sx={theme => ({ color: theme.palette.success.dark })}
+                    sx={theme => ({
+                        color: theme.palette.success.dark,
+                    })}
                >
                    + Adding strategy:
                </Typography>
                {children}
            </ChangeItemInfo>
            {discard}
-        </ChangeItemWrapper>
+        </ChangeItemCreateEditWrapper>
    );
 };

@ -36,13 +46,13 @@ export const StrategyEditedChange: FC<{ discard?: ReactNode }> = ({
    discard,
 }) => {
    return (
-        <ChangeItemWrapper>
+        <ChangeItemCreateEditWrapper>
            <ChangeItemInfo>
                <Typography>Editing strategy:</Typography>
                {children}
            </ChangeItemInfo>
            {discard}
-        </ChangeItemWrapper>
+        </ChangeItemCreateEditWrapper>
    );
 };

--- a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/ToggleStatusChange.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/ToggleStatusChange.tsx
@ -14,9 +14,12 @@ export const ToggleStatusChange: VFC<IToggleStatusChange> = ({
 }) => {
    return (
        <ChangeItemWrapper>
-            <Box>
+            <Box sx={{ display: 'flex', alignItems: 'center' }}>
                New status:{' '}
-                <Badge color={enabled ? 'success' : 'error'}>
+                <Badge
+                    sx={theme => ({ marginLeft: theme.spacing(1) })}
+                    color={enabled ? 'success' : 'error'}
+                >
                    {enabled ? ' Enabled' : 'Disabled'}
                </Badge>
            </Box>
--- a/frontend/src/component/changeRequest/ChangeRequest/Changes/FeatureToggleChanges.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequest/Changes/FeatureToggleChanges.tsx
@ -1,6 +1,6 @@
 import { FC } from 'react';
-import { Link } from 'react-router-dom';
-import { Alert, Box, Card, Typography } from '@mui/material';
+import { Link as RouterLink } from 'react-router-dom';
+import { Alert, Box, Card, Typography, Link } from '@mui/material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';

 interface IFeatureToggleChanges {
@ -28,14 +28,14 @@ export const FeatureToggleChanges: FC<IFeatureToggleChanges> = ({
            sx={theme => ({
                backgroundColor: Boolean(conflict)
                    ? theme.palette.neutral.light
-                    : theme.palette.tableHeaderBackground,
+                    : theme.palette.neutral.light,
                borderRadius: theme =>
                    `${theme.shape.borderRadiusLarge}px ${theme.shape.borderRadiusLarge}px 0 0`,
                border: '1px solid',
                borderColor: theme =>
                    conflict
                        ? theme.palette.warning.border
-                        : theme.palette.divider,
+                        : theme.palette.tertiary.main,
                borderBottom: 'none',
                overflow: 'hidden',
            })}
@ -65,15 +65,22 @@ export const FeatureToggleChanges: FC<IFeatureToggleChanges> = ({
                }}
            >
                <Typography>Feature toggle name: </Typography>
-                <Typography
-                    component={Link}
+
+                <Link
+                    component={RouterLink}
                    to={`/projects/${projectId}/features/${featureName}`}
                    color="primary"
-                    sx={{ textDecoration: 'none', marginLeft: 1 }}
+                    underline="hover"
+                    sx={{
+                        marginLeft: 1,
+                        '& :hover': {
+                            textDecoration: 'underline',
+                        },
+                    }}
                    onClick={onNavigate}
                >
                    <strong>{featureName}</strong>
-                </Typography>
+                </Link>
            </Box>
        </Box>
        <Box>{children}</Box>
--- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.styles.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.styles.tsx
@ -30,8 +30,6 @@ export const StyledCard = styled(Card)(({ theme }) => ({
 }));

 export const StyledAvatar = styled(Avatar)(({ theme }) => ({
-    marginLeft: theme.spacing(1),
-    marginRight: theme.spacing(1),
    height: '24px',
    width: '24px',
 }));
--- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.tsx
@ -30,9 +30,17 @@ export const ChangeRequestHeader: FC<{ changeRequest: IChangeRequest }> = ({
                    Created <TimeAgo date={new Date(changeRequest.createdAt)} />{' '}
                    by
                </Typography>
-                <Tooltip title={changeRequest?.createdBy?.username}>
-                    <StyledAvatar src={changeRequest?.createdBy?.imageUrl} />
-                </Tooltip>
+                <Box
+                    sx={theme => ({
+                        marginLeft: theme.spacing(1),
+                    })}
+                >
+                    <Tooltip title={changeRequest?.createdBy?.username}>
+                        <StyledAvatar
+                            src={changeRequest?.createdBy?.imageUrl}
+                        />
+                    </Tooltip>
+                </Box>
                <Box sx={{ ml: 1.5 }}>
                    <StyledCard variant="outlined">
                        <Typography variant="body2">
--- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestReviewers/ChangeRequestReviewer.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestReviewers/ChangeRequestReviewer.tsx
@ -18,9 +18,6 @@ const StyledBox = styled(Box)(({ theme }) => ({

 export const StyledSuccessIcon = styled(CheckCircle)(({ theme }) => ({
    color: theme.palette.success.main,
-    height: '25px',
-    width: '25px',
-    marginRight: theme.spacing(1),
    marginLeft: 'auto',
 }));

@ -31,7 +28,16 @@ export const ChangeRequestReviewer: FC<IChangeRequestReviewerProps> = ({
    return (
        <StyledBox>
            <StyledAvatar src={imageUrl} />
-            <Typography variant="body1" color="text.secondary">
+            <Typography
+                variant="body1"
+                color="text.primary"
+                sx={{
+                    maxWidth: '170px',
+                    textOverflow: 'ellipsis',
+                    overflow: 'hidden',
+                    whiteSpace: 'nowrap',
+                }}
+            >
                {name}
            </Typography>
            <StyledSuccessIcon />
--- a/frontend/src/component/changeRequest/ChangeRequestSidebar/ChangeRequestSidebar.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequestSidebar/ChangeRequestSidebar.tsx
@ -22,7 +22,7 @@ const StyledPageContent = styled(PageContent)(({ theme }) => ({
    height: '100vh',
    overflow: 'auto',
    minWidth: '50vw',
-    padding: theme.spacing(4, 6),
+    padding: theme.spacing(6),
    [theme.breakpoints.down('md')]: {
        padding: theme.spacing(4, 2),
    },
@ -42,8 +42,8 @@ const BackButton = styled(Button)(({ theme }) => ({

 export const StyledSuccessIcon = styled(CheckCircle)(({ theme }) => ({
    color: theme.palette.success.main,
-    height: '25px',
-    width: '25px',
+    height: '32px',
+    width: '32px',
    marginRight: theme.spacing(1),
 }));

--- a/frontend/src/component/changeRequest/ChangeRequestSidebar/ReviewChangesHeader/ReviewChangesHeader.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequestSidebar/ReviewChangesHeader/ReviewChangesHeader.tsx
@ -11,7 +11,6 @@ const StyledHelpOutline = styled(HelpOutline)(({ theme }) => ({
 }));

 const StyledHeaderHint = styled('div')(({ theme }) => ({
-    marginTop: theme.spacing(0.5),
    color: theme.palette.text.secondary,
    fontSize: theme.fontSizes.smallBody,
 }));
--- a/frontend/src/component/common/FormTemplate/FormTemplate.styles.ts
+++ b/frontend/src/component/common/FormTemplate/FormTemplate.styles.ts
@ -38,7 +38,7 @@ export const useStyles = makeStyles()(theme => ({
        marginBottom: '8px',
    },
    title: {
-        marginBottom: '1.5rem',
+        marginBottom: theme.fontSizes.mainHeader,
        fontWeight: 'normal',
    },
    subtitle: {
--- a/frontend/src/utils/strategyNames.tsx
+++ b/frontend/src/utils/strategyNames.tsx
@ -1,5 +1,5 @@
 import { FC, ElementType } from 'react';
-import { SvgIcon } from '@mui/material';
+import { SvgIcon, useTheme } from '@mui/material';
 import LocationOnIcon from '@mui/icons-material/LocationOn';
 import PeopleIcon from '@mui/icons-material/People';
 import LanguageIcon from '@mui/icons-material/Language';
@ -39,8 +39,9 @@ export const getFeatureStrategyIcon = (strategyName: string): ElementType => {
 export const GetFeatureStrategyIcon: FC<{ strategyName: string }> = ({
    strategyName,
 }) => {
+    const theme = useTheme();
    const Icon = getFeatureStrategyIcon(strategyName);
-    return <Icon />;
+    return <Icon style={{ color: theme.palette.neutral.main }} />;
 };

 export const formattedStrategyNames: Record<string, string> = {