Fix stop generation button UI (#3011)

* fix stop generation button ui

* keep action color theme and match rest of the UI
rescale button to be consistent with UI

---------

Co-authored-by: timothycarambat <rambat1010@gmail.com>

frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/StopGenerationButton/index.jsx

@@ -13,7 +13,7 @@ export default function StopGenerationButton() {
         onClick={emitHaltEvent}
         data-tooltip-id="stop-generation-button"
         data-tooltip-content="Stop generating response"
-        className="border-none text-white/60 cursor-pointer group"
+        className="border-none text-white/60 cursor-pointer group -mr-1.5 mt-1.5"
         aria-label="Stop generating"
       >
         <svg
@@ -22,21 +22,23 @@ export default function StopGenerationButton() {
           viewBox="0 0 28 28"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
+          style={{ transform: "scale(1.3)" }}
+          className="opacity-60 group-hover:opacity-100 light:opacity-100 light:group-hover:opacity-60"
         >
           <circle
-            className="group-hover:stroke-primary-button stroke-white"
             cx="10"
             cy="10.562"
             r="9"
             strokeWidth="2"
+            className="group-hover:stroke-primary-button stroke-white light:stroke-theme-text-secondary"
           />
           <rect
-            className="group-hover:fill-primary-button fill-white"
             x="6.3999"
             y="6.96204"
             width="7.2"
             height="7.2"
             rx="2"
+            className="group-hover:fill-primary-button fill-white light:fill-theme-text-secondary"
           />
         </svg>
       </button>
@@ -44,7 +46,7 @@ export default function StopGenerationButton() {
         id="stop-generation-button"
         place="bottom"
         delayShow={300}
-        className="tooltip !text-xs invert"
+        className="tooltip !text-xs z-99 -ml-1"
       />
     </>
   );