From 093156f5f50821ee8b6f60fc57643d15ed1cfc5a Mon Sep 17 00:00:00 2001 From: Fredrik Strand Oseberg Date: Tue, 3 Jan 2023 16:15:22 +0100 Subject: [PATCH] Refactor/make styles batch 6 part 2 (#2811) Adds another batch of refactored components --- .../StrategyItem/FeatureStrategyItem.tsx | 2 +- .../PlaygroundParameterItem.tsx | 57 ++++--- .../PlaygroundParametertem.styles.ts | 32 ---- .../project/Project/Project.styles.ts | 140 +++++++++++------- .../src/component/project/Project/Project.tsx | 85 ++++------- .../ActionsCell/ActionsCell.styles.ts | 19 --- .../ActionsCell/ActionsCell.tsx | 25 +++- .../ColumnsMenu/ColumnsMenu.styles.ts | 70 +++++---- .../ColumnsMenu/ColumnsMenu.tsx | 44 +++--- .../FeatureToggleSwitch.styles.ts | 9 -- .../FeatureToggleSwitch.tsx | 15 +- .../ProjectFeatureToggles.styles.ts | 56 ------- .../ProjectFeatureToggles.tsx | 15 +- .../project/Project/ProjectOverview.tsx | 23 ++- frontend/src/themes/themeStyles.ts | 6 +- 15 files changed, 271 insertions(+), 327 deletions(-) delete mode 100644 frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/PlaygroundParameterItem/PlaygroundParametertem.styles.ts delete mode 100644 frontend/src/component/project/Project/ProjectFeatureToggles/ActionsCell/ActionsCell.styles.ts delete mode 100644 frontend/src/component/project/Project/ProjectFeatureToggles/FeatureToggleSwitch/FeatureToggleSwitch.styles.ts diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/FeatureStrategyItem.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/FeatureStrategyItem.tsx index c7322509c0..1abdc8ab12 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/FeatureStrategyItem.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/FeatureStrategyItem.tsx @@ -33,7 +33,7 @@ export const FeatureStrategyItem = ({ style={{ borderColor: result.enabled ? theme.palette.success.main - : 'inherit', + : 'none', }} strategy={{ ...strategy, id: `${objectId(strategy)}` }} orderNumber={index + 1} diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/PlaygroundParameterItem/PlaygroundParameterItem.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/PlaygroundParameterItem/PlaygroundParameterItem.tsx index 0653054755..014eacc685 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/PlaygroundParameterItem/PlaygroundParameterItem.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/PlaygroundParameterItem/PlaygroundParameterItem.tsx @@ -1,9 +1,7 @@ -import { Chip, Typography, useTheme } from '@mui/material'; +import { Chip, Typography, useTheme, styled } from '@mui/material'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; -import { useStyles } from './PlaygroundParametertem.styles'; import StringTruncator from 'component/common/StringTruncator/StringTruncator'; import { CancelOutlined } from '@mui/icons-material'; -import classnames from 'classnames'; interface IConstraintItemProps { value: Array; @@ -12,29 +10,55 @@ interface IConstraintItemProps { showReason?: boolean; } +const StyledDivContainer = styled('div', { + shouldForwardProp: prop => prop !== 'showReason', +})<{ showReason?: boolean }>(({ theme, showReason }) => ({ + width: '100%', + padding: theme.spacing(2, 3), + borderRadius: theme.shape.borderRadiusMedium, + border: `1px solid ${theme.palette.dividerAlternative}`, + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + gap: theme.spacing(2), + opacity: showReason ? 0.9 : 1, + backgroundColor: showReason ? theme.palette.background.paper : 'inherit', +})); + +const StyledDivColumn = styled('div')(({ theme }) => ({ + flexDirection: 'column', +})); + +const StyledChip = styled(Chip)(({ theme }) => ({ + margin: theme.spacing(0.5), +})); + +const StyledParagraph = styled('p')(({ theme }) => ({ + display: 'inline', + margin: theme.spacing(0.5, 0), + maxWidth: '95%', + textAlign: 'center', + wordBreak: 'break-word', +})); + export const PlaygroundParameterItem = ({ value, text, input, showReason = false, }: IConstraintItemProps) => { - const { classes: styles } = useStyles(); const theme = useTheme(); const color = input === 'no value' ? 'error' : 'neutral'; const reason = `value does not match any ${text}`; return ( -
+ {`${input}`} -
+ No {text}s added yet.

} elseShow={
-

+ {value.length}{' '} {value.length > 1 ? `${text}s` : text} will get access. -

+ {value.map((v: string | number) => ( - } - className={styles.chip} /> ))}
} /> -
+ } elseShow={
} /> -
+ ); }; diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/PlaygroundParameterItem/PlaygroundParametertem.styles.ts b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/PlaygroundParameterItem/PlaygroundParametertem.styles.ts deleted file mode 100644 index b09f72eced..0000000000 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/PlaygroundParameterItem/PlaygroundParametertem.styles.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { makeStyles } from 'tss-react/mui'; - -export const useStyles = makeStyles()(theme => ({ - container: { - width: '100%', - padding: theme.spacing(2, 3), - borderRadius: theme.shape.borderRadiusMedium, - border: `1px solid ${theme.palette.dividerAlternative}`, - display: 'flex', - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'space-between', - gap: theme.spacing(2), - }, - disabled: { - backgroundColor: theme.palette.neutral.light, - opacity: '90%', - }, - chip: { - margin: '0.25rem', - }, - column: { - flexDirection: 'column', - }, - paragraph: { - display: 'inline', - margin: '0.25rem 0', - maxWidth: '95%', - textAlign: 'center', - wordBreak: 'break-word', - }, -})); diff --git a/frontend/src/component/project/Project/Project.styles.ts b/frontend/src/component/project/Project/Project.styles.ts index 5132164be8..30bbea7753 100644 --- a/frontend/src/component/project/Project/Project.styles.ts +++ b/frontend/src/component/project/Project/Project.styles.ts @@ -1,61 +1,87 @@ -import { makeStyles } from 'tss-react/mui'; +import { styled, Tab } from '@mui/material'; +import { FavoriteIconButton } from 'component/common/FavoriteIconButton/FavoriteIconButton'; -export const useStyles = makeStyles()(theme => ({ - containerStyles: { - display: 'flex', - [theme.breakpoints.down('md')]: { - flexDirection: 'column', - }, +export const StyledDiv = styled('div')(() => ({ + display: 'flex', +})); + +export const StyledTopRow = styled('div')(() => ({ + display: 'flex', + flexDirection: 'row', + justifyContent: 'space-between', + width: '100%', +})); + +export const StyledColumn = styled('div')(() => ({ + display: 'flex', + flexDirection: 'column', +})); + +export const StyledName = styled('div')(() => ({ + overflow: 'hidden', + textOverflow: 'ellipsis', + whiteSpace: 'nowrap', +})); + +export const StyledTitle = styled('span')(({ theme }) => ({ + fontSize: theme.fontSizes.smallBody, + fontWeight: 'normal', +})); + +export const StyledText = styled(StyledTitle)(({ theme }) => ({ + color: theme.palette.neutral.dark, +})); + +export const StyledFavoriteIconButton = styled(FavoriteIconButton)( + ({ theme }) => ({ + marginLeft: theme.spacing(-1.5), + }) +); + +export const StyledHeader = styled('div')(({ theme }) => ({ + backgroundColor: theme.palette.background.paper, + borderRadius: theme.shape.borderRadiusLarge, + marginBottom: theme.spacing(2), +})); + +export const StyledInnerContainer = styled('div')(({ theme }) => ({ + padding: theme.spacing(2.5, 5), + display: 'flex', + flexDirection: 'column', + alignItems: 'start', +})); + +export const StyledProjectTitle = styled('h2')(({ theme }) => ({ + margin: 0, + width: '100%', + fontSize: theme.fontSizes.mainHeader, + fontWeight: 'bold', + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', + gap: theme.spacing(2), +})); + +export const StyledSeparator = styled('div')(({ theme }) => ({ + width: '100%', + backgroundColor: theme.palette.tertiary.light, + height: '1px', +})); + +export const StyledTabContainer = styled('div')(({ theme }) => ({ + padding: theme.spacing(0, 4), +})); + +export const StyledTab = styled(Tab)(({ theme }) => ({ + textTransform: 'none', + fontSize: theme.fontSizes.bodySize, + flexGrow: 1, + flexBasis: 0, + [theme.breakpoints.down('md')]: { + paddingLeft: theme.spacing(1), + paddingRight: theme.spacing(1), }, - projectToggles: { - width: '100%', - minWidth: 0, - }, - header: { - backgroundColor: theme.palette.background.paper, - borderRadius: theme.shape.borderRadiusLarge, - marginBottom: '1rem', - }, - innerContainer: { - padding: '1.25rem 2rem', - display: 'flex', - flexDirection: 'column', - alignItems: 'start', - }, - separator: { - width: '100%', - backgroundColor: theme.palette.grey[200], - height: '1px', - }, - tabContainer: { - padding: '0 2rem', - }, - tabButton: { - textTransform: 'none', - fontSize: '1rem', - flexGrow: 1, - flexBasis: 0, - [theme.breakpoints.down('md')]: { - paddingLeft: theme.spacing(1), - paddingRight: theme.spacing(1), - }, - [theme.breakpoints.up('md')]: { - minWidth: 160, - }, - }, - title: { - margin: 0, - width: '100%', - fontSize: theme.fontSizes.mainHeader, - fontWeight: 'bold', - display: 'flex', - justifyContent: 'space-between', - alignItems: 'center', - gap: '1rem', - }, - titleText: { - overflow: 'hidden', - textOverflow: 'ellipsis', - whiteSpace: 'nowrap', + [theme.breakpoints.up('md')]: { + minWidth: 160, }, })); diff --git a/frontend/src/component/project/Project/Project.tsx b/frontend/src/component/project/Project/Project.tsx index 507a59ef80..7ff78b4f6d 100644 --- a/frontend/src/component/project/Project/Project.tsx +++ b/frontend/src/component/project/Project/Project.tsx @@ -2,8 +2,22 @@ import { useNavigate } from 'react-router'; import useProject from 'hooks/api/getters/useProject/useProject'; import useLoading from 'hooks/useLoading'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; -import { useStyles } from './Project.styles'; -import { styled, Tab, Tabs } from '@mui/material'; +import { + StyledColumn, + StyledDiv, + StyledFavoriteIconButton, + StyledHeader, + StyledInnerContainer, + StyledName, + StyledProjectTitle, + StyledSeparator, + StyledTab, + StyledTabContainer, + StyledText, + StyledTitle, + StyledTopRow, +} from './Project.styles'; +import { Tabs } from '@mui/material'; import { Delete, Edit } from '@mui/icons-material'; import useToast from 'hooks/useToast'; import useQueryParams from 'hooks/useQueryParams'; @@ -28,53 +42,17 @@ import { MainLayout } from 'component/layout/MainLayout/MainLayout'; import { ProjectChangeRequests } from '../../changeRequest/ProjectChangeRequests/ProjectChangeRequests'; import { ProjectSettings } from './ProjectSettings/ProjectSettings'; import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled'; -import { FavoriteIconButton } from 'component/common/FavoriteIconButton/FavoriteIconButton'; import { useFavoriteProjectsApi } from 'hooks/api/actions/useFavoriteProjectsApi/useFavoriteProjectsApi'; -const StyledDiv = styled('div')(() => ({ - display: 'flex', -})); - -const StyledTopRow = styled('div')(() => ({ - display: 'flex', - flexDirection: 'row', - justifyContent: 'space-between', - width: '100%', -})); - -const Column = styled('div')(() => ({ - display: 'flex', - flexDirection: 'column', -})); - -const StyledName = styled('div')(() => ({ - overflow: 'hidden', - textOverflow: 'ellipsis', - whiteSpace: 'nowrap', -})); - -const StyledTitle = styled('span')(({ theme }) => ({ - fontSize: theme.fontSizes.smallBody, - fontWeight: 'normal', -})); -const StyledText = styled(StyledTitle)(({ theme }) => ({ - color: theme.palette.grey[800], -})); - -const StyledFavoriteIconButton = styled(FavoriteIconButton)(({ theme }) => ({ - marginLeft: theme.spacing(-1.5), -})); - const Project = () => { const projectId = useRequiredPathParam('projectId'); const params = useQueryParams(); const { project, loading, refetch } = useProject(projectId); const ref = useLoading(loading); const { setToastData } = useToast(); - const { classes: styles } = useStyles(); const navigate = useNavigate(); const { pathname } = useLocation(); - const { isOss, uiConfig } = useUiConfig(); + const { isOss } = useUiConfig(); const basePath = `/projects/${projectId}`; const projectName = project?.name || projectId; const { isChangeRequestConfiguredInAnyEnv } = @@ -152,19 +130,19 @@ const Project = () => { ) : null } > -
-
+ + -

+ {projectName} -

+ { - -

+ +
{
-

- -
+ + + -
-
+ + { allowScrollButtonsMobile > {tabs.map(tab => ( - navigate(tab.path)} - className={styles.tabButton} /> ))} -
-
+ + ({ - cell: { - display: 'flex', - justifyContent: 'center', - paddingRight: theme.spacing(2), - }, - menuContainer: { - borderRadius: theme.shape.borderRadiusLarge, - padding: theme.spacing(1, 1.5), - }, - item: { - borderRadius: theme.shape.borderRadius, - }, - text: { - fontSize: theme.fontSizes.smallBody, - }, -})); diff --git a/frontend/src/component/project/Project/ProjectFeatureToggles/ActionsCell/ActionsCell.tsx b/frontend/src/component/project/Project/ProjectFeatureToggles/ActionsCell/ActionsCell.tsx index 3d28b972d4..2631c9286f 100644 --- a/frontend/src/component/project/Project/ProjectFeatureToggles/ActionsCell/ActionsCell.tsx +++ b/frontend/src/component/project/Project/ProjectFeatureToggles/ActionsCell/ActionsCell.tsx @@ -9,19 +9,26 @@ import { Popover, Tooltip, Typography, + styled, } from '@mui/material'; import { Link as RouterLink } from 'react-router-dom'; import MoreVertIcon from '@mui/icons-material/MoreVert'; import FileCopyIcon from '@mui/icons-material/FileCopy'; import ArchiveIcon from '@mui/icons-material/Archive'; import WatchLaterIcon from '@mui/icons-material/WatchLater'; -import { useStyles } from './ActionsCell.styles'; import { PermissionHOC } from 'component/common/PermissionHOC/PermissionHOC'; import { CREATE_FEATURE, DELETE_FEATURE, UPDATE_FEATURE, } from 'component/providers/AccessProvider/permissions'; +import { defaultBorderRadius } from 'themes/themeStyles'; + +const StyledBoxCell = styled(Box)(({ theme }) => ({ + display: 'flex', + justifyContent: 'center', + paddingRight: theme.spacing(2), +})); interface IActionsCellProps { projectId: string; @@ -42,7 +49,6 @@ export const ActionsCell: VFC = ({ onOpenStaleDialog, }) => { const [anchorEl, setAnchorEl] = useState(null); - const { classes } = useStyles(); const { original: { name: featureId, stale }, } = row; @@ -58,7 +64,7 @@ export const ActionsCell: VFC = ({ const menuId = `${id}-menu`; return ( - + = ({ anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }} disableScrollLock={true} PaperProps={{ - className: classes.menuContainer, + sx: theme => ({ + borderRadius: theme.shape.borderRadius, + padding: theme.spacing(1, 1.5), + }), }} > @@ -90,7 +99,7 @@ export const ActionsCell: VFC = ({ > {({ hasAccess }) => ( = ({ > {({ hasAccess }) => ( { onOpenArchiveDialog(featureId); handleClose(); @@ -137,7 +146,7 @@ export const ActionsCell: VFC = ({ > {({ hasAccess }) => ( { handleClose(); onOpenStaleDialog({ @@ -160,6 +169,6 @@ export const ActionsCell: VFC = ({ - + ); }; diff --git a/frontend/src/component/project/Project/ProjectFeatureToggles/ColumnsMenu/ColumnsMenu.styles.ts b/frontend/src/component/project/Project/ProjectFeatureToggles/ColumnsMenu/ColumnsMenu.styles.ts index 94ab8ddebb..c688a3def3 100644 --- a/frontend/src/component/project/Project/ProjectFeatureToggles/ColumnsMenu/ColumnsMenu.styles.ts +++ b/frontend/src/component/project/Project/ProjectFeatureToggles/ColumnsMenu/ColumnsMenu.styles.ts @@ -1,35 +1,41 @@ -import { makeStyles } from 'tss-react/mui'; +import { + Box, + Checkbox, + Divider, + IconButton, + MenuItem, + styled, +} from '@mui/material'; -export const useStyles = makeStyles()(theme => ({ - container: { - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - }, - button: { - margin: theme.spacing(-1, 0), - }, - menuContainer: { - borderRadius: theme.shape.borderRadiusLarge, - paddingBottom: theme.spacing(2), - }, - menuHeader: { - display: 'flex', - alignItems: 'center', - justifyContent: 'space-between', - padding: theme.spacing(1, 1, 0, 4), - }, - menuItem: { - padding: theme.spacing(0, 2), - margin: theme.spacing(0, 2), - borderRadius: theme.shape.borderRadius, - }, - checkbox: { - padding: theme.spacing(0.75, 1), - }, - divider: { - '&.MuiDivider-root.MuiDivider-fullWidth': { - margin: theme.spacing(0.75, 0), - }, +import { flexRow } from 'themes/themeStyles'; + +export const StyledBoxContainer = styled(Box)(() => ({ + ...flexRow, + justifyContent: 'center', +})); + +export const StyledIconButton = styled(IconButton)(({ theme }) => ({ + margin: theme.spacing(-1, 0), +})); + +export const StyledBoxMenuHeader = styled(Box)(({ theme }) => ({ + ...flexRow, + justifyContent: 'space-between', + padding: theme.spacing(1, 1, 0, 4), +})); + +export const StyledMenuItem = styled(MenuItem)(({ theme }) => ({ + padding: theme.spacing(0, 2), + margin: theme.spacing(0, 2), + borderRadius: theme.shape.borderRadius, +})); + +export const StyledDivider = styled(Divider)(({ theme }) => ({ + '&.MuiDivider-root.MuiDivider-fullWidth': { + margin: theme.spacing(0.75, 0), }, })); + +export const StyledCheckbox = styled(Checkbox)(({ theme }) => ({ + padding: theme.spacing(0.75, 1), +})); diff --git a/frontend/src/component/project/Project/ProjectFeatureToggles/ColumnsMenu/ColumnsMenu.tsx b/frontend/src/component/project/Project/ProjectFeatureToggles/ColumnsMenu/ColumnsMenu.tsx index b1cdc28953..53a784e64b 100644 --- a/frontend/src/component/project/Project/ProjectFeatureToggles/ColumnsMenu/ColumnsMenu.tsx +++ b/frontend/src/component/project/Project/ProjectFeatureToggles/ColumnsMenu/ColumnsMenu.tsx @@ -1,12 +1,8 @@ import { useEffect, useState, VFC } from 'react'; import { - Box, - Checkbox, - Divider, IconButton, ListItemIcon, ListItemText, - MenuItem, MenuList, Popover, Tooltip, @@ -17,7 +13,14 @@ import { import ColumnIcon from '@mui/icons-material/ViewWeek'; import CloseIcon from '@mui/icons-material/Close'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; -import { useStyles } from './ColumnsMenu.styles'; +import { + StyledBoxContainer, + StyledBoxMenuHeader, + StyledCheckbox, + StyledDivider, + StyledIconButton, + StyledMenuItem, +} from './ColumnsMenu.styles'; interface IColumnsMenuProps { allColumns: { @@ -51,7 +54,6 @@ export const ColumnsMenu: VFC = ({ setHiddenColumns, }) => { const [anchorEl, setAnchorEl] = useState(null); - const { classes } = useStyles(); const theme = useTheme(); const isTinyScreen = useMediaQuery(theme.breakpoints.down('sm')); const isSmallScreen = useMediaQuery(theme.breakpoints.down('md')); @@ -104,9 +106,9 @@ export const ColumnsMenu: VFC = ({ const menuId = `columns-menu-list-${id}`; return ( - + - = ({ onClick={handleClick} type="button" size="large" - className={classes.button} data-loading > - + = ({ }} disableScrollLock={true} PaperProps={{ - className: classes.menuContainer, + sx: theme => ({ + borderRadius: theme.shape.borderRadius, + paddingBottom: theme.spacing(2), + }), }} > - + Columns - + {allColumns .filter(({ hideInMenu }) => !hideInMenu) .map(column => [ } + show={} />, - column.toggleHidden(column.isVisible) } disabled={staticColumns.includes(column.id)} - className={classes.menuItem} > - = ({ 'aria-labelledby': column.id, }} size="medium" - className={classes.checkbox} /> = ({ } /> - , + , } + show={} />, ])} - + ); }; diff --git a/frontend/src/component/project/Project/ProjectFeatureToggles/FeatureToggleSwitch/FeatureToggleSwitch.styles.ts b/frontend/src/component/project/Project/ProjectFeatureToggles/FeatureToggleSwitch/FeatureToggleSwitch.styles.ts deleted file mode 100644 index 62f56ce55a..0000000000 --- a/frontend/src/component/project/Project/ProjectFeatureToggles/FeatureToggleSwitch/FeatureToggleSwitch.styles.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { makeStyles } from 'tss-react/mui'; - -export const useStyles = makeStyles()(theme => ({ - container: { - mx: 'auto', - display: 'flex', - justifyContent: 'center', - }, -})); diff --git a/frontend/src/component/project/Project/ProjectFeatureToggles/FeatureToggleSwitch/FeatureToggleSwitch.tsx b/frontend/src/component/project/Project/ProjectFeatureToggles/FeatureToggleSwitch/FeatureToggleSwitch.tsx index eed2093976..2585683312 100644 --- a/frontend/src/component/project/Project/ProjectFeatureToggles/FeatureToggleSwitch/FeatureToggleSwitch.tsx +++ b/frontend/src/component/project/Project/ProjectFeatureToggles/FeatureToggleSwitch/FeatureToggleSwitch.tsx @@ -1,9 +1,14 @@ import { VFC } from 'react'; -import { Box } from '@mui/material'; +import { Box, styled } from '@mui/material'; import PermissionSwitch from 'component/common/PermissionSwitch/PermissionSwitch'; import { UPDATE_FEATURE_ENVIRONMENT } from 'component/providers/AccessProvider/permissions'; import { useOptimisticUpdate } from './hooks/useOptimisticUpdate'; -import { useStyles } from './FeatureToggleSwitch.styles'; +import { flexRow } from 'themes/themeStyles'; + +const StyledBoxContainer = styled(Box)(() => ({ + mx: 'auto', + ...flexRow, +})); interface IFeatureToggleSwitchProps { featureName: string; @@ -25,7 +30,6 @@ export const FeatureToggleSwitch: VFC = ({ value, onToggle, }) => { - const { classes } = useStyles(); const [isChecked, setIsChecked, rollbackIsChecked] = useOptimisticUpdate(value); @@ -37,8 +41,7 @@ export const FeatureToggleSwitch: VFC = ({ }; return ( - = ({ onClick={onClick} disabled={isChecked !== value} /> - + ); }; diff --git a/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.styles.ts b/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.styles.ts index 9d85368f65..9ea7f7fc3c 100644 --- a/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.styles.ts +++ b/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.styles.ts @@ -13,60 +13,4 @@ export const useStyles = makeStyles()(theme => ({ width: 'inherit', }, }, - headerClass: { - '& th': { - fontSize: theme.fontSizes.smallerBody, - lineHeight: '1rem', - }, - }, - bodyClass: { - overflowX: 'auto', - padding: theme.spacing(4), - }, - header: { - padding: '1rem', - }, - title: { - display: 'unset', - }, - iconButton: { - marginRight: '1rem', - }, - icon: { - color: '#000', - height: '30px', - width: '30px', - }, - noTogglesFound: { - marginBottom: '0.5rem', - }, - link: { - textDecoration: 'none', - color: theme.palette.primary.main, - }, - actionsContainer: { - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - }, - search: { - border: `1px solid ${theme.palette.grey[300]}`, - height: 35, - marginRight: '2rem', - }, - button: { - whiteSpace: 'nowrap', - }, - row: { - position: 'absolute', - width: '100%', - }, - cell: { - alignItems: 'center', - display: 'flex', - flexShrink: 0, - '& > *': { - flexGrow: 1, - }, - }, })); diff --git a/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx b/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx index 863f7cec90..a0bc3deeee 100644 --- a/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx +++ b/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx @@ -1,5 +1,5 @@ import { useCallback, useEffect, useMemo, useState } from 'react'; -import { useMediaQuery, useTheme } from '@mui/material'; +import { styled, useMediaQuery, useTheme } from '@mui/material'; import { Add } from '@mui/icons-material'; import { useNavigate, useSearchParams } from 'react-router-dom'; import { SortingRule, useFlexLayout, useSortBy, useTable } from 'react-table'; @@ -9,7 +9,6 @@ import { PageContent } from 'component/common/PageContent/PageContent'; import ResponsiveButton from 'component/common/ResponsiveButton/ResponsiveButton'; import { getCreateTogglePath } from 'utils/routePathHelpers'; import { CREATE_FEATURE } from 'component/providers/AccessProvider/permissions'; -import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; import { useRequiredPathParam } from 'hooks/useRequiredPathParam'; import { DateCell } from 'component/common/Table/cells/DateCell/DateCell'; import { LinkCell } from 'component/common/Table/cells/LinkCell/LinkCell'; @@ -47,6 +46,10 @@ import { FeatureTagCell } from 'component/common/Table/cells/FeatureTagCell/Feat import { useGlobalLocalStorage } from 'hooks/useGlobalLocalStorage'; import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColumns'; +const StyledResponsiveButton = styled(ResponsiveButton)(() => ({ + whiteSpace: 'nowrap', +})); + interface IProjectFeatureTogglesProps { features: IProject['features']; environments: IProject['environments']; @@ -102,7 +105,6 @@ export const ProjectFeatureToggles = ({ useGlobalLocalStorage(); const navigate = useNavigate(); const [searchParams, setSearchParams] = useSearchParams(); - const { uiConfig } = useUiConfig(); const { isChangeRequestConfigured } = useChangeRequestsEnabled(projectId); const environments = useEnvironmentsRef( loading ? ['a', 'b', 'c'] : newEnvironments @@ -488,10 +490,8 @@ export const ProjectFeatureToggles = ({ @@ -515,7 +515,7 @@ export const ProjectFeatureToggles = ({ setHiddenColumns={setHiddenColumns} /> - navigate(getCreateTogglePath(projectId)) } @@ -523,10 +523,9 @@ export const ProjectFeatureToggles = ({ Icon={Add} projectId={projectId} permission={CREATE_FEATURE} - className={styles.button} > New feature toggle - + } > diff --git a/frontend/src/component/project/Project/ProjectOverview.tsx b/frontend/src/component/project/Project/ProjectOverview.tsx index 54f4e41fc0..96c4abeba9 100644 --- a/frontend/src/component/project/Project/ProjectOverview.tsx +++ b/frontend/src/component/project/Project/ProjectOverview.tsx @@ -1,9 +1,9 @@ import useProject, { useProjectNameOrId, } from 'hooks/api/getters/useProject/useProject'; +import { styled } from '@mui/material'; import { ProjectFeatureToggles } from './ProjectFeatureToggles/ProjectFeatureToggles'; import ProjectInfo from './ProjectInfo/ProjectInfo'; -import { useStyles } from './Project.styles'; import { usePageTitle } from 'hooks/usePageTitle'; import { useRequiredPathParam } from 'hooks/useRequiredPathParam'; import { useLastViewedProject } from '../../../hooks/useLastViewedProject'; @@ -11,12 +11,23 @@ import { useEffect } from 'react'; const refreshInterval = 15 * 1000; +const StyledContainer = styled('div')(({ theme }) => ({ + display: 'flex', + [theme.breakpoints.down('md')]: { + flexDirection: 'column', + }, +})); + +const StyledProjectToggles = styled('div')(() => ({ + width: '100%', + minWidth: 0, +})); + const ProjectOverview = () => { const projectId = useRequiredPathParam('projectId'); const projectName = useProjectNameOrId(projectId); const { project, loading } = useProject(projectId, { refreshInterval }); const { members, features, health, description, environments } = project; - const { classes: styles } = useStyles(); usePageTitle(`Project overview – ${projectName}`); const { setLastViewed } = useLastViewedProject(); @@ -25,7 +36,7 @@ const ProjectOverview = () => { }, [projectId, setLastViewed]); return ( -
+ { health={health} featureCount={features?.length} /> -
+ -
-
+ + ); }; diff --git a/frontend/src/themes/themeStyles.ts b/frontend/src/themes/themeStyles.ts index 753d9f174b..d2fd1dbdb5 100644 --- a/frontend/src/themes/themeStyles.ts +++ b/frontend/src/themes/themeStyles.ts @@ -14,7 +14,11 @@ export const focusable = (theme: Theme) => ({ export const flexRow = { display: 'flex', alignItems: 'center', -}; +} as const; + +export const defaultBorderRadius = (theme: Theme) => ({ + borderRadius: `${theme.shape.borderRadius}px`, +}); /** * Please extract styles below into MUI fragments as shown above