Merge pull request #386 from trezor/fix/proper-menu-toggler-icons

Fix/Proper svg icons for menu toggler instead of utf chars

src/components/Header/index.js

@@ -4,6 +4,9 @@ import styled from 'styled-components';
 import { NavLink } from 'react-router-dom';
 import colors from 'config/colors';
 import { SCREEN_SIZE } from 'config/variables';
+import Icon from 'components/Icon';
+import icons from 'config/icons';
+
 import type { toggleSidebar as toggleSidebarType } from 'actions/WalletActions';
 
 const Wrapper = styled.header`
@@ -12,12 +15,6 @@ const Wrapper = styled.header`
     background: ${colors.HEADER};
     overflow: hidden;
     z-index: 200;
-
-    svg {
-        fill: ${colors.WHITE};
-        height: 28px;
-        width: 100px;
-    }
 `;
 
 const LayoutWrapper = styled.div`
@@ -48,21 +45,32 @@ const MenuToggler = styled.div`
     white-space: nowrap;
     color: ${colors.WHITE};
     align-self: center;
+    align-items: center;
     cursor: pointer;
     user-select: none;
     padding: 10px 0px;
     transition: all .1s ease-in;
 
     @media screen and (max-width: ${SCREEN_SIZE.SM}) {
-        display: initial;
+        display: flex;
     }
 `;
 
+const TogglerText = styled.div`
+
+`;
+
 const Logo = styled.div`
     flex: 1;
     justify-content: flex-start;
     display: flex;
 
+    svg {
+        fill: ${colors.WHITE};
+        height: 28px;
+        width: 100px;
+    }
+
     @media screen and (max-width: ${SCREEN_SIZE.SM}) {
         flex: 1 0 33%;
         justify-content: center;
@@ -115,7 +123,29 @@ const Header = ({ sidebarEnabled, sidebarOpened, toggleSidebar }: Props) => (
     <Wrapper data-test="Main__page__navigation">
         <LayoutWrapper>
             <Left>
-                { sidebarEnabled && <MenuToggler onClick={toggleSidebar}>{sidebarOpened ? '✕ Close' : '☰ Menu'}</MenuToggler>}
+                { sidebarEnabled && (
+                    <MenuToggler onClick={toggleSidebar}>
+                        {sidebarOpened ? (
+                            <>
+                                <Icon
+                                    size={24}
+                                    color={colors.WHITE}
+                                    icon={icons.CLOSE}
+                                />
+                                <TogglerText>Close</TogglerText>
+                            </>
+                        ) : (
+                            <>
+                                <Icon
+                                    color={colors.WHITE}
+                                    size={24}
+                                    icon={icons.MENU}
+                                />
+                                <TogglerText>Menu</TogglerText>
+                            </>
+                        )}
+                    </MenuToggler>
+                )}
             </Left>
             <Logo>
                 <NavLink to="/">

src/config/icons.js

@@ -79,6 +79,9 @@ export default {
     QRCODE: [
         'M832 1024l-64 0l0 -128l64 0l0 128Zm-320 0l-64 0l0 -128l64 0l0 128Zm192 0l-128 0l0 -128l128 0l0 128Zm192 -192l64 0l0 64l64 0l0 128l-128 0l0 -192Zm-896 -192l384 0l0 384l-384 0l0 -384Zm320 320l0 -256l-256 0l0 256l256 0Zm-64 -64l-128 0l0 -128l128 0l0 128Zm512 0l-64 0l0 -64l64 0l0 64Zm-192 -128l0 128l-64 0l0 -64l-64 0l0 -64l128 0Zm128 64l-64 0l0 -64l64 0l0 64Zm192 0l-128 0l0 -64l128 0l0 64Zm-256 -64l-64 0l0 -64l64 0l0 64Zm320 -64l-64 0l0 -64l128 0l0 128l-64 0l0 -64Zm-384 0l-128 0l0 -128l128 0l0 128Zm64 -64l64 0l0 -64l128 0l0 128l-192 0l0 -64Zm-320 -128l64 0l0 -64l64 0l0 128l-128 0l0 -64Zm256 0l-64 0l0 -64l192 0l0 128l-128 0l0 -64Zm-576 -64l128 0l0 64l64 0l0 64l-192 0l0 -128Zm896 64l-128 0l0 -64l256 0l0 128l-128 0l0 -64Zm-576 0l-128 0l0 -64l128 0l0 64Zm192 -64l-64 0l0 -64l64 0l0 64Zm-512 -448l384 0l0 384l-384 0l0 -384Zm576 384l-64 0l0 -128l64 0l0 128Zm64 -384l384 0l0 384l-384 0l0 -384Zm-320 320l0 -256l-256 0l0 256l256 0Zm640 0l0 -256l-256 0l0 256l256 0Zm-704 -64l-128 0l0 -128l128 0l0 128Zm640 0l-128 0l0 -128l128 0l0 128Zm-384 -256l0 64l64 0l0 128l-64 0l0 64l-64 0l0 -256l64 0Z',
     ],
+    MENU: [
+        'M192,265.497l640,0l0,119.906l-640,0l0,-119.906Zm0,186.56l640,0l0,119.946l-640,0l0,-119.946Zm0,186.56l640,0l0,119.886l-640,0l0,-119.886Z',
+    ],
 };
 
 /*