From f616bd29d38420d74340e918dfc65b23455bcc81 Mon Sep 17 00:00:00 2001
From: pengx17 <pengxiao@outlook.com>
Date: Thu, 29 May 2025 09:40:11 +0000
Subject: [PATCH] fix(core): adjust some uis for sharing (#12486)

fix AF-2660

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

- **Style**
  - Improved visual appearance of sidebar buttons and quick search input, including reduced sizes, updated padding, and enhanced hover effects.
  - Adjusted layout spacing for quick search and new page elements in the sidebar.
  - Updated share button styling to use the primary variant.

- **New Features**
  - Notification cards now only display messages and action footers when relevant, providing a cleaner interface.

- **Refactor**
  - Removed shortcut hint and spotlight elements from the quick search input for a simplified user experience.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../desktop/notification-card.tsx             | 32 +++++++++++--------
 .../components/root-app-sidebar/index.css.ts  |  1 +
 .../views/add-page-button/index.css.ts        | 14 ++++----
 .../views/quick-search-input/index.css.ts     |  8 +++--
 .../views/quick-search-input/index.tsx        |  6 ----
 5 files changed, 31 insertions(+), 30 deletions(-)

diff --git a/packages/frontend/component/src/ui/notification/desktop/notification-card.tsx b/packages/frontend/component/src/ui/notification/desktop/notification-card.tsx
index f44888a7d..82a61f253 100644
--- a/packages/frontend/component/src/ui/notification/desktop/notification-card.tsx
+++ b/packages/frontend/component/src/ui/notification/desktop/notification-card.tsx
@@ -61,20 +61,24 @@ export const DesktopNotificationCard = ({
             </IconButton>
           </div>
         </header>
-        <main data-align={alignMessage} className={styles.main}>
-          {notification.message}
-        </main>
-        <footer>
-          <FlexWrapper marginTop={8} justifyContent="flex-end" gap="12px">
-            {actions?.map(action => (
-              <NotificationCardAction
-                key={action.key}
-                action={action}
-                onDismiss={onDismiss}
-              />
-            ))}
-          </FlexWrapper>
-        </footer>
+        {notification.message ? (
+          <main data-align={alignMessage} className={styles.main}>
+            {notification.message}
+          </main>
+        ) : null}
+        {actions?.length ? (
+          <footer>
+            <FlexWrapper marginTop={8} justifyContent="flex-end" gap="12px">
+              {actions?.map(action => (
+                <NotificationCardAction
+                  key={action.key}
+                  action={action}
+                  onDismiss={onDismiss}
+                />
+              ))}
+            </FlexWrapper>
+          </footer>
+        ) : null}
       </div>
     </div>
   );
diff --git a/packages/frontend/core/src/components/root-app-sidebar/index.css.ts b/packages/frontend/core/src/components/root-app-sidebar/index.css.ts
index e4f17c295..34553008c 100644
--- a/packages/frontend/core/src/components/root-app-sidebar/index.css.ts
+++ b/packages/frontend/core/src/components/root-app-sidebar/index.css.ts
@@ -11,6 +11,7 @@ export const quickSearchAndNewPage = style({
   alignItems: 'center',
   gap: 8,
   padding: '8px 0',
+  marginLeft: -8,
 });
 export const quickSearch = style({
   width: 0,
diff --git a/packages/frontend/core/src/modules/app-sidebar/views/add-page-button/index.css.ts b/packages/frontend/core/src/modules/app-sidebar/views/add-page-button/index.css.ts
index ed9a78dba..1e1195ae0 100644
--- a/packages/frontend/core/src/modules/app-sidebar/views/add-page-button/index.css.ts
+++ b/packages/frontend/core/src/modules/app-sidebar/views/add-page-button/index.css.ts
@@ -1,13 +1,13 @@
+import { cssVar } from '@toeverything/theme';
 import { cssVarV2 } from '@toeverything/theme/v2';
 import { style } from '@vanilla-extract/css';
 
 export const root = style({
-  width: 32,
-  height: 32,
+  width: 28,
+  height: 28,
   borderRadius: 8,
-  boxShadow: '0px 1px 2px 0px rgba(0, 0, 0, 0.15)',
-  borderWidth: 1,
-  borderColor: cssVarV2('layer/insideBorder/border'),
+  boxShadow: cssVar('buttonShadow'),
+  borderWidth: 0,
   background: cssVarV2('button/siderbarPrimary/background'),
 });
 
@@ -15,7 +15,7 @@ export const withAskRoot = style([
   root,
   {
     width: 'auto',
-    padding: 6,
+    padding: 4,
   },
 ]);
 
@@ -23,7 +23,7 @@ export const withAskContent = style({
   fontSize: 20,
   display: 'flex',
   alignItems: 'center',
-  gap: 2,
+  gap: 4,
   color: cssVarV2.icon.primary,
 });
 
diff --git a/packages/frontend/core/src/modules/app-sidebar/views/quick-search-input/index.css.ts b/packages/frontend/core/src/modules/app-sidebar/views/quick-search-input/index.css.ts
index a94fea8fa..eb46f4c98 100644
--- a/packages/frontend/core/src/modules/app-sidebar/views/quick-search-input/index.css.ts
+++ b/packages/frontend/core/src/modules/app-sidebar/views/quick-search-input/index.css.ts
@@ -6,16 +6,18 @@ export const root = style({
   background: cssVarV2('button/siderbarPrimary/background'),
   alignItems: 'center',
   borderRadius: '8px',
-  border: `1px solid ${cssVarV2('layer/insideBorder/border')}`,
   fontSize: cssVar('fontSm'),
   width: '100%',
-  height: '36px',
+  height: '30px',
   userSelect: 'none',
   cursor: 'pointer',
-  padding: '0 12px',
+  padding: '0 12px 0 20px',
   position: 'relative',
   whiteSpace: 'nowrap',
   overflow: 'hidden',
+  ':hover': {
+    background: cssVarV2('layer/background/hoverOverlay'),
+  },
 });
 export const icon = style({
   marginRight: '8px',
diff --git a/packages/frontend/core/src/modules/app-sidebar/views/quick-search-input/index.tsx b/packages/frontend/core/src/modules/app-sidebar/views/quick-search-input/index.tsx
index 0c3a74221..10612885e 100644
--- a/packages/frontend/core/src/modules/app-sidebar/views/quick-search-input/index.tsx
+++ b/packages/frontend/core/src/modules/app-sidebar/views/quick-search-input/index.tsx
@@ -3,7 +3,6 @@ import { SearchIcon } from '@blocksuite/icons/rc';
 import clsx from 'clsx';
 import type { HTMLAttributes } from 'react';
 
-import { Spotlight } from '../spolight';
 import * as styles from './index.css';
 
 interface QuickSearchInputProps extends HTMLAttributes<HTMLDivElement> {
@@ -25,11 +24,6 @@ export function QuickSearchInput({ onClick, ...props }: QuickSearchInputProps) {
       <span className={styles.quickSearchBarEllipsisStyle}>
         {t['Quick search']()}
       </span>
-      <div className={styles.spacer} />
-      <div className={styles.shortcutHint}>
-        {environment.isMacOs ? ' ⌘ + K' : ' Ctrl + K'}
-      </div>
-      <Spotlight />
     </div>
   );
 }