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 -->

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 ? (
-          {notification.message}
+          <main data-align={alignMessage} className={styles.main}>
-        </main>
+            {notification.message}
-        <footer>
+          </main>
-          <FlexWrapper marginTop={8} justifyContent="flex-end" gap="12px">
+        ) : null}
-            {actions?.map(action => (
+        {actions?.length ? (
-              <NotificationCardAction
+          <footer>
-                key={action.key}
+            <FlexWrapper marginTop={8} justifyContent="flex-end" gap="12px">
-                action={action}
+              {actions?.map(action => (
-                onDismiss={onDismiss}
+                <NotificationCardAction
-              />
+                  key={action.key}
-            ))}
+                  action={action}
-          </FlexWrapper>
+                  onDismiss={onDismiss}
-        </footer>
+                />
+              ))}
+            </FlexWrapper>
+          </footer>
+        ) : null}
       </div>
     </div>
   );

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,

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,
+  width: 28,
-  height: 32,
+  height: 28,
   borderRadius: 8,
-  boxShadow: '0px 1px 2px 0px rgba(0, 0, 0, 0.15)',
+  boxShadow: cssVar('buttonShadow'),
-  borderWidth: 1,
+  borderWidth: 0,
-  borderColor: cssVarV2('layer/insideBorder/border'),
   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,
 });
 

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',

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>
   );
 }