From bc263e7afb348d4b05a37df1ce6cbe8542beff0e Mon Sep 17 00:00:00 2001
From: Qi <474021214@qq.com>
Date: Thu, 27 Jul 2023 13:37:31 +0800
Subject: [PATCH] feat: modify current workspace label to a dot (#3399)

---
 .../setting-modal/setting-sidebar/index.tsx   | 17 ++++++++++++---
 .../setting-sidebar/style.css.ts              | 21 ++++++++++---------
 .../e2e/local-first-avatar.spec.ts            |  2 +-
 3 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/apps/core/src/components/affine/setting-modal/setting-sidebar/index.tsx b/apps/core/src/components/affine/setting-modal/setting-sidebar/index.tsx
index 6fd0152d67..7fc926bf4c 100644
--- a/apps/core/src/components/affine/setting-modal/setting-sidebar/index.tsx
+++ b/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>
   );
diff --git a/apps/core/src/components/affine/setting-modal/setting-sidebar/style.css.ts b/apps/core/src/components/affine/setting-modal/setting-sidebar/style.css.ts
index a0623d1f04..b6b9d5ef78 100644
--- a/apps/core/src/components/affine/setting-modal/setting-sidebar/style.css.ts
+++ b/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({
diff --git a/tests/affine-local/e2e/local-first-avatar.spec.ts b/tests/affine-local/e2e/local-first-avatar.spec.ts
index 5d2286d7ed..bc9cb101c6 100644
--- a/tests/affine-local/e2e/local-first-avatar.spec.ts
+++ b/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'));