refactor: new widget UX

src/widget/Popup/Welcome.tsx

@@ -3,37 +3,29 @@ import { memo } from 'react';
 import { useAppSelector } from '../../app/store';
 import Login from './Login';
 
-const TextMessage = ({ text, animate = '' }: { text: string; animate?: string }) => (
-  <p className={`text-gray-600 text-md mb-1 ${animate}`}>{text}</p>
-);
 type Props = {
   needLogin?: boolean
 }
 const Index = ({ needLogin = false }: Props) => {
   const { name, logo } = useAppSelector(store => store.server);
   return (
-    <div className="flex gap-1 pl-1">
-      <div className="w-12 h-12">
-        <img src={logo} alt="logo" className="w-full h-full rounded-full" />
-      </div>
-      <div className="flex flex-col">
-        <span className="flex items-center gap-2 leading-6">
-          <em className="text-black not-italic text-lg font-bold">{name}</em>
-          <time className="text-gray-300 text-sm">{`${new Date().toLocaleTimeString('en-US', {
-            minute: 'numeric',
-            hour: 'numeric',
-            hour12: true,
-          })}`}</time>
-        </span>
-        <TextMessage text="Hi there, Nice to meet you! 👋👋👋" animate={needLogin ? "animate-[fadeInUp_.5s_ease-in-out_both]" : ''} />
-        {needLogin && <>
-          <TextMessage text="You need login before we have a nice talk 👇" animate="animate-[fadeInUp_.5s_.8s_ease-in-out_both]" />
-          <div className="animate-[fadeInUp_.5s_1.2s_ease-in-out_both]">
-            <Login />
+    <>
+      <div className="group relative flex justify-start items-start mb-3">
+        <div className="w-9 h-9 absolute top-0 left-3">
+          <img src={logo} alt="logo" className="rounded-full bg-transparent w-9 h-9" />
+        </div>
+        <div className="pl-14">
+          <div className="rounded-lg" style={{ maxWidth: 'min(((100vw - 56px) - 20px) - 64px, 360px)' }}>
+            <div className="text-md text-gray-900 px-3 py-1.5 bg-gray-100 rounded-lg mb-1.5">
+              👋 Hi there, Nice to meet you! Please login before we have a nice talk 👇
+            </div>
           </div>
-        </>}
+        </div>
       </div>
-    </div>
+      {needLogin && <div className="pl-14 animate-[fadeInUp_.5s_1.2s_ease-in-out_both]">
+        <Login />
+      </div>}
+    </>
   );
 };