build: add tailwind to webapp

src/routes/chat/LoadMore.tsx

@@ -1,20 +1,11 @@
 import { useRef, useEffect, FC } from "react";
-import styled from "styled-components";
 import { Waveform } from "@uiball/loaders";
 
-const Styled = styled.div`
-  margin-top: 80px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  padding: 30px 0;
-`;
 type Props = {
   pullUp: () => Promise<void> | null;
 };
 const LoadMore: FC<Props> = ({ pullUp = null }) => {
-  const ref = useRef<HTMLDivElement>();
+  const ref = useRef<HTMLDivElement | null>(null);
   useEffect(() => {
     const observer = new IntersectionObserver(
       (entries) => {
@@ -29,9 +20,12 @@ const LoadMore: FC<Props> = ({ pullUp = null }) => {
       },
       { threshold: 0 }
     );
-    const currEle = ref?.current;
-    if (currEle) {
-      observer.observe(currEle);
+    let currEle: HTMLDivElement | null = null;
+    if (ref) {
+      currEle = ref.current;
+      if (currEle) {
+        observer.observe(currEle);
+      }
     }
     return () => {
       if (currEle) {
@@ -40,9 +34,9 @@ const LoadMore: FC<Props> = ({ pullUp = null }) => {
     };
   }, [ref, pullUp]);
   return (
-    <Styled ref={ref}>
+    <div className="mt-20 flex justify-center items-center w-full py-7" ref={ref}>
       <Waveform size={24} lineWeight={5} speed={1} color="#ccc" />
-    </Styled>
+    </div>
   );
 };
 export default LoadMore;

src/routes/chat/SessionList/styled.tsx

@@ -25,6 +25,7 @@ const Styled = styled.ul`
         background-color: #eee;
         border-radius: 50%;
         img {
+          max-width: unset;
           width: 40px;
           height: 40px;
           &.channel_default {
@@ -42,6 +43,9 @@ const Styled = styled.ul`
           align-items: center;
           justify-content: space-between;
           .name {
+            display: flex;
+            align-items: center;
+            gap: 2px;
             font-weight: 600;
             font-size: 14px;
             line-height: 20px;

src/routes/home/Menu.tsx

@@ -17,18 +17,6 @@ const StyledMenus = styled.ul`
     align-items: center;
     padding: 10px;
     gap: 10px;
-    .icon {
-      width: 24px;
-      height: 24px;
-      transition: all 0.5s ease;
-    }
-    .txt {
-      color: #4b5563;
-      font-style: normal;
-      font-weight: 600;
-      font-size: 14px;
-      line-height: 20px;
-    }
   }
 `;
 type Props = {};
@@ -39,7 +27,7 @@ const Menu: FC<Props> = () => {
       <li className="menu link_navs">
         <NavLink className="link" to={`/setting?f=${pathname}`}>
           <Tooltip placement="right" tip="Settings">
-            <img src={settingIcon} alt="setting icon" className="icon" />
+            <img src={settingIcon} alt="setting icon" className="w-6 h-6 max-w-[unset]" />
           </Tooltip>
         </NavLink>
       </li>

src/routes/reg/EmailNextStepTip.tsx

@@ -1,34 +1,10 @@
-import styled from "styled-components";
-
-const Styled = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  .title {
-    font-weight: 600;
-    font-size: 30px;
-    line-height: 38px;
-    color: #101828;
-    margin-bottom: 12px;
-  }
-  .desc {
-    text-align: center;
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 24px;
-    color: #667085;
-    &:not(:last-child) {
-      margin-bottom: 24px;
-    }
-  }
-`;
 
 export default function EmailNextTip() {
   return (
-    <Styled>
-      <div className="title">Magic link Sent</div>
-      <p className="desc">Login to your email client, and continue next step</p>
-      <p className="desc">You can close this window now.</p>
-    </Styled>
+    <div className="flex flex-col items-center">
+      <div className="font-bold text-3xl text-gray-800 mt-3">Magic link Sent</div>
+      <p className="text-center text-gray-400 mb-6">Login to your email client, and continue next step</p>
+      <p className="text-center text-gray-400">You can close this window now.</p>
+    </div>
   );
 }

src/routes/reg/ExpiredTip.tsx

@@ -1,34 +1,10 @@
-import styled from "styled-components";
-
-const Styled = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  .title {
-    font-weight: 600;
-    font-size: 30px;
-    line-height: 38px;
-    color: #101828;
-    margin-bottom: 12px;
-  }
-  .desc {
-    text-align: center;
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 24px;
-    color: #667085;
-    &:not(:last-child) {
-      margin-bottom: 24px;
-    }
-  }
-`;
 
 export default function ExpiredTip() {
   return (
-    <Styled>
-      <div className="title">Magic link expired</div>
-      <p className="desc">Go back to your original VoceChat tab and request a new magic link.</p>
-      <p className="desc">You can close this window now.</p>
-    </Styled>
+    <div className="flex flex-col items-center">
+      <div className="font-bold text-3xl text-gray-800 mt-3">Magic link expired</div>
+      <p className="text-center text-gray-400 mb-6">Go back to your original VoceChat tab and request a new magic link.</p>
+      <p className="text-center text-gray-400">You can close this window now.</p>
+    </div>
   );
 }