From dc468430ce8128fde8fb4affa6452b2d405826af Mon Sep 17 00:00:00 2001 From: sjaanus Date: Thu, 5 Jan 2023 16:23:40 +0200 Subject: [PATCH] Refactor makestyles 2 2 (#2827) --- .../FeatureStatusChip.styles.ts | 9 - .../FeatureStatusChip/FeatureStatusChip.tsx | 14 +- .../FormTemplate/FormTemplate.styles.ts | 108 ---------- .../common/FormTemplate/FormTemplate.tsx | 185 ++++++++++++++---- .../common/Highlighter/Highlighter.styles.ts | 9 - .../common/Highlighter/Highlighter.tsx | 12 +- .../component/common/Input/Input.styles.ts | 4 - frontend/src/component/common/Input/Input.tsx | 11 +- .../component/common/Loader/Loader.styles.ts | 15 -- .../src/component/common/Loader/Loader.tsx | 23 ++- .../common/NoItems/NoItems.styles.ts | 35 ---- .../src/component/common/NoItems/NoItems.tsx | 50 ++++- .../common/NotFound/NotFound.styles.ts | 35 ---- .../component/common/NotFound/NotFound.tsx | 56 ++++-- .../common/PageContent/PageContent.styles.ts | 12 -- .../common/PageContent/PageContent.tsx | 27 ++- .../common/PageHeader/PageHeader.styles.ts | 31 --- .../common/PageHeader/PageHeader.tsx | 58 ++++-- .../common/PaginateUI/PaginateUI.tsx | 171 ---------------- .../common/PaginateUI/PaginationUI.styles.ts | 58 ------ .../Proclamation/Proclamation.styles.ts | 15 -- .../common/Proclamation/Proclamation.tsx | 35 ++-- .../__snapshots__/TagTypeList.test.tsx.snap | 16 +- frontend/src/themes/themeStyles.ts | 8 +- 24 files changed, 372 insertions(+), 625 deletions(-) delete mode 100644 frontend/src/component/common/FeatureStatusChip/FeatureStatusChip.styles.ts delete mode 100644 frontend/src/component/common/Highlighter/Highlighter.styles.ts delete mode 100644 frontend/src/component/common/Loader/Loader.styles.ts delete mode 100644 frontend/src/component/common/NoItems/NoItems.styles.ts delete mode 100644 frontend/src/component/common/NotFound/NotFound.styles.ts delete mode 100644 frontend/src/component/common/PageHeader/PageHeader.styles.ts delete mode 100644 frontend/src/component/common/PaginateUI/PaginateUI.tsx delete mode 100644 frontend/src/component/common/PaginateUI/PaginationUI.styles.ts delete mode 100644 frontend/src/component/common/Proclamation/Proclamation.styles.ts diff --git a/frontend/src/component/common/FeatureStatusChip/FeatureStatusChip.styles.ts b/frontend/src/component/common/FeatureStatusChip/FeatureStatusChip.styles.ts deleted file mode 100644 index d939efd67f..0000000000 --- a/frontend/src/component/common/FeatureStatusChip/FeatureStatusChip.styles.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { makeStyles } from 'tss-react/mui'; - -export const useStyles = makeStyles()(theme => ({ - chip: { - background: 'transparent', - border: `1px solid ${theme.palette.primary.main}`, - color: theme.palette.primary.main, - }, -})); diff --git a/frontend/src/component/common/FeatureStatusChip/FeatureStatusChip.tsx b/frontend/src/component/common/FeatureStatusChip/FeatureStatusChip.tsx index 1550efef6d..bc74f645d6 100644 --- a/frontend/src/component/common/FeatureStatusChip/FeatureStatusChip.tsx +++ b/frontend/src/component/common/FeatureStatusChip/FeatureStatusChip.tsx @@ -1,17 +1,20 @@ -import { Chip } from '@mui/material'; -import { useStyles } from './FeatureStatusChip.styles'; +import { Chip, styled } from '@mui/material'; interface IStatusChip { stale: boolean; showActive?: boolean; } +const StyledChip = styled(Chip)(({ theme }) => ({ + background: 'transparent', + border: `1px solid ${theme.palette.primary.main}`, + color: theme.palette.primary.main, +})); + export const FeatureStatusChip = ({ stale, showActive = true, }: IStatusChip) => { - const { classes: styles } = useStyles(); - if (!stale && !showActive) { return null; } @@ -23,10 +26,9 @@ export const FeatureStatusChip = ({ return (
- diff --git a/frontend/src/component/common/FormTemplate/FormTemplate.styles.ts b/frontend/src/component/common/FormTemplate/FormTemplate.styles.ts index 97a666fc87..1f6391e7f4 100644 --- a/frontend/src/component/common/FormTemplate/FormTemplate.styles.ts +++ b/frontend/src/component/common/FormTemplate/FormTemplate.styles.ts @@ -1,109 +1 @@ -import { makeStyles } from 'tss-react/mui'; - export const formTemplateSidebarWidth = '27.5rem'; - -export const useStyles = makeStyles()(theme => ({ - container: { - minHeight: '80vh', - width: '100%', - display: 'flex', - margin: '0 auto', - borderRadius: '1rem', - overflow: 'hidden', - [theme.breakpoints.down(1100)]: { - flexDirection: 'column', - minHeight: 0, - }, - }, - modal: { - minHeight: '100vh', - borderRadius: 0, - }, - sidebar: { - backgroundColor: theme.palette.formSidebar, - padding: '2rem', - flexGrow: 0, - flexShrink: 0, - width: formTemplateSidebarWidth, - [theme.breakpoints.down(1100)]: { - width: '100%', - color: 'red', - }, - [theme.breakpoints.down(500)]: { - padding: '2rem 1rem', - }, - }, - sidebarDivider: { - opacity: 0.3, - marginBottom: '8px', - }, - title: { - marginBottom: theme.fontSizes.mainHeader, - fontWeight: 'normal', - }, - subtitle: { - color: theme.palette.formSidebarTextColor, - marginBottom: '1rem', - display: 'flex', - justifyContent: 'space-between', - alignItems: 'center', - fontWeight: theme.fontWeight.bold, - fontSize: theme.fontSizes.bodySize, - }, - description: { - color: theme.palette.formSidebarTextColor, - zIndex: 1, - position: 'relative', - }, - linkContainer: { - margin: '1.5rem 0', - display: 'flex', - alignItems: 'center', - }, - linkIcon: { - marginRight: '0.5rem', - color: '#fff', - }, - documentationLink: { - color: '#fff', - display: 'block', - '&:hover': { - textDecoration: 'none', - }, - }, - formContent: { - backgroundColor: theme.palette.formBackground, - display: 'flex', - flexDirection: 'column', - padding: '3rem', - flexGrow: 1, - [theme.breakpoints.down(1200)]: { - padding: '2rem', - }, - [theme.breakpoints.down(1100)]: { - width: '100%', - }, - [theme.breakpoints.down(500)]: { - padding: '2rem 1rem', - }, - }, - icon: { fill: '#fff' }, - mobileGuidanceBgContainer: { - zIndex: 1, - position: 'absolute', - right: -3, - top: -3, - }, - mobileGuidanceBackground: { - width: '75px', - height: '75px', - }, - mobileGuidanceButton: { - position: 'absolute', - zIndex: 400, - right: 0, - }, - infoIcon: { - fill: '#fff', - }, -})); diff --git a/frontend/src/component/common/FormTemplate/FormTemplate.tsx b/frontend/src/component/common/FormTemplate/FormTemplate.tsx index c20cf92be4..1235b1c354 100644 --- a/frontend/src/component/common/FormTemplate/FormTemplate.tsx +++ b/frontend/src/component/common/FormTemplate/FormTemplate.tsx @@ -1,4 +1,3 @@ -import { useStyles } from './FormTemplate.styles'; import MenuBookIcon from '@mui/icons-material/MenuBook'; import Codebox from '../Codebox/Codebox'; import { @@ -7,6 +6,7 @@ import { useMediaQuery, Tooltip, Divider, + styled, } from '@mui/material'; import { FileCopy, Info } from '@mui/icons-material'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; @@ -14,9 +14,9 @@ import Loader from '../Loader/Loader'; import copy from 'copy-to-clipboard'; import useToast from 'hooks/useToast'; import React, { useState } from 'react'; -import classNames from 'classnames'; import { ReactComponent as MobileGuidanceBG } from 'assets/img/mobileGuidanceBg.svg'; -import { useThemeStyles } from 'themes/themeStyles'; +import { formTemplateSidebarWidth } from './FormTemplate.styles'; +import { relative } from 'themes/themeStyles'; interface ICreateProps { title: string; @@ -28,6 +28,126 @@ interface ICreateProps { formatApiCode: () => string; } +const StyledContainer = styled('section', { + shouldForwardProp: prop => prop !== 'modal', +})<{ modal?: boolean }>(({ theme, modal }) => ({ + minHeight: modal ? '100vh' : '80vh', + borderRadius: modal ? 0 : theme.spacing(2), + width: '100%', + display: 'flex', + margin: '0 auto', + overflow: 'hidden', + [theme.breakpoints.down(1100)]: { + flexDirection: 'column', + minHeight: 0, + }, +})); + +const StyledRelativeDiv = styled('div')(({ theme }) => relative); + +const StyledFormContent = styled('div')(({ theme }) => ({ + backgroundColor: theme.palette.formBackground, + display: 'flex', + flexDirection: 'column', + padding: theme.spacing(6), + flexGrow: 1, + [theme.breakpoints.down('lg')]: { + padding: theme.spacing(4), + }, + [theme.breakpoints.down(1100)]: { + width: '100%', + }, + [theme.breakpoints.down(500)]: { + padding: theme.spacing(4, 2), + }, +})); + +const StyledTitle = styled('h1')(({ theme }) => ({ + marginBottom: theme.fontSizes.mainHeader, + fontWeight: 'normal', +})); + +const StyledSidebarDivider = styled(Divider)(({ theme }) => ({ + opacity: 0.3, + marginBottom: theme.spacing(0.5), +})); + +const StyledSubtitle = styled('h2')(({ theme }) => ({ + color: theme.palette.formSidebarTextColor, + marginBottom: theme.spacing(2), + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', + fontWeight: theme.fontWeight.bold, + fontSize: theme.fontSizes.bodySize, +})); + +const StyledIcon = styled(FileCopy)(({ theme }) => ({ + fill: theme.palette.text.tertiaryContrast, +})); + +const StyledMobileGuidanceContainer = styled('div')(() => ({ + zIndex: 1, + position: 'absolute', + right: -3, + top: -3, +})); + +const StyledMobileGuidanceBackground = styled(MobileGuidanceBG)(() => ({ + width: '75px', + height: '75px', +})); + +const StyledMobileGuidanceButton = styled(IconButton)(() => ({ + position: 'absolute', + zIndex: 400, + right: 0, +})); + +const StyledInfoIcon = styled(Info)(({ theme }) => ({ + fill: theme.palette.text.tertiaryContrast, +})); + +const StyledSidebar = styled('aside')(({ theme }) => ({ + backgroundColor: theme.palette.formSidebar, + padding: theme.spacing(4), + flexGrow: 0, + flexShrink: 0, + width: formTemplateSidebarWidth, + [theme.breakpoints.down(1100)]: { + width: '100%', + color: 'red', + }, + [theme.breakpoints.down(500)]: { + padding: theme.spacing(4, 2), + }, +})); + +const StyledDescription = styled('p')(({ theme }) => ({ + color: theme.palette.formSidebarTextColor, + zIndex: 1, + position: 'relative', +})); + +const StyledLinkContainer = styled('div')(({ theme }) => ({ + margin: theme.spacing(3, 0), + display: 'flex', + alignItems: 'center', +})); + +const StyledLinkIcon = styled(MenuBookIcon)(({ theme }) => ({ + marginRight: theme.spacing(1), + color: theme.palette.text.tertiaryContrast, +})); + +const StyledDocumentationLink = styled('a')(({ theme }) => ({ + color: theme.palette.text.tertiaryContrast, + display: 'block', + '&:hover': { + textDecoration: 'none', + }, +})); + const FormTemplate: React.FC = ({ title, description, @@ -39,8 +159,6 @@ const FormTemplate: React.FC = ({ formatApiCode, }) => { const { setToastData } = useToast(); - const { classes: styles } = useStyles(); - const { classes: themeStyles } = useThemeStyles(); const smallScreen = useMediaQuery(`(max-width:${1099}px)`); const copyCommand = () => { @@ -64,33 +182,31 @@ const FormTemplate: React.FC = ({ }; return ( -
+ + -
+ } /> -
+ } elseShow={ <> -

{title}

+ {title} {children} } />{' '} -
+ = ({ documentationLink={documentationLink} documentationLinkLabel={documentationLinkLabel} > - -

+ + API Command{' '} - + -

+ } /> - + ); }; @@ -128,21 +244,19 @@ const MobileGuidance = ({ documentationLinkLabel, }: IMobileGuidance) => { const [open, setOpen] = useState(false); - const { classes: styles } = useStyles(); return ( <> -
- -
+ + + - setOpen(prev => !prev)} size="large" > - - + + = ({ documentationLink, documentationLinkLabel = 'Learn more', }) => { - const { classes: styles } = useStyles(); - return ( - + ); }; diff --git a/frontend/src/component/common/Highlighter/Highlighter.styles.ts b/frontend/src/component/common/Highlighter/Highlighter.styles.ts deleted file mode 100644 index 970aa4835f..0000000000 --- a/frontend/src/component/common/Highlighter/Highlighter.styles.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { makeStyles } from 'tss-react/mui'; - -export const useStyles = makeStyles()(theme => ({ - highlighter: { - '&>mark': { - backgroundColor: theme.palette.highlight, - }, - }, -})); diff --git a/frontend/src/component/common/Highlighter/Highlighter.tsx b/frontend/src/component/common/Highlighter/Highlighter.tsx index c08582df0d..4be6477439 100644 --- a/frontend/src/component/common/Highlighter/Highlighter.tsx +++ b/frontend/src/component/common/Highlighter/Highlighter.tsx @@ -1,6 +1,6 @@ import { VFC } from 'react'; -import { useStyles } from './Highlighter.styles'; import { safeRegExp } from '@server/util/escape-regex'; +import { styled } from '@mui/material'; interface IHighlighterProps { search?: string; @@ -8,12 +8,17 @@ interface IHighlighterProps { caseSensitive?: boolean; } +export const StyledSpan = styled('span')(({ theme }) => ({ + '&>mark': { + backgroundColor: theme.palette.highlight, + }, +})); + export const Highlighter: VFC = ({ search, children, caseSensitive, }) => { - const { classes } = useStyles(); if (!children) { return null; } @@ -25,8 +30,7 @@ export const Highlighter: VFC = ({ const regex = safeRegExp(search, caseSensitive ? 'g' : 'gi'); return ( - $&') || '', }} diff --git a/frontend/src/component/common/Input/Input.styles.ts b/frontend/src/component/common/Input/Input.styles.ts index ac93565a64..a5cd6824e1 100644 --- a/frontend/src/component/common/Input/Input.styles.ts +++ b/frontend/src/component/common/Input/Input.styles.ts @@ -5,8 +5,4 @@ export const useStyles = makeStyles()(theme => ({ position: 'absolute', bottom: '-1rem', }, - inputContainer: { - width: '100%', - position: 'relative', - }, })); diff --git a/frontend/src/component/common/Input/Input.tsx b/frontend/src/component/common/Input/Input.tsx index 5bc94add91..d05ce5b1d6 100644 --- a/frontend/src/component/common/Input/Input.tsx +++ b/frontend/src/component/common/Input/Input.tsx @@ -1,6 +1,6 @@ import { INPUT_ERROR_TEXT } from 'utils/testIds'; +import { TextField, OutlinedTextFieldProps, styled } from '@mui/material'; import { useStyles } from './Input.styles'; -import { TextField, OutlinedTextFieldProps } from '@mui/material'; interface IInputProps extends Omit { label: string; @@ -16,6 +16,11 @@ interface IInputProps extends Omit { rows?: number; } +const StyledDiv = styled('div')(({ theme }) => ({ + width: '100%', + position: 'relative', +})); + const Input = ({ label, placeholder, @@ -29,7 +34,7 @@ const Input = ({ }: IInputProps) => { const { classes: styles } = useStyles(); return ( -
+ -
+ ); }; diff --git a/frontend/src/component/common/Loader/Loader.styles.ts b/frontend/src/component/common/Loader/Loader.styles.ts deleted file mode 100644 index 2291beb722..0000000000 --- a/frontend/src/component/common/Loader/Loader.styles.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { makeStyles } from 'tss-react/mui'; - -export const useStyles = makeStyles()(theme => ({ - loader: { - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - minHeight: '100vh', - backgroundColor: theme.palette.background.paper, - }, - img: { - width: '100px', - height: '100px', - }, -})); diff --git a/frontend/src/component/common/Loader/Loader.tsx b/frontend/src/component/common/Loader/Loader.tsx index 73a8bf2d17..3ba19ea924 100644 --- a/frontend/src/component/common/Loader/Loader.tsx +++ b/frontend/src/component/common/Loader/Loader.tsx @@ -1,14 +1,25 @@ import logo from 'assets/img/unleashLogoIconDarkAlpha.gif'; import { formatAssetPath } from 'utils/formatPath'; -import { useStyles } from './Loader.styles'; +import { styled } from '@mui/material'; + +const StyledDiv = styled('div')(({ theme }) => ({ + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + minHeight: '100vh', + backgroundColor: theme.palette.background.paper, +})); + +const StyledImg = styled('img')(({ theme }) => ({ + width: '100px', + height: '100px', +})); const Loader = () => { - const { classes: styles } = useStyles(); - return ( -
- -
+ + + ); }; diff --git a/frontend/src/component/common/NoItems/NoItems.styles.ts b/frontend/src/component/common/NoItems/NoItems.styles.ts deleted file mode 100644 index bc041bf0cf..0000000000 --- a/frontend/src/component/common/NoItems/NoItems.styles.ts +++ /dev/null @@ -1,35 +0,0 @@ -import { makeStyles } from 'tss-react/mui'; - -export const useStyles = makeStyles()(theme => ({ - container: { - display: 'flex', - width: '80%', - margin: '0 auto', - [theme.breakpoints.down(700)]: { - flexDirection: 'column', - alignItems: 'center', - }, - }, - textContainer: { - width: '50%', - [theme.breakpoints.down(700)]: { - width: '100%', - }, - }, - iconContainer: { - width: '50%', - [theme.breakpoints.down(700)]: { - width: '100%', - }, - }, - icon: { - width: '300px', - height: '200px', - [theme.breakpoints.down(700)]: { - marginTop: '2rem', - }, - [theme.breakpoints.down(500)]: { - display: 'none', - }, - }, -})); diff --git a/frontend/src/component/common/NoItems/NoItems.tsx b/frontend/src/component/common/NoItems/NoItems.tsx index 77d547e3b5..60b3e18997 100644 --- a/frontend/src/component/common/NoItems/NoItems.tsx +++ b/frontend/src/component/common/NoItems/NoItems.tsx @@ -1,16 +1,50 @@ import { ReactComponent as NoItemsIcon } from 'assets/icons/addfiles.svg'; -import { useStyles } from './NoItems.styles'; import React from 'react'; +import { styled } from '@mui/material'; + +const StyledContainer = styled('div')(({ theme }) => ({ + display: 'flex', + width: '80%', + margin: '0 auto', + [theme.breakpoints.down(700)]: { + flexDirection: 'column', + alignItems: 'center', + }, +})); + +const StyledTextContainer = styled('div')(({ theme }) => ({ + width: '50%', + [theme.breakpoints.down(700)]: { + width: '100%', + }, +})); + +const StyledIconContainer = styled('div')(({ theme }) => ({ + width: '50%', + [theme.breakpoints.down(700)]: { + width: '100%', + }, +})); + +const StyledIcon = styled(NoItemsIcon)(({ theme }) => ({ + width: '300px', + height: '200px', + [theme.breakpoints.down(700)]: { + marginTop: theme.spacing(4), + }, + [theme.breakpoints.down(500)]: { + display: 'none', + }, +})); const NoItems: React.FC = ({ children }) => { - const { classes: styles } = useStyles(); return ( -
-
{children}
-
- -
-
+ + {children} + + + + ); }; diff --git a/frontend/src/component/common/NotFound/NotFound.styles.ts b/frontend/src/component/common/NotFound/NotFound.styles.ts deleted file mode 100644 index 2f6fa50efe..0000000000 --- a/frontend/src/component/common/NotFound/NotFound.styles.ts +++ /dev/null @@ -1,35 +0,0 @@ -import { makeStyles } from 'tss-react/mui'; - -export const useStyles = makeStyles()({ - container: { - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - minHeight: '100vh', - padding: '2rem', - position: 'fixed', - inset: 0, - backgroundColor: '#fff', - width: '100%', - }, - logo: { - height: '80px', - }, - content: { - display: 'flex', - position: 'relative', - }, - buttonContainer: { - marginTop: '2rem', - }, - homeButton: { - marginLeft: '1rem', - }, - icon: { - height: '150px', - width: '150px', - position: 'absolute', - right: 100, - top: 45, - }, -}); diff --git a/frontend/src/component/common/NotFound/NotFound.tsx b/frontend/src/component/common/NotFound/NotFound.tsx index e20fd10beb..e02cb0c4ee 100644 --- a/frontend/src/component/common/NotFound/NotFound.tsx +++ b/frontend/src/component/common/NotFound/NotFound.tsx @@ -1,14 +1,44 @@ -import { Button, Typography } from '@mui/material'; +import { Button, styled, Typography } from '@mui/material'; import { useNavigate } from 'react-router'; import { ReactComponent as LogoIcon } from 'assets/icons/logoBg.svg'; - -import { useStyles } from './NotFound.styles'; import { GO_BACK } from 'constants/navigate'; +const StyledContainer = styled('div')(({ theme }) => ({ + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + minHeight: '100vh', + padding: theme.spacing(4), + position: 'fixed', + inset: 0, + backgroundColor: theme.palette.text.tertiaryContrast, + width: '100%', +})); + +const StyledLogo = styled(LogoIcon)(({ theme }) => ({ + height: '80px', +})); + +const StyledContent = styled('div')(({ theme }) => ({ + display: 'flex', + position: 'relative', +})); + +const StyledButtonContainer = styled('div')(({ theme }) => ({ + marginTop: theme.spacing(4), +})); + +const StyledHomeButton = styled(Button)(({ theme }) => ({ + height: '150px', + width: '150px', + position: 'absolute', + right: 100, + top: 45, +})); + const NotFound = () => { const navigate = useNavigate(); - const { classes: styles } = useStyles(); const onClickHome = () => { navigate('/'); @@ -19,15 +49,15 @@ const NotFound = () => { }; return ( -
+
- -
+ + Ooops. That's a page we haven't toggled on yet. -
-
+ + - -
+ +
-
+ ); }; diff --git a/frontend/src/component/common/PageContent/PageContent.styles.ts b/frontend/src/component/common/PageContent/PageContent.styles.ts index 417730287e..8cfad7f504 100644 --- a/frontend/src/component/common/PageContent/PageContent.styles.ts +++ b/frontend/src/component/common/PageContent/PageContent.styles.ts @@ -1,18 +1,6 @@ import { makeStyles } from 'tss-react/mui'; export const useStyles = makeStyles()(theme => ({ - container: { - borderRadius: theme.shape.borderRadiusLarge, - boxShadow: 'none', - }, - headerContainer: { - borderBottomStyle: 'solid', - borderBottomWidth: 1, - borderBottomColor: theme.palette.divider, - [theme.breakpoints.down('md')]: { - padding: '1.5rem 1rem', - }, - }, headerPadding: { padding: theme.spacing(2, 4), }, diff --git a/frontend/src/component/common/PageContent/PageContent.tsx b/frontend/src/component/common/PageContent/PageContent.tsx index 33a6da6ab6..83fb5a8e78 100644 --- a/frontend/src/component/common/PageContent/PageContent.tsx +++ b/frontend/src/component/common/PageContent/PageContent.tsx @@ -1,7 +1,7 @@ import React, { FC, ReactNode } from 'react'; import classnames from 'classnames'; import { PageHeader } from 'component/common/PageHeader/PageHeader'; -import { Paper, PaperProps } from '@mui/material'; +import { Paper, PaperProps, styled } from '@mui/material'; import { useStyles } from './PageContent.styles'; import useLoading from 'hooks/useLoading'; import { ConditionallyRender } from '../ConditionallyRender/ConditionallyRender'; @@ -22,6 +22,20 @@ interface IPageContentProps extends PaperProps { headerClass?: string; } +const StyledHeader = styled('div')(({ theme }) => ({ + borderBottomStyle: 'solid', + borderBottomWidth: '1px', + borderBottomColor: theme.palette.divider, + [theme.breakpoints.down('md')]: { + padding: theme.spacing(3, 2), + }, +})); + +const StyledPaper = styled(Paper)(({ theme }) => ({ + borderRadius: theme.shape.borderRadiusLarge, + boxShadow: 'none', +})); + const PageContentLoading: FC<{ isLoading: boolean }> = ({ children, isLoading, @@ -51,7 +65,6 @@ export const PageContent: FC = ({ const headerClasses = classnames( 'header', - styles.headerContainer, headerClass || styles.headerPadding, { [styles.paddingDisabled]: disablePadding, @@ -71,25 +84,25 @@ export const PageContent: FC = ({ const paperProps = disableBorder ? { elevation: 0 } : {}; const content = ( - + } elseShow={header} /> - + } />
{children}
- + ); if (disableLoading) { diff --git a/frontend/src/component/common/PageHeader/PageHeader.styles.ts b/frontend/src/component/common/PageHeader/PageHeader.styles.ts deleted file mode 100644 index e13fba7db2..0000000000 --- a/frontend/src/component/common/PageHeader/PageHeader.styles.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { makeStyles } from 'tss-react/mui'; - -export const useStyles = makeStyles()(theme => ({ - headerContainer: { - display: 'flex', - flexDirection: 'column', - }, - topContainer: { - display: 'flex', - justifyContent: 'space-between', - alignItems: 'center', - position: 'relative', - }, - header: { - overflow: 'hidden', - textOverflow: 'ellipsis', - whiteSpace: 'nowrap', - marginRight: theme.spacing(2), - }, - headerTitle: { - fontSize: theme.fontSizes.mainHeader, - fontWeight: 'normal', - }, - headerActions: { - display: 'flex', - flexGrow: 1, - justifyContent: 'flex-end', - alignItems: 'center', - gap: theme.spacing(1), - }, -})); diff --git a/frontend/src/component/common/PageHeader/PageHeader.tsx b/frontend/src/component/common/PageHeader/PageHeader.tsx index d60a5544c6..e94777e43d 100644 --- a/frontend/src/component/common/PageHeader/PageHeader.tsx +++ b/frontend/src/component/common/PageHeader/PageHeader.tsx @@ -11,7 +11,6 @@ import { } from '@mui/material'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; -import { useStyles } from './PageHeader.styles'; import { usePageTitle } from 'hooks/usePageTitle'; const StyledDivider = styled(Divider)(({ theme }) => ({ @@ -21,10 +20,42 @@ const StyledDivider = styled(Divider)(({ theme }) => ({ display: 'inline-block', marginLeft: theme.spacing(2), marginRight: theme.spacing(2), - padding: '10px 0', + padding: theme.spacing(0.5, 0), verticalAlign: 'middle', })); +const StyledHeaderContainer = styled('div')(() => ({ + display: 'flex', + flexDirection: 'column', +})); + +const StyledTopContainer = styled('div')(() => ({ + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', + position: 'relative', +})); + +const StyledHeader = styled('div')(({ theme }) => ({ + overflow: 'hidden', + textOverflow: 'ellipsis', + whiteSpace: 'nowrap', + marginRight: theme.spacing(2), +})); + +const StyledHeaderTitle = styled(Typography)(({ theme }) => ({ + fontSize: theme.fontSizes.mainHeader, + fontWeight: 'normal', +})); + +const StyledHeaderActions = styled('div')(({ theme }) => ({ + display: 'flex', + flexGrow: 1, + justifyContent: 'flex-end', + alignItems: 'center', + gap: theme.spacing(1), +})); + interface IPageHeaderProps { title?: string; titleElement?: ReactNode; @@ -49,33 +80,32 @@ const PageHeaderComponent: FC & { secondary, children, }) => { - const { classes: styles } = useStyles(); const headerClasses = classnames({ skeleton: loading }); usePageTitle(secondary ? '' : title); return ( -
-
-
+ + - {titleElement || title} - + {subtitle && {subtitle}} -
+ {actions}
} + show={{actions}} /> -
+ {children} - + ); }; diff --git a/frontend/src/component/common/PaginateUI/PaginateUI.tsx b/frontend/src/component/common/PaginateUI/PaginateUI.tsx deleted file mode 100644 index 26718b0ca1..0000000000 --- a/frontend/src/component/common/PaginateUI/PaginateUI.tsx +++ /dev/null @@ -1,171 +0,0 @@ -import React, { useEffect, useState } from 'react'; -import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; -import classnames from 'classnames'; -import { useStyles } from './PaginationUI.styles'; - -import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos'; -import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos'; - -import DoubleArrowIcon from '@mui/icons-material/DoubleArrow'; -import { useMediaQuery, useTheme } from '@mui/material'; - -interface IPaginateUIProps { - pages: any[]; - pageIndex: number; - prevPage: () => void; - setPageIndex: (idx: number) => void; - nextPage: () => void; - style?: React.CSSProperties; -} - -/** - * @deprecated - */ -const PaginateUI = ({ - pages, - pageIndex, - prevPage, - setPageIndex, - nextPage, - ...rest -}: IPaginateUIProps) => { - const STARTLIMIT = 6; - const theme = useTheme(); - const { classes: styles } = useStyles(); - const [limit, setLimit] = useState(STARTLIMIT); - const [start, setStart] = useState(0); - const matches = useMediaQuery(theme.breakpoints.down('md')); - - useEffect(() => { - if (matches) { - setLimit(4); - } - }, [matches]); - - useEffect(() => { - if (pageIndex === 0 && start !== 0) { - setStart(0); - setLimit(STARTLIMIT); - } - }, [pageIndex, start]); - - return ( - 1} - show={ -
-
- 0} - show={ - <> - - - - } - /> - - {pages - .map((page, idx) => { - const active = pageIndex === idx; - return ( - - ); - }) - .slice(start, limit)} - - - - - } - /> -
-
- } - /> - ); -}; - -export default PaginateUI; diff --git a/frontend/src/component/common/PaginateUI/PaginationUI.styles.ts b/frontend/src/component/common/PaginateUI/PaginationUI.styles.ts deleted file mode 100644 index 727320f814..0000000000 --- a/frontend/src/component/common/PaginateUI/PaginationUI.styles.ts +++ /dev/null @@ -1,58 +0,0 @@ -import { makeStyles } from 'tss-react/mui'; - -export const useStyles = makeStyles()(theme => ({ - pagination: { - margin: '1rem 0 0 0', - display: 'flex', - justifyContent: ' center', - position: 'absolute', - bottom: '25px', - right: '0', - left: '0', - }, - paginationInnerContainer: { - position: 'relative', - }, - paginationButton: { - border: 'none', - cursor: 'pointer', - backgroundColor: 'efefef', - margin: '0 0.2rem', - width: '31px', - borderRadius: theme.shape.borderRadius, - padding: '0.25rem 0.5rem', - }, - paginationButtonActive: { - backgroundColor: '#635DC5', - color: '#fff', - transition: 'backgroundColor 0.3s ease', - }, - idxBtn: { - border: 'none', - borderRadius: theme.shape.borderRadius, - background: 'transparent', - position: 'absolute', - height: '23px', - cursor: 'pointer', - }, - doubleArrowBtnLeft: { - left: '-55px', - }, - doubleArrowBtnRight: { - right: '-55px', - }, - arrowIcon: { height: '15px', width: '15px' }, - arrowIconLeft: { - transform: 'rotate(180deg)', - }, - idxBtnIcon: { - height: '15px', - width: '15px', - }, - idxBtnLeft: { - left: '-30px', - }, - idxBtnRight: { - right: '-30px', - }, -})); diff --git a/frontend/src/component/common/Proclamation/Proclamation.styles.ts b/frontend/src/component/common/Proclamation/Proclamation.styles.ts deleted file mode 100644 index 3997888d0c..0000000000 --- a/frontend/src/component/common/Proclamation/Proclamation.styles.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { makeStyles } from 'tss-react/mui'; - -export const useStyles = makeStyles()({ - proclamation: { - marginBottom: '1rem', - }, - content: { - maxWidth: '800px', - }, - link: { - display: 'block', - marginTop: '0.5rem', - width: '100px', - }, -}); diff --git a/frontend/src/component/common/Proclamation/Proclamation.tsx b/frontend/src/component/common/Proclamation/Proclamation.tsx index df0fe67ee1..8a0d8847b0 100644 --- a/frontend/src/component/common/Proclamation/Proclamation.tsx +++ b/frontend/src/component/common/Proclamation/Proclamation.tsx @@ -1,14 +1,27 @@ import { useState, useEffect } from 'react'; -import { Alert } from '@mui/material'; +import { Alert, styled } from '@mui/material'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { Typography } from '@mui/material'; -import { useStyles } from './Proclamation.styles'; import { IProclamationToast } from 'interfaces/uiConfig'; interface IProclamationProps { toast?: IProclamationToast; } +const StyledProclamation = styled(Alert)(({ theme }) => ({ + marginBottom: theme.spacing(2), +})); + +const StyledContent = styled(Typography)(({ theme }) => ({ + maxWidth: '800px', +})); + +const StyledLink = styled('a')(({ theme }) => ({ + display: 'block', + marginTop: theme.spacing(1), + width: '100px', +})); + const renderProclamation = (id: string) => { if (!id) return false; if (localStorage) { @@ -22,7 +35,6 @@ const renderProclamation = (id: string) => { const Proclamation = ({ toast }: IProclamationProps) => { const [show, setShow] = useState(false); - const { classes: styles } = useStyles(); useEffect(() => { setShow(renderProclamation(toast?.id || '')); @@ -41,23 +53,18 @@ const Proclamation = ({ toast }: IProclamationProps) => { - + + {toast.message} - - + View more - - + + } /> ); diff --git a/frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap b/frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap index dcf25eedb1..a8178160e3 100644 --- a/frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap +++ b/frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap @@ -7,29 +7,29 @@ exports[`renders an empty list correctly 1`] = ` aria-live="polite" >

Tag types (5)

({ borderRadius: `${theme.shape.borderRadius}px`, }); @@ -66,9 +71,6 @@ export const useThemeStyles = makeStyles()(theme => ({ marginBottom: '0.5rem !important', }, }, - relative: { - position: 'relative', - }, divider: { margin: '1rem 0', backgroundColor: theme.palette.divider,