feat: modify current workspace label to a dot (#3399)

apps/core/src/components/affine/setting-modal/setting-sidebar/index.tsx

@@ -1,3 +1,4 @@
+import { Tooltip } from '@affine/component';
 import {
   WorkspaceListItemSkeleton,
   WorkspaceListSkeleton,
@@ -19,6 +20,7 @@ import type {
   GeneralSettingList,
 } from '../general-setting';
 import {
+  currentWorkspaceLabel,
   settingSlideBar,
   sidebarItemsWrapper,
   sidebarSelectItem,
@@ -133,9 +135,18 @@ const WorkspaceListItem = ({
       <WorkspaceAvatar size={14} workspace={workspace} className="icon" />
       <span className="setting-name">{workspaceName}</span>
       {isCurrent ? (
-        <div className="current-label" data-testid="current-workspace-label">
-          Current
-        </div>
+        <Tooltip
+          content="Current"
+          title="Current"
+          offset={[0, -5]}
+          placement="top"
+          disablePortal={false}
+        >
+          <div
+            className={currentWorkspaceLabel}
+            data-testid="current-workspace-label"
+          ></div>
+        </Tooltip>
       ) : null}
     </div>
   );

apps/core/src/components/affine/setting-modal/setting-sidebar/style.css.ts

@@ -75,20 +75,21 @@ globalStyle(`${settingSlideBar} .setting-name`, {
   whiteSpace: 'nowrap',
   flexGrow: 1,
 });
-globalStyle(`${settingSlideBar} .current-label`, {
+export const currentWorkspaceLabel = style({
+  width: '20px',
   height: '20px',
-  borderRadius: '8px',
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
-  padding: '0 5px',
-  // TODO: use color variable
-  background: '#1E96EB',
-  fontSize: 'var(--affine-font-xs)',
-  fontWeight: '600',
-  color: 'var(--affine-white)',
-  marginLeft: '10px',
-  flexShrink: 0,
+  selectors: {
+    '&::after': {
+      content: '""',
+      width: '8px',
+      height: '8px',
+      borderRadius: '50%',
+      background: 'var(--affine-blue)',
+    },
+  },
 });
 
 export const accountButton = style({

tests/affine-local/e2e/local-first-avatar.spec.ts

@@ -21,7 +21,7 @@ test('should create a page with a local first avatar', async ({
   await page.getByTestId('workspace-name').click();
   await page.getByTestId('workspace-card').nth(1).click();
   await page.getByTestId('settings-modal-trigger').click();
-  await page.getByText('current').click();
+  await page.getByTestId('current-workspace-label').click();
   await page
     .getByTestId('upload-avatar')
     .setInputFiles(resolve(rootDir, 'tests', 'fixtures', 'smile.png'));