feat(core): add sign in to not found page (#6496)

close AFF-211

packages/frontend/component/src/ui/empty/empty-svg.tsx

@@ -1,8 +1,16 @@
 import { memo } from 'react';
 
-export const EmptySvg = memo(function EmptySvg() {
+export const EmptySvg = memo(function EmptySvg({
+  style,
+  className,
+}: {
+  style?: React.CSSProperties;
+  className?: string;
+}) {
   return (
     <svg
+      className={className}
+      style={style}
       width="248"
       height="216"
       viewBox="0 0 248 216"

packages/frontend/component/src/ui/empty/empty.tsx

@@ -1,9 +1,16 @@
+import { assignInlineVars } from '@vanilla-extract/dynamic';
 import type { CSSProperties, ReactNode } from 'react';
 
 import { EmptySvg } from './empty-svg';
-import { StyledEmptyContainer } from './style';
+import * as styles from './index.css';
+
+type ContainerStyleProps = {
+  width?: string;
+  height?: string;
+  fontSize?: string;
+};
 export type EmptyContentProps = {
-  containerStyle?: CSSProperties;
+  containerStyle?: ContainerStyleProps;
   title?: ReactNode;
   description?: ReactNode;
   descriptionStyle?: CSSProperties;
@@ -15,10 +22,15 @@ export const Empty = ({
   description,
   descriptionStyle,
 }: EmptyContentProps) => {
+  const cssVar = assignInlineVars({
+    [styles.svgWidth]: containerStyle?.width,
+    [styles.svgHeight]: containerStyle?.height,
+    [styles.svgFontSize]: containerStyle?.fontSize,
+  });
   return (
-    <StyledEmptyContainer style={containerStyle}>
+    <div className={styles.emptyContainer}>
       <div style={{ color: 'var(--affine-black)' }}>
-        <EmptySvg />
+        <EmptySvg className={styles.emptySvg} style={cssVar} />
       </div>
       {title && (
         <p
@@ -36,7 +48,7 @@ export const Empty = ({
           {description}
         </p>
       )}
-    </StyledEmptyContainer>
+    </div>
   );
 };
 

packages/frontend/component/src/ui/empty/index.css.ts

@@ -0,0 +1,24 @@
+import { createVar, style } from '@vanilla-extract/css';
+
+import { displayFlex } from '../../styles';
+
+export const svgWidth = createVar();
+export const svgHeight = createVar();
+export const svgFontSize = createVar();
+
+export const emptyContainer = style({
+  height: '100%',
+  ...displayFlex('center', 'center'),
+  flexDirection: 'column',
+  color: 'var(--affine-text-secondary-color)',
+});
+export const emptySvg = style({
+  vars: {
+    [svgWidth]: '248px',
+    [svgHeight]: '216px',
+    [svgFontSize]: 'inherit',
+  },
+  width: svgWidth,
+  height: svgHeight,
+  fontSize: svgFontSize,
+});

packages/frontend/component/src/ui/empty/style.ts

@@ -1,19 +0,0 @@
-import type { CSSProperties } from 'react';
-
-import { displayFlex, styled } from '../../styles';
-
-export const StyledEmptyContainer = styled('div')<{ style?: CSSProperties }>(({
-  style,
-}) => {
-  return {
-    height: '100%',
-    ...displayFlex('center', 'center'),
-    flexDirection: 'column',
-    color: 'var(--affine-text-secondary-color)',
-    svg: {
-      width: style?.width ?? '248px',
-      height: style?.height ?? '216px',
-      fontSize: style?.fontSize ?? 'inherit',
-    },
-  };
-});