From 7496a01edc5c3770a608cb80553dcffcd3ec1c94 Mon Sep 17 00:00:00 2001
From: Tristan Yang <yanggc888@163.com>
Date: Tue, 21 Feb 2023 21:59:15 +0800
Subject: [PATCH] refactor: remove hover effects in mobile

---
 src/common/component/BlankPlaceholder.tsx                | 2 +-
 src/common/component/Channel.tsx                         | 2 +-
 src/common/component/ChannelModal/index.tsx              | 2 +-
 src/common/component/FileBox/preview/Audio.tsx           | 2 +-
 src/common/component/LeaveChannel/TransferOwnerModal.tsx | 2 +-
 src/common/component/Manifest/Prompt.tsx                 | 4 ++--
 src/common/component/Message/URLPreview.tsx              | 2 +-
 src/common/component/User/index.tsx                      | 2 +-
 src/common/component/styled/Button.tsx                   | 2 +-
 src/routes/chat/ChannelChat/index.tsx                    | 2 +-
 src/routes/chat/FavList.tsx                              | 4 ++--
 src/routes/setting/BotConfig/BotAPIKeys.tsx              | 8 --------
 src/routes/setting/License/index.tsx                     | 2 +-
 13 files changed, 14 insertions(+), 22 deletions(-)

diff --git a/src/common/component/BlankPlaceholder.tsx b/src/common/component/BlankPlaceholder.tsx
index 4247a9c5..78911e08 100644
--- a/src/common/component/BlankPlaceholder.tsx
+++ b/src/common/component/BlankPlaceholder.tsx
@@ -14,7 +14,7 @@ interface Props {
   type?: "chat" | "user";
 }
 const classes = {
-  box: "w-[220px] md:w-[200px] h-[100px] md:h-[200px] cursor-pointer bg-white 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-gray-50 dark:bg-gray-800 rounded-3xl flex-center flex-col gap-4",
   boxIcon: "w-7 h-7 md:w-10 md:h-10",
   boxTip: "px-5 text-xs md:text-sm text-slate-600 dark:text-gray-100 font-bold text-center"
 };
