From 355c97f14eaa545c7b728fe12488b4a0e8f70284 Mon Sep 17 00:00:00 2001
From: steven <stevenlgtm@gmail.com>
Date: Fri, 14 Apr 2023 16:50:59 +0800
Subject: [PATCH] chore: update execute button style

---
 src/components/CodeBlock.tsx   |  2 +-
 src/components/QueryDrawer.tsx | 17 ++++++++++-------
 src/components/kit/Tooltip.tsx |  2 +-
 3 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/components/CodeBlock.tsx b/src/components/CodeBlock.tsx
index 4836ce1..eb64a3d 100644
--- a/src/components/CodeBlock.tsx
+++ b/src/components/CodeBlock.tsx
@@ -62,7 +62,7 @@ export const CodeBlock = (props: Props) => {
           {showExecuteButton && (
             <Tooltip title={t("common.execute")} side="top">
               <button
-                className="flex justify-center items-center rounded bg-none w-6 h-6 p-1 text-xs text-white bg-gray-500 opacity-70 hover:opacity-100"
+                className="flex justify-center items-center rounded bg-none w-6 h-6 p-1 text-xs text-white bg-indigo-600 opacity-90 hover:opacity-100"
                 onClick={handleExecuteQuery}
               >
                 <Icon.IoPlay className="w-full h-auto" />
diff --git a/src/components/QueryDrawer.tsx b/src/components/QueryDrawer.tsx
index f4f2c27..4786f94 100644
--- a/src/components/QueryDrawer.tsx
+++ b/src/components/QueryDrawer.tsx
@@ -6,6 +6,7 @@ import TextareaAutosize from "react-textarea-autosize";
 import { useQueryStore } from "@/store";
 import { ExecutionResult, ResponseObject } from "@/types";
 import { checkStatementIsSelect, getMessageFromExecutionResult } from "@/utils";
+import Tooltip from "./kit/Tooltip";
 import Icon from "./Icon";
 import EngineIcon from "./EngineIcon";
 import DataTableView from "./ExecutionView/DataTableView";
@@ -104,7 +105,7 @@ const QueryDrawer = () => {
             {showExecutionWarningBanner && <ExecutionWarningBanner className="rounded-lg mt-4" />}
             <div className="w-full h-auto mt-4 px-2 flex flex-row justify-between items-end border dark:border-zinc-700 rounded-lg overflow-clip">
               <TextareaAutosize
-                className="w-full h-full outline-none border-none bg-transparent leading-6 pl-2 py-2 resize-none hide-scrollbar text-sm font-mono break-all"
+                className="w-full h-full outline-none border-none bg-transparent leading-6 pl-2 py-2 resize-none hide-scrollbar text-sm font-mono break-all whitespace-pre-wrap"
                 value={statement}
                 rows={1}
                 minRows={1}
@@ -112,12 +113,14 @@ const QueryDrawer = () => {
                 placeholder="Enter your SQL statement here..."
                 onChange={(e) => setStatement(e.target.value)}
               />
-              <button
-                className="w-8 p-1 -translate-y-1 cursor-pointer rounded-md hover:shadow hover:bg-gray-100 dark:hover:bg-zinc-700 disabled:cursor-not-allowed disabled:opacity-60"
-                onClick={() => executeStatement(statement)}
-              >
-                <Icon.IoPlay className="w-full h-auto text-indigo-600" />
-              </button>
+              <Tooltip title={t("common.execute")} side="top">
+                <button
+                  className="w-6 p-1 -translate-y-2 cursor-pointer rounded-md hover:shadow opacity-90 hover:opacity-100 bg-indigo-600 text-gray-50 disabled:cursor-not-allowed disabled:opacity-60"
+                  onClick={() => executeStatement(statement)}
+                >
+                  <Icon.IoPlay className="w-full h-auto" />
+                </button>
+              </Tooltip>
             </div>
             <div className="w-full flex flex-col justify-start items-start mt-4">
               {isLoading ? (
diff --git a/src/components/kit/Tooltip.tsx b/src/components/kit/Tooltip.tsx
index aed95c9..a384415 100644
--- a/src/components/kit/Tooltip.tsx
+++ b/src/components/kit/Tooltip.tsx
@@ -17,7 +17,7 @@ const Tooltip = (props: Props) => {
         <TooltipUI.Trigger asChild>{children}</TooltipUI.Trigger>
         <TooltipUI.Portal>
           <TooltipUI.Content
-            className="bg-zinc-800 text-gray-200 dark:bg-black text-sm p-1 px-2 rounded-md z-[999]"
+            className="bg-zinc-800 text-gray-200 dark:bg-black text-sm p-1 px-2 rounded-md z-[99999]"
             side={side}
             sideOffset={6}
           >