From ddb9d11039295ac11f786e8b77f6b7820abd4b9a Mon Sep 17 00:00:00 2001 From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com> Date: Wed, 11 Jan 2023 17:44:21 +0100 Subject: [PATCH] refactor: styles batch 3 (#2821) --- .../ProjectRoleForm/ProjectRoleForm.tsx | 2 +- .../ChangeRequestOverview.tsx | 5 +- .../common/AnimateOnMount/AnimateOnMount.tsx | 21 +-- .../component/common/Search/Search.styles.ts | 47 ------ .../src/component/common/Search/Search.tsx | 80 ++++++--- .../common/SearchField/SearchField.tsx | 78 --------- .../component/common/SearchField/styles.ts | 28 --- .../common/SegmentItem/SegmentItem.styles.ts | 48 ------ .../common/SegmentItem/SegmentItem.tsx | 71 +++++--- .../common/SkipNav/SkipNavLink.styles.ts | 33 ---- .../component/common/SkipNav/SkipNavLink.tsx | 12 -- .../common/SkipNavLink/SkipNavLink.tsx | 38 +++++ .../SkipNavTarget.tsx | 0 .../StaleDataNotification.tsx | 19 +-- .../StrategyItemContainer.styles.ts | 39 ----- .../StrategyItemContainer.tsx | 62 +++++-- .../common/TabNav/TabNav/TabNav.styles.ts | 15 -- .../component/common/TabNav/TabNav/TabNav.tsx | 18 +- .../CellSortable/CellSortable.styles.ts | 159 +++++++++--------- .../CellSortable/CellSortable.tsx | 82 +++++---- .../SortArrow/SortArrow.styles.ts | 14 -- .../CellSortable/SortArrow/SortArrow.tsx | 89 +++++----- .../SortableTableHeader.styles.ts | 20 --- .../SortableTableHeader.tsx | 101 ++++++----- .../common/Table/Table/Table.styles.ts | 19 --- .../component/common/Table/Table/Table.tsx | 26 ++- .../Table/TableCell/TableCell.styles.ts | 7 - .../common/Table/TableCell/TableCell.tsx | 26 ++- .../TablePlaceholder.styles.ts | 14 -- .../TablePlaceholder/TablePlaceholder.tsx | 22 ++- .../VirtualizedTable.styles.ts | 21 --- .../VirtualizedTable/VirtualizedTable.tsx | 34 +++- .../cells/ActionCell/ActionCell.styles.ts | 15 -- .../Table/cells/ActionCell/ActionCell.tsx | 33 ++-- .../FeatureSeenCell/FeatureSeenCell.styles.ts | 20 --- .../cells/FeatureSeenCell/FeatureSeenCell.tsx | 34 ++-- .../cells/FeatureTypeCell/FeatureTypeCell.tsx | 18 +- .../HighlightCell/HighlightCell.styles.ts | 29 ---- .../cells/HighlightCell/HighlightCell.tsx | 49 ++++-- .../Table/cells/LinkCell/LinkCell.styles.ts | 89 +++++----- .../common/Table/cells/LinkCell/LinkCell.tsx | 50 +++--- .../Table/cells/TextCell/TextCell.styles.ts | 17 -- .../common/Table/cells/TextCell/TextCell.tsx | 35 ++-- .../ToastRenderer/ToastRenderer.styles.ts | 10 -- .../common/ToastRenderer/ToastRenderer.tsx | 33 +++- .../FeedbackNPS/FeedbackNPS.styles.ts | 37 ---- .../feedback/FeedbackNPS/FeedbackNPS.tsx | 87 +++++++--- .../layout/MainLayout/MainLayout.tsx | 4 +- .../__snapshots__/TagTypeList.test.tsx.snap | 129 +++++++------- frontend/src/themes/themeStyles.ts | 96 +++++------ frontend/src/utils/strategyNames.tsx | 4 +- 51 files changed, 895 insertions(+), 1144 deletions(-) delete mode 100644 frontend/src/component/common/Search/Search.styles.ts delete mode 100644 frontend/src/component/common/SearchField/SearchField.tsx delete mode 100644 frontend/src/component/common/SearchField/styles.ts delete mode 100644 frontend/src/component/common/SegmentItem/SegmentItem.styles.ts delete mode 100644 frontend/src/component/common/SkipNav/SkipNavLink.styles.ts delete mode 100644 frontend/src/component/common/SkipNav/SkipNavLink.tsx create mode 100644 frontend/src/component/common/SkipNavLink/SkipNavLink.tsx rename frontend/src/component/common/{SkipNav => SkipNavLink}/SkipNavTarget.tsx (100%) delete mode 100644 frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.styles.ts delete mode 100644 frontend/src/component/common/TabNav/TabNav/TabNav.styles.ts delete mode 100644 frontend/src/component/common/Table/SortableTableHeader/CellSortable/SortArrow/SortArrow.styles.ts delete mode 100644 frontend/src/component/common/Table/SortableTableHeader/SortableTableHeader.styles.ts delete mode 100644 frontend/src/component/common/Table/Table/Table.styles.ts delete mode 100644 frontend/src/component/common/Table/TableCell/TableCell.styles.ts delete mode 100644 frontend/src/component/common/Table/TablePlaceholder/TablePlaceholder.styles.ts delete mode 100644 frontend/src/component/common/Table/VirtualizedTable/VirtualizedTable.styles.ts delete mode 100644 frontend/src/component/common/Table/cells/ActionCell/ActionCell.styles.ts delete mode 100644 frontend/src/component/common/Table/cells/FeatureSeenCell/FeatureSeenCell.styles.ts delete mode 100644 frontend/src/component/common/Table/cells/HighlightCell/HighlightCell.styles.ts delete mode 100644 frontend/src/component/common/Table/cells/TextCell/TextCell.styles.ts delete mode 100644 frontend/src/component/common/ToastRenderer/ToastRenderer.styles.ts delete mode 100644 frontend/src/component/feedback/FeedbackNPS/FeedbackNPS.styles.ts diff --git a/frontend/src/component/admin/projectRoles/ProjectRoleForm/ProjectRoleForm.tsx b/frontend/src/component/admin/projectRoles/ProjectRoleForm/ProjectRoleForm.tsx index a95240ad19..bc3f8d05bc 100644 --- a/frontend/src/component/admin/projectRoles/ProjectRoleForm/ProjectRoleForm.tsx +++ b/frontend/src/component/admin/projectRoles/ProjectRoleForm/ProjectRoleForm.tsx @@ -137,7 +137,7 @@ const ProjectRoleForm: FC = ({ }} > {children} - diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx index 5c272bcdb0..e57a591dc4 100644 --- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx +++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx @@ -264,7 +264,10 @@ export const ChangeRequestOverview: FC = () => { } show={ } /> - + = ({ } /> - + ); }; diff --git a/frontend/src/component/common/SkipNav/SkipNavLink.styles.ts b/frontend/src/component/common/SkipNav/SkipNavLink.styles.ts deleted file mode 100644 index a4fa96d4ce..0000000000 --- a/frontend/src/component/common/SkipNav/SkipNavLink.styles.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { makeStyles } from 'tss-react/mui'; - -export const useStyles = makeStyles()(theme => ({ - link: { - position: 'fixed', - overflow: 'hidden', - zIndex: 1000, - top: '1.125rem', - left: '1.125rem', - padding: '0.5rem 1rem', - whiteSpace: 'nowrap', - textDecoration: 'none', - background: theme.palette.primary.dark, - color: theme.palette.primary.contrastText, - borderRadius: theme.shape.borderRadius, - fontSize: theme.fontSizes.smallBody, - - [theme.breakpoints.down(960)]: { - top: '0.8rem', - left: '0.8rem', - }, - - '&:not(:focus):not(:active)': { - clip: 'rect(0 0 0 0)', - clipPath: 'inset(50%)', - zIndex: -1, - width: 1, - height: 1, - margin: -1, - padding: 0, - }, - }, -})); diff --git a/frontend/src/component/common/SkipNav/SkipNavLink.tsx b/frontend/src/component/common/SkipNav/SkipNavLink.tsx deleted file mode 100644 index 635dbbb352..0000000000 --- a/frontend/src/component/common/SkipNav/SkipNavLink.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { SKIP_NAV_TARGET_ID } from 'component/common/SkipNav/SkipNavTarget'; -import { useStyles } from 'component/common/SkipNav/SkipNavLink.styles'; - -export const SkipNavLink = () => { - const { classes: styles } = useStyles(); - - return ( - - Skip to content ↓ - - ); -}; diff --git a/frontend/src/component/common/SkipNavLink/SkipNavLink.tsx b/frontend/src/component/common/SkipNavLink/SkipNavLink.tsx new file mode 100644 index 0000000000..b00610ba7a --- /dev/null +++ b/frontend/src/component/common/SkipNavLink/SkipNavLink.tsx @@ -0,0 +1,38 @@ +import { SKIP_NAV_TARGET_ID } from 'component/common/SkipNavLink/SkipNavTarget'; +import { styled } from '@mui/material'; + +const StyledLink = styled('a')(({ theme }) => ({ + position: 'fixed', + overflow: 'hidden', + zIndex: 1000, + top: theme.spacing(2.25), + left: theme.spacing(2.25), + padding: theme.spacing(1, 2), + whiteSpace: 'nowrap', + textDecoration: 'none', + background: theme.palette.primary.dark, + color: theme.palette.primary.contrastText, + borderRadius: theme.shape.borderRadius, + fontSize: theme.fontSizes.smallBody, + + [theme.breakpoints.down(960)]: { + top: '0.8rem', + left: '0.8rem', + }, + + '&:not(:focus):not(:active)': { + clip: 'rect(0 0 0 0)', + clipPath: 'inset(50%)', + zIndex: -1, + width: 1, + height: 1, + margin: -1, + padding: 0, + }, +})); + +export const SkipNavLink = () => ( + + Skip to content ↓ + +); diff --git a/frontend/src/component/common/SkipNav/SkipNavTarget.tsx b/frontend/src/component/common/SkipNavLink/SkipNavTarget.tsx similarity index 100% rename from frontend/src/component/common/SkipNav/SkipNavTarget.tsx rename to frontend/src/component/common/SkipNavLink/SkipNavTarget.tsx diff --git a/frontend/src/component/common/StaleDataNotification/StaleDataNotification.tsx b/frontend/src/component/common/StaleDataNotification/StaleDataNotification.tsx index 80e4237e92..eaea1193dc 100644 --- a/frontend/src/component/common/StaleDataNotification/StaleDataNotification.tsx +++ b/frontend/src/component/common/StaleDataNotification/StaleDataNotification.tsx @@ -1,7 +1,11 @@ import { Typography, Button, useTheme, useMediaQuery } from '@mui/material'; import EventDiff from 'component/events/EventDiff/EventDiff'; -import { useThemeStyles } from 'themes/themeStyles'; +import { + fadeInBottomEnter, + fadeInBottomStartWithoutFixed, +} from 'themes/themeStyles'; import AnimateOnMount from 'component/common/AnimateOnMount/AnimateOnMount'; +import { useMemo } from 'react'; interface IStaleDataNotification { refresh: () => void; @@ -18,12 +22,12 @@ export const StaleDataNotification = ({ data, cache, }: IStaleDataNotification) => { - const { classes: themeStyles } = useThemeStyles(); const theme = useTheme(); const isExtraSmallScreen = useMediaQuery(theme.breakpoints.down('sm')); - const getStyles = () => { + const style = useMemo(() => { const base = { + ...fadeInBottomStartWithoutFixed, padding: `${theme.spacing(3)} ${theme.spacing(4)}`, boxShadow: theme.boxShadows.elevated, borderRadius: theme.shape.borderRadiusLarge, @@ -41,15 +45,10 @@ export const StaleDataNotification = ({ }; } return base; - }; + }, [theme, isExtraSmallScreen]); return ( - + Your data is stale diff --git a/frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.styles.ts b/frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.styles.ts deleted file mode 100644 index 701ed5f7e4..0000000000 --- a/frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.styles.ts +++ /dev/null @@ -1,39 +0,0 @@ -import { makeStyles } from 'tss-react/mui'; - -export const useStyles = makeStyles()(theme => ({ - container: { - borderRadius: theme.shape.borderRadiusMedium, - border: `1px solid ${theme.palette.divider}`, - '& + &': { - marginTop: theme.spacing(2), - }, - background: theme.palette.background.paper, - }, - header: { - padding: theme.spacing(0.5, 2), - display: 'flex', - gap: theme.spacing(1), - alignItems: 'center', - borderBottom: `1px solid ${theme.palette.divider}`, - fontWeight: theme.typography.fontWeightMedium, - }, - headerDraggable: { - paddingLeft: theme.spacing(1), - }, - icon: { - fill: theme.palette.inactiveIcon, - }, - actions: { - marginLeft: 'auto', - display: 'flex', - minHeight: theme.spacing(6), - alignItems: 'center', - }, - resultChip: { - marginLeft: 'auto', - }, - body: { - padding: theme.spacing(2), - justifyItems: 'center', - }, -})); diff --git a/frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.tsx b/frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.tsx index 0be10f1c9f..dd88d915d9 100644 --- a/frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.tsx +++ b/frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.tsx @@ -1,7 +1,6 @@ import { DragEventHandler, FC, ReactNode } from 'react'; import { DragIndicator } from '@mui/icons-material'; import { styled, IconButton, Box } from '@mui/material'; -import classNames from 'classnames'; import { IFeatureStrategy } from 'interfaces/strategy'; import { getFeatureStrategyIcon, @@ -9,7 +8,6 @@ import { } from 'utils/strategyNames'; import StringTruncator from 'component/common/StringTruncator/StringTruncator'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; -import { useStyles } from './StrategyItemContainer.styles'; import { PlaygroundStrategySchema } from 'openapi'; interface IStrategyItemContainerProps { @@ -40,6 +38,27 @@ const StyledIndexLabel = styled('div')(({ theme }) => ({ }, })); +const StyledContainer = styled(Box)(({ theme }) => ({ + borderRadius: theme.shape.borderRadiusMedium, + border: `1px solid ${theme.palette.divider}`, + '& + &': { + marginTop: theme.spacing(2), + }, + background: theme.palette.background.paper, +})); + +const StyledHeader = styled('div', { + shouldForwardProp: prop => prop !== 'draggable', +})(({ theme, draggable }) => ({ + padding: theme.spacing(0.5, 2), + display: 'flex', + gap: theme.spacing(1), + alignItems: 'center', + borderBottom: `1px solid ${theme.palette.divider}`, + fontWeight: theme.typography.fontWeightMedium, + paddingLeft: draggable ? theme.spacing(1) : theme.spacing(2), +})); + export const StrategyItemContainer: FC = ({ strategy, onDragStart, @@ -49,7 +68,6 @@ export const StrategyItemContainer: FC = ({ orderNumber, style = {}, }) => { - const { classes: styles } = useStyles(); const Icon = getFeatureStrategyIcon(strategy.name); return ( @@ -58,12 +76,8 @@ export const StrategyItemContainer: FC = ({ condition={orderNumber !== undefined} show={{orderNumber}} /> - -
+ + ( @@ -83,16 +97,36 @@ export const StrategyItemContainer: FC = ({ )} /> - + theme.palette.inactiveIcon, + }} + /> -
{actions}
-
-
{children}
- + theme.spacing(6), + alignItems: 'center', + }} + > + {actions} + + + + {children} + + ); }; diff --git a/frontend/src/component/common/TabNav/TabNav/TabNav.styles.ts b/frontend/src/component/common/TabNav/TabNav/TabNav.styles.ts deleted file mode 100644 index 856db96277..0000000000 --- a/frontend/src/component/common/TabNav/TabNav/TabNav.styles.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { makeStyles } from 'tss-react/mui'; - -export const useStyles = makeStyles()(theme => ({ - tabNav: { - backgroundColor: theme.palette.background.paper, - borderBottom: '1px solid', - borderBottomColor: theme.palette.grey[300], - borderRadius: 0, - }, - tab: { - [theme.breakpoints.up('lg')]: { - minWidth: 160, - }, - }, -})); diff --git a/frontend/src/component/common/TabNav/TabNav/TabNav.tsx b/frontend/src/component/common/TabNav/TabNav/TabNav.tsx index c8f3804ed1..7a53636039 100644 --- a/frontend/src/component/common/TabNav/TabNav/TabNav.tsx +++ b/frontend/src/component/common/TabNav/TabNav/TabNav.tsx @@ -1,7 +1,5 @@ import React, { useState, ReactNode } from 'react'; -import classnames from 'classnames'; import { Tabs, Tab, Paper } from '@mui/material'; -import { useStyles } from 'component/common/TabNav/TabNav/TabNav.styles'; import { TabPanel } from 'component/common/TabNav/TabPanel/TabPanel'; interface ITabNavProps { @@ -15,13 +13,13 @@ interface ITabData { label: string; component: ReactNode; } + export const TabNav = ({ tabData, className = '', navClass = '', startingTab = 0, }: ITabNavProps) => { - const { classes: styles } = useStyles(); const [activeTab, setActiveTab] = useState(startingTab); const renderTabs = () => tabData.map((tab, index) => ( @@ -30,7 +28,11 @@ export const TabNav = ({ label={tab.label} id={`tab-${index}`} aria-controls={`tabpanel-${index}`} - className={styles.tab} + sx={{ + minWidth: { + lg: 160, + }, + }} /> )); @@ -44,8 +46,14 @@ export const TabNav = ({ return ( <> theme.palette.background.paper, + borderBottom: '1px solid', + borderBottomColor: theme => theme.palette.grey[300], + borderRadius: 0, + }} > ({ - header: { - position: 'relative', - fontWeight: theme.fontWeight.medium, - }, - flex: { +export const StyledTableCell = styled(TableCell, { + shouldForwardProp: prop => + prop !== 'isFlex' && prop !== 'isSortable' && prop !== 'isFlexGrow', +})<{ + isFlex?: boolean; + isSortable?: boolean; + isFlexGrow?: boolean; +}>(({ theme, isFlex, isSortable, isFlexGrow }) => ({ + position: 'relative', + fontWeight: theme.typography.fontWeightRegular, + ...(isFlex && { justifyContent: 'stretch', alignItems: 'center', display: 'flex', @@ -13,11 +18,8 @@ export const useStyles = makeStyles()(theme => ({ '& > *': { flexGrow: 1, }, - }, - flexGrow: { - flexGrow: 1, - }, - sortable: { + }), + ...(isSortable && { padding: 0, '&:hover, &:focus': { backgroundColor: theme.palette.tableHeaderHover, @@ -25,75 +27,72 @@ export const useStyles = makeStyles()(theme => ({ color: 'inherit', }, }, - }, - sortButton: { - all: 'unset', - whiteSpace: 'nowrap', - width: '100%', - position: 'relative', - zIndex: 1, - ':hover, :focus, &:focus-visible, &:active': { - outline: 'revert', - '.hover-only': { - display: 'inline-block', - }, - }, - display: 'flex', - boxSizing: 'inherit', - cursor: 'pointer', - }, - sortedButton: { - fontWeight: theme.fontWeight.bold, - }, - label: { - display: 'flex', - flexDirection: 'column', - flexShrink: 1, - minWidth: 0, - '::after': { - fontWeight: 'bold', - display: 'inline-block', - height: 0, - content: 'attr(data-text)', - visibility: 'hidden', - overflow: 'hidden', - }, - }, - alignLeft: { - justifyContent: 'flex-start', - textAlign: 'left', - }, - alignRight: { - justifyContent: 'flex-end', - textAlign: 'right', - }, - alignCenter: { - justifyContent: 'center', - textAlign: 'center', - }, - hiddenMeasurementLayer: { - padding: theme.spacing(2), - visibility: 'hidden', - display: 'flex', - alignItems: 'center', - width: '100%', - }, - visibleAbsoluteLayer: { - padding: theme.spacing(2), - position: 'absolute', - display: 'flex', - alignItems: 'center', - width: '100%', - height: '100%', + }), + ...(isFlexGrow && { + flexGrow: 1, + }), +})); + +export const StyledButton = styled('button', { + shouldForwardProp: prop => prop !== 'isSorted', +})<{ isSorted?: boolean }>(({ theme, isSorted }) => ({ + all: 'unset', + whiteSpace: 'nowrap', + width: '100%', + position: 'relative', + zIndex: 1, + ':hover, :focus, &:focus-visible, &:active': { + outline: 'revert', '.hover-only': { - display: 'none', - }, - '& > span': { - minWidth: 0, - whiteSpace: 'nowrap', - textOverflow: 'ellipsis', - overflowX: 'hidden', - overflowY: 'visible', + display: 'inline-block', }, }, + display: 'flex', + boxSizing: 'inherit', + cursor: 'pointer', + ...(isSorted && { + fontWeight: theme.typography.fontWeightBold, + }), +})); + +export const StyledLabel = styled('span')(({ theme }) => ({ + display: 'flex', + flexDirection: 'column', + flexShrink: 1, + minWidth: 0, + '::after': { + fontWeight: 'bold', + display: 'inline-block', + height: 0, + content: 'attr(data-text)', + visibility: 'hidden', + overflow: 'hidden', + }, +})); + +export const StyledHiddenMeasurementLayer = styled('span')(({ theme }) => ({ + padding: theme.spacing(2), + visibility: 'hidden', + display: 'flex', + alignItems: 'center', + width: '100%', +})); + +export const StyledVisibleAbsoluteLayer = styled('span')(({ theme }) => ({ + padding: theme.spacing(2), + position: 'absolute', + display: 'flex', + alignItems: 'center', + width: '100%', + height: '100%', + '.hover-only': { + display: 'none', + }, + '& > span': { + minWidth: 0, + whiteSpace: 'nowrap', + textOverflow: 'ellipsis', + overflowX: 'hidden', + overflowY: 'visible', + }, })); diff --git a/frontend/src/component/common/Table/SortableTableHeader/CellSortable/CellSortable.tsx b/frontend/src/component/common/Table/SortableTableHeader/CellSortable/CellSortable.tsx index bef033443d..bca8b6157a 100644 --- a/frontend/src/component/common/Table/SortableTableHeader/CellSortable/CellSortable.tsx +++ b/frontend/src/component/common/Table/SortableTableHeader/CellSortable/CellSortable.tsx @@ -7,11 +7,16 @@ import { useRef, useState, } from 'react'; -import { TableCell, Tooltip } from '@mui/material'; -import classnames from 'classnames'; +import { Tooltip } from '@mui/material'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; -import { useStyles } from './CellSortable.styles'; import { AnnouncerContext } from 'component/common/Announcer/AnnouncerContext/AnnouncerContext'; +import { + StyledButton, + StyledHiddenMeasurementLayer, + StyledLabel, + StyledTableCell, + StyledVisibleAbsoluteLayer, +} from './CellSortable.styles'; import { SortArrow } from './SortArrow/SortArrow'; interface ICellSortableProps { @@ -45,7 +50,6 @@ export const CellSortable: FC = ({ const { setAnnouncement } = useContext(AnnouncerContext); const [title, setTitle] = useState(''); const ref = useRef(null); - const { classes: styles } = useStyles(); const ariaSort = isSorted ? isDescending @@ -62,18 +66,27 @@ export const CellSortable: FC = ({ ); }; - const alignClass = useMemo(() => { + const alignStyle = useMemo(() => { switch (align) { case 'left': - return styles.alignLeft; + return { + justifyContent: 'flex-start', + textAlign: 'left', + } as const; case 'center': - return styles.alignCenter; + return { + justifyContent: 'center', + textAlign: 'center', + } as const; case 'right': - return styles.alignRight; + return { + justifyContent: 'flex-end', + textAlign: 'right', + } as const; default: return undefined; } - }, [align, styles]); + }, [align]); useEffect(() => { const updateTitle = () => { @@ -93,55 +106,36 @@ export const CellSortable: FC = ({ }, [setTitle, ariaTitle]); // eslint-disable-line react-hooks/exhaustive-deps return ( - - + + } - elseShow={
{children}
} + elseShow={
{children}
} /> - + ); }; diff --git a/frontend/src/component/common/Table/SortableTableHeader/CellSortable/SortArrow/SortArrow.styles.ts b/frontend/src/component/common/Table/SortableTableHeader/CellSortable/SortArrow/SortArrow.styles.ts deleted file mode 100644 index 2cfd400e7b..0000000000 --- a/frontend/src/component/common/Table/SortableTableHeader/CellSortable/SortArrow/SortArrow.styles.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { makeStyles } from 'tss-react/mui'; - -export const useStyles = makeStyles()(theme => ({ - icon: { - marginLeft: theme.spacing(0.25), - marginRight: theme.spacing(-0.5), - color: theme.palette.grey[700], - fontSize: theme.fontSizes.mainHeader, - verticalAlign: 'middle', - }, - sorted: { - color: theme.palette.grey[900], - }, -})); diff --git a/frontend/src/component/common/Table/SortableTableHeader/CellSortable/SortArrow/SortArrow.tsx b/frontend/src/component/common/Table/SortableTableHeader/CellSortable/SortArrow/SortArrow.tsx index 5ddf22dd74..05448f5c1c 100644 --- a/frontend/src/component/common/Table/SortableTableHeader/CellSortable/SortArrow/SortArrow.tsx +++ b/frontend/src/component/common/Table/SortableTableHeader/CellSortable/SortArrow/SortArrow.tsx @@ -5,8 +5,8 @@ import { UnfoldMoreOutlined, } from '@mui/icons-material'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; -import { useStyles } from './SortArrow.styles'; import classnames from 'classnames'; +import { Theme } from '@mui/material'; interface ISortArrowProps { isSorted?: boolean; @@ -14,47 +14,54 @@ interface ISortArrowProps { className?: string; } +const iconStyle = (theme: Theme) => ({ + marginLeft: theme.spacing(0.25), + marginRight: theme.spacing(-0.5), + color: theme.palette.neutral.main, + fontSize: theme.fontSizes.mainHeader, + verticalAlign: 'middle', +}); + export const SortArrow: VFC = ({ isSorted: sorted, isDesc: desc = false, className, -}) => { - const { classes: styles } = useStyles(); - - return ( - - } - elseShow={ - - } - /> - } - elseShow={ - - } - /> - ); -}; +}) => ( + ({ + ...iconStyle(theme), + color: theme.palette.tableHeaderColor, + })} + className={className} + fontSize="inherit" + /> + } + elseShow={ + ({ + ...iconStyle(theme), + color: theme.palette.tableHeaderColor, + })} + className={className} + fontSize="inherit" + /> + } + /> + } + elseShow={ + ({ + ...iconStyle(theme), + })} + className={classnames(className, 'hover-only')} + fontSize="inherit" + /> + } + /> +); diff --git a/frontend/src/component/common/Table/SortableTableHeader/SortableTableHeader.styles.ts b/frontend/src/component/common/Table/SortableTableHeader/SortableTableHeader.styles.ts deleted file mode 100644 index e1904e1818..0000000000 --- a/frontend/src/component/common/Table/SortableTableHeader/SortableTableHeader.styles.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { makeStyles } from 'tss-react/mui'; - -export const useStyles = makeStyles()(theme => ({ - tableHeader: { - '& > th': { - height: theme.shape.tableRowHeightCompact, - border: 0, - backgroundColor: theme.palette.tableHeaderBackground, - color: theme.palette.tableHeaderColor, - '&:first-of-type': { - borderTopLeftRadius: theme.shape.borderRadiusMedium, - borderBottomLeftRadius: theme.shape.borderRadiusMedium, - }, - '&:last-of-type': { - borderTopRightRadius: theme.shape.borderRadiusMedium, - borderBottomRightRadius: theme.shape.borderRadiusMedium, - }, - }, - }, -})); diff --git a/frontend/src/component/common/Table/SortableTableHeader/SortableTableHeader.tsx b/frontend/src/component/common/Table/SortableTableHeader/SortableTableHeader.tsx index 9eb020fda6..fb11609274 100644 --- a/frontend/src/component/common/Table/SortableTableHeader/SortableTableHeader.tsx +++ b/frontend/src/component/common/Table/SortableTableHeader/SortableTableHeader.tsx @@ -1,7 +1,6 @@ import { VFC } from 'react'; -import { TableHead, TableRow } from '@mui/material'; +import { styled, TableHead, TableRow } from '@mui/material'; import { HeaderGroup } from 'react-table'; -import { useStyles } from './SortableTableHeader.styles'; import { CellSortable } from './CellSortable/CellSortable'; interface ISortableTableHeaderProps { @@ -10,52 +9,62 @@ interface ISortableTableHeaderProps { flex?: boolean; } +const StyledTableRow = styled(TableRow)(({ theme }) => ({ + '& > th': { + height: theme.shape.tableRowHeightCompact, + border: 0, + backgroundColor: theme.palette.tableHeaderBackground, + color: theme.palette.tableHeaderColor, + '&:first-of-type': { + borderTopLeftRadius: theme.shape.borderRadiusMedium, + borderBottomLeftRadius: theme.shape.borderRadiusMedium, + }, + '&:last-of-type': { + borderTopRightRadius: theme.shape.borderRadiusMedium, + borderBottomRightRadius: theme.shape.borderRadiusMedium, + }, + }, +})); + export const SortableTableHeader: VFC = ({ headerGroups, className, flex, -}) => { - const { classes: styles } = useStyles(); +}) => ( + + {headerGroups.map(headerGroup => ( + + {headerGroup.headers.map((column: HeaderGroup) => { + const content = column.render('Header'); - return ( - - {headerGroups.map(headerGroup => ( - - {headerGroup.headers.map((column: HeaderGroup) => { - const content = column.render('Header'); - - return ( - - {content} - - ); - })} - - ))} - - ); -}; + return ( + + {content} + + ); + })} + + ))} + +); diff --git a/frontend/src/component/common/Table/Table/Table.styles.ts b/frontend/src/component/common/Table/Table/Table.styles.ts deleted file mode 100644 index b006579729..0000000000 --- a/frontend/src/component/common/Table/Table/Table.styles.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { makeStyles } from 'tss-react/mui'; - -export const useStyles = makeStyles<{ - rowHeight: 'auto' | 'standard' | 'dense' | 'compact' | number; -}>()((theme, { rowHeight }) => ({ - table: { - position: 'relative', - - '& tbody tr': { - height: - { - auto: 'auto', - standard: theme.shape.tableRowHeight, - compact: theme.shape.tableRowHeightCompact, - dense: theme.shape.tableRowHeightDense, - }[rowHeight] ?? rowHeight, - }, - }, -})); diff --git a/frontend/src/component/common/Table/Table/Table.tsx b/frontend/src/component/common/Table/Table/Table.tsx index 86ae22607b..1446f7efa2 100644 --- a/frontend/src/component/common/Table/Table/Table.tsx +++ b/frontend/src/component/common/Table/Table/Table.tsx @@ -1,16 +1,24 @@ import { FC } from 'react'; -import classnames from 'classnames'; import { Table as MUITable, TableProps } from '@mui/material'; -import { useStyles } from './Table.styles'; export const Table: FC< TableProps & { rowHeight?: 'auto' | 'dense' | 'standard' | 'compact' | number; } -> = ({ rowHeight = 'auto', className, ...props }) => { - const { classes } = useStyles({ rowHeight }); - - return ( - - ); -}; +> = ({ rowHeight = 'auto', ...props }) => ( + + ({ + auto: 'auto', + standard: theme.shape.tableRowHeight, + compact: theme.shape.tableRowHeightCompact, + dense: theme.shape.tableRowHeightDense, + }[rowHeight] ?? rowHeight), + }, + }} + {...props} + /> +); diff --git a/frontend/src/component/common/Table/TableCell/TableCell.styles.ts b/frontend/src/component/common/Table/TableCell/TableCell.styles.ts deleted file mode 100644 index ac18919c58..0000000000 --- a/frontend/src/component/common/Table/TableCell/TableCell.styles.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { makeStyles } from 'tss-react/mui'; - -export const useStyles = makeStyles()(theme => ({ - tableCell: { - padding: 0, - }, -})); diff --git a/frontend/src/component/common/Table/TableCell/TableCell.tsx b/frontend/src/component/common/Table/TableCell/TableCell.tsx index 38d739bca5..75518a601d 100644 --- a/frontend/src/component/common/Table/TableCell/TableCell.tsx +++ b/frontend/src/component/common/Table/TableCell/TableCell.tsx @@ -1,18 +1,16 @@ import { FC, ForwardedRef, forwardRef } from 'react'; -import classnames from 'classnames'; -import { TableCell as MUITableCell, TableCellProps } from '@mui/material'; -import { useStyles } from './TableCell.styles'; +import { + styled, + TableCell as MUITableCell, + TableCellProps, +} from '@mui/material'; + +const StyledTableCell = styled(MUITableCell)(({ theme }) => ({ + padding: 0, +})); export const TableCell: FC = forwardRef( - ({ className, ...props }, ref: ForwardedRef) => { - const { classes: styles } = useStyles(); - - return ( - - ); - } + ({ className, ...props }, ref: ForwardedRef) => ( + + ) ); diff --git a/frontend/src/component/common/Table/TablePlaceholder/TablePlaceholder.styles.ts b/frontend/src/component/common/Table/TablePlaceholder/TablePlaceholder.styles.ts deleted file mode 100644 index 4df809bbce..0000000000 --- a/frontend/src/component/common/Table/TablePlaceholder/TablePlaceholder.styles.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { makeStyles } from 'tss-react/mui'; - -export const useStyles = makeStyles()(theme => ({ - emptyStateListItem: { - border: `2px dashed ${theme.palette.neutral.light}`, - padding: '0.8rem', - textAlign: 'center', - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - marginTop: theme.spacing(2), - width: '100%', - }, -})); diff --git a/frontend/src/component/common/Table/TablePlaceholder/TablePlaceholder.tsx b/frontend/src/component/common/Table/TablePlaceholder/TablePlaceholder.tsx index 456c7cf715..19402aa101 100644 --- a/frontend/src/component/common/Table/TablePlaceholder/TablePlaceholder.tsx +++ b/frontend/src/component/common/Table/TablePlaceholder/TablePlaceholder.tsx @@ -1,9 +1,19 @@ import { FC } from 'react'; import { Box } from '@mui/material'; -import { useStyles } from 'component/common/Table/TablePlaceholder/TablePlaceholder.styles'; -export const TablePlaceholder: FC = ({ children }) => { - const { classes: styles } = useStyles(); - - return {children}; -}; +export const TablePlaceholder: FC = ({ children }) => ( + `2px dashed ${theme.palette.neutral.light}`, + p: 1.6, + textAlign: 'center', + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + mt: 2, + width: '100%', + }} + > + {children} + +); diff --git a/frontend/src/component/common/Table/VirtualizedTable/VirtualizedTable.styles.ts b/frontend/src/component/common/Table/VirtualizedTable/VirtualizedTable.styles.ts deleted file mode 100644 index 6814d09ea9..0000000000 --- a/frontend/src/component/common/Table/VirtualizedTable/VirtualizedTable.styles.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { makeStyles } from 'tss-react/mui'; - -export const useStyles = makeStyles()(() => ({ - row: { - position: 'absolute', - width: '100%', - '&:hover': { - '.show-row-hover': { - opacity: 1, - }, - }, - }, - cell: { - alignItems: 'center', - display: 'flex', - flexShrink: 0, - '& > *': { - flexGrow: 1, - }, - }, -})); diff --git a/frontend/src/component/common/Table/VirtualizedTable/VirtualizedTable.tsx b/frontend/src/component/common/Table/VirtualizedTable/VirtualizedTable.tsx index 1fb82e2c88..13b992dde3 100644 --- a/frontend/src/component/common/Table/VirtualizedTable/VirtualizedTable.tsx +++ b/frontend/src/component/common/Table/VirtualizedTable/VirtualizedTable.tsx @@ -3,12 +3,11 @@ import { useTheme } from '@mui/material'; import { SortableTableHeader, Table, - TableCell, TableBody, TableRow, + TableCell, } from 'component/common/Table'; import { useVirtualizedRange } from 'hooks/useVirtualizedRange'; -import { useStyles } from './VirtualizedTable.styles'; import { HeaderGroup, Row } from 'react-table'; interface IVirtualizedTableProps { @@ -34,7 +33,6 @@ export const VirtualizedTable: VFC = ({ rows, prepareRow, }) => { - const { classes } = useStyles(); const theme = useTheme(); const rowHeight = useMemo( () => rowHeightOverride || theme.shape.tableRowHeight, @@ -56,7 +54,28 @@ export const VirtualizedTable: VFC = ({ style={{ height: tableHeight }} > - + *': { + flexGrow: 1, + }, + }, + }} + > {rows.map((row, index) => { const top = index * rowHeight + theme.shape.tableRowHeightCompact; @@ -73,10 +92,10 @@ export const VirtualizedTable: VFC = ({ return ( {row.cells.map(cell => ( = ({ : undefined, }, })} - className={classes.cell} > {cell.render('Cell')} diff --git a/frontend/src/component/common/Table/cells/ActionCell/ActionCell.styles.ts b/frontend/src/component/common/Table/cells/ActionCell/ActionCell.styles.ts deleted file mode 100644 index 5f00808831..0000000000 --- a/frontend/src/component/common/Table/cells/ActionCell/ActionCell.styles.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { makeStyles } from 'tss-react/mui'; - -export const useStyles = makeStyles()(theme => ({ - container: { - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - padding: theme.spacing(0, 1.5), - }, - divider: { - borderColor: theme.palette.dividerAlternative, - height: theme.spacing(3), - margin: theme.spacing(0, 2), - }, -})); diff --git a/frontend/src/component/common/Table/cells/ActionCell/ActionCell.tsx b/frontend/src/component/common/Table/cells/ActionCell/ActionCell.tsx index 30637e2c72..b65a4e872b 100644 --- a/frontend/src/component/common/Table/cells/ActionCell/ActionCell.tsx +++ b/frontend/src/component/common/Table/cells/ActionCell/ActionCell.tsx @@ -1,24 +1,27 @@ -import { Box, Divider } from '@mui/material'; +import { Box, Divider, styled } from '@mui/material'; import { FC, VFC } from 'react'; -import { useStyles } from './ActionCell.styles'; -const ActionCellDivider: VFC = () => { - const { classes } = useStyles(); - return ( - - ); -}; +const StyledContainer = styled(Box)(({ theme }) => ({ + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + padding: theme.spacing(0, 1.5), +})); + +const StyledDivider = styled(Divider)(({ theme }) => ({ + borderColor: theme.palette.dividerAlternative, + height: theme.spacing(3), + margin: theme.spacing(0, 2), +})); + +const ActionCellDivider: VFC = () => ( + +); const ActionCellComponent: FC & { Divider: typeof ActionCellDivider; } = ({ children }) => { - const { classes } = useStyles(); - - return {children}; + return {children}; }; ActionCellComponent.Divider = ActionCellDivider; diff --git a/frontend/src/component/common/Table/cells/FeatureSeenCell/FeatureSeenCell.styles.ts b/frontend/src/component/common/Table/cells/FeatureSeenCell/FeatureSeenCell.styles.ts deleted file mode 100644 index 27cb60bfc1..0000000000 --- a/frontend/src/component/common/Table/cells/FeatureSeenCell/FeatureSeenCell.styles.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { makeStyles } from 'tss-react/mui'; - -export const useStyles = makeStyles()(theme => ({ - container: { - display: 'flex', - padding: theme.spacing(1.5), - }, - box: { - width: '38px', - height: '38px', - background: 'gray', - borderRadius: '4px', - textAlign: 'center', - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - fontSize: theme.fontSizes.smallerBody, - margin: '0 auto', - }, -})); diff --git a/frontend/src/component/common/Table/cells/FeatureSeenCell/FeatureSeenCell.tsx b/frontend/src/component/common/Table/cells/FeatureSeenCell/FeatureSeenCell.tsx index 9c8f83abc5..ca0f27daf3 100644 --- a/frontend/src/component/common/Table/cells/FeatureSeenCell/FeatureSeenCell.tsx +++ b/frontend/src/component/common/Table/cells/FeatureSeenCell/FeatureSeenCell.tsx @@ -1,8 +1,7 @@ import React, { FC, VFC } from 'react'; import TimeAgo from 'react-timeago'; -import { Tooltip, useTheme } from '@mui/material'; +import { styled, Tooltip, useTheme } from '@mui/material'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; -import { useStyles } from './FeatureSeenCell.styles'; function shortenUnitName(unit?: string): string { switch (unit) { @@ -50,6 +49,24 @@ const useFeatureColor = () => { }; }; +const StyledContainer = styled('div')(({ theme }) => ({ + display: 'flex', + padding: theme.spacing(1.5), +})); + +const StyledBox = styled('div')(({ theme }) => ({ + width: '38px', + height: '38px', + background: theme.palette.background.paper, + borderRadius: `${theme.shape.borderRadius}px`, + textAlign: 'center', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + fontSize: theme.typography.body2.fontSize, + margin: '0 auto', +})); + interface IFeatureSeenCellProps { value?: string | Date | null; } @@ -59,21 +76,16 @@ const Wrapper: FC<{ unit?: string; tooltip: string }> = ({ tooltip, children, }) => { - const { classes: styles } = useStyles(); const getColor = useFeatureColor(); return ( -
+ -
+ {children} -
+ -
+ ); }; diff --git a/frontend/src/component/common/Table/cells/FeatureTypeCell/FeatureTypeCell.tsx b/frontend/src/component/common/Table/cells/FeatureTypeCell/FeatureTypeCell.tsx index 617d2d3260..88877c8250 100644 --- a/frontend/src/component/common/Table/cells/FeatureTypeCell/FeatureTypeCell.tsx +++ b/frontend/src/component/common/Table/cells/FeatureTypeCell/FeatureTypeCell.tsx @@ -1,15 +1,21 @@ import { VFC } from 'react'; -import { Tooltip } from '@mui/material'; +import { styled, Tooltip } from '@mui/material'; import { getFeatureTypeIcons } from 'utils/getFeatureTypeIcons'; import useFeatureTypes from 'hooks/api/getters/useFeatureTypes/useFeatureTypes'; -import { useStyles } from './FeatureTypeCell.styles'; interface IFeatureTypeProps { value?: string; } +const StyledContainer = styled('div')(({ theme }) => ({ + padding: theme.spacing(1.5), + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + color: theme.palette.text.disabled, +})); + export const FeatureTypeCell: VFC = ({ value }) => { - const { classes: styles } = useStyles(); const { featureTypes } = useFeatureTypes(); const IconComponent = getFeatureTypeIcons(value); @@ -20,10 +26,10 @@ export const FeatureTypeCell: VFC = ({ value }) => { const title = `This is a "${typeName || value}" toggle`; return ( -
+ - + -
+ ); }; diff --git a/frontend/src/component/common/Table/cells/HighlightCell/HighlightCell.styles.ts b/frontend/src/component/common/Table/cells/HighlightCell/HighlightCell.styles.ts deleted file mode 100644 index 3b47620556..0000000000 --- a/frontend/src/component/common/Table/cells/HighlightCell/HighlightCell.styles.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { makeStyles } from 'tss-react/mui'; - -export const useStyles = makeStyles()(theme => ({ - container: { - display: 'flex', - flexDirection: 'column', - justifyContent: 'center', - wordBreak: 'break-word', - padding: theme.spacing(1, 2), - }, - title: { - overflow: 'hidden', - textOverflow: 'ellipsis', - display: '-webkit-box', - WebkitBoxOrient: 'vertical', - WebkitLineClamp: '1', - lineClamp: '1', - }, - subtitle: { - color: theme.palette.text.secondary, - overflow: 'hidden', - textOverflow: 'ellipsis', - fontSize: 'inherit', - WebkitLineClamp: '1', - lineClamp: '1', - display: '-webkit-box', - WebkitBoxOrient: 'vertical', - }, -})); diff --git a/frontend/src/component/common/Table/cells/HighlightCell/HighlightCell.tsx b/frontend/src/component/common/Table/cells/HighlightCell/HighlightCell.tsx index 9690312ee0..d7147ca4e6 100644 --- a/frontend/src/component/common/Table/cells/HighlightCell/HighlightCell.tsx +++ b/frontend/src/component/common/Table/cells/HighlightCell/HighlightCell.tsx @@ -1,8 +1,7 @@ import { VFC } from 'react'; import { Highlighter } from 'component/common/Highlighter/Highlighter'; import { useSearchHighlightContext } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext'; -import { Box, Typography } from '@mui/material'; -import { useStyles } from './HighlightCell.styles'; +import { Box, styled } from '@mui/material'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; interface IHighlightCellProps { @@ -10,17 +9,43 @@ interface IHighlightCellProps { subtitle?: string; } +const StyledContainer = styled(Box)(({ theme }) => ({ + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + wordBreak: 'break-word', + padding: theme.spacing(1, 2), +})); + +const StyledTitle = styled('span')(({ theme }) => ({ + overflow: 'hidden', + textOverflow: 'ellipsis', + display: '-webkit-box', + WebkitBoxOrient: 'vertical', + WebkitLineClamp: '1', + lineClamp: '1', +})); + +const StyledSubtitle = styled('span')(({ theme }) => ({ + color: theme.palette.text.secondary, + overflow: 'hidden', + textOverflow: 'ellipsis', + fontSize: 'inherit', + WebkitLineClamp: '1', + lineClamp: '1', + display: '-webkit-box', + WebkitBoxOrient: 'vertical', +})); + export const HighlightCell: VFC = ({ value, subtitle, }) => { const { searchQuery } = useSearchHighlightContext(); - const { classes } = useStyles(); return ( - - + = ({ data-loading > {value} - + ( - + {subtitle} - + )} /> - + ); }; diff --git a/frontend/src/component/common/Table/cells/LinkCell/LinkCell.styles.ts b/frontend/src/component/common/Table/cells/LinkCell/LinkCell.styles.ts index 4e900c3329..8b3e1ae330 100644 --- a/frontend/src/component/common/Table/cells/LinkCell/LinkCell.styles.ts +++ b/frontend/src/component/common/Table/cells/LinkCell/LinkCell.styles.ts @@ -1,44 +1,53 @@ -import { makeStyles } from 'tss-react/mui'; +import { Link, styled, Theme } from '@mui/material'; +import { ComponentType } from 'react'; -export const useStyles = makeStyles()(theme => ({ - wrapper: { - paddingTop: theme.spacing(1.5), - paddingBottom: theme.spacing(1.5), - paddingLeft: theme.spacing(2), - paddingRight: theme.spacing(2), - display: 'flex', - alignItems: 'center', - minHeight: '62px', - }, - link: { - '&:hover, &:focus': { - textDecoration: 'none', - '& > div > span:first-of-type': { - textDecoration: 'underline', - }, +export const wrapperStyles = (theme: Theme) => ({ + paddingTop: theme.spacing(1.5), + paddingBottom: theme.spacing(1.5), + paddingLeft: theme.spacing(2), + paddingRight: theme.spacing(2), + display: 'flex', + alignItems: 'center', + minHeight: '62px', +}); + +export const StyledWrapper = styled('div')(({ theme }) => wrapperStyles(theme)); + +export const StyledLink = styled(Link)<{ + component?: ComponentType; + to?: string; +}>(({ theme }) => ({ + ...wrapperStyles(theme), + '&:hover, &:focus': { + textDecoration: 'none', + '& > div > span:first-of-type': { + textDecoration: 'underline', }, }, - container: { - display: 'flex', - flexDirection: 'column', - justifyContent: 'center', - wordBreak: 'break-all', - }, - title: { - overflow: 'hidden', - textOverflow: 'ellipsis', - display: '-webkit-box', - WebkitBoxOrient: 'vertical', - }, - description: { - color: theme.palette.text.secondary, - textDecoration: 'none', - fontSize: 'inherit', - WebkitLineClamp: 1, - lineClamp: 1, - overflow: 'hidden', - textOverflow: 'ellipsis', - display: '-webkit-box', - WebkitBoxOrient: 'vertical', - }, +})); + +export const StyledContainer = styled('div')(({ theme }) => ({ + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + wordBreak: 'break-all', +})); + +export const StyledTitle = styled('span')(({ theme }) => ({ + overflow: 'hidden', + textOverflow: 'ellipsis', + display: '-webkit-box', + WebkitBoxOrient: 'vertical', +})); + +export const StyledDescription = styled('span')(({ theme }) => ({ + color: theme.palette.text.secondary, + textDecoration: 'none', + fontSize: 'inherit', + WebkitLineClamp: 1, + lineClamp: 1, + overflow: 'hidden', + textOverflow: 'ellipsis', + display: '-webkit-box', + WebkitBoxOrient: 'vertical', })); diff --git a/frontend/src/component/common/Table/cells/LinkCell/LinkCell.tsx b/frontend/src/component/common/Table/cells/LinkCell/LinkCell.tsx index 3a3b9d91a7..2a2acb91a1 100644 --- a/frontend/src/component/common/Table/cells/LinkCell/LinkCell.tsx +++ b/frontend/src/component/common/Table/cells/LinkCell/LinkCell.tsx @@ -1,11 +1,16 @@ -import { FC } from 'react'; -import { Link, Typography } from '@mui/material'; +import { ComponentType, FC } from 'react'; +import { Link, styled, Typography } from '@mui/material'; import { Link as RouterLink } from 'react-router-dom'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; -import { useStyles } from './LinkCell.styles'; import { Highlighter } from 'component/common/Highlighter/Highlighter'; import { useSearchHighlightContext } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext'; -import classnames from 'classnames'; +import { + StyledWrapper, + StyledLink, + StyledContainer, + StyledTitle, + StyledDescription, +} from './LinkCell.styles'; interface ILinkCellProps { title?: string; @@ -21,14 +26,12 @@ export const LinkCell: FC = ({ subtitle, children, }) => { - const { classes: styles } = useStyles(); const { searchQuery } = useSearchHighlightContext(); const content = ( -
- + = ({ > {title} {children} - + - + {subtitle} - + } /> -
+ ); return to ? ( - + {content} - + ) : onClick ? ( - + {content} - + ) : ( - {content} + {content} ); }; diff --git a/frontend/src/component/common/Table/cells/TextCell/TextCell.styles.ts b/frontend/src/component/common/Table/cells/TextCell/TextCell.styles.ts deleted file mode 100644 index 273f9ead7c..0000000000 --- a/frontend/src/component/common/Table/cells/TextCell/TextCell.styles.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { makeStyles } from 'tss-react/mui'; - -export const useStyles = makeStyles<{ lineClamp?: number }>()( - (theme, { lineClamp }) => ({ - wrapper: { - padding: theme.spacing(1, 2), - display: '-webkit-box', - overflow: lineClamp ? 'hidden' : 'auto', - WebkitLineClamp: lineClamp ? lineClamp : 'none', - WebkitBoxOrient: 'vertical', - wordBreak: 'break-all', - [theme.breakpoints.down('sm')]: { - wordBreak: 'normal', - }, - }, - }) -); diff --git a/frontend/src/component/common/Table/cells/TextCell/TextCell.tsx b/frontend/src/component/common/Table/cells/TextCell/TextCell.tsx index 2e9f4cd15d..21214cba8d 100644 --- a/frontend/src/component/common/Table/cells/TextCell/TextCell.tsx +++ b/frontend/src/component/common/Table/cells/TextCell/TextCell.tsx @@ -1,6 +1,5 @@ import { FC } from 'react'; -import { Box, SxProps, Theme } from '@mui/material'; -import { useStyles } from './TextCell.styles'; +import { Box, styled, SxProps, Theme } from '@mui/material'; interface ITextCellProps { value?: string | null; @@ -9,20 +8,30 @@ interface ITextCellProps { sx?: SxProps; } +const StyledWrapper = styled(Box, { + shouldForwardProp: prop => prop !== 'lineClamp', +})<{ lineClamp?: number }>(({ theme, lineClamp }) => ({ + padding: theme.spacing(1, 2), + display: '-webkit-box', + overflow: lineClamp ? 'hidden' : 'auto', + WebkitLineClamp: lineClamp ? lineClamp : 'none', + WebkitBoxOrient: 'vertical', + wordBreak: 'break-all', + [theme.breakpoints.down('sm')]: { + wordBreak: 'normal', + }, +})); + export const TextCell: FC = ({ value, children, lineClamp, sx, 'data-testid': testid, -}) => { - const { classes } = useStyles({ lineClamp }); - - return ( - - - {children ?? value} - - - ); -}; +}) => ( + + + {children ?? value} + + +); diff --git a/frontend/src/component/common/ToastRenderer/ToastRenderer.styles.ts b/frontend/src/component/common/ToastRenderer/ToastRenderer.styles.ts deleted file mode 100644 index 6e3bf1e15f..0000000000 --- a/frontend/src/component/common/ToastRenderer/ToastRenderer.styles.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { makeStyles } from 'tss-react/mui'; - -export const useStyles = makeStyles()(theme => ({ - toastWrapper: { - right: 0, - left: 0, - margin: '0 auto', - maxWidth: '450px', - }, -})); diff --git a/frontend/src/component/common/ToastRenderer/ToastRenderer.tsx b/frontend/src/component/common/ToastRenderer/ToastRenderer.tsx index 345ffc6b0f..5171f2ac14 100644 --- a/frontend/src/component/common/ToastRenderer/ToastRenderer.tsx +++ b/frontend/src/component/common/ToastRenderer/ToastRenderer.tsx @@ -1,16 +1,17 @@ import { Portal } from '@mui/material'; -import { useContext, useEffect } from 'react'; -import { useThemeStyles } from 'themes/themeStyles'; +import { useContext, useEffect, useMemo } from 'react'; +import { + fadeInBottomEnter, + fadeInBottomLeave, + fadeInBottomStartWithoutFixed, +} from 'themes/themeStyles'; import UIContext from 'contexts/UIContext'; -import { useStyles } from './ToastRenderer.styles'; import AnimateOnMount from '../AnimateOnMount/AnimateOnMount'; import Toast from './Toast/Toast'; import { IToast } from 'interfaces/toast'; const ToastRenderer = () => { const { toastData, setToast } = useContext(UIContext); - const { classes: themeStyles } = useThemeStyles(); - const { classes: styles } = useStyles(); const hide = () => { setToast((prev: IToast) => ({ ...prev, show: false })); @@ -28,14 +29,28 @@ const ToastRenderer = () => { /* eslint-disable-next-line */ }, [toastData?.show]); + const animations = useMemo( + () => ({ + start: { + ...fadeInBottomStartWithoutFixed, + right: 0, + left: 0, + margin: '0 auto', + maxWidth: '450px', + }, + enter: fadeInBottomEnter, + leave: fadeInBottomLeave, + }), + [] + ); + return ( diff --git a/frontend/src/component/feedback/FeedbackNPS/FeedbackNPS.styles.ts b/frontend/src/component/feedback/FeedbackNPS/FeedbackNPS.styles.ts deleted file mode 100644 index 1562137a86..0000000000 --- a/frontend/src/component/feedback/FeedbackNPS/FeedbackNPS.styles.ts +++ /dev/null @@ -1,37 +0,0 @@ -import { makeStyles } from 'tss-react/mui'; - -export const useStyles = makeStyles()(theme => ({ - feedback: { - borderRadius: '12.5px', - backgroundColor: theme.palette.background.paper, - zIndex: 9999, - boxShadow: '2px 2px 4px 4px rgba(143,143,143, 0.25)', - padding: '1.5rem', - maxWidth: '400px', - }, - animateContainer: { - zIndex: 9999, - }, - container: { - display: 'flex', - flexDirection: 'column', - position: 'relative', - }, - close: { - position: 'absolute', - right: '-38px', - top: '-47px', - backgroundColor: theme.palette.background.paper, - boxShadow: '2px 2px 4px 4px rgba(143,143,143, 0.25)', - ['&:hover']: { - backgroundColor: '#fff', - }, - }, - logo: { - width: '25px', - height: '25px', - }, - cancel: { - marginLeft: '1rem', - }, -})); diff --git a/frontend/src/component/feedback/FeedbackNPS/FeedbackNPS.tsx b/frontend/src/component/feedback/FeedbackNPS/FeedbackNPS.tsx index 706cccf0d8..dfac048ccd 100644 --- a/frontend/src/component/feedback/FeedbackNPS/FeedbackNPS.tsx +++ b/frontend/src/component/feedback/FeedbackNPS/FeedbackNPS.tsx @@ -1,12 +1,15 @@ -import { useContext, useState } from 'react'; -import { Button, IconButton, Tooltip } from '@mui/material'; -import classnames from 'classnames'; +import { useContext, useMemo, useState } from 'react'; +import { Box, Button, IconButton, Tooltip, useTheme } from '@mui/material'; import CloseIcon from '@mui/icons-material/Close'; import { ReactComponent as Logo } from 'assets/icons/logoPlain.svg'; -import { useStyles } from 'component/feedback/FeedbackNPS/FeedbackNPS.styles'; import AnimateOnMount from 'component/common/AnimateOnMount/AnimateOnMount'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; -import { useThemeStyles } from 'themes/themeStyles'; +import { + contentSpacingY, + fadeInTopEnter, + fadeInTopLeave, + fadeInTopStart, +} from 'themes/themeStyles'; import UIContext from 'contexts/UIContext'; import { PNPS_FEEDBACK_ID, @@ -24,10 +27,18 @@ export const FeedbackNPS = ({ openUrl }: IFeedbackNPSProps) => { const { createFeedback, updateFeedback } = useAuthFeedbackApi(); const { feedback } = useAuthFeedback(); const [answeredNotNow, setAnsweredNotNow] = useState(false); - const { classes: styles } = useStyles(); - const { classes: themeStyles } = useThemeStyles(); + const theme = useTheme(); const feedbackId = PNPS_FEEDBACK_ID; + const animations = useMemo( + () => ({ + start: { ...fadeInTopStart(theme), zIndex: theme.zIndex.tooltip }, + enter: fadeInTopEnter, + leave: fadeInTopLeave, + }), + [theme] + ); + const onConfirm = async () => { try { await createFeedback({ feedbackId }); @@ -61,28 +72,53 @@ export const FeedbackNPS = ({ openUrl }: IFeedbackNPSProps) => { return ( -
-
+ setShowFeedback(false)} size="large" > - + { } /> -
+ { Yes, no problem
-
-
+ + + ); }; diff --git a/frontend/src/component/layout/MainLayout/MainLayout.tsx b/frontend/src/component/layout/MainLayout/MainLayout.tsx index de0f6c4a7c..66ae210160 100644 --- a/frontend/src/component/layout/MainLayout/MainLayout.tsx +++ b/frontend/src/component/layout/MainLayout/MainLayout.tsx @@ -6,8 +6,8 @@ import Proclamation from 'component/common/Proclamation/Proclamation'; import BreadcrumbNav from 'component/common/BreadcrumbNav/BreadcrumbNav'; import textureImage from 'assets/img/texture.png'; import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; -import { SkipNavLink } from 'component/common/SkipNav/SkipNavLink'; -import { SkipNavTarget } from 'component/common/SkipNav/SkipNavTarget'; +import { SkipNavLink } from 'component/common/SkipNavLink/SkipNavLink'; +import { SkipNavTarget } from 'component/common/SkipNavLink/SkipNavTarget'; import { formatAssetPath } from 'utils/formatPath'; import { useOptionalPathParam } from 'hooks/useOptionalPathParam'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; 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 67fbef9b6a..6319f7cd6c 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 @@ -32,14 +32,14 @@ exports[`renders an empty list correctly 1`] = ` className="css-j2179i" >
@@ -112,7 +112,7 @@ exports[`renders an empty list correctly 1`] = ` className="body css-ccg7sp-bodyContainer" >
@@ -177,7 +177,7 @@ exports[`renders an empty list correctly 1`] = `
Actions
@@ -240,7 +245,7 @@ exports[`renders an empty list correctly 1`] = ` >
-
Tag type description when loading
- +
-
Tag type description when loading
- +
-
Tag type description when loading
- +
-
Tag type description when loading
- +
-
Tag type description when loading
- +
({ '&:focus-visible': { @@ -51,6 +52,54 @@ export const defaultBorderRadius = (theme: Theme) => ({ borderRadius: `${theme.shape.borderRadius}px`, }); +export const fadeInBottomStart = () => ({ + opacity: '0', + position: 'fixed', + right: '40px', + bottom: '40px', + transform: 'translateY(400px)', +}); +export const fadeInBottomStartWithoutFixed: CSSProperties = { + opacity: '0', + right: '40px', + bottom: '40px', + transform: 'translateY(400px)', + zIndex: 1400, + position: 'fixed', +}; +export const fadeInBottomEnter: CSSProperties = { + transform: 'translateY(0)', + opacity: '1', + transition: 'transform 0.6s ease, opacity 1s ease', +}; +export const fadeInBottomLeave: CSSProperties = { + transform: 'translateY(400px)', + opacity: '0', + transition: 'transform 1.25s ease, opacity 1s ease', +}; +export const fadeInTopStart = (theme: Theme): CSSProperties => ({ + opacity: '0', + position: 'fixed', + right: '40px', + top: '40px', + transform: 'translateY(-400px)', + [theme.breakpoints.down('sm')]: { + right: 20, + left: 10, + top: 40, + }, +}); +export const fadeInTopEnter: CSSProperties = { + transform: 'translateY(100px)', + opacity: '1', + transition: 'transform 0.6s ease, opacity 1s ease', +}; +export const fadeInTopLeave: CSSProperties = { + transform: 'translateY(-400px)', + opacity: '0', + transition: 'transform 1.25s ease, opacity 1s ease', +}; + /** * Please extract styles below into MUI fragments as shown above * @deprecated @@ -117,53 +166,6 @@ export const useThemeStyles = makeStyles()(theme => ({ fontWeight: 'bold', marginBottom: '0.5rem', }, - fadeInBottomStart: { - opacity: '0', - position: 'fixed', - right: '40px', - bottom: '40px', - transform: 'translateY(400px)', - }, - fadeInBottomStartWithoutFixed: { - opacity: '0', - right: '40px', - bottom: '40px', - transform: 'translateY(400px)', - zIndex: 1400, - position: 'fixed', - }, - fadeInBottomEnter: { - transform: 'translateY(0)', - opacity: '1', - transition: 'transform 0.6s ease, opacity 1s ease', - }, - fadeInBottomLeave: { - transform: 'translateY(400px)', - opacity: '0', - transition: 'transform 1.25s ease, opacity 1s ease', - }, - fadeInTopStart: { - opacity: '0', - position: 'fixed', - right: '40px', - top: '40px', - transform: 'translateY(-400px)', - [theme.breakpoints.down('sm')]: { - right: 20, - left: 10, - top: 40, - }, - }, - fadeInTopEnter: { - transform: 'translateY(100px)', - opacity: '1', - transition: 'transform 0.6s ease, opacity 1s ease', - }, - fadeInTopLeave: { - transform: 'translateY(-400px)', - opacity: '0', - transition: 'transform 1.25s ease, opacity 1s ease', - }, error: { fontSize: theme.fontSizes.smallBody, color: theme.palette.error.main, diff --git a/frontend/src/utils/strategyNames.tsx b/frontend/src/utils/strategyNames.tsx index 81d0e1fd71..d5115537a5 100644 --- a/frontend/src/utils/strategyNames.tsx +++ b/frontend/src/utils/strategyNames.tsx @@ -1,4 +1,4 @@ -import { FC, ElementType } from 'react'; +import { FC } from 'react'; import { SvgIcon, useTheme } from '@mui/material'; import LocationOnIcon from '@mui/icons-material/LocationOn'; import PeopleIcon from '@mui/icons-material/People'; @@ -19,7 +19,7 @@ const RolloutSvgIcon: FC = props => ( /> ); -export const getFeatureStrategyIcon = (strategyName: string): ElementType => { +export const getFeatureStrategyIcon = (strategyName: string) => { switch (strategyName) { case 'default': return PowerSettingsNewIcon;