From df2604aabd2d24fd19adfd5f62b2ef37a49adb39 Mon Sep 17 00:00:00 2001
From: Drew Galbraith <dgalbraith33@gmail.com>
Date: Sat, 6 Jul 2024 18:12:29 -0700
Subject: [PATCH] Very basic styling for the tasks page.

---
 frontend/index.html        |  6 ++++
 frontend/src/Dashboard.elm | 59 ++++++++++++++++++++++++--------------
 2 files changed, 43 insertions(+), 22 deletions(-)
diff --git a/frontend/index.html b/frontend/index.html
index ae6e0ae..2469892 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -4,6 +4,12 @@
   <meta charset="UTF-8" />
   <title>Captains Log</title>
   <script type="text/javascript" src="/build/main.js"></script>
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
+        rel="stylesheet"
+        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
+        crossorigin="anonymous" />
+  <link rel="stylesheet"
+        href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />
 </head>
 <body>
   <script>
diff --git a/frontend/src/Dashboard.elm b/frontend/src/Dashboard.elm
index 671c349..9ddbf1f 100644
--- a/frontend/src/Dashboard.elm
+++ b/frontend/src/Dashboard.elm
@@ -2,8 +2,8 @@ module Dashboard exposing (Model, Msg, Task, init, update, view)
 
 import Browser exposing (Document)
 import Browser.Navigation as Nav
-import Html exposing (Html, button, div, input, li, text, textarea)
-import Html.Attributes exposing (placeholder, value)
+import Html exposing (Html, button, div, h6, input, p, text, textarea)
+import Html.Attributes exposing (class, placeholder, value)
 import Html.Events exposing (onClick, onInput)
 import Http
 import Json.Decode exposing (Decoder, field, int, list, map3, maybe, string)
@@ -174,7 +174,7 @@ viewBody model =
             div [] [ text "Loading" ]
 
         Success tasks ->
-            div []
+            div [ class "container", class "bg-light" ]
                 [ viewTaskList tasks
                 , viewCreate model
                 ]
@@ -182,34 +182,49 @@ viewBody model =
 
 viewTaskList : List Task -> Html Msg
 viewTaskList tasks =
-    div
-        []
-        (text
-            ("Loaded "
-                ++ String.fromInt (List.length tasks)
-                ++ "tasks"
+    div [ class "p-3" ]
+        [ div
+            [ class "list-group" ]
+            (List.map viewTaskListItem tasks
+                ++ [ div [ class "list-group-item" ]
+                        [ text
+                            ("Loaded "
+                                ++ String.fromInt (List.length tasks)
+                                ++ " tasks"
+                            )
+                        ]
+                   ]
             )
-            :: List.map viewTaskListItem tasks
-        )
+        ]
 
 
 viewTaskListItem : Task -> Html Msg
 viewTaskListItem task =
-    li []
-        [ text
-            (task.title
-                ++ (case task.description of
-                        Just "" ->
-                            ""
-
+    div [ class "list-group-item d-flex justify-content-between" ]
+        [ input [ Html.Attributes.type_ "checkbox" ] []
+        , div []
+            [ h6 []
+                [ text task.title ]
+            , p []
+                [ text
+                    (case task.description of
                         Just desc ->
-                            ": " ++ desc
+                            desc
 
                         _ ->
                             ""
-                   )
-            )
-        , button [ onClick (DeleteTask task.id) ] [ text "Delete Task" ]
+                    )
+                ]
+            ]
+        , div []
+            [ button
+                [ class "btn"
+                , class "btn-danger"
+                , onClick (DeleteTask task.id)
+                ]
+                [ Html.i [ class "bi-trash3" ] []
+                ]
+            ]
         ]
 
 
