feat(frontend): improved UI

7project/frontend/src/App.css

@@ -1 +0,0 @@
-/* App-level styles moved to ui.css for a cleaner layout. */

7project/frontend/src/App.tsx

@@ -1,5 +1,4 @@
 import { useEffect, useState } from 'react';
-import './App.css';
 import LoginRegisterPage from './pages/LoginRegisterPage';
 import Dashboard from './pages/Dashboard';
 import { logout } from './api';

7project/frontend/src/appearance.ts

@@ -14,8 +14,8 @@ export function applyFontSize(size: FontSize) {
   const root = document.documentElement;
   const map: Record<FontSize, string> = {
     small: '14px',
-    medium: '16px',
-    large: '18px',
+    medium: '18px',
+    large: '22px',
   };
   root.style.fontSize = map[size];
 }

7project/frontend/src/pages/Dashboard.tsx

@@ -181,7 +181,7 @@ export default function Dashboard({ onLogout }: { onLogout: () => void }) {
               <section className="card">
                 <h3>Bank connections</h3>
                 <p className="muted">Connect your CSAS (George) account.</p>
-                <button className="btn" onClick={startOauthCsas}>Connect CSAS (George)</button>
+                <button className="btn primary" onClick={startOauthCsas}>Connect CSAS (George)</button>
               </section>
 
               <section className="card">
@@ -203,7 +203,7 @@ export default function Dashboard({ onLogout }: { onLogout: () => void }) {
                 <form className="form-row" onSubmit={async (e) => { e.preventDefault(); if (!newCatName.trim()) return; try { const cat = await createCategory({ name: newCatName.trim(), description: newCatDesc || undefined }); setCategories(prev => [...prev, cat]); setNewCatName(''); setNewCatDesc(''); } catch (err: any) { alert(err?.message || 'Failed to create category'); } }}>
                   <input className="input" type="text" placeholder="New category name" value={newCatName} onChange={(e) => setNewCatName(e.target.value)} />
                   <input className="input" type="text" placeholder="Description (optional)" value={newCatDesc} onChange={(e) => setNewCatDesc(e.target.value)} />
-                  <button className="btn" type="submit">Create category</button>
+                  <button className="btn primary" type="submit">Create category</button>
                 </form>
               </section>
 
@@ -255,12 +255,14 @@ export default function Dashboard({ onLogout }: { onLogout: () => void }) {
                   <div>No transactions</div>
                 ) : (
                   <>
-                    <div className="form-row" style={{ justifyContent: 'space-between', alignItems: 'center' }}>
-                      <div className="space-x">
-                        <button className="btn" disabled={page <= 0} onClick={() => setPage(p => Math.max(0, p - 1))}>&lt;- Load recent</button>
-                        <button className="btn" disabled={page >= totalPages - 1} onClick={() => setPage(p => Math.min(totalPages - 1, p + 1))}>Load older -&gt;</button>
+                    <div className="table-controls">
+                      <div className="muted">
+                        Showing {visible.length} of {filtered.length} (page {Math.min(page + 1, Math.max(1, totalPages))}/{Math.max(1, totalPages)})
+                      </div>
+                      <div className="actions">
+                        <button className="btn primary" disabled={page <= 0} onClick={() => setPage(p => Math.max(0, p - 1))}>Previous</button>
+                        <button className="btn primary" disabled={page >= totalPages - 1} onClick={() => setPage(p => Math.min(totalPages - 1, p + 1))}>Next</button>
                       </div>
-                      <div className="muted">Showing {visible.length} of {filtered.length} (page {Math.min(page + 1, Math.max(1, totalPages))}/{Math.max(1, totalPages)})</div>
                     </div>
                     <table className="table">
                       <thead>
@@ -290,13 +292,13 @@ export default function Dashboard({ onLogout }: { onLogout: () => void }) {
                                       <option key={c.id} value={c.id}>{c.name}</option>
                                     ))}
                                   </select>
-                                  <button className="btn" onClick={saveEditCategories}>Save</button>
-                                  <button className="btn" onClick={cancelEditCategories}>Cancel</button>
+                                  <button className="btn small" onClick={saveEditCategories}>Save</button>
+                                    <button className="btn small" onClick={cancelEditCategories}>Cancel</button>
                                 </div>
                               ) : (
-                                <div className="space-x" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                                <div className="space-x" style={{ display: 'flex', alignItems: 'center', gap: 8, justifyContent: 'space-between' }}>
                                   <span>{t.category_ids.map(id => categoryNameById(id)).join(', ') || '—'}</span>
-                                  <button className="btn" onClick={() => beginEditCategories(t)}>Change</button>
+                                  <button className="btn small" onClick={() => beginEditCategories(t)}>Change</button>
                                 </div>
                               )}
                             </td>

