fix: some style updates (#2396)

packages/component/src/components/app-sidebar/add-page-button/index.css.ts

@@ -8,15 +8,11 @@ export const root = style({
   border: '1px solid var(--affine-black-10)',
   fontSize: 'var(--affine-font-sm)',
   width: '100%',
+  position: 'relative',
   height: '52px',
   userSelect: 'none',
   cursor: 'pointer',
   padding: '0 24px',
-  selectors: {
-    '&:hover': {
-      background: 'var(--affine-hover-color)',
-    },
-  },
 });
 
 export const icon = style({

packages/component/src/components/app-sidebar/add-page-button/index.tsx

@@ -1,7 +1,9 @@
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { PlusIcon } from '@blocksuite/icons';
 import clsx from 'clsx';
+import type React from 'react';
 
+import { Spotlight } from '../spolight';
 import * as styles from './index.css';
 
 interface AddPageButtonProps {
@@ -26,6 +28,7 @@ export function AddPageButton({
       onClick={onClick}
     >
       <PlusIcon className={styles.icon} /> {t['New Page']()}
+      <Spotlight />
     </button>
   );
 }

packages/component/src/components/app-sidebar/menu-item/index.css.ts

@@ -22,6 +22,11 @@ export const root = style({
       color: 'var(--affine-text-secondary-color)',
       pointerEvents: 'none',
     },
+    '&[data-active="true"]:hover': {
+      background:
+        // make this a variable?
+        'linear-gradient(0deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.04)), rgba(0, 0, 0, 0.04);',
+    },
   },
 });
 
@@ -34,7 +39,7 @@ export const content = style({
 export const icon = style({
   marginRight: '14px',
   color: 'var(--affine-icon-color)',
-  fontSize: '18px',
+  fontSize: '20px',
 });
 
 export const spacer = style({

packages/component/src/components/app-sidebar/quick-search-input/index.css.ts

@@ -13,16 +13,13 @@ export const root = style({
   cursor: 'pointer',
   padding: '0 12px',
   margin: '12px 0',
-  selectors: {
-    '&:hover': {
-      background: 'var(--affine-hover-color)',
-    },
-  },
+  position: 'relative',
 });
 
 export const icon = style({
   marginRight: '14px',
   color: 'var(--affine-icon-color)',
+  fontSize: '20px',
 });
 
 export const spacer = style({

packages/component/src/components/app-sidebar/quick-search-input/index.tsx

@@ -3,6 +3,7 @@ import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { SearchIcon } from '@blocksuite/icons';
 import clsx from 'clsx';
 
+import { Spotlight } from '../spolight';
 import * as styles from './index.css';
 
 interface QuickSearchInputProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -27,6 +28,7 @@ export function QuickSearchInput({ onClick, ...props }: QuickSearchInputProps) {
       <div className={styles.shortcutHint}>
         {isMac ? ' ⌘ + K' : ' Ctrl + K'}
       </div>
+      <Spotlight />
     </div>
   );
 }

packages/component/src/components/app-sidebar/spolight/index.css.ts

@@ -0,0 +1,24 @@
+import { createVar, style } from '@vanilla-extract/css';
+
+export const spotlightX = createVar();
+export const spotlightY = createVar();
+export const spotlightOpacity = createVar();
+export const spotlightSize = createVar();
+
+export const spotlight = style({
+  vars: {
+    [spotlightX]: '0px',
+    [spotlightY]: '0px',
+    [spotlightOpacity]: '0',
+    [spotlightSize]: '64px',
+  },
+  position: 'absolute',
+  background: `radial-gradient(${spotlightSize} circle at ${spotlightX} ${spotlightY}, var(--affine-text-primary-color), transparent)`,
+  inset: '0px',
+  pointerEvents: 'none',
+  willChange: 'background',
+  opacity: spotlightOpacity,
+  zIndex: 1,
+  transition: 'all 0.2s',
+  borderRadius: 'inherit',
+});

packages/component/src/components/app-sidebar/spolight/index.tsx

@@ -0,0 +1,49 @@
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { useTheme } from 'next-themes';
+import React, { useEffect, useRef } from 'react';
+
+import * as styles from './index.css';
+
+function useMouseOffset() {
+  const [offset, setOffset] = React.useState<{ x: number; y: number }>();
+  const [outside, setOutside] = React.useState(true);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (ref.current && ref.current.parentElement) {
+      const el = ref.current.parentElement;
+      const bound = el.getBoundingClientRect();
+
+      // debounce?
+      const onMouseMove = (e: MouseEvent) => {
+        setOffset({ x: e.clientX - bound.x, y: e.clientY - bound.y });
+        setOutside(false);
+      };
+
+      const onMouseLeave = () => {
+        setOutside(true);
+      };
+      el.addEventListener('mousemove', onMouseMove);
+      el.addEventListener('mouseleave', onMouseLeave);
+      return () => {
+        el.removeEventListener('mousemove', onMouseMove);
+        el.removeEventListener('mouseleave', onMouseLeave);
+      };
+    }
+  }, []);
+
+  return [offset, outside, ref] as const;
+}
+
+export function Spotlight() {
+  const [offset, outside, ref] = useMouseOffset();
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+  const offsetVars = assignInlineVars({
+    [styles.spotlightX]: (offset?.x ?? 0) + 'px',
+    [styles.spotlightY]: (offset?.y ?? 0) + 'px',
+    [styles.spotlightOpacity]: outside ? '0' : isDark ? '.1' : '0.07',
+  });
+
+  return <div style={offsetVars} ref={ref} className={styles.spotlight} />;
+}