Fix bento dark mode and card dark mode styling

CHANGELOG

@@ -2,6 +2,12 @@
 
 All notable changes to the "Bloom" project will be documented in this file.
 
+### [0.0.6] - 2024-05-01
+
+#### Changed
+
+- Bento box dark mode
+
 ### [0.0.5] - 2024-05-01
 
 #### Added

bloom_site/lib/bloom_site_web/components/bento_grid.ex

@@ -14,7 +14,7 @@ defmodule BloomSiteWeb.Components.BentoGrid do
 
   def bento_grid(assigns) do
     ~H"""
-    <div class={["grid w-full auto-rows-[16rem] grid-cols-3 gap-4", @class]}>
+    <div class={["flex flex-col md:grid w-full md:auto-rows-[16rem] !grid-cols-1 md:grid-cols-3 gap-4", @class]}>
       <%= render_slot(@inner_block) %>
     </div>
     """
@@ -37,15 +37,13 @@ defmodule BloomSiteWeb.Components.BentoGrid do
   def bento_card(assigns) do
     ~H"""
     <div class={[
-      "group relative row-span-#{@row_end - @row_start} col-span-#{@col_end - @col_start} row-start-#{@row_start} row-end-#{@row_end} col-start--#{@col_start} col-end-#{@col_end} flex flex-col justify-between overflow-hidden rounded-xl bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] transform-gpu dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]",
+      "group relative row-span-#{@row_end - @row_start} col-span-#{@col_end - @col_start} row-start-#{@row_start} row-end-#{@row_end} col-start--#{@col_start} col-end-#{@col_end} flex flex-col justify-between overflow-hidden rounded-xl bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]
+      transform-gpu dark:bg-zinc-900 dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]",
       @class
     ]}>
       <div><%= render_slot(@background) %></div>
       <div class="pointer-events-none z-10 flex transform-gpu flex-col gap-1 p-6 transition-all duration-300 group-hover:-translate-y-10">
-        <span class={[
-          "h-12 w-12 origin-left transform-gpu text-neutral-700 transition-all duration-300 ease-in-out group-hover:scale-75",
-          @icon
-        ]} />
+        <span class={["h-12 w-12 origin-left transform-gpu text-neutral-700 transition-all duration-300 ease-in-out group-hover:scale-75", @icon]} />
         <h3 class="text-xl font-semibold text-neutral-700 dark:text-neutral-300"><%= @name %></h3>
         <p class="max-w-lg text-neutral-400"><%= @description %></p>
       </div>

bloom_site/lib/bloom_site_web/components/card.ex

@@ -24,10 +24,10 @@ defmodule BloomSiteWeb.Components.Card do
       <div class="flex flex-row items-center gap-2">
         <img :if={assigns[:image]} class="rounded-full" width="32" height="32" alt="" src={@image} />
         <div class="flex flex-col">
-          <figcaption class="text-sm font-medium dark:text-white">
+          <figcaption class="text-sm font-medium dark:text-zinc-700">
             <%= @title %>
           </figcaption>
-          <p class="text-xs font-medium dark:text-white"><%= @subheading %></p>
+          <p class="text-xs font-medium dark:text-zinc-700"><%= @subheading %></p>
         </div>
       </div>
       <blockquote class="mt-2 text-sm"><%= @body %></blockquote>

bloom_site/lib/bloom_site_web/components/layouts/app.html.heex

@@ -5,7 +5,7 @@
         <img src={~p"/images/bloom.png"} width="36" />
       </a>
       <p class="bg-brand/5 text-brand rounded-full px-2 font-medium leading-6">
-        v0.0.5
+        v0.0.6
       </p>
     </div>
     <div class="flex items-center gap-4 font-semibold leading-6 text-zinc-900">

bloom_site/lib/bloom_site_web/live/landing_live.html.heex

@@ -222,7 +222,7 @@
   <.code_snippet>
     defp deps do
     [
-    {:bloom, "~> 0.0.5"},
+    {:bloom, "~> 0.0.6"},
     ]
     end
   </.code_snippet>
@@ -240,7 +240,7 @@
   </p>
 </h2>
 
-<.bento_grid class="grid-rows-3 grid-cols-3">
+<.bento_grid>
   <.bento_card
     name="Calendar Item"
     icon="hero-calendar"

bloom_site/mix.exs

@@ -54,7 +54,7 @@ defmodule BloomSite.MixProject do
       {:gettext, "~> 0.20"},
       {:jason, "~> 1.2"},
       {:plug_cowboy, "~> 2.5"},
-      {:bloom, "~> 0.0.5"},
+      {:bloom, "~> 0.0.6"},
       {:phoenix_storybook, "~> 0.6.0"}
     ]
   end

bloom_site/mix.lock

@@ -34,7 +34,7 @@
   "phoenix_view": {:hex, :phoenix_view, "2.0.3", "4d32c4817fce933693741deeb99ef1392619f942633dde834a5163124813aad3", [:mix], [{:phoenix_html, "~> 2.14.2 or ~> 3.0 or ~> 4.0", [hex: :phoenix_html, repo: "hexpm", optional: true]}, {:phoenix_template, "~> 1.0", [hex: :phoenix_template, repo: "hexpm", optional: false]}], "hexpm", "cd34049af41be2c627df99cd4eaa71fc52a328c0c3d8e7d4aa28f880c30e7f64"},
   "plug": {:hex, :plug, "1.15.3", "712976f504418f6dff0a3e554c40d705a9bcf89a7ccef92fc6a5ef8f16a30a97", [:mix], [{:mime, "~> 1.0 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:plug_crypto, "~> 1.1.1 or ~> 1.2 or ~> 2.0", [hex: :plug_crypto, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4.3 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "cc4365a3c010a56af402e0809208873d113e9c38c401cabd88027ef4f5c01fd2"},
   "plug_cowboy": {:hex, :plug_cowboy, "2.7.1", "87677ffe3b765bc96a89be7960f81703223fe2e21efa42c125fcd0127dd9d6b2", [:mix], [{:cowboy, "~> 2.7", [hex: :cowboy, repo: "hexpm", optional: false]}, {:cowboy_telemetry, "~> 0.3", [hex: :cowboy_telemetry, repo: "hexpm", optional: false]}, {:plug, "~> 1.14", [hex: :plug, repo: "hexpm", optional: false]}], "hexpm", "02dbd5f9ab571b864ae39418db7811618506256f6d13b4a45037e5fe78dc5de3"},
-  "plug_crypto": {:hex, :plug_crypto, "2.0.0", "77515cc10af06645abbfb5e6ad7a3e9714f805ae118fa1a70205f80d2d70fe73", [:mix], [], "hexpm", "53695bae57cc4e54566d993eb01074e4d894b65a3766f1c43e2c61a1b0f45ea9"},
+  "plug_crypto": {:hex, :plug_crypto, "2.1.0", "f44309c2b06d249c27c8d3f65cfe08158ade08418cf540fd4f72d4d6863abb7b", [:mix], [], "hexpm", "131216a4b030b8f8ce0f26038bc4421ae60e4bb95c5cf5395e1421437824c4fa"},
   "ranch": {:hex, :ranch, "1.8.0", "8c7a100a139fd57f17327b6413e4167ac559fbc04ca7448e9be9057311597a1d", [:make, :rebar3], [], "hexpm", "49fbcfd3682fab1f5d109351b61257676da1a2fdbe295904176d5e521a2ddfe5"},
   "swoosh": {:hex, :swoosh, "1.16.4", "d407768b3b68e3d1ff8d43b575a20c13bea338647143e241a324894cdb5af0b2", [:mix], [{:bandit, ">= 1.0.0", [hex: :bandit, repo: "hexpm", optional: true]}, {:cowboy, "~> 1.1 or ~> 2.4", [hex: :cowboy, repo: "hexpm", optional: true]}, {:ex_aws, "~> 2.1", [hex: :ex_aws, repo: "hexpm", optional: true]}, {:finch, "~> 0.6", [hex: :finch, repo: "hexpm", optional: true]}, {:gen_smtp, "~> 0.13 or ~> 1.0", [hex: :gen_smtp, repo: "hexpm", optional: true]}, {:hackney, "~> 1.9", [hex: :hackney, repo: "hexpm", optional: true]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: false]}, {:mail, "~> 0.2", [hex: :mail, repo: "hexpm", optional: true]}, {:mime, "~> 1.1 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:mua, "~> 0.1.0", [hex: :mua, repo: "hexpm", optional: true]}, {:multipart, "~> 0.4", [hex: :multipart, repo: "hexpm", optional: true]}, {:plug, "~> 1.9", [hex: :plug, repo: "hexpm", optional: true]}, {:plug_cowboy, ">= 1.0.0", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:req, "~> 0.4 or ~> 1.0", [hex: :req, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4.2 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "a38798368c09b09d7108803c42f24bb051d3e87bc1b81e6f09b20bf5a31c6676"},
   "tailwind": {:hex, :tailwind, "0.2.2", "9e27288b568ede1d88517e8c61259bc214a12d7eed271e102db4c93fcca9b2cd", [:mix], [{:castore, ">= 0.0.0", [hex: :castore, repo: "hexpm", optional: false]}], "hexpm", "ccfb5025179ea307f7f899d1bb3905cd0ac9f687ed77feebc8f67bdca78565c4"},

bloom_site/storybook/welcome.story.exs

@@ -52,7 +52,7 @@ defmodule Storybook.MyPage do
         <p>Can be installed by adding bloom to your list of dependencies in mix.exs:</p>
         <pre><code>def deps do
         [
-          {:bloom, "~> 0.0.5"}
+          {:bloom, "~> 0.0.6"}
         ]
       end</code></pre>
         <p>Relies on Phoenix being installed.</p>

lib/bloom/components/bento_grid.ex

@@ -14,7 +14,7 @@ defmodule Bloom.Components.BentoGrid do
 
   def bento_grid(assigns) do
     ~H"""
