Move hover helper to shared

app/components/DocumentCard.tsx

@@ -9,7 +9,7 @@ import { Link } from "react-router-dom";
 import styled, { useTheme } from "styled-components";
 import Icon from "@shared/components/Icon";
 import Squircle from "@shared/components/Squircle";
-import { s, ellipsis } from "@shared/styles";
+import { s, hover, ellipsis } from "@shared/styles";
 import { IconType } from "@shared/types";
 import { determineIconType } from "@shared/utils/icon";
 import Document from "~/models/Document";
@@ -18,7 +18,6 @@ import Flex from "~/components/Flex";
 import NudeButton from "~/components/NudeButton";
 import Time from "~/components/Time";
 import useStores from "~/hooks/useStores";
-import { hover } from "~/styles";
 import CollectionIcon from "./Icons/CollectionIcon";
 import Text from "./Text";
 import Tooltip from "./Tooltip";

app/components/DocumentListItem.tsx

@@ -10,7 +10,7 @@ import styled, { css } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import EventBoundary from "@shared/components/EventBoundary";
 import Icon from "@shared/components/Icon";
-import { s } from "@shared/styles";
+import { s, hover } from "@shared/styles";
 import Document from "~/models/Document";
 import Badge from "~/components/Badge";
 import DocumentMeta from "~/components/DocumentMeta";
@@ -23,7 +23,6 @@ import useBoolean from "~/hooks/useBoolean";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import { useLocationSidebarContext } from "~/hooks/useLocationSidebarContext";
 import DocumentMenu from "~/menus/DocumentMenu";
-import { hover } from "~/styles";
 import { documentPath } from "~/utils/routeHelpers";
 import { determineSidebarContext } from "./Sidebar/components/SidebarContext";
 

app/components/EventListItem.tsx

@@ -13,7 +13,7 @@ import { useTranslation } from "react-i18next";
 import { useLocation } from "react-router-dom";
 import styled, { css } from "styled-components";
 import EventBoundary from "@shared/components/EventBoundary";
-import { s } from "@shared/styles";
+import { s, hover } from "@shared/styles";
 import Document from "~/models/Document";
 import Event from "~/models/Event";
 import { Avatar } from "~/components/Avatar";
@@ -22,7 +22,6 @@ import Time from "~/components/Time";
 import { useLocationSidebarContext } from "~/hooks/useLocationSidebarContext";
 import useStores from "~/hooks/useStores";
 import RevisionMenu from "~/menus/RevisionMenu";
-import { hover } from "~/styles";
 import Logger from "~/utils/Logger";
 import { documentHistoryPath } from "~/utils/routeHelpers";
 

app/components/IconPicker/components/ColorPicker.tsx

@@ -1,13 +1,12 @@
 import { BackIcon } from "outline-icons";
 import React from "react";
 import styled from "styled-components";
-import { breakpoints, s } from "@shared/styles";
+import { breakpoints, s, hover } from "@shared/styles";
 import { colorPalette } from "@shared/utils/collections";
 import { validateColorHex } from "@shared/utils/color";
 import Flex from "~/components/Flex";
 import NudeButton from "~/components/NudeButton";
 import Text from "~/components/Text";
