@lateralus-ai/shipping-ui 1.4.11 → 1.4.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lateralus-ai/shipping-ui",
-  "version": "1.4.11",
+  "version": "1.4.12",
   "description": "Shared UI theme and components for Lateralus shipping applications",
   "main": "dist/index.cjs",
   "module": "dist/index.esm.js",

package/src/components/PdfViewer/PdfViewer.tsx

@@ -73,10 +73,10 @@ export const PdfViewer = ({
         {title}
       </ModalPanel.Header>
 
-      <div className="grid grow h-full overflow-hidden">
+      <div className="grid grow h-full overflow-hidden shadow">
         <div
           className={cn(
-            "col-start-1 row-start-1 bg-gray-200 h-full overflow-hidden select-none p-8 flex justify-center items-center",
+            "col-start-1 row-start-1 bg-gray-200 h-full overflow-hidden select-none p-8 flex justify-center items-center mt-8",
             isDragging ? "cursor-grabbing" : "cursor-grab"
           )}
           onMouseDown={panActions.handleMouseDown}
@@ -114,67 +114,19 @@ export const PdfViewer = ({
           </div>
         </div>
 
-        <div className="col-start-1 row-start-1 self-end p-4 flex gap-2 justify-between w-full z-10">
-          <ButtonGroup className="divide-x-0 h-[52px]">
+        <div className="col-start-1 row-start-1 self-start flex justify-between w-full z-10 flex-wrap items-center gap-3 bg-gray-50 p-2 shadow">
+          <ButtonGroup className="divide-x-1 gap-1">
             <IconButton
               variant="filled"
               color="white"
-              className="py-[26px]"
-              onClick={zoomActions.zoomOut}
-            >
-              <Icon icon="lucide:minus" />
-            </IconButton>
-            <Tooltip content="Click to reset zoom and pan">
-              <button
-                className="!bg-white text-center cursor-pointer w-[60px]"
-                onClick={() => {
-                  zoomActions.reset()
-                  panActions.reset()
-                }}
-              >
-                {zoom}%
-              </button>
-            </Tooltip>
-            <IconButton
-              variant="filled"
-              color="white"
-              className="py-[26px]"
-              onClick={zoomActions.zoomIn}
-            >
-              <Icon icon="lucide:plus" />
-            </IconButton>
-          </ButtonGroup>
-          <ButtonGroup className="divide-x-0 h-[52px]">
-            <IconButton
-              variant="filled"
-              color="white"
-              className="py-[26px]"
-              onClick={rotationActions.rotateClockwise}
-            >
-              <Icon icon="lucide:iteration-cw" />
-            </IconButton>
-
-            <IconButton
-              variant="filled"
-              color="white"
-              className="py-[26px]"
-              onClick={rotationActions.rotateCounterClockwise}
-            >
-              <Icon icon="lucide:iteration-ccw" />
-            </IconButton>
-          </ButtonGroup>
-          <ButtonGroup className="divide-x-0 ">
-            <IconButton
-              variant="filled"
-              color="white"
-              className="py-[26px]"
+              className="w-8 h-8 rounded border border-gray-300 bg-white p-2 text-gray-700 hover:bg-gray-200 disabled:opacity-50 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 focus:outline-none max-w-auto"
               onClick={pageActions.prevPage}
               disabled={currentPage === 1}
             >
               <Icon icon="lucide:chevron-left" />
             </IconButton>
             <input
-              className="bg-white pl-4 flex items-center w-[50px] text-center focus:outline-none w-[60px]"
+              className="w-14 h-8 rounded border !border-gray-300 bg-white px-1 py-1 text-center text-sm text-gray-700 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
               value={currentPage}
               onChange={(e: ChangeEvent<HTMLInputElement>) => {
                 const page = parseInt(e.target.value)
@@ -186,19 +138,70 @@ export const PdfViewer = ({
               min="1"
               max={totalPages}
             />
-            <div className="flex items-center bg-white px-2">
+            <div className="flex items-center bg-transparent px-2">
               of {totalPages}
             </div>
             <IconButton
               variant="filled"
               color="white"
-              className="py-[26px]"
+              className="w-8 h-8 rounded border !border-gray-300 bg-white p-2 text-gray-700 hover:bg-gray-200 disabled:opacity-50 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 focus:outline-none max-w-auto"
               onClick={pageActions.nextPage}
               disabled={currentPage === totalPages}
             >
               <Icon icon="lucide:chevron-right" />
             </IconButton>
           </ButtonGroup>
+          <div className="flex gap-2 items-center">
+            <ButtonGroup className="divide-x-1 gap-1">
+              <IconButton
+                variant="filled"
+                color="white"
+                className="w-8 h-8 rounded border !border-gray-300 bg-white p-2 text-gray-700 hover:bg-gray-200 disabled:opacity-50 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 focus:outline-none max-w-auto"
+                onClick={zoomActions.zoomOut}
+              >
+                <Icon icon="lucide:minus" />
+              </IconButton>
+              <Tooltip content="Click to reset zoom and pan">
+                <button
+                  className="w-14 h-8 rounded border !border-gray-300 bg-white px-1 py-1 text-center text-sm text-gray-700 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
+                  onClick={() => {
+                    zoomActions.reset()
+                    panActions.reset()
+                  }}
+                >
+                  {zoom}%
+                </button>
+              </Tooltip>
+              <IconButton
+                variant="filled"
+                color="white"
+                className="w-8 h-8 rounded border !border-gray-300 bg-white p-2 text-gray-700 hover:bg-gray-200 disabled:opacity-50 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 focus:outline-none max-w-auto"
+                onClick={zoomActions.zoomIn}
+              >
+                <Icon icon="lucide:plus" />
+              </IconButton>
+            </ButtonGroup>
+            <div className="h-6 w-px bg-gray-300 dark:bg-gray-600"></div>
+            <ButtonGroup className="divide-x-1 gap-1">
+              {/* <IconButton
+                variant="filled"
+                color="white"
+                className="w-8 h-8 rounded border !border-gray-300 bg-white p-2 text-gray-700 hover:bg-gray-200 disabled:opacity-50 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 focus:outline-none max-w-auto"
+                onClick={rotationActions.rotateClockwise}
+              >
+                <Icon icon="lucide:iteration-cw" />
+              </IconButton> */}
+
+              <IconButton
+                variant="filled"
+                color="white"
+                className="w-8 h-8 rounded border !border-gray-300 bg-white p-2 text-gray-700 hover:bg-gray-200 disabled:opacity-50 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 focus:outline-none max-w-auto"
+                onClick={rotationActions.rotateCounterClockwise}
+              >
+                <Icon icon="lucide:iteration-ccw" />
+              </IconButton>
+            </ButtonGroup>
+          </div>
         </div>
       </div>
     </div>