From 04ee1e73bee8df22fbe098ddd4cf922b2215f2e5 Mon Sep 17 00:00:00 2001 From: neo773 <62795688+neo773@users.noreply.github.com> Date: Sat, 19 Apr 2025 00:26:44 +0530 Subject: [PATCH] Fix dark mode support and improve notification/MFA UI (#2126) * Fix dark mode support and improve notification/MFA UI" * hide auth tabs on mfa/verify --- .../controllers/theme_controller.js | 3 +-- app/views/layouts/auth.html.erb | 20 ++++++++++--------- app/views/layouts/shared/_htmldoc.html.erb | 2 +- app/views/mfa/verify.html.erb | 3 ++- .../shared/notifications/_alert.html.erb | 4 ++-- app/views/shared/notifications/_cta.html.erb | 4 ++-- .../shared/notifications/_loading.html.erb | 4 ++-- .../shared/notifications/_notice.html.erb | 4 ++-- 8 files changed, 23 insertions(+), 21 deletions(-) diff --git a/app/javascript/controllers/theme_controller.js b/app/javascript/controllers/theme_controller.js index 47815efc..d01edf7f 100644 --- a/app/javascript/controllers/theme_controller.js +++ b/app/javascript/controllers/theme_controller.js @@ -50,8 +50,7 @@ export default class extends Controller { } systemPrefersDark() { - return false - // return window.matchMedia("(prefers-color-scheme: dark)").matches + return window.matchMedia("(prefers-color-scheme: dark)").matches } handleSystemThemeChange = (event) => { diff --git a/app/views/layouts/auth.html.erb b/app/views/layouts/auth.html.erb index 1b3c4731..85adc63a 100644 --- a/app/views/layouts/auth.html.erb +++ b/app/views/layouts/auth.html.erb @@ -10,18 +10,20 @@

<%= content_for?(:header_title) ? yield(:header_title).html_safe : t(".your_account") %>

-
-
- <%= link_to new_session_path, + <% if (controller_name == "sessions" && action_name == "new") || (controller_name == "registrations" && action_name == "new") %> +
+
+ <%= link_to new_session_path, class: "w-1/2 px-2 py-1 rounded-md text-sm text-center font-medium #{current_page?(new_session_path) ? 'bg-surface shadow-sm text-primary' : 'text-secondary'}" do %> - <%= t("layouts.auth.sign_in") %> - <% end %> - <%= link_to new_registration_path, + <%= t("layouts.auth.sign_in") %> + <% end %> + <%= link_to new_registration_path, class: "w-1/2 px-2 py-1 rounded-md text-sm text-center font-medium #{!current_page?(new_session_path) ? 'bg-surface shadow-sm text-primary' : 'text-secondary'}" do %> - <%= t("layouts.auth.sign_up") %> - <% end %> + <%= t("layouts.auth.sign_up") %> + <% end %> +
-
+ <% end %> <% if controller_name == "sessions" %>
+
<%= render_flash_notifications %> diff --git a/app/views/mfa/verify.html.erb b/app/views/mfa/verify.html.erb index 05fb8b9e..3652c183 100644 --- a/app/views/mfa/verify.html.erb +++ b/app/views/mfa/verify.html.erb @@ -3,11 +3,12 @@ header_description t(".description") %> -<%= styled_form_with url: verify_mfa_path, method: :post, class: "space-y-4", data: { turbo: false } do |form| %> +<%= styled_form_with url: verify_mfa_path, method: :post, class: "space-y-4 mt-4 md:mt-0", data: { turbo: false } do |form| %> <%= form.text_field :code, required: true, autofocus: true, autocomplete: "one-time-code", + type: "number", label: t(".page_title") %> <%= form.submit t(".verify_button") %> diff --git a/app/views/shared/notifications/_alert.html.erb b/app/views/shared/notifications/_alert.html.erb index 3b513aa6..63269f8c 100644 --- a/app/views/shared/notifications/_alert.html.erb +++ b/app/views/shared/notifications/_alert.html.erb @@ -1,8 +1,8 @@ <%# locals: (message:) %> -<%= tag.div class: "flex gap-3 rounded-lg bg-white p-4 group max-w-80 shadow-border-lg", +<%= tag.div class: "flex gap-3 rounded-lg bg-container-inset p-4 group w-full md:max-w-80 shadow-border-lg", data: { controller: "element-removal" } do %> -
+
<%= lucide_icon "x", class: "w-3 h-3" %>
diff --git a/app/views/shared/notifications/_cta.html.erb b/app/views/shared/notifications/_cta.html.erb index 57e408c6..f1fa2496 100644 --- a/app/views/shared/notifications/_cta.html.erb +++ b/app/views/shared/notifications/_cta.html.erb @@ -1,8 +1,8 @@ <%# locals: (message:, description:) %>
- <%= tag.div class: "relative flex gap-3 rounded-lg bg-white p-4 group max-w-80 shadow-border-xs", data: { controller: "element-removal" } do %> -
+ <%= tag.div class: "relative flex gap-3 rounded-lg bg-container-inset p-4 group w-full md:max-w-80 shadow-border-xs", data: { controller: "element-removal" } do %> +
<%= lucide_icon "check", class: "w-3 h-3" %>
diff --git a/app/views/shared/notifications/_loading.html.erb b/app/views/shared/notifications/_loading.html.erb index e654171a..2a444028 100644 --- a/app/views/shared/notifications/_loading.html.erb +++ b/app/views/shared/notifications/_loading.html.erb @@ -1,7 +1,7 @@ <%# locals: (message:, id: nil) %> -<%= tag.div id: id, class: "flex gap-3 rounded-lg bg-white p-4 group w-full shadow-border-xs" do %> -
+<%= tag.div id: id, class: "flex gap-3 rounded-lg bg-container-inset p-4 group w-full md:max-w-80 shadow-border-xs" do %> +
<%= lucide_icon "loader", class: "w-5 h-5 text-secondary animate-pulse" %>
diff --git a/app/views/shared/notifications/_notice.html.erb b/app/views/shared/notifications/_notice.html.erb index fcb62e09..76c1ea60 100644 --- a/app/views/shared/notifications/_notice.html.erb +++ b/app/views/shared/notifications/_notice.html.erb @@ -1,12 +1,12 @@ <%# locals: (message:, description: nil, cta: nil) %> -<%= tag.div class: "relative flex gap-3 rounded-lg bg-white p-4 group max-w-80 shadow-border-xs", +<%= tag.div class: "relative flex gap-3 rounded-lg bg-container-inset p-4 group w-full md:max-w-80 shadow-border-xs", data: { controller: "element-removal", action: "animationend->element-removal#remove" } do %> -
+
<%= lucide_icon "check", class: "w-3 h-3" %>