feat: new workspace switch dropdown design (#3700)

Co-authored-by: Alex Yang <himself65@outlook.com>

packages/component/src/components/card/workspace-card/index.tsx

@@ -5,7 +5,6 @@ import { SettingsIcon } from '@blocksuite/icons';
 import {
   CloudWorkspaceIcon as DefaultCloudWorkspaceIcon,
   CollaborationIcon as DefaultJoinedWorkspaceIcon,
-  LocalDataIcon as DefaultLocalDataIcon,
   LocalWorkspaceIcon as DefaultLocalWorkspaceIcon,
 } from '@blocksuite/icons';
 import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-block-suite-workspace-name';
@@ -16,8 +15,8 @@ import { WorkspaceAvatar } from '../../workspace-avatar';
 import {
   StyledCard,
   StyledSettingLink,
-  StyleWorkspaceInfo,
-  StyleWorkspaceTitle,
+  StyledWorkspaceInfo,
+  StyledWorkspaceTitle,
 } from './styles';
 
 const JoinedWorkspaceIcon = () => {
@@ -31,9 +30,9 @@ const CloudWorkspaceIcon = () => {
   return <DefaultCloudWorkspaceIcon style={{ color: '#60A5FA' }} />;
 };
 
-const LocalDataIcon = () => {
-  return <DefaultLocalDataIcon style={{ color: '#62CD80' }} />;
-};
+// const LocalDataIcon = () => {
+//   return <DefaultLocalDataIcon style={{ color: '#62CD80' }} />;
+// };
 
 export interface WorkspaceTypeProps {
   flavour: WorkspaceFlavour;
@@ -46,7 +45,7 @@ const WorkspaceType = ({ flavour }: WorkspaceTypeProps) => {
 
   if (flavour === WorkspaceFlavour.LOCAL) {
     return (
-      <p title={t['Local Workspace']()}>
+      <p style={{ fontSize: '10px' }} title={t['Local Workspace']()}>
         <LocalWorkspaceIcon />
         <span>{t['Local Workspace']()}</span>
       </p>
@@ -54,12 +53,12 @@ const WorkspaceType = ({ flavour }: WorkspaceTypeProps) => {
   }
 
   return isOwner ? (
-    <p title={t['Cloud Workspace']()}>
+    <p style={{ fontSize: '10px' }} title={t['Cloud Workspace']()}>
       <CloudWorkspaceIcon />
       <span>{t['Cloud Workspace']()}</span>
     </p>
   ) : (
-    <p title={t['Joined Workspace']()}>
+    <p style={{ fontSize: '10px' }} title={t['Joined Workspace']()}>
       <JoinedWorkspaceIcon />
       <span>{t['Joined Workspace']()}</span>
     </p>
@@ -79,7 +78,7 @@ export const WorkspaceCard = ({
   currentWorkspaceId,
   meta,
 }: WorkspaceCardProps) => {
-  const t = useAFFiNEI18N();
+  // const t = useAFFiNEI18N();
   const workspace = useStaticBlockSuiteWorkspace(meta.id);
   const [name] = useBlockSuiteWorkspaceName(workspace);
 
@@ -91,18 +90,18 @@ export const WorkspaceCard = ({
       }, [onClick, meta.id])}
       active={workspace.id === currentWorkspaceId}
     >
-      <WorkspaceAvatar size={58} workspace={workspace} />
+      <WorkspaceAvatar size={28} workspace={workspace} />
 
-      <StyleWorkspaceInfo>
-        <StyleWorkspaceTitle>{name}</StyleWorkspaceTitle>
+      <StyledWorkspaceInfo>
+        <StyledWorkspaceTitle>{name}</StyledWorkspaceTitle>
         <WorkspaceType flavour={meta.flavour} />
-        {meta.flavour === WorkspaceFlavour.LOCAL && (
+        {/* {meta.flavour === WorkspaceFlavour.LOCAL && (
           <p title={t['Available Offline']()}>
             <LocalDataIcon />
             <span>{t['Available Offline']()}</span>
           </p>
-        )}
-      </StyleWorkspaceInfo>
+        )} */}
+      </StyledWorkspaceInfo>
       <StyledSettingLink
         className="setting-entry"
         onClick={e => {

packages/component/src/components/card/workspace-card/styles.ts

@@ -2,7 +2,7 @@ import { IconButton } from '@toeverything/components/button';
 
 import { displayFlex, styled, textEllipsis } from '../../../styles';
 
-export const StyleWorkspaceInfo = styled('div')(() => {
+export const StyledWorkspaceInfo = styled('div')(() => {
   return {
     marginLeft: '15px',
     width: '202px',
@@ -23,13 +23,13 @@ export const StyleWorkspaceInfo = styled('div')(() => {
   };
 });
 
-export const StyleWorkspaceTitle = styled('div')(() => {
+export const StyledWorkspaceTitle = styled('div')(() => {
   return {
     fontSize: 'var(--affine-font-base)',
     fontWeight: 600,
     lineHeight: '24px',
-    marginBottom: '10px',
     maxWidth: '200px',
+    color: 'var(--affine-text-primary-color)',
     ...textEllipsis(1),
   };
 });
@@ -38,19 +38,21 @@ export const StyledCard = styled('div')<{
   active?: boolean;
 }>(({ active }) => {
   const borderColor = active ? 'var(--affine-primary-color)' : 'transparent';
+  const backgroundColor = active ? 'var(--affine-white)' : 'transparent';
   return {
-    width: '310px',
-    height: '124px',
+    width: '280px',
+    height: '58px',
     cursor: 'pointer',
     padding: '16px',
-    boxShadow: 'var(--affine-shadow-1)',
     borderRadius: '12px',
     border: `1px solid ${borderColor}`,
     ...displayFlex('flex-start', 'flex-start'),
-    marginBottom: '24px',
+    marginBottom: '12px',
     transition: 'background .2s',
-    background: 'var(--affine-white-80)',
+    alignItems: 'center',
     position: 'relative',
+    color: 'var(--affine-text-secondary-color)',
+    background: backgroundColor,
     ':hover': {
       background: 'var(--affine-hover-color)',
       '.add-icon': {
@@ -96,3 +98,9 @@ export const StyledSettingLink = styled(IconButton)(() => {
     },
   };
 });
+
+export const StyledWorkspaceType = styled('p')(() => {
+  return {
+    fontSize: 10,
+  };
+});