chore: tailwind tweaks

src/common/component/BlankPlaceholder.tsx

@@ -14,9 +14,9 @@ interface Props {
   type?: "chat" | "user";
 }
 const classes = {
-  box: "w-[150px] md:w-[200px] h-[150px] md:h-[200px] cursor-pointer bg-[#f9fafb] dark:bg-gray-800 rounded-3xl flex-center flex-col gap-4",
+  box: "w-[220px] md:w-[200px] h-[100px] md:h-[200px] cursor-pointer bg-[#f9fafb] dark:bg-gray-800 rounded-3xl flex-center flex-col gap-4",
-  boxIcon: "w-10 h-10",
+  boxIcon: "w-7 h-7 md:w-10 md:h-10",
-  boxTip: "px-5 text-sm text-[#475467] dark:text-gray-100 font-bold text-center"
+  boxTip: "px-5 text-xs md:text-sm text-[#475467] dark:text-gray-100 font-bold text-center"
 };
 const BlankPlaceholder: FC<Props> = ({ type = "chat" }) => {
   const { t } = useTranslation("welcome");
@@ -40,7 +40,7 @@ const BlankPlaceholder: FC<Props> = ({ type = "chat" }) => {
     <>
       <div className="flex flex-col gap-8 -mt-[50px] dark:bg-[#384250]">
         <div className="flex flex-col gap-2 items-center">
-          <h2 className="text-3xl text-[#344054] dark:text-white font-bold">{t("title", { name: server.name })}</h2>
+          <h2 className="text-center text-3xl text-[#344054] dark:text-white font-bold">{t("title", { name: server.name })}</h2>
           <p className="text-sm text-[#98a2b3] max-w-[424px] text-center">
             {t("desc")}
           </p>

src/common/component/FileMessage/VideoMessage.tsx

@@ -37,7 +37,7 @@ const VideoMessage = ({ url, name, size, download }: Props) => {
     };
     const tipClass = 'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2';
     return (
-        <div className='w-96 h-52 relative rounded-md border border-solid border-gray-300 overflow-hidden group'>
+        <div className='w-64 h-32 md:w-96 md:h-52 relative rounded-md border border-solid border-gray-300 overflow-hidden group'>
             <div className="absolute top-0 left-0 w-full h-full bg-black/40 z-20 group-hover:hidden"></div>
             <div className="absolute top-0 left-0 w-full flex justify-between z-30 px-3 py-2 overflow-hidden group-hover:bg-black/20">
                 <div className="flex gap-2 ">

src/common/component/GithubLoginButton.tsx

@@ -45,7 +45,7 @@ const GithubLoginButton: FC<Props> = ({ type = "login", source = "webapp", clien
   };
 
   return (
-    <Button className="flex-center gap-3 ghost !text-gray-600 dark:!text-gray-100 !border-[#d0d5dd]" onClick={handleGithubLogin}>
+    <Button className="flex-center gap-3 ghost" onClick={handleGithubLogin}>
       <IconGithub className="w-6 h-6" />
       {` ${type === "login" ? t("login.github") : t("reg.github")}`}
     </Button>

src/common/component/SaveTip.tsx

@@ -13,7 +13,7 @@ const SaveTip: FC<Props> = ({ saveHandler, resetHandler }) => {
   const { t } = useTranslation("setting");
   // const btnClass=clsx("")
   return (
-    <div className="w-full p-2 absolute bottom-16 left-0 flex items-center justify-between font-semibold text-gray-700 border border-solid border-gray-200 dark:border-gray-400 dark:bg-gray-600 shadow-md rounded-full">
+    <div className="z-50 w-full p-2 absolute bottom-16 left-0 flex items-center justify-between font-semibold text-gray-700 border border-solid border-gray-200 dark:border-gray-400 dark:bg-gray-600 shadow-xl rounded-full">
       <span className="p-2 text-sm dark:text-gray-200">{t('save_tip')}</span>
       <div className="flex items-center gap-3">
         <Button className="small ghost border_less !text-gray-700 !shadow-none dark:!text-gray-100" onClick={resetHandler}>

src/common/component/StyledSettingContainer.tsx

@@ -27,17 +27,17 @@ const StyledSettingContainer: FC<PropsWithChildren<Props>> = ({
   const { pathname } = useLocation();
   return (
     <div className="w-screen h-screen flex">
-      <div className="max-h-screen min-w-[212px] overflow-scroll px-4 py-8 bg-[#f5f6f7] dark:bg-[#1F2A37]">
+      <div className="h-screen min-w-[120px] md:min-w-[212px] overflow-scroll px-4 py-8 bg-[#f5f6f7] dark:bg-[#1F2A37]">
-        <h2 onClick={closeModal} className="flex gap-2 items-center cursor-pointer mb-8 font-bold text-gray-800 dark:text-white">
+        <h2 onClick={closeModal} className="flex gap-2 items-center text-sm md:text-base cursor-pointer mb-8 font-bold text-gray-800 dark:text-white">
           <IconBack className="dark:fill-gray-400" /> {title}
         </h2>
         {navs.map(({ title, items }) => {
           return (
-            <ul key={title} data-title={title} className="flex flex-col gap-0.5 mb-9 before:pl-3 before:content-[attr(data-title)] before:font-bold before:text-xs before:text-gray-400">
+            <ul key={title} data-title={title} className="flex flex-col gap-0.5 mb-9 before:md:pl-3 before:content-[attr(data-title)] before:font-bold before:text-xs before:text-gray-400">
               {items.map(({ name, title }) => {
                 return (
-                  <li key={name} className={clsx(`text-sm font-semibold text-gray-600 whitespace-nowrap dark:text-gray-200  rounded hover:bg-[#e7e5e4] dark:hover:bg-slate-500/20`, name == nav?.name && "bg-[#e7e5e4] dark:bg-slate-500/20")}>
+                  <li key={name} className={clsx(`text-xs md:text-sm font-semibold text-gray-600 whitespace-nowrap dark:text-gray-200  rounded hover:bg-[#e7e5e4] dark:hover:bg-slate-500/20`, name == nav?.name && "bg-[#e7e5e4] dark:bg-slate-500/20")}>
-                    <NavLink to={`${pathname}?nav=${name}`} className="block px-3 py-1">{title}</NavLink>
+                    <NavLink to={`${pathname}?nav=${name}`} className="block md:px-3 py-1">{title}</NavLink>
                   </li>
                 );
               })}
@@ -45,12 +45,12 @@ const StyledSettingContainer: FC<PropsWithChildren<Props>> = ({
           );
         })}
         {dangers.length ? (
-          <ul className="flex flex-col gap-2 mb-9 text-sm font-semibold text-red-500 dark:text-red-400">
+          <ul className="flex flex-col gap-2 mb-9 text-xs md:text-sm font-semibold text-red-500 dark:text-red-400">
             {dangers.map((d) => {
               if (typeof d === "boolean" || !d) return null;
               const { title, handler } = d;
               return (
-                <li key={title} onClick={handler} className="rounded cursor-pointer py-1.5 px-3">
+                <li key={title} onClick={handler} className="rounded cursor-pointer py-1.5 md:px-3">
                   {title}
                 </li>
               );

src/common/component/styled/Button.tsx

@@ -12,12 +12,12 @@ const StyledButton = ({ children, className = '', ...rest }: Props) => {
   const isFull = className.includes('flex');
   return <button className={clsx(`text-sm text-white bg-primary-400 break-keep shadow rounded-lg px-3.5 py-2.5 hover:bg-primary-500 active:bg-primary-500 disabled:bg-gray-300`,
     isFull && "w-full",
-    isGhost && "text-primary-400 border border-solid border-primary-400 !bg-transparent",
+    isGhost && "!text-gray-600 dark:!text-gray-100  !border !border-solid !border-[#d0d5dd] !bg-transparent",
-    isCancel && "!bg-transparent !text-black dark:!text-gray-50 border border-solid border-gray-200",
+    isCancel && "!bg-transparent !text-black dark:!text-gray-50 !border !border-solid !border-gray-200",
     isSmall && "!py-2",
     noBorder && "!shadow-none !border-none",
     isMini && "!px-2.5 !py-1 !text-xs",
-    isDanger && "bg-red-500 disabled:bg-gray-300 hover:bg-red-500/80 active:bg-red-700",
+    isDanger && "!bg-red-500 disabled:!bg-gray-300 hover:!bg-red-500/80 active:bg-red-700",
     className
   )} {...rest}>
     {children}

src/routes/chat/GuestChannelChat/index.tsx

@@ -44,7 +44,7 @@ export default function GuestChannelChat({ cid = 0 }: Props) {
             <div className="flex items-center gap-1">
               <ChannelIcon personal={!is_public} />
               <span className="text-gray-800 dark:text-white">{name}</span>
-              <span className="ml-2 text-gray-500">{description}</span>
+              <span className="ml-2 text-gray-500 hidden md:block ">{description}</span>
             </div>
           </header>
         }

src/routes/chat/Layout/LoginTip.tsx

@@ -21,8 +21,8 @@ const LoginTip = () => {
 
   return (
     <div className="flex items-center justify-between bg-slate-200/80 dark:bg-gray-800 rounded-lg w-full p-4">
-      <span className="text-base text-[#98a2b3] dark:text-gray-100">
+      <span className="text-xs md:text-base text-[#98a2b3] dark:text-gray-100">
-        <i className="mr-2 text-lg">👋</i>
+        <i className="mr-2 text-xs md:text-lg ">👋</i>
         {t("sign_in_tip")}
       </span>
       <Button onClick={handleSignIn} className="small">{ct("action.login")}</Button>

src/routes/login/MetamaskLoginButton.tsx

@@ -93,7 +93,7 @@ export default function MetamaskLoginButton({
     }
   };
   return (
-    <Button className="flex ghost flex-center gap-2 !text-gray-600 !border-slate-200 dark:!text-gray-100" disabled={requesting} onClick={handleMetamaskLogin}>
+    <Button className="flex ghost flex-center gap-2" disabled={requesting} onClick={handleMetamaskLogin}>
       <img className="w-6 h-6" src={metamaskSvg} alt="meta mask icon" />
       {type == "login" ? t("login.metamask") : t("reg.metamask")}
     </Button>

src/routes/login/OidcLoginButton.tsx

@@ -20,7 +20,7 @@ const OidcLoginButton: FC<IProps> = ({ issuers, type = "login" }) => {
   return (
     <>
       <Button
-        className="flex ghost flex-center gap-2 !text-gray-600 !border-slate-200 dark:!text-gray-100"
+        className="flex ghost flex-center gap-2"
         onClick={() => {
           setModal(true);
         }}
@@ -30,13 +30,15 @@ const OidcLoginButton: FC<IProps> = ({ issuers, type = "login" }) => {
       {modal && (
         <Modal id="modal-modal">
           <StyledModal className="text-center " title="Login with OIDC">
+            <div className="flex flex-col gap-2">
               {issuers
                 .filter((issuer) => issuer.enable)
                 .map((issuer, index) => (
                   <OidcLoginEntry issuer={issuer} key={index} />
                 ))}
+            </div>
             <StyledButton
-              className="border_less ghost text-gray-500 dark:text-white"
+              className="border_less ghost"
               onClick={() => {
                 setModal(false);
               }}

src/routes/login/OidcLoginEntry.tsx

@@ -21,7 +21,7 @@ const OidcLoginEntry: FC<{ issuer: OIDCConfig }> = ({ issuer }) => {
   }, [data, isSuccess]);
 
   return (
-    <Button className="flex text-gray-800 dark:text-gray-100 flex-center gap-3" disabled={isLoading || isSuccess} onClick={handleSolidLogin}>
+    <Button className="flex flex-center gap-3" disabled={isLoading || isSuccess} onClick={handleSolidLogin}>
       {!!issuer.favicon && <img src={issuer.favicon} className="w-6 h-6" alt="icon" />}
       {isLoading ? `Loading...` : `Login with ${issuer.domain}`}
     </Button>

src/routes/login/index.tsx

@@ -127,11 +127,11 @@ export default function LoginPage() {
     <div className="flex-center h-screen dark:bg-[#384250]">
       <div className="py-8 px-10 shadow-md rounded-xl">
         <div className="flex-center flex-col pb-6">
-          <img src={`${BASE_URL}/resource/organization/logo`} alt="logo" className="w-14 h-14 mb-7 rounded-full" />
+          <img src={`${BASE_URL}/resource/organization/logo`} alt="logo" className="w-14 h-14 mb-3 md:mb-7 rounded-full" />
-          <h2 className="font-semibold text-2xl text-gray-800 dark:text-white mb-2">{t("login.title")}</h2>
+          <h2 className="font-semibold text-2xl text-gray-800 dark:text-white md:mb-2">{t("login.title")}</h2>
           <span className="text-gray-400 dark:text-gray-100">{t("login.desc")}</span>
         </div>
-        <form className="flex flex-col gap-5 min-w-[360px]" onSubmit={handleLogin}>
+        <form className="flex flex-col gap-5 w-[320px] md:min-w-[360px] " onSubmit={handleLogin}>
           <Input
             className="large"
             name="email"

src/routes/resources/Filter/index.tsx

@@ -11,7 +11,7 @@ import { useTranslation } from "react-i18next";
 import clsx from "clsx";
 
 const getClass = (selected: boolean) => {
-  return clsx(`cursor-pointer flex items-center gap-2 border border-solid border-gray-300 dark:border-gray-400 shadow rounded-lg py-2 px-3 text-xs text-gray-900 dark:text-gray-200`, selected && 'text-white bg-primary-400');
+  return clsx(`cursor-pointer flex items-center gap-2 shadow rounded-lg py-2 px-3 text-xs text-gray-900 dark:text-gray-200`, selected ? 'text-white bg-primary-400' : 'border border-solid border-gray-300 dark:border-gray-400 ');
 };
 export default function Filter({ filter, updateFilter }) {
   const { t } = useTranslation("file");
@@ -66,7 +66,7 @@ export default function Filter({ filter, updateFilter }) {
             <Avatar
               width={16}
               height={16}
-              className="w-4 h-4 rounded-full"
+              className="rounded-full"
               name={userMap[from].name}
               src={userMap[from].avatar}
             />