From 15b77ef4bdc4a616661a4e75a1062b24ce7fbf61 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=92=D0=B8=D0=B3=D0=B4=D0=BE=D1=80=D0=BE=D0=B2=D0=B0=20?=
 =?UTF-8?q?=D0=90=D0=BB=D0=B8=D0=BD=D0=B0?=
 <61090329+Metanka@users.noreply.github.com>
Date: Wed, 6 Jan 2021 12:30:17 +0300
Subject: [PATCH] =?UTF-8?q?=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=BB?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=B8=D0=B5=20=D0=B2=D0=BD=D0=B5=D1=88=D0=BD=D0=BE?=
 =?UTF-8?q?=D1=81=D1=82=D0=B8=20=D0=BF=D0=BE=D0=BB=D1=8F=20=D0=BF=D0=BE?=
 =?UTF-8?q?=D0=B8=D1=81=D0=BA=D0=B0=20(#57)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/components/top-menu/TopMenu.tsx | 52 +++++++++++++++++++------
 1 file changed, 40 insertions(+), 12 deletions(-)

diff --git a/src/app/components/top-menu/TopMenu.tsx b/src/app/components/top-menu/TopMenu.tsx
index 035be1d..1baae7b 100644
--- a/src/app/components/top-menu/TopMenu.tsx
+++ b/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