From c17b055c2e844fde24097a3bbd54793cab057187 Mon Sep 17 00:00:00 2001
From: Wang Ng <wshng@ucdavis.edu>
Date: Sat, 18 Jul 2026 19:31:45 -0500
Subject: [PATCH 1/3] fix(ui): modify dropdown to match component UI

replace default dropdown UI from mac/windows to a custom designed one
---
 .../components/address/CSVUploadOverlay.tsx   | 269 ++++++++++++++----
 app/ui/src/app/edit/formStyles.v2.ts          |  12 +-
 2 files changed, 224 insertions(+), 57 deletions(-)

diff --git a/app/ui/src/app/edit/components/address/CSVUploadOverlay.tsx b/app/ui/src/app/edit/components/address/CSVUploadOverlay.tsx
index 519bbafc..3b5153f1 100644
--- a/app/ui/src/app/edit/components/address/CSVUploadOverlay.tsx
+++ b/app/ui/src/app/edit/components/address/CSVUploadOverlay.tsx
@@ -1,6 +1,14 @@
 "use client";
 
-import { useRef, useState, useCallback, useMemo, useEffect } from "react";
+import {
+  useRef,
+  useState,
+  useCallback,
+  useMemo,
+  useEffect,
+  useLayoutEffect,
+  type CSSProperties,
+} from "react";
 import {
   OVERLAY_BACKDROP,
   OVERLAY_HEADER,
@@ -10,6 +18,7 @@ import {
   OVERLAY_CANCEL_BTN,
   OVERLAY_PRIMARY_BTN,
   CSV_UPLOAD_OVERLAY_PANEL,
+  CSV_UPLOAD_OVERLAY_PANEL_TALL,
   CSV_UPLOAD_OVERLAY_INNER,
   CSV_UPLOAD_OVERLAY_CONTENT,
   CSV_UPLOAD_OVERLAY_TOP,
@@ -26,6 +35,14 @@ import {
   CSV_UPLOAD_FILE_CHIP_RIGHT,
   CSV_UPLOAD_FILE_CHIP_SIZE,
   CSV_UPLOAD_FILE_CHIP_REMOVE,
+  OVERLAY_SELECT_WRAPPER,
+  OVERLAY_SELECT_VALUE,
+  OVERLAY_SELECT_ICON,
+  CSV_UPLOAD_SELECT_PLACEHOLDER,
+  OVERLAY_AUTOCOMPLETE_DROPDOWN,
+  OVERLAY_AUTOCOMPLETE_ITEM,
+  OVERLAY_AUTOCOMPLETE_ITEM_ACTIVE,
+  OVERLAY_AUTOCOMPLETE_ITEM_TEXT,
 } from "@/app/edit/formStyles.v2";
 import ErrorOverlay from "@/app/edit/components/shared/ErrorOverlay";
 import type { AddressCard } from "@/app/edit/types/delivery";
@@ -58,6 +75,22 @@ type CSVUploadOverlayProps = {
   initialFile?: File;
 };
 
+const CHEVRON_DOWN_ICON = (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    aria-hidden
+  >
+    <polyline points="6 9 12 15 18 9" />
+  </svg>
+);
+
 const MAX_CSV_BYTES = 10 * 1024 * 1024;
 
 function formatFileSize(bytes: number): string {
@@ -106,6 +139,175 @@ function buildAddressCards(
     });
 }
 
+// ─── Custom mapping dropdown (matches overlay design instead of native <select>) ─
+
+const MAPPING_FIELD_OPTIONS = Object.keys(FIELD_LABELS) as Exclude<
+  MappableField,
+  ""
+>[];
+
+function MappingFieldSelect({
+  header,
+  value,
+  onChange,
+}: {
+  header: string;
+  value: MappableField;
+  onChange: (field: MappableField) => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(0);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const optionRefs = useRef<(HTMLDivElement | null)[]>([]);
+  const [menuStyle, setMenuStyle] = useState<CSSProperties>({});
+
+  useLayoutEffect(() => {
+    if (open) {
+      const currentIndex = MAPPING_FIELD_OPTIONS.indexOf(
+        value as Exclude<MappableField, "">,
+      );
+      setActiveIndex(currentIndex >= 0 ? currentIndex : 0);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) return;
+    optionRefs.current[activeIndex]?.scrollIntoView({ block: "nearest" });
+  }, [open, activeIndex]);
+
+  useLayoutEffect(() => {
+    if (!open || !buttonRef.current) return;
+    const r = buttonRef.current.getBoundingClientRect();
+    const GAP = 4;
+    const MENU_MAX_HEIGHT = 192; // matches max-h-48 on OVERLAY_AUTOCOMPLETE_DROPDOWN
+    const spaceBelow = window.innerHeight - r.bottom - GAP;
+    const spaceAbove = r.top - GAP;
+    const openUpward = spaceBelow < MENU_MAX_HEIGHT && spaceAbove > spaceBelow;
+    setMenuStyle(
+      openUpward
+        ? {
+            bottom: window.innerHeight - r.top + GAP,
+            left: r.left,
+            width: r.width,
+            maxHeight: Math.min(MENU_MAX_HEIGHT, spaceAbove),
+          }
+        : {
+            top: r.bottom + GAP,
+            left: r.left,
+            width: r.width,
+            maxHeight: Math.min(MENU_MAX_HEIGHT, spaceBelow),
+          },
+    );
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) return;
+    function handlePointerDown(e: MouseEvent) {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(e.target as Node)
+      ) {
+        setOpen(false);
+      }
+    }
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.key === "Escape") {
+        setOpen(false);
+      } else if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setActiveIndex((i) =>
+          Math.min(i + 1, MAPPING_FIELD_OPTIONS.length - 1),
+        );
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setActiveIndex((i) => Math.max(i - 1, 0));
+      } else if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        const chosen = MAPPING_FIELD_OPTIONS[activeIndex];
+        if (chosen) {
+          onChange(chosen);
+          setOpen(false);
+        }
+      }
+    }
+    function handleScroll(e: Event) {
+      if (menuRef.current && menuRef.current.contains(e.target as Node)) {
+        return;
+      }
+      setOpen(false);
+    }
+    document.addEventListener("mousedown", handlePointerDown);
+    document.addEventListener("keydown", handleKeyDown);
+    window.addEventListener("scroll", handleScroll, true);
+    return () => {
+      document.removeEventListener("mousedown", handlePointerDown);
+      document.removeEventListener("keydown", handleKeyDown);
+      window.removeEventListener("scroll", handleScroll, true);
+    };
+  }, [open, activeIndex, onChange]);
+
+  return (
+    <div ref={containerRef}>
+      <button
+        ref={buttonRef}
+        type="button"
+        onClick={() => setOpen((o) => !o)}
+        className={OVERLAY_SELECT_WRAPPER}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        aria-label={`Map ${header} column`}
+      >
+        <span
+          className={
+            value ? OVERLAY_SELECT_VALUE : CSV_UPLOAD_SELECT_PLACEHOLDER
+          }
+        >
+          {value ? FIELD_LABELS[value as Exclude<MappableField, "">] : "Select"}
+        </span>
+        <span className={OVERLAY_SELECT_ICON}>{CHEVRON_DOWN_ICON}</span>
+      </button>
+      {open && (
+        <div
+          ref={menuRef}
+          className={OVERLAY_AUTOCOMPLETE_DROPDOWN}
+          role="listbox"
+          aria-label={`${header} field options`}
+          style={menuStyle}
+        >
+          {MAPPING_FIELD_OPTIONS.map((f, i) => (
+            <div
+              key={f}
+              ref={(el) => {
+                optionRefs.current[i] = el;
+              }}
+              role="option"
+              aria-selected={f === value}
+              className={
+                f === value || i === activeIndex
+                  ? OVERLAY_AUTOCOMPLETE_ITEM_ACTIVE
+                  : OVERLAY_AUTOCOMPLETE_ITEM
+              }
+              onMouseEnter={() => setActiveIndex(i)}
+              onMouseDown={(e) => {
+                e.preventDefault();
+                onChange(f);
+                setOpen(false);
+              }}
+            >
+              <span className={OVERLAY_AUTOCOMPLETE_ITEM_TEXT}>
+                {FIELD_LABELS[f]}
+              </span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
 // ─── Step 1: Column Mapper ────────────────────────────────────────────────────
 
 function StepColumnMapper({
@@ -161,7 +363,7 @@ function StepColumnMapper({
             Match your CSV columns to our fields
           </p>
 
-          <div className="w-full border border-[var(--edit-stone-200)] rounded-[8px] overflow-hidden">
+          <div className="w-full border border-[var(--edit-stone-200)] rounded-[8px] overflow-hidden flex flex-col flex-1 min-h-0">
             <div
               className="grid gap-x-4 px-4 py-3 border-b border-[var(--edit-stone-200)] bg-[var(--edit-bg-primary)]"
               style={{ gridTemplateColumns: "1fr 1.4fr 1fr" }}
@@ -178,66 +380,25 @@ function StepColumnMapper({
               )}
             </div>
 
-            <div className="overflow-y-auto max-h-[340px]">
-              {headers.map((header, idx) => (
+            <div className="overflow-y-auto flex-1 min-h-0">
+              {headers.map((header) => (
                 <div
                   key={header}
                   className="grid gap-x-4 px-4 py-3 items-center bg-[var(--edit-bg-primary)]"
                   style={{
                     gridTemplateColumns: "1fr 1.4fr 1fr",
-                    borderBottom:
-                      idx < headers.length - 1
-                        ? "1px solid var(--edit-stone-200)"
-                        : "none",
+                    borderBottom: "1px solid var(--edit-stone-200)",
                   }}
                 >
-                  <span className="font-normal text-[14px] leading-[1.5] text-[var(--edit-text-primary)]">
+                  <span className="font-normal text-[16px] leading-6 text-[var(--edit-text-primary)]">
                     {header.charAt(0).toUpperCase() + header.slice(1)}
                   </span>
 
-                  <div className="relative border border-[var(--edit-stone-200)] rounded-[6px] h-10 flex items-center overflow-hidden">
-                    <select
-                      value={mapping[header] ?? ""}
-                      onChange={(e) =>
-                        onMappingChange(header, e.target.value as MappableField)
-                      }
-                      className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
-                    >
-                      <option value="">Select</option>
-                      {(
-                        Object.keys(FIELD_LABELS) as Exclude<
-                          MappableField,
-                          ""
-                        >[]
-                      ).map((f) => (
-                        <option key={f} value={f}>
-                          {FIELD_LABELS[f]}
-                        </option>
-                      ))}
-                    </select>
-                    <span className="flex-1 px-3 text-[14px] leading-[1.5] pointer-events-none truncate text-[var(--edit-text-primary)]">
-                      {mapping[header]
-                        ? FIELD_LABELS[
-                            mapping[header] as Exclude<MappableField, "">
-                          ]
-                        : "Select"}
-                    </span>
-                    <svg
-                      className="shrink-0 mr-3 pointer-events-none rotate-90"
-                      width="16"
-                      height="16"
-                      viewBox="0 0 16 16"
-                      fill="none"
-                    >
-                      <path
-                        d="M6 4l4 4-4 4"
-                        stroke="var(--edit-text-primary)"
-                        strokeWidth="1.4"
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                      />
-                    </svg>
-                  </div>
+                  <MappingFieldSelect
+                    header={header}
+                    value={mapping[header] ?? ""}
+                    onChange={(field) => onMappingChange(header, field)}
+                  />
 
                   <div className="flex flex-col gap-[2px] overflow-hidden">
                     {previewRows.map((row, i) => {
@@ -350,7 +511,7 @@ function StepRowSelector({
             Review and select information to import
           </p>
 
-          <div className="w-full overflow-x-auto overflow-y-auto max-h-[380px]">
+          <div className="w-full overflow-x-auto overflow-y-auto flex-1 min-h-0">
             <table
               className="border-collapse w-full"
               style={{ minWidth: `${52 + mappedHeaders.length * COL_MIN}px` }}
@@ -673,7 +834,7 @@ export default function CSVUploadOverlay({
     return (
       <div className={OVERLAY_BACKDROP} onClick={handleClose}>
         <div
-          className={CSV_UPLOAD_OVERLAY_PANEL}
+          className={CSV_UPLOAD_OVERLAY_PANEL_TALL}
           onClick={(e) => e.stopPropagation()}
           role="dialog"
           aria-modal="true"
diff --git a/app/ui/src/app/edit/formStyles.v2.ts b/app/ui/src/app/edit/formStyles.v2.ts
index c0892095..20c0ebae 100644
--- a/app/ui/src/app/edit/formStyles.v2.ts
+++ b/app/ui/src/app/edit/formStyles.v2.ts
@@ -792,14 +792,17 @@ export const ERROR_OVERLAY_FOOTER = "flex items-center justify-end";
 export const CSV_UPLOAD_OVERLAY_PANEL =
   "bg-[var(--edit-bg-primary)] flex flex-col gap-[14px] items-end overflow-hidden p-4 lg:p-6 rounded-[6px] w-full lg:max-w-[800px] mx-2 lg:mx-4 shadow-lg max-h-[90dvh]";
 
+export const CSV_UPLOAD_OVERLAY_PANEL_TALL =
+  "bg-[var(--edit-bg-primary)] flex flex-col gap-[14px] items-end overflow-hidden p-4 lg:p-6 rounded-[6px] w-full lg:max-w-[800px] mx-2 lg:mx-4 shadow-lg h-[90dvh]";
+
 export const CSV_UPLOAD_OVERLAY_INNER =
-  "flex flex-col gap-[16px] items-end w-full";
+  "flex flex-col gap-[16px] items-end w-full flex-1 min-h-0";
 
 export const CSV_UPLOAD_OVERLAY_CONTENT =
-  "flex flex-col gap-[16px] items-center w-full";
+  "flex flex-col gap-[16px] items-center w-full flex-1 min-h-0";
 
 export const CSV_UPLOAD_OVERLAY_TOP =
-  "flex flex-col gap-[24px] items-start w-full";
+  "flex flex-col gap-[24px] items-start w-full flex-1 min-h-0";
 
 export const CSV_UPLOAD_DROP_ZONE =
   "bg-[var(--edit-stone-50)] border border-[var(--edit-stone-200)] border-dashed flex flex-col h-[200px] items-center justify-center overflow-clip pt-[24px] pb-[16px] rounded-[6px] w-full";
@@ -841,6 +844,9 @@ export const CSV_UPLOAD_FILE_CHIP_SIZE =
 export const CSV_UPLOAD_FILE_CHIP_REMOVE =
   "flex items-center justify-center size-4 text-[var(--edit-text-primary)] hover:opacity-70 transition-opacity cursor-pointer";
 
+export const CSV_UPLOAD_SELECT_PLACEHOLDER =
+  "font-normal text-[16px] leading-6 text-[var(--edit-stone-600)] pointer-events-none flex-1 truncate";
+
 // ── SpinnerIcon ───────────────────────────────────────────────────────────────
 
 export const SPINNER_ICON_WRAPPER = "relative size-[33px]";

From 7a07421d856a9f1b77e055b2a9653074a50d7ffc Mon Sep 17 00:00:00 2001
From: Wang Ng <wshng@ucdavis.edu>
Date: Sat, 18 Jul 2026 19:33:15 -0500
Subject: [PATCH 2/3] fix(ui): update 'upload file' to match updated design

---
 app/ui/src/app/upload-route/page.tsx      | 95 ++++++++++++-----------
 app/ui/src/app/upload-save-point/page.tsx | 93 ++++++++++++----------
 app/ui/src/app/welcome/page.tsx           | 24 +++---
 3 files changed, 114 insertions(+), 98 deletions(-)

diff --git a/app/ui/src/app/upload-route/page.tsx b/app/ui/src/app/upload-route/page.tsx
index 42ae6195..3436f311 100644
--- a/app/ui/src/app/upload-route/page.tsx
+++ b/app/ui/src/app/upload-route/page.tsx
@@ -119,48 +119,64 @@ export default function UploadRoutePage() {
         .upload-dropzone {
           width: 100%;
           max-width: 580px;
-          border: 1.5px dashed #ccc;
-          border-radius: 12px;
-          padding: 52px 24px;
+          height: 200px;
+          border: 1px dashed #dcdbd8;
+          border-radius: 6px;
+          padding: 24px 24px 16px;
           display: flex;
           flex-direction: column;
           align-items: center;
           justify-content: center;
-          gap: 10px;
-          cursor: pointer;
-          background: #f9f9f8;
+          gap: 8px;
+          background: #f8f7f5;
           transition: border-color 0.15s, background 0.15s;
-          margin-bottom: 16px;
-          min-height: 160px;
+          margin-bottom: 8px;
         }
 
         .upload-dropzone.dragging {
-          border-color: #4a8c7a;
-          background: #f0f7f5;
+          border-color: #57ac91;
+          background: #f0faf6;
         }
 
-        .upload-dropzone-icon { color: #555; margin-bottom: 4px; }
+        .upload-dropzone-icon { color: #3d3d3c; margin-bottom: 4px; display: flex; }
 
         .upload-dropzone-text {
-          font-size: 14px;
-          color: #333;
+          font-size: 16px;
+          color: #272725;
           text-align: center;
         }
 
         .upload-dropzone-browse {
           font-size: 14px;
-          color: #4a8c7a;
-          font-weight: 500;
+          font-weight: 600;
+          color: #272725;
           text-align: center;
+          background: none;
+          border: none;
+          cursor: pointer;
+          font-family: inherit;
+          padding: 8px 16px;
+          border-radius: 4px;
+          transition: background 0.15s;
+        }
+
+        .upload-dropzone-browse:hover { background: #f6f5f2; }
+
+        .upload-dropzone-description {
+          width: 100%;
+          max-width: 580px;
+          font-size: 14px;
+          color: #464544;
+          margin-bottom: 24px;
         }
 
         .upload-file-row {
           width: 100%;
           max-width: 580px;
-          background: #eef5f3;
-          border: 1px solid #d0e5df;
-          border-radius: 8px;
-          padding: 10px 16px;
+          background: #d5f2e8;
+          border: none;
+          border-radius: 6px;
+          padding: 16px;
           display: flex;
           align-items: center;
           gap: 10px;
@@ -306,7 +322,6 @@ export default function UploadRoutePage() {
           {/* Drop zone — shows spinner while file is being read */}
           <div
             className={`upload-dropzone${isDragging ? " dragging" : ""}`}
-            onClick={() => !isProcessing && inputRef.current?.click()}
             onDragEnter={handleDragEnter}
             onDragOver={(e) => e.preventDefault()}
             onDragLeave={handleDragLeave}
@@ -317,36 +332,23 @@ export default function UploadRoutePage() {
             ) : (
               <>
                 <div className="upload-dropzone-icon">
-                  <svg width="32" height="40" viewBox="0 0 32 40" fill="none">
-                    <rect
-                      x="1"
-                      y="1"
-                      width="22"
-                      height="34"
-                      rx="3"
-                      stroke="currentColor"
-                      strokeWidth="1.5"
-                      fill="none"
-                    />
-                    <path
-                      d="M7 10h10M7 15h10M7 20h6"
-                      stroke="currentColor"
-                      strokeWidth="1.5"
-                      strokeLinecap="round"
-                    />
+                  <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
                     <path
-                      d="M15 26v-7M15 19l-3 3M15 19l3 3"
-                      stroke="currentColor"
-                      strokeWidth="1.5"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
+                      d="M18.667 31.6112H21.4449V23.7083L24.6116 26.875L26.5557 24.9166L20.0003 18.4721L13.5003 24.9721L15.4587 26.9166L18.667 23.7083V31.6112ZM9.44491 36.6666C8.69491 36.6666 8.04435 36.3912 7.49324 35.8404C6.94241 35.2893 6.66699 34.6387 6.66699 33.8887V6.11123C6.66699 5.36123 6.94241 4.71068 7.49324 4.15956C8.04435 3.60873 8.69491 3.33331 9.44491 3.33331H23.917L33.3337 12.75V33.8887C33.3337 34.6387 33.0582 35.2893 32.5074 35.8404C31.9563 36.3912 31.3057 36.6666 30.5557 36.6666H9.44491ZM22.5282 14.0554V6.11123H9.44491V33.8887H30.5557V14.0554H22.5282Z"
+                      fill="currentColor"
                     />
                   </svg>
                 </div>
                 <p className="upload-dropzone-text">
                   Drag and drop .json files here, or
                 </p>
-                <p className="upload-dropzone-browse">Browse files</p>
+                <button
+                  type="button"
+                  className="upload-dropzone-browse"
+                  onClick={() => inputRef.current?.click()}
+                >
+                  Browse files
+                </button>
               </>
             )}
             <input
@@ -362,6 +364,11 @@ export default function UploadRoutePage() {
             />
           </div>
 
+          <p className="upload-dropzone-description">
+            Import your route file to begin. Maximum file size of {MAX_FILE_MB}{" "}
+            MB.
+          </p>
+
           {file && !isProcessing && (
             <div className="upload-file-row">
               <svg
@@ -369,7 +376,7 @@ export default function UploadRoutePage() {
                 height="16"
                 viewBox="0 0 24 24"
                 fill="none"
-                style={{ color: "#4a8c7a", flexShrink: 0 }}
+                style={{ color: "#3d3d3c", flexShrink: 0 }}
               >
                 <path
                   d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48"
diff --git a/app/ui/src/app/upload-save-point/page.tsx b/app/ui/src/app/upload-save-point/page.tsx
index 5cd55402..a8d976e3 100644
--- a/app/ui/src/app/upload-save-point/page.tsx
+++ b/app/ui/src/app/upload-save-point/page.tsx
@@ -156,48 +156,64 @@ export default function UploadSavePointPage() {
         .upload-dropzone {
           width: 100%;
           max-width: 580px;
-          border: 1.5px dashed #ccc;
-          border-radius: 12px;
-          padding: 52px 24px;
+          height: 200px;
+          border: 1px dashed #dcdbd8;
+          border-radius: 6px;
+          padding: 24px 24px 16px;
           display: flex;
           flex-direction: column;
           align-items: center;
           justify-content: center;
-          gap: 10px;
-          cursor: pointer;
-          background: #f9f9f8;
+          gap: 8px;
+          background: #f8f7f5;
           transition: border-color 0.15s, background 0.15s;
-          margin-bottom: 16px;
-          min-height: 160px;
+          margin-bottom: 8px;
         }
 
         .upload-dropzone.dragging {
-          border-color: #4a8c7a;
-          background: #f0f7f5;
+          border-color: #57ac91;
+          background: #f0faf6;
         }
 
-        .upload-dropzone-icon { color: #555; margin-bottom: 4px; }
+        .upload-dropzone-icon { color: #3d3d3c; margin-bottom: 4px; display: flex; }
 
         .upload-dropzone-text {
-          font-size: 14px;
-          color: #333;
+          font-size: 16px;
+          color: #272725;
           text-align: center;
         }
 
         .upload-dropzone-browse {
           font-size: 14px;
-          color: #4a8c7a;
-          font-weight: 500;
+          font-weight: 600;
+          color: #272725;
           text-align: center;
+          background: none;
+          border: none;
+          cursor: pointer;
+          font-family: inherit;
+          padding: 8px 16px;
+          border-radius: 4px;
+          transition: background 0.15s;
+        }
+
+        .upload-dropzone-browse:hover { background: #f6f5f2; }
+
+        .upload-dropzone-description {
+          width: 100%;
+          max-width: 580px;
+          font-size: 14px;
+          color: #464544;
+          margin-bottom: 24px;
         }
 
         .upload-file-row {
           width: 100%;
           max-width: 580px;
-          background: #eef5f3;
-          border: 1px solid #d0e5df;
-          border-radius: 8px;
-          padding: 10px 16px;
+          background: #d5f2e8;
+          border: none;
+          border-radius: 6px;
+          padding: 16px;
           display: flex;
           align-items: center;
           gap: 10px;
@@ -304,7 +320,6 @@ export default function UploadSavePointPage() {
           {/* Drop zone */}
           <div
             className={`upload-dropzone${isDragging ? " dragging" : ""}`}
-            onClick={() => !isProcessing && inputRef.current?.click()}
             onDragEnter={handleDragEnter}
             onDragOver={(e) => e.preventDefault()}
             onDragLeave={handleDragLeave}
@@ -315,34 +330,23 @@ export default function UploadSavePointPage() {
             ) : (
               <>
                 <div className="upload-dropzone-icon">
-                  <svg width="32" height="36" viewBox="0 0 32 36" fill="none">
+                  <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
                     <path
-                      d="M18 2H6a2 2 0 00-2 2v28a2 2 0 002 2h20a2 2 0 002-2V14L18 2z"
-                      stroke="currentColor"
-                      strokeWidth="1.75"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                    />
-                    <path
-                      d="M18 2v12h12"
-                      stroke="currentColor"
-                      strokeWidth="1.75"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                    />
-                    <path
-                      d="M16 22v-6M13 19l3-3 3 3"
-                      stroke="currentColor"
-                      strokeWidth="1.75"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
+                      d="M18.667 31.6112H21.4449V23.7083L24.6116 26.875L26.5557 24.9166L20.0003 18.4721L13.5003 24.9721L15.4587 26.9166L18.667 23.7083V31.6112ZM9.44491 36.6666C8.69491 36.6666 8.04435 36.3912 7.49324 35.8404C6.94241 35.2893 6.66699 34.6387 6.66699 33.8887V6.11123C6.66699 5.36123 6.94241 4.71068 7.49324 4.15956C8.04435 3.60873 8.69491 3.33331 9.44491 3.33331H23.917L33.3337 12.75V33.8887C33.3337 34.6387 33.0582 35.2893 32.5074 35.8404C31.9563 36.3912 31.3057 36.6666 30.5557 36.6666H9.44491ZM22.5282 14.0554V6.11123H9.44491V33.8887H30.5557V14.0554H22.5282Z"
+                      fill="currentColor"
                     />
                   </svg>
                 </div>
                 <p className="upload-dropzone-text">
                   Drag and drop .json or .csv files here, or
                 </p>
-                <p className="upload-dropzone-browse">Browse files</p>
+                <button
+                  type="button"
+                  className="upload-dropzone-browse"
+                  onClick={() => inputRef.current?.click()}
+                >
+                  Browse files
+                </button>
               </>
             )}
             <input
@@ -358,6 +362,11 @@ export default function UploadSavePointPage() {
             />
           </div>
 
+          <p className="upload-dropzone-description">
+            Import a save point or CSV file to continue. Maximum file size of{" "}
+            {MAX_FILE_MB} MB.
+          </p>
+
           {file && !isProcessing && (
             <div className="upload-file-row">
               <svg
@@ -365,7 +374,7 @@ export default function UploadSavePointPage() {
                 height="16"
                 viewBox="0 0 24 24"
                 fill="none"
-                style={{ color: "#4a8c7a", flexShrink: 0 }}
+                style={{ color: "#3d3d3c", flexShrink: 0 }}
               >
                 <path
                   d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48"
diff --git a/app/ui/src/app/welcome/page.tsx b/app/ui/src/app/welcome/page.tsx
index 274ea070..404ef6e9 100644
--- a/app/ui/src/app/welcome/page.tsx
+++ b/app/ui/src/app/welcome/page.tsx
@@ -195,22 +195,22 @@ export default function WelcomePage() {
           <div className="welcome-cards">
             <div className="welcome-card">
               <Image
-                src="/icons/icon-resume-session.png"
+                src="/icons/icon-new-session.png"
                 alt=""
                 width={64}
                 height={64}
                 className="welcome-card-icon"
                 aria-hidden="true"
               />
-              <p className="welcome-card-title">Resume session</p>
+              <p className="welcome-card-title">Start new session</p>
               <p className="welcome-card-desc">
-                Import a saved CSV file from a previous session to continue
-                managing and optimizing routes.
+                Set up vehicles, drivers, and delivery stops to create your
+                optimized route.
               </p>
               <button
                 className="welcome-card-cta"
-                aria-label="Resume session — continue"
-                onClick={() => router.push("/upload-save-point")}
+                aria-label="Start new session — continue"
+                onClick={handleNewSession}
               >
                 Continue
               </button>
@@ -218,22 +218,22 @@ export default function WelcomePage() {
 
             <div className="welcome-card">
               <Image
-                src="/icons/icon-new-session.png"
+                src="/icons/icon-resume-session.png"
                 alt=""
                 width={64}
                 height={64}
                 className="welcome-card-icon"
                 aria-hidden="true"
               />
-              <p className="welcome-card-title">Start new session</p>
+              <p className="welcome-card-title">Resume session</p>
               <p className="welcome-card-desc">
-                Set up vehicles, drivers, and delivery stops to create your
-                optimized route.
+                Import a saved CSV file from a previous session to continue
+                managing and optimizing routes.
               </p>
               <button
                 className="welcome-card-cta"
-                aria-label="Start new session — continue"
-                onClick={handleNewSession}
+                aria-label="Resume session — continue"
+                onClick={() => router.push("/upload-save-point")}
               >
                 Continue
               </button>

From ff614ed6d6465a9c17837a42dab5bbaff4cd85f2 Mon Sep 17 00:00:00 2001
From: Wang Ng <wshng@ucdavis.edu>
Date: Mon, 20 Jul 2026 22:08:56 -0500
Subject: [PATCH 3/3] make csv parser box dynamic based on # of entries

---
 app/ui/src/app/edit/formStyles.v2.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/ui/src/app/edit/formStyles.v2.ts b/app/ui/src/app/edit/formStyles.v2.ts
index 20c0ebae..7ca6c5a5 100644
--- a/app/ui/src/app/edit/formStyles.v2.ts
+++ b/app/ui/src/app/edit/formStyles.v2.ts
@@ -793,7 +793,7 @@ export const CSV_UPLOAD_OVERLAY_PANEL =
   "bg-[var(--edit-bg-primary)] flex flex-col gap-[14px] items-end overflow-hidden p-4 lg:p-6 rounded-[6px] w-full lg:max-w-[800px] mx-2 lg:mx-4 shadow-lg max-h-[90dvh]";
 
 export const CSV_UPLOAD_OVERLAY_PANEL_TALL =
-  "bg-[var(--edit-bg-primary)] flex flex-col gap-[14px] items-end overflow-hidden p-4 lg:p-6 rounded-[6px] w-full lg:max-w-[800px] mx-2 lg:mx-4 shadow-lg h-[90dvh]";
+  "bg-[var(--edit-bg-primary)] flex flex-col gap-[14px] items-end overflow-hidden p-4 lg:p-6 rounded-[6px] w-full lg:max-w-[800px] mx-2 lg:mx-4 shadow-lg min-h-[360px] max-h-[90dvh]";
 
 export const CSV_UPLOAD_OVERLAY_INNER =
   "flex flex-col gap-[16px] items-end w-full flex-1 min-h-0";