mirror of
https://github.com/maybe-finance/maybe.git
synced 2025-08-07 14:35:23 +02:00
Maybe Design System Updates (#1856)
* Add geist font * Design system css file * Add cursor ui/ux rules * Add shadows and shadow borders * Replace primitives with tokens for common text and backgrounds * Organize css * Update switch and checkbox class names * Add back global color variables
This commit is contained in:
Zach Gollwitzer
GitHub
parent
c0e290a07e
commit
849c58dd3e
193 changed files with 1356 additions and 1073 deletions
|
|
@ -8,18 +8,18 @@
|
|||
<div class="flex gap-2 mb-4">
|
||||
<div class="grow">
|
||||
<div class="flex items-center px-3 py-2 gap-2 border border-gray-200 rounded-lg focus-within:ring-gray-100 focus-within:border-gray-900">
|
||||
<%= lucide_icon("search", class: "w-5 h-5 text-gray-500") %>
|
||||
<%= lucide_icon("search", class: "w-5 h-5 text-secondary") %>
|
||||
<%= form.text_field :search,
|
||||
placeholder: "Search transactions by name",
|
||||
value: @q[:search],
|
||||
class: "form-field__input placeholder:text-sm placeholder:text-gray-500",
|
||||
class: "form-field__input placeholder:text-sm placeholder:text-secondary",
|
||||
"data-auto-submit-form-target": "auto" %>
|
||||
</div>
|
||||
</div>
|
||||
<div data-controller="menu" class="relative">
|
||||
<button id="transaction-filters-button" data-menu-target="button" type="button" class="btn btn--outline flex items-center gap-2">
|
||||
<%= lucide_icon("list-filter", class: "w-5 h-5 text-gray-500") %>
|
||||
<p class="text-sm font-medium text-gray-900">Filter</p>
|
||||
<%= lucide_icon("list-filter", class: "w-5 h-5 text-secondary") %>
|
||||
<p class="text-sm font-medium text-primary">Filter</p>
|
||||
</button>
|
||||
|
||||
<%= render "transactions/searches/menu", form: form %>
|
||||
|
|
|
|||
|
|
@ -4,13 +4,13 @@
|
|||
id="transaction-filters-menu"
|
||||
data-menu-target="content"
|
||||
data-controller="tabs"
|
||||
data-tabs-active-class="bg-gray-25 text-gray-900"
|
||||
data-tabs-active-class="bg-gray-25 text-primary"
|
||||
data-tabs-default-tab-value="<%= get_default_transaction_search_filter[:key] %>"
|
||||
class="hidden absolute flex z-10 h-80 w-[540px] top-12 right-0 border border-alpha-black-100 bg-white rounded-lg shadow-xs">
|
||||
<div class="flex w-44 flex-col items-start p-3 text-sm font-medium text-gray-500 border-r border-r-alpha-black-100">
|
||||
class="hidden absolute flex z-10 h-80 w-[540px] top-12 right-0 border border-tertiary bg-white rounded-lg shadow-xs">
|
||||
<div class="flex w-44 flex-col items-start p-3 text-sm font-medium text-secondary border-r border-r-alpha-black-100">
|
||||
<% transaction_search_filters.each do |filter| %>
|
||||
<button
|
||||
class="flex text-gray-500 hover:bg-gray-25 items-center gap-2 px-3 rounded-md py-2 w-full"
|
||||
class="flex text-secondary hover:bg-gray-25 items-center gap-2 px-3 rounded-md py-2 w-full"
|
||||
type="button"
|
||||
data-id="<%= filter[:key] %>"
|
||||
data-tabs-target="btn"
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<%= button_tag type: "reset", data: { action: "menu#close" }, class: "py-2 px-3 bg-gray-50 rounded-lg text-sm text-gray-900 font-medium" do %>
|
||||
<%= button_tag type: "reset", data: { action: "menu#close" }, class: "py-2 px-3 bg-gray-50 rounded-lg text-sm text-primary font-medium" do %>
|
||||
<%= t(".cancel") %>
|
||||
<% end %>
|
||||
<%= form.submit t(".apply"), name: nil, class: "py-2 px-3 bg-gray-900 hover:bg-gray-700 rounded-lg text-sm text-white font-medium cursor-pointer" %>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div data-controller="list-filter">
|
||||
<div class="relative">
|
||||
<input type="search" autocomplete="off" placeholder="Filter accounts" data-list-filter-target="input" data-action="input->list-filter#filter" class="block w-full border border-gray-200 rounded-md py-2 pl-10 pr-3 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
|
||||
<%= lucide_icon("search", class: "w-5 h-5 text-gray-500 absolute inset-y-0 left-2 top-1/2 transform -translate-y-1/2") %>
|
||||
<%= lucide_icon("search", class: "w-5 h-5 text-secondary absolute inset-y-0 left-2 top-1/2 transform -translate-y-1/2") %>
|
||||
</div>
|
||||
<div class="my-2" id="list" data-list-filter-target="list">
|
||||
<% Current.family.accounts.alphabetically.each do |account| %>
|
||||
|
|
@ -11,11 +11,11 @@
|
|||
{
|
||||
multiple: true,
|
||||
checked: @q[:accounts]&.include?(account.name),
|
||||
class: "maybe-checkbox maybe-checkbox--light"
|
||||
class: "checkbox checkbox--light"
|
||||
},
|
||||
account.name,
|
||||
nil %>
|
||||
<%= form.label :accounts, account.name, value: account.name, class: "text-sm text-gray-900" %>
|
||||
<%= form.label :accounts, account.name, value: account.name, class: "text-sm text-primary" %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<%# locals: (param_key:, param_value:) %>
|
||||
<li class="flex items-center gap-1 text-sm border border-alpha-black-200 rounded-3xl p-1.5">
|
||||
<li class="flex items-center gap-1 text-sm border border-secondary rounded-3xl p-1.5">
|
||||
<% if param_key == "start_date" || param_key == "end_date" %>
|
||||
<div class="flex items-center gap-2">
|
||||
<%= lucide_icon "calendar", class: "w-5 h-5 text-gray-500" %>
|
||||
<%= lucide_icon "calendar", class: "w-5 h-5 text-secondary" %>
|
||||
<p>
|
||||
<% if param_key == "start_date" %>
|
||||
<%= t(".on_or_after", date: param_value) %>
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
</div>
|
||||
<% elsif param_key == "search" %>
|
||||
<div class="flex items-center gap-2">
|
||||
<%= lucide_icon "text", class: "w-5 h-5 text-gray-500" %>
|
||||
<%= lucide_icon "text", class: "w-5 h-5 text-secondary" %>
|
||||
<p><%= "\"#{param_value}\"".truncate(20) %></p>
|
||||
</div>
|
||||
<% elsif param_key == "accounts" %>
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
</div>
|
||||
<% elsif param_key == "amount" %>
|
||||
<div class="flex items-center gap-2">
|
||||
<%= lucide_icon "hash", class: "w-5 h-5 text-gray-500" %>
|
||||
<%= lucide_icon "hash", class: "w-5 h-5 text-secondary" %>
|
||||
<p><%= param_value %></p>
|
||||
</div>
|
||||
<% elsif param_key == "types" %>
|
||||
|
|
@ -45,6 +45,6 @@
|
|||
method: :delete,
|
||||
data: { turbo: false },
|
||||
class: "flex items-center" do %>
|
||||
<%= lucide_icon "x", class: "w-4 h-4 text-gray-500" %>
|
||||
<%= lucide_icon "x", class: "w-4 h-4 text-secondary" %>
|
||||
<% end %>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div data-controller="list-filter">
|
||||
<div class="relative">
|
||||
<input type="search" autocomplete="off" placeholder="Filter category" data-list-filter-target="input" data-action="input->list-filter#filter" class="block w-full border border-gray-200 rounded-md py-2 pl-10 pr-3 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
|
||||
<%= lucide_icon("search", class: "w-5 h-5 text-gray-500 absolute inset-y-0 left-2 top-1/2 transform -translate-y-1/2") %>
|
||||
<%= lucide_icon("search", class: "w-5 h-5 text-secondary absolute inset-y-0 left-2 top-1/2 transform -translate-y-1/2") %>
|
||||
</div>
|
||||
<div class="my-2" id="list" data-list-filter-target="list">
|
||||
<% family_categories.each do |category| %>
|
||||
|
|
@ -11,11 +11,11 @@
|
|||
{
|
||||
multiple: true,
|
||||
checked: @q[:categories]&.include?(category.name),
|
||||
class: "maybe-checkbox maybe-checkbox--light"
|
||||
class: "checkbox checkbox--light"
|
||||
},
|
||||
category.name,
|
||||
nil %>
|
||||
<%= form.label :categories, category.name, value: category.name, class: "text-sm text-gray-900 cursor-pointer" do %>
|
||||
<%= form.label :categories, category.name, value: category.name, class: "text-sm text-primary cursor-pointer" do %>
|
||||
<%= render partial: "categories/badge", locals: { category: category } %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div data-controller="list-filter">
|
||||
<div class="relative">
|
||||
<input type="search" autocomplete="off" placeholder="Filter merchants" data-list-filter-target="input" data-action="input->list-filter#filter" class="block w-full border border-gray-200 rounded-md py-2 pl-10 pr-3 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
|
||||
<%= lucide_icon("search", class: "w-5 h-5 text-gray-500 absolute inset-y-0 left-2 top-1/2 transform -translate-y-1/2") %>
|
||||
<%= lucide_icon("search", class: "w-5 h-5 text-secondary absolute inset-y-0 left-2 top-1/2 transform -translate-y-1/2") %>
|
||||
</div>
|
||||
<div class="my-2" id="list" data-list-filter-target="list">
|
||||
<% Current.family.merchants.alphabetically.each do |merchant| %>
|
||||
|
|
@ -11,11 +11,11 @@
|
|||
{
|
||||
multiple: true,
|
||||
checked: @q[:merchants]&.include?(merchant.name),
|
||||
class: "maybe-checkbox maybe-checkbox--light"
|
||||
class: "checkbox checkbox--light"
|
||||
},
|
||||
merchant.name,
|
||||
nil %>
|
||||
<%= form.label :merchants, value: merchant.name, class: "text-sm text-gray-900 flex items-center gap-2" do %>
|
||||
<%= form.label :merchants, value: merchant.name, class: "text-sm text-primary flex items-center gap-2" do %>
|
||||
<%= circle_logo(merchant.name, hex: merchant.color, size: "sm") %>
|
||||
<%= merchant.name %>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div data-controller="list-filter">
|
||||
<div class="relative">
|
||||
<input type="search" autocomplete="off" placeholder="Filter tags" data-list-filter-target="input" data-action="input->list-filter#filter" class="block w-full border border-gray-200 rounded-md py-2 pl-10 pr-3 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
|
||||
<%= lucide_icon("search", class: "w-5 h-5 text-gray-500 absolute inset-y-0 left-2 top-1/2 transform -translate-y-1/2") %>
|
||||
<%= lucide_icon("search", class: "w-5 h-5 text-secondary absolute inset-y-0 left-2 top-1/2 transform -translate-y-1/2") %>
|
||||
</div>
|
||||
<div class="my-2" id="list" data-list-filter-target="list">
|
||||
<% Current.family.tags.alphabetically.each do |tag| %>
|
||||
|
|
@ -11,11 +11,11 @@
|
|||
{
|
||||
multiple: true,
|
||||
checked: @q[:tags]&.include?(tag.name),
|
||||
class: "maybe-checkbox maybe-checkbox--light"
|
||||
class: "checkbox checkbox--light"
|
||||
},
|
||||
tag.name,
|
||||
nil %>
|
||||
<%= form.label :tags, value: tag.name, class: "text-sm text-gray-900 flex items-center gap-2" do %>
|
||||
<%= form.label :tags, value: tag.name, class: "text-sm text-primary flex items-center gap-2" do %>
|
||||
<%= circle_logo(tag.name, hex: tag.color || Tag::UNCATEGORIZED_COLOR, size: "sm") %>
|
||||
<%= tag.name %>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -6,32 +6,32 @@
|
|||
{
|
||||
multiple: true,
|
||||
checked: @q[:types]&.include?("income"),
|
||||
class: "maybe-checkbox maybe-checkbox--light"
|
||||
class: "checkbox checkbox--light"
|
||||
},
|
||||
"income",
|
||||
nil %>
|
||||
<%= form.label :types, t(".income"), value: "income", class: "text-sm text-gray-900" %>
|
||||
<%= form.label :types, t(".income"), value: "income", class: "text-sm text-primary" %>
|
||||
</div>
|
||||
<div class="flex items-center gap-3" data-filter-name="expense">
|
||||
<%= form.check_box :types,
|
||||
{
|
||||
multiple: true,
|
||||
checked: @q[:types]&.include?("expense"),
|
||||
class: "maybe-checkbox maybe-checkbox--light"
|
||||
class: "checkbox checkbox--light"
|
||||
},
|
||||
"expense",
|
||||
nil %>
|
||||
<%= form.label :types, t(".expense"), value: "expense", class: "text-sm text-gray-900" %>
|
||||
<%= form.label :types, t(".expense"), value: "expense", class: "text-sm text-primary" %>
|
||||
</div>
|
||||
<div class="flex items-center gap-3" data-filter-name="transfer">
|
||||
<%= form.check_box :types,
|
||||
{
|
||||
multiple: true,
|
||||
checked: @q[:types]&.include?("transfer"),
|
||||
class: "maybe-checkbox maybe-checkbox--light"
|
||||
class: "checkbox checkbox--light"
|
||||
},
|
||||
"transfer",
|
||||
nil %>
|
||||
<%= form.label :types, t(".transfer"), value: "transfer", class: "text-sm text-gray-900" %>
|
||||
<%= form.label :types, t(".transfer"), value: "transfer", class: "text-sm text-primary" %>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue