chore: tailwind tweaks

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">
-        <i className="mr-2 text-lg">👋</i>
+      <span className="text-xs md:text-base text-[#98a2b3] dark:text-gray-100">
+        <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">
-            {issuers
-              .filter((issuer) => issuer.enable)
-              .map((issuer, index) => (
-                <OidcLoginEntry issuer={issuer} key={index} />
-              ))}
+            <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" />
-          <h2 className="font-semibold text-2xl text-gray-800 dark:text-white mb-2">{t("login.title")}</h2>
+          <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 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}
             />