feat: Styling for autocomplete on upload

theopensystemslab · Apr 18, 2024 · 398de1c · 398de1c
1 parent 3be9517
commit 398de1c
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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: {