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 <button
phx-click={JS.exec("data-cancel", to: "##{@id}")} phx-click={JS.exec("data-cancel", to: "##{@id}")}
type="button" 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")} aria-label={gettext("close")}
> >
<.icon name="hero-x-mark-solid" class="h-5 w-5" /> <.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", "phx-submit-loading:opacity-75 rounded-md py-2 px-3",
"text-sm font-semibold leading-6 ", "text-sm font-semibold leading-6 ",
"bg-zinc-900 hover:bg-zinc-700 dark:bg-zinc-100 dark:hover:bg-zinc-400", "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", "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600",
@class @class
]} ]}
@@ -347,7 +347,17 @@ defmodule MusicLibraryWeb.CoreComponents do
<select <select
id={@id} id={@id}
name={@name} 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} multiple={@multiple}
{@rest} {@rest}
> >
@@ -389,13 +399,15 @@ defmodule MusicLibraryWeb.CoreComponents do
id={@id} id={@id}
value={Phoenix.HTML.Form.normalize_value(@type, @value)} value={Phoenix.HTML.Form.normalize_value(@type, @value)}
class={[ 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", "ring-1 ring-inset focus:z-10 focus:ring-2 focus:ring-inset",
"text-gray-900 dark:text-gray-200", "focus:border-zinc-400 focus:ring-zinc-400 dark:focus:ring-zinc-300 focus:ring-0",
"dark:bg-zinc-700", "sm:text-sm",
"ring-gray-200 dark:ring-gray-400", "text-zinc-900 dark:text-zinc-200",
"placeholder:text-gray-400 dark:placeholder:text-gray-400", "ring-zinc-200 dark:ring-zinc-400",
"focus:ring-zinc-400 dark:focus:ring-zinc-300", "placeholder:text-zinc-400 dark:placeholder:text-zinc-400",
@errors == [] && "border-zinc-300 focus:border-zinc-400", @errors == [] && "border-zinc-300 focus:border-zinc-400",
@errors != [] && "border-rose-400 focus:border-rose-400" @errors != [] && "border-rose-400 focus:border-rose-400"
]} ]}
@@ -450,10 +462,10 @@ defmodule MusicLibraryWeb.CoreComponents do
@class @class
]}> ]}>
<div class="font-semibold"> <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) %> <%= render_slot(@inner_block) %>
</h1> </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) %> <%= render_slot(@subtitle) %>
</h2> </h2>
</div> </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 def render(assigns) do
~H""" ~H"""
<div> <div>
<.header> <header>
<%= @title %> <h1 class="text-base font-medium leading-6 text-zinc-700 dark:text-zinc-400">
<:subtitle></:subtitle> <%= @title %>
</.header> </h1>
</header>
<.simple_form <.simple_form
for={@form} for={@form}
@@ -53,14 +54,17 @@ defmodule MusicLibraryWeb.RecordLive.FormComponent do
<.label for={@uploads.cover_data.ref}> <.label for={@uploads.cover_data.ref}>
<%= gettext("Cover art") %> <%= gettext("Cover art") %>
</.label> </.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") %> <%= gettext("No cover selected") %>
</span> </span>
<%= for entry <- @uploads.cover_data.entries do %> <%= 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 %> <% end %>
<.live_file_input <.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} upload={@uploads.cover_data}
/> />
</div> </div>
priv/gettext/default.pot
+12 -12
View File
@@ -11,7 +11,7 @@
msgid "" msgid ""
msgstr "" msgstr ""
#: lib/music_library_web/components/core_components.ex:503 #: lib/music_library_web/components/core_components.ex:515
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Actions" msgid "Actions"
msgstr "" msgstr ""
@@ -101,54 +101,54 @@ msgstr ""
msgid "Previous" msgid "Previous"
msgstr "" msgstr ""
#: lib/music_library_web/live/record_live/form_component.ex:34 #: lib/music_library_web/live/record_live/form_component.ex:35
#: lib/music_library_web/live/record_live/form_component.ex:41 #: lib/music_library_web/live/record_live/form_component.ex:42
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Choose a value" msgid "Choose a value"
msgstr "" msgstr ""
#: lib/music_library_web/live/record_live/form_component.ex:54 #: lib/music_library_web/live/record_live/form_component.ex:55
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Cover art" msgid "Cover art"
msgstr "" msgstr ""
#: lib/music_library_web/live/record_live/form_component.ex:40 #: lib/music_library_web/live/record_live/form_component.ex:41
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Format" msgid "Format"
msgstr "" msgstr ""
#: lib/music_library_web/live/record_live/form_component.ex:57 #: lib/music_library_web/live/record_live/form_component.ex:61
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "No cover selected" msgid "No cover selected"
msgstr "" msgstr ""
#: lib/music_library_web/live/record_live/form_component.ex:50 #: lib/music_library_web/live/record_live/form_component.ex:51
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Purchased at" msgid "Purchased at"
msgstr "" msgstr ""
#: lib/music_library_web/live/record_live/form_component.ex:113 #: lib/music_library_web/live/record_live/form_component.ex:117
#: lib/music_library_web/live/wishlist_live/index.ex:129 #: lib/music_library_web/live/wishlist_live/index.ex:129
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Record updated successfully" msgid "Record updated successfully"
msgstr "" msgstr ""
#: lib/music_library_web/live/record_live/form_component.ex:45 #: lib/music_library_web/live/record_live/form_component.ex:46
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Release" msgid "Release"
msgstr "" msgstr ""
#: lib/music_library_web/live/record_live/form_component.ex:68 #: lib/music_library_web/live/record_live/form_component.ex:72
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Save" msgid "Save"
msgstr "" msgstr ""
#: lib/music_library_web/live/record_live/form_component.ex:68 #: lib/music_library_web/live/record_live/form_component.ex:72
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Saving..." msgid "Saving..."
msgstr "" msgstr ""
#: lib/music_library_web/live/record_live/form_component.ex:33 #: lib/music_library_web/live/record_live/form_component.ex:34
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Type" msgid "Type"
msgstr "" msgstr ""