fix: adjust some styles (#2438)

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

@@ -12,7 +12,6 @@ interface AddPageButtonProps {
   style?: React.CSSProperties;
 }
 
-// Although it is called an input, it is actually a button.
 export function AddPageButton({
   onClick,
   className,

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

@@ -62,11 +62,17 @@ export const closeIcon = style({
   cursor: 'pointer',
   transition: '0.1s',
   borderRadius: '50%',
+  transform: 'scale(0.6)',
   zIndex: 1,
+  opacity: 0,
   selectors: {
     '&:hover': {
       transform: 'scale(1.1)',
     },
+    [`${root}:hover &`]: {
+      opacity: 1,
+      transform: 'scale(1)',
+    },
   },
 });
 

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

@@ -14,6 +14,7 @@ export const navWrapperStyle = style({
   minWidth: navWidthVar,
   height: '100%',
   zIndex: 2,
+  paddingBottom: '8px',
   backgroundColor: 'transparent',
   '@media': {
     [`(max-width: ${floatingMaxWidth}px)`]: {

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

@@ -69,6 +69,7 @@ export const iconsContainer = style({
   alignItems: 'center',
   justifyContent: 'flex-start',
   width: '28px',
+  flexShrink: 0,
   selectors: {
     '&[data-collapsible="true"]': {
       width: '40px',

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

@@ -39,28 +39,29 @@ export function MenuItem({
       data-disabled={disabled}
       data-collapsible={collapsible}
     >
-      <div className={styles.iconsContainer} data-collapsible={collapsible}>
-        {collapsible && (
-          <div
-            onClick={e => {
-              e.stopPropagation();
-              e.preventDefault(); // for links
-              onCollapsedChange?.(!collapsed);
-            }}
-            data-testid="fav-collapsed-button"
-            className={styles.collapsedIconContainer}
-          >
-            <ArrowDownSmallIcon
-              className={styles.collapsedIcon}
-              data-collapsed={collapsed}
-            />
-          </div>
-        )}
-        {icon &&
-          React.cloneElement(icon, {
+      {icon && (
+        <div className={styles.iconsContainer} data-collapsible={collapsible}>
+          {collapsible && (
+            <div
+              onClick={e => {
+                e.stopPropagation();
+                e.preventDefault(); // for links
+                onCollapsedChange?.(!collapsed);
+              }}
+              data-testid="fav-collapsed-button"
+              className={styles.collapsedIconContainer}
+            >
+              <ArrowDownSmallIcon
+                className={styles.collapsedIcon}
+                data-collapsed={collapsed}
+              />
+            </div>
+          )}
+          {React.cloneElement(icon, {
             className: clsx([styles.icon, icon.props.className]),
           })}
-      </div>
+        </div>
+      )}
 
       <div className={styles.content}>{children}</div>
     </div>

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

@@ -1,7 +1,7 @@
 import { globalStyle, style } from '@vanilla-extract/css';
 
 export const baseContainer = style({
-  padding: '12px 16px',
+  padding: '4px 16px',
   display: 'flex',
   flexFlow: 'column nowrap',
   rowGap: '4px',
@@ -13,17 +13,27 @@ export const scrollableContainerRoot = style({
   vars: {
     '--scrollbar-width': '10px',
   },
-  transition: 'all .3s .2s',
-  borderTop: '1px solid transparent',
+});
+
+export const scrollTopBorder = style({
+  position: 'absolute',
+  top: 0,
+  left: '16px',
+  right: '16px',
+  height: '1px',
+  transition: 'opacity .3s .2s',
+  opacity: 0,
+  background: 'var(--affine-black-10)',
   selectors: {
     '&[data-has-scroll-top="true"]': {
-      boxShadow: 'inset 0 8px 8px -8px var(--affine-black-10)',
+      opacity: 1,
     },
   },
 });
 
 export const scrollableViewport = style({
   height: '100%',
+  marginTop: '4px',
 });
 
 globalStyle(`${scrollableViewport} > div`, {

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

@@ -39,10 +39,11 @@ function useHasScrollTop() {
 export function SidebarScrollableContainer({ children }: PropsWithChildren) {
   const [hasScrollTop, ref] = useHasScrollTop();
   return (
-    <ScrollArea.Root
-      data-has-scroll-top={hasScrollTop}
-      className={styles.scrollableContainerRoot}
-    >
+    <ScrollArea.Root className={styles.scrollableContainerRoot}>
+      <div
+        data-has-scroll-top={hasScrollTop}
+        className={styles.scrollTopBorder}
+      />
       <ScrollArea.Viewport
         className={clsx([styles.scrollableViewport])}
         ref={ref}

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

@@ -16,7 +16,7 @@ export const spotlight = style({
   background: `radial-gradient(${spotlightSize} circle at ${spotlightX} ${spotlightY}, var(--affine-text-primary-color), transparent)`,
   inset: '0px',
   pointerEvents: 'none',
-  willChange: 'background',
+  willChange: 'background, opacity',
   opacity: spotlightOpacity,
   zIndex: 1,
   transition: 'all 0.2s',

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

@@ -0,0 +1,30 @@
+import type { Meta, StoryFn } from '@storybook/react';
+import { type PropsWithChildren } from 'react';
+
+import { Spotlight } from '.';
+
+export default {
+  title: 'Components/AppSidebar/Spotlight',
+  component: Spotlight,
+} satisfies Meta;
+
+const Container = ({ children }: PropsWithChildren) => (
+  <main
+    style={{
+      position: 'relative',
+      width: '320px',
+      height: '320px',
+      border: '1px solid #ccc',
+    }}
+  >
+    {children}
+  </main>
+);
+
+export const Default: StoryFn = () => {
+  return (
+    <Container>
+      <Spotlight />
+    </Container>
+  );
+};

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

@@ -12,10 +12,10 @@ function useMouseOffset() {
   useEffect(() => {
     if (ref.current && ref.current.parentElement) {
       const el = ref.current.parentElement;
-      const bound = el.getBoundingClientRect();
 
       // debounce?
       const onMouseMove = (e: MouseEvent) => {
+        const bound = el.getBoundingClientRect();
         setOffset({ x: e.clientX - bound.x, y: e.clientY - bound.y });
         setOutside(false);
       };