change request ui tweaks (#2676)

frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.styles.tsx

@@ -25,7 +25,7 @@ export const StyledHeader = styled(Typography)(({ theme }) => ({
 }));
 
 export const StyledCard = styled(Card)(({ theme }) => ({
-    padding: theme.spacing(0.5, 1),
+    padding: theme.spacing(0.75, 1.5),
     backgroundColor: theme.palette.tertiary.light,
 }));
 

frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.tsx

@@ -41,9 +41,9 @@ export const ChangeRequestHeader: FC<{ changeRequest: IChangeRequest }> = ({
                         />
                     </Tooltip>
                 </Box>
-                <Box sx={{ ml: 1.5 }}>
+                <Box sx={theme => ({ marginLeft: theme.spacing(1.5) })}>
                     <StyledCard variant="outlined">
-                        <Typography variant="body2">
+                        <Typography variant="body2" sx={{ lineHeight: 1 }}>
                             Environment:{' '}
                             <Typography
                                 display="inline"

frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx

@@ -4,7 +4,10 @@ import { Box } from '@mui/material';
 import { useChangeRequest } from 'hooks/api/getters/useChangeRequest/useChangeRequest';
 import { ChangeRequestHeader } from './ChangeRequestHeader/ChangeRequestHeader';
 import { ChangeRequestTimeline } from './ChangeRequestTimeline/ChangeRequestTimeline';
-import { ChangeRequestReviewers } from './ChangeRequestReviewers/ChangeRequestReviewers';
+import {
+    ChangeRequestReviewers,
+    ChangeRequestReviewersHeader,
+} from './ChangeRequestReviewers/ChangeRequestReviewers';
 import { ChangeRequest } from '../ChangeRequest/ChangeRequest';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
 import { useChangeRequestApi } from 'hooks/api/actions/useChangeRequestApi/useChangeRequestApi';
@@ -48,7 +51,7 @@ const StyledPaper = styled(Paper)(({ theme }) => ({
 }));
 
 const StyledButtonBox = styled(Box)(({ theme }) => ({
-    marginTop: theme.spacing(2),
+    marginTop: theme.spacing(3),
     display: 'flex',
     justifyContent: 'flex-end',
 }));
@@ -157,7 +160,14 @@ export const ChangeRequestOverview: FC = () => {
             <ChangeRequestBody>
                 <StyledAsideBox>
                     <ChangeRequestTimeline state={changeRequest.state} />
-                    <ChangeRequestReviewers>
+                    <ChangeRequestReviewers
+                        header={
+                            <ChangeRequestReviewersHeader
+                                actualApprovals={changeRequest.approvals.length}
+                                minApprovals={changeRequest.minApprovals}
+                            />
+                        }
+                    >
                         {changeRequest.approvals?.map(approver => (
                             <ChangeRequestReviewer
                                 name={
@@ -167,7 +177,7 @@ export const ChangeRequestOverview: FC = () => {
                                 imageUrl={approver.createdBy.imageUrl}
                             />
                         ))}
-                    </ChangeRequestReviewers>{' '}
+                    </ChangeRequestReviewers>
                 </StyledAsideBox>
                 <StyledPaper elevation={0}>
                     <StyledInnerContainer>

frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestReviewers/ChangeRequestReviewers.tsx

@@ -1,12 +1,29 @@
 import { Box, Paper, styled, Typography } from '@mui/material';
-import React, { FC } from 'react';
+import React, { FC, ReactNode } from 'react';
 import { ConditionallyRender } from '../../../common/ConditionallyRender/ConditionallyRender';
 
 const StyledBox = styled(Box)(({ theme }) => ({
     marginBottom: theme.spacing(2),
 }));
 
-export const ChangeRequestReviewers: FC = ({ children }) => {
+export const ChangeRequestReviewersHeader: FC<{
+    actualApprovals: number;
+    minApprovals: number;
+}> = ({ actualApprovals, minApprovals }) => {
+    return (
+        <>
+            Reviewers{' '}
+            <Typography component="span" color="text.secondary">
+                ({actualApprovals}/{minApprovals} required)
+            </Typography>
+        </>
+    );
+};
+
+export const ChangeRequestReviewers: FC<{ header: ReactNode }> = ({
+    header,
+    children,
+}) => {
     return (
         <Paper
             elevation={0}
@@ -16,7 +33,7 @@ export const ChangeRequestReviewers: FC = ({ children }) => {
                 borderRadius: theme => `${theme.shape.borderRadiusLarge}px`,
             })}
         >
-            <StyledBox>Reviewers</StyledBox>
+            <StyledBox>{header}</StyledBox>
             <Typography variant="body1" color="text.secondary">
                 <ConditionallyRender
                     condition={React.Children.count(children) > 0}

frontend/src/component/changeRequest/ChangeRequestSidebar/ChangeRequestSidebar.tsx

@@ -47,8 +47,7 @@ export const StyledSuccessIcon = styled(CheckCircle)(({ theme }) => ({
     marginRight: theme.spacing(1),
 }));
 
-export const StyledFlexAlignCenterBox = styled(Box)(({ theme }) => ({
-    paddingTop: theme.spacing(3),
+export const StyledFlexAlignCenterBox = styled(Box)(() => ({
     marginLeft: 'auto',
     display: 'flex',
     alignItems: 'center',
@@ -143,7 +142,7 @@ export const ChangeRequestSidebar: VFC<IChangeRequestSidebarProps> = ({
         >
             <StyledPageContent
                 disableBorder={true}
-                header={<ReviewChangesHeader onClose={onClose} />}
+                header={<ReviewChangesHeader />}
             >
                 {data?.map(environmentChangeRequest => (
                     <EnvironmentChangeRequest

frontend/src/component/changeRequest/ChangeRequestSidebar/EnvironmentChangeRequest/EnvironmentChangeRequest.tsx

@@ -17,7 +17,7 @@ const SubmitChangeRequestButton: FC<{ onClick: () => void; count: number }> = ({
     onClick,
     count,
 }) => (
-    <Button sx={{ mt: 2, ml: 'auto' }} variant="contained" onClick={onClick}>
+    <Button sx={{ ml: 'auto' }} variant="contained" onClick={onClick}>
         Submit change request ({count})
     </Button>
 );
@@ -74,7 +74,7 @@ export const EnvironmentChangeRequest: FC<{
                 You request changes for these feature toggles:
             </Typography>
             {children}
-            <Box sx={{ display: 'flex' }}>
+            <Box sx={{ display: 'flex', mt: 3 }}>
                 <ConditionallyRender
                     condition={environmentChangeRequest?.state === 'Draft'}
                     show={
@@ -87,7 +87,7 @@ export const EnvironmentChangeRequest: FC<{
                             />
 
                             <Button
-                                sx={{ mt: 2, ml: 2 }}
+                                sx={{ ml: 2 }}
                                 variant="outlined"
                                 onClick={() =>
                                     onDiscard(environmentChangeRequest.id)

frontend/src/component/changeRequest/ChangeRequestSidebar/ReviewChangesHeader/ReviewChangesHeader.tsx

@@ -1,8 +1,7 @@
-import { Box, IconButton, styled, Tooltip } from '@mui/material';
+import { Box, styled, Tooltip } from '@mui/material';
 import { HelpOutline } from '@mui/icons-material';
 import { FC } from 'react';
 import { PageHeader } from '../../../common/PageHeader/PageHeader';
-import CloseIcon from '@mui/icons-material/Close';
 
 const StyledHelpOutline = styled(HelpOutline)(({ theme }) => ({
     fontSize: theme.fontSizes.mainHeader,
@@ -15,15 +14,9 @@ const StyledHeaderHint = styled('div')(({ theme }) => ({
     fontSize: theme.fontSizes.smallBody,
 }));
 
-export const ReviewChangesHeader: FC<{ onClose: () => void }> = ({
-    onClose,
-}) => (
+export const ReviewChangesHeader: FC = () => (
     <PageHeader
-        actions={
-            <IconButton onClick={onClose}>
-                <CloseIcon />
-            </IconButton>
-        }
+        actions={''}
         titleElement={
             <>
                 <Box
@@ -34,7 +27,7 @@ export const ReviewChangesHeader: FC<{ onClose: () => void }> = ({
                 >
                     Review your changes
                     <Tooltip
-                        title="Here you can see all the changes that you are suggesting and you can send them for review. You can still discard the changes after you sent them for review or even cancel the entire review if you need it."
+                        title="Here you can see all the changes that you are suggesting and you can send them for review. You can still discard the changes after you sent them for review or even cancel the entire review if you need it"
                         arrow
                     >
                         <StyledHelpOutline />

frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestTitleCell/ChangeRequestTitleCell.tsx

@@ -43,6 +43,9 @@ export const ChangeRequestTitleCell = ({
                         sx={theme => ({
                             paddingTop: theme.spacing(0.2),
                             marginRight: theme.spacing(1),
+                            '&:hover': {
+                                textDecoration: 'underline',
+                            },
                         })}
                     >
                         Change request
@@ -50,16 +53,10 @@ export const ChangeRequestTitleCell = ({
                     {`#${id}`}
                 </Typography>
             </StyledLink>
-            <StyledLink>
-                <Link
-                    component={RouterLink}
-                    underline={'hover'}
-                    to={path}
-                >{`${changes?.length}`}</Link>
-                <span style={{ margin: 'auto 8px' }}>
-                    {changes.length < 1 ? `update` : 'updates'}
-                </span>
-            </StyledLink>
+            <span>
+                {`${changes?.length}`}{' '}
+                {changes.length <= 1 ? `update` : 'updates'}
+            </span>
         </TextCell>
     );
 };

frontend/src/component/common/SidebarModal/SidebarModal.tsx

@@ -1,5 +1,6 @@
 import { FC } from 'react';
-import { Modal, Backdrop, styled } from '@mui/material';
+import { Modal, Backdrop, styled, IconButton, Tooltip } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
 import Fade from '@mui/material/Fade';
 import { SIDEBAR_MODAL_ID } from 'utils/testIds';
 import * as React from 'react';
@@ -64,7 +65,21 @@ export const SidebarModal: FC<ISidebarModalProps> = props => {
 export const DynamicSidebarModal: FC<ISidebarModalProps> = props => {
     return (
         <BaseModal {...props}>
-            <ModalContentWrapper>{props.children}</ModalContentWrapper>
+            <ModalContentWrapper>
+                <Tooltip title="Close" arrow describeChild>
+                    <IconButton
+                        sx={theme => ({
+                            position: 'absolute',
+                            top: theme.spacing(3),
+                            right: theme.spacing(3),
+                        })}
+                        onClick={props.onClose}
+                    >
+                        <CloseIcon />
+                    </IconButton>
+                </Tooltip>
+                {props.children}
+            </ModalContentWrapper>
         </BaseModal>
     );
 };