mirror of
https://github.com/maybe-finance/maybe.git
synced 2025-07-19 13:19:39 +02:00
Upgrade to Tailwind v4 (#1853)
* Upgrade to Tailwind v4 * Update max width classes * Revert improper changes from Tailwind migration tool
This commit is contained in:
Zach Gollwitzer
GitHub
parent
945a39d035
commit
a82c0303ce
37 changed files with 501 additions and 545 deletions
18
Gemfile.lock
18
Gemfile.lock
|
|
@ -339,7 +339,7 @@ GEM
|
|||
nio4r (~> 2.0)
|
||||
raabro (1.4.0)
|
||||
racc (1.8.1)
|
||||
rack (3.1.9)
|
||||
rack (3.1.10)
|
||||
rack-mini-profiler (3.3.1)
|
||||
rack (>= 1.2.0)
|
||||
rack-session (2.1.0)
|
||||
|
|
@ -473,14 +473,16 @@ GEM
|
|||
railties (>= 6.0.0)
|
||||
stringio (3.1.2)
|
||||
stripe (13.4.1)
|
||||
tailwindcss-rails (3.3.1)
|
||||
tailwindcss-rails (4.0.0)
|
||||
railties (>= 7.0.0)
|
||||
tailwindcss-ruby (~> 3.0)
|
||||
tailwindcss-ruby (3.4.17-aarch64-linux)
|
||||
tailwindcss-ruby (3.4.17-arm-linux)
|
||||
tailwindcss-ruby (3.4.17-arm64-darwin)
|
||||
tailwindcss-ruby (3.4.17-x86_64-darwin)
|
||||
tailwindcss-ruby (3.4.17-x86_64-linux)
|
||||
tailwindcss-ruby (~> 4.0)
|
||||
tailwindcss-ruby (4.0.6)
|
||||
tailwindcss-ruby (4.0.6-aarch64-linux-gnu)
|
||||
tailwindcss-ruby (4.0.6-aarch64-linux-musl)
|
||||
tailwindcss-ruby (4.0.6-arm64-darwin)
|
||||
tailwindcss-ruby (4.0.6-x86_64-darwin)
|
||||
tailwindcss-ruby (4.0.6-x86_64-linux-gnu)
|
||||
tailwindcss-ruby (4.0.6-x86_64-linux-musl)
|
||||
terminal-table (4.0.0)
|
||||
unicode-display_width (>= 1.1.1, < 4)
|
||||
thor (1.3.2)
|
||||
|
|
|
|||
|
|
@ -1,194 +0,0 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* Reset rules, default styles applied to plain HTML */
|
||||
@layer base {
|
||||
details>summary::-webkit-details-marker {
|
||||
@apply hidden;
|
||||
}
|
||||
|
||||
details>summary {
|
||||
@apply list-none;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.form-field {
|
||||
@apply flex flex-col gap-1 relative px-3 py-2 rounded-md border bg-white border-alpha-black-100 shadow-xs w-full;
|
||||
@apply focus-within:border-gray-900 focus-within:shadow-none focus-within:ring-4 focus-within:ring-gray-100;
|
||||
}
|
||||
|
||||
|
||||
.form-field__label, .hw-combobox__label {
|
||||
@apply block text-xs text-gray-500 peer-disabled:text-gray-400;
|
||||
}
|
||||
|
||||
.form-field__input {
|
||||
@apply border-none bg-transparent text-sm opacity-100 w-full p-0;
|
||||
@apply focus:opacity-100 focus:outline-none focus:ring-0;
|
||||
@apply placeholder-shown:opacity-50;
|
||||
@apply disabled:text-gray-400;
|
||||
@apply text-ellipsis overflow-hidden whitespace-nowrap;
|
||||
}
|
||||
|
||||
select.form-field__input {
|
||||
@apply pr-8;
|
||||
}
|
||||
|
||||
.form-field__radio {
|
||||
@apply text-gray-900;
|
||||
}
|
||||
|
||||
.form-field__submit {
|
||||
@apply cursor-pointer rounded-lg bg-black p-3 text-center text-white hover:bg-gray-700;
|
||||
}
|
||||
|
||||
input:checked+label+.toggle-switch-dot {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
[type='checkbox'].maybe-checkbox {
|
||||
@apply rounded-sm;
|
||||
}
|
||||
|
||||
[type='checkbox'].maybe-checkbox--light {
|
||||
@apply border-alpha-black-200 checked:bg-gray-900 checked:ring-gray-900 focus:ring-gray-900 focus-visible:ring-gray-900 checked:hover:bg-gray-500;
|
||||
}
|
||||
|
||||
[type='checkbox'].maybe-checkbox--light:disabled {
|
||||
@apply cursor-not-allowed opacity-80 bg-gray-50 border-gray-200 checked:bg-gray-400 checked:ring-gray-400;
|
||||
}
|
||||
|
||||
[type='checkbox'].maybe-checkbox--dark {
|
||||
@apply ring-gray-900 checked:text-white;
|
||||
}
|
||||
|
||||
[type='checkbox'].maybe-checkbox--dark:disabled {
|
||||
@apply cursor-not-allowed opacity-80 ring-gray-600;
|
||||
}
|
||||
|
||||
[type='checkbox'].maybe-checkbox--dark:checked {
|
||||
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='111827' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
select[multiple="multiple"] {
|
||||
@apply py-2 pr-2 space-y-0.5 overflow-y-auto;
|
||||
}
|
||||
|
||||
select[multiple="multiple"] option {
|
||||
@apply py-2 rounded-md;
|
||||
}
|
||||
|
||||
select[multiple="multiple"] option:checked {
|
||||
@apply after:content-['\2713'] bg-white after:text-gray-500 after:ml-2;
|
||||
}
|
||||
|
||||
select[multiple="multiple"] option:active,
|
||||
select[multiple="multiple"] option:focus {
|
||||
@apply bg-white;
|
||||
}
|
||||
|
||||
.maybe-switch {
|
||||
@apply block bg-gray-100 w-9 h-5 rounded-full cursor-pointer;
|
||||
@apply after:content-[''] after:block after:absolute after:top-0.5 after:left-0.5 after:bg-white after:w-4 after:h-4 after:rounded-full after:transition-transform after:duration-300 after:ease-in-out;
|
||||
@apply peer-checked:bg-green-600 peer-checked:after:translate-x-4;
|
||||
}
|
||||
|
||||
.prose--github-release-notes {
|
||||
.octicon {
|
||||
@apply inline-block overflow-visible align-text-bottom fill-current;
|
||||
}
|
||||
|
||||
.dropdown-caret {
|
||||
@apply content-none border-4 border-b-0 border-transparent border-t-gray-500 size-0 inline-block;
|
||||
}
|
||||
|
||||
.user-mention {
|
||||
@apply font-bold;
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
@apply hidden absolute;
|
||||
}
|
||||
|
||||
.btn {
|
||||
@apply px-3 py-2 rounded-lg text-sm font-medium cursor-pointer disabled:cursor-not-allowed focus:outline-gray-500;
|
||||
}
|
||||
|
||||
.btn--primary {
|
||||
@apply bg-gray-900 text-white hover:bg-gray-700 disabled:bg-gray-50 disabled:hover:bg-gray-50 disabled:text-gray-400;
|
||||
}
|
||||
|
||||
.btn--secondary {
|
||||
@apply bg-gray-50 hover:bg-gray-100 text-gray-900;
|
||||
}
|
||||
|
||||
.btn--outline {
|
||||
@apply border border-alpha-black-200 text-gray-900 hover:bg-gray-50 disabled:bg-gray-50 disabled:hover:bg-gray-50 disabled:text-gray-400;
|
||||
}
|
||||
|
||||
.btn--ghost {
|
||||
@apply border border-transparent text-gray-900 hover:bg-gray-50;
|
||||
}
|
||||
}
|
||||
|
||||
.combobox {
|
||||
.hw-combobox__main__wrapper, .hw-combobox__input {
|
||||
@apply w-full;
|
||||
}
|
||||
|
||||
.hw-combobox__main__wrapper {
|
||||
@apply border-0 p-0 focus:border-0 ring-0 focus:ring-0 shadow-none focus:shadow-none focus-within:shadow-none;
|
||||
}
|
||||
|
||||
.hw-combobox__listbox {
|
||||
@apply absolute top-[160%] right-0 w-full bg-transparent rounded z-30;
|
||||
}
|
||||
|
||||
.hw_combobox__pagination__wrapper {
|
||||
@apply h-px;
|
||||
|
||||
&:only-child {
|
||||
@apply bg-transparent;
|
||||
}
|
||||
}
|
||||
|
||||
--hw-border-color: rgba(0, 0, 0, 0.2);
|
||||
--hw-handle-width: 20px;
|
||||
--hw-handle-height: 20px;
|
||||
--hw-handle-offset-right: 0px;
|
||||
}
|
||||
|
||||
/* Small, single purpose classes that should take precedence over other styles */
|
||||
@layer utilities {
|
||||
.scrollbar::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.scrollbar::-webkit-scrollbar-thumb {
|
||||
background: #d6d6d6;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.scrollbar::-webkit-scrollbar-thumb:hover {
|
||||
background: #a6a6a6;
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom scrollbar implementation for Windows browsers */
|
||||
.windows {
|
||||
::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #d6d6d6;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #a6a6a6;
|
||||
}
|
||||
}
|
||||
429
app/assets/tailwind/application.css
Normal file
429
app/assets/tailwind/application.css
Normal file
|
|
@ -0,0 +1,429 @@
|
|||
@import 'tailwindcss';
|
||||
|
||||
@plugin "@tailwindcss/typography";
|
||||
@plugin "@tailwindcss/forms";
|
||||
|
||||
@theme {
|
||||
/* Base colors */
|
||||
--color-white: #ffffff;
|
||||
--color-black: #0B0B0B;
|
||||
--color-success: #10A861;
|
||||
--color-warning: #F79009;
|
||||
--color-error: #F13636;
|
||||
|
||||
/* Gray scale */
|
||||
--color-gray-25: #FAFAFA;
|
||||
--color-gray-50: #F5F5F5;
|
||||
--color-gray-100: #F0F0F0;
|
||||
--color-gray-200: #E5E5E5;
|
||||
--color-gray-300: #D6D6D6;
|
||||
--color-gray-400: #A3A3A3;
|
||||
--color-gray-500: #737373;
|
||||
--color-gray-600: #525252;
|
||||
--color-gray-700: #3D3D3D;
|
||||
--color-gray-800: #212121;
|
||||
--color-gray-900: #141414;
|
||||
|
||||
/* Alpha colors */
|
||||
--color-alpha-white-25: rgba(255, 255, 255, 0.03);
|
||||
--color-alpha-white-50: rgba(255, 255, 255, 0.05);
|
||||
--color-alpha-white-100: rgba(255, 255, 255, 0.08);
|
||||
--color-alpha-white-200: rgba(255, 255, 255, 0.1);
|
||||
--color-alpha-white-300: rgba(255, 255, 255, 0.15);
|
||||
--color-alpha-white-400: rgba(255, 255, 255, 0.2);
|
||||
--color-alpha-white-500: rgba(255, 255, 255, 0.3);
|
||||
--color-alpha-white-600: rgba(255, 255, 255, 0.4);
|
||||
--color-alpha-white-700: rgba(255, 255, 255, 0.5);
|
||||
--color-alpha-white-800: rgba(255, 255, 255, 0.6);
|
||||
--color-alpha-white-900: rgba(255, 255, 255, 0.7);
|
||||
|
||||
--color-alpha-black-25: rgba(11, 11, 11, 0.03);
|
||||
--color-alpha-black-50: rgba(11, 11, 11, 0.05);
|
||||
--color-alpha-black-100: rgba(11, 11, 11, 0.08);
|
||||
--color-alpha-black-200: rgba(11, 11, 11, 0.1);
|
||||
--color-alpha-black-300: rgba(11, 11, 11, 0.15);
|
||||
--color-alpha-black-400: rgba(11, 11, 11, 0.2);
|
||||
--color-alpha-black-500: rgba(11, 11, 11, 0.3);
|
||||
--color-alpha-black-600: rgba(11, 11, 11, 0.4);
|
||||
--color-alpha-black-700: rgba(11, 11, 11, 0.5);
|
||||
--color-alpha-black-800: rgba(11, 11, 11, 0.6);
|
||||
--color-alpha-black-900: rgba(11, 11, 11, 0.7);
|
||||
|
||||
/* Red scale */
|
||||
--color-red-25: #FFFBFB;
|
||||
--color-red-50: #FFF1F0;
|
||||
--color-red-100: #FFDEDB;
|
||||
--color-red-200: #FEB9B3;
|
||||
--color-red-300: #F88C86;
|
||||
--color-red-400: #ED4E4E;
|
||||
--color-red-500: #F13636;
|
||||
--color-red-600: #EC2222;
|
||||
--color-red-700: #C91313;
|
||||
--color-red-800: #A40E0E;
|
||||
--color-red-900: #7E0707;
|
||||
|
||||
/* Green scale */
|
||||
--color-green-25: #F6FEF9;
|
||||
--color-green-50: #ECFDF3;
|
||||
--color-green-100: #D1FADF;
|
||||
--color-green-200: #A6F4C5;
|
||||
--color-green-300: #6CE9A6;
|
||||
--color-green-400: #32D583;
|
||||
--color-green-500: #12B76A;
|
||||
--color-green-600: #10A861;
|
||||
--color-green-700: #078C52;
|
||||
--color-green-800: #05603A;
|
||||
--color-green-900: #054F31;
|
||||
|
||||
/* Yellow scale */
|
||||
--color-yellow-25: #FFFCF5;
|
||||
--color-yellow-50: #FFFAEB;
|
||||
--color-yellow-100: #FEF0C7;
|
||||
--color-yellow-200: #FEDF89;
|
||||
--color-yellow-300: #FEC84B;
|
||||
--color-yellow-400: #FDB022;
|
||||
--color-yellow-500: #F79009;
|
||||
--color-yellow-600: #DC6803;
|
||||
--color-yellow-700: #B54708;
|
||||
--color-yellow-800: #93370D;
|
||||
--color-yellow-900: #7A2E0E;
|
||||
|
||||
/* Cyan scale */
|
||||
--color-cyan-25: #F5FEFF;
|
||||
--color-cyan-50: #ECFDFF;
|
||||
--color-cyan-100: #CFF9FE;
|
||||
--color-cyan-200: #A5F0FC;
|
||||
--color-cyan-300: #67E3F9;
|
||||
--color-cyan-400: #22CCEE;
|
||||
--color-cyan-500: #06AED4;
|
||||
--color-cyan-600: #088AB2;
|
||||
--color-cyan-700: #0E7090;
|
||||
--color-cyan-800: #155B75;
|
||||
--color-cyan-900: #155B75;
|
||||
|
||||
/* Blue scale */
|
||||
--color-blue-25: #F5FAFF;
|
||||
--color-blue-50: #EFF8FF;
|
||||
--color-blue-100: #D1E9FF;
|
||||
--color-blue-200: #B2DDFF;
|
||||
--color-blue-300: #84CAFF;
|
||||
--color-blue-400: #53B1FD;
|
||||
--color-blue-500: #2E90FA;
|
||||
--color-blue-600: #1570EF;
|
||||
--color-blue-700: #175CD3;
|
||||
--color-blue-800: #1849A9;
|
||||
--color-blue-900: #194185;
|
||||
|
||||
/* Indigo scale */
|
||||
--color-indigo-25: #F5F8FF;
|
||||
--color-indigo-50: #EFF4FF;
|
||||
--color-indigo-100: #E0EAFF;
|
||||
--color-indigo-200: #C7D7FE;
|
||||
--color-indigo-300: #A4BCFD;
|
||||
--color-indigo-400: #8098F9;
|
||||
--color-indigo-500: #6172F3;
|
||||
--color-indigo-600: #444CE7;
|
||||
--color-indigo-700: #3538CD;
|
||||
--color-indigo-800: #2D31A6;
|
||||
--color-indigo-900: #2D3282;
|
||||
|
||||
/* Violet scale */
|
||||
--color-violet-25: #FBFAFF;
|
||||
--color-violet-50: #F5F3FF;
|
||||
--color-violet-100: #ECE9FE;
|
||||
--color-violet-200: #DDD6FE;
|
||||
--color-violet-300: #C3B5FD;
|
||||
--color-violet-400: #A48AFB;
|
||||
--color-violet-500: #875BF7;
|
||||
--color-violet-600: #7839EE;
|
||||
--color-violet-700: #6927DA;
|
||||
|
||||
/* Fuchsia scale */
|
||||
--color-fuchsia-25: #FEFAFF;
|
||||
--color-fuchsia-50: #FDF4FF;
|
||||
--color-fuchsia-100: #FBE8FF;
|
||||
--color-fuchsia-200: #F6D0FE;
|
||||
--color-fuchsia-300: #EEAAFD;
|
||||
--color-fuchsia-400: #E478FA;
|
||||
--color-fuchsia-500: #D444F1;
|
||||
--color-fuchsia-600: #BA24D5;
|
||||
--color-fuchsia-700: #9F1AB1;
|
||||
--color-fuchsia-800: #821890;
|
||||
--color-fuchsia-900: #6F1877;
|
||||
|
||||
/* Pink scale */
|
||||
--color-pink-25: #FFFAFC;
|
||||
--color-pink-50: #FEF0F7;
|
||||
--color-pink-100: #FFD1E2;
|
||||
--color-pink-200: #FFB1CE;
|
||||
--color-pink-300: #FD8FBA;
|
||||
--color-pink-400: #F86BA7;
|
||||
--color-pink-500: #F23E94;
|
||||
--color-pink-600: #D5327F;
|
||||
--color-pink-700: #BA256B;
|
||||
--color-pink-800: #9E1958;
|
||||
--color-pink-900: #840B45;
|
||||
|
||||
/* Orange scale */
|
||||
--color-orange-25: #FFF9F5;
|
||||
--color-orange-50: #FFF4ED;
|
||||
--color-orange-100: #FFE6D5;
|
||||
--color-orange-200: #FFD6AE;
|
||||
--color-orange-300: #FF9C66;
|
||||
--color-orange-400: #FF692E;
|
||||
--color-orange-500: #FF4405;
|
||||
--color-orange-600: #E62E05;
|
||||
--color-orange-700: #BC1B06;
|
||||
--color-orange-800: #97180C;
|
||||
--color-orange-900: #771A0D;
|
||||
|
||||
/* Shadows */
|
||||
--shadow-none: 0 0 #0000;
|
||||
--shadow-xs: 0px 1px 2px 0px rgba(11, 11, 11, 0.05);
|
||||
--shadow-sm: 0px 1px 2px 0px rgba(11, 11, 11, 0.06), 0px 1px 3px 0px rgba(11, 11, 11, 0.10);
|
||||
--shadow-md: 0px 2px 4px -2px rgba(11, 11, 11, 0.06), 0px 4px 8px -2px rgba(11, 11, 11, 0.10);
|
||||
--shadow-lg: 0px 4px 6px -2px rgba(11, 11, 11, 0.03), 0px 12px 16px -4px rgba(11, 11, 11, 0.08);
|
||||
--shadow-xl: 0px 8px 8px -4px rgba(11, 11, 11, 0.03), 0px 20px 24px -4px rgba(11, 11, 11, 0.08);
|
||||
--shadow-2xl: 0px 24px 48px -12px rgba(11, 11, 11, 0.12);
|
||||
--shadow-3xl: 0px 32px 64px -12px rgba(11, 11, 11, 0.14);
|
||||
|
||||
/* Border radius */
|
||||
--border-radius-none: 0;
|
||||
--border-radius-full: 9999px;
|
||||
--border-radius-xs: 2px;
|
||||
--border-radius-sm: 4px;
|
||||
--border-radius-md: 8px;
|
||||
--border-radius-lg: 10px;
|
||||
--border-radius-xl: 12px;
|
||||
--border-radius-2xl: 16px;
|
||||
--border-radius-3xl: 24px;
|
||||
}
|
||||
|
||||
.form-field {
|
||||
@apply flex flex-col gap-1 relative px-3 py-2 rounded-md border bg-white border-alpha-black-100 shadow-xs w-full;
|
||||
@apply focus-within:border-gray-900 focus-within:shadow-none focus-within:ring-4 focus-within:ring-gray-100;
|
||||
}
|
||||
|
||||
.form-field__label {
|
||||
@apply block text-xs text-gray-500 peer-disabled:text-gray-400;
|
||||
}
|
||||
|
||||
.hw-combobox__label {
|
||||
@apply block text-xs text-gray-500 peer-disabled:text-gray-400;
|
||||
}
|
||||
|
||||
.form-field__input {
|
||||
@apply border-none bg-transparent text-sm opacity-100 w-full p-0;
|
||||
@apply focus:opacity-100 focus:outline-hidden focus:ring-0;
|
||||
@apply placeholder-shown:opacity-50;
|
||||
@apply disabled:text-gray-400;
|
||||
@apply text-ellipsis overflow-hidden whitespace-nowrap;
|
||||
|
||||
&select {
|
||||
@apply pr-8;
|
||||
}
|
||||
}
|
||||
|
||||
.form-field__radio {
|
||||
@apply text-gray-900;
|
||||
}
|
||||
|
||||
.form-field__submit {
|
||||
@apply cursor-pointer rounded-lg bg-black p-3 text-center text-white hover:bg-gray-700;
|
||||
}
|
||||
|
||||
.toggle-switch-dot {
|
||||
input:checked + label + & {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
.maybe-checkbox {
|
||||
&[type='checkbox'] {
|
||||
@apply rounded-sm;
|
||||
}
|
||||
}
|
||||
|
||||
.maybe-checkbox--light {
|
||||
&[type='checkbox'] {
|
||||
@apply border-alpha-black-200 checked:bg-gray-900 checked:ring-gray-900 focus:ring-gray-900 focus-visible:ring-gray-900 checked:hover:bg-gray-500;
|
||||
}
|
||||
|
||||
&[type='checkbox']:disabled {
|
||||
@apply cursor-not-allowed opacity-80 bg-gray-50 border-gray-200 checked:bg-gray-400 checked:ring-gray-400;
|
||||
}
|
||||
}
|
||||
|
||||
.maybe-checkbox--dark {
|
||||
&[type='checkbox'] {
|
||||
@apply ring-gray-900 checked:text-white;
|
||||
}
|
||||
|
||||
&[type='checkbox']:disabled {
|
||||
@apply cursor-not-allowed opacity-80 ring-gray-600;
|
||||
}
|
||||
|
||||
&[type='checkbox']:checked {
|
||||
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='111827' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
|
||||
}
|
||||
}
|
||||
|
||||
.maybe-switch {
|
||||
@apply block bg-gray-100 w-9 h-5 rounded-full cursor-pointer;
|
||||
@apply after:content-[''] after:block after:absolute after:top-0.5 after:left-0.5 after:bg-white after:w-4 after:h-4 after:rounded-full after:transition-transform after:duration-300 after:ease-in-out;
|
||||
@apply peer-checked:bg-green-600 peer-checked:after:translate-x-4;
|
||||
}
|
||||
|
||||
.prose {
|
||||
@apply max-w-none;
|
||||
|
||||
h2 {
|
||||
@apply text-xl font-medium;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@apply text-lg font-medium;
|
||||
}
|
||||
|
||||
li {
|
||||
@apply m-0;
|
||||
}
|
||||
|
||||
details {
|
||||
@apply mb-4 rounded-xl mt-3.5;
|
||||
}
|
||||
|
||||
summary {
|
||||
@apply flex items-center gap-1;
|
||||
}
|
||||
|
||||
video {
|
||||
@apply m-0 rounded-b-xl;
|
||||
}
|
||||
}
|
||||
|
||||
.prose--github-release-notes {
|
||||
.octicon {
|
||||
@apply inline-block overflow-visible align-text-bottom fill-current;
|
||||
}
|
||||
|
||||
.dropdown-caret {
|
||||
@apply content-none border-4 border-b-0 border-transparent border-t-gray-500 size-0 inline-block;
|
||||
}
|
||||
|
||||
.user-mention {
|
||||
@apply font-bold;
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
@apply hidden absolute;
|
||||
}
|
||||
|
||||
.btn {
|
||||
@apply px-3 py-2 rounded-lg text-sm font-medium cursor-pointer disabled:cursor-not-allowed focus:outline-gray-500;
|
||||
}
|
||||
|
||||
.btn--primary {
|
||||
@apply bg-gray-900 text-white hover:bg-gray-700 disabled:bg-gray-50 disabled:hover:bg-gray-50 disabled:text-gray-400;
|
||||
}
|
||||
|
||||
.btn--secondary {
|
||||
@apply bg-gray-50 hover:bg-gray-100 text-gray-900;
|
||||
}
|
||||
|
||||
.btn--outline {
|
||||
@apply border border-alpha-black-200 text-gray-900 hover:bg-gray-50 disabled:bg-gray-50 disabled:hover:bg-gray-50 disabled:text-gray-400;
|
||||
}
|
||||
|
||||
.btn--ghost {
|
||||
@apply border border-transparent text-gray-900 hover:bg-gray-50;
|
||||
}
|
||||
.scrollbar {
|
||||
&::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #d6d6d6;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background: #a6a6a6;
|
||||
}
|
||||
}
|
||||
|
||||
/* Reset rules, default styles applied to plain HTML */
|
||||
@layer base {
|
||||
details>summary::-webkit-details-marker {
|
||||
@apply hidden;
|
||||
}
|
||||
|
||||
details>summary {
|
||||
@apply list-none;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
select[multiple="multiple"] {
|
||||
@apply py-2 pr-2 space-y-0.5 overflow-y-auto;
|
||||
}
|
||||
|
||||
select[multiple="multiple"] option {
|
||||
@apply py-2 rounded-md;
|
||||
}
|
||||
|
||||
select[multiple="multiple"] option:checked {
|
||||
@apply after:content-['\2713'] bg-white after:text-gray-500 after:ml-2;
|
||||
}
|
||||
|
||||
select[multiple="multiple"] option:active,
|
||||
select[multiple="multiple"] option:focus {
|
||||
@apply bg-white;
|
||||
}
|
||||
}
|
||||
|
||||
@utility combobox {
|
||||
.hw-combobox__main__wrapper,
|
||||
.hw-combobox__input {
|
||||
@apply w-full;
|
||||
}
|
||||
|
||||
.hw-combobox__main__wrapper {
|
||||
@apply border-0 p-0 focus:border-0 ring-0 focus:ring-0 shadow-none focus:shadow-none focus-within:shadow-none;
|
||||
}
|
||||
|
||||
.hw-combobox__listbox {
|
||||
@apply absolute top-[160%] right-0 w-full bg-transparent rounded z-30;
|
||||
}
|
||||
|
||||
.hw_combobox__pagination__wrapper {
|
||||
@apply h-px;
|
||||
|
||||
&:only-child {
|
||||
@apply bg-transparent;
|
||||
}
|
||||
}
|
||||
|
||||
--hw-border-color: rgba(0, 0, 0, 0.2);
|
||||
--hw-handle-width: 20px;
|
||||
--hw-handle-height: 20px;
|
||||
--hw-handle-offset-right: 0px;
|
||||
}
|
||||
|
||||
/* Custom scrollbar implementation for Windows browsers */
|
||||
.windows {
|
||||
::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #d6d6d6;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #a6a6a6;
|
||||
}
|
||||
}
|
||||
|
|
@ -11,13 +11,13 @@ module FormsHelper
|
|||
end
|
||||
|
||||
def radio_tab_tag(form:, name:, value:, label:, icon:, checked: false, disabled: false)
|
||||
form.label name, for: form.field_id(name, value), class: "group has-[:disabled]:cursor-not-allowed" do
|
||||
form.label name, for: form.field_id(name, value), class: "group has-disabled:cursor-not-allowed" do
|
||||
concat radio_tab_contents(label:, icon:)
|
||||
concat form.radio_button(name, value, checked:, disabled:, class: "hidden")
|
||||
end
|
||||
end
|
||||
|
||||
def period_select(form:, selected:, classes: "border border-alpha-black-100 shadow-xs rounded-lg text-sm pr-7 cursor-pointer text-gray-900 focus:outline-none focus:ring-0")
|
||||
def period_select(form:, selected:, classes: "border border-alpha-black-100 shadow-xs rounded-lg text-sm pr-7 cursor-pointer text-gray-900 focus:outline-hidden focus:ring-0")
|
||||
periods_for_select = [
|
||||
%w[CWD current_week], # Current Week to Date
|
||||
%w[7D last_7_days],
|
||||
|
|
@ -39,9 +39,9 @@ end
|
|||
|
||||
private
|
||||
def radio_tab_contents(label:, icon:)
|
||||
tag.div(class: "flex px-4 py-1 rounded-lg items-center space-x-2 justify-center text-gray-400 group-has-[:checked]:bg-white group-has-[:checked]:text-gray-800 group-has-[:checked]:shadow-sm") do
|
||||
tag.div(class: "flex px-4 py-1 rounded-lg items-center space-x-2 justify-center text-gray-400 group-has-checked:bg-white group-has-checked:text-gray-800 group-has-checked:shadow-sm") do
|
||||
concat lucide_icon(icon, class: "w-5 h-5")
|
||||
concat tag.span(label, class: "group-has-[:checked]:font-semibold")
|
||||
concat tag.span(label, class: "group-has-checked:font-semibold")
|
||||
end
|
||||
end
|
||||
end
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import { Controller } from "@hotwired/stimulus";
|
||||
import tailwindColors from "@maybe/tailwindcolors";
|
||||
import * as d3 from "d3";
|
||||
|
||||
export default class extends Controller {
|
||||
|
|
@ -85,7 +84,7 @@ export default class extends Controller {
|
|||
.attr("y1", 0)
|
||||
.attr("x2", this._d3InitialContainerWidth / 2)
|
||||
.attr("y2", this._d3InitialContainerHeight)
|
||||
.attr("stroke", tailwindColors.gray[300])
|
||||
.attr("stroke", "var(--color-gray-300)")
|
||||
.attr("stroke-dasharray", "4, 4");
|
||||
}
|
||||
|
||||
|
|
@ -95,7 +94,7 @@ export default class extends Controller {
|
|||
.attr("cx", this._d3InitialContainerWidth / 2)
|
||||
.attr("cy", this._d3InitialContainerHeight / 2)
|
||||
.attr("r", 4)
|
||||
.style("fill", tailwindColors.gray[400]);
|
||||
.style("fill", "var(--color-gray-400)");
|
||||
}
|
||||
|
||||
_drawChart() {
|
||||
|
|
@ -151,7 +150,7 @@ export default class extends Controller {
|
|||
.append("stop")
|
||||
.attr("class", "end-color")
|
||||
.attr("offset", "100%")
|
||||
.attr("stop-color", tailwindColors.gray[300]);
|
||||
.attr("stop-color", "var(--color-gray-300)");
|
||||
}
|
||||
|
||||
_setTrendlineSplitAt(percent) {
|
||||
|
|
@ -191,7 +190,7 @@ export default class extends Controller {
|
|||
// Style ticks
|
||||
this._d3Group
|
||||
.selectAll(".tick text")
|
||||
.style("fill", tailwindColors.gray[500])
|
||||
.style("fill", "var(--color-gray-500)")
|
||||
.style("font-size", "12px")
|
||||
.style("font-weight", "500")
|
||||
.attr("text-anchor", "middle")
|
||||
|
|
@ -261,8 +260,8 @@ export default class extends Controller {
|
|||
.style("position", "absolute")
|
||||
.style("padding", "8px")
|
||||
.style("font", "14px Inter, sans-serif")
|
||||
.style("background", tailwindColors.white)
|
||||
.style("border", `1px solid ${tailwindColors["alpha-black"][100]}`)
|
||||
.style("background", "var(--color-white)")
|
||||
.style("border", "1px solid var(--color-alpha-black-100)")
|
||||
.style("border-radius", "10px")
|
||||
.style("pointer-events", "none")
|
||||
.style("opacity", 0); // Starts as hidden
|
||||
|
|
@ -313,7 +312,7 @@ export default class extends Controller {
|
|||
.attr("y1", 0)
|
||||
.attr("x2", this._d3XScale(d.date))
|
||||
.attr("y2", this._d3ContainerHeight)
|
||||
.attr("stroke", tailwindColors.gray[300])
|
||||
.attr("stroke", "var(--color-gray-300)")
|
||||
.attr("stroke-dasharray", "4, 4");
|
||||
|
||||
// Big circle
|
||||
|
|
@ -361,7 +360,7 @@ export default class extends Controller {
|
|||
|
||||
_tooltipTemplate(datum) {
|
||||
return `
|
||||
<div style="margin-bottom: 4px; color: ${tailwindColors.gray[500]};">
|
||||
<div style="margin-bottom: 4px; color: var(--color-gray-500);">
|
||||
${d3.utcFormat("%b %d, %Y")(datum.date)}
|
||||
</div>
|
||||
|
||||
|
|
@ -401,13 +400,13 @@ export default class extends Controller {
|
|||
return {
|
||||
up:
|
||||
datum.trend.favorable_direction === "up"
|
||||
? tailwindColors.success
|
||||
: tailwindColors.error,
|
||||
? "var(--color-success)"
|
||||
: "var(--color-error)",
|
||||
down:
|
||||
datum.trend.favorable_direction === "down"
|
||||
? tailwindColors.success
|
||||
: tailwindColors.error,
|
||||
flat: tailwindColors.gray[500],
|
||||
? "var(--color-success)"
|
||||
: "var(--color-error)",
|
||||
flat: "var(--color-gray-500)",
|
||||
}[datum.trend.direction];
|
||||
}
|
||||
|
||||
|
|
@ -505,12 +504,12 @@ export default class extends Controller {
|
|||
|
||||
get _trendColor() {
|
||||
if (this._trendDirection === "flat") {
|
||||
return tailwindColors.gray[500];
|
||||
return "var(--color-gray-500)";
|
||||
}
|
||||
if (this._trendDirection === this._favorableDirection) {
|
||||
return tailwindColors.green[500];
|
||||
return "var(--color-green-500)";
|
||||
}
|
||||
return tailwindColors.error;
|
||||
return "var(--color-error)";
|
||||
}
|
||||
|
||||
get _trendDirection() {
|
||||
|
|
|
|||
|
|
@ -1,181 +0,0 @@
|
|||
/**
|
||||
* To keep consistent styling across the app, this file can be imported in
|
||||
* Stimulus controllers to reference our color palette. Mostly used for D3 charts.
|
||||
*/
|
||||
|
||||
export default {
|
||||
transparent: "transparent",
|
||||
current: "currentColor",
|
||||
white: "#ffffff",
|
||||
black: "#0B0B0B",
|
||||
success: "#10A861",
|
||||
warning: "#F79009",
|
||||
error: "#F13636",
|
||||
gray: {
|
||||
25: "#FAFAFA",
|
||||
50: "#F5F5F5",
|
||||
100: "#F0F0F0",
|
||||
200: "#E5E5E5",
|
||||
300: "#D6D6D6",
|
||||
400: "#A3A3A3",
|
||||
500: "#737373",
|
||||
600: "#525252",
|
||||
700: "#3D3D3D",
|
||||
800: "#212121",
|
||||
900: "#141414",
|
||||
},
|
||||
"alpha-white": {
|
||||
25: "rgba(255, 255, 255, 0.03)",
|
||||
50: "rgba(255, 255, 255, 0.05)",
|
||||
100: "rgba(255, 255, 255, 0.08)",
|
||||
200: "rgba(255, 255, 255, 0.1)",
|
||||
300: "rgba(255, 255, 255, 0.15)",
|
||||
400: "rgba(255, 255, 255, 0.2)",
|
||||
500: "rgba(255, 255, 255, 0.3)",
|
||||
600: "rgba(255, 255, 255, 0.4)",
|
||||
700: "rgba(255, 255, 255, 0.5)",
|
||||
800: "rgba(255, 255, 255, 0.6)",
|
||||
900: "rgba(255, 255, 255, 0.7)",
|
||||
},
|
||||
"alpha-black": {
|
||||
25: "rgba(11, 11, 11, 0.03)",
|
||||
50: "rgba(11, 11, 11, 0.05)",
|
||||
100: "rgba(11, 11, 11, 0.08)",
|
||||
200: "rgba(11, 11, 11, 0.1)",
|
||||
300: "rgba(11, 11, 11, 0.15)",
|
||||
400: "rgba(11, 11, 11, 0.2)",
|
||||
500: "rgba(11, 11, 11, 0.3)",
|
||||
600: "rgba(11, 11, 11, 0.4)",
|
||||
700: "rgba(11, 11, 11, 0.5)",
|
||||
800: "rgba(11, 11, 11, 0.6)",
|
||||
900: "rgba(11, 11, 11, 0.7)",
|
||||
},
|
||||
red: {
|
||||
25: "#FFFBFB",
|
||||
50: "#FFF1F0",
|
||||
100: "#FFDEDB",
|
||||
200: "#FEB9B3",
|
||||
300: "#F88C86",
|
||||
400: "#ED4E4E",
|
||||
500: "#F13636",
|
||||
600: "#EC2222",
|
||||
700: "#C91313",
|
||||
800: "#A40E0E",
|
||||
900: "#7E0707",
|
||||
},
|
||||
green: {
|
||||
25: "#F6FEF9",
|
||||
50: "#ECFDF3",
|
||||
100: "#D1FADF",
|
||||
200: "#A6F4C5",
|
||||
300: "#6CE9A6",
|
||||
400: "#32D583",
|
||||
500: "#12B76A",
|
||||
600: "#10A861",
|
||||
700: "#078C52",
|
||||
800: "#05603A",
|
||||
900: "#054F31",
|
||||
},
|
||||
yellow: {
|
||||
25: "#FFFCF5",
|
||||
50: "#FFFAEB",
|
||||
100: "#FEF0C7",
|
||||
200: "#FEDF89",
|
||||
300: "#FEC84B",
|
||||
400: "#FDB022",
|
||||
500: "#F79009",
|
||||
600: "#DC6803",
|
||||
700: "#B54708",
|
||||
800: "#93370D",
|
||||
900: "#7A2E0E",
|
||||
},
|
||||
cyan: {
|
||||
25: "#F5FEFF",
|
||||
50: "#ECFDFF",
|
||||
100: "#CFF9FE",
|
||||
200: "#A5F0FC",
|
||||
300: "#67E3F9",
|
||||
400: "#22CCEE",
|
||||
500: "#06AED4",
|
||||
600: "#088AB2",
|
||||
700: "#0E7090",
|
||||
800: "#155B75",
|
||||
900: "#155B75",
|
||||
},
|
||||
blue: {
|
||||
25: "#F5FAFF",
|
||||
50: "#EFF8FF",
|
||||
100: "#D1E9FF",
|
||||
200: "#B2DDFF",
|
||||
300: "#84CAFF",
|
||||
400: "#53B1FD",
|
||||
500: "#2E90FA",
|
||||
600: "#1570EF",
|
||||
700: "#175CD3",
|
||||
800: "#1849A9",
|
||||
900: "#194185",
|
||||
},
|
||||
indigo: {
|
||||
25: "#F5F8FF",
|
||||
50: "#EFF4FF",
|
||||
100: "#E0EAFF",
|
||||
200: "#C7D7FE",
|
||||
300: "#A4BCFD",
|
||||
400: "#8098F9",
|
||||
500: "#6172F3",
|
||||
600: "#444CE7",
|
||||
700: "#3538CD",
|
||||
800: "#2D31A6",
|
||||
900: "#2D3282",
|
||||
},
|
||||
violet: {
|
||||
25: "#FBFAFF",
|
||||
50: "#F5F3FF",
|
||||
100: "#ECE9FE",
|
||||
200: "#DDD6FE",
|
||||
300: "#C3B5FD",
|
||||
400: "#A48AFB",
|
||||
500: "#875BF7",
|
||||
600: "#7839EE",
|
||||
700: "#6927DA",
|
||||
},
|
||||
fuchsia: {
|
||||
25: "#FEFAFF",
|
||||
50: "#FDF4FF",
|
||||
100: "#FBE8FF",
|
||||
200: "#F6D0FE",
|
||||
300: "#EEAAFD",
|
||||
400: "#E478FA",
|
||||
500: "#D444F1",
|
||||
600: "#BA24D5",
|
||||
700: "#9F1AB1",
|
||||
800: "#821890",
|
||||
900: "#6F1877",
|
||||
},
|
||||
pink: {
|
||||
25: "#FFFAFC",
|
||||
50: "#FEF0F7",
|
||||
100: "#FFD1E2",
|
||||
200: "#FFB1CE",
|
||||
300: "#FD8FBA",
|
||||
400: "#F86BA7",
|
||||
500: "#F23E94",
|
||||
600: "#D5327F",
|
||||
700: "#BA256B",
|
||||
800: "#9E1958",
|
||||
900: "#840B45",
|
||||
},
|
||||
orange: {
|
||||
25: "#FFF9F5",
|
||||
50: "#FFF4ED",
|
||||
100: "#FFE6D5",
|
||||
200: "#FFD6AE",
|
||||
300: "#FF9C66",
|
||||
400: "#FF692E",
|
||||
500: "#FF4405",
|
||||
600: "#E62E05",
|
||||
700: "#BC1B06",
|
||||
800: "#97180C",
|
||||
900: "#771A0D",
|
||||
},
|
||||
};
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
</header>
|
||||
|
||||
<details class="group space-y-2" open>
|
||||
<summary class="flex list-none items-center justify-between rounded-xl px-3 py-2 text-xs font-medium uppercase text-gray-500 bg-gray-25 focus-visible:outline-none">
|
||||
<summary class="flex list-none items-center justify-between rounded-xl px-3 py-2 text-xs font-medium uppercase text-gray-500 bg-gray-25 focus-visible:outline-hidden">
|
||||
<h4><%= t(".overview") %></h4>
|
||||
<%= lucide_icon "chevron-down", class: "group-open:transform group-open:rotate-180 text-gray-500 w-5" %>
|
||||
</summary>
|
||||
|
|
@ -48,7 +48,7 @@
|
|||
</details>
|
||||
|
||||
<details class="group space-y-2" open>
|
||||
<summary class="flex list-none items-center justify-between rounded-xl px-3 py-2 text-xs font-medium uppercase text-gray-500 bg-gray-25 focus-visible:outline-none">
|
||||
<summary class="flex list-none items-center justify-between rounded-xl px-3 py-2 text-xs font-medium uppercase text-gray-500 bg-gray-25 focus-visible:outline-hidden">
|
||||
<h4><%= t(".history") %></h4>
|
||||
<%= lucide_icon "chevron-down", class: "group-open:transform group-open:rotate-180 text-gray-500 w-5" %>
|
||||
</summary>
|
||||
|
|
@ -88,7 +88,7 @@
|
|||
</details>
|
||||
|
||||
<details class="group space-y-2" open>
|
||||
<summary class="flex list-none items-center justify-between rounded-xl px-3 py-2 text-xs font-medium uppercase text-gray-500 bg-gray-25 focus-visible:outline-none">
|
||||
<summary class="flex list-none items-center justify-between rounded-xl px-3 py-2 text-xs font-medium uppercase text-gray-500 bg-gray-25 focus-visible:outline-hidden">
|
||||
<h4><%= t(".settings") %></h4>
|
||||
<%= lucide_icon "chevron-down", class: "group-open:transform group-open:rotate-180 text-gray-500 w-5" %>
|
||||
</summary>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<fieldset class="bg-gray-50 rounded-lg p-1 grid grid-flow-col justify-stretch gap-x-2">
|
||||
<%= radio_tab_tag form: f, name: :nature, value: :outflow, label: t(".expense"), icon: "minus-circle", checked: params[:nature] == "outflow" || params[:nature].nil? %>
|
||||
<%= radio_tab_tag form: f, name: :nature, value: :inflow, label: t(".income"), icon: "plus-circle", checked: params[:nature] == "inflow" %>
|
||||
<%= link_to new_transfer_path, data: { turbo_frame: :modal }, class: "flex px-4 py-1 rounded-lg items-center space-x-2 justify-center text-gray-400 group-has-[:checked]:bg-white group-has-[:checked]:text-gray-800 group-has-[:checked]:shadow-sm" do %>
|
||||
<%= link_to new_transfer_path, data: { turbo_frame: :modal }, class: "flex px-4 py-1 rounded-lg items-center space-x-2 justify-center text-gray-400 group-has-checked:bg-white group-has-checked:text-gray-800 group-has-checked:shadow-sm" do %>
|
||||
<%= lucide_icon "arrow-right-left", class: "w-5 h-5" %>
|
||||
<%= tag.span t(".transfer") %>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
|
||||
<div class="space-y-2">
|
||||
<details class="group space-y-2" open>
|
||||
<summary class="flex list-none items-center justify-between rounded-xl px-3 py-2 text-xs font-medium uppercase text-gray-500 bg-gray-25 focus-visible:outline-none">
|
||||
<summary class="flex list-none items-center justify-between rounded-xl px-3 py-2 text-xs font-medium uppercase text-gray-500 bg-gray-25 focus-visible:outline-hidden">
|
||||
<h4><%= t(".overview") %></h4>
|
||||
<%= lucide_icon "chevron-down", class: "group-open:transform group-open:rotate-180 text-gray-500 w-5" %>
|
||||
</summary>
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
</details>
|
||||
|
||||
<details class="group space-y-2" open>
|
||||
<summary class="flex list-none items-center justify-between rounded-xl px-3 py-2 text-xs font-medium uppercase text-gray-500 bg-gray-25 focus-visible:outline-none">
|
||||
<summary class="flex list-none items-center justify-between rounded-xl px-3 py-2 text-xs font-medium uppercase text-gray-500 bg-gray-25 focus-visible:outline-hidden">
|
||||
<h4><%= t(".details") %></h4>
|
||||
<%= lucide_icon "chevron-down", class: "group-open:transform group-open:rotate-180 text-gray-500 w-5" %>
|
||||
</summary>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<%# locals: (accountable:) %>
|
||||
|
||||
<%= link_to new_polymorphic_path(accountable, step: "method_select", return_to: params[:return_to]),
|
||||
class: "flex items-center gap-4 w-full text-center focus:outline-none focus:bg-alpha-black-25 hover:bg-alpha-black-25 border border-transparent block px-2 rounded-lg p-2" do %>
|
||||
class: "flex items-center gap-4 w-full text-center focus:outline-hidden focus:bg-alpha-black-25 hover:bg-alpha-black-25 border border-transparent block px-2 rounded-lg p-2" do %>
|
||||
<span style="background-color: color-mix(in srgb, <%= accountable.color %> 10%, white);" class="flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg border border-alpha-black-25">
|
||||
<%= lucide_icon(accountable.icon, style: "color: #{accountable.color}", class: "w-5 h-5") %>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<%# locals: (accounts:) %>
|
||||
|
||||
<details open class="group bg-white p-4 border border-alpha-black-25 shadow-xs rounded-xl">
|
||||
<summary class="flex items-center gap-2 focus-visible:outline-none">
|
||||
<summary class="flex items-center gap-2 focus-visible:outline-hidden">
|
||||
<%= lucide_icon "chevron-right", class: "group-open:transform group-open:rotate-90 text-gray-500 w-5" %>
|
||||
|
||||
<div class="flex items-center justify-center h-8 w-8 rounded-full bg-black/5">
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
<% unless params[:return_to].present? %>
|
||||
<%= button_to imports_path(import: { type: "AccountImport" }),
|
||||
data: { turbo_frame: :_top },
|
||||
class: "flex items-center gap-4 w-full text-center focus:outline-none focus:bg-alpha-black-25 hover:bg-alpha-black-25 border border-transparent block px-2 rounded-lg p-2" do %>
|
||||
class: "flex items-center gap-4 w-full text-center focus:outline-hidden focus:bg-alpha-black-25 hover:bg-alpha-black-25 border border-transparent block px-2 rounded-lg p-2" do %>
|
||||
<span style="background-color: color-mix(in srgb, #F79009 10%, white);" class="flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg border border-alpha-black-25">
|
||||
<%= lucide_icon("download", style: "color: #F79009", class: "w-5 h-5") %>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
<%= render layout: "accounts/new/container", locals: { title: t(".title"), back_path: new_account_path } do %>
|
||||
<div class="text-sm">
|
||||
<%= link_to path, 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 %>
|
||||
<%= link_to path, class: "flex items-center gap-4 w-full text-center focus:outline-hidden focus:bg-gray-50 border border-transparent focus:border focus:border-gray-200 px-2 hover:bg-gray-50 rounded-lg p-2" do %>
|
||||
<span class="flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg bg-alpha-black-50 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.02)]">
|
||||
<%= lucide_icon("keyboard", class: "text-gray-500 w-5 h-5") %>
|
||||
</span>
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
|
||||
<% if us_link_token %>
|
||||
<%# Default US-only Link %>
|
||||
<button data-controller="plaid" data-action="plaid#open modal#close" data-plaid-region-value="us" data-plaid-link-token-value="<%= us_link_token %>" 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">
|
||||
<button data-controller="plaid" data-action="plaid#open modal#close" data-plaid-region-value="us" data-plaid-link-token-value="<%= us_link_token %>" class="flex items-center gap-4 w-full text-center focus:outline-hidden focus:bg-gray-50 border border-transparent focus:border focus:border-gray-200 px-2 hover:bg-gray-50 rounded-lg p-2">
|
||||
<span class="flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg bg-alpha-black-50 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.02)]">
|
||||
<%= lucide_icon("link-2", class: "text-gray-500 w-5 h-5") %>
|
||||
</span>
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
|
||||
<%# EU Link %>
|
||||
<% if eu_link_token %>
|
||||
<button data-controller="plaid" data-action="plaid#open modal#close" data-plaid-region-value="eu" data-plaid-link-token-value="<%= eu_link_token %>" 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">
|
||||
<button data-controller="plaid" data-action="plaid#open modal#close" data-plaid-region-value="eu" data-plaid-link-token-value="<%= eu_link_token %>" class="flex items-center gap-4 w-full text-center focus:outline-hidden focus:bg-gray-50 border border-transparent focus:border focus:border-gray-200 px-2 hover:bg-gray-50 rounded-lg p-2">
|
||||
<span class="flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg bg-alpha-black-50 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.02)]">
|
||||
<%= lucide_icon("link-2", class: "text-gray-500 w-5 h-5") %>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
|
||||
<details class="group space-y-2" open>
|
||||
<summary class="flex list-none items-center justify-between rounded-xl px-3 py-2
|
||||
text-xs font-medium uppercase text-gray-500 bg-gray-25 focus-visible:outline-none">
|
||||
text-xs font-medium uppercase text-gray-500 bg-gray-25 focus-visible:outline-hidden">
|
||||
<h4>Overview</h4>
|
||||
<%= lucide_icon "chevron-down",
|
||||
class: "group-open:transform group-open:rotate-180 text-gray-500 w-5" %>
|
||||
|
|
@ -96,7 +96,7 @@
|
|||
|
||||
<details class="group space-y-2" open>
|
||||
<summary class="flex list-none items-center justify-between rounded-xl px-3 py-2
|
||||
text-xs font-medium uppercase text-gray-500 bg-gray-25 focus-visible:outline-none">
|
||||
text-xs font-medium uppercase text-gray-500 bg-gray-25 focus-visible:outline-hidden">
|
||||
<h4>Recent Transactions</h4>
|
||||
<%= lucide_icon "chevron-down",
|
||||
class: "group-open:transform group-open:rotate-180 text-gray-500 w-5" %>
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
<div class="flex flex-wrap gap-x-2.5 gap-y-1 text-xs">
|
||||
<% income_categories.each do |item| %>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<div class="w-2.5 h-2.5 rounded-full flex-shrink-0" style="background-color: <%= item.category.color %>"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full shrink-0" style="background-color: <%= item.category.color %>"></div>
|
||||
<span class="text-gray-500"><%= item.category.name %></span>
|
||||
<span class="text-gray-900"><%= number_to_percentage(item.percentage, precision: 0) %></span>
|
||||
</div>
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
<div class="flex flex-wrap gap-x-2.5 gap-y-1 text-xs">
|
||||
<% expense_categories.each do |item| %>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<div class="w-2.5 h-2.5 rounded-full flex-shrink-0" style="background-color: <%= item.category.color %>"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full shrink-0" style="background-color: <%= item.category.color %>"></div>
|
||||
<span class="text-gray-500"><%= item.category.name %></span>
|
||||
<span class="text-gray-900"><%= number_to_percentage(item.percentage, precision: 0) %></span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,11 +9,11 @@
|
|||
<div class="flex items-center space-x-2 px-2 py-2 text-white gap-4">
|
||||
<% if pending_session.present? %>
|
||||
<p class="text-xs max-w-3xl text-right">Maybe support staff has requested access to your account (likely to help you with a support request). If you approve the request, all activity they take will be logged for security and audit purposes.</p>
|
||||
<%= button_to "Approve", approve_impersonation_session_path(pending_session), method: :put, class: "inline-flex items-center px-3 py-1.5 border border-transparent text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500" %>
|
||||
<%= button_to "Reject", reject_impersonation_session_path(pending_session), method: :put, class: "inline-flex items-center px-3 py-1.5 border border-transparent text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500" %>
|
||||
<%= button_to "Approve", approve_impersonation_session_path(pending_session), method: :put, class: "inline-flex items-center px-3 py-1.5 border border-transparent text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-green-500" %>
|
||||
<%= button_to "Reject", reject_impersonation_session_path(pending_session), method: :put, class: "inline-flex items-center px-3 py-1.5 border border-transparent text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-red-500" %>
|
||||
<% elsif in_progress_session.present? %>
|
||||
<p class="text-xs max-w-3xl text-right">Someone from the Maybe Finance team is currently viewing your data. You may end the session at any time.</p>
|
||||
<%= button_to "End Session", complete_impersonation_session_path(in_progress_session), method: :put, class: "inline-flex items-center px-3 py-1.5 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" %>
|
||||
<%= button_to "End Session", complete_impersonation_session_path(in_progress_session), method: :put, class: "inline-flex items-center px-3 py-1.5 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" %>
|
||||
<% else %>
|
||||
<p class="text-xs max-w-3xl text-right text-red-500">Something went wrong. Please contact us.</p>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -13,8 +13,8 @@
|
|||
<div class="text-sm">
|
||||
Impersonating: <span class="font-semibold text-red-400"><%= Current.impersonated_user.email %></span>
|
||||
</div>
|
||||
<%= button_to "Leave", leave_impersonation_sessions_path, method: :delete, class: "items-center px-3 py-1.5 border border-transparent text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500" %>
|
||||
<%= button_to "Terminate", complete_impersonation_session_path(Current.session.active_impersonator_session), method: :put, class: "items-center px-3 py-1.5 border border-transparent text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500" %>
|
||||
<%= button_to "Leave", leave_impersonation_sessions_path, method: :delete, class: "items-center px-3 py-1.5 border border-transparent text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-red-500" %>
|
||||
<%= button_to "Terminate", complete_impersonation_session_path(Current.session.active_impersonator_session), method: :put, class: "items-center px-3 py-1.5 border border-transparent text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-red-500" %>
|
||||
</div>
|
||||
<% else %>
|
||||
<% if Current.true_user.impersonator_support_sessions.in_progress.any? %>
|
||||
|
|
@ -26,13 +26,13 @@
|
|||
{ prompt: "Join a session" },
|
||||
{ class: "rounded-md text-sm border-0 focus:ring-0 ring-0 text-black font-mono" } %>
|
||||
<%= f.submit "Join",
|
||||
class: "inline-flex items-center px-3 py-1.5 border border-transparent text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500" %>
|
||||
class: "inline-flex items-center px-3 py-1.5 border border-transparent text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-red-500" %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
<%= form_with model: ImpersonationSession.new, class: "flex items-center space-x-2" do |f| %>
|
||||
<%= f.text_field :impersonated_id, class: "rounded-md text-sm border-0 focus:ring-0 ring-0 text-black font-mono w-96", placeholder: "UUID", autocomplete: "off" %>
|
||||
<%= f.submit "Request Impersonation", class: "inline-flex items-center px-3 py-1.5 border border-transparent text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500" %>
|
||||
<%= f.submit "Request Impersonation", class: "inline-flex items-center px-3 py-1.5 border border-transparent text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-red-500" %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
<%= content_for :previous_path, import_configuration_path(@import) %>
|
||||
|
||||
<div class="space-y-4 mx-auto max-w-screen-lg">
|
||||
<div class="space-y-4 mx-auto max-w-5xl">
|
||||
<div class="text-center space-y-2 max-w-[400px] mx-auto mb-4">
|
||||
<h2 class="text-3xl text-gray-900 font-medium"><%= t(".title") %></h2>
|
||||
<p class="text-gray-500 text-sm"><%= t(".description") %></p>
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
</div>
|
||||
|
||||
<div class="fixed bottom-0 left-1/2 -translate-x-1/2 w-full p-12">
|
||||
<div class="border border-alpha-black-100 rounded-lg p-3 max-w-screen-sm mx-auto bg-white shadow-xs">
|
||||
<div class="border border-alpha-black-100 rounded-lg p-3 max-w-2xl mx-auto bg-white shadow-xs">
|
||||
<%= render "application/pagination", pagy: @pagy %>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mx-auto max-w-screen-lg my-12">
|
||||
<div class="mx-auto max-w-5xl my-12">
|
||||
<%= render "imports/table", headers: @import.csv_headers, rows: @import.csv_sample, caption: "Sample data from your uploaded CSV" %>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -28,6 +28,6 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="max-w-screen-md mx-auto flex flex-col items-center">
|
||||
<div class="max-w-3xl mx-auto flex flex-col items-center">
|
||||
<%= render partial: "import/confirms/mappings", locals: { import: @import, mapping_class: step_mapping_class, step_idx: step_idx } %>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-alpha-black-25 rounded-xl p-1 mt-5 mx-auto max-w-screen-xl">
|
||||
<div class="bg-alpha-black-25 rounded-xl p-1 mt-5 mx-auto max-w-7xl">
|
||||
<div class="text-gray-500 p-2 mb-2">
|
||||
<div class="flex gap-2 mb-2">
|
||||
<%= lucide_icon("info", class: "w-5 h-5 shrink-0") %>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<p class="text-gray-500 text-sm"><%= t(".description") %></p>
|
||||
</div>
|
||||
|
||||
<div class="mx-auto max-w-screen-sm space-y-4">
|
||||
<div class="mx-auto max-w-2xl space-y-4">
|
||||
<div class="bg-gray-25 rounded-xl p-1 space-y-1">
|
||||
<div class="flex justify-between items-center text-xs font-medium text-gray-500 uppercase px-5 py-3">
|
||||
<p>item</p>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<div>
|
||||
<span data-clipboard-target="source" class="text-sm font-medium"><%= invite_code.token %></span>
|
||||
</div>
|
||||
<button data-action="clipboard#copy" class="flex-shrink-0 z-10 inline-flex items-center px-1 text-sm text-gray-500 font-sm text-center" type="button">
|
||||
<button data-action="clipboard#copy" class="shrink-0 z-10 inline-flex items-center px-1 text-sm text-gray-500 font-sm text-center" type="button">
|
||||
<span data-clipboard-target="iconDefault">
|
||||
<%= lucide_icon "copy", class: "w-5 h-5" %>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -95,7 +95,7 @@
|
|||
<span class="font-bold tracking-wide">•</span>
|
||||
|
||||
<%= form_with url: list_accounts_path, method: :get, data: { controller: Current.family.accounts.any? ? "auto-submit-form" : nil, turbo_frame: "account-list" } do |form| %>
|
||||
<%= period_select form: form, selected: "last_30_days", classes: "w-full border-none pl-2 pr-7 text-xs bg-transparent gap-1 cursor-pointer font-semibold tracking-wide focus:outline-none focus:ring-0" %>
|
||||
<%= period_select form: form, selected: "last_30_days", classes: "w-full border-none pl-2 pr-7 text-xs bg-transparent gap-1 cursor-pointer font-semibold tracking-wide focus:outline-hidden focus:ring-0" %>
|
||||
<% end %>
|
||||
</div>
|
||||
<%= link_to new_account_path, id: "sidebar-new-account", class: "block hover:bg-gray-100 font-semibold text-gray-900 flex items-center rounded p-1", title: t(".new_account"), data: { turbo_frame: "modal" } do %>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<%= csrf_meta_tags %>
|
||||
<%= csp_meta_tag %>
|
||||
|
||||
<%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
|
||||
<%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>
|
||||
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
|
||||
|
||||
<%= javascript_include_tag "https://cdn.plaid.com/link/v2/stable/link-initialize.js" %>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
<% end %>
|
||||
</header>
|
||||
|
||||
<main class="flex-grow px-8 pt-12 pb-32 overflow-y-auto">
|
||||
<main class="grow px-8 pt-12 pb-32 overflow-y-auto">
|
||||
<%= yield %>
|
||||
</main>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
<% end %>
|
||||
</header>
|
||||
|
||||
<main class="flex-grow px-8 pt-12 pb-32 overflow-y-auto">
|
||||
<main class="grow px-8 pt-12 pb-32 overflow-y-auto">
|
||||
<%= yield %>
|
||||
</main>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
<div class="space-y-4 flex flex-col h-full">
|
||||
<h1 class="text-gray-900 text-xl font-medium mb-4"><%= t(".title") %></h1>
|
||||
<div class="bg-white shadow-xs border border-alpha-black-25 rounded-xl p-4 flex-grow overflow-y-auto">
|
||||
<div class="bg-white shadow-xs border border-alpha-black-25 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">
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
</head>
|
||||
|
||||
<body class="subpixel-antialiased h-full bg-black text-white flex flex-col bg-top bg-no-repeat bg-cover" style="background-image: url('<%= asset_path("bg-grid.png") %>');">
|
||||
<div class="flex-grow flex items-center justify-center p-4 sm:p-6 md:p-8">
|
||||
<div class="grow flex items-center justify-center p-4 sm:p-6 md:p-8">
|
||||
<div class="w-full max-w-sm mx-auto text-center rounded-lg p-6">
|
||||
<%= image_tag "logo-squircle.svg", alt: "Maybe Logo", class: "w-16 h-16 sm:w-18 sm:h-18 mx-auto mb-6 sm:mb-8" %>
|
||||
<h1 class="text-2xl font-normal my-4">Maybe Early Access</h1>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
<%= tag.div id: dom_id(plaid_item) do %>
|
||||
<details open class="group bg-white p-4 border border-alpha-black-25 shadow-xs rounded-xl">
|
||||
<summary class="flex items-center justify-between gap-2 focus-visible:outline-none">
|
||||
<summary class="flex items-center justify-between gap-2 focus-visible:outline-hidden">
|
||||
<div class="flex items-center gap-2">
|
||||
<%= lucide_icon "chevron-right", class: "group-open:transform group-open:rotate-90 text-gray-500 w-5" %>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<%= lucide_icon("arrow-left") %>
|
||||
</div>
|
||||
<% end %>
|
||||
<div class="<%= "flex-grow" if direction == "next" %> <%= "text-right" if direction == "previous" %>">
|
||||
<div class="<%= "grow" if direction == "next" %> <%= "text-right" if direction == "previous" %>">
|
||||
<span class="block text-sm text-gray-500"><%= t(".#{direction}") %></span>
|
||||
<span class="block text-sm font-medium text-gray-900"><%= title %></span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
<details class="group space-y-2" <%= "open" if open %>>
|
||||
<summary class="flex list-none items-center justify-between rounded-xl px-3 py-2 text-xs font-medium
|
||||
uppercase text-gray-500 bg-gray-25 focus-visible:outline-none">
|
||||
uppercase text-gray-500 bg-gray-25 focus-visible:outline-hidden">
|
||||
<h3><%= title %></h3>
|
||||
<%= lucide_icon "chevron-down",
|
||||
class: "group-open:transform group-open:rotate-180 text-gray-500 w-5 h-5" %>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<%# locals: (content:, reload_on_close: false) %>
|
||||
|
||||
<%= turbo_frame_tag "drawer" do %>
|
||||
<dialog class="bg-white border border-alpha-black-25 rounded-2xl max-w-[480px] w-full shadow-xs h-full mt-4 mr-4 focus-visible:outline-none"
|
||||
<dialog class="ml-auto bg-white border border-alpha-black-25 rounded-2xl max-w-[480px] w-full shadow-xs h-full mt-4 mr-4 focus-visible:outline-hidden"
|
||||
data-controller="modal"
|
||||
data-action="click->modal#clickOutside"
|
||||
data-modal-reload-on-close-value="<%= reload_on_close %>">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<%# locals: (content:, classes:) -%>
|
||||
<%= turbo_frame_tag "modal" do %>
|
||||
<dialog class="bg-white border border-alpha-black-25 rounded-2xl max-w-[580px] w-min-content shadow-xs h-fit <%= classes %>" data-controller="modal" data-action="click->modal#clickOutside">
|
||||
<dialog class="m-auto bg-white border border-alpha-black-25 rounded-2xl max-w-[580px] w-min-content shadow-xs h-fit <%= classes %>" data-controller="modal" data-action="click->modal#clickOutside">
|
||||
<div class="flex flex-col">
|
||||
<%= content %>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,9 +8,6 @@ pin_all_from "app/javascript/controllers", under: "controllers"
|
|||
pin_all_from "app/javascript/services", under: "services", to: "services"
|
||||
pin "@github/hotkey", to: "@github--hotkey.js" # @3.1.0
|
||||
|
||||
# Custom namespace for local files
|
||||
pin "@maybe/tailwindcolors", to: "tailwindColors.js"
|
||||
|
||||
# D3 packages
|
||||
pin "d3" # @7.8.5
|
||||
pin "d3-array" # @3.2.4
|
||||
|
|
|
|||
|
|
@ -1,96 +0,0 @@
|
|||
const defaultTheme = require("tailwindcss/defaultTheme");
|
||||
const colors = require("../app/javascript/tailwindColors");
|
||||
|
||||
module.exports = {
|
||||
content: [
|
||||
"./public/*.html",
|
||||
"./app/helpers/**/*.rb",
|
||||
"./app/javascript/**/*.js",
|
||||
"./app/views/**/*.{erb,haml,html,slim}",
|
||||
],
|
||||
theme: {
|
||||
colors,
|
||||
boxShadow: {
|
||||
none: "0 0 #0000",
|
||||
inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)",
|
||||
xs: "0px 1px 2px 0px rgba(11, 11, 11, 0.05)",
|
||||
sm: "0px 1px 2px 0px rgba(11, 11, 11, 0.06), 0px 1px 3px 0px rgba(11, 11, 11, 0.10)",
|
||||
md: "0px 2px 4px -2px rgba(11, 11, 11, 0.06), 0px 4px 8px -2px rgba(11, 11, 11, 0.10)",
|
||||
lg: "0px 4px 6px -2px rgba(11, 11, 11, 0.03), 0px 12px 16px -4px rgba(11, 11, 11, 0.08)",
|
||||
xl: "0px 8px 8px -4px rgba(11, 11, 11, 0.03), 0px 20px 24px -4px rgba(11, 11, 11, 0.08)",
|
||||
"2xl": "0px 24px 48px -12px rgba(11, 11, 11, 0.12)",
|
||||
"3xl": "0px 32px 64px -12px rgba(11, 11, 11, 0.14)",
|
||||
},
|
||||
borderRadius: {
|
||||
none: "0",
|
||||
full: "9999px",
|
||||
xs: "2px",
|
||||
sm: "4px",
|
||||
md: "8px",
|
||||
DEFAULT: "8px",
|
||||
lg: "10px",
|
||||
xl: "12px",
|
||||
"2xl": "16px",
|
||||
"3xl": "24px",
|
||||
},
|
||||
extend: {
|
||||
fontFamily: {
|
||||
display: ["Inter var", ...defaultTheme.fontFamily.sans],
|
||||
},
|
||||
fontSize: {
|
||||
"2xs": ".625rem",
|
||||
},
|
||||
spacing: {
|
||||
'40': '10rem',
|
||||
},
|
||||
keyframes: {
|
||||
"appear-then-fade": {
|
||||
"0%,100%": { opacity: 0 },
|
||||
"5%,90%": { opacity: 1 },
|
||||
},
|
||||
"stroke-fill": {
|
||||
to: { "stroke-dashoffset": 0 },
|
||||
},
|
||||
},
|
||||
typography: (theme) => ({
|
||||
DEFAULT: {
|
||||
css: {
|
||||
maxWidth: "none",
|
||||
h2: {
|
||||
fontSize: theme("fontSize.xl"),
|
||||
fontWeight: theme("fontWeight.medium"),
|
||||
},
|
||||
h3: {
|
||||
fontSize: theme("fontSize.lg"),
|
||||
fontWeight: theme("fontWeight.medium"),
|
||||
},
|
||||
li: {
|
||||
margin: 0,
|
||||
},
|
||||
details: {
|
||||
borderRadius: "12px",
|
||||
marginBottom: "0.875rem",
|
||||
marginTop: "0.875rem",
|
||||
},
|
||||
summary: {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
columnGap: "0.25rem",
|
||||
},
|
||||
video: {
|
||||
margin: 0,
|
||||
borderBottomLeftRadius: "12px",
|
||||
borderBottomRightRadius: "12px",
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
require("@tailwindcss/forms"),
|
||||
require("@tailwindcss/aspect-ratio"),
|
||||
require("@tailwindcss/typography"),
|
||||
require("@tailwindcss/container-queries"),
|
||||
],
|
||||
};
|
||||
2
db/schema.rb
generated
2
db/schema.rb
generated
|
|
@ -101,7 +101,7 @@ ActiveRecord::Schema[7.2].define(version: 2025_02_11_161238) do
|
|||
t.decimal "balance", precision: 19, scale: 4
|
||||
t.string "currency"
|
||||
t.boolean "is_active", default: true, null: false
|
||||
t.virtual "classification", type: :string, as: "\nCASE\n WHEN ((accountable_type)::text = ANY (ARRAY[('Loan'::character varying)::text, ('CreditCard'::character varying)::text, ('OtherLiability'::character varying)::text])) THEN 'liability'::text\n ELSE 'asset'::text\nEND", stored: true
|
||||
t.virtual "classification", type: :string, as: "\nCASE\n WHEN ((accountable_type)::text = ANY ((ARRAY['Loan'::character varying, 'CreditCard'::character varying, 'OtherLiability'::character varying])::text[])) THEN 'liability'::text\n ELSE 'asset'::text\nEND", stored: true
|
||||
t.uuid "import_id"
|
||||
t.uuid "plaid_account_id"
|
||||
t.boolean "scheduled_for_deletion", default: false
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue