Исправление внешности поля поиска (#57)

src/app/components/top-menu/TopMenu.tsx

@@ -1,16 +1,15 @@
 import React, {memo, useState} from 'react';
 import {NavLink, useHistory} from 'react-router-dom';
-import {createStyles, makeStyles, Theme} from '@material-ui/core/styles';
+import {createStyles, makeStyles, Theme, fade} from '@material-ui/core/styles';
 import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
 import Slide from '@material-ui/core/Slide';
 import Typography from '@material-ui/core/Typography';
 import IconButton from '@material-ui/core/IconButton';
-import TextField from '@material-ui/core/TextField';
 import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';
 import SearchIcon from '@material-ui/icons/Search';
 import ClickAwayListener from '@material-ui/core/ClickAwayListener';
-import {Avatar} from '@material-ui/core';
+import {Avatar, InputBase} from '@material-ui/core';
 import {PageType} from '_enums/common';
 import {PAGE_TITLE, ROUTES} from '_consts/common';
 import {usePageType} from '_hooks/usePageType';
@@ -33,7 +32,34 @@ const useStyles = makeStyles((theme: Theme) =>
         searchInput: {
             backgroundColor: theme.palette.background.default,
         },
-    }),
+        inputRoot: {
+            color: 'inherit',
+        },
+        inputInput: {
+            padding: theme.spacing(1, 1, 1, 0),
+            paddingLeft: `calc(1em + ${theme.spacing(0)}px)`,
+            transition: theme.transitions.create('width'),
+            width: '100%',
+            [theme.breakpoints.up('md')]: {
+                width: '20ch',
+            },
+        },
+        search: {
+            position: 'relative',
+            borderRadius: theme.shape.borderRadius,
+            backgroundColor: fade(theme.palette.common.white, 0.15),
+            '&:hover': {
+                backgroundColor: fade(theme.palette.common.white, 0.25),
+            },
+            marginRight: theme.spacing(2),
+            marginLeft: 0,
+            width: '100%',
+            [theme.breakpoints.up('sm')]: {
+                marginLeft: theme.spacing(3),
+                width: 'auto',
+            },
+        },
+    })
 );
 
 const TopMenu: React.FC<Props> = ({trigger}) => {
@@ -63,14 +89,16 @@ const TopMenu: React.FC<Props> = ({trigger}) => {
                         <>
                             {isShowSearch ? (
                                 <ClickAwayListener onClickAway={handleClickAway}>
-                                    <TextField
-                                        label={LABELS.SEACRH}
-                                        id="outlined-size-small"
-                                        defaultValue=""
-                                        variant="outlined"
-                                        size="small"
-                                        className={classes.searchInput}
-                                    />
+                                    <div className={classes.search}>
+                                        <InputBase
+                                            placeholder={LABELS.SEACRH}
+                                            classes={{
+                                                root: classes.inputRoot,
+                                                input: classes.inputInput,
+                                            }}
+                                            inputProps={{'aria-label': 'search'}}
+                                        />
+                                    </div>
                                 </ClickAwayListener>
                             ) : (
                                     <IconButton