feat: Add cursor style user preference (#4199)

* feat: Add cursor style user preference

* Remove headings for now

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