🎨 style: settings tab update (#3088)

* style: settings UI  update

* style: update UI

* style: update button style

* fix: scroll settings on mobile

* feat: `?` for settings

client/src/components/svg/CircleHelpIcon.tsx

@@ -0,0 +1,22 @@
+import { cn } from '~/utils/';
+
+export default function CircleHelpIcon({ className = 'icon-md-heavy', size = '1em' }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height={size}
+      width={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={cn(className)}
+    >
+      <circle cx="12" cy="12" r="10" />
+      <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
+      <path d="M12 17h.01" />
+    </svg>
+  );
+}

client/src/components/svg/index.ts

@@ -55,3 +55,4 @@ export { default as AssistantIcon } from './AssistantIcon';
 export { default as Sparkles } from './Sparkles';
 export { default as SpeechIcon } from './SpeechIcon';
 export { default as SaveIcon } from './SaveIcon';
+export { default as CircleHelpIcon } from './CircleHelpIcon';