diff --git a/assets/css/app.css b/assets/css/app.css index 14e9ec1..e3c7ee4 100644 --- a/assets/css/app.css +++ b/assets/css/app.css @@ -119,6 +119,8 @@ color: oklch(58% 0.233 277.117) !important; } +/* Input field dark mode fixes */ + /* Marker cluster styles */ .marker-cluster-small { background-color: rgba(16, 185, 129, 0.8); @@ -326,4 +328,60 @@ .historical-dot-marker { z-index: 15 !important; +} + +/* Input field dark mode fixes - Override DaisyUI CSS variables for dark theme */ + +[data-theme="dark"] { + --color-base-100: #2d3748 !important; + --color-base-200: #1a202c !important; + --color-base-300: #171923 !important; + --color-base-content: #f7fafc !important; + --input-bg: #2d3748; + --input-color: #f7fafc; + --input-border: #4a5568; +} + +/* Ultra-specific selector to override DaisyUI */ +html[data-theme="dark"] .card .input, +html[data-theme="dark"] .card .input-bordered, +html[data-theme="dark"] .card input.input, +html[data-theme="dark"] .card input.input-bordered, +html[data-theme="dark"] .card input[type="email"], +html[data-theme="dark"] .card input[type="password"], +html[data-theme="dark"] .form-control input.input, +html[data-theme="dark"] .form-control input.input-bordered, +html[data-theme="dark"] .form-control input[type="email"], +html[data-theme="dark"] .form-control input[type="password"] { + background-color: #2d3748 !important; + color: #f7fafc !important; + border-color: #4a5568 !important; +} + +html[data-theme="dark"] .card .input:focus, +html[data-theme="dark"] .card .input-bordered:focus, +html[data-theme="dark"] .card input.input:focus, +html[data-theme="dark"] .card input.input-bordered:focus, +html[data-theme="dark"] .card input[type="email"]:focus, +html[data-theme="dark"] .card input[type="password"]:focus, +html[data-theme="dark"] .form-control input.input:focus, +html[data-theme="dark"] .form-control input.input-bordered:focus, +html[data-theme="dark"] .form-control input[type="email"]:focus, +html[data-theme="dark"] .form-control input[type="password"]:focus { + background-color: #2d3748 !important; + color: #f7fafc !important; + border-color: #6366f1 !important; +} + +html[data-theme="dark"] .input::placeholder, +html[data-theme="dark"] input.input::placeholder, +html[data-theme="dark"] input[type="email"]::placeholder, +html[data-theme="dark"] input[type="password"]::placeholder { + color: oklch(60% 0.029 256.847) !important; +} + +html[data-theme="dark"] .checkbox, +html[data-theme="dark"] input.checkbox { + background-color: var(--input-bg) !important; + border-color: var(--input-border) !important; } \ No newline at end of file diff --git a/lib/aprsme_web/components/core_components.ex b/lib/aprsme_web/components/core_components.ex index f7c5c5a..329651f 100644 --- a/lib/aprsme_web/components/core_components.ex +++ b/lib/aprsme_web/components/core_components.ex @@ -237,7 +237,7 @@ defmodule AprsmeWeb.CoreComponents do def simple_form(assigns) do ~H""" <.form :let={f} for={@for} as={@as} {@rest}> -
+ Enter your email address to receive a new confirmation link +
- <.simple_form - :let={f} - for={%{}} - as={:user} - id="resend_confirmation_form" - phx-submit="send_instructions" - > - <.input field={{f, :email}} type="email" label="Email" required /> - <:actions> - <.button phx-disable-with="Sending...">Resend confirmation instructions - - + <.simple_form + :let={_f} + for={%{}} + as={:user} + id="resend_confirmation_form" + phx-submit="send_instructions" + > +- <.link navigate={~p"/users/register"}>Register - | <.link navigate={~p"/users/log_in"}>Log in -
+Click the button below to confirm your account
- <.simple_form :let={f} for={%{}} as={:user} id="confirmation_form" phx-submit="confirm_account"> - <.input field={{f, :token}} type="hidden" value={@token} /> - <:actions> - <.button phx-disable-with="Confirming..." class="w-full">Confirm my account - - + <.simple_form + :let={_f} + for={%{}} + as={:user} + id="confirmation_form" + phx-submit="confirm_account" + > + -- <.link navigate={~p"/users/register"}>Register - | <.link navigate={~p"/users/log_in"}>Log in -
+We'll send a password reset link to your inbox
-We'll send a password reset link to your inbox
+ <.simple_form + :let={_f} + id="reset_password_form" + for={%{}} + as={:user} + phx-submit="send_email" + > +- <.link navigate={~p"/users/register"}>Register - | <.link navigate={~p"/users/log_in"}>Log in -
++ Don't have an account? + <.link navigate={~p"/users/register"} class="link link-primary"> + Sign up + + for an account now. +
-- Don't have an account? - <.link navigate={~p"/users/register"} class="font-semibold text-brand hover:underline"> - Sign up - - for an account now. -
+ <.simple_form + :let={f} + id="login_form" + for={@changeset} + action={~p"/users/log_in"} + as={:user} + phx-update="ignore" + > ++ Already registered? + <.link navigate={~p"/users/log_in"} class="link link-primary"> + Sign in + + to your account now. +
-- Already registered? - <.link navigate={~p"/users/log_in"} class="font-semibold text-brand hover:underline"> - Sign in - - to your account now. -
+ <.simple_form + :let={f} + id="registration_form" + for={@changeset} + phx-submit="save" + phx-change="validate" + phx-trigger-action={@trigger_submit} + action={~p"/users/log_in?_action=registered"} + method="post" + as={:user} + > +Enter your new password below
- <.simple_form - :let={f} - for={@changeset} - id="reset_password_form" - phx-submit="reset_password" - phx-change="validate" - > - <.error :if={@changeset.action == :insert}> - Oops, something went wrong! Please check the errors below. - + <.simple_form + :let={f} + for={@changeset} + id="reset_password_form" + phx-submit="reset_password" + phx-change="validate" + > +- <.link navigate={~p"/users/register"}>Register - | <.link navigate={~p"/users/log_in"}>Log in -
+Update your email address and password
+