Include images in bundle by showing them through CSS

This fixes them not showing in rumblebot

Author: outkine

src/battle-viewer/BattleViewer.elm

@@ -225,17 +225,15 @@ view model =
                                 "itself"
                     ]
                 ]
-            , button [ onClick ToggleOpponentSelect, class "_select-button" ]
+            , button [ onClick ToggleOpponentSelect, class "_select-button d-flex align-items-end" ]
                 [ p [ class "mr-2" ] [ text "change opponent" ]
-                , img
-                    [ src <|
-                        Api.urlForAsset model.apiContext
-                            (if model.viewingOpponentSelect then
-                                "/images/close-panel.svg"
-
-                             else
-                                "/images/open-panel.svg"
-                            )
+                , div
+                    [ class <|
+                        if model.viewingOpponentSelect then
+                            "_img-close-panel"
+
+                        else
+                            "_img-open-panel"
                     ]
                     []
                 ]
@@ -282,7 +280,7 @@ viewBar model =
         viewLoadingMessage message =
             div [ class "d-flex justify-content-center align-items-center" ]
                 [ p [ class "_text mr-2" ] [ text message ]
-                , img [ class "spinner", src <| Api.urlForAsset model.apiContext "/images/spinner.svg" ] []
+                , div [ class "_img-spinner" ] []
                 ]
     in
     div [ class "_run-bar" ]

src/battle-viewer/main.scss

@@ -3,6 +3,33 @@
   border-bottom: $border-2;
 }
 
+@mixin img($name) {
+  background: url("../images/#{$name}.svg");
+  width: $icon-size;
+  height: $icon-size;
+  background-size: 100%;
+  background-repeat: no-repeat;
+}
+
+._img-settings {
+  @include img("settings");
+}
+
+._img-spinner {
+  @include img("spinner");
+  filter: brightness(var(--is-dark-theme));
+  height: 20px;
+  width: 20px;
+}
+
+._img-close-panel {
+  @include img("close-panel");
+}
+
+._img-open-panel {
+  @include img("open-panel");
+}
+
 ._app-root {
   display: flex;
   flex-direction: column;

src/css/base.scss

@@ -92,8 +92,10 @@ a {
   color: var(--blue) !important;
 }
 
+$icon-size: 18px;
+
 img {
-  width: 18px;
+  width: $icon-size;
   display: inline-block;
 }
 
@@ -128,12 +130,6 @@ button {
   color: var(--bright-red) !important;
 }
 
-.spinner {
-  height: 20px;
-  width: 20px;
-  filter: brightness(var(--is-dark-theme));
-}
-
 .text-red {
   color: var(--bright-red);
 }

src/garage/Main.elm

@@ -462,15 +462,15 @@ viewBar model =
                         )
                     ]
             )
-        , div [ class "d-flex" ]
+        , div [ class "d-flex align-items-center" ]
             [ case model.apiContext.siteInfo of
                 Just _ ->
                     a [ class "mr-3", href <| Api.urlForPublishing model.apiContext, target "_blank" ] [ text "publish to a board" ]
 
                 Nothing ->
                     div [] []
             , a [ class "mr-4", href "https://rr-docs.readthedocs.io/en/latest/", target "_blank" ] [ text "docs" ]
-            , button [ onClick ViewSettings ] [ img [ src <| Api.urlForAsset model.apiContext "/images/settings.svg" ] [] ]
+            , div [ class "_img-settings", onClick ViewSettings ] []
             ]
         ]