Improved reusable styles.

web-app/src/assets/main.css

@@ -1,3 +1,5 @@
+@import url('styles/text.css');
+
 :root {
   --theme-primary: #01bbff;
   --theme-secondary: #00759f;
@@ -5,6 +7,11 @@
   --bg-primary: #00131a;
   --bg-secondary: #003447;
   --bg-page: #000b0f;
+
+  --text: rgb(247, 247, 247);
+  --text-muted: gray;
+  --positive: rgb(30, 197, 14);
+  --negative: rgb(253, 28, 28);
 }
 
 @font-face {

web-app/src/assets/styles/text.css

@@ -0,0 +1,43 @@
+.text-normal {
+  color: var(--text);
+}
+
+.text-muted {
+  color: var(--text-muted);
+}
+
+.text-positive {
+  color: var(--positive);
+}
+
+.text-negative {
+  color: var(--negative);
+}
+
+.font-mono {
+  font-family: monospace;
+}
+
+.font-bold {
+  font-weight: bold;
+}
+
+.font-size-normal {
+  font-size: 1rem;
+}
+
+.font-size-small {
+  font-size: 0.85rem;
+}
+
+.font-size-xsmall {
+  font-size: 0.75rem;
+}
+
+.align-right {
+  text-align: right;
+}
+
+.align-left {
+  text-align: left;
+}

web-app/src/components/TransactionCard.vue

@@ -32,23 +32,23 @@ function goToTransaction() {
     <!-- Top row contains timestamp and amount. -->
     <div class="transaction-card-top-row">
       <div>
-        <div class="transaction-card-id">Transaction #{{ tx.id }}</div>
+        <div class="font-mono font-size-xsmall text-normal">Transaction #{{ tx.id }}</div>
-        <div class="transaction-card-timestamp">
+        <div class="text-muted font-mono font-size-xsmall">
           {{ new Date(tx.timestamp).toLocaleString() }}
         </div>
       </div>
       <div>
-        <div class="transaction-card-money" :class="{
+        <div class="font-mono align-right font-size-small" :class="{
-          'transaction-card-money-positive': moneyStyle === 'positive',
+          'text-positive': moneyStyle === 'positive',
-          'transaction-card-money-negative': moneyStyle === 'negative'
+          'text-negative': moneyStyle === 'negative'
         }">
           {{ formatMoney(tx.amount, tx.currency) }}
         </div>
-        <div v-if="tx.creditedAccount !== null" class="transaction-card-account-label">
+        <div v-if="tx.creditedAccount !== null" class="font-size-small text-muted">
-          Credited to <span class="transaction-card-account-badge">{{ tx.creditedAccount.name }}</span>
+          Credited to <span class="text-normal font-bold">{{ tx.creditedAccount.name }}</span>
         </div>
-        <div v-if="tx.debitedAccount !== null" class="transaction-card-account-label">
+        <div v-if="tx.debitedAccount !== null" class="font-size-small text-muted">
-          Debited to <span class="transaction-card-account-badge">{{ tx.debitedAccount.name }}</span>
+          Debited to <span class="text-normal font-bold">{{ tx.debitedAccount.name }}</span>
         </div>
       </div>
     </div>
@@ -83,44 +83,6 @@ function goToTransaction() {
   justify-content: space-between;
 }
 
-.transaction-card-id {
-  font-size: 0.8rem;
-  color: white;
-}
-
-.transaction-card-timestamp {
-  font-size: 0.75rem;
-  font-family: monospace;
-  font-weight: 400;
-  color: gray;
-}
-
-.transaction-card-money {
-  font-size: 0.9rem;
-  font-family: monospace;
-  color: white;
-  text-align: right;
-}
-
-.transaction-card-money-positive {
-  color: green;
-}
-
-.transaction-card-money-negative {
-  color: red;
-}
-
-.transaction-card-account-label {
-  font-size: 0.75rem;
-  color: gray;
-  text-align: right;
-}
-
-.transaction-card-account-badge {
-  color: white;
-  font-weight: 600;
-}
-
 .transaction-card-description {
   margin: 0.25rem 0;
   font-size: 0.9rem;