Remove hover effect on mobile in editor (#3163)

* editor: remove background on hover on mobile

* editor: fix task item alignment and size on mobile

packages/editor/src/extensions/task-item/component.tsx

@@ -107,9 +107,11 @@ export function TaskItemComponent(
           mt: "0.40ch",
           marginInlineEnd: 1,
           cursor: editor.isEditable ? "pointer" : "unset",
-          ":hover": {
-            borderColor: "accent"
-          },
+          ":hover": isMobile
+            ? undefined
+            : {
+                borderColor: "accent"
+              },
           fontFamily: "inherit"
         }}
         onMouseDown={(e) => {
@@ -125,7 +127,7 @@ export function TaskItemComponent(
           }
         }}
         color={checked ? "accent" : "icon"}
-        size={isMobile ? "1.66ch" : "1.46ch"}
+        size={isMobile ? "1.70ch" : "1.46ch"}
       />
 
       <Box
@@ -143,7 +145,8 @@ export function TaskItemComponent(
               opacity: 1
             },
           flex: 1,
-          mt: "1px"
+          mt: ["3px", "3px", 0],
+          ml: ["2px", "2px", 0]
         }}
       />
       <DesktopOnly>

packages/editor/src/extensions/task-list/component.tsx

@@ -76,7 +76,7 @@ export function TaskListComponent(
           sx={{
             position: "relative",
             bg: "var(--background-secondary)",
-            py: "5px",
+            py: "0.6em",
             borderRadius: "default",
             mb: 2,
             alignItems: "center",

packages/editor/src/toolbar/components/counter.tsx

@@ -20,6 +20,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from "react";
 import { Flex, Text } from "@theme-ui/components";
 import { ToolButton } from "./tool-button";
+import { useIsMobile } from "../stores/toolbar-store";
 
 export type CounterProps = {
   title: string;
@@ -30,6 +31,7 @@ export type CounterProps = {
 };
 function _Counter(props: CounterProps) {
   const { title, onDecrease, onIncrease, onReset, value } = props;
+  const isMobile = useIsMobile();
 
   return (
     <Flex
@@ -40,7 +42,7 @@ function _Counter(props: CounterProps) {
         cursor: "pointer",
         height: "100%",
         ":hover": {
-          bg: "hover-secondary"
+          bg: isMobile ? "transparent" : "hover-secondary"
         }
       }}
       onClick={onReset}

packages/editor/src/toolbar/components/dropdown.tsx

@@ -67,7 +67,12 @@ export function Dropdown(props: DropdownProps) {
           alignItems: "center",
           ":last-of-type": {
             mr: 0
-          }
+          },
+          ":hover:not(:disabled):not(:active)": !isMobile
+            ? undefined
+            : {
+                bg: "transparent"
+              }
         }}
         onClick={() => setIsOpen((s) => !s)}
         onMouseDown={(e) => e.preventDefault()}
@@ -77,7 +82,7 @@ export function Dropdown(props: DropdownProps) {
             sx={{
               fontSize: "subBody",
               mr: 1,
-              color: "paragraph",
+              color: isPopupOpen ? "accent" : "paragraph",
               flexShrink: 0
             }}
           >
@@ -96,6 +101,7 @@ export function Dropdown(props: DropdownProps) {
               ? Icons.chevronUp
               : Icons.chevronDown
           }
+          color={isPopupOpen ? "accent" : "paragraph"}
           size={"small"}
         />
       </Button>

packages/editor/src/toolbar/components/split-button.tsx

@@ -20,7 +20,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { PropsWithChildren, useRef } from "react";
 import { Flex } from "@theme-ui/components";
 import { ToolButton, ToolButtonProps } from "./tool-button";
-import { useToolbarLocation } from "../stores/toolbar-store";
+import { useIsMobile, useToolbarLocation } from "../stores/toolbar-store";
 import React from "react";
 
 export type SplitButtonProps = ToolButtonProps & {
@@ -31,6 +31,7 @@ function _SplitButton(props: PropsWithChildren<SplitButtonProps>) {
 
   const ref = useRef<HTMLDivElement>(null);
   const toolbarLocation = useToolbarLocation();
+  const isMobile = useIsMobile();
 
   return (
     <>
@@ -42,7 +43,7 @@ function _SplitButton(props: PropsWithChildren<SplitButtonProps>) {
           borderRadius: "default",
           overflow: "hidden",
           ":hover": {
-            bg: "hover-secondary"
+            bg: isMobile ? "transparent" : "hover-secondary"
           }
         }}
       >

packages/editor/src/toolbar/components/tool-button.tsx

@@ -25,6 +25,7 @@ import { IconNames, Icons } from "../icons";
 import { ToolButtonVariant } from "../types";
 import { Button } from "../../components/button";
 import { Icon } from "@notesnook/ui";
+import { useIsMobile } from "../stores/toolbar-store";
 
 export type ToolButtonProps = ButtonProps & {
   icon: IconNames;
@@ -47,6 +48,7 @@ export const ToolButton = React.memo(
       variant = "normal",
       ...buttonProps
     } = props;
+    const isMobile = useIsMobile();
 
     return (
       <Button
@@ -65,6 +67,11 @@ export const ToolButton = React.memo(
           ":last-of-type": {
             mr: 0
           },
+          ":hover:not(:disabled):not(:active)": !isMobile
+            ? undefined
+            : {
+                bg: "transparent"
+              },
           ...sx
         }}
         onMouseDown={(e) => e.preventDefault()}