feat: design my apps along with app layout

packages/web/src/components/SearchInput/index.tsx

@@ -1,7 +1,10 @@
+import InputLabel from '@mui/material/InputLabel';
+import OutlinedInput from '@mui/material/OutlinedInput';
+import InputAdornment from '@mui/material/InputAdornment';
+import FormControl from '@mui/material/FormControl';
 import SearchIcon from '@mui/icons-material/Search';
 
 import useFormatMessage from 'hooks/useFormatMessage';
-import { Search, SearchIconWrapper, InputBase } from './style';
 
 type SearchInputProps = {
   onChange?: (event: React.ChangeEvent) => void;
@@ -11,16 +14,26 @@ export default function SearchInput({ onChange }: SearchInputProps) {
   const formatMessage = useFormatMessage();
 
   return (
-    <Search>
-      <SearchIconWrapper>
-        <SearchIcon />
-      </SearchIconWrapper>
+    <FormControl variant="outlined" fullWidth>
+      <InputLabel
+        htmlFor="search-input"
+      >
+        {formatMessage('searchPlaceholder')}
+      </InputLabel>
 
-      <InputBase
-        placeholder={formatMessage('searchPlaceholder')}
-        inputProps={{ 'aria-label': 'search' }}
+      <OutlinedInput
+        id="search-input"
+        type="text"
+        size="medium"
+        fullWidth
         onChange={onChange}
+        endAdornment={
+          <InputAdornment position="end">
+            <SearchIcon sx={{ color: (theme) => theme.palette.primary.main }} />
+          </InputAdornment>
+        }
+        label={formatMessage('searchPlaceholder')}
       />
-    </Search>
+    </FormControl>
   );
 }

packages/web/src/components/SearchInput/style.ts

@@ -1,48 +0,0 @@
-import { styled, alpha } from '@mui/material/styles';
-import MuiInput from '@mui/material/Input';
-
-export const Search = styled('div')(({ theme }) => ({
-  position: 'relative',
-  borderRadius: theme.shape.borderRadius,
-  backgroundColor: alpha(theme.palette.common.white, 0.15),
-  '&:hover': {
-    backgroundColor: alpha(theme.palette.common.white, 0.25),
-  },
-  marginLeft: 0,
-  width: '100%',
-  maxWidth: '100%',
-  [theme.breakpoints.up('sm')]: {
-    marginLeft: theme.spacing(1),
-    width: 'auto',
-  },
-}));
-
-export const SearchIconWrapper = styled('div')(({ theme }) => ({
-  padding: theme.spacing(0, 2),
-  height: '100%',
-  position: 'absolute',
-  pointerEvents: 'none',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-}));
-
-export const InputBase = styled(MuiInput)(({ theme }) => ({
-  color: 'inherit',
-  width: '100%',
-  fontWeight: 400,
-  maxWidth: '100%',
-  '& .MuiInput-input': {
-    padding: theme.spacing(1, 1, 1, 0),
-    // vertical padding + font size from searchIcon
-    paddingLeft: `calc(1em + ${theme.spacing(4)})`,
-    transition: theme.transitions.create('width'),
-    width: '200',
-    [theme.breakpoints.up('sm')]: {
-      width: '12ch',
-      '&:focus': {
-        width: '20ch',
-      },
-    },
-  },
-}));