chore: polish widget UX

src/widget/Icon.tsx

@@ -8,7 +8,7 @@ type Props = {
 const Icon = ({ handleClick }: Props) => {
   const { logo } = useAppSelector(store => store.server);
   if (!logo) return null;
-  return <button className="rounded-full w-12 h-12 overflow-hidden" onClick={handleClick}>
+  return <button className="rounded-full overflow-hidden" onClick={handleClick}>
     <img src={logo} alt="logo" className="w-full h-full rounded-full" />
   </button>;
 };

src/widget/Popup/Login/index.tsx

@@ -58,7 +58,7 @@ const Login = () => {
     } = loginConfig;
     const googleLogin = enableGoogleLogin && clientId;
     return (
-        <div className="w-72 flex flex-col gap-2 mt-4 animate-[fadeInUp_.5s_.8s_ease-in-out_both]">
+        <div className="w-full max-w-[288px] flex flex-col gap-2 mt-4 animate-[fadeInUp_.5s_.8s_ease-in-out_both]">
             <div className="bg-white dark:bg-gray-700 border dark:border-gray-500 rounded-lg">
                 <form className="px-4 py-3 flex flex-col gap-2" onSubmit={handleSubmit}>
                     <Input required placeholder="Name" name='username' />

src/widget/Popup/Welcome.tsx

@@ -25,7 +25,7 @@ const Index = ({ needLogin = false }: Props) => {
           </div>
         </div>
       </div>
-      {needLogin && <div className="pl-14 animate-[fadeInUp_.5s_ease-in-out_both]">
+      {needLogin && <div className="pl-14 pr-5 animate-[fadeInUp_.5s_ease-in-out_both]">
         <Login />
       </div>}
     </>

src/widget/index.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useGetServerQuery } from "../app/services/server";
 import { useWidget } from "./WidgetContext";
 import Icon from "./Icon";
@@ -21,6 +21,14 @@ function Widget({ hostId }: Props) {
     }
     setVisible((prev) => !prev);
   };
+  useEffect(() => {
+    if (!visible) {
+      document.documentElement.classList.add("close");
+    } else {
+      document.documentElement.classList.remove("close");
+    }
+  }, [visible]);
+
   if (isLoading || isError || !rehydrated) return null;
   if (!embed) return <Popup handleClose={toggleVisible} hostId={hostId} />;
   return visible ? <Popup handleClose={toggleVisible} hostId={hostId} /> : <Icon handleClick={toggleVisible} />;