From 053c7d94029aa351f605c59947ac46878ca54d4a Mon Sep 17 00:00:00 2001
From: Tristan Yang <yanggc888@163.com>
Date: Mon, 20 Feb 2023 12:54:45 +0800
Subject: [PATCH] chore: remove hover effects in mobile

---
 src/common/component/AddEntriesMenu.tsx       |  2 +-
 src/common/component/ChannelModal/index.tsx   |  2 +-
 src/common/component/ForwardModal/index.tsx   |  4 ++--
 .../component/InviteModal/AddMembers.tsx      |  2 +-
 src/common/component/ManageMembers/index.tsx  |  2 +-
 src/common/component/Message/Commands.tsx     | 21 ++++++-------------
 .../component/Message/FavoredMessage.tsx      |  2 +-
 src/common/component/Message/Reaction.tsx     |  4 ++--
 .../component/Message/ReactionPicker.tsx      |  2 +-
 src/common/component/Message/index.tsx        |  2 +-
 .../component/StyledSettingContainer.tsx      |  2 +-
 src/common/component/UsersModal.tsx           |  2 +-
 src/common/component/Version.tsx              |  3 ++-
 src/common/component/styled/Button.tsx        |  4 ++--
 src/routes/chat/GuestBlankPlaceholder.tsx     |  4 ++--
 src/routes/chat/GuestSessionList/Session.tsx  |  2 +-
 src/routes/chat/Layout/Operations.tsx         |  8 +++----
 src/routes/chat/SessionList/Session.tsx       |  4 ++--
 src/routes/favs/index.tsx                     |  2 +-
 src/routes/home/index.tsx                     | 10 ++++-----
 src/routes/onboarding/index.tsx               |  2 +-
 src/routes/onboarding/steps/invite-link.tsx   |  2 +-
 .../setting/BotConfig/TestAPIKeyModal.tsx     |  4 ++--
 src/routes/setting/BotConfig/index.tsx        |  2 +-
 .../setting/License/LicensePriceListModal.tsx |  2 +-
 src/routes/setting/Widget.tsx                 |  2 +-
 src/routes/users/index.tsx                    |  2 +-
 27 files changed, 46 insertions(+), 54 deletions(-)

diff --git a/src/common/component/AddEntriesMenu.tsx b/src/common/component/AddEntriesMenu.tsx
index d85c1ff4..63b106dc 100644
--- a/src/common/component/AddEntriesMenu.tsx
+++ b/src/common/component/AddEntriesMenu.tsx
@@ -42,7 +42,7 @@ export default function AddEntriesMenu() {
     setChannelModalVisible(false);
   };
 
