ui: Convert hamburger to button

ui/src/Layout.elm

@@ -114,7 +114,7 @@ frame { model, session, activePage, activeMailbox, modal, content } =
     div [ class "app" ]
         [ header []
             [ nav [ class "navbar" ]
-                [ span [ class "navbar-toggle", Events.onClick (ToggleMenu |> model.mapMsg) ]
+                [ button [ class "navbar-toggle", Events.onClick (ToggleMenu |> model.mapMsg) ]
                     [ i [ class "fas fa-bars" ] [] ]
                 , span [ class "navbar-brand" ]
                     [ a [ Route.href Route.Home ] [ text "@ inbucket" ] ]

ui/src/mailbox.css

@@ -18,6 +18,18 @@
   display: flex;
 }
 
+.message-list-controls button,
+.message-list-controls input[type="search"] {
+  border: 1px solid var(--border-color);
+  border-radius: 3px;
+}
+
+.message-list-controls button {
+  color: var(--low-color);
+  margin-left: 1px;
+  padding: 0 6px;
+}
+
 .message-list-controls input[type="search"] {
   flex: 1 1 auto;
   padding: 2px 4px;

ui/src/main.css

@@ -15,7 +15,7 @@ h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
 del, dfn, em, img, ins, kbd, q, s, samp,
 small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
+b, u, i, center, button,
 dl, dt, dd, ol, ul, li,
 fieldset, form, label, legend,
 table, caption, tbody, tfoot, thead, tr, th, td,
@@ -44,13 +44,17 @@ body {
   background-color: var(--bg-color);
 }
 
-body, input, table {
+body, button, input, table {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 14px;
   line-height: 1.43;
   color: var(--primary-color);
 }
 
+button {
+  background: none;
+}
+
 h1, h2, h3, h4, h5, h6, p {
   margin-bottom: 10px;
 }

ui/src/navbar.css

@@ -30,9 +30,10 @@
 .navbar-toggle {
   color: var(--navbar-color);
   font-size: 24px;
+  padding: 0 6px;
   position: absolute;
   top: 10px;
-  right: 20px;
+  right: 14px;
 }
 
 .navbar a,