ui: Stop using element IDs for styling

ui/src/Page/Home.elm

@@ -55,7 +55,7 @@ view : Session -> Model -> { title : String, content : Html Msg }
 view session model =
     { title = "Inbucket"
     , content =
-        div [ id "page" ]
+        div [ class "page" ]
             [ Html.node "rendered-html"
                 [ class "greeting"
                 , property "content" (Encode.string model.greeting)

ui/src/Page/Mailbox.elm

@@ -474,10 +474,10 @@ view : Session -> Model -> { title : String, content : Html Msg }
 view session model =
     { title = model.mailboxName ++ " - Inbucket"
     , content =
-        div [ id "page", class "mailbox" ]
+        div [ class "page mailbox" ]
             [ viewMessageList session model
             , main_
-                [ id "message" ]
+                [ class "message" ]
                 [ case model.state of
                     ShowingList _ NoMessage ->
                         text
@@ -500,7 +500,7 @@ view session model =
 
 viewMessageList : Session -> Model -> Html Msg
 viewMessageList session model =
-    aside [ id "message-list" ]
+    aside [ class "message-list" ]
         [ div []
             [ input
                 [ type_ "search"
@@ -554,7 +554,7 @@ viewMessage zone message bodyMode =
                 [ href sourceUrl, target "_blank" ]
                 [ button [] [ text "Source" ] ]
             ]
-        , dl [ id "message-header" ]
+        , dl [ class "message-header" ]
             [ dt [] [ text "From:" ]
             , dd [] [ text message.from ]
             , dt [] [ text "To:" ]

ui/src/Page/Monitor.elm

@@ -86,7 +86,7 @@ view : Session -> Model -> { title : String, content : Html Msg }
 view session model =
     { title = "Inbucket Monitor"
     , content =
-        div [ id "page" ]
+        div [ class "page" ]
             [ h1 [] [ text "Monitor" ]
             , p []
                 [ text "Messages will be listed here shortly after delivery. "
@@ -100,7 +100,7 @@ view session model =
                         )
                     ]
                 ]
-            , table [ id "monitor" ]
+            , table [ class "monitor" ]
                 [ thead []
                     [ th [] [ text "Date" ]
                     , th [ class "desktop" ] [ text "From" ]

ui/src/Page/Status.elm

@@ -219,7 +219,7 @@ view : Session -> Model -> { title : String, content : Html Msg }
 view session model =
     { title = "Inbucket Status"
     , content =
-        div [ id "page" ]
+        div [ class "page" ]
             [ h1 [] [ text "Status" ]
             , case model.metrics of
                 Nothing ->

ui/src/Views/Page.elm

@@ -39,15 +39,15 @@ type alias FrameControls msg =
 
 frame : FrameControls msg -> Session -> ActivePage -> Html msg -> Html msg
 frame controls session page content =
-    div [ id "app" ]
+    div [ class "app" ]
         [ header []
             [ ul [ class "navbar", attribute "role" "navigation" ]
-                [ li [ id "navbar-brand" ]
+                [ li [ class "navbar-brand" ]
                     [ a [ Route.href Route.Home ] [ text "@ inbucket" ] ]
                 , navbarLink page Route.Monitor [ text "Monitor" ]
                 , navbarLink page Route.Status [ text "Status" ]
                 , navbarRecent page controls
-                , li [ id "navbar-mailbox" ]
+                , li [ class "navbar-mailbox" ]
                     [ form [ Events.onSubmit (controls.viewMailbox controls.mailboxValue) ]
                         [ input
                             [ type_ "text"
@@ -61,10 +61,10 @@ frame controls session page content =
                 ]
             , errorFlash controls session.flash
             ]
-        , div [ id "navbg" ] [ text "" ]
+        , div [ class "navbar-bg" ] [ text "" ]
         , content
         , footer []
-            [ div [ id "footer" ]
+            [ div [ class "footer" ]
                 [ externalLink "https://www.inbucket.org" "Inbucket"
                 , text " is an open source projected hosted at "
                 , externalLink "https://github.com/jhillyerd/inbucket" "GitHub"
@@ -128,7 +128,7 @@ navbarRecent page controls =
             a [ Route.href (Route.Mailbox mailbox) ] [ text mailbox ]
     in
     li
-        [ id "navbar-recent"
+        [ class "navbar-recent"
         , classList [ ( "navbar-dropdown", True ), ( "navbar-active", active ) ]
         ]
         [ span [] [ text title ]

ui/src/main.css

@@ -84,7 +84,7 @@ a.button {
 
 /** APP */
 
-#app {
+.app {
   display: grid;
   justify-content: center;
   grid-gap: 20px;
@@ -96,7 +96,7 @@ a.button {
 }
 
 @media (max-width: 999px) {
-  #app {
+  .app {
     grid-template:
       "head head head" auto
       "lpad page rpad" 1fr
@@ -113,7 +113,7 @@ header {
   grid-area: head;
 }
 
-#page {
+.page {
   grid-area: page;
 }
 
@@ -124,7 +124,7 @@ footer {
   grid-area: foot;
 }
 
-#footer {
+.footer {
   margin: 10px auto;
 }
 
@@ -164,7 +164,7 @@ h1 {
 /** NAV BAR */
 
 .navbar,
-#navbg {
+.navbar-bg {
   height: 50px;
 }
 
@@ -176,6 +176,15 @@ h1 {
   text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
 }
 
+.navbar-bg {
+  background-color: #222;
+  background-image: linear-gradient(to bottom, #3c3c3c 0, #222 100%);
+  grid-column: 1 / 4;
+  grid-row: 1;
+  width: 100%;
+  z-index: -1;
+}
+
 .navbar li {
   color: #9d9d9d;
 }
@@ -198,20 +207,20 @@ li.navbar-active span,
   color: #ffffff;
 }
 
-#navbar-brand {
+.navbar-brand {
   font-size: 18px;
   margin-left: -15px;
 }
 
-#navbar-recent {
+.navbar-recent {
   margin: 0 auto;
 }
 
-#navbar-mailbox {
+.navbar-mailbox {
   padding: 8px 0 !important;
 }
 
-#navbar-mailbox input {
+.navbar-mailbox input {
   border: 1px solid var(--border-color);
   border-radius: 4px;
   padding: 5px 10px;
@@ -245,15 +254,6 @@ li.navbar-active span,
   background-color: var(--selected-color);
 }
 
-#navbg {
-  background-color: #222;
-  background-image: linear-gradient(to bottom, #3c3c3c 0, #222 100%);
-  grid-column: 1 / 4;
-  grid-row: 1;
-  width: 100%;
-  z-index: -1;
-}
-
 /** BUTTONS */
 
 .button-bar button {
@@ -302,7 +302,7 @@ li.navbar-active span,
   }
 }
 
-#message-list {
+.message-list {
   grid-area: list;
 }
 
@@ -339,11 +339,11 @@ li.navbar-active span,
 
 /** MESSAGE */
 
-#message {
+.message {
   grid-area: mesg;
 }
 
-#message-header {
+.message-header {
   border: 1px solid var(--border-color);
   border-radius: 4px;
   box-shadow: 0 1px 2px rgba(0,0,0,.05);
@@ -351,28 +351,28 @@ li.navbar-active span,
   margin: 10px 0;
 }
 
-#message-header dt {
+.message-header dt {
   color: var(--low-color);
   font-weight: bold;
 }
 
-#message-header dd {
+.message-header dd {
   color: var(--low-color);
   padding-left: 10px;
 }
 
 @media (min-width: 1000px) {
-  #message-header {
+  .message-header {
     display: grid;
     grid-template: auto / 5em 1fr;
   }
 
-  #message-header dt {
+  .message-header dt {
     grid-column: 1;
     text-align: right;
   }
 
-  #message-header dd {
+  .message-header dd {
     grid-column: 2;
   }
 }
@@ -427,7 +427,7 @@ nav.tab-bar a.active:hover {
 }
 
 .metric-panel h2 {
-  background-image: linear-gradient(to bottom,#f5f5f5 0,#e8e8e8 100%);
+  background-image: linear-gradient(to bottom, #f5f5f5 0, #e8e8e8 100%);
   font-size: 16px;
   font-weight: 500;
   padding: 10px;
@@ -458,24 +458,24 @@ nav.tab-bar a.active:hover {
 
 /** MONITOR **/
 
-#monitor {
+.monitor {
   border-collapse: collapse;
   width: 100%;
 }
 
-#monitor th {
+.monitor th {
   border-bottom: 2px solid var(--border-color);
   text-align: left;
   padding: 5px;
 }
 
-#monitor td {
+.monitor td {
   border-bottom: 1px solid var(--border-color);
   font-size: 12px;
   padding: 5px;
 }
 
-#monitor tr:hover {
+.monitor tr:hover {
   background-color: var(--selected-color);
   cursor: pointer;
 }