-  const itemClass = "rounded flex items-center gap-2 text-sm font-semibold cursor-pointer px-2 py-2.5 hover:bg-gray-800/20 dark:hover:bg-gray-200/20";
+  const itemClass = "rounded flex items-center gap-2 text-sm font-semibold cursor-pointer px-2 py-2.5 md:hover:bg-gray-800/20 md:dark:hover:bg-gray-200/20";
   const iconClass = "w-5 h-5 dark:fill-gray-300";
   return (
     <>
diff --git a/src/common/component/ChannelModal/index.tsx b/src/common/component/ChannelModal/index.tsx
index 5f77b2af..5833cbe5 100644
--- a/src/common/component/ChannelModal/index.tsx
+++ b/src/common/component/ChannelModal/index.tsx
@@ -114,7 +114,7 @@ const ChannelModal: FC<Props> = ({ personal = false, closeModal }) => {
                     <li
                       key={uid}
                       data-uid={uid}
-                      className="cursor-pointer flex items-center px-4 rounded hover:bg-gray-500/10"
+                      className="cursor-pointer flex items-center px-4 rounded md:hover:bg-gray-500/10"
                       onClick={loginUid == uid ? undefined : toggleCheckMember}
                     >
                       <StyledCheckbox
diff --git a/src/common/component/ForwardModal/index.tsx b/src/common/component/ForwardModal/index.tsx
index a64eac42..0f62aed8 100644
--- a/src/common/component/ForwardModal/index.tsx
+++ b/src/common/component/ForwardModal/index.tsx
@@ -95,7 +95,7 @@ const ForwardModal: FC<IProps> = ({ mids, closeModal }) => {
                     key={gid}
                     data-type="channel"
                     data-id={gid}
-                    className="cursor-pointer flex items-center px-4 rounded hover:bg-gray-600/10"
+                    className="cursor-pointer flex items-center px-4 rounded md:hover:bg-gray-600/10"
                     onClick={toggleCheck}
                   >
                     <StyledCheckbox readOnly checked={checked} name="cb" id="cb" />
@@ -112,7 +112,7 @@ const ForwardModal: FC<IProps> = ({ mids, closeModal }) => {
                     key={uid}
                     data-id={uid}
                     data-type="user"
-                    className="cursor-pointer flex items-center px-4 rounded hover:bg-gray-600/10"
+                    className="cursor-pointer flex items-center px-4 rounded md:hover:bg-gray-600/10"
                     onClick={toggleCheck}
                   >
                     <StyledCheckbox readOnly checked={checked} name="cb" id="cb" />
diff --git a/src/common/component/InviteModal/AddMembers.tsx b/src/common/component/InviteModal/AddMembers.tsx
index da0c54b2..358637c8 100644
--- a/src/common/component/InviteModal/AddMembers.tsx
+++ b/src/common/component/InviteModal/AddMembers.tsx
@@ -82,7 +82,7 @@ const AddMembers: FC<Props> = ({ cid = 0, closeModal }) => {
             <li
               key={uid}
               data-uid={uid}
-              className="cursor-pointer flex items-center px-2 py-1 rounded-lg hover:bg-slate-400/20"
+              className="cursor-pointer flex items-center px-2 py-1 rounded-lg md:hover:bg-slate-400/20"
               onClick={added ? undefined : toggleCheckMember}
             >
               <StyledCheckbox
diff --git a/src/common/component/ManageMembers/index.tsx b/src/common/component/ManageMembers/index.tsx
index 7e0dee64..e6e2f5d1 100644
--- a/src/common/component/ManageMembers/index.tsx
+++ b/src/common/component/ManageMembers/index.tsx
@@ -73,7 +73,7 @@ const ManageMembers: FC<Props> = ({ cid }) => {
           const canRemoveFromChannel =
             channel && channel.owner == loginUser?.uid && loginUser?.uid != uid;
           return (
-            <li key={uid} className="w-full flex items-center justify-between px-3 py-2 rounded-md hover:bg-slate-50 dark:hover:bg-gray-800">
+            <li key={uid} className="w-full flex items-center justify-between px-3 py-2 rounded-md md:hover:bg-slate-50 md:dark:hover:bg-gray-800">
               <div className="flex gap-4">
                 <User compact uid={uid} interactive={false} />
                 <div className="flex flex-col">
diff --git a/src/common/component/Message/Commands.tsx b/src/common/component/Message/Commands.tsx
index 79b73015..aeaa5f45 100644
--- a/src/common/component/Message/Commands.tsx
+++ b/src/common/component/Message/Commands.tsx
@@ -82,16 +82,7 @@ const Commands: FC<Props> = ({ context = "user", contextId = 0, mid = 0, toggleE
       toast.error("Added Favorites Failed!");
     }
   };
-
-
-  // const StyledCmds = styled.ul`
-  //   > .picker {
-  //     position: absolute;
-  //     left: -10px;
-  //     top: 0;
-  //     transform: translateX(-100%);
-  //   }
-  // `;
+  const cmdClass = `flex cursor-pointer p-1 md:hover:bg-gray-100 md:dark:hover:bg-gray-800`;
   return (
     <>
       <ul
@@ -105,27 +96,27 @@ const Commands: FC<Props> = ({ context = "user", contextId = 0, mid = 0, toggleE
           trigger="click"
           content={<ReactionPicker mid={mid} hidePicker={hideAll} />}
         >
-          <li className="flex cursor-pointer p-1 hover:bg-gray-100 dark:hover:bg-gray-800">
+          <li className={cmdClass}>
             <Tooltip placement="top" tip={t("action.add_reaction")}>
               <img src={reactIcon} className="toggler w-6 h-6" alt="icon emoji" />
             </Tooltip>
           </li>
         </Tippy>
         {canEdit && (
-          <li className="flex cursor-pointer p-1 hover:bg-gray-100 dark:hover:bg-gray-800" onClick={toggleEditMessage}>
+          <li className={cmdClass} onClick={toggleEditMessage}>
             <Tooltip placement="top" tip={t("action.edit")}>
               <img src={editIcon} className="w-6 h-6" alt="icon edit" />
             </Tooltip>
           </li>
         )}
         {canReply && (
-          <li className="flex cursor-pointer p-1 hover:bg-gray-100 dark:hover:bg-gray-800" onClick={handleReply}>
+          <li className={cmdClass} onClick={handleReply}>
             <Tooltip placement="top" tip={t("action.reply")}>
               <img src={replyIcon} className="w-6 h-6" alt="icon reply" />
             </Tooltip>
           </li>
         )}
-        <li className="flex cursor-pointer p-1 hover:bg-gray-100 dark:hover:bg-gray-800" onClick={handleAddFav}>
+        <li className={cmdClass} onClick={handleAddFav}>
           <Tooltip placement="top" tip={t("action.add_to_fav")}>
             <IconBookmark className="fill-slate-500 w-6 h-6" />
           </Tooltip>
@@ -166,7 +157,7 @@ const Commands: FC<Props> = ({ context = "user", contextId = 0, mid = 0, toggleE
             />
           }
         >
-          <li className="flex cursor-pointer p-1 hover:bg-gray-100 dark:hover:bg-gray-800">
+          <li className="flex cursor-pointer p-1 md:hover:bg-gray-100 md:dark:hover:bg-gray-800">
             <Tooltip placement="top" tip={t("more")}>
               <img src={moreIcon} alt="icon more" />
             </Tooltip>
diff --git a/src/common/component/Message/FavoredMessage.tsx b/src/common/component/Message/FavoredMessage.tsx
index 418393a9..7faf1dba 100644
--- a/src/common/component/Message/FavoredMessage.tsx
+++ b/src/common/component/Message/FavoredMessage.tsx
@@ -22,7 +22,7 @@ const FavoredMessage: FC<Props> = ({ id = "" }) => {
           {messages.map((msg, idx) => {
             const { user = {}, download, content, content_type, properties, thumbnail } = msg;
             return (
-              <div className="w-full relative flex items-start gap-3 px-2 py-1 my-2 rounded-lg dark:hover:bg-gray-800" key={idx}>
+              <div className="w-full relative flex items-start gap-3 px-2 py-1 my-2 rounded-lg md:dark:hover:bg-gray-800" key={idx}>
                 {user && (
                   <div className="shrink-0 w-10 h-10 flex">
                     <Avatar width={40} height={40} className="rounded-full object-cover" src={user.avatar} name={user.name} />
diff --git a/src/common/component/Message/Reaction.tsx b/src/common/component/Message/Reaction.tsx
index 40558599..7ba1f907 100644
--- a/src/common/component/Message/Reaction.tsx
+++ b/src/common/component/Message/Reaction.tsx
@@ -65,7 +65,7 @@ const Reaction: FC<Props> = ({ mid, reactions = null, readOnly = false }) => {
         return uids.length > 0 ? (
           <span
             onClick={readOnly ? undefined : handleReact.bind(null, reaction)}
-            className={`cursor-pointer rounded-md relative flex items-center gap-1 p-1 hover:bg-cyan-100 ${reacted ? "shadow-[inset_0_0_0_1px_#06aed4] bg-cyan-200" : ""}`}
+            className={`cursor-pointer rounded-md relative flex items-center gap-1 p-1 md:hover:bg-cyan-100 ${reacted ? "shadow-[inset_0_0_0_1px_#06aed4] bg-cyan-200" : ""}`}
             key={reaction}
           >
             <Tippy
@@ -93,7 +93,7 @@ const Reaction: FC<Props> = ({ mid, reactions = null, readOnly = false }) => {
             trigger="click"
             content={<ReactionPicker mid={mid} hidePicker={hideAll} />}
           >
-            <button className="invisible group-hover:visible w-6 h-6 bg-cyan-100 hover:bg-cyan-200 rounded-md flex-center">
+            <button className="invisible group-hover:visible w-6 h-6 bg-cyan-100 md:hover:bg-cyan-200 rounded-md flex-center">
               <IconAddEmoji className={'w-4 h-4'} />
             </button>
           </Tippy>
diff --git a/src/common/component/Message/ReactionPicker.tsx b/src/common/component/Message/ReactionPicker.tsx
index 5f2c1754..ac9beaed 100644
--- a/src/common/component/Message/ReactionPicker.tsx
+++ b/src/common/component/Message/ReactionPicker.tsx
@@ -28,7 +28,7 @@ const ReactionPicker: FC<Props> = ({ mid, hidePicker }) => {
             reactionData[emoji] && reactionData[emoji].findIndex((id) => id == currUid) > -1;
           return (
             <li
-              className={`flex-center cursor-pointer rounded-lg p-4 hover:bg-gray-50 w-4 h-4 ${reacted ? "bg-gray-50" : ""}`}
+              className={`flex-center cursor-pointer rounded-lg p-4 md:hover:bg-gray-50 w-4 h-4 ${reacted ? "bg-gray-50" : ""}`}
               key={emoji}
               onClick={handleReact.bind(null, emoji)}
             >
diff --git a/src/common/component/Message/index.tsx b/src/common/component/Message/index.tsx
index 8e878229..e8ca5ba1 100644
--- a/src/common/component/Message/index.tsx
+++ b/src/common/component/Message/index.tsx
@@ -96,7 +96,7 @@ const Message: FC<IProps> = ({
       onContextMenu={readOnly ? undefined : handleContextMenuEvent}
       data-msg-mid={mid}
       ref={inviewRef}
-      className={clsx(`group w-full relative flex items-start gap-2 md:gap-4 px-1 md:px-2 py-1 my-2 rounded-lg dark:hover:bg-gray-800 hover:bg-gray-100`,
+      className={clsx(`group w-full relative flex items-start gap-2 md:gap-4 px-1 md:px-2 py-1 my-2 rounded-lg md:dark:hover:bg-gray-800 md:hover:bg-gray-100`,
         readOnly && "hover:bg-transparent",
         showExpire && "bg-red-200",
         pinInfo && "bg-cyan-50 dark:bg-cyan-800 pt-7"
diff --git a/src/common/component/StyledSettingContainer.tsx b/src/common/component/StyledSettingContainer.tsx
index ca1ec881..de28d79e 100644
--- a/src/common/component/StyledSettingContainer.tsx
+++ b/src/common/component/StyledSettingContainer.tsx
@@ -41,7 +41,7 @@ const StyledSettingContainer: FC<PropsWithChildren<Props>> = ({
               <ul key={title} data-title={title} className="flex flex-col gap-0.5 mb-5 md: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(`md:text-sm font-semibold text-gray-600 whitespace-nowrap dark:text-gray-200  md:rounded hover:bg-stone-200 dark:hover:bg-slate-500/20`, name == nav?.name && "bg-stone-200 dark:bg-slate-500/20")}>
+                    <li key={name} className={clsx(`md:text-sm font-semibold text-gray-600 whitespace-nowrap dark:text-gray-200  md:rounded md:hover:bg-stone-200 md:dark:hover:bg-slate-500/20`, name == nav?.name && "bg-stone-200 dark:bg-slate-500/20")}>
                       <NavLink to={`${pathPrefix}/${name}`} className="block md:px-3 py-1">{title}</NavLink>
                     </li>
                   );
diff --git a/src/common/component/UsersModal.tsx b/src/common/component/UsersModal.tsx
index d5a0dd50..d39a76b4 100644
--- a/src/common/component/UsersModal.tsx
+++ b/src/common/component/UsersModal.tsx
@@ -33,7 +33,7 @@ const UsersModal: FC<Props> = ({ closeModal }) => {
             {users.map((u) => {
               const { uid = 0 } = u || {};
               return (
-                <li key={uid} className="cursor-pointer px-2 hover:bg-gray-600/10">
+                <li key={uid} className="cursor-pointer px-2 md:hover:bg-gray-600/10">
                   <NavLink className={'w-full'} onClick={closeModal} to={`/chat/dm/${uid}`}>
                     <User uid={uid} interactive={false} />
                   </NavLink>
diff --git a/src/common/component/Version.tsx b/src/common/component/Version.tsx
index 68bf606b..f6f2f873 100644
--- a/src/common/component/Version.tsx
+++ b/src/common/component/Version.tsx
@@ -1,6 +1,7 @@
 import dayjs from "dayjs";
 import { FC, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { Ring } from "@uiball/loaders";
 import { useGetServerVersionQuery } from "../../app/services/server";
 import Button from "./styled/Button";
 import { unregister } from '../../serviceWorkerRegistration';
@@ -28,7 +29,7 @@ const Version: FC<Props> = () => {
         </strong>
       </li>
       <li>
-        <Button disabled={syncing} onClick={handleSync}>{t("sync")}</Button>
+        <Button disabled={syncing} onClick={handleSync}> {syncing ? <Ring size={18} color="#fff" /> : t("sync")}</Button>
       </li>
     </ul>
   );
diff --git a/src/common/component/styled/Button.tsx b/src/common/component/styled/Button.tsx
index b16a9091..fa586a17 100644
--- a/src/common/component/styled/Button.tsx
+++ b/src/common/component/styled/Button.tsx
@@ -10,14 +10,14 @@ const StyledButton = ({ children, className = '', ...rest }: Props) => {
   const isSmall = className.includes('small');
   const isMini = className.includes('mini');
   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`,
+  return <button className={clsx(`text-sm text-white bg-primary-400 break-keep shadow rounded-lg px-3.5 py-2.5 md:hover:bg-primary-500 active:bg-primary-500 disabled:bg-gray-300`,
     isFull && "w-full",
     isGhost && "!text-gray-600 dark:!text-gray-100  !border !border-solid !border-gray-300 !bg-transparent",
     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 md:hover:!bg-red-500/80 active:bg-red-700",
     className
   )} {...rest}>
     {children}
diff --git a/src/routes/chat/GuestBlankPlaceholder.tsx b/src/routes/chat/GuestBlankPlaceholder.tsx
index 9064c150..9c1cd047 100644
--- a/src/routes/chat/GuestBlankPlaceholder.tsx
+++ b/src/routes/chat/GuestBlankPlaceholder.tsx
@@ -21,8 +21,8 @@ const GuestBlankPlaceholder = () => {
     navigateTo("/login");
   };
   return (
-    <section className="flex flex-col items-center">
-      <h2 className="text-3xl text-gray-600 dark:text-gray-50 font-bold text-center">{t("welcome", { name: serverName })}</h2>
+    <section className="flex flex-col items-center text-center">
+      <h2 className="text-3xl text-gray-600 dark:text-gray-50 font-bold">{t("welcome", { name: serverName })}</h2>
       <div className="flex flex-col gap-2">
         <span className="text-gray-400 dark:text-gray-200 my-3 text-sm">{t("guest_login_tip")}</span>
         <div className="w-44 h-44 self-center mb-4">
diff --git a/src/routes/chat/GuestSessionList/Session.tsx b/src/routes/chat/GuestSessionList/Session.tsx
index 780a223f..2aa5f4c2 100644
--- a/src/routes/chat/GuestSessionList/Session.tsx
+++ b/src/routes/chat/GuestSessionList/Session.tsx
@@ -39,7 +39,7 @@ const Session: FC<IProps> = ({ id, mid }) => {
 
   return (
     <li className="session">
-      <NavLink className={({ isActive: linkActive }) => clsx(`nav flex gap-2 rounded-lg p-2 w-full hover:bg-gray-500/20`, linkActive && "bg-gray-500/20")} to={`/chat/channel/${id}`}>
+      <NavLink className={({ isActive: linkActive }) => clsx(`nav flex gap-2 rounded-lg p-2 w-full md:hover:bg-gray-500/20`, linkActive && "bg-gray-500/20")} to={`/chat/channel/${id}`}>
         <div className="flex bg-slate-50 rounded-full">
           <Avatar width={40} height={40} className="icon" type="channel" name={name} src={icon} />
         </div>
diff --git a/src/routes/chat/Layout/Operations.tsx b/src/routes/chat/Layout/Operations.tsx
index a4ac33f1..99360057 100644
--- a/src/routes/chat/Layout/Operations.tsx
+++ b/src/routes/chat/Layout/Operations.tsx
@@ -55,17 +55,17 @@ const Operations: FC<Props> = ({ context, id }) => {
   });
   const canDel = canDelete(mids);
 
-  // const 
+  const optClass = `p-2 bg-slate-100 rounded md:hover:bg-slate-300`;
   return (
     <>
       <div className="relative p-4 flex-center gap-8 shadow-md">
-        <button className="p-2 bg-slate-100 rounded hover:bg-slate-300" onClick={toggleForwardModal}>
+        <button className={optClass} onClick={toggleForwardModal}>
           <IconForward />
         </button>
-        <button className="p-2 bg-slate-100 rounded hover:bg-slate-300" onClick={handleFav}>
+        <button className={optClass} onClick={handleFav}>
           <IconBookmark />
         </button>
-        <button className="p-2 bg-slate-100 rounded hover:bg-slate-300" disabled={!canDel} onClick={toggleDeleteModal.bind(null, false)}>
+        <button className={optClass} disabled={!canDel} onClick={toggleDeleteModal.bind(null, false)}>
           <IconDelete />
         </button>
         <IconClose className="cursor-pointer absolute right-5 top-1/2 -translate-y-1/2" onClick={handleClose} />
diff --git a/src/routes/chat/SessionList/Session.tsx b/src/routes/chat/SessionList/Session.tsx
index 1436c212..aaca79ea 100644
--- a/src/routes/chat/SessionList/Session.tsx
+++ b/src/routes/chat/SessionList/Session.tsx
@@ -109,7 +109,7 @@ const Session: FC<IProps> = ({
       >
         <NavLink
           ref={drop}
-          className={({ isActive: linkActive }) => clsx(`nav flex gap-2 rounded-lg p-2 w-full hover:bg-gray-500/20`, isActive && "shadow-[inset_0_0_0_2px_#52edff]", linkActive && "bg-gray-500/20")}
+          className={({ isActive: linkActive }) => clsx(`nav flex gap-2 rounded-lg p-2 w-full md:hover:bg-gray-500/20`, isActive && "shadow-[inset_0_0_0_2px_#52edff]", linkActive && "bg-gray-500/20")}
           to={type == "user" ? `/chat/dm/${id}` : `/chat/channel/${id}`}
           onContextMenu={handleContextMenuEvent}
         >
@@ -142,7 +142,7 @@ const Session: FC<IProps> = ({
             <div className="flex items-center justify-between">
               <span className={clsx("text-xs text-gray-500 dark:text-gray-400  truncate", unreads > 0 ? `w-36` : ``)}>{renderPreviewMessage(previewMsg)}</span>
               {unreads > 0 && (
-                <strong className={clsx(`text-white h-5 min-w-[20px] bg-primary-400 font-bold text-[10px] rounded-[10px] flex-center`, unreads > 99 && 'w-1.5 h-1.5 p-0 min-w-[unset]', muted && "bg-gray-500")}>
+                <strong className={clsx(`text-white h-5 min-w-[20px] bg-primary-400 font-bold text-[10px] rounded-[10px] flex-center`, unreads > 99 && 'w-1.5 !h-1.5 p-0 min-w-[unset]', muted && "bg-gray-500")}>
                   {unreads > 99 ? null : unreads}
                 </strong>
               )}
diff --git a/src/routes/favs/index.tsx b/src/routes/favs/index.tsx
index e7b95d5c..0352f6ef 100644
--- a/src/routes/favs/index.tsx
+++ b/src/routes/favs/index.tsx
@@ -125,7 +125,7 @@ function FavsPage() {
             return (
               <li
                 key={f}
-                className={clsx(f == filter && 'bg-[rgba(116,_127,_141,_0.2)]', `cursor-pointer flex items-center gap-2 p-2 rounded-lg hover:bg-[rgba(116,_127,_141,_0.2)]`)}
+                className={clsx(f == filter && 'bg-[rgba(116,_127,_141,_0.2)]', `cursor-pointer flex items-center gap-2 p-2 rounded-lg md:hover:bg-[rgba(116,_127,_141,_0.2)]`)}
                 onClick={handleFilter.bind(null, f as filter)}
               >
                 {icon}
diff --git a/src/routes/home/index.tsx b/src/routes/home/index.tsx
index dc4b2424..695759c7 100644
--- a/src/routes/home/index.tsx
+++ b/src/routes/home/index.tsx
@@ -48,7 +48,7 @@ function HomePage() {
   // 有点绕
   const chatNav = isChatHomePath ? "/chat" : chatPath || "/chat";
   const userNav = userPath || "/users";
-  const linkClass = `flex items-center gap-2.5 px-3 py-2 font-semibold text-sm text-gray-600 rounded-lg hover:bg-gray-800/10`;
+  const linkClass = `flex items-center gap-2.5 px-3 py-2 font-semibold text-sm text-gray-600 rounded-lg md:hover:bg-gray-800/10`;
   return (
     <>
       <Manifest />
@@ -59,7 +59,7 @@ function HomePage() {
             {loginUid && <User uid={loginUid} />}
             <nav className="flex flex-col gap-1 px-3 py-6">
               <NavLink
-                className={({ isActive }) => `${linkClass} ${(isActive || isChattingPage) ? "bg-primary-400 hover:bg-primary-400" : ""}`}
+                className={({ isActive }) => `${linkClass} ${(isActive || isChattingPage) ? "bg-primary-400 md:hover:bg-primary-400" : ""}`}
                 to={chatNav}
               >
                 {({ isActive }) => {
@@ -68,21 +68,21 @@ function HomePage() {
                   </Tooltip>;
                 }}
               </NavLink>
-              <NavLink className={({ isActive }) => `${linkClass} ${isActive ? 'bg-primary-400 hover:bg-primary-400' : ""}`} to={userNav}>
+              <NavLink className={({ isActive }) => `${linkClass} ${isActive ? 'bg-primary-400 md:hover:bg-primary-400' : ""}`} to={userNav}>
                 {({ isActive }) => {
                   return <Tooltip tip={t("members")}>
                     <UserIcon className={isActive ? "fill-white" : ""} />
                   </Tooltip>;
                 }}
               </NavLink>
-              <NavLink className={({ isActive }) => `${linkClass} ${isActive ? 'bg-primary-400 hover:bg-primary-400' : ""}`} to={"/favs"}>
+              <NavLink className={({ isActive }) => `${linkClass} ${isActive ? 'bg-primary-400 md:hover:bg-primary-400' : ""}`} to={"/favs"}>
                 {({ isActive }) => {
                   return <Tooltip tip={t("favs")}>
                     <FavIcon className={isActive ? "fill-white" : ""} />
                   </Tooltip>;
                 }}
               </NavLink>
-              <NavLink className={({ isActive }) => `${linkClass} ${isActive ? 'bg-primary-400 hover:bg-primary-400' : ""}`} to={"/files"}>
+              <NavLink className={({ isActive }) => `${linkClass} ${isActive ? 'bg-primary-400 md:hover:bg-primary-400' : ""}`} to={"/files"}>
                 {({ isActive }) => {
                   return <Tooltip tip={t("files")}>
                     <FolderIcon className={isActive ? "fill-white" : ""} />
diff --git a/src/routes/onboarding/index.tsx b/src/routes/onboarding/index.tsx
index 29632162..5cb778d8 100644
--- a/src/routes/onboarding/index.tsx
+++ b/src/routes/onboarding/index.tsx
@@ -22,7 +22,7 @@ const Navigator = () => {
     <div className="hidden md:flex absolute top-5 w-full justify-center gap-2 z-10">
       {steps.map((stepToRender, indexToRender) => {
         const clickable = canJumpTo.includes(stepToRender.name);
-        const itemClass = clsx(`text-sm text-gray-600`, clickable && "cursor-pointer hover:text-gray-500", indexToRender === activeStep && "font-bold text-black", indexToRender >= activeStep && "text-gray-400");
+        const itemClass = clsx(`text-sm text-gray-600`, clickable && "cursor-pointer md:hover:text-gray-500", indexToRender === activeStep && "font-bold text-black", indexToRender >= activeStep && "text-gray-400");
         const nodeCls = `${itemClass}`;
         return (
           <React.Fragment key={indexToRender}>
diff --git a/src/routes/onboarding/steps/invite-link.tsx b/src/routes/onboarding/steps/invite-link.tsx
index 3e8e6143..2a23893c 100644
--- a/src/routes/onboarding/steps/invite-link.tsx
+++ b/src/routes/onboarding/steps/invite-link.tsx
@@ -20,7 +20,7 @@ export default function InviteLink() {
       <span className="text-sm text-gray-500 mb-2 font-semibold">{t("last_desc")}</span>
       <div className="w-full md:w-[400px] rounded shadow-md flex border border-solid border-gray-100">
         <StyledInput className="large !border-none !shadow-none" readOnly placeholder="Generating" value={link} />
-        <StyledButton onClick={copyLink} className="ghost small border_less !px-2 hover:!text-primary-600">
+        <StyledButton onClick={copyLink} className="ghost small border_less !px-2 md:hover:!text-primary-600">
           {linkCopied ? "Copied" : ct("action.copy")}
         </StyledButton>
       </div>
diff --git a/src/routes/setting/BotConfig/TestAPIKeyModal.tsx b/src/routes/setting/BotConfig/TestAPIKeyModal.tsx
index f15508a0..fa5ff277 100644
--- a/src/routes/setting/BotConfig/TestAPIKeyModal.tsx
+++ b/src/routes/setting/BotConfig/TestAPIKeyModal.tsx
@@ -62,7 +62,7 @@ const TestAPIKeyModal = ({ closeModal }: Props) => {
             >
                 {key ? (data ? <ul className="divide-y-2">
                     {data.map(({ gid, name, is_public }) => {
-                        return <li key={gid} className={clsx("py-1 px-2 text-gray-500 cursor-pointer hover:bg-slate-50", gid == currCid ? 'bg-slate-100' : "")} onClick={handleSetChannel.bind(null, gid)}>
+                        return <li key={gid} className={clsx("py-1 px-2 text-gray-500 cursor-pointer md:hover:bg-slate-50", gid == currCid ? 'bg-slate-100' : "")} onClick={handleSetChannel.bind(null, gid)}>
                             # {name} {!is_public ? "🔒" : ""}
                         </li>;
                     })}
@@ -73,7 +73,7 @@ const TestAPIKeyModal = ({ closeModal }: Props) => {
                     <Textarea ref={msgInputRef} placeholder='Input Something...' />
                     <ul className='flex gap-1'>
                         {Object.entries(MessageTypes).map(([key, value]) => {
-                            return <li onClick={handleSetMsgType.bind(null, key)} className={clsx("py-1 px-2 text-gray-500 cursor-pointer hover:bg-slate-50", msgType == key ? 'bg-slate-100' : "")} key={key}>{value}</li>;
+                            return <li onClick={handleSetMsgType.bind(null, key)} className={clsx("py-1 px-2 text-gray-500 cursor-pointer md:hover:bg-slate-50", msgType == key ? 'bg-slate-100' : "")} key={key}>{value}</li>;
                         })}
                     </ul>
                     <Button className='mini' onClick={handleSend} >Send</Button>
diff --git a/src/routes/setting/BotConfig/index.tsx b/src/routes/setting/BotConfig/index.tsx
index f20ee6af..59643f37 100644
--- a/src/routes/setting/BotConfig/index.tsx
+++ b/src/routes/setting/BotConfig/index.tsx
@@ -85,7 +85,7 @@ export default function BotConfig() {
             <tbody>
               {bots.map(bot => {
                 const { uid, name, avatar } = bot;
-                return <tr key={uid} className="bg-white dark:bg-gray-800 border-b dark:border-b-gray-500 transition duration-300 ease-in-out hover:bg-gray-100">
+                return <tr key={uid} className="bg-white dark:bg-gray-800 border-b dark:border-b-gray-500 transition duration-300 ease-in-out md:hover:bg-gray-100">
                   <td className="px-4 py-2">
                     <AvatarUploader uid={uid} url={avatar} uploadImage={updateAvatar} name={name} size={56} />
                   </td>
diff --git a/src/routes/setting/License/LicensePriceListModal.tsx b/src/routes/setting/License/LicensePriceListModal.tsx
index 572b997e..70191939 100644
--- a/src/routes/setting/License/LicensePriceListModal.tsx
+++ b/src/routes/setting/License/LicensePriceListModal.tsx
@@ -133,7 +133,7 @@ const LicensePriceListModal: FC<Props> = ({ closeModal }) => {
                 </div>
               }
             >
-              <button onClick={togglePopUpVisible} className="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"> {t("license.renew")}</button>
+              <button onClick={togglePopUpVisible} className="text-sm text-white bg-primary-400 break-keep shadow rounded-lg px-3.5 py-2.5 md:hover:bg-primary-500 active:bg-primary-500 disabled:bg-gray-300"> {t("license.renew")}</button>
               {/* <Button >
                 {t("license.renew")}
               </Button> */}
diff --git a/src/routes/setting/Widget.tsx b/src/routes/setting/Widget.tsx
index c1bcc05d..f5128172 100644
--- a/src/routes/setting/Widget.tsx
+++ b/src/routes/setting/Widget.tsx
@@ -5,7 +5,7 @@ import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
 
 const Row = ({ paramKey, paramDefault, remarks }: { paramKey: string, paramDefault: string | number, remarks: string }) => {
-  return <tr className="bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-50 border-b transition duration-300 ease-in-out hover:bg-gray-100">
+  return <tr className="bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-50 border-b transition duration-300 ease-in-out md:hover:bg-gray-100">
     <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
       {paramKey}
     </td>
diff --git a/src/routes/users/index.tsx b/src/routes/users/index.tsx
index d799dfcd..ef408f6b 100644
--- a/src/routes/users/index.tsx
+++ b/src/routes/users/index.tsx
@@ -36,7 +36,7 @@ function UsersPage() {
           <nav className="flex flex-col md:gap-1">
             {users.map(({ uid }) => {
               return (
-                <NavLink key={uid} className={({ isActive }) => `rounded-md hover:bg-gray-500/10 ${isActive ? "bg-gray-500/10" : ""}`} to={`/users/${uid}`}>
+                <NavLink key={uid} className={({ isActive }) => `rounded-md md:hover:bg-gray-500/10 ${isActive ? "bg-gray-500/10" : ""}`} to={`/users/${uid}`}>
                   <User uid={uid} enableContextMenu={true} />
                 </NavLink>
               );