thelonius/phoenix-ausblick
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add dark mode styling to form elements

Browse Source
This commit is contained in:
Thelonius Kort
2023-02-28 21:38:11 +01:00
parent dc4c8e4790
commit fc0818678c
2 changed files with 14 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
lib/outlook_web/components/core_components.ex
View File

@ -191,7 +191,7 @@ defmodule OutlookWeb.CoreComponents do
def simple_form(assigns) do def simple_form(assigns) do
~H""" ~H"""
<.form :let={f} for={@for} as={@as} {@rest}> <.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) %> <%= render_slot(@inner_block, f) %>
<div :for={action <- @actions} class="mt-2 flex items-center justify-between gap-6"> <div :for={action <- @actions} class="mt-2 flex items-center justify-between gap-6">
<%= render_slot(action, f) %> <%= render_slot(action, f) %>
@ -220,8 +220,9 @@ defmodule OutlookWeb.CoreComponents do
<button <button
type={@type} type={@type}
class={[ 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", "text-sm font-semibold leading-6 text-white active:text-white/80",
"dark:text-gray-300 dark:active:text-gray/80",
@class @class
]} ]}
{@rest} {@rest}
@ -281,7 +282,7 @@ defmodule OutlookWeb.CoreComponents do
assigns = assign_new(assigns, :checked, fn -> input_equals?(assigns.value, "true") end) assigns = assign_new(assigns, :checked, fn -> input_equals?(assigns.value, "true") end)
~H""" ~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="hidden" name={@name} value="false" />
<input <input
type="checkbox" type="checkbox"
@ -289,7 +290,10 @@ defmodule OutlookWeb.CoreComponents do
name={@name} name={@name}
value="true" value="true"
checked={@checked} 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} {@rest}
/> />
<%= @label %> <%= @label %>
@ -304,7 +308,7 @@ defmodule OutlookWeb.CoreComponents do
<select <select
id={@id} id={@id}
name={@name} 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} multiple={@multiple}
{@rest} {@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]", "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", "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", "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 @class
]} ]}
{@rest} {@rest}
@ -360,7 +365,8 @@ defmodule OutlookWeb.CoreComponents do
input_border(@errors), input_border(@errors),
"mt-2 block w-full rounded-lg border-zinc-300 py-[7px] px-[11px]", "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", "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} {@rest}
/> />
@ -383,7 +389,7 @@ defmodule OutlookWeb.CoreComponents do
def label(assigns) do def label(assigns) do
~H""" ~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) %> <%= render_slot(@inner_block) %>
</label> </label>
""" """

2
lib/outlook_web/components/tunit_editor_component.ex
View File

@ -14,7 +14,7 @@ defmodule OutlookWeb.TunitEditorComponent do
<%= @current_tunit.content |> raw %> <%= @current_tunit.content |> raw %>
</div> --%> </div> --%>
<form phx-change="update_current_tunit" phx-target={@target}> <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> disabled={!@current_tunit.status}><%= @current_tunit.content %></textarea>
</form> </form>
<.status_selector target={@target} disabled={!@current_tunit.status} tunit={@current_tunit} /> <.status_selector target={@target} disabled={!@current_tunit.status} tunit={@current_tunit} />