From cf3987ed2dd809fc49fc6e358e26e0775dc40415 Mon Sep 17 00:00:00 2001 From: andreas-unleash Date: Wed, 11 Jan 2023 10:52:53 +0200 Subject: [PATCH] Refactor App.styles (#2822) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: andreas-unleash Refactor App.styles.ts to styled components ## About the changes Closes # ### Important files ## Discussion points Signed-off-by: andreas-unleash --- frontend/src/component/App.styles.ts | 82 ------------- frontend/src/component/App.tsx | 13 +- .../MainLayout/DraftBanner/DraftBanner.tsx | 24 +++- .../layout/MainLayout/MainLayout.tsx | 114 ++++++++++-------- 4 files changed, 89 insertions(+), 144 deletions(-) delete mode 100644 frontend/src/component/App.styles.ts diff --git a/frontend/src/component/App.styles.ts b/frontend/src/component/App.styles.ts deleted file mode 100644 index f0bb1ed7b3..0000000000 --- a/frontend/src/component/App.styles.ts +++ /dev/null @@ -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=)', - }, -})); diff --git a/frontend/src/component/App.tsx b/frontend/src/component/App.tsx index 981d998922..83616a84a2 100644 --- a/frontend/src/component/App.tsx +++ b/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 ; }; +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={} /> -
+ {availableRoutes.map(route => ( @@ -115,7 +120,7 @@ export const App = () => { -
+ } /> diff --git a/frontend/src/component/layout/MainLayout/DraftBanner/DraftBanner.tsx b/frontend/src/component/layout/MainLayout/DraftBanner/DraftBanner.tsx index 47cc420600..13b41bc56b 100644 --- a/frontend/src/component/layout/MainLayout/DraftBanner/DraftBanner.tsx +++ b/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 ( - + Change request mode – You have changes{' '} @@ -63,7 +77,7 @@ const DraftBannerContent: FC<{ View changes ({changesCount(changeRequest)}) - + ); }; diff --git a/frontend/src/component/layout/MainLayout/MainLayout.tsx b/frontend/src/component/layout/MainLayout/MainLayout.tsx index e4dc99b732..de0f6c4a7c 100644 --- a/frontend/src/component/layout/MainLayout/MainLayout.tsx +++ b/frontend/src/component/layout/MainLayout/MainLayout.tsx @@ -1,8 +1,5 @@ import React, { forwardRef, ReactNode } from 'react'; -import classnames from 'classnames'; -import { makeStyles } from 'tss-react/mui'; -import { Grid } from '@mui/material'; -import { useStyles as useAppStyles } from 'component/App.styles'; +import { Grid, styled } from '@mui/material'; 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( ({ 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(
- -
+ + } /> - -
+ + {children} -
- - -
+ + + +