diff --git a/assets/scss/_surfaces.scss b/assets/scss/_surfaces.scss index ba23dd2..68bf92e 100644 --- a/assets/scss/_surfaces.scss +++ b/assets/scss/_surfaces.scss @@ -34,6 +34,24 @@ --surface-accent: var(--color-border-medium); --surface-deep: var(--color-text-secondary); } + &--investment { + --surface-bg: rgba(14, 165, 233, 0.12); + --surface-ink: var(--color-text-primary); + --surface-accent: rgba(14, 165, 233, 0.5); + --surface-deep: #0284c7; + } + &--loan { + --surface-bg: rgba(217, 119, 6, 0.12); + --surface-ink: var(--color-text-primary); + --surface-accent: rgba(217, 119, 6, 0.5); + --surface-deep: #b45309; + } + &--gift { + --surface-bg: rgba(124, 58, 237, 0.12); + --surface-ink: var(--color-text-primary); + --surface-accent: rgba(124, 58, 237, 0.5); + --surface-deep: #6d28d9; + } } // In dark mode the surface bg becomes a subtle tint so it sits on the page @@ -65,6 +83,21 @@ --surface-accent: var(--color-border-medium); --surface-deep: var(--color-text-secondary); } + .surface--investment { + --surface-bg: rgba(14, 165, 233, 0.16); + --surface-accent: rgba(56, 189, 248, 0.5); + --surface-deep: #38bdf8; + } + .surface--loan { + --surface-bg: rgba(217, 119, 6, 0.16); + --surface-accent: rgba(251, 191, 36, 0.5); + --surface-deep: #fbbf24; + } + .surface--gift { + --surface-bg: rgba(124, 58, 237, 0.16); + --surface-accent: rgba(167, 139, 250, 0.5); + --surface-deep: #a78bfa; + } } .display-1 { diff --git a/assets/scss/_transaction-form.scss b/assets/scss/_transaction-form.scss index 54a2161..340a117 100644 --- a/assets/scss/_transaction-form.scss +++ b/assets/scss/_transaction-form.scss @@ -675,6 +675,50 @@ font-size: $font-size-sm; } +.intent-pills { + display: flex; + flex-wrap: wrap; + gap: 8px; +} + +.intent-pill { + display: inline-flex; + align-items: center; + gap: 6px; + padding: 8px 14px; + border: 1px solid $border-color; + border-radius: 999px; + background: $bg-white; + color: $text-secondary; + font-size: $font-size-sm; + font-weight: $font-medium; + cursor: pointer; + transition: + background 0.15s ease, + border-color 0.15s ease, + color 0.15s ease; + + &:hover { + border-color: $primary; + color: $text-primary; + } + + .intent-pill-icon { + width: 16px; + height: 16px; + } +} + +.intent-pill--active { + background: $primary; + border-color: $primary; + color: white; + + &:hover { + color: white; + } +} + .wallet-field-wrapper, .group-field-wrapper { position: relative; diff --git a/components/TSidebar.vue b/components/TSidebar.vue index 55135e6..b304c57 100644 --- a/components/TSidebar.vue +++ b/components/TSidebar.vue @@ -10,7 +10,7 @@ }" >