feat: improved typography, and UI components

frontend/src/components/shared/TransactionRow.tsx

@@ -1,25 +1,27 @@
 import { useNavigate } from 'react-router-dom'
 import { getRiskDisplay } from '../../utils/riskLevel'
 import { formatCurrency } from '../../utils/formatCurrency'
+import { Coffee, MoneySend, ShoppingCart, Refresh, GasStation, Card as CardIcon } from 'iconsax-react'
+import type { ReactNode } from 'react'
 import type { Transaction } from '../../types/transaction.types'
 import './TransactionRow.css'
 
 interface TransactionRowProps {
   transaction: Transaction
 }
 
-const CATEGORY_ICONS: Record<string, string> = {
-  dining: '🍽️',
-  transfer: '💸',
-  shopping: '🛍️',
-  subscription: '🔄',
-  fuel: '⛽',
+const CATEGORY_ICONS: Record<string, ReactNode> = {
+  dining: <Coffee variant="TwoTone" size="24" color="currentColor" />,
+  transfer: <MoneySend variant="TwoTone" size="24" color="currentColor" />,
+  shopping: <ShoppingCart variant="TwoTone" size="24" color="currentColor" />,
+  subscription: <Refresh variant="TwoTone" size="24" color="currentColor" />,
+  fuel: <GasStation variant="TwoTone" size="24" color="currentColor" />,
 }
 
 export function TransactionRow({ transaction }: TransactionRowProps) {
   const navigate = useNavigate()
   const display = getRiskDisplay(transaction.riskLevel)
-  const categoryIcon = CATEGORY_ICONS[transaction.merchantCategory ?? ''] ?? '💳'
+  const categoryIcon = CATEGORY_ICONS[transaction.merchantCategory ?? ''] ?? <CardIcon variant="TwoTone" size="24" color="currentColor" />
   const isBlocked = transaction.status === 'blocked'
 
   return (

frontend/src/components/ui/BottomSheet.tsx

@@ -37,9 +37,9 @@ export function BottomSheet({ isOpen, onClose, children, title }: BottomSheetPro
             className="bottom-sheet"
             role="dialog"
             aria-modal="true"
-            initial={{ y: '100%' }}
-            animate={{ y: 0 }}
-            exit={{ y: '100%' }}
+            initial={{ y: '100%', x: '-50%' }}
+            animate={{ y: 0, x: '-50%' }}
+            exit={{ y: '100%', x: '-50%' }}
             transition={{ type: 'spring', damping: 30, stiffness: 300 }}
           >
             <div className="bottom-sheet-handle" />

frontend/src/index.css

@@ -3,32 +3,57 @@
    Mobile-first, Capital One-inspired
    ================================================ */
 
+/* Regular (400) */
 @font-face {
   font-family: 'Optimist';
-  src: url('/fonts/optimist-normal.ttf') format('truetype');
+  src: url('/fonts/optimist-normal.woff2') format('woff2');
   font-weight: 400;
   font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
   font-family: 'Optimist';
-  src: url('/fonts/optimist-italic.ttf') format('truetype');
+  src: url('/fonts/optimist-italic.woff2') format('woff2');
   font-weight: 400;
   font-style: italic;
+  font-display: swap;
 }
 
+/* Medium (500) — maps to the normal file so the browser
+   doesn't fall back to a system font for this weight */
 @font-face {
   font-family: 'Optimist';
-  src: url('/fonts/optimist-bold.ttf') format('truetype');
+  src: url('/fonts/optimist-normal.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* Semibold (600) — maps to the bold file */
+@font-face {
+  font-family: 'Optimist';
+  src: url('/fonts/optimist-bold.woff2') format('woff2');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* Bold (700) */
+@font-face {
+  font-family: 'Optimist';
+  src: url('/fonts/optimist-bold.woff2') format('woff2');
   font-weight: 700;
   font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
   font-family: 'Optimist';
-  src: url('/fonts/optimist-bold-italic.ttf') format('truetype');
+  src: url('/fonts/optimist-bold-italic.woff2') format('woff2');
   font-weight: 700;
   font-style: italic;
+  font-display: swap;
 }
 
 :root {

frontend/src/pages/AccountDetailPage/AccountDetailPage.css

@@ -5,6 +5,7 @@
 
 .account-detail-header {
   margin: var(--space-4);
+  width: auto;
   border-radius: var(--radius-xl);
 }
 

frontend/src/pages/LoginPage/LoginPage.css

@@ -10,13 +10,14 @@
 
 .login-header {
   text-align: center;
+  margin-top: 10vh;
   margin-bottom: var(--space-10);
   color: var(--text-inverse);
 }
 
 .login-logo {
-  width: 72px;
-  height: 72px;
+  width: 88px;
+  height: 88px;
   background: rgba(255, 255, 255, 0.1);
   border-radius: var(--radius-2xl);
   display: flex;

frontend/src/pages/LoginPage/LoginPage.tsx

@@ -37,7 +37,7 @@ export function LoginPage() {
     <div className="login-page">
       <div className="login-header">
         <div className="login-logo">
-          <Shield size={40} strokeWidth={1.5} />
+          <Shield size={60} strokeWidth={1.5} />
         </div>
         <h1 className="login-brand">Temis</h1>
         <p className="login-tagline">Secure Banking</p>