Move AI Button to better position

tone-row · Jan 10, 2024 · c9bccf4 · c9bccf4
1 parent b123003
commit c9bccf4
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 9 deletions.
diff --git a/app/src/components/EditWithAI.tsx b/app/src/components/EditWithAI.tsx
@@ -125,23 +125,25 @@ export function EditWithAI() {
         <Popover.Trigger asChild>
           <Button2
             leftIcon={
-              <MagicWand className="group-hover-tilt-shaking" size={18} />
+              <MagicWand className="group-hover-tilt-shaking -mr-1" size={18} />
             }
-            color="zinc"
+            color="purple"
             size="sm"
             rounded
-            className="aria-[expanded=true]:bg-zinc-700"
+            className="aria-[expanded=true]:bg-purple-700 !pt-2 !pb-[9px] !pl-3 !pr-4"
             isLoading={isLoading}
           >
-            <Trans>Edit with AI</Trans>
+            <span className="text-[15px]">
+              <Trans>Edit with AI</Trans>
+            </span>
           </Button2>
         </Popover.Trigger>
         <Popover.Portal>
           <Popover.Content
-            side="top"
+            side="bottom"
             sideOffset={10}
             align="center"
-            className="w-[300px] bg-white rounded shadow border p-2"
+            className="w-[300px] bg-white rounded shadow border p-2 !z-[100] animate-slideDownAndFade"
           >
             <form className="grid gap-2" onSubmit={handleSubmit} ref={formRef}>
               <div className="relative">

diff --git a/app/src/components/TabPane.tsx b/app/src/components/TabPane.tsx
@@ -78,7 +78,7 @@ export default TabPane;
 
 const Handle = ({ dragging = false }: { dragging: boolean }) => (
   <div
-    className="hidden md:block w-1.5 bg-[#f6f5f6] dark:bg-[#0c0c0c] h-full  translate-x-[5px] relative z-[12]"
+    className="hidden md:block w-1.5 bg-[#f6f5f6] dark:bg-[#0c0c0c] h-full  translate-x-[5px] relative z-[9]"
     data-dragging={dragging}
   >
     <button

diff --git a/app/src/components/WithGraph.tsx b/app/src/components/WithGraph.tsx
@@ -27,7 +27,7 @@ const WithGraph = memo(({ children }: MainProps) => {
 
   return (
     <div
-      className="grid grid-rows-[[main]_minmax(0,1fr)_auto] grid-cols-[[main]_minmax(0,1fr)] md:flex md:shadow-xl"
+      className="relative grid grid-rows-[[main]_minmax(0,1fr)_auto] grid-cols-[[main]_minmax(0,1fr)] md:flex md:shadow-xl"
       data-mobile-tab={tab}
       data-selected-tab={selectedTab}
     >

diff --git a/app/src/pages/Sandbox.tsx b/app/src/pages/Sandbox.tsx
@@ -116,7 +116,7 @@ const Sandbox = memo(function Edit() {
           <WithGraph>
             <Tabs.Content value="Document" className="overflow-hidden relative">
               <TextEditor value={text} onChange={onChange} />
-              <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2">
+              <div className="absolute top-2 right-2 z-[100] drop-shadow-lg">
                 <EditWithAI />
               </div>
             </Tabs.Content>