feat: Add cursor style user preference (#4199)

* feat: Add cursor style user preference

* Remove headings for now

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;

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;
 

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;

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};

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};

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;

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);

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);
   }
 `;
 

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")`

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`

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};

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)`

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;
 `;

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;

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);
   }
 `;
 

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,

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) =>

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) {

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;

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>