diff --git a/src/common/component/Channel.tsx b/src/common/component/Channel.tsx
index d45944a9..17fbee49 100644
--- a/src/common/component/Channel.tsx
+++ b/src/common/component/Channel.tsx
@@ -24,7 +24,7 @@ const Channel: FC<Props> = ({ interactive = true, id, compact = false, avatarSiz
 
   return (
     <div
-      className={clsx(`flex items-center justify-start gap-2 p-2 rounded-lg select-none`, compact && "p-0", interactive && "hover:bg-gray-500/10")}
+      className={clsx(`flex items-center justify-start gap-2 p-2 rounded-lg select-none`, compact && "p-0", interactive && "md:hover:bg-gray-500/10")}
     >
       <div className={`cursor-pointer relative`} style={{ width: `${avatarSize}px`, height: `${avatarSize}px` }}>
         <Avatar
diff --git a/src/common/component/ChannelModal/index.tsx b/src/common/component/ChannelModal/index.tsx
index 5833cbe5..838e162d 100644
--- a/src/common/component/ChannelModal/index.tsx
+++ b/src/common/component/ChannelModal/index.tsx
@@ -142,7 +142,7 @@ const ChannelModal: FC<Props> = ({ personal = false, closeModal }) => {
           <div className="w-full flex flex-col justify-start gap-2 mb-8">
             <span className="text-gray-400 text-sm font-normal">{t("channel_name")}</span>
             <div className="relative">
-              <input className="text-gray-600 rounded p-2 pl-9 border border-solid border-gray-300 w-full" onChange={handleNameInput} value={name} placeholder="new channel" />
+              <input className="text-gray-600 rounded p-2 pl-9 border border-solid border-gray-300 w-full bg-transparent" onChange={handleNameInput} value={name} placeholder="new channel" />
               <ChannelIcon personal={!is_public} className="absolute left-2 top-1/2 -translate-y-1/2" />
             </div>
           </div>
diff --git a/src/common/component/FileBox/preview/Audio.tsx b/src/common/component/FileBox/preview/Audio.tsx
index 5a0bf552..fea7f53a 100644
--- a/src/common/component/FileBox/preview/Audio.tsx
+++ b/src/common/component/FileBox/preview/Audio.tsx
@@ -16,7 +16,7 @@ const Audio: FC<Props> = ({ url }) => {
   return (
     <div className="flex-center h-full">
       {err ? (
-        <div className="p-[18px] text-base text-gray-500">Unable to play this audio</div>
+        <div className="p-[18px] text-gray-500">Unable to play this audio</div>
       ) : (
         <audio className="w-full" controls src={url} onError={handleError} />
       )}
diff --git a/src/common/component/LeaveChannel/TransferOwnerModal.tsx b/src/common/component/LeaveChannel/TransferOwnerModal.tsx
index e57f7836..3c72681b 100644
--- a/src/common/component/LeaveChannel/TransferOwnerModal.tsx
+++ b/src/common/component/LeaveChannel/TransferOwnerModal.tsx
@@ -72,7 +72,7 @@ const TransferOwnerModal: FC<Props> = ({ id, closeModal, withLeave = true }) =>
             return (
               <li
                 key={id}
-                className={clsx(`cursor-pointer flex items-center px-2 hover:bg-gray-500/10`, uid == id ? "bg-gray-500/10" : "")}
+                className={clsx(`cursor-pointer flex items-center px-2 md:hover:bg-gray-500/10`, uid == id ? "bg-gray-500/10" : "")}
                 onClick={handleSelectUser.bind(null, id)}
               >
                 <User uid={id} interactive={false} />
diff --git a/src/common/component/Manifest/Prompt.tsx b/src/common/component/Manifest/Prompt.tsx
index 9b0687cb..270d62e9 100644
--- a/src/common/component/Manifest/Prompt.tsx
+++ b/src/common/component/Manifest/Prompt.tsx
@@ -13,9 +13,9 @@ const Prompt: FC<Props> = ({ handleInstall, closePrompt }) => {
   const { t } = useTranslation();
   return (
     <Modal mask={false}>
-      <div className="relative pointer-events-auto mt-4 w-[406px] p-4 rounded-md bg-white shadow-md flex flex-col gap-3">
+      <div className="relative pointer-events-auto mt-4 w-[406px] p-4 rounded-md bg-white dark:bg-gray-900 shadow-md flex flex-col gap-3">
         <IconClose className="absolute top-4 right-4 cursor-pointer" onClick={closePrompt} />
-        <div className="flex flex-col gap-4 text-gray-600">
+        <div className="flex flex-col gap-4 text-gray-600 dark:text-gray-300">
           <h2 className="font-semibold">{t("tip.pwa_install_title")}</h2>
           <p className="text-sm">{t("tip.pwa_install_desc")}</p>
         </div>
diff --git a/src/common/component/Message/URLPreview.tsx b/src/common/component/Message/URLPreview.tsx
index 7d8abc92..f8505538 100644
--- a/src/common/component/Message/URLPreview.tsx
+++ b/src/common/component/Message/URLPreview.tsx
@@ -44,7 +44,7 @@ export default function URLPreview({ url = "" }) {
   const dotsClass = `truncate`;
   return ogImage ? (
     <a className={`${containerClass} flex-col !items-start p-3`} href={url} target="_blank" rel="noreferrer">
-      <h3 className={`text-base text-primary-500 w-full ${dotsClass}`}>{title}</h3>
+      <h3 className={`text-primary-500 w-full ${dotsClass}`}>{title}</h3>
       <p className={`text-xs text-gray-400 mb-2 w-full ${dotsClass}`}>{description}</p>
       <div className="w-full h-[180px]">
         <img className="w-full h-full object-cover" onError={handleOGImageError} src={ogImage} alt="og image" />
diff --git a/src/common/component/User/index.tsx b/src/common/component/User/index.tsx
index bf2a028c..691ff4ae 100644
--- a/src/common/component/User/index.tsx
+++ b/src/common/component/User/index.tsx
@@ -43,7 +43,7 @@ const User: FC<Props> = ({
   };
   if (!curr) return null;
   const online = curr.online || curr.uid == loginUid;
-  const containerClass = clsx(`relative flex items-center justify-start gap-2 rounded-lg select-none `, interactive && "hover:bg-gray-500/10", compact ? "p-0" : "p-2");
+  const containerClass = clsx(`relative flex items-center justify-start gap-2 rounded-lg select-none `, interactive && "md:hover:bg-gray-500/10", compact ? "p-0" : "p-2");
   const nameClass = clsx(`text-sm text-gray-500 max-w-[190px] truncate font-semibold dark:text-white`);
   const statusClass = clsx(`absolute -bottom-0.5 -right-1.5 w-3 h-3 box-content rounded-full border-[2px] border-solid border-white dark:border-gray-300`,
     online ? "bg-green-500" : "bg-zinc-400",
diff --git a/src/common/component/styled/Button.tsx b/src/common/component/styled/Button.tsx
index fa586a17..2da15e59 100644
--- a/src/common/component/styled/Button.tsx
+++ b/src/common/component/styled/Button.tsx
@@ -11,7 +11,7 @@ const StyledButton = ({ children, className = '', ...rest }: Props) => {
   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 md:hover:bg-primary-500 active:bg-primary-500 disabled:bg-gray-300`,
-    isFull && "w-full",
+    isFull && "w-full text-center justify-center",
     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",
diff --git a/src/routes/chat/ChannelChat/index.tsx b/src/routes/chat/ChannelChat/index.tsx
index 763fc555..501ee318 100644
--- a/src/routes/chat/ChannelChat/index.tsx
+++ b/src/routes/chat/ChannelChat/index.tsx
@@ -145,7 +145,7 @@ function ChannelChat({ cid = 0, dropFiles = [] }: Props) {
         users={
           <div className={`h-full flex-col gap-1 w-[226px] overflow-y-scroll p-2 shadow-[inset_1px_0px_0px_rgba(0,_0,_0,_0.1)] ${membersVisible ? "flex" : "hidden"}`}>
             {addVisible && (
-              <div className="cursor-pointer flex items-center justify-start gap-1 select-none rounded-lg p-2.5 hover:bg-gray-500/10" onClick={toggleAddVisible}>
+              <div className="cursor-pointer flex items-center justify-start gap-1 select-none rounded-lg p-2.5 md:hover:bg-gray-500/10" onClick={toggleAddVisible}>
                 <IconAdd className="w-6 h-6 dark:fill-slate-300" />
                 <div className="font-semibold text-sm text-gray-600 dark:text-gray-50">{t("add_channel_members")}</div>
               </div>
diff --git a/src/routes/chat/FavList.tsx b/src/routes/chat/FavList.tsx
index ee69e5a1..92e9ef46 100644
--- a/src/routes/chat/FavList.tsx
+++ b/src/routes/chat/FavList.tsx
@@ -17,11 +17,11 @@ const FavList: FC<Props> = ({ cid = null, uid = null }) => {
   const noFavs = favorites.length == 0;
   return (
     <div className="p-4 bg-slate-50 dark:bg-slate-800 rounded-xl min-w-[500px] max-h-[500px] overflow-auto drop-shadow-[0px_25px_50px_rgba(31,_41,_55,_0.25)]">
-      <h4 className="font-bold text-base text-gray-600 dark:text-gray-400 mb-4">{t('fav_msg')}({favorites.length})</h4>
+      <h4 className="font-bold text-gray-600 dark:text-gray-400 mb-4">{t('fav_msg')}({favorites.length})</h4>
       {noFavs ? (
         <div className="flex flex-col gap-2 w-full items-center p-4">
           <IconSurprise />
-          <div className="w-60 text-base text-gray-600 dark:text-gray-400 text-center font-bold">{t("fav_empty_tip")}</div>
+          <div className="w-60 text-gray-600 dark:text-gray-400 text-center font-bold">{t("fav_empty_tip")}</div>
         </div>
       ) : (
         <ul className="flex flex-col gap-2">
diff --git a/src/routes/setting/BotConfig/BotAPIKeys.tsx b/src/routes/setting/BotConfig/BotAPIKeys.tsx
index 7130d86f..ca4b18a6 100644
--- a/src/routes/setting/BotConfig/BotAPIKeys.tsx
+++ b/src/routes/setting/BotConfig/BotAPIKeys.tsx
@@ -12,14 +12,6 @@ import clsx from 'clsx';
 type Props = {
     uid: number
 }
-
-// const APIKeyTable = () => {
-
-
-//     return <table>
-
-//     </table>;
-// };
 type DeleteAPIKeyProps = { uid: number, kid: number }
 const tdClass = "p-1 whitespace-nowrap text-xs text-gray-500 dark:text-gray-200 align-middle px-1";
 const BotAPIKeys = ({ uid }: Props) => {
diff --git a/src/routes/setting/License/index.tsx b/src/routes/setting/License/index.tsx
index f5f1dc7e..b479cecd 100644
--- a/src/routes/setting/License/index.tsx
+++ b/src/routes/setting/License/index.tsx
@@ -59,7 +59,7 @@ export default function License() {
         </div>
         <div className="flex flex-col gap-4 bg-primary-500 text-white rounded drop-shadow-xl p-5">
           <h2 className="text-2xl font-bold">{t("license.tip.title")} 🎁</h2>
-          <p className="text-base flex flex-col">
+          <p className="flex flex-col">
             <span>
               {t("license.tip.user_test")}
             </span>