refactor: more tailwind

src/routes/chat/Layout/index.tsx

@@ -13,6 +13,7 @@ import useLicense from "../../../common/hook/useLicense";
 import LicenseUpgradeTip from "./LicenseOutdatedTip";
 // import { useTranslation } from "react-i18next";
 import DnDTip from "./DnDTip";
+import clsx from "clsx";
 
 interface Props {
   readonly?: boolean;
@@ -112,13 +113,15 @@ const Layout: FC<Props> = ({
         <main className="main" ref={messagesContainer}>
           <div className="chat">
             {children}
-            <div className={`send ${selects ? "selecting" : ""}`}>
+            <div className={`p-4 pt-0 ${selects ? "selecting" : ""}`}>
               {readonly ? (
                 <LoginTip />
               ) : reachLimit ? (
                 <LicenseUpgradeTip />
               ) : (
-                <Send key={to} id={to} context={context} />
+                <div className={clsx(`flex justify-center`, selects && "hidden")}>
+                  <Send key={to} id={to} context={context} />
+                </div>
               )}
               {selects && <Operations context={context} id={to} />}
             </div>

src/routes/chat/Layout/styled.tsx

@@ -24,15 +24,6 @@ const Styled = styled.article`
       flex-direction: column;
       padding: 0;
       height: calc(100vh - 56px - 18px);
-      > .send {
-        padding: 0 16px 16px 16px;
-        &.selecting {
-          padding: 0;
-          > .send {
-            display: none;
-          }
-        }
-      }
     }
     .members {
       box-shadow: inset 0px 10px 2px -10px rgba(0, 0, 0, 0.1);
@@ -52,8 +43,7 @@ const Styled = styled.article`
         height: 1px;
         margin: 18px auto;
       }
-      .tools,
-      .apps {
+      .tools {
         display: flex;
         flex-direction: column;
       }
@@ -93,9 +83,6 @@ const Styled = styled.article`
           }
         }
       }
-      .apps {
-        gap: 15px;
-      }
     }
   }