fix(component): add back lottie color hack for dark mode (#5576)

Not sure why but it seems the changes in https://github.com/toeverything/AFFiNE/pull/4953 are lost

packages/frontend/component/src/ui/lottie/collections-icon.css.ts

@@ -1,9 +0,0 @@
-import { style } from '@vanilla-extract/css';
-
-export const root = style({
-  width: '1em',
-  height: '1em',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-});

packages/frontend/component/src/ui/lottie/collections-icon.tsx

@@ -2,8 +2,8 @@ import clsx from 'clsx';
 import Lottie, { type LottieRef } from 'lottie-react';
 import { useEffect, useRef } from 'react';
 
-import * as styles from './collections-icon.css';
 import animationData from './collections-icon.json';
+import * as styles from './styles.css';
 
 export interface CollectionsIconProps {
   closed: boolean; // eg, when collections icon is a "dragged over" state

packages/frontend/component/src/ui/lottie/delete-icon.css.tsx

@@ -1,9 +0,0 @@
-import { style } from '@vanilla-extract/css';
-
-export const root = style({
-  width: '1em',
-  height: '1em',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-});

packages/frontend/component/src/ui/lottie/delete-icon.tsx

@@ -2,8 +2,8 @@ import clsx from 'clsx';
 import Lottie, { type LottieRef } from 'lottie-react';
 import { useEffect, useRef } from 'react';
 
-import * as styles from './delete-icon.css';
 import animationData from './delete-icon.json';
+import * as styles from './styles.css';
 
 export interface DeleteIconProps {
   closed: boolean; // eg, when delete icon is a "dragged over" state

packages/frontend/component/src/ui/lottie/styles.css.ts

@@ -0,0 +1,19 @@
+import { globalStyle, style } from '@vanilla-extract/css';
+
+export const root = style({
+  width: '1em',
+  height: '1em',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+});
+
+const magicColor = `rgb(119,117,125)`;
+
+globalStyle(`${root} path[stroke="${magicColor}"]`, {
+  stroke: 'currentColor',
+});
+
+globalStyle(`${root} path[fill="${magicColor}"]`, {
+  fill: 'currentColor',
+});

packages/frontend/core/src/components/root-app-sidebar/index.tsx

@@ -294,9 +294,7 @@ export const RootAppSidebar = ({
             {t['com.affine.workspaceSubPath.trash']()}
           </span>
         </RouteMenuLinkItem>
-        {blockSuiteWorkspace && (
+        <ImportPage blocksuiteWorkspace={blockSuiteWorkspace} />
-          <ImportPage blocksuiteWorkspace={blockSuiteWorkspace} />
-        )}
       </SidebarScrollableContainer>
       <SidebarContainer>
         {environment.isDesktop ? <UpdaterButton /> : <AppDownloadButton />}