Style set selection

elm.json

@@ -1,43 +1,43 @@
 {
-    "type": "application",
-    "source-directories": [
-        "src"
-    ],
-    "elm-version": "0.19.1",
-    "dependencies": {
-        "direct": {
-            "NoRedInk/elm-json-decode-pipeline": "1.0.1",
-            "elm/browser": "1.0.2",
-            "elm/core": "1.0.5",
-            "elm/html": "1.0.0",
-            "elm/http": "2.0.0",
-            "elm/json": "1.1.3",
-            "elm/parser": "1.1.0",
-            "elm/svg": "1.0.1",
-            "elm-community/list-extra": "8.7.0",
-            "myrho/elm-round": "1.0.5",
-            "terezka/elm-charts": "4.0.0"
-        },
-        "indirect": {
-            "K-Adam/elm-dom": "1.0.0",
-            "danhandrea/elm-time-extra": "1.1.0",
-            "elm/bytes": "1.0.8",
-            "elm/file": "1.0.5",
-            "elm/time": "1.0.0",
-            "elm/url": "1.0.0",
-            "elm/virtual-dom": "1.0.2",
-            "justinmimbs/date": "4.1.0",
-            "justinmimbs/time-extra": "1.2.0",
-            "ryan-haskell/date-format": "1.0.0",
-            "terezka/intervals": "2.0.2"
-        }
+  "type": "application",
+  "source-directories": [
+    "src"
+  ],
+  "elm-version": "0.19.1",
+  "dependencies": {
+    "direct": {
+      "NoRedInk/elm-json-decode-pipeline": "1.0.1",
+      "elm/browser": "1.0.2",
+      "elm/core": "1.0.5",
+      "elm/html": "1.0.0",
+      "elm/http": "2.0.0",
+      "elm/json": "1.1.3",
+      "elm/parser": "1.1.0",
+      "elm/svg": "1.0.1",
+      "elm-community/list-extra": "8.7.0",
+      "myrho/elm-round": "1.0.5",
+      "terezka/elm-charts": "4.0.0"
     },
-    "test-dependencies": {
-        "direct": {
-            "elm-explorations/test": "2.2.0"
-        },
-        "indirect": {
-            "elm/random": "1.0.0"
-        }
+    "indirect": {
+      "K-Adam/elm-dom": "1.0.0",
+      "danhandrea/elm-time-extra": "1.1.0",
+      "elm/bytes": "1.0.8",
+      "elm/file": "1.0.5",
+      "elm/time": "1.0.0",
+      "elm/url": "1.0.0",
+      "elm/virtual-dom": "1.0.2",
+      "justinmimbs/date": "4.1.0",
+      "justinmimbs/time-extra": "1.2.0",
+      "ryan-haskell/date-format": "1.0.0",
+      "terezka/intervals": "2.0.2"
     }
+  },
+  "test-dependencies": {
+    "direct": {
+      "elm-explorations/test": "2.2.0"
+    },
+    "indirect": {
+      "elm/random": "1.0.0"
+    }
+  }
 }

src/Components/Button.elm

@@ -0,0 +1,27 @@
+module Components.Button exposing (make, view)
+
+import Html exposing (Html)
+import Html.Attributes exposing (class)
+import Html.Events exposing (onClick)
+
+
+type alias ButtonConfig msg =
+    { label : String
+    , onClick : msg
+    }
+
+
+make : String -> msg -> ButtonConfig msg
+make label onClick =
+    { label = label
+    , onClick = onClick
+    }
+
+
+view : ButtonConfig msg -> Html msg
+view cfg =
+    Html.button
+        [ class "bg-slate-900 rounded text-white p-2 shadow disabled:opacity-50 hover:bg-slate-700"
+        , onClick cfg.onClick
+        ]
+        [ Html.text cfg.label ]

src/Main.elm

@@ -5,6 +5,7 @@ import Browser exposing (Document)
 import Card exposing (CardData, CardPerformanceDistributions, calculatePerformanceDistributions, manaCostToSymbol)
 import Chart as C
 import Chart.Attributes as CA
+import Components.Button as Button
 import Database
 import Deck
 import Dict exposing (Dict)
@@ -342,22 +343,25 @@ viewChooseSet model =
                     text "Loading..."
 
                 NoLocalData ->
-                    button [ onClick (IOFetchSetData setCode) ] [ text "Download" ]
+                    Button.make "Download" (IOFetchSetData setCode) |> Button.view
 
                 HasLocalData database ->
-                    button [ onClick (StartDraft setCode database) ] [ text "Open" ]
+                    Button.make "Open" (StartDraft setCode database) |> Button.view
     in
     div [ class "w-full h-full bg-slate-100 flex justify-center items-center" ]
-        [ div [ class "max-w-2xl max-h-2xl" ]
-            [ ul []
+        [ div [ class "max-w-2xl max-h-2xl bg-slate-500 rounded-lg p-6 shadow-xl" ]
+            [ ul [ class "divide-y divide-slate-600" ]
                 (List.map
                     (\s ->
-                        case Dict.get s model.sets of
-                            Just setStatus ->
-                                li [] [ text s, viewLoadStatus s setStatus ]
-
-                            Nothing ->
-                                p [] [ text "Loading..." ]
+                        li [ class "py-2 text-white flex gap-2 items-center space-between w-full" ] <|
+                            case Dict.get s model.sets of
+                                Just setStatus ->
+                                    [ span [ class "grow" ] [ text (String.toUpper s) ]
+                                    , viewLoadStatus s setStatus
+                                    ]
+
+                                Nothing ->
+                                    [ text "Loading..." ]
                     )
                     (Dict.keys model.sets)
                 )