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>
   );
 }