Centered logo and serch tab into drawer

src/Components/MenuBarMobile.js

@@ -16,17 +16,21 @@ GNU Affero General Public License for more details.
 You should have received a copy of the GNU Affero General Public License
 along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
 
-import React from 'react'
+import React, { useContext } from 'react'
 import MenuIcon from '@material-ui/icons/Menu';
 import styled from 'styled-components'
 import { Button } from '@material-ui/core'
 import logo from '../img/logo_small.svg'
 import { Link } from 'react-router-dom'
 import MobileDrawerMenu from './MobileDrawerMenu';
+import { Store } from '../Store';
+
 
 export default function MenuBarMobile(props) {
 
     const [drawerOpen, setDrawerStatus] = React.useState(false);
+    const { state, dispatch } = useContext(Store)
+
 
     const toggleDrawer = (open) => (event) => {
         if (event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {
@@ -42,16 +46,14 @@ export default function MenuBarMobile(props) {
                 openSignUp={props.openSignUp} openLogin={props.openLogin}
             />
             <OuterDiv>
-                <DrawerButtonDiv style={{justifySelf : "flex-start", position : "absolute", left : 0}}>
-                    <Button style={{ color: "#00bcd4" }} onClick={toggleDrawer(true)}>
-                        <MenuIcon className="icon" />
-                    </Button>
-                </DrawerButtonDiv>
-                <div className="logo">
-                    <Link to="/">
-                        <img src={logo} alt={"Plataforma Integrada"} />
+                <Button style={{ color: "#00bcd4" }} onClick={toggleDrawer(true)}>
+                    <MenuIcon className="icon" />
+                </Button>
+                <DrawerButtonDiv>
+                    <Link to={"/"}>
+                        <img src={logo} style={{ border: "0", verticalAlign: "middle" }} />
                     </Link>
-                </div>
+                </DrawerButtonDiv>
             </OuterDiv>
         </>
     )
@@ -60,40 +62,22 @@ export default function MenuBarMobile(props) {
 const OuterDiv = styled.div`
     height : 48px;
     width : 100%;
-    display : flex;
-    flex-direction : row;
+    ${'' /* position : relative;  */}
+    display : flex; 
+    direction : row; 
     align-items : center;
-    justify-content : center;
-    position : relative; 
 
-    .logo {
-        align-content : center;
-        justify-self : center;  
-        text-align : center;
-        img {
+    img {
             height : 38px;
             overflow : hidden;
         }
-    }
-
-    .icon {
-        vertical-align : middle !important;
-        font-weight : normal !important;
-        font-style : normal !important;
-        font-size : 24px !important;
-        line-height : 1 !important;
-        letter-spacing : normal !important;
-        text-transform : none !important;
-        display : inline-block !important;
-        white-space : nowrap !important;
-        word-wrap : normal !important;
-        direction : ltr !important;
-        padding-right : 2px;
-        color : inherit !important;
-    }
 `
 const DrawerButtonDiv = styled.div`
-    justify-self : center; 
-    position : absolute; 
-    left : 0;
+    height : 38px;
+    width : 45.55px;
+    position:absolute;
+    left:0;
+    right:0;
+    margin-left:auto;
+    margin-right:auto;
 `
\ No newline at end of file

src/Components/MobileDrawerMenu.js

@@ -48,8 +48,8 @@ export default function MobileDrawerMenu (props) {
         { name : "Sobre a Plataforma", href : "sobre", icon : <InfoIcon/>},
         { name : "Contato", href : "contato", icon : <MailOutlineIcon/>},
         { name : "Central de Ajuda", href : "ajuda", icon : <HelpOutlineIcon/>},
-        { name: "Busca", href: `/busca?query=${state.search.query}&search_class=${state.search.class}`, icon : <SearchIcon/>},
         { name : "Termos de Uso", href : "termos", icon : <AssignmentIcon/>},
+        { name : "Busca", href : `busca?query=${state.search.query}&search_class=${state.search.class}`, icon : <SearchIcon/> }
     ]
 
     // {/*used in dynamic css selection*/}