Moved all unnecessary inline styling to CSS files

src/components/PeopleManager/AddPersonModal.module.css

@@ -2,3 +2,20 @@
 .modalTitle {
   font-weight: bold;
 }
+
+.nameInput {
+  width: 100%;
+  margin-bottom: 16px;
+}
+
+.colorOptions {
+  display: flex;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.colorBubble {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+}

src/components/PeopleManager/AddPersonModal.tsx

@@ -33,19 +33,17 @@ export default function AddPersonModal({ show, onClose, onSubmit }: Props) {
         <input
           value={name}
           onChange={(e) => setName(e.target.value)}
-          style={{ width: "100%", marginBottom: 16 }}
+          className={styles.nameInput}
         />
 
         <label>Pick a color</label>
-        <div style={{ display: "flex", gap: 8, marginTop: 8 }}>
+        <div className={styles.colorOptions}>
           {DEFAULT_COLORS.map((c) => (
             <button
               key={c}
               onClick={() => setColor(c)}
+              className={styles.colorBubble}
               style={{
-                width: 28,
-                height: 28,
-                borderRadius: "50%",
                 border: color === c ? "3px solid #111" : "1px solid #aaa",
                 backgroundColor: c,
               }}

src/pages/Home.module.css

@@ -54,3 +54,27 @@
   flex-direction: row;
   flex-wrap: wrap;
 }
+
+.modalTitle {
+  line-height: 0.3;
+}
+
+.modalDescription {
+  margin-bottom: 12px;
+}
+
+.scanningText {
+  margin-top: 12px;
+}
+
+.errorText {
+  color: red;
+  margin-top: 8px;
+}
+
+.modalFooter {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  align-items: center;
+}

src/pages/Home.tsx

@@ -124,32 +124,22 @@ const Home = () => {
       >
         <Modal.Header closeButton>
           <Modal.Title>
-            <h2 style={{ lineHeight: 0.3 }}>Upload a receipt</h2>
+            <h2 className={styles.modalTitle}>Upload a receipt</h2>
           </Modal.Title>
         </Modal.Header>
         <Modal.Body>
-          <p style={{ marginBottom: 12 }}>
+          <p className={styles.modalDescription}>
             Try BillBuddy with your own photo, or use our sample image to see
             the flow.
           </p>
           {loading && (
-            <p style={{ marginTop: 12 }}>🔍 Scanning image for text…</p>
+            <p className={styles.scanningText}>🔍 Scanning image for text…</p>
           )}
-          {error && <p style={{ color: "red", marginTop: 8 }}>{error}</p>}
+          {error && <p className={styles.errorText}>{error}</p>}
         </Modal.Body>
         <Modal.Footer>
-          <div
-            style={{
-              display: "flex",
-              gap: 12,
-              flexWrap: "wrap",
-              alignItems: "center",
-            }}
-          >
-            <label
-              className="pinkButton"
-              style={{ margin: 0, cursor: "pointer" }}
-            >
+          <div className={styles.modalFooter}>
+            <label className="pinkButton">
               <input
                 ref={fileInputRef}
                 type="file"

src/pages/Review.module.css

@@ -0,0 +1,22 @@
+.heading {
+  padding: 2rem;
+}
+
+.item {
+  margin-bottom: 1rem;
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+}
+
+.quantity {
+  width: 60px;
+}
+
+.name {
+  flex: 1;
+}
+
+.price {
+  width: 100px;
+}

src/pages/Review.tsx

@@ -2,6 +2,7 @@ import { useLocation, useNavigate } from "react-router-dom";
 import { useState, useEffect } from "react";
 import { parseItems } from "../utils/parseReceipt";
 import type { Item } from "../types";
+import styles from "./Review.module.css";
 
 const Review = () => {
   const ocrText = useLocation().state?.ocrText || "";
@@ -59,30 +60,22 @@ const Review = () => {
   };
 
   return (
-    <div style={{ padding: "2rem" }}>
+    <div className={styles.heading}>
       <h2>Review and Edit Items</h2>
 
       {/* Empty state */}
       {!hasItems && <p>No items found. You can go back and try again.</p>}
 
       {/* Items list */}
       {items.map((item, index) => (
-        <div
-          key={item.id}
-          style={{
-            marginBottom: "1rem",
-            display: "flex",
-            gap: "1rem",
-            alignItems: "center",
-          }}
-        >
+        <div key={item.id} className={styles.item}>
           {/* Quantity */}
           <input
             type="number"
             min="1"
             value={item.quantity}
             onChange={(e) => updateItemField(index, "quantity", e.target.value)}
-            style={{ width: "60px" }}
+            className={styles.quantity}
             aria-label={`Quantity for ${item.name}`}
           />
 
@@ -91,7 +84,7 @@ const Review = () => {
             type="text"
             value={item.name}
             onChange={(e) => updateItemField(index, "name", e.target.value)}
-            style={{ flex: 1 }}
+            className={styles.name}
             aria-label="Item name"
           />
 
@@ -100,7 +93,7 @@ const Review = () => {
             type="text"
             value={`$${item.price.toFixed(2)}`}
             onChange={(e) => updateItemField(index, "price", e.target.value)}
-            style={{ width: "100px" }}
+            className={styles.price}
             aria-label={`Price for ${item.name}`}
           />