Make task cards fully clickable

The build and tests pass. The task is complete:

1. Changed `renderTaskCard` to wrap the entire card in an `<a>`
element 2. Changed the inner task-id from an `<a>` to a `<span>`
since the whole 3. Added CSS styles for `.task-card-link` to ensure
proper display (bloc

Task-Id: t-149.4

2 files changed, 16 insertions, 10 deletions

diff --git a/Omni/Jr/Web.hs b/Omni/Jr/Web.hs
index 6d2c163..759f42e 100644
--- a/Omni/Jr/Web.hs
+++ b/Omni/Jr/Web.hs
@@ -136,16 +136,16 @@ statusBadge status =
 
 renderTaskCard :: (Monad m) => TaskCore.Task -> Lucid.HtmlT m ()
 renderTaskCard t =
-  Lucid.div_ [Lucid.class_ "task-card"] <| do
-    Lucid.div_ [Lucid.class_ "task-header"] <| do
-      Lucid.a_
-        [ Lucid.class_ "task-id",
-          Lucid.href_ ("/tasks/" <> TaskCore.taskId t)
-        ]
-        (Lucid.toHtml (TaskCore.taskId t))
-      statusBadge (TaskCore.taskStatus t)
-      Lucid.span_ [Lucid.class_ "priority"] (Lucid.toHtml (tshow (TaskCore.taskPriority t)))
-    Lucid.p_ [Lucid.class_ "task-title"] (Lucid.toHtml (TaskCore.taskTitle t))
+  Lucid.a_
+    [ Lucid.class_ "task-card task-card-link",
+      Lucid.href_ ("/tasks/" <> TaskCore.taskId t)
+    ]
+    <| do
+      Lucid.div_ [Lucid.class_ "task-header"] <| do
+        Lucid.span_ [Lucid.class_ "task-id"] (Lucid.toHtml (TaskCore.taskId t))
+        statusBadge (TaskCore.taskStatus t)
+        Lucid.span_ [Lucid.class_ "priority"] (Lucid.toHtml (tshow (TaskCore.taskPriority t)))
+      Lucid.p_ [Lucid.class_ "task-title"] (Lucid.toHtml (TaskCore.taskTitle t))
 
 instance Lucid.ToHtml HomePage where
   toHtmlRaw = Lucid.toHtml
diff --git a/Omni/Jr/Web/Style.hs b/Omni/Jr/Web/Style.hs
index 5aa9b62..5d95e42 100644
--- a/Omni/Jr/Web/Style.hs
+++ b/Omni/Jr/Web/Style.hs
@@ -242,6 +242,12 @@ cardStyles = do
     transition "box-shadow" (ms 150) ease (sec 0)
   ".task-card" # hover ? do
     boxShadow (NE.singleton (bsColor (rgba 0 0 0 0.15) (shadow (px 0) (px 4))))
+  ".task-card-link" ? do
+    display block
+    textDecoration none
+    color inherit
+    cursor pointer
+  ".task-card-link" # hover ? textDecoration none
   ".task-header" ? do
     display flex
     flexWrap Flexbox.wrap