From 83e1cd9274ad06287e2cd3d3cdc9bf089fb44df7 Mon Sep 17 00:00:00 2001
From: JimmFly <yangjinfei001@gmail.com>
Date: Tue, 7 Mar 2023 19:30:58 +0800
Subject: [PATCH] chore: update quick search style (#1376)

---
 .../pure/quick-search-modal/Results.tsx       | 61 ++++++++++---------
 .../pure/quick-search-modal/style.ts          | 11 ++--
 2 files changed, 39 insertions(+), 33 deletions(-)

diff --git a/apps/web/src/components/pure/quick-search-modal/Results.tsx b/apps/web/src/components/pure/quick-search-modal/Results.tsx
index cc629dc586..295d439ca9 100644
--- a/apps/web/src/components/pure/quick-search-modal/Results.tsx
+++ b/apps/web/src/components/pure/quick-search-modal/Results.tsx
@@ -96,35 +96,38 @@ export const Results: React.FC<ResultsProps> = ({
         )
       ) : (
         <div>
-          <Command.Group heading={t('Recently viewed')}>
-            {recentlyViewed.map(recent => {
-              return (
-                <Command.Item
-                  key={recent.id}
-                  value={recent.id}
-                  onSelect={() => {
-                    onClose();
-                    router.push({
-                      pathname: '/workspace/[workspaceId]/[pageId]',
-                      query: {
-                        workspaceId: blockSuiteWorkspace.room,
-                        pageId: recent.id,
-                      },
-                    });
-                  }}
-                >
-                  <StyledListItem>
-                    {recent.mode === 'edgeless' ? (
-                      <EdgelessIcon />
-                    ) : (
-                      <PaperIcon />
-                    )}
-                    <span>{recent.title}</span>
-                  </StyledListItem>
-                </Command.Item>
-              );
-            })}
-          </Command.Group>
+          {recentlyViewed.length > 0 && (
+            <Command.Group heading={t('Recent')}>
+              {recentlyViewed.map(recent => {
+                return (
+                  <Command.Item
+                    key={recent.id}
+                    value={recent.id}
+                    onSelect={() => {
+                      onClose();
+                      router.push({
+                        pathname: '/workspace/[workspaceId]/[pageId]',
+                        query: {
+                          workspaceId: blockSuiteWorkspace.room,
+                          pageId: recent.id,
+                        },
+                      });
+                    }}
+                  >
+                    <StyledListItem>
+                      {recent.mode === 'edgeless' ? (
+                        <EdgelessIcon />
+                      ) : (
+                        <PaperIcon />
+                      )}
+                      <span>{recent.title}</span>
+                    </StyledListItem>
+                  </Command.Item>
+                );
+              })}
+            </Command.Group>
+          )}
+
           <Command.Group heading={t('Jump to')}>
             {List.map(link => {
               return (
diff --git a/apps/web/src/components/pure/quick-search-modal/style.ts b/apps/web/src/components/pure/quick-search-modal/style.ts
index a70dd021d6..19a62abf9b 100644
--- a/apps/web/src/components/pure/quick-search-modal/style.ts
+++ b/apps/web/src/components/pure/quick-search-modal/style.ts
@@ -8,13 +8,16 @@ export const StyledContent = styled('div')(({ theme }) => {
     overflow: 'auto',
     marginBottom: '10px',
     ...displayFlex('center', 'flex-start'),
-    color: theme.colors.popoverColor,
+    color: theme.colors.textColor,
     transition: 'all 0.15s',
     letterSpacing: '0.06em',
     '[cmdk-group-heading]': {
-      margin: '5px 16px',
-      fontSize: theme.font.base,
-      fontWeight: '500',
+      ...displayFlex('start', 'center'),
+      margin: '0 16px',
+      height: '36px',
+      lineHeight: '22px',
+      fontSize: theme.font.sm,
+      color: theme.colors.secondaryTextColor,
     },
     '[aria-selected="true"]': {
       borderRadius: '5px',