MakeStyles refactor 1-3 (#2835)

Signed-off-by: andreas-unleash <andreas@getunleash.ai>

MakeStyles refactor 1-3
<!-- Thanks for creating a PR! To make it easier for reviewers and
everyone else to understand what your changes relate to, please add some
relevant content to the headings below. Feel free to ignore or delete
sections that you don't think are relevant. Thank you! ❤️ -->

## About the changes
<!-- Describe the changes introduced. What are they and why are they
being introduced? Feel free to also add screenshots or steps to view the
changes if they're visual. -->

<!-- Does it close an issue? Multiple? -->
Closes #

<!-- (For internal contributors): Does it relate to an issue on public
roadmap? -->
<!--
Relates to [roadmap](https://github.com/orgs/Unleash/projects/10) item:
#
-->

### Important files
<!-- PRs can contain a lot of changes, but not all changes are equally
important. Where should a reviewer start looking to get an overview of
the changes? Are any files particularly important? -->


## Discussion points
<!-- Anything about the PR you'd like to discuss before it gets merged?
Got any questions or doubts? -->

Signed-off-by: andreas-unleash <andreas@getunleash.ai>

frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleDeleteConfirm/ProjectRoleDeleteConfirm.styles.ts

@@ -1,10 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()(theme => ({
-    deleteParagraph: {
-        marginTop: theme.spacing(3),
-    },
-    roleDeleteInput: {
-        marginTop: '1rem',
-    },
-}));

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<React.SetStateAction<boolean>>;
+    setDialogue: React.Dispatch<React.SetStateAction<boolean>>;
     handleDeleteRole: (id: number) => Promise<void>;
     confirmName: string;
     setConfirmName: React.Dispatch<React.SetStateAction<string>>;
 }
 
+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<HTMLInputElement>) =>
         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.
             </Alert>
 
-            <p className={styles.deleteParagraph}>
+            <DeleteParagraph>
                 In order to delete this role, please enter the name of the role
                 in the textfield below: <strong>{role?.name}</strong>
-            </p>
+            </DeleteParagraph>
 
             <form id={formId}>
-                <Input
+                <RoleDeleteInput
                     autoFocus
                     onChange={handleChange}
                     value={confirmName}
                     label="Role name"
-                    className={styles.roleDeleteInput}
                 />
             </form>
         </Dialogue>

frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleList/ProjectRoleList.tsx