-    <div class={["grid w-full auto-rows-[16rem] grid-cols-3 gap-4", @class]}>
+    <div class={["flex flex-col md:grid w-full md:auto-rows-[16rem] !grid-cols-1 md:grid-cols-3 gap-4", @class]}>
       <%= render_slot(@inner_block) %>
     </div>
     """
@@ -37,7 +37,8 @@ defmodule Bloom.Components.BentoGrid do
   def bento_card(assigns) do
     ~H"""
     <div class={[
-      "group relative row-span-#{@row_end - @row_start} col-span-#{@col_end - @col_start} row-start-#{@row_start} row-end-#{@row_end} col-start--#{@col_start} col-end-#{@col_end} flex flex-col justify-between overflow-hidden rounded-xl bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] transform-gpu dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]",
+      "group relative row-span-#{@row_end - @row_start} col-span-#{@col_end - @col_start} row-start-#{@row_start} row-end-#{@row_end} col-start--#{@col_start} col-end-#{@col_end} flex flex-col justify-between overflow-hidden rounded-xl bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]
+      transform-gpu dark:bg-zinc-900 dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]",
       @class
     ]}>
       <div><%= render_slot(@background) %></div>

lib/bloom/components/card.ex

@@ -24,10 +24,10 @@ defmodule Bloom.Components.Card do
       <div class="flex flex-row items-center gap-2">
         <img :if={assigns[:image]} class="rounded-full" width="32" height="32" alt="" src={@image} />
         <div class="flex flex-col">
