chore: remove hover effects in mobile

This commit is contained in:
Tristan Yang
2023-02-20 12:54:45 +08:00
parent 567b3714bc
commit 053c7d9402
27 changed files with 46 additions and 54 deletions
+2 -2
View File
@@ -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">
+1 -1
View File
@@ -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>
+4 -4
View File
@@ -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} />
+2 -2
View File
@@ -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>
)}