Refactor App.styles (#2822)

Signed-off-by: andreas-unleash <andreas@getunleash.ai>
Refactor App.styles.ts to styled components
<!-- Thanks for creating a PR! To make it easier for reviewers and
everyone else to understand what your changes relate to, please add some
relevant content to the headings below. Feel free to ignore or delete
sections that you don't think are relevant. Thank you! ❤️ -->

## About the changes
<!-- Describe the changes introduced. What are they and why are they
being introduced? Feel free to also add screenshots or steps to view the
changes if they're visual. -->

<!-- Does it close an issue? Multiple? -->
Closes #

<!-- (For internal contributors): Does it relate to an issue on public
roadmap? -->
<!--
Relates to [roadmap](https://github.com/orgs/Unleash/projects/10) item:
#
-->

### Important files
<!-- PRs can contain a lot of changes, but not all changes are equally
important. Where should a reviewer start looking to get an overview of
the changes? Are any files particularly important? -->


## Discussion points
<!-- Anything about the PR you'd like to discuss before it gets merged?
Got any questions or doubts? -->

Signed-off-by: andreas-unleash <andreas@getunleash.ai>

frontend/src/component/App.styles.ts

@@ -1,82 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()(theme => ({
-    container: {
-        '& ul': {
-            margin: 0,
-        },
-    },
-    primaryBreadcrumb: {
-        color: 'white',
-    },
-    headerTitleLink: {
-        color: 'white',
-        textDecoration: 'none',
-    },
-    contentWrapper: {
-        margin: '0 auto',
-        flex: 1,
-        width: '100%',
-        backgroundColor: theme.palette.contentWrapper,
-        position: 'relative',
-    },
-    content: {
-        width: '1250px',
-        marginLeft: 'auto',
-        marginRight: 'auto',
-        [theme.breakpoints.down('lg')]: {
-            width: '1024px',
-        },
-        [theme.breakpoints.down(1024)]: {
-            width: '100%',
-            marginLeft: 0,
-            marginRight: 0,
-        },
-        [theme.breakpoints.down('sm')]: {
-            minWidth: '100%',
-        },
-    },
-    contentContainer: {
-        padding: '2rem 0',
-        height: '100%',
-    },
-    drawerTitle: {
-        lineHeight: '1 !important',
-        paddingTop: '16px',
-        paddingBottom: '16px',
-        paddingLeft: '24px !important',
-        [theme.breakpoints.down(1024)]: {
-            paddingTop: '12px',
-            paddingBottom: '12px',
-            paddingLeft: '16px !important',
-        },
-    },
-    drawerTitleLogo: {
-        paddingRight: '16px',
-    },
-    drawerTitleText: {
-        display: 'inline-block',
-        verticalAlign: 'middle',
-        fontSize: theme.fontSizes.smallerBody,
-    },
-    navigation: {
-        padding: '8px 5px 8px 0 !important',
-    },
-    navigationLink: {
-        padding: '12px 20px !important',
-        borderRadius: '0 50px 50px 0',
-        textDecoration: 'none',
-        [theme.breakpoints.down(1024)]: {
-            padding: '12px 16px !important',
-        },
-    },
-    navigationIcon: {
-        marginRight: '16px',
-    },
-    iconGitHub: {
-        width: '24px',
-        height: '24px',
-        background:
-            'url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJ3aWR0aDoyNHB4O2hlaWdodDoyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiPgogICAgPHBhdGggZmlsbD0iIzc1NzU3NSIgZD0iTTEyLDJBMTAsMTAgMCAwLDAgMiwxMkMyLDE2LjQyIDQuODcsMjAuMTcgOC44NCwyMS41QzkuMzQsMjEuNTggOS41LDIxLjI3IDkuNSwyMUM5LjUsMjAuNzcgOS41LDIwLjE0IDkuNSwxOS4zMUM2LjczLDE5LjkxIDYuMTQsMTcuOTcgNi4xNCwxNy45N0M1LjY4LDE2LjgxIDUuMDMsMTYuNSA1LjAzLDE2LjVDNC4xMiwxNS44OCA1LjEsMTUuOSA1LjEsMTUuOUM2LjEsMTUuOTcgNi42MywxNi45MyA2LjYzLDE2LjkzQzcuNSwxOC40NSA4Ljk3LDE4IDkuNTQsMTcuNzZDOS42MywxNy4xMSA5Ljg5LDE2LjY3IDEwLjE3LDE2LjQyQzcuOTUsMTYuMTcgNS42MiwxNS4zMSA1LjYyLDExLjVDNS42MiwxMC4zOSA2LDkuNSA2LjY1LDguNzlDNi41NSw4LjU0IDYuMiw3LjUgNi43NSw2LjE1QzYuNzUsNi4xNSA3LjU5LDUuODggOS41LDcuMTdDMTAuMjksNi45NSAxMS4xNSw2Ljg0IDEyLDYuODRDMTIuODUsNi44NCAxMy43MSw2Ljk1IDE0LjUsNy4xN0MxNi40MSw1Ljg4IDE3LjI1LDYuMTUgMTcuMjUsNi4xNUMxNy44LDcuNSAxNy40NSw4LjU0IDE3LjM1LDguNzlDMTgsOS41IDE4LjM4LDEwLjM5IDE4LjM4LDExLjVDMTguMzgsMTUuMzIgMTYuMDQsMTYuMTYgMTMuODEsMTYuNDFDMTQuMTcsMTYuNzIgMTQuNSwxNy4zMyAxNC41LDE4LjI2QzE0LjUsMTkuNiAxNC41LDIwLjY4IDE0LjUsMjFDMTQuNSwyMS4yNyAxNC42NiwyMS41OSAxNS4xNywyMS41QzE5LjE0LDIwLjE2IDIyLDE2LjQyIDIyLDEyQTEwLDEwIDAgMCwwIDEyLDJaIiAvPgo8L3N2Zz4=)',
-    },
-}));

frontend/src/component/App.tsx

@@ -15,11 +15,11 @@ import { routes } from 'component/menu/routes';
 import { useAuthDetails } from 'hooks/api/getters/useAuth/useAuthDetails';
 import { useAuthUser } from 'hooks/api/getters/useAuth/useAuthUser';
 import { SplashPageRedirect } from 'component/splash/SplashPageRedirect/SplashPageRedirect';
-import { useStyles } from './App.styles';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import useProjects from '../hooks/api/getters/useProjects/useProjects';
 import { useLastViewedProject } from '../hooks/useLastViewedProject';
 import MaintenanceBanner from './maintenance/MaintenanceBanner';
+import { styled } from '@mui/material';
 
 const InitialRedirect = () => {
     const { lastViewed } = useLastViewedProject();
@@ -52,12 +52,17 @@ const InitialRedirect = () => {
     return <Navigate to={redirectTo} />;
 };
 
+const StyledContainer = styled('div')(() => ({
+    '& ul': {
+        margin: 0,
+    },
+}));
+
 export const App = () => {
     const { authDetails } = useAuthDetails();
     const { user } = useAuthUser();
     const hasFetchedAuth = Boolean(authDetails || user);
 
-    const { classes: styles } = useStyles();
     const { isOss, uiConfig } = useUiConfig();
 
     const availableRoutes = isOss()
@@ -83,7 +88,7 @@ export const App = () => {
                                         }
                                         show={<MaintenanceBanner />}
                                     />
-                                    <div className={styles.container}>
+                                    <StyledContainer>
                                         <ToastRenderer />
                                         <Routes>
                                             {availableRoutes.map(route => (
@@ -115,7 +120,7 @@ export const App = () => {
                                         </Routes>
                                         <FeedbackNPS openUrl="http://feedback.unleash.run" />
                                         <SplashPageRedirect />
-                                    </div>
+                                    </StyledContainer>
                                 </>
                             }
                         />

frontend/src/component/layout/MainLayout/DraftBanner/DraftBanner.tsx

@@ -1,6 +1,5 @@
 import { FC, useState, VFC } from 'react';
 import { Box, Button, styled, Typography } from '@mui/material';
-import { useStyles as useAppStyles } from 'component/App.styles';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { ChangeRequestSidebar } from 'component/changeRequest/ChangeRequestSidebar/ChangeRequestSidebar';
 import { usePendingChangeRequests } from 'hooks/api/getters/usePendingChangeRequests/usePendingChangeRequests';
@@ -21,14 +20,29 @@ const DraftBannerContentWrapper = styled(Box)(({ theme }) => ({
     color: theme.palette.warning.main,
 }));
 
+const StyledBox = styled(Box)(({ theme }) => ({
+    width: '1250px',
+    marginLeft: 'auto',
+    marginRight: 'auto',
+    [theme.breakpoints.down('lg')]: {
+        width: '1024px',
+    },
+    [theme.breakpoints.down(1024)]: {
+        width: '100%',
+        marginLeft: 0,
+        marginRight: 0,
+    },
+    [theme.breakpoints.down('sm')]: {
+        minWidth: '100%',
+    },
+}));
+
 const DraftBannerContent: FC<{
     changeRequest: IChangeRequest;
     onClick: () => void;
 }> = ({ changeRequest, onClick }) => {
-    const { classes } = useAppStyles();
-
     return (
-        <Box className={classes.content}>
+        <StyledBox>
             <DraftBannerContentWrapper>
                 <Typography variant="body2" sx={{ mr: 4 }}>
                     <strong>Change request mode</strong> – You have changes{' '}
@@ -63,7 +77,7 @@ const DraftBannerContent: FC<{
                     View changes ({changesCount(changeRequest)})
                 </Button>
             </DraftBannerContentWrapper>
-        </Box>
+        </StyledBox>
     );
 };
 

frontend/src/component/layout/MainLayout/MainLayout.tsx

@@ -1,8 +1,5 @@
 import React, { forwardRef, ReactNode } from 'react';
-import classnames from 'classnames';
+import { Grid, styled } from '@mui/material';
-import { makeStyles } from 'tss-react/mui';
-import { Grid } from '@mui/material';
-import { useStyles as useAppStyles } from 'component/App.styles';
 import Header from 'component/menu/Header/Header';
 import Footer from 'component/menu/Footer/Footer';
 import Proclamation from 'component/common/Proclamation/Proclamation';
@@ -17,29 +14,63 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit
 import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
 import { DraftBanner } from './DraftBanner/DraftBanner';
 
-const useStyles = makeStyles()(theme => ({
-    container: {
-        height: '100%',
-        justifyContent: 'space-between',
-    },
-    contentContainer: {
-        height: '100%',
-        padding: '3.25rem 0',
-        position: 'relative',
-        [theme.breakpoints.down('md')]: {
-            padding: '3.25rem 0.75rem',
-        },
-    },
-}));
-
 interface IMainLayoutProps {
     children: ReactNode;
 }
 
+const MainLayoutContainer = styled(Grid)(() => ({
+    height: '100%',
+    justifyContent: 'space-between',
+}));
+
+const MainLayoutContentWrapper = styled('main')(({ theme }) => ({
+    margin: theme.spacing(0, 'auto'),
+    flex: 1,
+    width: '100%',
+    backgroundColor: theme.palette.contentWrapper,
+    position: 'relative',
+}));
+
+const MainLayoutContent = styled(Grid)(({ theme }) => ({
+    width: '1250px',
+    marginLeft: 'auto',
+    marginRight: 'auto',
+    [theme.breakpoints.down('lg')]: {
+        width: '1024px',
+    },
+    [theme.breakpoints.down(1024)]: {
+        width: '100%',
+        marginLeft: 0,
+        marginRight: 0,
+    },
+    [theme.breakpoints.down('sm')]: {
+        minWidth: '100%',
+    },
+}));
+
+const StyledImg = styled('img')(() => ({
+    display: 'block',
+    position: 'fixed',
+    zIndex: 0,
+    bottom: 0,
+    right: 0,
+    width: 400,
+    pointerEvents: 'none',
+    userSelect: 'none',
+}));
+
+const MainLayoutContentContainer = styled('div')(({ theme }) => ({
+    height: '100%',
+    padding: theme.spacing(6.5, 0),
+    position: 'relative',
+    [theme.breakpoints.down('md')]: {
+        padding: theme.spacing(6.5, 1.5),
+    },
+    zIndex: 200,
+}));
+
 export const MainLayout = forwardRef<HTMLDivElement, IMainLayoutProps>(
     ({ children }, ref) => {
-        const { classes } = useStyles();
-        const { classes: styles } = useAppStyles();
         const { uiConfig } = useUiConfig();
         const projectId = useOptionalPathParam('projectId');
         const { isChangeRequestConfiguredInAnyEnv } = useChangeRequestsEnabled(
@@ -51,48 +82,25 @@ export const MainLayout = forwardRef<HTMLDivElement, IMainLayoutProps>(
                 <SkipNavLink />
                 <Header />
                 <SkipNavTarget />
-                <Grid container className={classes.container}>
+                <MainLayoutContainer>
-                    <main className={classnames(styles.contentWrapper)}>
+                    <MainLayoutContentWrapper>
                         <ConditionallyRender
                             condition={Boolean(
                                 projectId && isChangeRequestConfiguredInAnyEnv()
                             )}
                             show={<DraftBanner project={projectId || ''} />}
                         />
-                        <Grid
+                        <MainLayoutContent item xs={12} sm={12} my={2}>
-                            item
+                            <MainLayoutContentContainer ref={ref}>
-                            className={styles.content}
-                            xs={12}
-                            sm={12}
-                            my={2}
-                        >
-                            <div
-                                className={classes.contentContainer}
-                                style={{ zIndex: 200 }}
-                                ref={ref}
-                            >
                                 <BreadcrumbNav />
                                 <Proclamation toast={uiConfig.toast} />
                                 {children}
-                            </div>
+                            </MainLayoutContentContainer>
-                        </Grid>
+                        </MainLayoutContent>
-                        <img
+                        <StyledImg src={formatAssetPath(textureImage)} alt="" />
-                            src={formatAssetPath(textureImage)}
+                    </MainLayoutContentWrapper>
-                            alt=""
-                            style={{
-                                display: 'block',
-                                position: 'fixed',
-                                zIndex: 0,
-                                bottom: 0,
-                                right: 0,
-                                width: 400,
-                                pointerEvents: 'none',
-                                userSelect: 'none',
-                            }}
-                        />
-                    </main>
                     <Footer />
-                </Grid>
+                </MainLayoutContainer>
             </>
         );
     }