Chore/make styles batch 1 2 (#2828)

<!-- 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! ❤️ -->
ApiTokenForm refactoring

## 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>
Co-authored-by: andreas-unleash <andreas@getunleash.ai>

frontend/src/component/admin/apiToken/ApiTokenForm/ApiTokenForm.styles.ts

@@ -1,47 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()(theme => ({
-    container: {
-        maxWidth: '400px',
-    },
-    form: {
-        display: 'flex',
-        flexDirection: 'column',
-        height: '100%',
-    },
-    input: { width: '100%', marginBottom: '1rem' },
-    selectInput: {
-        marginBottom: '1rem',
-        minWidth: '400px',
-        [theme.breakpoints.down(600)]: {
-            minWidth: '379px',
-        },
-    },
-    label: {
-        minWidth: '300px',
-        [theme.breakpoints.down(600)]: {
-            minWidth: 'auto',
-        },
-    },
-    cancelButton: {
-        marginLeft: '1.5rem',
-    },
-    inputDescription: {
-        marginBottom: '0.5rem',
-    },
-    permissionErrorContainer: {
-        position: 'relative',
-    },
-    errorMessage: {
-        fontSize: theme.fontSizes.smallBody,
-        color: theme.palette.error.main,
-        position: 'absolute',
-        top: '-8px',
-    },
-    selectOptionsLink: {
-        cursor: 'pointer',
-    },
-    selectOptionCheckbox: {
-        marginRight: '0.2rem',
-    },
-}));

frontend/src/component/admin/apiToken/ApiTokenForm/ApiTokenForm.tsx

@@ -1,13 +1,14 @@
 import {
+    Alert,
+    Box,
     Button,
     FormControl,
     FormControlLabel,
+    Link,
     Radio,
     RadioGroup,
+    styled,
     Typography,
-    Box,
-    Link,
-    Alert,
 } from '@mui/material';
 import { KeyboardArrowDownOutlined } from '@mui/icons-material';
 import React from 'react';
@@ -18,7 +19,6 @@ import Input from 'component/common/Input/Input';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { SelectProjectInput } from './SelectProjectInput/SelectProjectInput';
 import { ApiTokenFormErrorType } from './useApiTokenForm';
-import { useStyles } from './ApiTokenForm.styles';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { TokenType } from 'interfaces/token';
 
@@ -38,6 +38,47 @@ interface IApiTokenFormProps {
     clearErrors: (error?: ApiTokenFormErrorType) => void;
 }
 
+const StyledContainer = styled('div')(() => ({
+    maxWidth: '400px',
+}));
+
+const StyledForm = styled('form')(() => ({
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+}));
+
+const StyledInput = styled(Input)(({ theme }) => ({
+    width: '100%',
+    marginBottom: theme.spacing(2),
+}));
+
+const StyledSelectInput = styled(GeneralSelect)(({ theme }) => ({
+    marginBottom: theme.spacing(2),
+    minWidth: '400px',
+    [theme.breakpoints.down('sm')]: {
+        minWidth: '379px',
+    },
+}));
+
+const StyledInputDescription = styled('p')(({ theme }) => ({
+    marginBottom: theme.spacing(1),
+}));
+
+const StyledInputLabel = styled('label')(({ theme }) => ({
+    marginBottom: theme.spacing(1),
+}));
+
+const CancelButton = styled(Button)(({ theme }) => ({
+    marginLeft: theme.spacing(3),
+}));
+
+const StyledBox = styled(Box)({
+    marginTop: 'auto',
+    display: 'flex',
+    justifyContent: 'flex-end',
+});
+
 const ApiTokenForm: React.FC<IApiTokenFormProps> = ({
     children,
     username,
@@ -54,7 +95,6 @@ const ApiTokenForm: React.FC<IApiTokenFormProps> = ({
     clearErrors,
 }) => {
     const { uiConfig } = useUiConfig();
-    const { classes: styles } = useStyles();
     const { environments } = useEnvironments();
     const { projects: availableProjects } = useProjects();
 
@@ -97,7 +137,7 @@ const ApiTokenForm: React.FC<IApiTokenFormProps> = ({
     const isUnleashCloud = Boolean(uiConfig?.flags?.UNLEASH_CLOUD);
 
     return (
-        <form onSubmit={handleSubmit} className={styles.form}>
+        <StyledForm onSubmit={handleSubmit}>
             <ConditionallyRender
                 condition={isUnleashCloud}
                 show={
@@ -110,12 +150,11 @@ const ApiTokenForm: React.FC<IApiTokenFormProps> = ({
                     </Alert>
                 }
             />
-            <div className={styles.container}>
-                <p className={styles.inputDescription}>
+            <StyledContainer>
+                <StyledInputDescription>
                     What would you like to call this token?
-                </p>
-                <Input
-                    className={styles.input}
+                </StyledInputDescription>
+                <StyledInput
                     value={username}
                     name="username"
                     onChange={e => setUsername(e.target.value)}
@@ -126,9 +165,9 @@ const ApiTokenForm: React.FC<IApiTokenFormProps> = ({
                     autoFocus
                 />
                 <FormControl sx={{ mb: 2, width: '100%' }}>
-                    <label id="token-type" className={styles.inputDescription}>
+                    <StyledInputLabel id="token-type">
                         What do you want to connect?
-                    </label>
+                    </StyledInputLabel>
                     <RadioGroup
                         aria-labelledby="token-type"
                         defaultValue="CLIENT"
@@ -166,9 +205,9 @@ const ApiTokenForm: React.FC<IApiTokenFormProps> = ({
                         ))}
                     </RadioGroup>
                 </FormControl>
-                <p className={styles.inputDescription}>
+                <StyledInputDescription>
                     Which project do you want to give access to?
-                </p>
+                </StyledInputDescription>
                 <SelectProjectInput
                     disabled={type === TokenType.ADMIN}
                     options={selectableProjects}
@@ -177,10 +216,10 @@ const ApiTokenForm: React.FC<IApiTokenFormProps> = ({
                     error={errors?.projects}
                     onFocus={() => clearErrors('projects')}
                 />
-                <p className={styles.inputDescription}>
+                <StyledInputDescription>
                     Which environment should the token have access to?
-                </p>
-                <GeneralSelect
+                </StyledInputDescription>
+                <StyledSelectInput
                     disabled={type === TokenType.ADMIN}
                     options={selectableEnvs}
                     value={environment}
@@ -190,22 +229,13 @@ const ApiTokenForm: React.FC<IApiTokenFormProps> = ({
                     name="environment"
                     IconComponent={KeyboardArrowDownOutlined}
                     fullWidth
-                    className={styles.selectInput}
                 />
-            </div>
-            <Box
-                sx={{
-                    marginTop: 'auto',
-                    display: 'flex',
-                    justifyContent: 'flex-end',
-                }}
-            >
+            </StyledContainer>
+            <StyledBox>
                 {children}
-                <Button onClick={handleCancel} className={styles.cancelButton}>
-                    Cancel
-                </Button>
-            </Box>
-        </form>
+                <CancelButton onClick={handleCancel}>Cancel</CancelButton>
+            </StyledBox>
+        </StyledForm>
     );
 };
 

frontend/src/component/admin/apiToken/ApiTokenForm/SelectProjectInput/SelectAllButton/SelectAllButton.styles.ts

@@ -1,8 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()(theme => ({
-    selectOptionsLink: {
-        cursor: 'pointer',
-        fontSize: theme.fontSizes.bodySize,
-    },
-}));

frontend/src/component/admin/apiToken/ApiTokenForm/SelectProjectInput/SelectAllButton/SelectAllButton.tsx

@@ -1,28 +1,25 @@
 import React, { FC } from 'react';
-import { Box, Link } from '@mui/material';
-import { useStyles } from './SelectAllButton.styles';
+import { Box, Link, styled } from '@mui/material';
 
 type SelectAllButtonProps = {
     isAllSelected: boolean;
     onClick: () => void;
 };
 
+const StyledLink = styled(Link)(({ theme }) => ({
+    cursor: 'pointer',
+    fontSize: theme.fontSizes.bodySize,
+})) as typeof Link;
+
 export const SelectAllButton: FC<SelectAllButtonProps> = ({
     isAllSelected,
     onClick,
 }) => {
-    const { classes: styles } = useStyles();
-
     return (
         <Box sx={{ ml: 3.5, my: 0.5 }}>
-            <Link
-                onClick={onClick}
-                className={styles.selectOptionsLink}
-                component="button"
-                underline="hover"
-            >
+            <StyledLink onClick={onClick} component="button" underline="hover">
                 {isAllSelected ? 'Deselect all' : 'Select all'}
-            </Link>
+            </StyledLink>
         </Box>
     );
 };

frontend/src/component/admin/apiToken/ApiTokenForm/SelectProjectInput/SelectProjectInput.styles.ts

@@ -1,7 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()(theme => ({
-    selectOptionCheckbox: {
-        marginRight: '0.2rem',
-    },
-}));

frontend/src/component/admin/apiToken/ApiTokenForm/SelectProjectInput/SelectProjectInput.tsx

@@ -5,6 +5,7 @@ import {
     TextField,
     Box,
     Paper,
+    styled,
 } from '@mui/material';
 import { Autocomplete } from '@mui/material';
 
@@ -17,7 +18,6 @@ import {
 import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
 import CheckBoxIcon from '@mui/icons-material/CheckBox';
 import { IAutocompleteBoxOption } from 'component/common/AutocompleteBox/AutocompleteBox';
-import { useStyles } from '../ApiTokenForm.styles';
 import { SelectAllButton } from './SelectAllButton/SelectAllButton';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 
@@ -26,6 +26,10 @@ const ALL_PROJECTS = '*';
 // Fix for shadow under Autocomplete - match with Select input
 const CustomPaper = ({ ...props }) => <Paper elevation={8} {...props} />;
 
+const SelectOptionCheckbox = styled(Checkbox)(({ theme }) => ({
+    marginRight: theme.spacing(0.4),
+}));
+
 export interface ISelectProjectInputProps {
     disabled?: boolean;
     options: IAutocompleteBoxOption[];
@@ -43,7 +47,6 @@ export const SelectProjectInput: VFC<ISelectProjectInputProps> = ({
     error,
     onFocus,
 }) => {
-    const { classes: styles } = useStyles();
     const [projects, setProjects] = useState<string[]>(
         typeof defaultValue === 'string' ? [defaultValue] : defaultValue
     );
@@ -82,11 +85,10 @@ export const SelectProjectInput: VFC<ISelectProjectInputProps> = ({
         { selected }: AutocompleteRenderOptionState
     ) => (
         <li {...props}>
-            <Checkbox
+            <SelectOptionCheckbox
                 icon={<CheckBoxOutlineBlankIcon fontSize="small" />}
                 checkedIcon={<CheckBoxIcon fontSize="small" />}
                 checked={selected}
-                className={styles.selectOptionCheckbox}
             />
             {option.label}
         </li>