From 74410d292bad2b93017250d5a8f10ea858e3ba3c Mon Sep 17 00:00:00 2001 From: andreas-unleash Date: Mon, 9 Jan 2023 10:41:58 +0200 Subject: [PATCH] MakeStyles refactor 1-3 (#2835) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: andreas-unleash MakeStyles refactor 1-3 ## About the changes Closes # ### Important files ## Discussion points Signed-off-by: andreas-unleash --- .../ProjectRoleDeleteConfirm.styles.ts | 10 ---- .../ProjectRoleDeleteConfirm.tsx | 26 ++++++---- .../ProjectRoleList/ProjectRoleList.tsx | 2 +- .../ChangeRequestsTabs.styles.ts | 12 ----- .../ChangeRequestsTabs/ChangeRequestsTabs.tsx | 25 +++++++--- .../AnnouncerElement.styles.ts | 14 ------ .../AnnouncerElement/AnnouncerElement.tsx | 20 +++++--- .../AutocompleteBox/AutocompleteBox.styles.ts | 26 ---------- .../AutocompleteBox/AutocompleteBox.tsx | 50 +++++++++++++------ .../FeedbackCESForm.test.tsx.snap | 2 +- .../__snapshots__/ApiDetails.test.tsx.snap | 8 +-- .../Footer/__snapshots__/Footer.test.tsx.snap | 4 +- .../__snapshots__/TagTypeList.test.tsx.snap | 2 +- 13 files changed, 93 insertions(+), 108 deletions(-) delete mode 100644 frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleDeleteConfirm/ProjectRoleDeleteConfirm.styles.ts delete mode 100644 frontend/src/component/common/Announcer/AnnouncerElement/AnnouncerElement.styles.ts diff --git a/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleDeleteConfirm/ProjectRoleDeleteConfirm.styles.ts b/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleDeleteConfirm/ProjectRoleDeleteConfirm.styles.ts deleted file mode 100644 index b6278aeb91..0000000000 --- a/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleDeleteConfirm/ProjectRoleDeleteConfirm.styles.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { makeStyles } from 'tss-react/mui'; - -export const useStyles = makeStyles()(theme => ({ - deleteParagraph: { - marginTop: theme.spacing(3), - }, - roleDeleteInput: { - marginTop: '1rem', - }, -})); diff --git a/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleDeleteConfirm/ProjectRoleDeleteConfirm.tsx b/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleDeleteConfirm/ProjectRoleDeleteConfirm.tsx index ed719e68f0..cc1c5eba52 100644 --- a/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleDeleteConfirm/ProjectRoleDeleteConfirm.tsx +++ b/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleDeleteConfirm/ProjectRoleDeleteConfirm.tsx @@ -1,34 +1,39 @@ -import { Alert } from '@mui/material'; +import { Alert, styled } from '@mui/material'; import React from 'react'; import { IProjectRole } from 'interfaces/role'; import { Dialogue } from 'component/common/Dialogue/Dialogue'; import Input from 'component/common/Input/Input'; -import { useStyles } from './ProjectRoleDeleteConfirm.styles'; interface IProjectRoleDeleteConfirmProps { role: IProjectRole; open: boolean; - setDeldialogue: React.Dispatch>; + setDialogue: React.Dispatch>; handleDeleteRole: (id: number) => Promise; confirmName: string; setConfirmName: React.Dispatch>; } +const DeleteParagraph = styled('p')(({ theme }) => ({ + marginTop: theme.spacing(3), +})); + +const RoleDeleteInput = styled(Input)(({ theme }) => ({ + marginTop: theme.spacing(2), +})); + const ProjectRoleDeleteConfirm = ({ role, open, - setDeldialogue, + setDialogue, handleDeleteRole, confirmName, setConfirmName, }: IProjectRoleDeleteConfirmProps) => { - const { classes: styles } = useStyles(); - const handleChange = (e: React.ChangeEvent) => setConfirmName(e.currentTarget.value); const handleCancel = () => { - setDeldialogue(false); + setDialogue(false); setConfirmName(''); }; const formId = 'delete-project-role-confirmation-form'; @@ -49,18 +54,17 @@ const ProjectRoleDeleteConfirm = ({ feature toggles. -

+ In order to delete this role, please enter the name of the role in the textfield below: {role?.name} -

+
-
diff --git a/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleList/ProjectRoleList.tsx b/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleList/ProjectRoleList.tsx index 9c08b75467..fb180108f6 100644 --- a/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleList/ProjectRoleList.tsx +++ b/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleList/ProjectRoleList.tsx @@ -261,7 +261,7 @@ const ProjectRoleList = () => { ({ padding: theme.spacing(4), overflowX: 'auto', }, - tabContainer: { - paddingLeft: 0, - paddingBottom: 0, - }, - tabButton: { - textTransform: 'none', - width: 'auto', - fontSize: '1rem', - [theme.breakpoints.up('md')]: { - minWidth: 160, - }, - }, })); diff --git a/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestsTabs.tsx b/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestsTabs.tsx index 014ddc9aad..aa02407750 100644 --- a/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestsTabs.tsx +++ b/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestsTabs.tsx @@ -8,7 +8,7 @@ import { } from 'component/common/Table'; import { SortingRule, useSortBy, useTable } from 'react-table'; import { SearchHighlightProvider } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext'; -import { Tab, Tabs, useMediaQuery } from '@mui/material'; +import { styled, Tab, Tabs, useMediaQuery } from '@mui/material'; import { sortTypes } from 'utils/sortTypes'; import { useEffect, useMemo, useState } from 'react'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; @@ -23,9 +23,9 @@ import { ChangeRequestStatusCell } from './ChangeRequestStatusCell/ChangeRequest import { AvatarCell } from './AvatarCell/AvatarCell'; import { ChangeRequestTitleCell } from './ChangeRequestTitleCell/ChangeRequestTitleCell'; import { TableBody, TableRow } from 'component/common/Table'; -import { useStyles } from './ChangeRequestsTabs.styles'; import { createLocalStorage } from 'utils/createLocalStorage'; import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColumns'; +import { useStyles } from './ChangeRequestsTabs.styles'; export interface IChangeRequestTableProps { changeRequests: any[]; @@ -37,6 +37,20 @@ const defaultSort: SortingRule & { columns?: string[]; } = { id: 'createdAt' }; +const StyledTabContainer = styled('div')({ + paddingLeft: 0, + paddingBottom: 0, +}); + +const StyledTabButton = styled(Tab)(({ theme }) => ({ + textTransform: 'none', + width: 'auto', + fontSize: theme.fontSizes.bodySize, + [theme.breakpoints.up('md')]: { + minWidth: 160, + }, +})); + export const ChangeRequestsTabs = ({ changeRequests = [], loading, @@ -216,7 +230,7 @@ export const ChangeRequestsTabs = ({ header={ + {tabs.map((tab, index) => ( - setActiveTab(index)} - className={classes.tabButton} /> ))} - + } actions={ { - const { classes: styles } = useStyles(); - return ( -
{announcement} -
+ ); }; diff --git a/frontend/src/component/common/AutocompleteBox/AutocompleteBox.styles.ts b/frontend/src/component/common/AutocompleteBox/AutocompleteBox.styles.ts index d7b20bf80e..2d8e20fa28 100644 --- a/frontend/src/component/common/AutocompleteBox/AutocompleteBox.styles.ts +++ b/frontend/src/component/common/AutocompleteBox/AutocompleteBox.styles.ts @@ -1,32 +1,6 @@ import { makeStyles } from 'tss-react/mui'; export const useStyles = makeStyles()(theme => ({ - container: { - display: 'flex', - alignItems: 'center', - borderRadius: '1rem', - '& .MuiInputLabel-root[data-shrink="false"]': { - top: 3, - }, - }, - icon: { - background: theme.palette.featureSegmentSearchBackground, - height: 48, - width: 48, - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - paddingLeft: 6, - borderTopLeftRadius: 40, - borderBottomLeftRadius: 40, - color: '#fff', - }, - iconDisabled: { - background: theme.palette.primary.light, - }, - autocomplete: { - flex: 1, - }, inputRoot: { height: 48, borderTopLeftRadius: 0, diff --git a/frontend/src/component/common/AutocompleteBox/AutocompleteBox.tsx b/frontend/src/component/common/AutocompleteBox/AutocompleteBox.tsx index e43e4123a4..a3a4056e98 100644 --- a/frontend/src/component/common/AutocompleteBox/AutocompleteBox.tsx +++ b/frontend/src/component/common/AutocompleteBox/AutocompleteBox.tsx @@ -1,9 +1,8 @@ import { useStyles } from 'component/common/AutocompleteBox/AutocompleteBox.styles'; import { Search, ArrowDropDown } from '@mui/icons-material'; -import { Autocomplete } from '@mui/material'; +import { Autocomplete, styled } from '@mui/material'; import { AutocompleteRenderInputParams } from '@mui/material/Autocomplete'; import { TextField } from '@mui/material'; -import classNames from 'classnames'; interface IAutocompleteBoxProps { label: string; @@ -18,6 +17,36 @@ export interface IAutocompleteBoxOption { label: string; } +const StyledContainer = styled('div')(({ theme }) => ({ + display: 'flex', + alignItems: 'center', + borderRadius: theme.spacing(2), + '& .MuiInputLabel-root[data-shrink="false"]': { + top: 3, + }, +})); + +const StyledIcon = styled('div', { + shouldForwardProp: (prop: string) => !prop.startsWith('$'), +})<{ $disabled: boolean }>(({ theme, $disabled }) => ({ + background: $disabled + ? theme.palette.primary.light + : theme.palette.featureSegmentSearchBackground, + height: '48px', + width: '48px', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + paddingLeft: 6, + borderTopLeftRadius: '40px', + borderBottomLeftRadius: '40px', + color: theme.palette.text.tertiaryContrast, +})); + +const StyledAutocomplete = styled(Autocomplete)({ + flex: 1, +}) as typeof Autocomplete; + export const AutocompleteBox = ({ label, options, @@ -32,18 +61,11 @@ export const AutocompleteBox = ({ }; return ( -
-
+ + -
- + -
+ ); }; diff --git a/frontend/src/component/feedback/FeedbackCES/__snapshots__/FeedbackCESForm.test.tsx.snap b/frontend/src/component/feedback/FeedbackCES/__snapshots__/FeedbackCESForm.test.tsx.snap index 344ba39ca2..27cd579408 100644 --- a/frontend/src/component/feedback/FeedbackCES/__snapshots__/FeedbackCESForm.test.tsx.snap +++ b/frontend/src/component/feedback/FeedbackCES/__snapshots__/FeedbackCESForm.test.tsx.snap @@ -182,7 +182,7 @@ exports[`FeedbackCESForm 1`] = `
diff --git a/frontend/src/component/menu/Footer/ApiDetails/__snapshots__/ApiDetails.test.tsx.snap b/frontend/src/component/menu/Footer/ApiDetails/__snapshots__/ApiDetails.test.tsx.snap index b645b3f8cf..b8bce5663f 100644 --- a/frontend/src/component/menu/Footer/ApiDetails/__snapshots__/ApiDetails.test.tsx.snap +++ b/frontend/src/component/menu/Footer/ApiDetails/__snapshots__/ApiDetails.test.tsx.snap @@ -26,7 +26,7 @@ exports[`renders correctly with empty version 1`] = `
@@ -60,7 +60,7 @@ exports[`renders correctly with ui-config 1`] = `
@@ -94,7 +94,7 @@ exports[`renders correctly with versionInfo 1`] = `
@@ -121,7 +121,7 @@ exports[`renders correctly without uiConfig 1`] = `
diff --git a/frontend/src/component/menu/Footer/__snapshots__/Footer.test.tsx.snap b/frontend/src/component/menu/Footer/__snapshots__/Footer.test.tsx.snap index 5477316465..c6e738838f 100644 --- a/frontend/src/component/menu/Footer/__snapshots__/Footer.test.tsx.snap +++ b/frontend/src/component/menu/Footer/__snapshots__/Footer.test.tsx.snap @@ -438,7 +438,7 @@ exports[`should render DrawerMenu 1`] = `
, @@ -883,7 +883,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
, 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 a8178160e3..6937ff7da6 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 @@ -1092,7 +1092,7 @@ exports[`renders an empty list correctly 1`] = `