From fc0818678cee543191efedb2ba02e345bda662b1 Mon Sep 17 00:00:00 2001
From: Thelonius Kort <tnt@users.noreply.github.com>
Date: Tue, 28 Feb 2023 21:38:11 +0100
Subject: [PATCH] Add dark mode styling to form elements

---
 lib/outlook_web/components/core_components.ex | 20 ++++++++++++-------
 .../components/tunit_editor_component.ex      |  2 +-
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/lib/outlook_web/components/core_components.ex b/lib/outlook_web/components/core_components.ex
index 464c302..80c82aa 100644
--- a/lib/outlook_web/components/core_components.ex
+++ b/lib/outlook_web/components/core_components.ex
@@ -191,7 +191,7 @@ defmodule OutlookWeb.CoreComponents do
   def simple_form(assigns) do
     ~H"""
     <.form :let={f} for={@for} as={@as} {@rest}>
-      <div class="space-y-8 bg-white mt-10">
+      <div class="space-y-8 bg-transparent mt-10">
         <%= render_slot(@inner_block, f) %>
         <div :for={action <- @actions} class="mt-2 flex items-center justify-between gap-6">
           <%= render_slot(action, f) %>
@@ -220,8 +220,9 @@ defmodule OutlookWeb.CoreComponents do
     <button
       type={@type}
       class={[
-        "phx-submit-loading:opacity-75 rounded-lg bg-zinc-900 hover:bg-zinc-700 py-2 px-3",
+        "phx-submit-loading:opacity-75 rounded-lg bg-zinc-900 dark:bg-gray-600 hover:bg-zinc-700 py-2 px-3",
         "text-sm font-semibold leading-6 text-white active:text-white/80",
+        "dark:text-gray-300 dark:active:text-gray/80",
         @class
       ]}
       {@rest}
@@ -281,7 +282,7 @@ defmodule OutlookWeb.CoreComponents do
     assigns = assign_new(assigns, :checked, fn -> input_equals?(assigns.value, "true") end)
 
     ~H"""
-    <label phx-feedback-for={@name} class="flex items-center gap-4 text-sm leading-6 text-zinc-600">
+    <label phx-feedback-for={@name} class="flex items-center gap-4 text-sm leading-6 text-zinc-600 dark:text-zinc-300">
       <input type="hidden" name={@name} value="false" />
       <input
         type="checkbox"
@@ -289,7 +290,10 @@ defmodule OutlookWeb.CoreComponents do
         name={@name}
         value="true"
         checked={@checked}
-        class="rounded border-zinc-300 text-zinc-900 focus:ring-zinc-900"
+        class={[
+          "rounded border-zinc-300 dark:border-stone-800 dark:bg-stone-800 text-zinc-900  dark:text-zinc-200",
+          " focus:ring-zinc-900 dark:focus:ring-stone-700 dark:focus:bg-stone-800",
+        ]}
         {@rest}
       />
       <%= @label %>
@@ -304,7 +308,7 @@ defmodule OutlookWeb.CoreComponents do
       <select
         id={@id}
         name={@name}
-        class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-zinc-500 focus:border-zinc-500 sm:text-sm"
+        class="mt-1 block w-full py-2 px-3 border border-gray-300 dark:border-gray-700 bg-white dark:bg-stone-900 rounded-md shadow-sm focus:outline-none focus:ring-zinc-500 focus:border-zinc-500 sm:text-sm"
         multiple={@multiple}
         {@rest}
       >
@@ -328,6 +332,7 @@ defmodule OutlookWeb.CoreComponents do
           "mt-2 block min-h-[6rem] w-full rounded-lg border-zinc-300 py-[7px] px-[11px]",
           "text-zinc-900 focus:border-zinc-400 focus:outline-none focus:ring-4 focus:ring-zinc-800/5 sm:text-sm sm:leading-6",
           "phx-no-feedback:border-zinc-300 phx-no-feedback:focus:border-zinc-400 phx-no-feedback:focus:ring-zinc-800/5",
+          "dark:border-gray-700 dark:bg-stone-900 dark:text-gray-300",
           @class
         ]}
         {@rest}
@@ -360,7 +365,8 @@ defmodule OutlookWeb.CoreComponents do
           input_border(@errors),
           "mt-2 block w-full rounded-lg border-zinc-300 py-[7px] px-[11px]",
           "text-zinc-900 focus:outline-none focus:ring-4 sm:text-sm sm:leading-6",
-          "phx-no-feedback:border-zinc-300 phx-no-feedback:focus:border-zinc-400 phx-no-feedback:focus:ring-zinc-800/5"
+          "phx-no-feedback:border-zinc-300 phx-no-feedback:focus:border-zinc-400 phx-no-feedback:focus:ring-zinc-800/5",
+          "dark:border-gray-700 dark:bg-stone-900 dark:text-gray-300",
         ]}
         {@rest}
       />
@@ -383,7 +389,7 @@ defmodule OutlookWeb.CoreComponents do
 
   def label(assigns) do
     ~H"""
-    <label for={@for} class="block text-sm font-semibold leading-6 text-zinc-800">
+    <label for={@for} class="block text-sm font-semibold leading-6 text-zinc-800 dark:text-zinc-400">
       <%= render_slot(@inner_block) %>
     </label>
     """
diff --git a/lib/outlook_web/components/tunit_editor_component.ex b/lib/outlook_web/components/tunit_editor_component.ex
index 584c677..ab7c630 100644
--- a/lib/outlook_web/components/tunit_editor_component.ex
+++ b/lib/outlook_web/components/tunit_editor_component.ex
@@ -14,7 +14,7 @@ defmodule OutlookWeb.TunitEditorComponent do
         <%= @current_tunit.content |> raw %>
       </div> --%>
       <form phx-change="update_current_tunit" phx-target={@target}>
-        <textarea name="content" class="h-48 rounded border-slate-500 resize-none w-full"
+        <textarea name="content" class="h-48 rounded border-slate-500 resize-none bg-transparent w-full"
           disabled={!@current_tunit.status}><%= @current_tunit.content %></textarea>
       </form>
       <.status_selector target={@target} disabled={!@current_tunit.status} tunit={@current_tunit} />