cloud/music_library
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update colors in form component

Browse Source
This commit is contained in:
Claudio Ortolina
2024-10-27 08:29:24 +00:00
parent d9fe2a2419
commit 94161f60c3
3 changed files with 46 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/music_library_web/components/core_components.ex
+23 -11
View File
@@ -81,7 +81,7 @@ defmodule MusicLibraryWeb.CoreComponents do
<button
phx-click={JS.exec("data-cancel", to: "##{@id}")}
type="button"
class="-m-3 flex-none p-3 opacity-40 hover:opacity-80 bg-gray-50 dark:bg-zinc-800 dark:text-zinc-50"
class="-m-3 flex-none p-3 opacity-40 hover:opacity-80 bg-zinc-50 dark:bg-zinc-800 dark:text-zinc-50"
aria-label={gettext("close")}
>
<.icon name="hero-x-mark-solid" class="h-5 w-5" />
@@ -243,7 +243,7 @@ defmodule MusicLibraryWeb.CoreComponents do
"phx-submit-loading:opacity-75 rounded-md py-2 px-3",
"text-sm font-semibold leading-6 ",
"bg-zinc-900 hover:bg-zinc-700 dark:bg-zinc-100 dark:hover:bg-zinc-400",
"text-white active:text-white/80 dark:text-gray-900 dark:active:text-gray-900/80",
"text-white active:text-white/80 dark:text-zinc-900 dark:active:text-zinc-900/80",
"focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600",
@class
]}
@@ -347,7 +347,17 @@ defmodule MusicLibraryWeb.CoreComponents do
<select
id={@id}
name={@name}
class="mt-2 block w-full rounded-md border border-gray-300 bg-white shadow-sm focus:border-zinc-400 focus:ring-0 sm:text-sm"
class={[
"mt-2 block w-full rounded-md",
"border border-zinc-300",
"bg-white shadow-sm dark:bg-zinc-700",
"ring-1 ring-inset focus:z-10 focus:ring-2 focus:ring-inset",
"focus:border-zinc-400 focus:ring-zinc-400 dark:focus:ring-zinc-300 focus:ring-0",
"sm:text-sm",
"text-zinc-900 dark:text-zinc-200",
"ring-zinc-200 dark:ring-zinc-400",
"placeholder:text-zinc-400 dark:placeholder:text-zinc-400"
]}
multiple={@multiple}
{@rest}
>
@@ -389,13 +399,15 @@ defmodule MusicLibraryWeb.CoreComponents do
id={@id}
value={Phoenix.HTML.Form.normalize_value(@type, @value)}
class={[
"mt-2 block w-full rounded-md text-zinc-900 focus:ring-0 sm:text-sm sm:leading-6",
"mt-2 block w-full rounded-md",
"border border-zinc-300",
"bg-white shadow-sm dark:bg-zinc-700",
"ring-1 ring-inset focus:z-10 focus:ring-2 focus:ring-inset",
"text-gray-900 dark:text-gray-200",
"dark:bg-zinc-700",
"ring-gray-200 dark:ring-gray-400",
"placeholder:text-gray-400 dark:placeholder:text-gray-400",
"focus:ring-zinc-400 dark:focus:ring-zinc-300",
"focus:border-zinc-400 focus:ring-zinc-400 dark:focus:ring-zinc-300 focus:ring-0",
"sm:text-sm",
"text-zinc-900 dark:text-zinc-200",
"ring-zinc-200 dark:ring-zinc-400",
"placeholder:text-zinc-400 dark:placeholder:text-zinc-400",
@errors == [] && "border-zinc-300 focus:border-zinc-400",
@errors != [] && "border-rose-400 focus:border-rose-400"
]}
@@ -450,10 +462,10 @@ defmodule MusicLibraryWeb.CoreComponents do
@class
]}>
<div class="font-semibold">
<h1 class="text-sm md:text-base lg:text-2xl text-gray-900">
<h1 class="text-sm md:text-base lg:text-2xl text-zinc-900">
<%= render_slot(@inner_block) %>
</h1>
<h2 :if={@subtitle != []} class="mt-2 text-sm md:text-base text-gray-600">
<h2 :if={@subtitle != []} class="mt-2 text-sm md:text-base text-zinc-600">
<%= render_slot(@subtitle) %>
</h2>
</div>
lib/music_library_web/live/record_live/form_component.ex
+11 -7
View File
@@ -14,10 +14,11 @@ defmodule MusicLibraryWeb.RecordLive.FormComponent do
def render(assigns) do
~H"""
<div>
<.header>
<%= @title %>
<:subtitle></:subtitle>
</.header>
<header>
<h1 class="text-base font-medium leading-6 text-zinc-700 dark:text-zinc-400">
<%= @title %>
</h1>
</header>
<.simple_form
for={@form}
@@ -53,14 +54,17 @@ defmodule MusicLibraryWeb.RecordLive.FormComponent do
<.label for={@uploads.cover_data.ref}>
<%= gettext("Cover art") %>
</.label>
<span :if={@uploads.cover_data.entries == []} class="float-right">
<span
:if={@uploads.cover_data.entries == []}
class="float-right text-zinc-700 dark:text-zinc-400"
>
<%= gettext("No cover selected") %>
</span>
<%= for entry <- @uploads.cover_data.entries do %>
<span class="float-right"><%= entry.progress %>%</span>
<span class="float-right text-zinc-700 dark:text-zinc-400"><%= entry.progress %>%</span>
<% end %>
<.live_file_input
class="mt-2 block w-full rounded-lg text-zinc-900 focus:ring-0 sm:text-sm sm:leading-6"
class="mt-2 block w-full rounded-lg text-zinc-900 dark:text-zinc-200 focus:ring-0 sm:text-sm sm:leading-6"
upload={@uploads.cover_data}
/>
</div>