style: update header layout with consistent button styling and spacing adjustments (#3)

Author: ahnv

examples/react-example/package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@imagekit/editor": "1.1.0",
+    "@imagekit/editor": "1.2.0",
     "@types/node": "^20.11.24",
     "@types/react": "^17.0.2",
     "@types/react-dom": "^17.0.2",

packages/imagekit-editor-dev/src/components/editor/wrapper.tsx

@@ -8,7 +8,7 @@ export function EditorWrapper({ children }: EditorWrapperProps) {
   return (
     <Box
       position="fixed"
-      zIndex="modal"
+      zIndex="2100"
       height="100vh"
       width="100vw"
       top={0}

packages/imagekit-editor-dev/src/components/header/index.tsx

@@ -57,13 +57,14 @@ export const Header = ({ onClose, exportOptions }: HeaderProps) => {
       alignItems="center"
       flexDirection="row"
       px="1rem"
+      paddingRight="0"
       borderBottomWidth="1px"
       borderBottomColor="editorBattleshipGrey.100"
-      gap="4"
       flexShrink={0}
     >
       <Icon
         boxSize={"5"}
+        mr="4"
         as={imageList.length === 1 ? PiImageSquare : PiImagesSquare}
       />
       <Text>{headerText}</Text>
@@ -87,23 +88,28 @@ export const Header = ({ onClose, exportOptions }: HeaderProps) => {
                 aria-label={exportOption.label}
                 variant="ghost"
                 fontWeight="normal"
+                height="full"
+                borderRadius="0"
+                px="8"
                 size="sm"
                 onClick={() => exportOption.onClick(imageList, currentImage)}
               >
                 {exportOption.label}
               </Button>
             ) : (
               <Menu key={`export-menu-${exportOption.label}`}>
-                <MenuButton>
-                  <Button
-                    leftIcon={exportOption.icon}
-                    aria-label={exportOption.label}
-                    variant="ghost"
-                    fontWeight="normal"
-                    size="sm"
-                  >
-                    {exportOption.label}
-                  </Button>
+                <MenuButton
+                  as={Button}
+                  leftIcon={exportOption.icon}
+                  aria-label={exportOption.label}
+                  variant="ghost"
+                  fontWeight="normal"
+                  height="full"
+                  borderRadius="0"
+                  px="8"
+                  size="sm"
+                >
+                  {exportOption.label}
                 </MenuButton>
                 <MenuList>
                   {exportOption.options
@@ -132,6 +138,9 @@ export const Header = ({ onClose, exportOptions }: HeaderProps) => {
         onClick={onClose}
         variant="ghost"
         fontWeight="normal"
+        height="full"
+        borderRadius="0"
+        px="8"
         size="sm"
       >
         Close

packages/imagekit-editor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imagekit/editor",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Image Editor powered by ImageKit",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",

yarn.lock

@@ -1651,7 +1651,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@imagekit/editor@npm:1.1.0, @imagekit/editor@workspace:packages/imagekit-editor":
+"@imagekit/editor@npm:1.2.0, @imagekit/editor@workspace:packages/imagekit-editor":
   version: 0.0.0-use.local
   resolution: "@imagekit/editor@workspace:packages/imagekit-editor"
   peerDependencies:
@@ -4188,7 +4188,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "react-example@workspace:examples/react-example"
   dependencies:
-    "@imagekit/editor": "npm:1.1.0"
+    "@imagekit/editor": "npm:1.2.0"
     "@types/node": "npm:^20.11.24"
     "@types/react": "npm:^17.0.2"
     "@types/react-dom": "npm:^17.0.2"