-import { hover } from "~/styles";
 
 enum Panel {
   Builtin,

app/components/IconPicker/components/IconButton.tsx

@@ -1,7 +1,6 @@
 import styled from "styled-components";
-import { s } from "@shared/styles";
+import { s, hover } from "@shared/styles";
 import NudeButton from "~/components/NudeButton";
-import { hover } from "~/styles";
 
 export const IconButton = styled(NudeButton)<{ delay?: number }>`
   width: 32px;

app/components/IconPicker/components/PopoverButton.tsx

@@ -1,7 +1,6 @@
 import styled, { css } from "styled-components";
-import { s } from "@shared/styles";
+import { s, hover } from "@shared/styles";
 import NudeButton from "~/components/NudeButton";
-import { hover } from "~/styles";
 
 export const PopoverButton = styled(NudeButton)<{ $borderOnHover?: boolean }>`
   &: ${hover},

app/components/IconPicker/components/SkinTonePicker.tsx

@@ -2,13 +2,12 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import { Menu, MenuButton, MenuItem, useMenuState } from "reakit";
 import styled from "styled-components";
-import { depths, s } from "@shared/styles";
+import { depths, s, hover } from "@shared/styles";
 import { EmojiSkinTone } from "@shared/types";
 import { getEmojiVariants } from "@shared/utils/emoji";
 import { Emoji } from "~/components/Emoji";
 import Flex from "~/components/Flex";
 import NudeButton from "~/components/NudeButton";
-import { hover } from "~/styles";
 import { IconButton } from "./IconButton";
 
 const SkinTonePicker = ({

app/components/IconPicker/index.tsx

@@ -11,7 +11,7 @@ import {
 } from "reakit";
 import styled, { css } from "styled-components";
 import Icon from "@shared/components/Icon";
-import { s } from "@shared/styles";
+import { s, hover } from "@shared/styles";
 import theme from "@shared/styles/theme";
 import { IconType } from "@shared/types";
 import { determineIconType } from "@shared/utils/icon";
@@ -22,7 +22,6 @@ import useMobile from "~/hooks/useMobile";
 import useOnClickOutside from "~/hooks/useOnClickOutside";
 import usePrevious from "~/hooks/usePrevious";
 import useWindowSize from "~/hooks/useWindowSize";
-import { hover } from "~/styles";
 import EmojiPanel from "./components/EmojiPanel";
 import IconPanel from "./components/IconPanel";
 import { PopoverButton } from "./components/PopoverButton";

app/components/List/Item.tsx

@@ -6,10 +6,9 @@ import { LocationDescriptor } from "history";
 import * as React from "react";
 import scrollIntoView from "scroll-into-view-if-needed";
 import styled, { useTheme } from "styled-components";
-import { s, ellipsis } from "@shared/styles";
+import { s, hover, ellipsis } from "@shared/styles";
 import Flex from "~/components/Flex";
 import NavLink from "~/components/NavLink";
-import { hover } from "~/styles";
 
 export type Props = Omit<React.HTMLAttributes<HTMLAnchorElement>, "title"> & {
   /** An icon or image to display to the left of the list item */

app/components/Notifications/NotificationListItem.tsx

@@ -4,11 +4,10 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import styled from "styled-components";
-import { s } from "@shared/styles";
+import { s, hover, truncateMultiline } from "@shared/styles";
 import Notification from "~/models/Notification";
 import CommentEditor from "~/scenes/Document/components/CommentEditor";
 import useStores from "~/hooks/useStores";
-import { hover, truncateMultiline } from "~/styles";
 import { Avatar, AvatarSize } from "../Avatar";
 import Flex from "../Flex";
 import Text from "../Text";

app/components/Notifications/Notifications.tsx

@@ -3,13 +3,12 @@ import { MarkAsReadIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
-import { s } from "@shared/styles";
+import { s, hover } from "@shared/styles";
 import Notification from "~/models/Notification";
 import { markNotificationsAsRead } from "~/actions/definitions/notifications";
 import useActionContext from "~/hooks/useActionContext";
 import useStores from "~/hooks/useStores";
 import NotificationMenu from "~/menus/NotificationMenu";
-import { hover } from "~/styles";
 import Desktop from "~/utils/Desktop";
 import Empty from "../Empty";
 import ErrorBoundary from "../ErrorBoundary";

app/components/Reactions/Reaction.tsx

@@ -3,7 +3,7 @@ import { transparentize } from "polished";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import styled, { css } from "styled-components";
-import { s } from "@shared/styles";
+import { s, hover } from "@shared/styles";
 import type { ReactionSummary } from "@shared/types";
 import { getEmojiId } from "@shared/utils/emoji";
 import User from "~/models/User";
@@ -13,7 +13,6 @@ import NudeButton from "~/components/NudeButton";
 import Text from "~/components/Text";
 import Tooltip from "~/components/Tooltip";
 import useCurrentUser from "~/hooks/useCurrentUser";
-import { hover } from "~/styles";
 
 type Props = {
   /** Thin reaction data - contains the emoji & active user ids for this reaction. */

app/components/Reactions/ViewReactionsDialog.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from "react-i18next";
 import { Tab, TabPanel, useTabState } from "reakit";
 import { toast } from "sonner";
 import styled, { css } from "styled-components";
-import { s } from "@shared/styles";
+import { s, hover } from "@shared/styles";
 import Comment from "~/models/Comment";
 import { Avatar, AvatarSize } from "~/components/Avatar";
 import { Emoji } from "~/components/Emoji";
@@ -13,7 +13,6 @@ import Flex from "~/components/Flex";
 import PlaceholderText from "~/components/PlaceholderText";
 import Text from "~/components/Text";
 import useStores from "~/hooks/useStores";
-import { hover } from "~/styles";
 
 type Props = {
   /** Model for which to show the reactions. */

app/components/SearchListItem.tsx

@@ -7,10 +7,9 @@ import * as React from "react";
 import { Link } from "react-router-dom";
 import styled, { css } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import { s, ellipsis } from "@shared/styles";
+import { s, hover, ellipsis } from "@shared/styles";
 import Document from "~/models/Document";
 import Highlight, { Mark } from "~/components/Highlight";
-import { hover } from "~/styles";
 import { sharedDocumentPath } from "~/utils/routeHelpers";
 
 type Props = {

app/components/Sharing/components/ListItem.tsx

@@ -1,7 +1,7 @@
 import { PlusIcon } from "outline-icons";
 import styled from "styled-components";
+import { hover } from "@shared/styles";
 import BaseListItem from "~/components/List/Item";
-import { hover } from "~/styles";
 
 export const InviteIcon = styled(PlusIcon)`
   opacity: 0;

app/components/Sharing/components/Suggestions.tsx

@@ -5,7 +5,7 @@ import { CheckmarkIcon, CloseIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
-import { s } from "@shared/styles";
+import { s, hover } from "@shared/styles";
 import { stringToColor } from "@shared/utils/color";
 import Collection from "~/models/Collection";
 import Document from "~/models/Document";
@@ -20,7 +20,6 @@ import useCurrentUser from "~/hooks/useCurrentUser";
 import useMaxHeight from "~/hooks/useMaxHeight";
 import useStores from "~/hooks/useStores";
 import useThrottledCallback from "~/hooks/useThrottledCallback";
-import { hover } from "~/styles";
 import { InviteIcon, ListItem } from "./ListItem";
 
 type Suggestion = IAvatar & {

app/components/Sharing/components/index.tsx

@@ -1,9 +1,8 @@
 import { darken } from "polished";
 import styled from "styled-components";
 import Flex from "@shared/components/Flex";
-import { s } from "@shared/styles";
+import { s, hover } from "@shared/styles";
 import NudeButton from "~/components/NudeButton";
-import { hover } from "~/styles";
 
 // TODO: Temp until Button/NudeButton styles are normalized
 export const Wrapper = styled.div`

app/components/Sidebar/Shared.tsx

@@ -3,6 +3,7 @@ import { SidebarIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
+import { hover } from "@shared/styles";
 import { NavigationNode } from "@shared/types";
 import { metaDisplay } from "@shared/utils/keyboard";
 import Flex from "~/components/Flex";
@@ -11,7 +12,6 @@ import SearchPopover from "~/components/SearchPopover";
 import Tooltip from "~/components/Tooltip";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";
-import { hover } from "~/styles";
 import history from "~/utils/history";
 import { homePath, sharedDocumentPath } from "~/utils/routeHelpers";
 import { useTeamContext } from "../TeamContext";

app/components/Sidebar/components/ToggleButton.tsx

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { hover } from "~/styles";
+import { hover } from "@shared/styles";
 import SidebarButton from "./SidebarButton";
 
 const ToggleButton = styled(SidebarButton)`

app/components/Star.tsx

@@ -3,6 +3,7 @@ import { StarredIcon, UnstarredIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled, { useTheme } from "styled-components";
+import { hover } from "@shared/styles";
 import Collection from "~/models/Collection";
 import Document from "~/models/Document";
 import {
@@ -11,7 +12,6 @@ import {
 } from "~/actions/definitions/collections";
 import { starDocument, unstarDocument } from "~/actions/definitions/documents";
 import useActionContext from "~/hooks/useActionContext";
-import { hover } from "~/styles";
 import NudeButton from "./NudeButton";
 
 type Props = {

app/components/Tab.tsx

@@ -4,9 +4,8 @@ import isEqual from "lodash/isEqual";
 import queryString from "query-string";
 import * as React from "react";
 import styled, { useTheme } from "styled-components";
-import { s } from "@shared/styles";
+import { s, hover } from "@shared/styles";
 import NavLink from "~/components/NavLink";
-import { hover } from "~/styles";
 
 type Props = Omit<React.ComponentProps<typeof NavLink>, "children"> & {
   /**

app/menus/InsightsMenu.tsx

@@ -3,14 +3,13 @@ import { MoreIcon } from "outline-icons";
 import React from "react";
 import { MenuButton, useMenuState } from "reakit/Menu";
 import styled from "styled-components";
-import { s } from "@shared/styles";
+import { s, hover } from "@shared/styles";
 import ContextMenu from "~/components/ContextMenu";
 import Template from "~/components/ContextMenu/Template";
 import NudeButton from "~/components/NudeButton";
 import { actionToMenuItem } from "~/actions";
 import { toggleViewerInsights } from "~/actions/definitions/documents";
 import useActionContext from "~/hooks/useActionContext";
-import { hover } from "~/styles";
 import { MenuItem } from "~/types";
 
 const InsightsMenu: React.FC = () => {

app/menus/NotificationMenu.tsx

@@ -3,7 +3,7 @@ import { MoreIcon } from "outline-icons";
 import React from "react";
 import { MenuButton, useMenuState } from "reakit/Menu";
 import styled from "styled-components";
-import { s } from "@shared/styles";
+import { s, hover } from "@shared/styles";
 import ContextMenu from "~/components/ContextMenu";
 import Template from "~/components/ContextMenu/Template";
 import NudeButton from "~/components/NudeButton";
@@ -12,7 +12,6 @@ import { navigateToNotificationSettings } from "~/actions/definitions/navigation
 import { markNotificationsAsArchived } from "~/actions/definitions/notifications";
 import useActionContext from "~/hooks/useActionContext";
 import useOnClickOutside from "~/hooks/useOnClickOutside";
-import { hover } from "~/styles";
 import { MenuItem } from "~/types";
 
 const NotificationMenu: React.FC = () => {

app/scenes/Document/components/CommentThread.tsx

@@ -6,7 +6,7 @@ import { useHistory, useLocation } from "react-router-dom";
 import scrollIntoView from "scroll-into-view-if-needed";
 import styled, { css } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import { s } from "@shared/styles";
+import { s, hover } from "@shared/styles";
 import { ProsemirrorData } from "@shared/types";
 import { ProsemirrorHelper } from "@shared/utils/ProsemirrorHelper";
 import Comment from "~/models/Comment";
@@ -21,7 +21,6 @@ import useOnClickOutside from "~/hooks/useOnClickOutside";
 import usePersistedState from "~/hooks/usePersistedState";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
-import { hover } from "~/styles";
 import { sidebarAppearDuration } from "~/styles/animations";
 import CommentForm from "./CommentForm";
 import CommentThreadItem from "./CommentThreadItem";

app/scenes/Document/components/CommentThreadItem.tsx

@@ -9,7 +9,7 @@ import { toast } from "sonner";
 import styled, { css } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import EventBoundary from "@shared/components/EventBoundary";
-import { s } from "@shared/styles";
+import { s, hover } from "@shared/styles";
 import { ProsemirrorData } from "@shared/types";
 import { dateToRelative } from "@shared/utils/date";
 import { Minute } from "@shared/utils/time";
@@ -28,7 +28,6 @@ import useActionContext from "~/hooks/useActionContext";
 import useBoolean from "~/hooks/useBoolean";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import CommentMenu from "~/menus/CommentMenu";
-import { hover } from "~/styles";
 import CommentEditor from "./CommentEditor";
 import { HighlightedText } from "./HighlightText";
 

app/scenes/Document/components/HighlightText.ts

@@ -1,7 +1,6 @@
 import styled from "styled-components";
-import { s } from "@shared/styles";
+import { s, truncateMultiline } from "@shared/styles";
 import Text from "~/components/Text";
-import { truncateMultiline } from "~/styles";
 
 /**
  * Highlighted text associated with a comment.

app/scenes/Document/components/ReferenceListItem.tsx

@@ -4,13 +4,12 @@ import * as React from "react";
 import { Link } from "react-router-dom";
 import styled from "styled-components";
 import Icon from "@shared/components/Icon";
-import { s, ellipsis } from "@shared/styles";
+import { s, hover, ellipsis } from "@shared/styles";
 import { IconType, NavigationNode } from "@shared/types";
 import { determineIconType } from "@shared/utils/icon";
 import Document from "~/models/Document";
 import Flex from "~/components/Flex";
 import { SidebarContextType } from "~/components/Sidebar/components/SidebarContext";
-import { hover } from "~/styles";
 import { sharedDocumentPath } from "~/utils/routeHelpers";
 
 type Props = {

app/scenes/Search/Search.tsx

@@ -8,7 +8,7 @@ import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import { v4 as uuidv4 } from "uuid";
 import { Pagination } from "@shared/constants";
-import { hideScrollbars } from "@shared/styles";
+import { hover, hideScrollbars } from "@shared/styles";
 import {
   DateFilter as TDateFilter,
   StatusFilter as TStatusFilter,
@@ -27,7 +27,6 @@ import env from "~/env";
 import usePaginatedRequest from "~/hooks/usePaginatedRequest";
 import useQuery from "~/hooks/useQuery";
 import useStores from "~/hooks/useStores";
-import { hover } from "~/styles";
 import { SearchResult } from "~/types";
 import { searchPath } from "~/utils/routeHelpers";
 import { decodeURIComponentSafe } from "~/utils/urls";

app/scenes/Search/components/RecentSearchListItem.tsx

@@ -7,11 +7,10 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import styled from "styled-components";
-import { s } from "@shared/styles";
+import { s, hover } from "@shared/styles";
 import type SearchQuery from "~/models/SearchQuery";
 import NudeButton from "~/components/NudeButton";
 import Tooltip from "~/components/Tooltip";
-import { hover } from "~/styles";
 import { searchPath } from "~/utils/routeHelpers";
 
 type Props = {

app/scenes/Settings/components/GroupsTable.tsx

@@ -4,7 +4,7 @@ import React from "react";
 import { Trans, useTranslation } from "react-i18next";
 import styled from "styled-components";
 import { MAX_AVATAR_DISPLAY } from "@shared/constants";
-import { s } from "@shared/styles";
+import { s, hover } from "@shared/styles";
 import Group from "~/models/Group";
 import Facepile from "~/components/Facepile";
 import Flex from "~/components/Flex";
@@ -18,7 +18,6 @@ import Text from "~/components/Text";
 import Time from "~/components/Time";
 import useStores from "~/hooks/useStores";
 import GroupMenu from "~/menus/GroupMenu";
-import { hover } from "~/styles";
 import { ViewGroupMembersDialog } from "./GroupDialogs";
 import { FILTER_HEIGHT } from "./StickyFilters";
 

app/styles/index.ts

@@ -1,13 +1,5 @@
-import { isTouchDevice } from "@shared/utils/browser";
 import Desktop from "~/utils/Desktop";
 
-/**
- * Returns "hover" on a non-touch device and "active" on a touch device. To
- * avoid "sticky" hover on mobile. Use `&:${hover} {...}` instead of
- * using `&:hover {...}`.
- */
-export const hover = isTouchDevice() ? "active" : "hover";
-
 /**
  * Mixin to make an element drag the window when rendered in the desktop app.
  *
@@ -38,16 +30,3 @@ export const fadeOnDesktopBackgrounded = () => {
     body.backgrounded & { opacity: 0.75; }
   `;
 };
-
-/**
- * Truncate multiline text.
- *
- * @returns string of CSS
- */
-export const truncateMultiline = (lines: number) => `
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: ${lines};
-  overflow: hidden;
-  overflow-wrap: anywhere;
-`;

shared/editor/components/Styles.ts

@@ -1,6 +1,7 @@
 /* eslint-disable no-irregular-whitespace */
 import { lighten, transparentize } from "polished";
 import styled, { DefaultTheme, css, keyframes } from "styled-components";
+import { hover } from "../../styles";
 import { EditorStyleHelper } from "../styles/EditorStyleHelper";
 import { videoStyle } from "./Video";
 
@@ -303,7 +304,7 @@ width: 100%;
   gap: 4px;
   vertical-align: bottom;
 
-  &:hover {
+  &:${hover} {
     cursor: default;
     background: ${props.theme.mentionHoverBackground};
   }

shared/styles/index.ts

@@ -1,9 +1,17 @@
 import { DefaultTheme } from "styled-components";
+import { isTouchDevice } from "../utils/browser";
 
 export { default as depths } from "./depths";
 
 export { default as breakpoints } from "./breakpoints";
 
+/**
+ * Returns "hover" on a non-touch device and "active" on a touch device. To
+ * avoid "sticky" hover on mobile. Use `&:${hover} {...}` instead of
+ * using `&:hover {...}`.
+ */
+export const hover = isTouchDevice() ? "active" : "hover";
+
 /**
  * Mixin to make text ellipse when it overflows.
  *
@@ -54,3 +62,16 @@ export const extraArea = (pixels: number): string => `
     bottom: -${pixels}px;
   }
 `;
+
+/**
+ * Truncate multiline text.
+ *
+ * @returns string of CSS
+ */
+export const truncateMultiline = (lines: number) => `
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: ${lines};
+  overflow: hidden;
+  overflow-wrap: anywhere;
+`;