refactor: styles batch 3 (#2821)

Unleash · Jan 11, 2023 · ddb9d11 · ddb9d11
1 parent be1762d
commit ddb9d11
Show file tree

Hide file tree

Showing 51 changed files with 892 additions and 1,141 deletions.
diff --git 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<IProjectRoleForm> = ({
                 }}
             >
                 {children}
-                <Button onClick={onCancel} sx={{ ml: 2 }}>
+                <Button onClick={onCancel} sx={{ marginLeft: 2 }}>
                     Cancel
                 </Button>
             </Box>

diff --git 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={
                                     <Button
-                                        sx={{ ml: 2 }}
+                                        sx={{
+                                            marginLeft: theme =>
+                                                theme.spacing(2),
+                                        }}
                                         variant="outlined"
                                         onClick={onCancel}
                                     >

diff --git a/frontend/src/component/common/AnimateOnMount/AnimateOnMount.tsx b/frontend/src/component/common/AnimateOnMount/AnimateOnMount.tsx
@@ -1,13 +1,11 @@
-import React, { useEffect, useState, useRef, FC } from 'react';
+import React, { CSSProperties, useEffect, useState, useRef, FC } from 'react';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 
 interface IAnimateOnMountProps {
     mounted: boolean;
-    enter: string;
-    start: string;
-    leave?: string;
-    container?: string;
-    style?: React.CSSProperties;
+    enter: CSSProperties;
+    start: CSSProperties;
+    leave?: CSSProperties;
     onStart?: () => void;
     onEnd?: () => void;
 }
@@ -17,14 +15,12 @@ const AnimateOnMount: FC<IAnimateOnMountProps> = ({
     enter,
     start,
     leave,
-    container,
     children,
-    style,
     onStart,
     onEnd,
 }) => {
     const [show, setShow] = useState(mounted);
-    const [styles, setStyles] = useState('');
+    const [styles, setStyles] = useState<CSSProperties>({});
     const mountedRef = useRef<null | boolean>(null);
 
     useEffect(() => {
@@ -39,7 +35,7 @@ const AnimateOnMount: FC<IAnimateOnMountProps> = ({
                 if (!leave) {
                     setShow(false);
                 }
-                setStyles(leave || '');
+                setStyles(leave || {});
             }
         }
     }, [mounted, enter, onStart, leave]);
@@ -56,11 +52,8 @@ const AnimateOnMount: FC<IAnimateOnMountProps> = ({
             condition={show}
             show={
                 <div
-                    className={`${start} ${styles} ${
-                        container ? container : ''
-                    }`}
                     onTransitionEnd={onTransitionEnd}
-                    style={{ ...style }}
+                    style={{ ...start, ...styles }}
                 >
                     {children}
                 </div>

diff --git a/frontend/src/component/common/Search/Search.styles.ts b/frontend/src/component/common/Search/Search.styles.ts
diff --git a/frontend/src/component/common/Search/Search.tsx b/frontend/src/component/common/Search/Search.tsx
@@ -1,13 +1,11 @@
 import React, { useRef, useState } from 'react';
-import { IconButton, InputBase, Tooltip } from '@mui/material';
+import { useAsyncDebounce } from 'react-table';
+import { Box, IconButton, InputBase, styled, Tooltip } from '@mui/material';
 import { Search as SearchIcon, Close } from '@mui/icons-material';
-import classnames from 'classnames';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { useStyles } from './Search.styles';
 import { SearchSuggestions } from './SearchSuggestions/SearchSuggestions';
 import { IGetSearchContextOutput } from 'hooks/useSearch';
 import { useKeyboardShortcut } from 'hooks/useKeyboardShortcut';
-import { useAsyncDebounce } from 'react-table';
 
 interface ISearchProps {
     initialValue?: string;
@@ -21,6 +19,43 @@ interface ISearchProps {
     debounceTime?: number;
 }
 
+const StyledContainer = styled('div')(({ theme }) => ({
+    display: 'flex',
+    flexGrow: 1,
+    alignItems: 'center',
+    position: 'relative',
+    backgroundColor: theme.palette.background.paper,
+    maxWidth: '400px',
+    [theme.breakpoints.down('md')]: {
+        marginTop: theme.spacing(1),
+        maxWidth: '100%',
+    },
+}));
+
+const StyledSearch = styled('div')(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    backgroundColor: theme.palette.background.paper,
+    border: `1px solid ${theme.palette.neutral.border}`,
+    borderRadius: theme.shape.borderRadiusExtraLarge,
+    padding: '3px 5px 3px 12px',
+    width: '100%',
+    zIndex: 3,
+    '&:focus-within': {
+        borderColor: theme.palette.primary.light,
+        boxShadow: theme.boxShadows.main,
+    },
+}));
+
+const StyledInputBase = styled(InputBase)(({ theme }) => ({
+    width: '100%',
+}));
+
+const StyledClose = styled(Close)(({ theme }) => ({
+    color: theme.palette.neutral.main,
+    fontSize: theme.typography.body1.fontSize,
+}));
+
 export const Search = ({
     initialValue = '',
     onChange,
@@ -33,7 +68,6 @@ export const Search = ({
     debounceTime = 200,
 }: ISearchProps) => {
     const ref = useRef<HTMLInputElement>();
-    const { classes: styles } = useStyles();
     const [showSuggestions, setShowSuggestions] = useState(false);
 
     const [value, setValue] = useState(initialValue);
@@ -62,36 +96,25 @@ export const Search = ({
     const placeholder = `${customPlaceholder ?? 'Search'} (${hotkey})`;
 
     return (
-        <div className={styles.container} style={containerStyles}>
-            <div
-                className={classnames(
-                    styles.search,
-                    className,
-                    'search-container'
-                )}
-            >
+        <StyledContainer style={containerStyles}>
+            <StyledSearch className={className}>
                 <SearchIcon
-                    className={classnames(styles.searchIcon, 'search-icon')}
+                    sx={{
+                        mr: 1,
+                        color: theme => theme.palette.inactiveIcon,
+                    }}
                 />
-                <InputBase
+                <StyledInputBase
                     inputRef={ref}
                     placeholder={placeholder}
-                    classes={{
-                        root: classnames(styles.inputRoot, 'input-container'),
-                    }}
                     inputProps={{ 'aria-label': placeholder }}
                     value={value}
                     onChange={e => onSearchChange(e.target.value)}
                     onFocus={() => setShowSuggestions(true)}
                     onBlur={() => setShowSuggestions(false)}
                     disabled={disabled}
                 />
-                <div
-                    className={classnames(
-                        styles.clearContainer,
-                        'clear-container'
-                    )}
-                >
+                <Box sx={{ width: theme => theme.spacing(4) }}>
                     <ConditionallyRender
                         condition={Boolean(value)}
                         show={
@@ -102,20 +125,21 @@ export const Search = ({
                                         onSearchChange('');
                                         ref.current?.focus();
                                     }}
+                                    sx={{ padding: theme => theme.spacing(1) }}
                                 >
-                                    <Close className={styles.clearIcon} />
+                                    <StyledClose />
                                 </IconButton>
                             </Tooltip>
                         }
                     />
-                </div>
-            </div>
+                </Box>
+            </StyledSearch>
             <ConditionallyRender
                 condition={Boolean(hasFilters) && showSuggestions}
                 show={
                     <SearchSuggestions getSearchContext={getSearchContext!} />
                 }
             />
-        </div>
+        </StyledContainer>
     );
 };
diff --git a/frontend/src/component/common/SearchField/SearchField.tsx b/frontend/src/component/common/SearchField/SearchField.tsx
diff --git a/frontend/src/component/common/SearchField/styles.ts b/frontend/src/component/common/SearchField/styles.ts