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,9 +61,12 @@ export const DesktopNotificationCard = ({
             </IconButton>
           </div>
         </header>
+        {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 => (
@@ -75,6 +78,7 @@ export const DesktopNotificationCard = ({
               ))}
             </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>
   );
 }