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

Button cleanup

Browse source
This commit is contained in:
Zach Gollwitzer 2025-04-26 21:11:23 -04:00
parent 1c9dd6ea5f
commit 6659e0cdb5
3 changed files with 10 additions and 86 deletions
Download patch file Download diff file Expand all files Collapse all files

79
app/assets/tailwind/maybe-design-system.css
View file

@ -279,85 +279,6 @@
}
@layer components {
/* Buttons */
.btn {
@apply inline-flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium cursor-pointer disabled:cursor-not-allowed focus:outline-gray-500;
@apply transition-all duration-300;
}
.btn--primary {
@apply button-bg-primary text-white disabled:text-gray-400;
@apply hover:button-bg-primary-hover;
@apply disabled:button-bg-disabled disabled:hover:button-bg-disabled;
@variant theme-dark {
@apply button-bg-primary fg-primary;
@apply hover:button-bg-primary-hover;
@apply disabled:button-bg-disabled disabled:hover:button-bg-disabled;
}
}
.btn--secondary {
@apply button-bg-secondary text-primary;
@apply hover:button-bg-secondary-hover;
@variant theme-dark {
@apply text-white;
background-color: var(--color-gray-700);
&:hover {
background-color: var(--color-gray-800);
}
}
}
.btn--outline {
@apply border border-alpha-black-200 text-primary disabled:button-bg-disabled disabled:hover:button-bg-disabled disabled:text-gray-400;
&:hover {
background-color: var(--color-gray-100);
}
@variant theme-dark {
@apply border-alpha-white-300 text-white disabled:button-bg-disabled disabled:hover:button-bg-disabled disabled:text-gray-600;
&:hover {
background-color: var(--color-gray-800);
}
}
}
.btn--ghost {
@apply border border-transparent text-primary;
&:hover {
background-color: var(--color-gray-100)
}
@variant theme-dark {
@apply fg-primary;
&:hover {
background-color: var(--color-gray-900);
}
}
}
.btn--outline-destructive {
@apply border border-red-500 text-red-500 hover:bg-gray-50;
@variant theme-dark {
@apply border-red-400 text-red-400 hover:button-bg-destructive-hover;
}
}
.btn--destructive {
@apply button-bg-destructive text-white hover:button-bg-destructive-hover disabled:button-bg-disabled disabled:hover:button-bg-disabled disabled:text-red-400;
@variant theme-dark {
@apply button-bg-destructive text-white hover:button-bg-destructive-hover disabled:button-bg-disabled disabled:hover:button-bg-disabled;
}
}
/* Forms */
.form-field {
@apply flex flex-col gap-1 relative px-3 py-2 rounded-md border bg-container border-secondary shadow-xs w-full;

2
app/views/imports/_ready.html.erb
View file

@ -35,5 +35,5 @@
</div>
</div>
<%= render ButtonComponent.new(text: "Publish import", href: publish_import_path(import)) %>
<%= render ButtonComponent.new(text: "Publish import", href: publish_import_path(import), full_width: true) %>
</div>

15
app/views/pages/dashboard.html.erb
View file

@ -5,12 +5,15 @@
<p class="text-gray-500">Here's what's happening with your finances</p>
</div>
<%= render LinkComponent.new(
variant: "icon-inverse",
icon: "plus",
href: new_account_path(step: "method_select", classification: "asset"),
open_in: :modal
) %>
<div class="md:hidden">
<%= render LinkComponent.new(
variant: "icon-inverse",
icon: "plus",
href: new_account_path(step: "method_select", classification: "asset"),
open_in: :modal,
rounded: true
) %>
</div>
</div>
<% end %>