Fix navicon

client/css/style.css

@@ -479,9 +479,7 @@ input::-webkit-inner-spin-button {
 
 .navicon {
   display: none;
-  padding: 0 15px;
-  line-height: 50px;
-  font-size: 20px;
+  width: 50px;
   cursor: pointer;
 }
 
@@ -495,7 +493,7 @@ input::-webkit-inner-spin-button {
   display: none;
 }
 
-.chat-title-bar .icon-button {
+.chat-title-bar .icon-button:not(.navicon) {
   color: #999;
 }
 
@@ -808,7 +806,7 @@ input.message-input-nick.invalid {
   color: #222;
 }
 
-.settings button {
+.settings-button {
   width: 200px;
 }
 
@@ -852,8 +850,8 @@ input.message-input-nick.invalid {
     margin-right: 0;
   }
 
-  .settings-button {
-    margin-top: 10px;
+  .settings-file:last-of-type {
+    margin-bottom: 10px;
   }
 }
 
@@ -1059,7 +1057,7 @@ input.message-input-nick.invalid {
   }
 
   .navicon {
-    display: inline-block;
+    display: block;
   }
 
   .main-container.off-canvas {

client/js/components/pages/Chat/ChatTitle.js

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 import { FiUsers, FiSearch, FiX } from 'react-icons/fi';
-import Navicon from 'containers/Navicon';
+import Navicon from 'components/ui/Navicon';
 import Button from 'components/ui/Button';
 import Editable from 'components/ui/Editable';
 import { isValidServerName } from 'state/servers';

client/js/components/pages/Connect.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { createSelector } from 'reselect';
 import { Form, withFormik } from 'formik';
-import Navicon from 'containers/Navicon';
+import Navicon from 'components/ui/Navicon';
 import Button from 'components/ui/Button';
 import Checkbox from 'components/ui/formik/Checkbox';
 import TextInput from 'components/ui/TextInput';

client/js/components/pages/Settings.js

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import Navicon from 'containers/Navicon';
+import Navicon from 'components/ui/Navicon';
 import Button from 'components/ui/Button';
 import Checkbox from 'components/ui/Checkbox';
 import FileInput from 'components/ui/FileInput';
@@ -29,7 +29,10 @@ const Settings = ({
         <Navicon />
         <h1>Settings</h1>
         {installable && (
-          <Button className="button-install" onClick={handleInstallClick}>
+          <Button
+            className="settings-button button-install"
+            onClick={handleInstallClick}
+          >
             <h2>Install</h2>
           </Button>
         )}

client/js/components/ui/Navicon.js

@@ -1,7 +1,19 @@
 import React from 'react';
+import { FiMenu } from 'react-icons/fi';
+import { useDispatch } from 'react-redux';
+import Button from 'components/ui/Button';
+import { toggleMenu } from 'state/ui';
 
-const Navicon = ({ onClick }) => (
-  <i className="icon-menu navicon" onClick={onClick} />
+const Navicon = () => {
+  const dispatch = useDispatch();
+
+  return (
+    <Button
+      className="navicon"
+      icon={FiMenu}
+      onClick={() => dispatch(toggleMenu())}
+    />
   );
+};
 
 export default Navicon;

client/js/containers/Navicon.js

@@ -1,9 +0,0 @@
-import Navicon from 'components/ui/Navicon';
-import { toggleMenu } from 'state/ui';
-import connect from 'utils/connect';
-
-const mapDispatch = {
-  onClick: toggleMenu
-};
-
-export default connect(null, mapDispatch)(Navicon);