Some style updates

Author: fgatti675

packages/firecms_cloud/src/components/FireCMSCloudDrawer.tsx

@@ -88,7 +88,7 @@ export function FireCMSCloudDrawer() {
                 {groups.map((group) => (
                     <div
                         key={`group_${group}`}
-                        className={"bg-surface-50 dark:bg-surface-800 dark:bg-opacity-30 my-4 rounded-lg ml-4"}>
+                        className={"bg-surface-50 dark:bg-surface-800 dark:bg-opacity-30 my-4 rounded-lg rounded-lg ml-3 mr-1"}>
                         {buildGroupHeader(group)}
                         {Object.values(navigationEntries)
                             .filter(e => e.group === group)

packages/firecms_core/src/app/Scaffold.tsx

@@ -168,7 +168,7 @@ function DrawerWrapper(props: {
                      sideOffset={12}
                      asChild={true}>
                 <div
-                    className="ml-2 fixed top-1 left-2 sm:top-2 sm:left-3 !bg-surface-50 dark:!bg-surface-900 rounded-full w-fit z-20">
+                    className="ml-2 fixed top-1 left-2 sm:top-2 sm:left-2 !bg-surface-50 dark:!bg-surface-900 rounded-full w-fit z-20">
                     <IconButton
                         color="inherit"
                         aria-label="Open menu"
@@ -209,15 +209,15 @@ function DrawerWrapper(props: {
                 aria-label="Open drawer"
                 onClick={() => props.setDrawerOpen(true)}
                 size="large"
-                className="absolute sm:top-2 sm:left-5 top-1 left-2"
+                className="absolute sm:top-2 sm:left-4 top-1 left-2"
             >
                 <MenuIcon/>
             </IconButton>
             <Sheet side={"left"}
                    transparent={true}
                    open={props.open}
                    onOpenChange={props.setDrawerOpen}
-                   title={"Navigaion drawer"}
+                   title={"Navigation drawer"}
                    overlayClassName={"bg-white bg-opacity-80"}
             >
                 {innerDrawer}

packages/firecms_core/src/core/DefaultDrawer.tsx

@@ -85,7 +85,7 @@ export function DefaultDrawer({
 
                     {groupsWithoutAdmin.map((group) => (
                         <div
-                            className={"bg-surface-50 dark:bg-surface-800 dark:bg-opacity-30 my-4 rounded-lg ml-4"}
+                            className={"bg-surface-50 dark:bg-surface-800 dark:bg-opacity-30 my-4 rounded-lg ml-3 mr-1"}
                             key={`drawer_group_${group}`}>
                             {buildGroupHeader(group)}
                             {Object.values(navigationEntries)
@@ -163,7 +163,7 @@ export function DrawerLogo({ logo }: {
             transition: "padding 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms",
             padding: drawerOpen ? "32px 144px 0px 24px" : "72px 12px 0px 12px"
         }}
-        className={cls("cursor-pointer ml-4")}>
+        className={cls("cursor-pointer ml-3 mr-1")}>
 
         <Tooltip title={"Home"}
                  sideOffset={20}

packages/firecms_core/src/core/DrawerNavigationItem.tsx

@@ -34,12 +34,12 @@ export function DrawerNavigationItem({
                 transition: drawerOpen ? "width 150ms ease-in" : undefined
             }}
             className={({ isActive }: any) => cls("rounded-lg truncate",
-                "hover:bg-surface-accent-300 hover:bg-opacity-75 dark:hover:bg-surface-accent-800 dark:hover:bg-opacity-75 text-text-secondary dark:text-surface-200 hover:text-surface-900 hover:dark:text-white",
+                "hover:bg-surface-accent-300 hover:bg-opacity-75 dark:hover:bg-surface-accent-800 dark:hover:bg-opacity-75 text-text-primary dark:text-surface-200 hover:text-surface-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-4 h-12" : "pl-4 h-11",
-                "font-medium text-sm",
+                "font-semibold text-xs",
                 isActive ? "bg-surface-accent-200 bg-opacity-60 dark:bg-surface-800 dark:bg-opacity-50" : ""
             )}
             to={url}

packages/ui/src/components/IconButton.tsx

@@ -13,7 +13,7 @@ export type IconButtonProps<C extends React.ElementType> =
     onClick?: React.MouseEventHandler<any>
 }
 
-const buttonClasses = "hover:bg-surface-accent-200 hover:bg-opacity-75 dark:hover:bg-surface-accent-800";
+const buttonClasses = "hover:bg-surface-accent-200 hover:bg-opacity-75 dark:hover:bg-surface-accent-800 hover:scale-110 transition-transform";
 const baseClasses = "inline-flex items-center justify-center p-2 text-sm font-medium focus:outline-none transition-colors ease-in-out duration-150";
 const colorClasses = "text-surface-accent-600 visited:text-surface-accent-600 dark:text-surface-accent-300 dark:visited:text-surface-300";
 const sizeClasses = {