refactor: more tailwind components

src/routes/chat/Layout/LicenseOutdatedTip.tsx

@@ -1,28 +1,7 @@
 // import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
-import styled from "styled-components";
 import Button from "../../../common/component/styled/Button";
-const Styled = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background: #ef4444;
-  border-radius: var(--br);
-  width: 100%;
-  width: -webkit-fill-available;
-  padding: 12px 16px;
-  .txt {
-    font-weight: 500;
-    font-size: 16px;
-    line-height: 16px;
-    color: #fff;
-    .hand {
-      font-size: 20px;
-      margin-right: 10px;
-    }
-  }
-`;
 // type Props = {};
 
 const LicenseUpgradeTip = () => {
@@ -33,13 +12,13 @@ const LicenseUpgradeTip = () => {
   };
 
   return (
-    <Styled>
-      <span className="txt">
-        <i className="hand">🚨</i>
+    <div className="flex items-center justify-between bg-red-600 rounded-md w-full py-3 px-4">
+      <span className="text-white">
+        <i className="text-xl mr-2">🚨</i>
         {t("license_tip")}
       </span>
       <Button onClick={handleRedirect} className="small">{`Upgrade License`}</Button>
-    </Styled>
+    </div>
   );
 };