7project/frontend/src/ui.css

@@ -31,27 +31,53 @@ body[data-theme="dark"] {
 }
 
 /* Layout */
-.app-layout { display: grid; grid-template-columns: 260px 1fr; height: 100%; }
+.app-layout { display: grid; grid-template-columns: 260px 1fr; height: 100vh; }
 .sidebar { background: #15172a; color: #e5e7eb; display: flex; flex-direction: column; padding: 20px 12px; }
 .sidebar .logo { color: #fff; font-weight: 700; font-size: 18px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; }
 .nav { margin-top: 12px; display: grid; gap: 4px; }
 .nav a, .nav button { color: #cbd5e1; text-align: left; background: transparent; border: 0; padding: 10px 12px; border-radius: 8px; cursor: pointer; }
 .nav a.active, .nav a:hover, .nav button:hover { background: rgba(255,255,255,0.08); color: #fff; }
 
-.content { display: flex; flex-direction: column; height: 100%; }
-.topbar { height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; background: var(--panel); border-bottom: 1px solid var(--border); }
+.content { display: flex; flex-direction: column; overflow-y: auto; }
+.topbar { height: 64px; display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; padding: 0 24px; background: var(--panel); border-bottom: 1px solid var(--border); }
 .topbar .user { color: var(--muted); }
-.page { padding: 24px; max-width: 1100px; margin: auto; }
+.page { padding: 24px; }
 
 /* Cards */
 .card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; }
 .card h3 { margin: 0 0 12px; }
 
 /* Forms */
-.input, select, textarea { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: #fff; color: var(--text); }
-.input:focus, select:focus, textarea:focus { outline: 2px solid var(--primary); border-color: var(--primary); }
+.input, select, textarea {
+  width: 100%;
+  padding: 10px 12px;
+  border-radius: 10px;
+  border: 1px solid var(--border);
+  background-color: var(--panel);
+  color: var(--muted);
+
+  /* Add these properties specifically for the select element */
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+
+  padding-right: 32px; /* Add space for the custom arrow */
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+  background-position: right 0.5rem center;
+  background-repeat: no-repeat;
+  background-size: 1.5em 1.5em;
+  cursor: pointer;
+}
+.input:focus, select:focus, textarea:focus {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+  border-color: var(--primary);
+}
 .form-row { display: grid; gap: 8px; grid-template-columns: repeat(4, minmax(0,1fr)); }
 .form-row > * { min-width: 140px; }
+.form-row > .btn {
+  justify-self: start;
+}
 .actions { display: flex; align-items: center; gap: 8px; }
 
 /* Buttons */
@@ -59,12 +85,25 @@ body[data-theme="dark"] {
 .btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
 .btn.primary:hover { background: var(--primary-600); }
 .btn.ghost { background: transparent; color: var(--muted); }
+.btn, .input, select, textarea, .nav a, .nav button, .segmented button {
+  transition: all 0.2s ease-in-out;
+}
+.btn.small {
+  padding: 4px 10px;
+  font-size: 0.875rem; /* 14px */
+}
 
 /* Tables */
 .table { width: 100%; border-collapse: collapse; }
 .table th, .table td { padding: 10px; border-bottom: 1px solid var(--border); }
 .table th { text-align: left; color: var(--muted); font-weight: 600; }
 .table td.amount { text-align: right; font-variant-numeric: tabular-nums; }
+.table-controls {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px; /* Adds some space above the table */
+}
 
 /* Segmented control */
 .segmented { display: inline-flex; background: #f1f5f9; border-radius: 10px; padding: 4px; border: 1px solid var(--border); }