From 398de1c85c1fe1e452f3976cb7595a8cbd351997 Mon Sep 17 00:00:00 2001
From: Ian Jones <hello@ianjo.uk>
Date: Thu, 18 Apr 2024 10:14:29 +0100
Subject: [PATCH] feat: Styling for autocomplete on upload

---
 .../components/FileUploadAndLabel/SelectMultiple.tsx      | 6 +++---
 .../shared/PrivateFileUpload/UploadedFileCard.tsx         | 4 ++--
 editor.planx.uk/src/theme.ts                              | 8 ++++++++
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/SelectMultiple.tsx b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/SelectMultiple.tsx
index 11bda3f981..a276312411 100644
--- a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/SelectMultiple.tsx
+++ b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/SelectMultiple.tsx
@@ -18,7 +18,7 @@ import TextField from "@mui/material/TextField";
 import Typography from "@mui/material/Typography";
 import capitalize from "lodash/capitalize";
 import React, { forwardRef, PropsWithChildren, useMemo, useState } from "react";
-import { focusStyle } from "theme";
+import { borderedFocusStyle } from "theme";
 
 import { FileUploadSlot } from "../FileUpload/Public";
 import {
@@ -65,7 +65,7 @@ const StyledAutocomplete = styled(
 
 const StyledTextField = styled(TextField)(({ theme }) => ({
   "&:focus-within": {
-    ...focusStyle,
+    ...borderedFocusStyle,
     [`& .${outlinedInputClasses.notchedOutline}`]: {
       border: "1px solid transparent !important",
     },
@@ -126,9 +126,9 @@ const renderGroup: AutocompleteProps<
   <List key={`group-${key}`} role="group" sx={{ paddingY: 0 }}>
     <ListSubheader
       role="presentation"
+      disableSticky
       sx={(theme) => ({
         borderTop: 1,
-        borderBottom: 1,
         borderColor: theme.palette.border.main,
       })}
     >
diff --git a/editor.planx.uk/src/@planx/components/shared/PrivateFileUpload/UploadedFileCard.tsx b/editor.planx.uk/src/@planx/components/shared/PrivateFileUpload/UploadedFileCard.tsx
index 34d36d0ee8..e9521eb16a 100644
--- a/editor.planx.uk/src/@planx/components/shared/PrivateFileUpload/UploadedFileCard.tsx
+++ b/editor.planx.uk/src/@planx/components/shared/PrivateFileUpload/UploadedFileCard.tsx
@@ -20,8 +20,8 @@ interface Props extends FileUploadSlot {
 
 const Root = styled(Box)(({ theme }) => ({
   border: `1px solid ${theme.palette.border.main}`,
-  marginBottom: theme.spacing(1),
-  marginTop: theme.spacing(2),
+  marginBottom: theme.spacing(0.5),
+  marginTop: theme.spacing(5),
 }));
 
 const FileCard = styled(Box)(({ theme }) => ({
diff --git a/editor.planx.uk/src/theme.ts b/editor.planx.uk/src/theme.ts
index 8ef8c36013..2d5cc11689 100644
--- a/editor.planx.uk/src/theme.ts
+++ b/editor.planx.uk/src/theme.ts
@@ -223,6 +223,14 @@ const getThemeOptions = ({
           },
         },
       },
+      MuiPopper: {
+        styleOverrides: {
+          root: {
+            // Override default popover box-shadow to increase visual separation
+            boxShadow: "0 0 10px 4px rgba(0, 0, 0, 0.5) !important",
+          },
+        },
+      },
       MuiContainer: {
         styleOverrides: {
           root: {