refactor: restyle some components with tailwind

src/common/component/BlankPlaceholder.tsx

@@ -1,5 +1,4 @@
 import { FC, useState } from "react";
-import styled from "styled-components";
 import ChannelModal from "./ChannelModal";
 import InviteModal from "./InviteModal";
 import IconChat from "../../assets/icons/placeholder.chat.svg";
@@ -10,67 +9,15 @@ import UsersModal from "./UsersModal";
 import usePWAInstallPrompt from "../hook/usePWAInstallPrompt";
 import { useAppSelector } from "../../app/store";
 
-const Styled = styled.div`
-  margin-top: -50px;
-  display: flex;
-  flex-direction: column;
-  gap: 32px;
-  .head {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 8px;
-    .title {
-      font-weight: 700;
-      font-size: 30px;
-      line-height: 38px;
-      color: #344054;
-    }
-    .desc {
-      text-align: center;
-      font-weight: 400;
-      font-size: 14px;
-      line-height: 20px;
-      color: #98a2b3;
-      max-width: 424px;
-    }
-  }
-  .boxes {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-template-rows: 1fr 1fr;
-    gap: 24px;
-    .box {
-      cursor: pointer;
-      width: 200px;
-      height: 200px;
-      background: #f9fafb;
-      border-radius: 20px;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      gap: 16px;
-      .icon {
-        width: 40px;
-        height: 40px;
-      }
-      .txt {
-        padding: 0 21px;
-        text-align: center;
-        font-weight: 700;
-        font-size: 14px;
-        line-height: 20px;
-        color: #475467;
-      }
-    }
-  }
-`;
 
 interface Props {
   type?: "chat" | "user";
 }
-
+const classes = {
+  box: "w-[200px] h-[200px] cursor-pointer bg-[#f9fafb] rounded-3xl flex flex-col justify-center items-center gap-4",
+  boxIcon: "w-10 h-10",
+  boxTip: "px-5 text-sm text-[#475467] font-bold text-center"
+};
 const BlankPlaceholder: FC<Props> = ({ type = "chat" }) => {
   const { showPrompt } = usePWAInstallPrompt();
   const server = useAppSelector((store) => store.server);
@@ -89,36 +36,35 @@ const BlankPlaceholder: FC<Props> = ({ type = "chat" }) => {
   const chatTip =
     type == "chat" ? "Create a Channel to Start a Conversation" : "Send a Direct Message";
   const chatHandler = type == "chat" ? toggleChannelModalVisible : toggleUserListVisible;
-
   return (
     <>
-      <Styled>
-        <div className="head">
-          <h2 className="title">Welcome to {server.name} server</h2>
-          <p className="desc">
+      <div className="flex flex-col gap-8 -mt-[50px]">
+        <div className="flex flex-col gap-2 items-center">
+          <h2 className="text-3xl text-[#344054] font-bold">Welcome to {server.name} server</h2>
+          <p className="text-sm text-[#98a2b3] max-w-[424px] text-center">
             Here are some steps to help you get started. For more, check out our Getting Started
             guide
           </p>
         </div>
-        <div className="boxes">
-          <div className="box" onClick={toggleInviteModalVisible}>
-            <IconInvite className="icon" />
-            <div className="txt">Invite your friends or teammates</div>
+        <div className="grid grid-cols-2 grid-rows-2 gap-6">
+          <div className={classes.box} onClick={toggleInviteModalVisible}>
+            <IconInvite className={classes.boxIcon} />
+            <div className={classes.boxTip}>Invite your friends or teammates</div>
           </div>
-          <div className="box" onClick={chatHandler}>
-            <IconChat className="icon" />
-            <div className="txt">{chatTip}</div>
-          </div>
-          <button className="box" onClick={showPrompt}>
-            <IconDownload className="icon" />
-            <div className="txt">Download PC and Mobile apps</div>
+          <button onClick={chatHandler} className={classes.box} >
+            <IconChat className={classes.boxIcon} />
+            <div className={classes.boxTip}>{chatTip}</div>
           </button>
-          <a href={"https://voce.chat"} target={"_blank"} rel="noreferrer" className="box">
-            <IconAsk className="icon" />
-            <div className="txt">Got questions? Visit our help center </div>
+          <button onClick={showPrompt} className={classes.box} >
+            <IconDownload className={classes.boxIcon} />
+            <div className={classes.boxTip}>Download PC and Mobile apps</div>
+          </button>
+          <a href={"https://voce.chat"} target={"_blank"} rel="noreferrer" className={classes.box} >
+            <IconAsk className={classes.boxIcon} />
+            <div className={classes.boxTip}>Got questions? Visit our help center</div>
           </a>
         </div>
-      </Styled>
+      </div>
       {createChannelVisible && (
         <ChannelModal personal={true} closeModal={toggleChannelModalVisible} />
       )}