feat: migrate workspace setting with new design to setting modal (#2900)

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

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

@@ -1,3 +1,4 @@
+import { UserAvatar } from '@affine/component/user-avatar';
 import { WorkspaceAvatar } from '@affine/component/workspace-avatar';
 import type {
   AffineLegacyCloudWorkspace,
@@ -5,6 +6,7 @@ import type {
 } from '@affine/env/workspace';
 import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-block-suite-workspace-name';
 import clsx from 'clsx';
+import React from 'react';
 
 import type {
   GeneralSettingKeys,
@@ -84,7 +86,13 @@ export const SettingSidebar = ({
       </div>
 
       <div className={accountButton} onClick={onAccountSettingClick}>
-        <div className="avatar"></div>
+        <UserAvatar
+          size={28}
+          name="Account NameAccount Name"
+          url={''}
+          className="avatar"
+        />
+
         <div className="content">
           <div className="name" title="xxx">
             Account NameAccount Name

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

@@ -3,9 +3,7 @@ import { globalStyle, style } from '@vanilla-extract/css';
 export const settingSlideBar = style({
   width: '25%',
   maxWidth: '242px',
-  // TODO: use color variable
-  // background: 'var(--affine-background-secondary-color)',
-  backgroundColor: '#F4F4F5',
+  background: 'var(--affine-background-secondary-color)',
   padding: '20px 16px',
   height: '100%',
   flexShrink: 0,
@@ -107,14 +105,9 @@ export const accountButton = style({
 });
 
 globalStyle(`${accountButton} .avatar`, {
-  width: '28px',
-  height: '28px',
   border: '1px solid',
   borderColor: 'var(--affine-white)',
-  borderRadius: '14px',
-  flexShrink: '0',
   marginRight: '10px',
-  background: 'red',
 });
 globalStyle(`${accountButton} .content`, {
   flexGrow: '1',