chore: minor visual adjustments

- added support to `theme` and `size` attrs in `<.cover>` component - adjusted not nil entry styles in strand assessment tab
camino-school · Dec 19, 2023 · 4148a3d · 4148a3d
1 parent e414532
commit 4148a3d
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 5 deletions.
diff --git a/lib/lanttern_web/components/core_components.ex b/lib/lanttern_web/components/core_components.ex
@@ -339,13 +339,25 @@ defmodule LantternWeb.CoreComponents do
   Renders a page cover.
   """
   attr :rest, :global
+  attr :size, :string, default: "lg", doc: "sm | lg"
+  attr :theme, :string, default: "primary"
   slot :inner_block, required: true
   slot :top, required: true
 
   def cover(assigns) do
     ~H"""
-    <div class="relative h-[40rem] bg-cover bg-center bg-ltrn-lighter" {@rest}>
-      <div class="absolute top-1/4 inset-x-0 bottom-0 bg-gradient-to-b from-ltrn-mesh-lime/0 to-ltrn-mesh-lime" />
+    <div
+      class={[
+        "relative bg-cover bg-center bg-ltrn-lighter",
+        if(@size == "sm", do: "h-96", else: "h-[40rem]")
+      ]}
+      {@rest}
+    >
+      <div class={[
+        "absolute inset-x-0 bottom-0 bg-gradient-to-b",
+        cover_overlay(@theme),
+        if(@size == "sm", do: "top-0", else: "top-1/4")
+      ]} />
       <div class="relative flex flex-col justify-between container h-full pt-10 pb-12 mx-auto lg:max-w-5xl">
         <div>
           <%= render_slot(@top) %>
@@ -358,6 +370,12 @@ defmodule LantternWeb.CoreComponents do
     """
   end
 
+  defp cover_overlay("violet"),
+    do: "from-ltrn-mesh-violet/0 to-ltrn-mesh-violet"
+
+  defp cover_overlay(_primary),
+    do: "from-ltrn-mesh-primary/0 to-ltrn-mesh-primary"
+
   @doc ~S"""
   Renders a table with generic styling.
 

diff --git a/lib/lanttern_web/live/pages/strands/activity/id/activity_live.html.heex b/lib/lanttern_web/live/pages/strands/activity/id/activity_live.html.heex
@@ -1,4 +1,8 @@
-<.cover style="background-image: url(https://images.unsplash.com/photo-1529476488885-3159d45ab78b?q=80&w=1280&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)">
+<.cover
+  size="sm"
+  theme="violet"
+  style="background-image: url(https://images.unsplash.com/photo-1529476488885-3159d45ab78b?q=80&w=1280&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)"
+>
   <:top>
     <div class="flex items-center justify-between">
       <.breadcrumbs class="mt-2" item_class="text-white">

diff --git a/lib/lanttern_web/live/pages/strands/id/assessment_component.ex b/lib/lanttern_web/live/pages/strands/id/assessment_component.ex
@@ -166,7 +166,14 @@ defmodule LantternWeb.StrandLive.AssessmentComponent do
       />
       <%= for entry <- @entries do %>
         <div
-          class="shrink-0 flex items-center justify-center w-14 h-14 rounded-full text-sm bg-ltrn-lighter"
+          class={[
+            "shrink-0 flex items-center justify-center w-14 h-14 rounded-full text-sm",
+            if(
+              not is_nil(entry),
+              do: "text-ltrn-dark bg-white shadow-md",
+              else: "text-ltrn-subtle bg-ltrn-lighter"
+            )
+          ]}
           style={get_colors_style(entry, @scale_ov_map)}
         >
           <%= get_entry_value(entry, @scale_ov_map) %>

diff --git a/lib/lanttern_web/live/pages/strands/id/strand_live.html.heex b/lib/lanttern_web/live/pages/strands/id/strand_live.html.heex
@@ -14,7 +14,7 @@
     <.badge :for={year <- @strand.years} theme="dark"><%= year.name %></.badge>
   </div>
 </.cover>
-<div class="sticky top-0 border-b border-ltrn-lighter bg-white">
+<div class="sticky z-30 top-0 border-b border-ltrn-lighter bg-white">
   <div class="flex items-center justify-between container lg:max-w-5xl mx-auto">
     <.nav_tabs id="strand-nav-tabs">
       <:tab