🎨 refactor: UI stlye (#4438)

* feat: Refactor ChatForm and StopButton components for improved styling and localization

* feat: Refactor AudioRecorder, ChatForm, AttachFile, and SendButton components for improved styling and layout

* feat: Add RevokeAllKeys component and update styling for buttons and inputs

* feat: Refactor ClearChats component and update ClearConvos functionality for improved clarity and user experience

* feat: Remove ClearConvos component and update related imports and functionality in Avatar and DeleteCacheButton components

* feat: Rename DeleteCacheButton to DeleteCache and update related imports; enhance confirmation message in localization

* feat: Update ChatForm layout for RTL support and improve component structure

* feat: Adjust ChatForm layout for improved RTL support and alignment

* feat: Refactor Bookmark components to use new UI elements and improve styling

* feat: Update FileSearch and ShareAgent components for improved button styling and layout

* feat: Update ChatForm and TextareaHeader styles for improved UI consistency

* feat: Refactor Nav components for improved styling and layout adjustments

* feat: Update button sizes and padding for improved UI consistency across chat components

* feat: Remove ClearChatsButton test file as part of code cleanup

client/src/components/Chat/Input/StopButton.tsx

@@ -1,36 +1,37 @@
+import { TooltipAnchor } from '~/components/ui';
+import { useLocalize } from '~/hooks';
 import { cn } from '~/utils';
 
-export default function StopButton({ stop, setShowStopButton, isRTL }) {
+export default function StopButton({ stop, setShowStopButton }) {
+  const localize = useLocalize();
+
   return (
-    <div
-      className={cn(
-        'absolute',
-        isRTL ? 'bottom-3 left-2 md:bottom-4 md:left-4' : 'bottom-3 right-2 md:bottom-4 md:right-4',
-      )}
-    >
-      <button
-        type="button"
-        className="border-gizmo-gray-900 rounded-full border-2 p-1 dark:border-gray-200"
-        aria-label="Stop generating"
-        onClick={(e) => {
-          setShowStopButton(false);
-          stop(e);
-        }}
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 16 16"
-          fill="currentColor"
-          className="text-gizmo-gray-900 h-2 w-2 dark:text-gray-200"
-          height="16"
-          width="16"
+    <TooltipAnchor
+      description={localize('com_nav_stop_generating')}
+      render={
+        <button
+          type="button"
+          className={cn(
+            'rounded-full bg-text-primary p-1.5 text-text-primary outline-offset-4 transition-all duration-200 disabled:cursor-not-allowed disabled:text-text-secondary disabled:opacity-10',
+          )}
+          aria-label={localize('com_nav_stop_generating')}
+          onClick={(e) => {
+            setShowStopButton(false);
+            stop(e);
+          }}
         >
-          <path
-            d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2z"
-            strokeWidth="0"
-          ></path>
-        </svg>
-      </button>
-    </div>
+          <svg
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            className="icon-lg text-surface-primary"
+          >
+            <rect x="7" y="7" width="10" height="10" rx="1.25" fill="currentColor"></rect>
+          </svg>
+        </button>
+      }
+    ></TooltipAnchor>
   );
 }