Drawer updates

firecmsco · Sep 10, 2024 · 2911972 · 2911972
1 parent 7db8ea9
commit 2911972
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 10 deletions.
diff --git a/packages/firecms_cloud/src/FireCMSCloudApp.tsx b/packages/firecms_cloud/src/FireCMSCloudApp.tsx
@@ -278,6 +278,10 @@ function ErrorDelegatingLoginView({
         <div>
             {errorBody}
         </div>
+        <div>
+            Some login errors may be caused by the user not being registered in the client project.
+            Make sure a user exists in the client project with the same email as the one trying to log in.
+        </div>
         <Button variant="outlined" onClick={onLogout}>Sign out</Button>
     </CenteredView>;
 }

diff --git a/packages/firecms_core/src/components/EntityCollectionTable/fields/TableReferenceField.tsx b/packages/firecms_core/src/components/EntityCollectionTable/fields/TableReferenceField.tsx
@@ -152,7 +152,7 @@ export const TableReferenceFieldInternal = React.memo(
 
                 {valueNotSet &&
                     <EntityPreviewContainer
-                        className={cls("px-4 py-1 text-sm font-medium flex items-center uppercase",
+                        className={cls("px-4 py-2 text-sm font-medium flex items-center uppercase",
                             multiselect ? "gap-4" : "gap-6",
                             disabled
                                 ? "text-slate-500"

diff --git a/packages/firecms_core/src/core/DefaultDrawer.tsx b/packages/firecms_core/src/core/DefaultDrawer.tsx
@@ -51,9 +51,9 @@ export function DefaultDrawer({
     const groupsWithoutAdmin = groups.filter(g => g !== "Admin");
 
     const buildGroupHeader = useCallback((group?: string) => {
-        if (!drawerOpen) return <div className="h-12 w-full"/>;
+        if (!drawerOpen) return <div className="w-full"/>;
         return <div
-            className="pt-8 pl-6 pr-8 pb-2 flex flex-row items-center">
+            className="pl-6 pr-8 py-4 flex flex-row items-center">
             <Typography variant={"caption"}
                         color={"secondary"}
                         className="font-medium flex-grow line-clamp-1">
@@ -78,10 +78,14 @@ export function DefaultDrawer({
 
                 <DrawerLogo logo={logo}/>
 
-                <div className={"flex-grow overflow-scroll no-scrollbar"}>
+                <div className={"mt-4 flex-grow overflow-scroll no-scrollbar"}
+                style={{
+                    maskImage: "linear-gradient(to bottom, transparent 0, black 20px, black calc(100% - 20px), transparent 100%)",
+                }}>
 
                     {groupsWithoutAdmin.map((group) => (
-                        <React.Fragment
+                        <div
+                            className={"bg-gray-50 dark:bg-gray-800 dark:bg-opacity-30 my-4 rounded-lg ml-4"}
                             key={`drawer_group_${group}`}>
                             {buildGroupHeader(group)}
                             {Object.values(navigationEntries)
@@ -96,7 +100,7 @@ export function DefaultDrawer({
                                         onClick={() => onClick(view)}
                                         url={view.url}
                                         name={view.name}/>)}
-                        </React.Fragment>
+                        </div>
                     ))}
 
                 </div>

diff --git a/packages/firecms_core/src/core/DrawerNavigationItem.tsx b/packages/firecms_core/src/core/DrawerNavigationItem.tsx
@@ -30,17 +30,17 @@ export function DrawerNavigationItem({
         <NavLink
             onClick={onClick}
             style={{
-                width: !drawerOpen ? "72px" : "280px",
+                width: "100%",
                 transition: drawerOpen ? "width 150ms ease-in" : undefined
             }}
-            className={({ isActive }: any) => cls("rounded-r-lg truncate",
+            className={({ isActive }: any) => cls("rounded-lg truncate",
                 "hover:bg-slate-300 hover:bg-opacity-75 dark:hover:bg-gray-700 dark:hover:bg-opacity-75 text-gray-800 dark:text-gray-200 hover:text-gray-900 hover:dark:text-white",
                 "flex flex-row items-center mr-8",
                 // "transition-all ease-in-out delay-100 duration-300",
                 // drawerOpen ? "w-full" : "w-18",
-                drawerOpen ? "pl-8 h-12" : "pl-6 h-11",
+                drawerOpen ? "pl-4 h-12" : "pl-4 h-11",
                 "font-medium text-sm",
-                isActive ? "bg-slate-200 bg-opacity-60 dark:bg-gray-800 dark:bg-opacity-30" : ""
+                isActive ? "bg-slate-200 bg-opacity-60 dark:bg-gray-800 dark:bg-opacity-50" : ""
             )}
             to={url}
         >