andrew
/
finnow
1
0
Fork 0
Code Issues 1 Pull Requests Actions Releases Activity

Improved styling.
Build and Deploy Web App / build-and-deploy (push) Successful in 20s Details

This commit is contained in:
andrewlalis 2025-09-07 09:46:48 -04:00
parent e5a8b94211
commit cf679c1c6e
14 changed files with 106 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
web-app/src/assets/main.css
View File

@ -1,43 +1,28 @@
@import url('styles/text.css');
@import url('@/assets/styles/fonts.css');
@import url('@/assets/styles/text.css');
:root {
--theme-primary: #01bbff;
--theme-secondary: #00759f;
--theme-primary: #113188;
--theme-secondary: #3b6bd3;
--theme-tertiary: #01ffc4;
--bg-primary: #00131a;
--bg-secondary: #003447;
--bg-page: #000b0f;
--bg: rgb(20, 20, 20);
--bg-darker: rgb(0, 0, 0);
--bg-lighter: rgb(41, 41, 41);
--text: rgb(247, 247, 247);
--text-muted: gray;
--positive: rgb(30, 197, 14);
--negative: rgb(253, 28, 28);
}
@font-face {
font-family: 'OpenSans';
src: url('fonts/open-sans/OpenSans-VariableFont_wdth,wght.woff2');
font-style: normal;
}
@font-face {
font-family: 'OpenSans';
src: url('fonts/open-sans/OpenSans-Italic-VariableFont_wdth,wght.woff2');
font-style: italic;
}
@font-face {
font-family: 'PlaywriteNL';
src: url('fonts/playwrite-nl/PlaywriteNL-VariableFont_wght.woff2');
font-style: italic;
--positive: rgb(59, 219, 44);
--negative: rgb(253, 52, 52);
--warning: rgb(255, 187, 0);
}
body {
padding: 0;
margin: 0;
font-family: 'OpenSans', sans-serif;
background-color: var(--bg-primary);
color: var(--theme-primary);
background-color: var(--bg);
color: var(--text);
}
a {

17
web-app/src/assets/styles/fonts.css Normal file
View File

@ -0,0 +1,17 @@
@font-face {
font-family: 'OpenSans';
src: url('@/assets/fonts/open-sans/OpenSans-VariableFont_wdth,wght.woff2');
font-style: normal;
}
@font-face {
font-family: 'OpenSans';
src: url('@/assets/fonts/open-sans/OpenSans-Italic-VariableFont_wdth,wght.woff2');
font-style: italic;
}
@font-face {
font-family: 'PlaywriteNL';
src: url('@/assets/fonts/playwrite-nl/PlaywriteNL-VariableFont_wght.woff2');
font-style: italic;
}

51
web-app/src/components/AccountCard.vue
View File

@ -4,6 +4,7 @@ import { formatMoney } from '@/api/data';
import { getSelectedProfile } from '@/api/profile';
import { computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import AppBadge from './common/AppBadge.vue';
const router = useRouter()
const route = useRoute()
@ -35,13 +36,13 @@ function goToAccount() {
<!-- A top row for the name on the left, and balance on the right. -->
<div class="account-card-top-row">
<div>
<span class="account-card-name">{{ account.name }}</span>
<span class="account-card-number-suffix">#{{ account.numberSuffix }}</span>
<span class="font-bold" style="margin-right: 0.5rem">{{ account.name }}</span>
<span class="font-mono font-size-xsmall">#{{ account.numberSuffix }}</span>
</div>
<div class="account-card-balance" :class="{
'account-card-balance-positive': isBalancePositive,
'account-card-balance-negative': isBalanceNegative
<div class="font-mono font-size-small" :class="{
'text-positive': isBalancePositive,
'text-negative': isBalanceNegative
}">
<span v-if="account.currentBalance !== null">
{{ formatMoney(account.currentBalance, account.currency) }}
@ -52,15 +53,13 @@ function goToAccount() {
</div>
<!-- A bottom row for other attributes. -->
<div>
<span class="account-card-badge">
{{ accountType.name }}
</span>
<AppBadge size="sm">{{ accountType.name }}</AppBadge>
</div>
</div>
</template>
<style lang="css">
.account-card {
background-color: var(--bg-primary);
background-color: var(--bg);
padding: 0.5rem;
border-radius: 0.5rem;
margin: 0.5rem 0;
@ -68,43 +67,11 @@ function goToAccount() {
}
.account-card:hover {
background-color: var(--bg-page);
background-color: var(--bg-darker);
}
.account-card-top-row {
display: flex;
justify-content: space-between;
}
.account-card-name {
font-size: 1rem;
font-weight: 600;
margin-right: 0.5rem;
}
.account-card-number-suffix {
font-size: 0.8rem;
font-family: monospace;
}
.account-card-balance {
font-size: 0.9rem;
font-family: monospace;
color: white;
}
.account-card-balance-positive {
color: green;
}
.account-card-balance-negative {
color: red;
}
.account-card-badge {
font-size: 0.75rem;
padding: 0.1rem 0.25rem;
background-color: var(--bg-secondary);
border-radius: 0.3rem;
}
</style>

4
web-app/src/components/CategoryDisplayItem.vue
View File

@ -69,10 +69,10 @@ const canExpand = computed(() => props.category.children.length > 0)
}
.category-display-item-bg-1 {
background-color: var(--bg-primary);
background-color: var(--bg);
}
.category-display-item-bg-2 {
background-color: var(--bg-secondary);
background-color: var(--bg-lighter);
}
</style>

13
web-app/src/components/CategoryLabel.vue
View File

@ -1,6 +1,7 @@
<script setup lang="ts">
import { getSelectedProfile } from '@/api/profile';
import { useRoute, useRouter } from 'vue-router';
import AppBadge from './common/AppBadge.vue';
interface CategoryInfo {
name: string
@ -19,20 +20,12 @@ function onClicked() {
}
</script>
<template>
<span class="category-label" @click="onClicked()" :style="{ 'cursor': clickable ? 'pointer' : 'inherit' }">
<AppBadge @click="onClicked()" :style="{ 'cursor': clickable ? 'pointer' : 'inherit' }">
<div class="category-label-color" :style="{ 'background-color': '#' + category.color }"></div>
{{ category.name }}
</span>
</AppBadge>
</template>
<style lang="css">
.category-label {
margin: 0.25rem;
padding: 0.1rem 0.25rem;
background-color: var(--bg-secondary);
border-radius: 0.4rem;
font-size: 14px;
}
.category-label-color {
width: 0.75rem;
height: 0.75rem;

2
web-app/src/components/HomeModule.vue
View File

@ -20,7 +20,7 @@ defineProps<{ title: string }>()
min-width: 300px;
min-height: 200px;
flex-grow: 1;
background-color: var(--bg-secondary);
background-color: var(--bg-lighter);
border-radius: 0.5rem;
padding: 0.5rem;
display: flex;

18
web-app/src/components/TagLabel.vue
View File

@ -1,31 +1,25 @@
<script setup lang="ts">
import AppBadge from './common/AppBadge.vue';
defineProps<{ tag: string, deletable?: boolean }>()
defineEmits<{ deleted: void }>()
</script>
<template>
<span class="tag-label">
<AppBadge>
<span class="tag-label-hashtag">#</span>
{{ tag }}
<font-awesome-icon v-if="deletable" icon="fa-x" class="tag-label-delete"
@click="$emit('deleted')"></font-awesome-icon>
</span>
</AppBadge>
</template>
<style lang="css">
.tag-label {
margin: 0.25rem;
padding: 0.1rem 0.25rem;
background-color: var(--bg-secondary);
border-radius: 0.4rem;
font-size: 14px;
}
.tag-label-hashtag {
color: rgb(82, 82, 102);
color: var(--text-muted);
margin-right: -0.2rem;
}
.tag-label-delete {
color: gray;
color: var(--text-muted);
cursor: pointer;
}
</style>

15
web-app/src/components/TransactionCard.vue
View File

@ -5,6 +5,7 @@ import type { TransactionsListItem } from '@/api/transaction';
import { useRoute, useRouter } from 'vue-router';
import CategoryLabel from './CategoryLabel.vue';
import { computed, type Ref } from 'vue';
import AppBadge from './common/AppBadge.vue';
const router = useRouter()
const route = useRoute()
@ -61,13 +62,13 @@ function goToTransaction() {
<!-- Bottom row contains other links. -->
<div>
<CategoryLabel :category="tx.category" v-if="tx.category" style="margin-left: 0" />
<span class="transaction-card-vendor-label" v-if="tx.vendor">{{ tx.vendor.name }}</span>
<AppBadge v-if="tx.vendor">{{ tx.vendor.name }}</AppBadge>
</div>
</div>
</template>
<style lang="css">
.transaction-card {
background-color: var(--bg-primary);
background-color: var(--bg);
padding: 0.5rem;
border-radius: 0.5rem;
margin: 0.5rem 0;
@ -75,7 +76,7 @@ function goToTransaction() {
}
.transaction-card:hover {
background-color: var(--bg-page);
background-color: var(--bg-darker);
}
.transaction-card-top-row {
@ -87,12 +88,4 @@ function goToTransaction() {
margin: 0.25rem 0;
font-size: 0.9rem;
}
.transaction-card-vendor-label {
background-color: var(--bg-secondary);
border-radius: 0.3rem;
padding: 0.1rem 0.2rem;
font-size: 0.9rem;
}
</style>

39
web-app/src/components/common/AppBadge.vue Normal file
View File

@ -0,0 +1,39 @@
<script setup lang="ts">
type BadgeSize = "sm" | "md" | "lg";
type BadgeStyle = "normal" | "positive" | "warning" | "negative"
defineProps<{ size?: BadgeSize, color?: BadgeStyle }>()
</script>
<template>
<span class="app-badge" :class="{
'app-badge-sm': size === 'sm',
'app-badge-lg': size === 'lg'
}">
<slot></slot>
</span>
</template>
<style lang="css">
.app-badge {
padding: 0.1rem 0.5rem;
border-radius: 0.5rem;
background-color: var(--bg-lighter);
font-size: 0.9rem;
border: 1px solid var(--text-muted);
}
.app-badge+.app-badge {
margin-left: 0.25rem;
}
.app-badge-sm {
padding: 0.1rem 0.25rem;
border-radius: 0.3rem;
font-size: 0.75rem;
}
.app-badge-lg {
padding: 0.3rem 0.6rem;
border-radius: 0.6rem;
font-size: 1rem;
}
</style>

2
web-app/src/components/common/AppPage.vue
View File

@ -14,7 +14,7 @@ defineProps<{ title: string }>()
margin-right: auto;
padding: 0.5rem;
padding-bottom: 1rem;
background-color: var(--bg-page);
background-color: var(--bg-lighter);
border-bottom-left-radius: 2rem;
border-bottom-right-radius: 2rem;

2
web-app/src/components/common/ModalWrapper.vue
View File

@ -37,7 +37,7 @@ defineExpose({ show, close })
</template>
<style lang="css">
.app-modal-dialog {
background-color: var(--bg-secondary);
background-color: var(--bg-lighter);
color: inherit;
border-radius: 1rem;
border-width: 0;

9
web-app/src/components/history/AccountHistory.vue
View File

@ -39,7 +39,7 @@ function asJE(i: AccountHistoryItem): AccountHistoryJournalEntryItem {
<div>
<div v-for="item in historyItems" :key="item.timestamp" class="history-item">
<div class="history-item-header">
<div class="history-item-header-timestamp">{{ new Date(item.timestamp).toLocaleString() }}</div>
<div class="font-mono font-size-xsmall">{{ new Date(item.timestamp).toLocaleString() }}</div>
<div>{{ item.type }}</div>
</div>
@ -55,7 +55,7 @@ function asJE(i: AccountHistoryItem): AccountHistoryJournalEntryItem {
margin-top: 1rem;
margin-bottom: 1rem;
padding: 0.25rem 1rem;
background-color: var(--bg-secondary);
background-color: var(--bg-lighter);
border-radius: 1rem;
}
@ -64,11 +64,6 @@ function asJE(i: AccountHistoryItem): AccountHistoryJournalEntryItem {
text-align: right;
}
.history-item-header-timestamp {
font-family: monospace;
font-size: 12px;
}
.history-item-content {
padding: 0.5rem 0;
}

4
web-app/src/pages/ProfilesPage.vue
View File

@ -69,7 +69,7 @@ async function addProfile() {
display: flex;
justify-content: space-between;
padding: 0.5em;
background-color: var(--bg-secondary);
background-color: var(--bg);
border-radius: 1em;
margin-top: 1em;
margin-bottom: 1em;
@ -77,6 +77,6 @@ async function addProfile() {
}
.profile-card:hover {
background-color: var(--bg-primary);
background-color: var(--bg-darker);
}
</style>

24
web-app/src/pages/UserAccountLayout.vue
View File

@ -81,7 +81,7 @@ async function checkAuth() {
<style lang="css">
.app-header-bar {
background-color: var(--theme-primary);
color: var(--bg-primary);
color: var(--text);
display: flex;
justify-content: space-between;
align-items: center;
@ -97,42 +97,30 @@ async function checkAuth() {
}
.app-header-text:hover {
color: var(--theme-secondary);
color: var(--text-muted);
}
.app-logout-button {
cursor: pointer;
margin-right: 0.5em;
background-color: #0099d1;
background-color: var(--theme-secondary);
border-radius: 50%;
padding: 0.35rem;
}
.app-logout-button:hover {
color: var(--bg-secondary);
color: var(--text-muted);
}
.app-user-widget {
margin-right: 0.5em;
cursor: pointer;
background-color: #0099d1;
background-color: var(--theme-secondary);
border-radius: 50%;
padding: 0.35rem;
}
.app-user-widget:hover {
color: var(--bg-secondary);
}
.app-header-link {
font-weight: bold;
color: var(--bg-primary);
text-decoration: none;
margin: 0 0.5em 0 0.5em;
}
.app-header-link:hover {
color: var(--bg-secondary);
text-decoration: underline;
color: var(--text-muted);
}
</style>