Modified Review design- TBC

src/pages/Review.module.css

@@ -1,22 +1,110 @@
-.heading {
+/* Page layout */
+.desktopPage {
   padding: 2rem;
 }
 
+/* Card and list container */
+.card {
+  width: min(980px, 100%);
+  background: rgba(255, 255, 255, 0.75);
+  border: 1px solid rgba(255, 255, 255, 0.6);
+  border-radius: 18px;
+  padding: 1.75rem;
+  box-shadow: 0 20px 50px rgba(140, 20, 70, 0.18);
+  backdrop-filter: blur(10px);
+}
+
+.empty {
+  margin: 0.5rem 0 1.25rem;
+  color: #374151;
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.7rem;
+  margin-top: 0.75rem;
+}
+
+/* Item rows and inputs */
 .item {
-  margin-bottom: 1rem;
   display: flex;
-  gap: 1rem;
   align-items: center;
+  gap: 0.85rem;
+
+  padding: 0.3rem;
+  border-radius: 14px;
+
+  background: rgba(255, 255, 255, 0.75);
+  border: 1px solid rgba(240, 180, 205, 0.65);
 }
 
 .quantity {
-  width: 60px;
+  width: 44px;
+  height: 38px;
+  border: none;
+
+  text-align: center;
+
+  background: var(--primary-pink);
+  color: white;
+
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
+}
+
+/* Remove ugly number spinners (Chrome/Safari) */
+.quantity::-webkit-outer-spin-button,
+.quantity::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+/* Firefox */
+.quantity[type="number"] {
+  -moz-appearance: textfield;
 }
 
 .name {
   flex: 1;
+  padding: 0.5rem 0.25rem;
 }
 
 .price {
-  width: 100px;
+  width: 10%;
+  border: none;
+}
+
+/* Actions and footer */
+.deleteButton {
+  width: 38px;
+  height: 38px;
+  border-radius: 10px;
+  display: grid;
+  place-items: center;
+  background: white;
+  border: 1px solid rgba(210, 210, 210, 0.8);
+  cursor: pointer;
+}
+
+.deleteButton:hover {
+  transform: translateY(-1px);
+}
+
+.footer {
+  margin-top: 1.25rem;
+  padding-top: 1rem;
+  border-top: 1px solid rgba(240, 180, 205, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+.subtotal {
+  font-weight: 700;
+}
+
+.actions {
+  display: flex;
+  gap: 0.9rem;
+  align-items: center;
 }

src/pages/Review.tsx

@@ -2,9 +2,11 @@ import { useLocation, useNavigate } from "react-router-dom";
 import { useState, useEffect } from "react";
 import { parseItems } from "../utils/parseReceipt";
 import type { Item } from "../types";
+import useIsMobile from "../hooks/useIsMobile";
 import styles from "./Review.module.css";
 
 const Review = () => {
+  const isMobile = useIsMobile();
   const ocrText = useLocation().state?.ocrText || "";
   const navigate = useNavigate();
   const [items, setItems] = useState<Item[]>([]);
@@ -60,67 +62,87 @@ const Review = () => {
   };
 
   return (
-    <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} className={styles.item}>
-          {/* Quantity */}
-          <input
-            type="number"
-            min="1"
-            value={item.quantity}
-            onChange={(e) => updateItemField(index, "quantity", e.target.value)}
-            className={styles.quantity}
-            aria-label={`Quantity for ${item.name}`}
-          />
-
-          {/* Item name */}
-          <input
-            type="text"
-            value={item.name}
-            onChange={(e) => updateItemField(index, "name", e.target.value)}
-            className={styles.name}
-            aria-label="Item name"
-          />
-
-          {/* Price */}
-          <input
-            type="text"
-            value={`$${item.price.toFixed(2)}`}
-            onChange={(e) => updateItemField(index, "price", e.target.value)}
-            className={styles.price}
-            aria-label={`Price for ${item.name}`}
-          />
-
-          {/* Delete button */}
-          <button
-            onClick={() => deleteItem(item.id)}
-            aria-label={`Delete ${item.name}`}
-          >
-            🗑️
-          </button>
+    <div className={isMobile ? styles.mobilePage : styles.desktopPage}>
+      <div className={styles.card}>
+        <h2>Review and Edit Items</h2>
+
+        {/* Empty state */}
+        {!hasItems && (
+          <p className={styles.empty}>
+            No items found. You can go back and try again.
+          </p>
+        )}
+
+        {/* Items list */}
+        <div className={styles.list}>
+          {items.map((item, index) => (
+            <div key={item.id} className={styles.item}>
+              {/* Quantity */}
+              <input
+                type="number"
+                min="1"
+                value={item.quantity}
+                onChange={(e) =>
+                  updateItemField(index, "quantity", e.target.value)
+                }
+                className={styles.quantity}
+                aria-label={`Quantity for ${item.name}`}
+              />
+
+              {/* Item name */}
+              <input
+                type="text"
+                value={item.name}
+                onChange={(e) => updateItemField(index, "name", e.target.value)}
+                className={styles.name}
+                aria-label="Item name"
+              />
+
+              {/* Price */}
+              <input
+                type="text"
+                value={`$${item.price.toFixed(2)}`}
+                onChange={(e) =>
+                  updateItemField(index, "price", e.target.value)
+                }
+                className={styles.price}
+                aria-label={`Price for ${item.name}`}
+              />
+
+              {/* Delete button */}
+              <button
+                onClick={() => deleteItem(item.id)}
+                aria-label={`Delete ${item.name}`}
+                className={styles.deleteButton}
+              >
+                🗑️
+              </button>
+            </div>
+          ))}
         </div>
-      ))}
-
-      {/* Summary section */}
-      <div>Subtotal: ${subtotal.toFixed(2)}</div>
-
-      {/* Action buttons */}
-      <button className="whiteButton" onClick={addNewItem}>
-        + Add Item
-      </button>
-      <button
-        className="pinkButton"
-        onClick={proceedToSplit}
-        disabled={!items.length}
-      >
-        Continue to split
-      </button>
+
+        <div className={styles.footer}>
+          {/* Summary section */}
+          <div className={styles.subtotal}>
+            Subtotal: ${subtotal.toFixed(2)}
+          </div>
+
+          {/* Action buttons */}
+          <div className={styles.actions}>
+            <button className="whiteButton" onClick={addNewItem}>
+              + Add Item
+            </button>
+
+            <button
+              className="pinkButton"
+              onClick={proceedToSplit}
+              disabled={!items.length}
+            >
+              Continue to split
+            </button>
+          </div>
+        </div>
+      </div>
     </div>
   );
 };