refactor: style with tailwind

src/common/component/InviteModal/index.tsx

@@ -1,4 +1,3 @@
-import styled from "styled-components";
 import InviteByEmail from "./InviteByEmail";
 import AddMembers from "./AddMembers";
 import CloseIcon from "../../../assets/icons/close.svg";
@@ -7,28 +6,6 @@ import { useAppSelector } from "../../../app/store";
 import { FC } from "react";
 import { useTranslation } from "react-i18next";
 
-const Styled = styled.div`
-  display: flex;
-  flex-direction: column;
-  background: #fff;
-  box-shadow: 0 25px 50px rgba(31, 41, 55, 0.25);
-  border-radius: var(--br);
-  padding: 16px;
-  min-width: 408px;
-  > .title {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    font-style: normal;
-    font-weight: 600;
-    font-size: 18px;
-    line-height: 28px;
-    color: #374151;
-    .close {
-      cursor: pointer;
-    }
-  }
-`;
 
 interface Props {
   type?: "server" | "channel";
@@ -48,14 +25,14 @@ const InviteModal: FC<Props> = ({ type = "server", cid, title = "", closeModal }
   const finalTitle = type == "server" ? server.name : `#${title || channel?.name}`;
   return (
     <Modal>
-      <Styled>
-        <h2 className="title">
+      <div className="flex flex-col bg-white rounded-lg p-4 min-w-[408px]">
+        <h2 className="flex items-center justify-between text-lg text-gray-700 ">
           {t("invite_title", { name: finalTitle })}
-          <CloseIcon className="close" onClick={closeModal} />
+          <CloseIcon className="cursor-pointer" onClick={closeModal} />
         </h2>
         {!channel?.is_public && <AddMembers cid={cid} closeModal={closeModal} />}
         <InviteByEmail cid={channel?.is_public ? undefined : cid} />
-      </Styled>
+      </div>
     </Modal>
   );
 };