Styling adjustments for file select components

Implement updated design to also support usage on content without white a background.
vivid-planet · Jul 22, 2024 · 8de8769 · 8de8769
1 parent acc7e27
commit 8de8769
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 11 deletions.
diff --git a/packages/admin/admin/src/form/file/FileDropzone.tsx b/packages/admin/admin/src/form/file/FileDropzone.tsx
@@ -156,7 +156,7 @@ const Dropzone = createComponentSlot("div")<FileDropzoneClassKey, OwnerState>({
         align-self: stretch;
         border-radius: 4px;
         border: 1px dashed ${theme.palette.grey[200]};
-        background-color: transparent;
+        background-color: white;
         transition: background-color 200ms, border-color 200ms;
         cursor: pointer;
 

diff --git a/packages/admin/admin/src/form/file/FileSelectListItem.tsx b/packages/admin/admin/src/form/file/FileSelectListItem.tsx
@@ -87,7 +87,7 @@ export const FileSelectListItem = (inProps: FileSelectListItemProps) => {
     } = iconMapping;
 
     if ("loading" in file && !file.name) {
-        return <Skeleton variant="rounded" height={35} animation="wave" width="100%" sx={{ borderRadius: 2 }} {...slotProps?.skeleton} />;
+        return <Skeleton variant="rounded" animation="wave" {...slotProps?.skeleton} />;
     }
 
     const ownerState: OwnerState = {
@@ -164,6 +164,7 @@ const Root = createComponentSlot("div")<FileSelectListItemClassKey, OwnerState>(
         background-color: ${theme.palette.grey[50]};
         transition: background-color 200ms;
         width: 100%;
+        border: 1px solid ${theme.palette.grey[100]};
         box-sizing: border-box;
 
         &:hover {
@@ -190,13 +191,19 @@ const Root = createComponentSlot("div")<FileSelectListItemClassKey, OwnerState>(
         `}
     `,
 );
-
 const Skeleton = createComponentSlot(MuiSkeleton)<FileSelectListItemClassKey>({
     componentName: "FileSelectListItem",
     slotName: "skeleton",
-})(css`
-    ${commonItemSpacingStyles};
-`);
+})(
+    ({ theme }) => css`
+        width: 100%;
+        height: 36px;
+        border: 1px solid ${theme.palette.grey[100]};
+        border-radius: 4px;
+        box-sizing: border-box;
+        ${commonItemSpacingStyles};
+    `,
+);
 
 const Content = createComponentSlot("div")<FileSelectListItemClassKey>({
     componentName: "FileSelectListItem",
@@ -237,9 +244,9 @@ const FileName = createComponentSlot(Typography)<FileSelectListItemClassKey, Own
         overflow: hidden;
         white-space: nowrap;
         flex-grow: 1;
-        line-height: 19px;
-        padding-top: 8px;
-        padding-bottom: 8px;
+        line-height: 16px;
+        padding-top: 9px;
+        padding-bottom: 9px;
 
         ${ownerState.hasErrorWithoutDetails &&
         css`
@@ -248,7 +255,8 @@ const FileName = createComponentSlot(Typography)<FileSelectListItemClassKey, Own
 
         ${ownerState.hasErrorWithDetails &&
         css`
-            padding-bottom: 1px;
+            padding-top: 7px;
+            padding-bottom: 4px;
         `}
 
         ${ownerState.disabled &&
@@ -296,7 +304,8 @@ const ErrorDetails = createComponentSlot("div")<FileSelectListItemClassKey>({
         align-items: center;
         gap: ${theme.spacing(1)};
         color: ${theme.palette.error.main};
-        padding-bottom: 8px;
+        padding-bottom: 7px;
+        font-size: 12px;
         line-height: 0;
     `,
 );