@@ -261,7 +261,7 @@ const ProjectRoleList = () => {
             <ProjectRoleDeleteConfirm
                 role={currentRole!}
                 open={delDialog}
-                setDeldialogue={setDelDialog}
+                setDialogue={setDelDialog}
                 handleDeleteRole={deleteProjectRole}
                 confirmName={confirmName}
                 setConfirmName={setConfirmName}

frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestsTabs.styles.ts

@@ -8,16 +8,4 @@ export const useStyles = makeStyles()(theme => ({
         padding: theme.spacing(4),
         overflowX: 'auto',
     },
-    tabContainer: {
-        paddingLeft: 0,
-        paddingBottom: 0,
-    },
-    tabButton: {
-        textTransform: 'none',
-        width: 'auto',
-        fontSize: '1rem',
-        [theme.breakpoints.up('md')]: {
-            minWidth: 160,
-        },
-    },
 }));

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<string> & {
     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={
                 <PageHeader
                     titleElement={
-                        <div className={classes.tabContainer}>
+                        <StyledTabContainer>
                             <Tabs
                                 value={tabs[activeTab]?.title}
                                 indicatorColor="primary"
@@ -225,16 +239,15 @@ export const ChangeRequestsTabs = ({
                                 allowScrollButtonsMobile
                             >
                                 {tabs.map((tab, index) => (
-                                    <Tab
+                                    <StyledTabButton
                                         key={tab.title}
                                         label={`${tab.title} (${tab.data.length})`}
                                         value={tab.title}
                                         onClick={() => setActiveTab(index)}
-                                        className={classes.tabButton}
                                     />
                                 ))}
                             </Tabs>
-                        </div>
+                        </StyledTabContainer>
                     }
                     actions={
                         <Search

frontend/src/component/common/Announcer/AnnouncerElement/AnnouncerElement.styles.ts

@@ -1,14 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()({
-    container: {
-        clip: 'rect(0 0 0 0)',
-        clipPath: 'inset(50%)',
-        zIndex: -1,
-        width: 1,
-        height: 1,
-        margin: -1,
-        padding: 0,
-        overflow: 'hidden',
-    },
-});

frontend/src/component/common/Announcer/AnnouncerElement/AnnouncerElement.tsx

@@ -1,25 +1,33 @@
 import React, { ReactElement } from 'react';
-import { useStyles } from 'component/common/Announcer/AnnouncerElement/AnnouncerElement.styles';
 import { ANNOUNCER_ELEMENT_TEST_ID } from 'utils/testIds';
+import { styled } from '@mui/material';
 
 interface IAnnouncerElementProps {
     announcement?: string;
 }
 
+const StyledContainer = styled('div')({
+    clip: 'rect(0 0 0 0)',
+    clipPath: 'inset(50%)',
+    zIndex: -1,
+    width: 1,
+    height: 1,
+    margin: -1,
+    padding: 0,
+    overflow: 'hidden',
+});
+
 export const AnnouncerElement = ({
     announcement,
 }: IAnnouncerElementProps): ReactElement => {
-    const { classes: styles } = useStyles();
-
     return (
-        <div
+        <StyledContainer
             role="status"
             aria-live="polite"
             aria-atomic
-            className={styles.container}
             data-testid={ANNOUNCER_ELEMENT_TEST_ID}
         >
             {announcement}
-        </div>
+        </StyledContainer>
     );
 };

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,

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 (
-        <div className={styles.container}>
+        <StyledContainer>
-            <div
+            <StyledIcon $disabled={Boolean(disabled)} aria-hidden>
-                className={classNames(
-                    styles.icon,
-                    disabled && styles.iconDisabled
-                )}
-                aria-hidden
-            >
                 <Search />
-            </div>
+            </StyledIcon>
-            <Autocomplete
+            <StyledAutocomplete
-                className={styles.autocomplete}
                 classes={{ inputRoot: styles.inputRoot }}
                 options={options}
                 value={value}
@@ -55,6 +77,6 @@ export const AutocompleteBox = ({
                 size="small"
                 multiple
             />
-        </div>
+        </StyledContainer>
     );
 };

frontend/src/component/feedback/FeedbackCES/__snapshots__/FeedbackCESForm.test.tsx.snap

@@ -182,7 +182,7 @@ exports[`FeedbackCESForm 1`] = `
     <div
       aria-atomic="true"
       aria-live="polite"
-      class="css-i8rqz1-container"
+      class="css-gqbqkz"
       data-testid="ANNOUNCER_ELEMENT_TEST_ID"
       role="status"
     />

frontend/src/component/menu/Footer/ApiDetails/__snapshots__/ApiDetails.test.tsx.snap

@@ -26,7 +26,7 @@ exports[`renders correctly with empty version 1`] = `
     <div
       aria-atomic="true"
       aria-live="polite"
-      class="css-i8rqz1-container"
+      class="css-gqbqkz"
       data-testid="ANNOUNCER_ELEMENT_TEST_ID"
       role="status"
     />
@@ -60,7 +60,7 @@ exports[`renders correctly with ui-config 1`] = `
     <div
       aria-atomic="true"
       aria-live="polite"
-      class="css-i8rqz1-container"
+      class="css-gqbqkz"
       data-testid="ANNOUNCER_ELEMENT_TEST_ID"
       role="status"
     />
@@ -94,7 +94,7 @@ exports[`renders correctly with versionInfo 1`] = `
     <div
       aria-atomic="true"
       aria-live="polite"
-      class="css-i8rqz1-container"
+      class="css-gqbqkz"
       data-testid="ANNOUNCER_ELEMENT_TEST_ID"
       role="status"
     />
@@ -121,7 +121,7 @@ exports[`renders correctly without uiConfig 1`] = `
     <div
       aria-atomic="true"
       aria-live="polite"
-      class="css-i8rqz1-container"
+      class="css-gqbqkz"
       data-testid="ANNOUNCER_ELEMENT_TEST_ID"
       role="status"
     />

frontend/src/component/menu/Footer/__snapshots__/Footer.test.tsx.snap

@@ -438,7 +438,7 @@ exports[`should render DrawerMenu 1`] = `
   <div
     aria-atomic={true}
     aria-live="polite"
-    className="css-i8rqz1-container"
+    className="css-gqbqkz"
     data-testid="ANNOUNCER_ELEMENT_TEST_ID"
     role="status"
   />,
@@ -883,7 +883,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
   <div
     aria-atomic={true}
     aria-live="polite"
-    className="css-i8rqz1-container"
+    className="css-gqbqkz"
     data-testid="ANNOUNCER_ELEMENT_TEST_ID"
     role="status"
   />,

frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap

@@ -1092,7 +1092,7 @@ exports[`renders an empty list correctly 1`] = `
   <div
     aria-atomic={true}
     aria-live="polite"
-    className="css-i8rqz1-container"
+    className="css-gqbqkz"
     data-testid="ANNOUNCER_ELEMENT_TEST_ID"
     role="status"
   >