-          <figcaption class="text-sm font-medium dark:text-white">
+          <figcaption class="text-sm font-medium dark:text-zinc-700">
             <%= @title %>
           </figcaption>
-          <p class="text-xs font-medium dark:text-white"><%= @subheading %></p>
+          <p class="text-xs font-medium dark:text-zinc-700"><%= @subheading %></p>
         </div>
       </div>
       <blockquote class="mt-2 text-sm"><%= @body %></blockquote>

mix.exs

@@ -4,7 +4,7 @@ defmodule Bloom.MixProject do
   def project do
     [
       app: :bloom,
-      version: "0.0.5",
+      version: "0.0.6",
       elixir: "~> 1.16",
       start_permanent: Mix.env() == :prod,
       deps: deps(),
@@ -37,8 +37,7 @@ defmodule Bloom.MixProject do
     [
       {:phoenix, "~> 1.7.6"},
       {:phoenix_live_view, "~> 0.20"},
-      {:phoenix_html, "~> 4.0"},
-      {:phoenix_html_helpers, "~> 1.0"},
+      {:phoenix_html, ">= 3.3.3"},
       {:mox, "~> 1.0", only: :test},
       {:ex_doc, ">= 0.0.0", only: :dev, runtime: false}
     ]

mix.lock

@@ -9,7 +9,7 @@
   "mox": {:hex, :mox, "1.1.0", "0f5e399649ce9ab7602f72e718305c0f9cdc351190f72844599545e4996af73c", [:mix], [], "hexpm", "d44474c50be02d5b72131070281a5d3895c0e7a95c780e90bc0cfe712f633a13"},
   "nimble_parsec": {:hex, :nimble_parsec, "1.4.0", "51f9b613ea62cfa97b25ccc2c1b4216e81df970acd8e16e8d1bdc58fef21370d", [:mix], [], "hexpm", "9c565862810fb383e9838c1dd2d7d2c437b3d13b267414ba6af33e50d2d1cf28"},
   "phoenix": {:hex, :phoenix, "1.7.12", "1cc589e0eab99f593a8aa38ec45f15d25297dd6187ee801c8de8947090b5a9d3", [:mix], [{:castore, ">= 0.0.0", [hex: :castore, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:phoenix_pubsub, "~> 2.1", [hex: :phoenix_pubsub, repo: "hexpm", optional: false]}, {:phoenix_template, "~> 1.0", [hex: :phoenix_template, repo: "hexpm", optional: false]}, {:phoenix_view, "~> 2.0", [hex: :phoenix_view, repo: "hexpm", optional: true]}, {:plug, "~> 1.14", [hex: :plug, repo: "hexpm", optional: false]}, {:plug_cowboy, "~> 2.7", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:plug_crypto, "~> 1.2 or ~> 2.0", [hex: :plug_crypto, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}, {:websock_adapter, "~> 0.5.3", [hex: :websock_adapter, repo: "hexpm", optional: false]}], "hexpm", "d646192fbade9f485b01bc9920c139bfdd19d0f8df3d73fd8eaf2dfbe0d2837c"},
-  "phoenix_html": {:hex, :phoenix_html, "4.1.1", "4c064fd3873d12ebb1388425a8f2a19348cef56e7289e1998e2d2fa758aa982e", [:mix], [], "hexpm", "f2f2df5a72bc9a2f510b21497fd7d2b86d932ec0598f0210fed4114adc546c6f"},
+  "phoenix_html": {:hex, :phoenix_html, "3.3.3", "380b8fb45912b5638d2f1d925a3771b4516b9a78587249cabe394e0a5d579dc9", [:mix], [{:plug, "~> 1.5", [hex: :plug, repo: "hexpm", optional: true]}], "hexpm", "923ebe6fec6e2e3b3e569dfbdc6560de932cd54b000ada0208b5f45024bdd76c"},
   "phoenix_html_helpers": {:hex, :phoenix_html_helpers, "1.0.1", "7eed85c52eff80a179391036931791ee5d2f713d76a81d0d2c6ebafe1e11e5ec", [:mix], [{:phoenix_html, "~> 4.0", [hex: :phoenix_html, repo: "hexpm", optional: false]}, {:plug, "~> 1.5", [hex: :plug, repo: "hexpm", optional: true]}], "hexpm", "cffd2385d1fa4f78b04432df69ab8da63dc5cf63e07b713a4dcf36a3740e3090"},
   "phoenix_live_view": {:hex, :phoenix_live_view, "0.20.14", "70fa101aa0539e81bed4238777498f6215e9dda3461bdaa067cad6908110c364", [:mix], [{:floki, "~> 0.36", [hex: :floki, repo: "hexpm", optional: true]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:phoenix, "~> 1.6.15 or ~> 1.7.0", [hex: :phoenix, repo: "hexpm", optional: false]}, {:phoenix_html, "~> 3.3 or ~> 4.0", [hex: :phoenix_html, repo: "hexpm", optional: false]}, {:phoenix_template, "~> 1.0", [hex: :phoenix_template, repo: "hexpm", optional: false]}, {:phoenix_view, "~> 2.0", [hex: :phoenix_view, repo: "hexpm", optional: true]}, {:plug, "~> 1.15", [hex: :plug, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4.2 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "82f6d006c5264f979ed5eb75593d808bbe39020f20df2e78426f4f2d570e2402"},
   "phoenix_pubsub": {:hex, :phoenix_pubsub, "2.1.3", "3168d78ba41835aecad272d5e8cd51aa87a7ac9eb836eabc42f6e57538e3731d", [:mix], [], "hexpm", "bba06bc1dcfd8cb086759f0edc94a8ba2bc8896d5331a1e2c2902bf8e36ee502"},

priv/templates/bento_grid.ex

@@ -14,7 +14,7 @@ defmodule <%= @module_name %>Web.Components.BentoGrid do
 
   def bento_grid(assigns) do
     ~H"""
-    <div class={["grid w-full auto-rows-[16rem] grid-cols-3 gap-4", @class]}>
+    <div class={["flex flex-col md:grid w-full md:auto-rows-[16rem] !grid-cols-1 md:grid-cols-3 gap-4", @class]}>
       <%%= render_slot(@inner_block) %>
     </div>
     """
@@ -37,7 +37,8 @@ defmodule <%= @module_name %>Web.Components.BentoGrid do
   def bento_card(assigns) do
     ~H"""
     <div class={[
-      "group relative row-span-#{@row_end - @row_start} col-span-#{@col_end - @col_start} row-start-#{@row_start} row-end-#{@row_end} col-start--#{@col_start} col-end-#{@col_end} flex flex-col justify-between overflow-hidden rounded-xl bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] transform-gpu dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]",
+      "group relative row-span-#{@row_end - @row_start} col-span-#{@col_end - @col_start} row-start-#{@row_start} row-end-#{@row_end} col-start--#{@col_start} col-end-#{@col_end} flex flex-col justify-between overflow-hidden rounded-xl bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]
+      transform-gpu dark:bg-zinc-900 dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]",
       @class
     ]}>
       <div><%%= render_slot(@background) %></div>

priv/templates/card.ex

@@ -24,10 +24,10 @@ defmodule <%= @module_name %>Web.Components.Card do
       <div class="flex flex-row items-center gap-2">
         <img :if={assigns[:image]} class="rounded-full" width="32" height="32" alt="" src={@image} />
         <div class="flex flex-col">
-          <figcaption class="text-sm font-medium dark:text-white">
+          <figcaption class="text-sm font-medium dark:text-zinc-700">
             <%%= @title %>
           </figcaption>
-          <p class="text-xs font-medium dark:text-white"><%%= @subheading %></p>
+          <p class="text-xs font-medium dark:text-zinc-700"><%%= @subheading %></p>
         </div>
       </div>
       <blockquote class="mt-2 text-sm"><%%= @body %></blockquote>