Docker/Maybe
Docker/Maybe
1
0
Fork 0
mirror of https://github.com/maybe-finance/maybe.git synced 2025-07-20 05:39:39 +02:00
Code Issues Releases Activity Actions 1

Fix dark mode support and improve notification/MFA UI (#2126)

Browse source 
* Fix dark mode support and improve notification/MFA UI"

* hide auth tabs on mfa/verify
This commit is contained in:
neo773 2025-04-19 00:26:44 +05:30 • committed by GitHub
parent 79243822bd
commit 04ee1e73be
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 23 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

3
app/javascript/controllers/theme_controller.js
View file

@ -50,8 +50,7 @@ export default class extends Controller {
} }
systemPrefersDark() { systemPrefersDark() {
return false return window.matchMedia("(prefers-color-scheme: dark)").matches
// return window.matchMedia("(prefers-color-scheme: dark)").matches
} }
handleSystemThemeChange = (event) => { handleSystemThemeChange = (event) => {

20
app/views/layouts/auth.html.erb
View file

@ -10,18 +10,20 @@
<h2 class="text-3xl font-medium text-primary text-center"> <h2 class="text-3xl font-medium text-primary text-center">
<%= content_for?(:header_title) ? yield(:header_title).html_safe : t(".your_account") %> <%= content_for?(:header_title) ? yield(:header_title).html_safe : t(".your_account") %>
</h2> </h2>
<div class="space-y-3 md:hidden w-full my-4"> <% if (controller_name == "sessions" && action_name == "new") || (controller_name == "registrations" && action_name == "new") %>
<div class="bg-surface-inset rounded-lg p-1 flex"> <div class="space-y-3 md:hidden w-full my-4">
<%= link_to new_session_path, <div class="bg-surface-inset rounded-lg p-1 flex">
<%= 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 %> 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") %> <%= t("layouts.auth.sign_in") %>
<% end %> <% end %>
<%= link_to new_registration_path, <%= 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 %> 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") %> <%= t("layouts.auth.sign_up") %>
<% end %> <% end %>
</div>
</div> </div>
</div> <% end %>
<% if controller_name == "sessions" %> <% if controller_name == "sessions" %>
<p class="text-sm text-center hidden md:block"> <p class="text-sm text-center hidden md:block">
<%= tag.span t(".no_account"), class: "text-secondary" %> <%= link_to t(".sign_up"), new_registration_path, class: "font-medium text-primary hover:underline transition" %> <%= tag.span t(".no_account"), class: "text-secondary" %> <%= link_to t(".sign_up"), new_registration_path, class: "font-medium text-primary hover:underline transition" %>

2
app/views/layouts/shared/_htmldoc.html.erb
View file

@ -6,7 +6,7 @@
</head> </head>
<body class="h-screen overflow-hidden lg:overflow-auto antialiased h-screen-safe "> <body class="h-screen overflow-hidden lg:overflow-auto antialiased h-screen-safe ">
<div class="fixed z-50 top-6 md:top-4 md:left-1/2 -translate-x-1/2 w-full md:w-80 mx-auto md:mx-0 md:right-auto mt-safe"> <div class="fixed z-50 top-6 md:top-4 left-1/2 -translate-x-1/2 w-full md:w-80 px-4 md:px-0 mx-auto md:mx-0 md:right-auto mt-safe">
<div id="notification-tray" class="space-y-1 w-full"> <div id="notification-tray" class="space-y-1 w-full">
<%= render_flash_notifications %> <%= render_flash_notifications %>

3
app/views/mfa/verify.html.erb
View file

@ -3,11 +3,12 @@
header_description t(".description") 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, <%= form.text_field :code,
required: true, required: true,
autofocus: true, autofocus: true,
autocomplete: "one-time-code", autocomplete: "one-time-code",
type: "number",
label: t(".page_title") %> label: t(".page_title") %>
<%= form.submit t(".verify_button") %> <%= form.submit t(".verify_button") %>

4
app/views/shared/notifications/_alert.html.erb
View file

@ -1,8 +1,8 @@
<%# locals: (message:) %> <%# 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 %> data: { controller: "element-removal" } do %>
<div class="h-5 w-5 shrink-0 p-px text-white"> <div class="h-5 w-5 shrink-0 p-px text-primary">
<div class="flex h-full items-center justify-center rounded-full bg-destructive"> <div class="flex h-full items-center justify-center rounded-full bg-destructive">
<%= lucide_icon "x", class: "w-3 h-3" %> <%= lucide_icon "x", class: "w-3 h-3" %>
</div> </div>

4
app/views/shared/notifications/_cta.html.erb
View file

@ -1,8 +1,8 @@
<%# locals: (message:, description:) %> <%# locals: (message:, description:) %>
<div id="cta"> <div id="cta">
<%= 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 %>
<div class="h-5 w-5 shrink-0 p-px text-white"> <div class="h-5 w-5 shrink-0 p-px text-primary">
<div class="flex h-full items-center justify-center rounded-full bg-success"> <div class="flex h-full items-center justify-center rounded-full bg-success">
<%= lucide_icon "check", class: "w-3 h-3" %> <%= lucide_icon "check", class: "w-3 h-3" %>
</div> </div>

4
app/views/shared/notifications/_loading.html.erb
View file

@ -1,7 +1,7 @@
<%# locals: (message:, id: nil) %> <%# 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 %>
<div class="h-5 w-5 shrink-0 p-px text-white"> <div class="h-5 w-5 shrink-0 p-px text-primary">
<%= lucide_icon "loader", class: "w-5 h-5 text-secondary animate-pulse" %> <%= lucide_icon "loader", class: "w-5 h-5 text-secondary animate-pulse" %>
</div> </div>

4
app/views/shared/notifications/_notice.html.erb
View file

@ -1,12 +1,12 @@
<%# locals: (message:, description: nil, cta: nil) %> <%# 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: { data: {
controller: "element-removal", controller: "element-removal",
action: "animationend->element-removal#remove" action: "animationend->element-removal#remove"
} do %> } do %>
<div class="h-5 w-5 shrink-0 p-px text-white"> <div class="h-5 w-5 shrink-0 p-px text-primary">
<div class="flex h-full items-center justify-center rounded-full bg-success"> <div class="flex h-full items-center justify-center rounded-full bg-success">
<%= lucide_icon "check", class: "w-3 h-3" %> <%= lucide_icon "check", class: "w-3 h-3" %>
</div> </div>