Update forms for consistency and improved experience

app/next-client-app/app/(protected)/scanreports/[id]/details/page.tsx

@@ -46,14 +46,12 @@ export default async function ScanreportDetails(props: ScanReportDetailsProps) {
   }
 
   return (
-    <div>
-      <ScanReportDetailsForm
-        scanreport={scanreport}
-        datasetList={datasetList}
-        users={users}
-        permissions={permissionsDS.permissions}
-        isAuthor={isAuthor}
-      />
-    </div>
+    <ScanReportDetailsForm
+      scanreport={scanreport}
+      datasetList={datasetList}
+      users={users}
+      permissions={permissionsDS.permissions}
+      isAuthor={isAuthor}
+    />
   );
 }

app/next-client-app/app/(protected)/scanreports/[id]/tables/[tableId]/fields/[fieldId]/page.tsx

@@ -69,11 +69,11 @@ export default async function ScanReportsValue(props: ScanReportsValueProps) {
       <div className="gap-2 flex">
         {" "}
         <Link href={`/scanreports/${id}/tables/${tableId}`}>
-          <Button variant="secondary" className="mb-3 bg-muted text-foreground">
+          <Button variant="secondary" className="mb-3">
             Table: {table.name}
           </Button>
         </Link>
-        <Button variant="secondary" className="mb-3 bg-muted text-foreground">
+        <Button variant="secondary" className="mb-3">
           Field: {field.name}
         </Button>
       </div>

app/next-client-app/app/(protected)/scanreports/[id]/tables/[tableId]/page.tsx

@@ -58,7 +58,7 @@ export default async function ScanReportsField(props: ScanReportsFieldProps) {
 
   return (
     <div>
-      <Button variant={"secondary"} className="mb-3 bg-muted text-foreground-3">
+      <Button variant={"secondary"} className="mb-3">
         Table: {tableName.name}
       </Button>
       <div>

app/next-client-app/app/(protected)/scanreports/[id]/tables/[tableId]/update/page.tsx

@@ -6,7 +6,7 @@ import {
 } from "@/api/scanreports";
 import { objToQuery } from "@/lib/client-utils";
 import { AlertCircleIcon } from "lucide-react";
-import { Alert } from "@/components/ui/alert";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { ScanReportTableUpdateForm } from "@/components/scanreports/ScanReportTableUpdateForm";
 import { Button } from "@/components/ui/button";
 import Link from "next/link";
@@ -78,19 +78,15 @@ export default async function UpdateTable(props: UpdateTableProps) {
         </Button>
       </Link>
       {(table.date_event === null || table.person_id === null) && (
-        <Alert className="flex items-center gap-3 bg-accent text-accent-foreground mt-3 w-1/2">
-          <div>
-            <AlertCircleIcon />
-          </div>
-          <div>
-            {" "}
-            Mapping Rules cannot be generated without the Person ID and Date
-            Event being set.
-            <br />
+        <Alert className="max-w-2xl mb-5">
+          <AlertCircleIcon />
+          <AlertTitle>Mapping Rules cannot be generated without Person ID and Date Event event being set</AlertTitle>
+          <AlertDescription>
+            <p>
             Once you set these, Mapping Rules will be generated for all Concepts
             currently associated to the table.
-            <br />
-          </div>
+            </p>
+          </AlertDescription>
         </Alert>
       )}
       <div className="mt-1">

app/next-client-app/app/(protected)/scanreports/create/page.tsx

@@ -1,7 +1,9 @@
 import { getDataPartners } from "@/api/datasets";
 import { getAllProjects } from "@/api/projects";
 import { CreateScanReportForm } from "@/components/scanreports/CreateScanReportForm";
-import { FileScan } from "lucide-react";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { FileScan, Info } from "lucide-react";
 import Link from "next/link";
 
 export default async function ScanReports() {
@@ -17,9 +19,26 @@ export default async function ScanReports() {
         </Link>
       </div>
       <div className="flex justify-between mt-3">
-        <h1 className="text-4xl font-semibold">Upload Scan Report</h1>
+        <h1 className="text-2xl font-semibold">Upload Scan Report</h1>
       </div>
       <div className="mt-4">
+        <Alert className="mb-6 max-w-md">
+          <Info />
+          <AlertTitle>Need help uploading a scan report?</AlertTitle>
+          <AlertDescription>
+            Please ensure your scan report follows the correct format. 
+            <Button variant="link" asChild className="p-0">
+              <Link
+                href="https://carrot.ac.uk/mapper/user_guide/upload_scan_report"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="underline text-primary hover:text-primary/80"
+                >
+                Read the guide
+              </Link>
+            </Button>
+          </AlertDescription>
+        </Alert>
         <CreateScanReportForm dataPartners={partners} projects={projects} />
       </div>
     </>

app/next-client-app/app/globals.css

@@ -19,6 +19,8 @@
   --accent: 240 4.8% 95.9%;
   --accent-foreground: 240 10% 3.9%;
   --primary: 0 0% 0%; /* black */
+  /* --input: oklch(0.922 0 0); */
+  --input: 320 0% 90%;
   --primary-foreground: 0 0% 100%; /* white */
   --secondary: 210 40% 96.1%;
   --secondary-foreground: 222.2 47.4% 11.2%;
@@ -44,6 +46,7 @@
   --secondary: 222.2 47.4% 11.2%;
   --secondary-foreground: 210 40% 98%;
   --ring: 215 100% 65%; /* #60a5fa, a visible blue */
+  --input: 300 50% 100% / 0.15;
 }
 
 button.rounded-full:hover,
@@ -52,76 +55,176 @@ button.rounded-full:focus-visible {
   transition: background-color 0.2s;
 }
 
-/* React Select using shadcn/ui tokens */
+/* React Select using shadcn/ui tokens - updated to match shadcn design */
+.my-react-select-container {
+  border-color: hsl(var(--border)) !important;
+  border-radius: 0.5rem !important;
+  background-color: hsl(var(--background)) !important;
+  color: hsl(var(--foreground)) !important;
+  font-size: 0.875rem !important;
+  line-height: 1.25rem !important;
+  min-height: 2.5rem !important;
+}
+
+.my-react-select-container .my-react-select__control {
+  border: 1px solid hsl(var(--input)) !important;
+  border-radius: 0.5rem !important;
+  background-color: hsl(var(--background)) !important;
+  color: hsl(var(--foreground)) !important;
+  box-shadow: none !important;
+  min-height: 2.5rem !important;
+  transition: border-color 0.2s ease-in-out !important;
+}
+
+.my-react-select-container .my-react-select__control:hover {
+  border-color: hsl(var(--border)) !important;
+}
+
+.my-react-select-container .my-react-select__control--is-focused {
+  border-color: hsl(var(--ring)) !important;
+  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2) !important;
+  outline: none !important;
+}
+
+.my-react-select-container .my-react-select__control--is-disabled {
+  background-color: hsl(var(--muted)) !important;
+  color: hsl(var(--muted-foreground)) !important;
+  cursor: not-allowed !important;
+}
+
 .my-react-select__menu {
   background-color: hsl(var(--popover)) !important;
   color: hsl(var(--popover-foreground)) !important;
+  border: 1px solid hsl(var(--border)) !important;
+  border-radius: 0.5rem !important;
+  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important;
+  z-index: 50 !important;
 }
 
 .my-react-select__option {
   background-color: hsl(var(--popover)) !important;
-  color: hsl(var(--foreground)) !important;
-  cursor: pointer;
+  color: hsl(var(--popover-foreground)) !important;
+  cursor: pointer !important;
+  padding: 0.5rem 0.75rem !important;
+  font-size: 0.875rem !important;
+  line-height: 1.25rem !important;
+  transition: background-color 0.2s ease-in-out !important;
 }
 
 .my-react-select__option--is-focused {
   background-color: hsl(var(--accent)) !important;
-  color: hsl(var(--foreground)) !important;
+  color: hsl(var(--accent-foreground)) !important;
 }
 
 .my-react-select__option--is-selected {
   background-color: hsl(var(--accent)) !important;
-  color: hsl(var(--foreground)) !important;
-  font-weight: 600;
+  color: hsl(var(--accent-foreground)) !important;
+  font-weight: 600 !important;
 }
 
-.dark .my-react-select__option--is-selected {
-  background-color: hsl(var(--accent)) !important;
+.my-react-select__single-value {
   color: hsl(var(--foreground)) !important;
-  font-weight: 600;
-  border: 1px solid hsl(var(--muted-foreground));
+  font-size: 0.875rem !important;
+  line-height: 1.25rem !important;
 }
 
-.my-react-select__single-value,
-.my-react-select__multi-value__label {
-  color: hsl(var(--foreground));
+.my-react-select__placeholder {
+  color: hsl(var(--muted-foreground)) !important;
+  font-size: 0.875rem !important;
+  line-height: 1.25rem !important;
+}
+
+.my-react-select__input-container {
+  color: hsl(var(--foreground)) !important;
+  font-size: 0.875rem !important;
+  line-height: 1.25rem !important;
 }
 
 .my-react-select__multi-value {
-  background-color: hsl(var(--primary)) !important;
+  background-color: hsl(var(--secondary)) !important;
   border-radius: 0.375rem !important;
+  margin: 0.125rem !important;
+  padding: 0.125rem 0.375rem !important;
 }
 
 .my-react-select__multi-value__label {
-  color: hsl(var(--primary-foreground)) !important;
-  font-weight: 600;
+  color: hsl(var(--secondary-foreground)) !important;
+  font-weight: 500 !important;
+  font-size: 0.75rem !important;
+  line-height: 1rem !important;
   max-width: none !important;
   overflow: visible !important;
   text-overflow: unset !important;
   white-space: normal !important;
 }
 
 .my-react-select__multi-value__remove {
-  color: #ef4444 !important;
+  color: hsl(var(--muted-foreground)) !important;
   background: transparent !important;
-  cursor: pointer;
-  transition: color 0.2s;
+  cursor: pointer !important;
+  transition: color 0.2s ease-in-out !important;
+  padding: 0 0.25rem !important;
+  margin-left: 0.25rem !important;
 }
+
 .my-react-select__multi-value__remove:hover {
-  color: #b91c1c !important;
+  color: hsl(var(--foreground)) !important;
   background: transparent !important;
 }
 
-.dark .my-react-select__option--is-focused {
-  background-color: hsl(var(--muted)) !important;
+.my-react-select__indicator-separator {
+  background-color: hsl(var(--border)) !important;
+  margin: 0.5rem 0 !important;
+}
+
+.my-react-select__dropdown-indicator {
+  color: hsl(var(--muted-foreground)) !important;
+  padding: 0.5rem !important;
+  transition: color 0.2s ease-in-out !important;
+}
+
+.my-react-select__dropdown-indicator:hover {
   color: hsl(var(--foreground)) !important;
 }
 
-.dark .my-react-select__option--is-selected {
-  background-color: hsl(var(--muted)) !important;
+.my-react-select__clear-indicator {
+  color: hsl(var(--muted-foreground)) !important;
+  padding: 0.5rem !important;
+  transition: color 0.2s ease-in-out !important;
+}
+
+.my-react-select__clear-indicator:hover {
   color: hsl(var(--foreground)) !important;
 }
 
+/* Dark mode adjustments */
+.dark .my-react-select-container {
+  border-color: hsl(var(--input)) !important;
+}
+
+.dark .my-react-select-container .my-react-select__control {
+  border-color: hsl(var(--input)) !important;
+  background-color: hsl(var(--background)) !important;
+}
+
+.dark .my-react-select__option--is-focused {
+  background-color: hsl(var(--accent)) !important;
+  color: hsl(var(--accent-foreground)) !important;
+}
+
+.dark .my-react-select__option--is-selected {
+  background-color: hsl(var(--accent)) !important;
+  color: hsl(var(--accent-foreground)) !important;
+}
+
+.dark .my-react-select__multi-value {
+  background-color: hsl(var(--secondary)) !important;
+}
+
+.dark .my-react-select__multi-value__label {
+  color: hsl(var(--secondary-foreground)) !important;
+}
+
 .avatar-initial {
   background-color: #f98109 !important;
   color: #fff !important;
@@ -178,19 +281,7 @@ input[type="file"]::file-selector-button {
   border: none;
 }
 
-.my-react-select-container {
-  border-color: hsl(var(--primary)) !important;
-}
-
-.my-react-select-container .my-react-select__control {
-  border-color: hsl(var(--primary)) !important;
-  box-shadow: none;
-}
 
-.my-react-select-container .my-react-select__control--is-focused {
-  border-color: hsl(var(--ring)) !important;
-  box-shadow: 0 0 0 2px hsl(var(--ring)) !important;
-}
 
 /* Make radix switch visible when off */
 [data-slot="switch"][data-state="unchecked"] {

app/next-client-app/components/core/mode-toggle.tsx

@@ -21,7 +21,7 @@ export function ModeToggle() {
         <Button
           variant="outline"
           size="icon"
-          className="group hover:bg-muted transition-colors"
+          className="group transition-colors"
         >
           <Sun className="h-[1.2rem] w-[1.2rem] text-black dark:text-white rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0 group-hover:text-blue-400" />
           <Moon className="absolute h-[1.2rem] w-[1.2rem] text-black dark:text-white rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100 group-hover:text-blue-400" />

app/next-client-app/components/core/nav-button.tsx

@@ -52,9 +52,7 @@ export const NavButton = ({
       <Button
         variant="ghost"
         className={cn(
-          "rounded-md px-3 py-1 transition-colors",
-          "hover:bg-muted hover:text-foreground",
-          isActive && "bg-muted text-foreground underline"
+          isActive && "bg-muted"
         )}
       >
         {Icon && <Icon className="mr-2 size-4" />}

app/next-client-app/components/core/sidebar-button.tsx

@@ -22,7 +22,7 @@ export function SidebarButton({
       variant="ghost"
       className={cn(
         "gap-2 justify-start focus-visible:ring-0 dark:focus-visible:ring-offset-0",
-        "hover:bg-muted hover:text-foreground transition-colors",
+        "hover:text-foreground transition-colors",
         "text-black dark:text-white",
         className
       )}