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 @@ }" >
++ {{ t('Where your money came from and where it went, grouped by what it really was.') }} +
++ {{ + t( + 'Some amounts could not be converted to your default currency and were left out, so figures may be understated. Affected: {currencies}.', + { currencies: unconvertedCurrencies.join(', ') } + ) + }} +
+ +{{ signedMoney(position.net_worth_delta) }}
+ ++ {{ + t( + 'Real earnings, returns and gifts, minus real spend. Borrowed money and money parked in investments do not count.' + ) + }} +
+{{ money(position.total_net_worth) }}
+
+
{{ t('No data for this period yet.') }}
++ {{ t('Priced automatically from CoinGecko') }} ({{ form.external_ref }}) +
+{{ error }}
+ + +{{ t('Assets you own: crypto, stocks, property and more.') }}
+{{ money(totalValue, totalCurrency) }}
+{{ t('No holdings yet. Add Bitcoin, a stock, or any asset you own.') }}
+