chore: remove hover effects in mobile

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 (
     <>

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

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" />

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

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">

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>

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} />

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>

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)}
             >

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"

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>
                   );

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>

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>
   );

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}