mirror of
https://github.com/maybe-finance/maybe.git
synced 2025-08-07 22:45:20 +02:00
Implement dark mode (#2078)
* User theme settings * Initial rough pass on colors * More progress on dark mode
This commit is contained in:
parent
52d170e36c
commit
88a6373e84
98 changed files with 580 additions and 196 deletions
|
@ -1,6 +1,6 @@
|
|||
<%= content_for :page_title, t(".title") %>
|
||||
|
||||
<div class="bg-white shadow-border-xs rounded-xl p-4 grow overflow-y-auto">
|
||||
<div class="bg-container shadow-border-xs rounded-xl p-4 grow overflow-y-auto">
|
||||
<div class="flex justify-between gap-4 mb-12 last:mb-0">
|
||||
<div class="w-1/3">
|
||||
<div class="px-3 flex items-center gap-3">
|
||||
|
|
|
@ -1,12 +1,12 @@
|
|||
<% content_for :page_header do %>
|
||||
<div class="space-y-1 mb-6">
|
||||
<h1 class="text-3xl font-medium text-gray-900">Welcome back, <%= Current.user.first_name %></h1>
|
||||
<h1 class="text-3xl font-medium text-primary">Welcome back, <%= Current.user.first_name %></h1>
|
||||
<p class="text-gray-500">Here's what's happening with your finances</p>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<div class="w-full space-y-6 pb-24">
|
||||
<section class="bg-white py-4 rounded-xl shadow-border-xs">
|
||||
<section class="bg-container py-4 rounded-xl shadow-border-xs">
|
||||
<%= render partial: "pages/dashboard/net_worth_chart", locals: { series: @balance_sheet.net_worth_series(period: @period), period: @period } %>
|
||||
</section>
|
||||
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
<div class="space-y-4">
|
||||
<% balance_sheet.classification_groups.each do |classification_group| %>
|
||||
<div class="bg-white shadow-border-xs rounded-xl space-y-4 p-4">
|
||||
<div class="bg-container shadow-border-xs rounded-xl space-y-4 p-4">
|
||||
<h2 class="text-lg font-medium"><%= classification_group.display_name %></h2>
|
||||
|
||||
<% if classification_group.account_groups.any? %>
|
||||
|
@ -36,10 +36,10 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="shadow-border-xs rounded-lg bg-white">
|
||||
<div class="shadow-border-xs rounded-lg bg-container">
|
||||
<% classification_group.account_groups.each do |account_group| %>
|
||||
<details class="group rounded-lg open:bg-surface font-medium text-sm">
|
||||
<summary class="cursor-pointer p-4 group-open:bg-surface bg-white rounded-lg flex items-center justify-between">
|
||||
<summary class="cursor-pointer p-4 group-open:bg-surface bg-container rounded-lg flex items-center justify-between">
|
||||
<div class="flex items-center gap-4">
|
||||
<%= lucide_icon("chevron-right", class: "group-open:rotate-90 text-secondary w-5 h-5") %>
|
||||
|
||||
|
|
|
@ -30,7 +30,7 @@
|
|||
<p class="text-base text-subdued">There <%= @invite_codes_count == 1 ? "is" : "are" %> <span class="text-white"><%= @invite_codes_count %> invite <%= "code".pluralize(@invite_codes_count) %></span> remaining.</p>
|
||||
<div class="bg-gray-900 border border-gray-800 p-2 rounded-xl my-4">
|
||||
<p class="text-sm text-subdued mt-1 mb-3 sm:mb-4">Your invite code is <span class="font-mono text-white"><%= @invite_code.token %></span></p>
|
||||
<p><%= link_to "Sign up with this code", new_registration_path(invite: @invite_code.token), class: "block w-full bg-white text-black py-2 px-3 rounded-lg no-underline text-sm sm:text-base hover:bg-gray-200 transition duration-150" %></p>
|
||||
<p><%= link_to "Sign up with this code", new_registration_path(invite: @invite_code.token), class: "block w-full bg-container text-black py-2 px-3 rounded-lg no-underline text-sm sm:text-base hover:bg-gray-200 transition duration-150" %></p>
|
||||
</div>
|
||||
|
||||
<p class="text-sm text-subdued">You may need to refresh the page to get a new invite code if someone else claimed it before you.</p>
|
||||
|
@ -43,7 +43,7 @@
|
|||
</p>
|
||||
<% else %>
|
||||
<p class="text-base text-subdued mb-6 sm:mb-8">Sorry, there are <span class="text-white">no invite codes</span> remaining. Join our <%= link_to "Discord server", "https://link.maybe.co/discord", target: "_blank", class: "text-white hover:text-gray-300" %> to get notified when new invite codes are available.</p>
|
||||
<p><%= link_to "Join Discord server", "https://link.maybe.co/discord", target: "_blank", class: "bg-white text-black px-3 py-2 rounded-md no-underline text-base hover:bg-gray-200 transition duration-150" %></p>
|
||||
<p><%= link_to "Join Discord server", "https://link.maybe.co/discord", target: "_blank", class: "bg-container text-black px-3 py-2 rounded-md no-underline text-base hover:bg-gray-200 transition duration-150" %></p>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<%= content_for :page_title, "Feedback" %>
|
||||
|
||||
<div class="bg-white shadow-border-xs rounded-xl p-4">
|
||||
<div class="bg-container shadow-border-xs rounded-xl p-4">
|
||||
<h2 class="text-lg font-medium text-primary mb-1">Leave feedback</h2>
|
||||
<p class="text-sm text-secondary mb-4">Let us know if you have any specific feedback. Feel free to include links to videos or screenshots.</p>
|
||||
<div class="flex gap-2">
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue