chore: update style

packages/app/src/components/quick-search/results.tsx

@@ -1,15 +1,21 @@
 import { Command } from 'cmdk';
 import { StyledListItem } from './style';
-import Link from 'next/link';
 import { useModal } from '@/providers/global-modal-provider';
-import { AllPagesIcon, FavouritesIcon, TrashIcon } from '@blocksuite/icons';
+import {
+  AllPagesIcon,
+  FavouritesIcon,
+  TrashIcon,
+  PaperIcon,
+} from '@blocksuite/icons';
 import { useEditor } from '@/providers/editor-provider';
 import { useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
 
 export const Results = (props: { query: string }) => {
   const query = props.query;
   const { triggerQuickSearchModal } = useModal();
   const { search, openPage, pageList } = useEditor();
+  const router = useRouter();
   const [results, setResults] = useState(new Map<string, string | undefined>());
   useEffect(() => {
     return setResults(search(query));
@@ -34,43 +40,49 @@ export const Results = (props: { query: string }) => {
               }}
               value={result.title}
             >
-              <StyledListItem>{result.title}</StyledListItem>
+              <StyledListItem>
+                <PaperIcon />
+                <span>{result.title}</span>
+              </StyledListItem>
             </Command.Item>
           );
         })}
       </Command.Group>
       <Command.Group heading="Jump to">
-        <Command.Item>
+        <Command.Item
+          value="All pages"
+          onSelect={() => {
+            router.push('/page-list/all');
+            triggerQuickSearchModal();
+          }}
+        >
           <StyledListItem>
-            <Link
+            <AllPagesIcon />
-              href={{ pathname: '/page-list/all' }}
+            <span>All pages</span>
-              onClick={() => triggerQuickSearchModal()}
-            >
-              <AllPagesIcon />
-              <span> All pages</span>
-            </Link>
           </StyledListItem>
         </Command.Item>
-        <Command.Item>
+        <Command.Item
+          value="Favourites"
+          onSelect={() => {
+            router.push('/page-list/favorite');
+            triggerQuickSearchModal();
+          }}
+        >
           <StyledListItem>
-            <Link
+            <FavouritesIcon />
-              href={{ pathname: '/page-list/favorite' }}
+            <span>Favourites</span>
-              onClick={() => triggerQuickSearchModal()}
-            >
-              <FavouritesIcon />
-              <span> Favourites</span>
-            </Link>
           </StyledListItem>
         </Command.Item>
-        <Command.Item>
+        <Command.Item
+          value="Trash"
+          onSelect={() => {
+            router.push('/page-list/trash');
+            triggerQuickSearchModal();
+          }}
+        >
           <StyledListItem>
-            <Link
+            <TrashIcon />
-              href={{ pathname: '/page-list/trash' }}
+            <span>Trash</span>
-              onClick={() => triggerQuickSearchModal()}
-            >
-              <TrashIcon />
-              <span> Trash</span>
-            </Link>
           </StyledListItem>
         </Command.Item>
       </Command.Group>

packages/app/src/components/quick-search/style.ts

@@ -11,6 +11,13 @@ export const StyledContent = styled('div')(({ theme }) => {
     letterSpacing: '0.06em',
     '[cmdk-group-heading]': {
       margin: '5px 16px',
+      fontSize: theme.font.sm,
+    },
+    '[aria-selected="true"]': {
+      transition: 'background .15s, color .15s',
+      borderRadius: '5px',
+      color: theme.colors.primaryColor,
+      backgroundColor: theme.colors.hoverBackground,
     },
   };
 });
@@ -110,7 +117,7 @@ export const StyledListItem = styled.button(({ theme }) => {
     width: '612px',
     height: '32px',
     fontSize: theme.font.sm,
-    color: theme.colors.popoverColor,
+    color: 'inherit',
     paddingLeft: '12px',
     borderRadius: '5px',
     ...displayFlex('flex-start', 'center'),
@@ -118,32 +125,5 @@ export const StyledListItem = styled.button(({ theme }) => {
       fontSize: '20px',
       marginRight: '12px',
     },
-    transition: 'background .15s, color .15s',
-    ':hover': {
-      color: theme.colors.primaryColor,
-      backgroundColor: theme.colors.hoverBackground,
-    },
-    a: {
-      width: '100%',
-      color: 'inherit',
-      ...displayFlex('flex-start', 'center'),
-      ':visited': {
-        color: theme.colors.popoverColor,
-      },
-      transition: 'background .15s, color .15s',
-      svg: {
-        fontSize: '20px',
-        color: 'inherit',
-        marginBottom: '2px',
-      },
-      span: {
-        color: 'inherit',
-        margin: '0 12px',
-        lineHeight: '22px',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap',
-      },
-    },
   };
 });