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

feature(dark mode): misc design fixes (#2215)

Browse source 
* Fix category dark mode styles

* Fix sidebar account tab states

* Fix dashboard balance sheet group styles

* Fix budget dark mode styles

* Fix chart gradient split

* Fix prose styles in dark mode

* Add back chat nav id for tests
This commit is contained in:
Zach Gollwitzer 2025-05-07 09:26:06 -04:00 • committed by GitHub
parent c26a7dd2dd
commit fb7107d614
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
27 changed files with 254 additions and 174 deletions
Download patch file Download diff file Expand all files Collapse all files

6
app/views/categories/_badge.html.erb
View file

@ -2,10 +2,10 @@
<% category ||= Category.uncategorized %>
<div>
<span class="flex items-center gap-1 text-sm font-medium rounded-full px-1.5 py-1 border truncate"
<span class="flex items-center gap-1 text-sm font-medium rounded-full px-1.5 py-1 border truncate focus-visible:outline-none focus-visible:ring-0"
style="
background-color: color-mix(in srgb, <%= category.color %> 5%, white);
border-color: color-mix(in srgb, <%= category.color %> 30%, white);
background-color: color-mix(in oklab, <%= category.color %> 10%, transparent);
border-color: color-mix(in oklab, <%= category.color %> 10%, transparent);
color: <%= category.color %>;">
<% if category.lucide_icon.present? %>
<%= icon category.lucide_icon, size: "sm", color: "current" %>

8
app/views/categories/_form.html.erb
View file

@ -7,7 +7,7 @@
<%= render partial: "color_avatar", locals: { category: category } %>
<details data-category-target="details">
<summary class="cursor-pointer absolute -bottom-2 -right-2 flex justify-center items-center bg-gray-50 border-2 w-7 h-7 border-white rounded-full text-gray-500">
<summary class="cursor-pointer absolute -bottom-2 -right-2 flex justify-center items-center bg-surface-inset hover:bg-surface-inset-hover border-2 w-7 h-7 border-subdued rounded-full text-secondary">
<%= icon("pen", size: "sm") %>
</summary>
@ -19,7 +19,7 @@
<% Category::COLORS.each do |color| %>
<label class="relative">
<%= f.radio_button :color, color, class: "sr-only peer", data: { action: "change->category#handleColorChange" } %>
<div class="w-6 h-6 rounded-full cursor-pointer peer-checked:ring-2 peer-checked:ring-offset-2 peer-checked:ring-blue-500" style="background-color: <%= color %>"></div>
<div class="w-6 h-6 rounded-full cursor-pointer peer-checked:ring-2 peer-checked:ring-offset-2 peer-checked:ring-gray-500" style="background-color: <%= color %>"></div>
</label>
<% end %>
<label class="relative">
@ -41,12 +41,12 @@
</div>
<div class="flex flex-wrap gap-2 justify-center flex-col w-87">
<h4 class="text-gray-500 text-sm">Icon</h4>
<h4 class="text-secondary text-sm">Icon</h4>
<div class="flex flex-wrap gap-0.5">
<% Category.icon_codes.each do |icon| %>
<label class="relative">
<%= f.radio_button :lucide_icon, icon, class: "sr-only peer", data: { action: "change->category#handleIconChange change->category#handleIconColorChange", category_target:"icon" } %>
<div class="w-7 h-7 flex m-0.5 items-center justify-center rounded-full cursor-pointer hover:bg-gray-100 peer-checked:bg-gray-100 border-1 border-transparent">
<div class="text-secondary w-7 h-7 flex m-0.5 items-center justify-center rounded-full cursor-pointer hover:bg-container-inset-hover peer-checked:bg-container-inset border-1 border-transparent">
<%= icon(icon, size: "sm", color: "current") %>
</div>
</label>