From cf679c1c6e384fc2220e426df64adbdb50b3bd21 Mon Sep 17 00:00:00 2001
From: andrewlalis <andrewlalisofficial@gmail.com>
Date: Sun, 7 Sep 2025 09:46:48 -0400
Subject: [PATCH] Improved styling.

---
 web-app/src/assets/main.css                   | 41 +++++----------
 web-app/src/assets/styles/fonts.css           | 17 +++++++
 web-app/src/components/AccountCard.vue        | 51 ++++---------------
 .../src/components/CategoryDisplayItem.vue    |  4 +-
 web-app/src/components/CategoryLabel.vue      | 13 ++---
 web-app/src/components/HomeModule.vue         |  2 +-
 web-app/src/components/TagLabel.vue           | 18 +++----
 web-app/src/components/TransactionCard.vue    | 15 ++----
 web-app/src/components/common/AppBadge.vue    | 39 ++++++++++++++
 web-app/src/components/common/AppPage.vue     |  2 +-
 .../src/components/common/ModalWrapper.vue    |  2 +-
 .../src/components/history/AccountHistory.vue |  9 +---
 web-app/src/pages/ProfilesPage.vue            |  4 +-
 web-app/src/pages/UserAccountLayout.vue       | 24 +++------
 14 files changed, 106 insertions(+), 135 deletions(-)
 create mode 100644 web-app/src/assets/styles/fonts.css
 create mode 100644 web-app/src/components/common/AppBadge.vue

diff --git a/web-app/src/assets/main.css b/web-app/src/assets/main.css
index 3fd31ba..55e615e 100644
--- a/web-app/src/assets/main.css
+++ b/web-app/src/assets/main.css
@@ -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 {
diff --git a/web-app/src/assets/styles/fonts.css b/web-app/src/assets/styles/fonts.css
new file mode 100644
index 0000000..0c588d6
--- /dev/null
+++ b/web-app/src/assets/styles/fonts.css
@@ -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;
+}
diff --git a/web-app/src/components/AccountCard.vue b/web-app/src/components/AccountCard.vue
index 6a1a609..6e99d4e 100644
--- a/web-app/src/components/AccountCard.vue
+++ b/web-app/src/components/AccountCard.vue
@@ -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>
diff --git a/web-app/src/components/CategoryDisplayItem.vue b/web-app/src/components/CategoryDisplayItem.vue
index 404a2c7..a6f9ffd 100644
--- a/web-app/src/components/CategoryDisplayItem.vue
+++ b/web-app/src/components/CategoryDisplayItem.vue
@@ -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>
diff --git a/web-app/src/components/CategoryLabel.vue b/web-app/src/components/CategoryLabel.vue
index 7eac0a4..f4d4dc8 100644
--- a/web-app/src/components/CategoryLabel.vue
+++ b/web-app/src/components/CategoryLabel.vue
@@ -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;
diff --git a/web-app/src/components/HomeModule.vue b/web-app/src/components/HomeModule.vue
index c7e477b..77ca272 100644
--- a/web-app/src/components/HomeModule.vue
+++ b/web-app/src/components/HomeModule.vue
@@ -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;
diff --git a/web-app/src/components/TagLabel.vue b/web-app/src/components/TagLabel.vue
index 11dccff..2280902 100644
--- a/web-app/src/components/TagLabel.vue
+++ b/web-app/src/components/TagLabel.vue
@@ -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>
diff --git a/web-app/src/components/TransactionCard.vue b/web-app/src/components/TransactionCard.vue
index f01d774..9e28408 100644
--- a/web-app/src/components/TransactionCard.vue
+++ b/web-app/src/components/TransactionCard.vue
@@ -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>
diff --git a/web-app/src/components/common/AppBadge.vue b/web-app/src/components/common/AppBadge.vue
new file mode 100644
index 0000000..c9f7820
--- /dev/null
+++ b/web-app/src/components/common/AppBadge.vue
@@ -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>
diff --git a/web-app/src/components/common/AppPage.vue b/web-app/src/components/common/AppPage.vue
index 7f92c57..8ad8133 100644
--- a/web-app/src/components/common/AppPage.vue
+++ b/web-app/src/components/common/AppPage.vue
@@ -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;
diff --git a/web-app/src/components/common/ModalWrapper.vue b/web-app/src/components/common/ModalWrapper.vue
index 76f3612..a9cfb2f 100644
--- a/web-app/src/components/common/ModalWrapper.vue
+++ b/web-app/src/components/common/ModalWrapper.vue
@@ -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;
diff --git a/web-app/src/components/history/AccountHistory.vue b/web-app/src/components/history/AccountHistory.vue
index 7ed00b1..d10e007 100644
--- a/web-app/src/components/history/AccountHistory.vue
+++ b/web-app/src/components/history/AccountHistory.vue
@@ -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;
 }
diff --git a/web-app/src/pages/ProfilesPage.vue b/web-app/src/pages/ProfilesPage.vue
index e57d380..63fd335 100644
--- a/web-app/src/pages/ProfilesPage.vue
+++ b/web-app/src/pages/ProfilesPage.vue
@@ -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>
diff --git a/web-app/src/pages/UserAccountLayout.vue b/web-app/src/pages/UserAccountLayout.vue
index fa007bf..9f50bbe 100644
--- a/web-app/src/pages/UserAccountLayout.vue
+++ b/web-app/src/pages/UserAccountLayout.vue
@@ -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>