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
~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>
"""