ui: Add search clear button

ui/src/Page/Mailbox.elm

@@ -12,6 +12,7 @@ import Html.Attributes
         ( alt
         , class
         , classList
+        , disabled
         , download
         , href
         , id
@@ -500,12 +501,18 @@ view model =
         [ div [ class ("mailbox " ++ mode) ]
             [ aside [ class "message-list-controls" ]
                 [ input
-                    [ type_ "search"
+                    [ type_ "text"
                     , placeholder "search"
                     , Events.onInput OnSearchInput
                     , value model.searchInput
                     ]
                     []
+                , button
+                    [ Events.onClick (OnSearchInput "")
+                    , disabled (model.searchInput == "")
+                    , alt "Clear Search"
+                    ]
+                    [ i [ class "fas fa-times" ] [] ]
                 , button
                     [ Events.onClick PurgeMailboxPrompt
                     , alt "Purge Mailbox"

ui/src/mailbox.css

@@ -19,7 +19,7 @@
 }
 
 .message-list-controls button,
-.message-list-controls input[type="search"] {
+.message-list-controls input {
   border: 1px solid var(--border-color);
   border-radius: 3px;
 }
@@ -30,7 +30,12 @@
   padding: 0 6px;
 }
 
-.message-list-controls input[type="search"] {
+.message-list-controls button:disabled {
+  color: var(--disabled-color);
+  cursor: default;
+}
+
+.message-list-controls input {
   flex: 1 1 auto;
   padding: 2px 4px;
 }

ui/src/main.css

@@ -4,6 +4,7 @@
   --bg-color: #fff;
   --primary-color: #333;
   --low-color: #666;
+  --disabled-color: #ddd;
   --high-color: #337ab7;
   --border-color: #ddd;
   --placeholder-color: #9f9f9f;
@@ -53,6 +54,7 @@ body, button, input, table {
 
 button {
   background: none;
+  cursor: pointer;
 }
 
 h1, h2, h3, h4, h5, h6, p {