Feat/review page states (#2309)

* feat: review status draft

* feat: add review status styles

frontend/src/component/suggestChanges/SuggestedChangeOverview/SuggestedChangeOverview.tsx

@@ -9,6 +9,7 @@ import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
 import { useSuggestChangeApi } from 'hooks/api/actions/useSuggestChangeApi/useSuggestChangeApi';
 import useToast from 'hooks/useToast';
 import { formatUnknownError } from 'utils/formatUnknownError';
+import { SuggestedChangeReviewStatus } from './SuggestedChangeReviewStatus/SuggestedChangeReviewStatus';
 
 export const SuggestedChangeOverview: FC = () => {
     const projectId = useRequiredPathParam('projectId');
@@ -65,6 +66,7 @@ export const SuggestedChangeOverview: FC = () => {
                         })}
                     >
                         <SuggestedChangeset suggestedChange={suggestedChange} />
+                        <SuggestedChangeReviewStatus approved={true} />
                         <Button
                             variant="contained"
                             sx={{ marginTop: 2 }}

frontend/src/component/suggestChanges/SuggestedChangeOverview/SuggestedChangeReviewStatus/SuggestChangeReviewStatus.styles.ts

@@ -0,0 +1,73 @@
+import { styled } from '@mui/material';
+import { Cancel, CheckCircle } from '@mui/icons-material';
+import { Box, Typography, Divider } from '@mui/material';
+
+const styledComponentPropCheck = () => (prop: string) =>
+    prop !== 'color' && prop !== 'sx';
+
+export const StyledFlexAlignCenterBox = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+}));
+
+export const StyledErrorIcon = styled(Cancel)(({ theme }) => ({
+    color: theme.palette.error.main,
+    height: '35px',
+    width: '35px',
+    marginRight: theme.spacing(1),
+}));
+
+export const StyledSuccessIcon = styled(CheckCircle)(({ theme }) => ({
+    color: theme.palette.success.main,
+    height: '35px',
+    width: '35px',
+    marginRight: theme.spacing(1),
+}));
+
+export const StyledOuterContainer = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    marginTop: theme.spacing(2),
+}));
+
+export const StyledButtonContainer = styled(Box, {
+    shouldForwardProp: styledComponentPropCheck(),
+})<{ approved: boolean }>(({ theme, approved }) => ({
+    borderRadius: `${theme.shape.borderRadiusMedium}px`,
+    backgroundColor: approved
+        ? theme.palette.success.main
+        : theme.palette.tableHeaderBackground,
+    padding: theme.spacing(1, 2),
+    marginRight: theme.spacing(2),
+    height: '45px',
+    width: '45px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    ['svg']: {
+        color: approved
+            ? theme.palette.tertiary.background
+            : theme.palette.neutral.main,
+    },
+}));
+
+export const StyledDivider = styled(Divider)(({ theme }) => ({
+    margin: theme.spacing(2.5, 0),
+}));
+
+export const StyledReviewStatusContainer = styled(Box, {
+    shouldForwardProp: styledComponentPropCheck(),
+})<{ approved: boolean }>(({ theme, approved }) => ({
+    borderRadius: `${theme.shape.borderRadiusLarge}px`,
+    border: approved
+        ? `2px solid ${theme.palette.success.main}`
+        : `1px solid ${theme.palette.tertiary.main}`,
+    padding: theme.spacing(3),
+    width: '100%',
+}));
+
+export const StyledReviewTitle = styled(Typography, {
+    shouldForwardProp: styledComponentPropCheck(),
+})<{ approved: boolean }>(({ theme, approved }) => ({
+    fontWeight: 'bold',
+    color: approved ? theme.palette.success.main : theme.palette.error.main,
+}));

frontend/src/component/suggestChanges/SuggestedChangeOverview/SuggestedChangeReviewStatus/SuggestedChangeReviewStatus.tsx

@@ -0,0 +1,100 @@
+import { FC } from 'react';
+import { Box, Typography } from '@mui/material';
+import { ReactComponent as ChangesAppliedIcon } from 'assets/icons/merge.svg';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+import {
+    StyledOuterContainer,
+    StyledButtonContainer,
+    StyledReviewStatusContainer,
+    StyledFlexAlignCenterBox,
+    StyledSuccessIcon,
+    StyledErrorIcon,
+    StyledReviewTitle,
+    StyledDivider,
+} from './SuggestChangeReviewStatus.styles';
+
+interface ISuggestChangeReviewsStatusProps {
+    approved: boolean;
+}
+
+export const SuggestedChangeReviewStatus: FC<
+    ISuggestChangeReviewsStatusProps
+> = ({ approved }) => {
+    return (
+        <StyledOuterContainer>
+            <StyledButtonContainer approved={approved}>
+                <ChangesAppliedIcon
+                    style={{
+                        transform: `scale(1.5)`,
+                    }}
+                />
+            </StyledButtonContainer>
+            <StyledReviewStatusContainer approved={approved}>
+                <StyledFlexAlignCenterBox>
+                    <ConditionallyRender
+                        condition={approved}
+                        show={<Approved approved={approved} />}
+                        elseShow={<ReviewRequired approved={approved} />}
+                    />
+                </StyledFlexAlignCenterBox>
+            </StyledReviewStatusContainer>
+        </StyledOuterContainer>
+    );
+};
+
+const Approved = ({ approved }: ISuggestChangeReviewsStatusProps) => {
+    return (
+        <>
+            <StyledFlexAlignCenterBox>
+                <StyledSuccessIcon />
+                <Box>
+                    <StyledReviewTitle approved={approved}>
+                        Changed approved
+                    </StyledReviewTitle>
+                    <Typography>
+                        One approving review from requested approvers
+                    </Typography>
+                </Box>
+            </StyledFlexAlignCenterBox>
+
+            <StyledDivider />
+
+            <StyledFlexAlignCenterBox>
+                <StyledSuccessIcon />
+                <Box>
+                    <StyledReviewTitle approved={approved}>
+                        Changes are ready to be applied
+                    </StyledReviewTitle>
+                </Box>
+            </StyledFlexAlignCenterBox>
+        </>
+    );
+};
+
+const ReviewRequired = ({ approved }: ISuggestChangeReviewsStatusProps) => {
+    return (
+        <>
+            <StyledFlexAlignCenterBox>
+                <StyledErrorIcon />
+                <Box>
+                    <StyledReviewTitle approved={approved}>
+                        Review required
+                    </StyledReviewTitle>
+                    <Typography>
+                        At least 1 approving review must be submitted before
+                        changes can be applied
+                    </Typography>
+                </Box>
+            </StyledFlexAlignCenterBox>
+
+            <StyledDivider />
+
+            <StyledFlexAlignCenterBox>
+                <StyledErrorIcon />
+                <StyledReviewTitle approved={approved}>
+                    Apply changes is blocked
+                </StyledReviewTitle>
+            </StyledFlexAlignCenterBox>
+        </>
+    );
+};