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.
Unleash · Dec 12, 2022 · cef4181 · cef4181
1 parent 5086ec7
commit cef4181
Show file tree

Hide file tree

Showing 11 changed files with 67 additions and 35 deletions.
diff --git 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}

diff --git 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>
     );
 };
 

diff --git 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>

diff --git 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>

diff --git a/...nt/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.styles.tsx b/...nt/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',
 }));
diff --git a/...component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.tsx b/...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">

diff --git a/...nent/changeRequest/ChangeRequestOverview/ChangeRequestReviewers/ChangeRequestReviewer.tsx b/...nent/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 />

diff --git 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),
 }));
 

diff --git a/.../component/changeRequest/ChangeRequestSidebar/ReviewChangesHeader/ReviewChangesHeader.tsx b/.../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,
 }));

diff --git 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: {

diff --git 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> = {