From bbe7323ca4c62adcd89dc77573519f4487e05af6 Mon Sep 17 00:00:00 2001 From: Zach Gollwitzer Date: Mon, 12 Feb 2024 17:20:50 -0500 Subject: [PATCH] Add Tailwind color palette (#452) --- .../stylesheets/application.tailwind.css | 8 + app/helpers/application_helper.rb | 4 +- app/views/accounts/_account_list.html.erb | 12 +- app/views/accounts/_account_type.html.erb | 4 +- app/views/accounts/_entry_method.html.erb | 4 +- app/views/accounts/new.html.erb | 42 ++-- app/views/layouts/application.html.erb | 6 +- app/views/password_resets/edit.html.erb | 4 +- app/views/shared/_currency_dropdown.html.erb | 4 +- app/views/shared/_modal.html.erb | 2 +- config/tailwind.config.js | 225 ++++++++++++++++-- 11 files changed, 251 insertions(+), 64 deletions(-) diff --git a/app/assets/stylesheets/application.tailwind.css b/app/assets/stylesheets/application.tailwind.css index 7d28ea69..5cd1db3d 100644 --- a/app/assets/stylesheets/application.tailwind.css +++ b/app/assets/stylesheets/application.tailwind.css @@ -2,6 +2,10 @@ @tailwind components; @tailwind utilities; +/* Reset rules, default styles applied to plain HTML */ +@layer base { +} + @layer components { .prose { table { @@ -43,3 +47,7 @@ @apply w-full p-3 text-center text-white bg-black rounded-lg hover:bg-gray-700; } } + +/* Small, single purpose classes that should take precedence over other styles */ +@layer utilities { +} diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index 98c86602..db5c27b2 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -24,8 +24,8 @@ module ApplicationHelper def sidebar_link_to(name, path, options = {}) base_class_names = [ "block", "border", "border-transparent", "rounded-xl", "-ml-2", "p-2", "text-sm", "font-medium", "text-gray-500", "flex", "items-center" ] - hover_class_names = [ "hover:bg-white", "hover:border-[#141414]/[0.07]", "hover:text-gray-900", "hover:shadow-xs" ] - current_page_class_names = [ "bg-white", "border-[#141414]/[0.07]", "text-gray-900", "shadow-xs" ] + hover_class_names = [ "hover:bg-white", "hover:border-alpha-black-50", "hover:text-gray-900", "hover:shadow-xs" ] + current_page_class_names = [ "bg-white", "border-alpha-black-50", "text-gray-900", "shadow-xs" ] link_class_names = if current_page?(path) base_class_names.delete("border-transparent") diff --git a/app/views/accounts/_account_list.html.erb b/app/views/accounts/_account_list.html.erb index 90bb9294..f5e962e8 100644 --- a/app/views/accounts/_account_list.html.erb +++ b/app/views/accounts/_account_list.html.erb @@ -4,26 +4,26 @@ <% if accounts.sum(&:converted_balance) > 0 %>
- - <%= lucide_icon("chevron-down", class: "hidden group-open:block text-[#737373] w-5 h-5") %> - <%= lucide_icon("chevron-right", class: "group-open:hidden text-[#737373] w-5 h-5") %> + + <%= lucide_icon("chevron-down", class: "hidden group-open:block text-gray-500 w-5 h-5") %> + <%= lucide_icon("chevron-right", class: "group-open:hidden text-gray-500 w-5 h-5") %>
<%= type.model_name.human %>
<%= format_currency accounts.sum(&:converted_balance) %>
 <% accounts.each do |account| %> - <%= link_to account_path(account), class: "flex items-center w-full gap-3 px-2 py-3 mb-1 hover:bg-[#f2f2f2] rounded-[10px]" do %> + <%= link_to account_path(account), class: "flex items-center w-full gap-3 px-2 py-3 mb-1 hover:bg-gray-100 rounded-[10px]" do %>

<%= account.name %>

<% if account.subtype %> -

<%= account.subtype&.humanize %>

+

<%= account.subtype&.humanize %>

<% end %>

<%= format_currency account.converted_balance %>

<% end %> <% end %> - <%= link_to new_account_path(step: 'method', type: type.name.demodulize), class: "flex items-center gap-4 px-2 py-3 mb-1 text-[#737373] text-sm font-medium rounded-[10px] hover:bg-[#f2f2f2]", data: { turbo_frame: "modal" } do %> + <%= link_to new_account_path(step: 'method', type: type.name.demodulize), class: "flex items-center gap-4 px-2 py-3 mb-1 text-gray-500 text-sm font-medium rounded-[10px] hover:bg-gray-100", data: { turbo_frame: "modal" } do %> <%= lucide_icon("plus", class: "w-5 h-5") %>

New <%= type.model_name.human.downcase %>

<% end %> diff --git a/app/views/accounts/_account_type.html.erb b/app/views/accounts/_account_type.html.erb index d09ca7cf..d0b1ebe2 100644 --- a/app/views/accounts/_account_type.html.erb +++ b/app/views/accounts/_account_type.html.erb @@ -1,5 +1,5 @@ -<%= link_to new_account_path(step: 'method', type: type.class.name.demodulize), class: "flex items-center gap-4 w-full text-center focus:outline-none focus:bg-gray-50 border border-transparent focus:border focus:border-gray-200 block px-2 hover:bg-gray-50 rounded-lg p-2" do %> - +<%= link_to new_account_path(step: 'method', type: type.class.name.demodulize), class: "flex items-center gap-4 w-full text-center focus:outline-none focus:bg-gray-25 border border-transparent focus:border focus:border-gray-200 block px-2 hover:bg-gray-25 rounded-lg p-2" do %> + <%= lucide_icon(icon, class: "#{text_color} w-5 h-5") %> <%= type.model_name.human %> diff --git a/app/views/accounts/_entry_method.html.erb b/app/views/accounts/_entry_method.html.erb index 31277d4f..afac3345 100644 --- a/app/views/accounts/_entry_method.html.erb +++ b/app/views/accounts/_entry_method.html.erb @@ -1,13 +1,13 @@ <% if local_assigns[:disabled] && disabled %> - + <%= lucide_icon(icon, class: "text-gray-500 w-5 h-5") %> <%= text %> <% else %> <%= link_to new_account_path(type: type.class.name.demodulize), class: "flex items-center gap-4 w-full text-center focus:outline-none focus:bg-gray-50 border border-transparent focus:border focus:border-gray-200 px-2 hover:bg-gray-50 rounded-lg p-2" do %> - + <%= lucide_icon(icon, class: "text-gray-500 w-5 h-5") %> <%= text %> diff --git a/app/views/accounts/new.html.erb b/app/views/accounts/new.html.erb index d5d41d50..201e090e 100644 --- a/app/views/accounts/new.html.erb +++ b/app/views/accounts/new.html.erb @@ -3,38 +3,38 @@ <%= modal do %>
<% if @account.accountable.blank? %> -
+
<%= t '.select_accountable_type' %>
- <%= render "account_type", type: Account::Depository.new, bg_color: "bg-[#EFF8FF]", text_color: "text-[#2E90FA]", icon: "landmark" %> - <%= render "account_type", type: Account::Investment.new, bg_color: "bg-[#ECFDF3]", text_color: "text-[#32D583]", icon: "line-chart" %> - <%= render "account_type", type: Account::Property.new, bg_color: "bg-[#FCF5F9]", text_color: "text-[#F23E94]", icon: "home" %> - <%= render "account_type", type: Account::Vehicle.new, bg_color: "bg-[#EEF4FF]", text_color: "text-[#6172F3]", icon: "car-front" %> - <%= render "account_type", type: Account::Credit.new, bg_color: "bg-[#F0F9FF]", text_color: "text-[#36BFFA]", icon: "credit-card" %> - <%= render "account_type", type: Account::Loan.new, bg_color: "bg-[#FEF6EE]", text_color: "text-[#F38744]", icon: "hand-coins" %> - <%= render "account_type", type: Account::OtherAsset.new, bg_color: "bg-[#ECFDF3]", text_color: "text-[#12B76A]", icon: "plus" %> - <%= render "account_type", type: Account::OtherLiability.new, bg_color: "bg-[#FEF3F2]", text_color: "text-[#F04438]", icon: "minus" %> + <%= render "account_type", type: Account::Depository.new, bg_color: "bg-blue-50", text_color: "text-blue-500", icon: "landmark" %> + <%= render "account_type", type: Account::Investment.new, bg_color: "bg-green-50", text_color: "text-green-500", icon: "line-chart" %> + <%= render "account_type", type: Account::Property.new, bg_color: "bg-pink-50", text_color: "text-pink-500", icon: "home" %> + <%= render "account_type", type: Account::Vehicle.new, bg_color: "bg-indigo-50", text_color: "text-indigo-500", icon: "car-front" %> + <%= render "account_type", type: Account::Credit.new, bg_color: "bg-violet-50", text_color: "text-violet-500", icon: "credit-card" %> + <%= render "account_type", type: Account::Loan.new, bg_color: "bg-yellow-50", text_color: "text-yellow-500", icon: "hand-coins" %> + <%= render "account_type", type: Account::OtherAsset.new, bg_color: "bg-green-50", text_color: "text-green-500", icon: "plus" %> + <%= render "account_type", type: Account::OtherLiability.new, bg_color: "bg-red-50", text_color: "text-red-500", icon: "minus" %>
-
+
- Select <%= lucide_icon('corner-down-left', class: 'inline w-3 h-3')%> + Select <%= lucide_icon('corner-down-left', class: 'inline w-3 h-3')%>
- Navigate <%= lucide_icon('arrow-up', class: 'inline w-3 h-3')%> <%= lucide_icon('arrow-down', class: 'inline w-3 h-3')%> + Navigate <%= lucide_icon('arrow-up', class: 'inline w-3 h-3')%> <%= lucide_icon('arrow-down', class: 'inline w-3 h-3')%>
- Close ESC + Close ESC
<% elsif params[:step] == 'method' && @account.accountable.present? %> -
- <%= link_to new_account_path, class: "flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg bg-[#141414]/5 back focus:outline-gray-300 focus:outline" do %> +
+ <%= link_to new_account_path, class: "flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg bg-alpha-black-50 back focus:outline-gray-300 focus:outline" do %> <%= lucide_icon('arrow-left', class: 'text-gray-500 w-5 h-5') %> <% end %> How would you like to add it? @@ -47,22 +47,22 @@ <%= render "entry_method", type: @account.accountable, text: 'Securely link bank account with data provider (coming soon)', icon: "link-2", disabled: true %> <%= render "entry_method", type: @account.accountable, text: 'Upload spreadsheet (coming soon)', icon: "sheet", disabled: true %>
-
+
- Select <%= lucide_icon('corner-down-left', class: 'inline w-3 h-3')%> + Select <%= lucide_icon('corner-down-left', class: 'inline w-3 h-3')%>
- Navigate <%= lucide_icon('arrow-up', class: 'inline w-3 h-3')%> <%= lucide_icon('arrow-down', class: 'inline w-3 h-3')%> + Navigate <%= lucide_icon('arrow-up', class: 'inline w-3 h-3')%> <%= lucide_icon('arrow-down', class: 'inline w-3 h-3')%>
- Close ESC + Close ESC
<% else %> -
- <%= link_to new_account_path(step: 'method', type: params[:type]), class: "flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg bg-[#141414]/5 focus:outline-gray-300 focus:outline" do %> +
+ <%= link_to new_account_path(step: 'method', type: params[:type]), class: "flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg bg-alpha-black-50 focus:outline-gray-300 focus:outline" do %> <%= lucide_icon('arrow-left', class: 'text-gray-500 w-5 h-5') %> <% end %> Add <%= @account.accountable.model_name.human.downcase %> diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 2c508c11..503af69a 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -1,5 +1,5 @@ - + <%= content_for(:title) || "Maybe" %> @@ -59,7 +59,7 @@
- <%= link_to accounts_path, class: 'text-xs uppercase text-[#737373] font-bold tracking-wide' do%> + <%= link_to accounts_path, class: 'text-xs uppercase text-gray-500 font-bold tracking-wide' do%> <%= t('.accounts') %> <% end %> <%= link_to new_account_path, class: 'block hover:bg-gray-100 p-2 text-sm font-semibold text-gray-900 flex items-center rounded', title: t('.new_account'), data: { turbo_frame: "modal" } do %> @@ -68,7 +68,7 @@
- <%= link_to new_account_path, class: "flex items-center gap-4 px-2 py-3 mb-1 text-[#737373] text-sm font-medium rounded-[10px] hover:bg-[#f2f2f2]", data: { turbo_frame: "modal" } do %> + <%= link_to new_account_path, class: "flex items-center gap-4 px-2 py-3 mb-1 text-gray-500 text-sm font-medium rounded-[10px] hover:bg-gray-100", data: { turbo_frame: "modal" } do %> <%= lucide_icon("plus", class: "w-5 h-5") %>

<%= t('.new_account') %>

<% end %> diff --git a/app/views/password_resets/edit.html.erb b/app/views/password_resets/edit.html.erb index ecf5745b..c4661933 100644 --- a/app/views/password_resets/edit.html.erb +++ b/app/views/password_resets/edit.html.erb @@ -5,12 +5,12 @@ <%= form_with url: password_reset_path(token: params[:token]), html: {class: 'space-y-6'} do |form| %> <%= auth_messages form %> -
+
<%= form.label :password, class: 'p-4 pb-0 block text-sm font-medium text-gray-700' %> <%= form.password_field :password, required: 'required', class: 'p-4 pt-1 bg-transparent border-none opacity-50 focus:outline-none focus:ring-0 focus-within:opacity-100 w-full' %>
-
+
<%= form.label :password_confirmation, class: 'p-4 pb-0 block text-sm font-medium text-gray-700' %> <%= form.password_field :password_confirmation, required: 'required', class: 'p-4 pt-1 bg-transparent border-none opacity-50 focus:outline-none focus:ring-0 focus-within:opacity-100 w-full' %>
diff --git a/app/views/shared/_currency_dropdown.html.erb b/app/views/shared/_currency_dropdown.html.erb index 9d352f81..5338482a 100644 --- a/app/views/shared/_currency_dropdown.html.erb +++ b/app/views/shared/_currency_dropdown.html.erb @@ -3,9 +3,9 @@
<%= f.object.original_currency %>
<%# Example of how account currency value is updated %> <%#= f.hidden_field :currency, data: {currency_dropdown_target: "input"} %> - <%= lucide_icon("chevron-down", class: "text-[#737373] w-5 h-5" ) %> + <%= lucide_icon("chevron-down", class: "text-gray-500 w-5 h-5" ) %> -