styling fixes for history stack (#794)

- clear all tooltip
- padding, gap, ordering fixes

frontend/apps/editor3d/app/src/pages/PageEdit/HistoryStack.tsx

@@ -1,11 +1,19 @@
 import { Button } from "@storyteller/ui-button";
 import { useImageEditCompleteEvent } from "@storyteller/tauri-events";
-import { faClockRotateLeft, faTrash, faTrashXmark, faXmark } from "@fortawesome/pro-solid-svg-icons";
+import {
+  faClockRotateLeft,
+  faTrash,
+  faTrashXmark,
+  faXmark,
+} from "@fortawesome/pro-solid-svg-icons";
 import { useRef, useState } from "react";
 import { twMerge } from "tailwind-merge";
 import { BaseSelectorImage } from "./BaseImageSelector";
 import { Tooltip } from "@storyteller/ui-tooltip";
-import { isActionReminderOpen, showActionReminder } from "@storyteller/ui-action-reminder-modal";
+import {
+  isActionReminderOpen,
+  showActionReminder,
+} from "@storyteller/ui-action-reminder-modal";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 export interface ImageBundle {
@@ -20,7 +28,7 @@ interface HistoryStackProps {
 
 export const HistoryStack = ({
   onClear,
-  onImageSelect = () => { },
+  onImageSelect = () => {},
   startingBundles = [],
 }: HistoryStackProps) => {
   const [imageBundles, setImageBundles] =
@@ -60,18 +68,17 @@ export const HistoryStack = ({
   };
 
   return (
-    <div className="max-h-1/2 h-auto w-20 overflow-y-auto rounded-lg">
-      <div className="flex glass rounded-lg flex-col-reverse items-center justify-center gap-2 p-1">
+    <div className="h-auto w-20 rounded-lg">
+      <div className="glass max-h-1/2 flex flex-col-reverse items-center justify-center gap-2 overflow-y-auto rounded-lg p-1.5">
         {imageBundles.map((bundle, index) => (
           <>
-            {index < imageBundles.length - 1 && <hr className="h-0.5 w-3/4 rounded-md border-none bg-white/10" />}
             {bundle.images.map((image, imgIndex) => (
               <Button
                 key={imgIndex}
                 className={twMerge(
-                  "aspect-square relative h-full w-full border-2 bg-transparent p-0 m-1 hover:bg-transparent hover:opacity-80",
+                  "relative aspect-square h-full w-full border-2 bg-transparent p-0 hover:bg-transparent hover:opacity-80",
                   selectedImageToken === image.mediaToken &&
-                  "border-primary hover:opacity-100",
+                    "border-primary hover:opacity-100",
                 )}
                 onClick={() => {
                   setSelectedImageToken(image.mediaToken);
@@ -87,35 +94,54 @@ export const HistoryStack = ({
                 />
               </Button>
             ))}
+            {index < imageBundles.length - 1 && (
+              <hr className="h-0.5 w-3/4 rounded-md border-none bg-white/10" />
+            )}
           </>
         ))}
-        <FontAwesomeIcon icon={faClockRotateLeft} className="p-1 text-gray-400" />
+        <FontAwesomeIcon
+          icon={faClockRotateLeft}
+          className="p-1 text-gray-400"
+        />
       </div>
-      <div className="glass mt-4 rounded-full border-red/50 border-2 size-12 flex justify-center items-center mx-auto">
-        <button
-          className="flex h-full w-full aspect-square rounded-full items-center justify-center text-white transition-colors hover:bg-red/50"
-          onClick={() =>
-            showActionReminder({
-              reminderType: "default",
-              title: "Reset All",
-              primaryActionIcon: faTrashXmark,
-              primaryActionBtnClassName: "bg-red hover:bg-red/80",
-              message: (
-                <p className="text-sm text-white/70">
-                  Are you sure you want to reset all? This will clear all your
-                  work and cannot be undone.
-                </p>
-              ),
-              primaryActionText: "Reset all",
-              onPrimaryAction: () => {
-                handleClear();
-                isActionReminderOpen.value = false;
-              },
-            })
-          }
-        >
-          <FontAwesomeIcon icon={faXmark} className="h-5 w-5 text-xl" />
-        </button>
+
+      <div className="mt-3 flex justify-center">
+        <div className="glass w-fit rounded-xl border-2 border-red/50 shadow-lg hover:border-red/80">
+          <div className="relative h-full">
+            <Tooltip
+              content="Reset All"
+              position="left"
+              closeOnClick={true}
+              className="ms-1 rounded-md bg-red px-3 py-1"
+              delay={100}
+            >
+              <button
+                className="flex h-10 w-10 items-center justify-center rounded-lg border-2 border-transparent text-white transition-colors hover:bg-red/50"
+                onClick={() =>
+                  showActionReminder({
+                    reminderType: "default",
+                    title: "Reset All",
+                    primaryActionIcon: faTrashXmark,
+                    primaryActionBtnClassName: "bg-red hover:bg-red/80",
+                    message: (
+                      <p className="text-sm text-white/70">
+                        Are you sure you want to reset all? This will clear all
+                        your work and cannot be undone.
+                      </p>
+                    ),
+                    primaryActionText: "Reset all",
+                    onPrimaryAction: () => {
+                      handleClear();
+                      isActionReminderOpen.value = false;
+                    },
+                  })
+                }
+              >
+                <FontAwesomeIcon icon={faXmark} className="h-5 w-5 text-xl" />
+              </button>
+            </Tooltip>
+          </div>
+        </div>
       </div>
     </div>
   );