fix(core): adjust sidebar workspace card syncing tooltip style (#6356)

packages/frontend/component/src/ui/tooltip/tooltip.tsx

@@ -4,6 +4,7 @@ import type {
   TooltipProps as RootProps,
 } from '@radix-ui/react-tooltip';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import clsx from 'clsx';
 import type { ReactElement, ReactNode } from 'react';
 
 import * as styles from './styles.css';
@@ -32,6 +33,7 @@ export const Tooltip = ({
   if (!content) {
     return children;
   }
+  const { className, ...contentOptions } = options || {};
   return (
     <TooltipPrimitive.Provider>
       <TooltipPrimitive.Root delayDuration={500} {...rootOptions}>
@@ -39,12 +41,12 @@ export const Tooltip = ({
 
         <TooltipPrimitive.Portal {...portalOptions}>
           <TooltipPrimitive.Content
-            className={styles.tooltipContent}
+            className={clsx(styles.tooltipContent, className)}
             side={side}
             align={align}
             sideOffset={5}
             style={{ zIndex: 'var(--affine-z-index-popover)' }}
-            {...options}
+            {...contentOptions}
           >
             {content}
             <TooltipPrimitive.Arrow

packages/frontend/core/src/components/pure/workspace-slider-bar/workspace-card/index.tsx

@@ -18,6 +18,7 @@ import {
   UnsyncIcon,
 } from '@blocksuite/icons';
 import { useService, Workspace } from '@toeverything/infra';
+import { cssVar } from '@toeverything/theme';
 import { useSetAtom } from 'jotai';
 import { debounce } from 'lodash-es';
 import type { HTMLAttributes } from 'react';
@@ -59,7 +60,7 @@ const LocalWorkspaceStatus = () => {
   return (
     <>
       {!environment.isDesktop ? (
-        <InformationFillDuotoneIcon data-warning-color="true" />
+        <InformationFillDuotoneIcon style={{ color: cssVar('errorColor') }} />
       ) : (
         <LocalWorkspaceIcon />
       )}
@@ -234,7 +235,10 @@ const WorkspaceInfo = ({ name }: { name: string }) => {
 
         {/* when syncing/offline/... */}
         <div className={styles.workspaceInfo} data-type="events">
-          <Tooltip content={message}>
+          <Tooltip
+            content={message}
+            options={{ className: styles.workspaceInfoTooltip }}
+          >
             <div className={styles.workspaceActiveStatus}>
               <SyncingWorkspaceStatus progress={progress} />
             </div>

packages/frontend/core/src/components/pure/workspace-slider-bar/workspace-card/styles.css.ts

@@ -96,4 +96,12 @@ export const workspaceActiveStatus = style({
 globalStyle(`.${workspaceActiveStatus} svg`, {
   width: 16,
   height: 16,
+  color: cssVar('iconSecondary'),
+});
+
+export const workspaceInfoTooltip = style({
+  fontSize: cssVar('fontXs'),
+  lineHeight: '20px',
+  padding: '0 8px',
+  minHeight: 20,
 });

packages/frontend/core/src/components/pure/workspace-slider-bar/workspace-card/styles.ts

@@ -1,54 +0,0 @@
-import { displayFlex, styled, textEllipsis } from '@affine/component';
-import { cssVar } from '@toeverything/theme';
-export const StyledSelectorContainer = styled('div')({
-  height: '50px',
-  display: 'flex',
-  alignItems: 'center',
-  padding: '0 6px',
-  borderRadius: '8px',
-  outline: 'none',
-  width: 'fit-content',
-  maxWidth: '100%',
-  color: cssVar('textPrimaryColor'),
-  ':hover': {
-    cursor: 'pointer',
-    background: cssVar('hoverColor'),
-  },
-});
-
-export const StyledSelectorWrapper = styled('div')(() => {
-  return {
-    marginLeft: '8px',
-    flexGrow: 1,
-    overflow: 'hidden',
-  };
-});
-export const StyledWorkspaceName = styled('div')(() => {
-  return {
-    fontSize: cssVar('fontSm'),
-    lineHeight: '22px',
-    fontWeight: 500,
-    userSelect: 'none',
-    ...textEllipsis(1),
-    marginLeft: '4px',
-  };
-});
-
-export const StyledWorkspaceStatus = styled('div')(() => {
-  return {
-    height: '22px',
-    ...displayFlex('flex-start', 'center'),
-    fontSize: cssVar('fontXs'),
-    color: cssVar('black50'),
-    userSelect: 'none',
-    padding: '0 4px',
-    gap: '4px',
-    zIndex: '1',
-    svg: {
-      color: cssVar('iconSecondary'),
-      '&[data-warning-color="true"]': {
-        color: cssVar('errorColor'),
-      },
-    },
-  };
-});