feat: Add cursor style user preference (#4199)

* feat: Add cursor style user preference * Remove headings for now
2022-10-01 13:39:45 +02:00
parent ee8c47eb3b
commit b9bf2e58cb
37 changed files with 68 additions and 38 deletions
--- a/app/components/Breadcrumb.tsx
+++ b/app/components/Breadcrumb.tsx
@@ -67,6 +67,7 @@ const Item = styled(Link)<{ $highlight: boolean; $withIcon: boolean }>`
  display: flex;
  flex-shrink: 1;
  min-width: 0;
+  cursor: var(--pointer);
  color: ${(props) => props.theme.text};
  font-size: 15px;
  height: 24px;
--- a/app/components/Button.tsx
+++ b/app/components/Button.tsx
@@ -30,7 +30,7 @@ const RealButton = styled(ActionButton)<RealProps>`
  height: 32px;
  text-decoration: none;
  flex-shrink: 0;
-  cursor: pointer;
+  cursor: var(--pointer);
  user-select: none;
  appearance: none !important;

--- a/app/components/CommandBarItem.tsx
+++ b/app/components/CommandBarItem.tsx
@@ -98,7 +98,7 @@ const Item = styled.div<{ active?: boolean }>`
  display: flex;
  align-items: center;
  justify-content: space-between;
-  cursor: pointer;
+  cursor: var(--pointer);

  text-overflow: ellipsis;
  white-space: nowrap;
--- a/app/components/ContextMenu/MenuItem.tsx
+++ b/app/components/ContextMenu/MenuItem.tsx
@@ -139,7 +139,7 @@ export const MenuAnchorCSS = css<MenuAnchorProps>`
      color: ${props.theme.white};
      background: ${props.dangerous ? props.theme.danger : props.theme.primary};
      box-shadow: none;
-      cursor: pointer;
+      cursor: var(--pointer);

      svg {
        fill: ${props.theme.white};
--- a/app/components/DocumentCard.tsx
+++ b/app/components/DocumentCard.tsx
@@ -236,6 +236,7 @@ const DocumentLink = styled(Link)<{
  width: 100%;
  height: 100%;
  border-radius: 8px;
+  cursor: var(--pointer);
  background: ${(props) => props.theme.background};
  transition: transform 50ms ease-in-out;
  border: 1px solid ${(props) => props.theme.inputBorder};
--- a/app/components/DocumentListItem.tsx
+++ b/app/components/DocumentListItem.tsx
@@ -201,6 +201,7 @@ const DocumentLink = styled(Link)<{
  border-radius: 8px;
  max-height: 50vh;
  width: calc(100vw - 8px);
+  cursor: var(--pointer);

  &:focus-visible {
    outline: none;
--- a/app/components/Facepile.tsx
+++ b/app/components/Facepile.tsx
@@ -69,7 +69,7 @@ const More = styled.div<{ size: number }>`
 const Avatars = styled(Flex)`
  align-items: center;
  flex-direction: row-reverse;
-  cursor: pointer;
+  cursor: var(--pointer);
 `;

 export default observer(Facepile);
--- a/app/components/GroupListItem.tsx
+++ b/app/components/GroupListItem.tsx
@@ -102,7 +102,7 @@ const Image = styled(Flex)`
 const Title = styled.span`
  &:hover {
    text-decoration: underline;
-    cursor: pointer;
+    cursor: var(--pointer);
  }
 `;

--- a/app/components/Header.tsx
+++ b/app/components/Header.tsx
@@ -143,7 +143,7 @@ const Title = styled("div")`
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
-  cursor: pointer;
+  cursor: var(--pointer);
  min-width: 0;

  ${breakpoint("tablet")`
--- a/app/components/HoverPreviewDocument.tsx
+++ b/app/components/HoverPreviewDocument.tsx
@@ -50,7 +50,7 @@ function HoverPreviewDocument({ url, children }: Props) {
 }

 const Content = styled(Link)`
-  cursor: pointer;
+  cursor: var(--pointer);
 `;

 const Heading = styled.h2`
--- a/app/components/InputSelect.tsx
+++ b/app/components/InputSelect.tsx
@@ -288,7 +288,7 @@ const Positioner = styled(Position)`
        color: ${(props) => props.theme.white};
        background: ${(props) => props.theme.primary};
        box-shadow: none;
-        cursor: pointer;
+        cursor: var(--pointer);

        svg {
          fill: ${(props) => props.theme.white};
--- a/app/components/List/Item.tsx
+++ b/app/components/List/Item.tsx
@@ -87,7 +87,7 @@ const Wrapper = styled.a<{
    border-bottom: 0;
  }

-  cursor: ${({ to }) => (to ? "pointer" : "default")};
+  cursor: ${({ to }) => (to ? "var(--pointer)" : "default")};
 `;

 const Image = styled(Flex)`
--- a/app/components/NudeButton.tsx
+++ b/app/components/NudeButton.tsx
@@ -27,7 +27,7 @@ const NudeButton = styled(ActionButton).attrs((props: Props) => ({
  line-height: 0;
  border: 0;
  padding: 0;
-  cursor: pointer;
+  cursor: var(--pointer);
  user-select: none;
  color: inherit;
 `;
--- a/app/components/SearchListItem.tsx
+++ b/app/components/SearchListItem.tsx
@@ -83,6 +83,7 @@ const DocumentLink = styled(Link)<{
  align-items: center;
  padding: 6px 12px;
  max-height: 50vh;
+  cursor: var(--pointer);

  &:not(:last-child) {
    margin-bottom: 4px;
--- a/app/components/Sidebar/components/Header.tsx
+++ b/app/components/Sidebar/components/Header.tsx
@@ -80,7 +80,7 @@ const Button = styled.button`
  &:not(:disabled):hover,
  &:not(:disabled):active {
    color: ${(props) => props.theme.textSecondary};
-    cursor: pointer;
+    cursor: var(--pointer);
  }
 `;

--- a/app/components/Sidebar/components/SidebarButton.tsx
+++ b/app/components/Sidebar/components/SidebarButton.tsx
@@ -68,7 +68,7 @@ const Wrapper = styled(Flex)<{ minHeight: number }>`
  text-align: left;
  overflow: hidden;
  user-select: none;
-  cursor: pointer;
+  cursor: var(--pointer);

  &:active,
  &:hover,
--- a/app/components/Sidebar/components/SidebarLink.tsx
+++ b/app/components/Sidebar/components/SidebarLink.tsx
@@ -179,7 +179,7 @@ const Link = styled(NavLink)<{
  color: ${(props) =>
    props.$isActiveDrop ? props.theme.white : props.theme.sidebarText};
  font-size: 16px;
-  cursor: pointer;
+  cursor: var(--pointer);
  overflow: hidden;

  ${(props) =>
--- a/app/components/Sidebar/components/Toggle.tsx
+++ b/app/components/Sidebar/components/Toggle.tsx
@@ -47,7 +47,7 @@ export const ToggleButton = styled.button<{ $direction?: "left" | "right" }>`

  ${breakpoint("tablet")`
    pointer-events: all;
-    cursor: pointer;
+    cursor: var(--pointer);
  `}

  @media (hover: none) {
--- a/app/components/Switch.tsx
+++ b/app/components/Switch.tsx
@@ -86,7 +86,7 @@ const Input = styled.label<{ width: number; height: number }>`

 const Slider = styled.span<{ width: number; height: number }>`
  position: absolute;
-  cursor: pointer;
+  cursor: var(--pointer);
  top: 0;
  left: 0;
  right: 0;
--- a/app/components/Theme.tsx
+++ b/app/components/Theme.tsx
@@ -8,7 +8,7 @@ import useMediaQuery from "~/hooks/useMediaQuery";
 import useStores from "~/hooks/useStores";

 const Theme: React.FC = ({ children }) => {
-  const { ui } = useStores();
+  const { auth, ui } = useStores();
  const resolvedTheme = ui.resolvedTheme === "dark" ? dark : light;
  const resolvedMobileTheme =
    ui.resolvedTheme === "dark" ? darkMobile : lightMobile;
@@ -27,7 +27,9 @@ const Theme: React.FC = ({ children }) => {
  return (
    <ThemeProvider theme={theme}>
      <>
-        <GlobalStyles />
+        <GlobalStyles
+          useCursorPointer={auth.user?.preferences?.useCursorPointer !== false}
+        />
        {children}
      </>
    </ThemeProvider>
--- a/app/editor/components/BlockMenuItem.tsx
+++ b/app/editor/components/BlockMenuItem.tsx
@@ -76,7 +76,7 @@ const MenuItem = styled.button<{
  line-height: 1;
  width: 100%;
  height: 36px;
-  cursor: pointer;
+  cursor: var(--pointer);
  border: none;
  opacity: ${(props) => (props.disabled ? ".5" : "1")};
  color: ${(props) =>
--- a/app/editor/components/LinkSearchResult.tsx
+++ b/app/editor/components/LinkSearchResult.tsx
@@ -61,7 +61,7 @@ const ListItem = styled.li<{
  text-decoration: none;
  overflow: hidden;
  white-space: nowrap;
-  cursor: pointer;
+  cursor: var(--pointer);
  user-select: none;
  line-height: ${(props) => (props.compact ? "inherit" : "1.2")};
  height: ${(props) => (props.compact ? "28px" : "auto")};
--- a/app/editor/components/ToolbarButton.tsx
+++ b/app/editor/components/ToolbarButton.tsx
@@ -7,7 +7,7 @@ export default styled.button<Props>`
  flex: 0;
  width: 24px;
  height: 24px;
-  cursor: pointer;
+  cursor: var(--pointer);
  border: none;
  background: none;
  transition: opacity 100ms ease-in-out;
--- a/app/models/User.ts
+++ b/app/models/User.ts
@@ -26,7 +26,9 @@ class User extends ParanoidModel {
  @observable
  language: string;

-  preferences: UserPreferences | null | undefined;
+  @Field
+  @observable
+  preferences: UserPreferences | null;

  email: string;

--- a/app/scenes/Document/components/ReferenceListItem.tsx
+++ b/app/scenes/Document/components/ReferenceListItem.tsx
@@ -27,6 +27,7 @@ const DocumentLink = styled(Link)`
  min-width: 100%;
  overflow: hidden;
  position: relative;
+  cursor: var(--pointer);

  &:${hover},
  &:active,
--- a/app/scenes/Search/components/RecentSearches.tsx
+++ b/app/scenes/Search/components/RecentSearches.tsx
@@ -89,6 +89,7 @@ const RecentSearch = styled(Link)`
  display: flex;
  justify-content: space-between;
  color: ${(props) => props.theme.textSecondary};
+  cursor: var(--pointer);
  padding: 1px 4px;
  border-radius: 4px;

--- a/app/scenes/Settings/Preferences.tsx
+++ b/app/scenes/Settings/Preferences.tsx
@@ -83,6 +83,20 @@ function Preferences() {
          ariaLabel={t("Language")}
        />
      </SettingRow>
+      <SettingRow
+        name="useCursorPointer"
+        label={t("Use pointer cursor")}
+        description={t(
+          "Show a hand cursor when hovering over interactive elements."
+        )}
+      >
+        <Switch
+          id="useCursorPointer"
+          name="useCursorPointer"
+          checked={user.preferences?.useCursorPointer !== false}
+          onChange={handlePreferenceChange}
+        />
+      </SettingRow>
      <SettingRow
        border={false}
        name="rememberLastPath"
--- a/app/scenes/Settings/components/DropToImport.tsx
+++ b/app/scenes/Settings/components/DropToImport.tsx
@@ -116,7 +116,7 @@ const DropzoneContainer = styled.div<{
  padding: 52px;
  text-align: center;
  font-size: 15px;
-  cursor: pointer;
+  cursor: var(--pointer);
  opacity: ${(props) => (props.$disabled ? 0.5 : 1)};

  &:hover {
--- a/app/scenes/Settings/components/ImageInput.tsx
+++ b/app/scenes/Settings/components/ImageInput.tsx
@@ -49,7 +49,7 @@ const ImageBox = styled(Flex)`
    bottom: 0;
    left: 0;
    opacity: 0;
-    cursor: pointer;
+    cursor: var(--pointer);
    transition: all 250ms;
  }

--- a/app/scenes/Settings/components/ImageUpload.tsx
+++ b/app/scenes/Settings/components/ImageUpload.tsx
@@ -158,7 +158,7 @@ const RangeInput = styled.input`
  width: 300px;
  margin-bottom: 30px;
  height: 4px;
-  cursor: pointer;
+  cursor: var(--pointer);
  color: inherit;
  border-radius: 99999px;
  background-color: #dee1e3;
@@ -170,7 +170,7 @@ const RangeInput = styled.input`
    width: 16px;
    border-radius: 50%;
    background: ${(props) => props.theme.text};
-    cursor: pointer;
+    cursor: var(--pointer);
  }

  &:focus {
--- a/app/scenes/Settings/components/UserListItem.tsx
+++ b/app/scenes/Settings/components/UserListItem.tsx
@@ -43,7 +43,7 @@ const UserListItem = ({ user, showMenu }: Props) => {
 const Title = styled.span`
  &:hover {
    text-decoration: underline;
-    cursor: pointer;
+    cursor: var(--pointer);
  }
 `;