build: add tailwind to webapp

src/assets/base.css

@@ -1,31 +0,0 @@
-::-webkit-scrollbar-thumb {
-  background: #ddd;
-  border-radius: 4px;
-}
-
-::-webkit-scrollbar {
-  background: transparent;
-  width: 5px;
-  height: 5px;
-}
-
-:root {
-  /* border radius */
-  --br: 8px;
-  ---navs-bg: #e5e7eb;
-  ---body-bg: #f5f6f7;
-  ---chat-bg: #fff;
-  ---channel-text-color: #1c1c1e;
-  ---msg-text-color: #374151;
-}
-
-/* @media (prefers-color-scheme: dark) {
-    :root{
-        --br:8px;
-        ---navs-bg:#121926;
-        ---body-bg:#1F2A37;
-        ---chat-bg:#384250;
-        ---channel-text-color:#fff;
-        ---msg-text-color:#fff;
-    }
-  } */

src/assets/index.css

@@ -1,3 +1,24 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+::-webkit-scrollbar-thumb {
+  background: #ddd;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar {
+  background: transparent;
+  width: 5px;
+  height: 5px;
+}
+
+:root {
+  /* border radius */
+  --br: 8px;
+  ---navs-bg: #e5e7eb;
+  ---body-bg: #f5f6f7;
+  ---chat-bg: #fff;
+  ---channel-text-color: #1c1c1e;
+  ---msg-text-color: #374151;
+}

src/common/component/ContextMenu.tsx

@@ -33,7 +33,7 @@ const ContextMenu: FC<Props> = ({ items = [], hideMenu = null }) => {
         } = item;
         return (
           <li
-            className={`item ${underline ? "underline" : ""} ${danger ? "danger" : ""}`}
+            className={`item ${underline ? "bottom_line" : ""} ${danger ? "danger" : ""}`}
             key={title}
             onClick={(evt) => {
               evt.stopPropagation();

src/common/component/styled/Menu.tsx

@@ -42,7 +42,7 @@ const StyledMenu = styled.ul`
         }
       }
     }
-    &.underline {
+    &.bottom_line {
       margin-bottom: 9px;
       &:before {
         position: absolute;

src/common/component/styled/Select.tsx

@@ -66,7 +66,7 @@ const Select: FC<Props> = ({ options = [], updateSelect = null, current = null }
             return (
               <li
                 onClick={selected ? undefined : handleSelect.bind(null, { title, value })}
-                className={`item sb ${underline ? "underline" : ""}`}
+                className={`item sb ${underline ? "bottom_line" : ""}`}
                 data-disabled={selected}
                 key={value}
               >

src/index.tsx

@@ -4,7 +4,7 @@ import toast, { Toaster } from "react-hot-toast";
 import { Reset } from "styled-reset";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
-import "./assets/base.css";
+import "./assets/index.css";
 import "./common/DayjsSetting";
 import "./common/TippySetting";
 import { register } from "./serviceWorkerRegistration";

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;
+    let currEle: HTMLDivElement | null = null;
-    if (currEle) {
+    if (ref) {
-      observer.observe(currEle);
+      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="flex flex-col items-center">
-      <div className="title">Magic link Sent</div>
+      <div className="font-bold text-3xl text-gray-800 mt-3">Magic link Sent</div>
-      <p className="desc">Login to your email client, and continue next step</p>
+      <p className="text-center text-gray-400 mb-6">Login to your email client, and continue next step</p>
-      <p className="desc">You can close this window now.</p>
+      <p className="text-center text-gray-400">You can close this window now.</p>
-    </Styled>
+    </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="flex flex-col items-center">
-      <div className="title">Magic link expired</div>
+      <div className="font-bold text-3xl text-gray-800 mt-3">Magic link expired</div>
-      <p className="desc">Go back to your original VoceChat tab and request a new magic link.</p>
+      <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="desc">You can close this window now.</p>
+      <p className="text-center text-gray-400">You can close this window now.</p>
-    </Styled>
+    </div>
   );
 }