fix(core): adjust ui styles (#5094)

packages/frontend/component/src/components/page-list/view/collection-list.tsx

@@ -5,7 +5,7 @@ import type {
 } from '@affine/env/filter';
 import type { PropertiesMeta } from '@affine/env/filter';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import { FilteredIcon } from '@blocksuite/icons';
+import { FilterIcon } from '@blocksuite/icons';
 import { Button } from '@toeverything/components/button';
 import { Menu } from '@toeverything/components/menu';
 import { useCallback, useState } from 'react';
@@ -75,7 +75,7 @@ export const CollectionList = ({
             <Button
               className={styles.filterMenuTrigger}
               type="default"
-              icon={<FilteredIcon />}
+              icon={<FilterIcon />}
               data-testid="create-first-filter"
             >
               {t['com.affine.filter']()}
@@ -99,7 +99,7 @@ export const CollectionList = ({
           <Button
             className={styles.filterMenuTrigger}
             type="default"
-            icon={<FilteredIcon />}
+            icon={<FilterIcon />}
             data-testid="create-first-filter"
           >
             {t['com.affine.filter']()}

packages/frontend/component/src/ui/button/styles.css.ts

@@ -61,6 +61,7 @@ export const dropdownIcon = style({
 
 export const radioButton = style({
   flexGrow: 1,
+  flex: 1,
   selectors: {
     '&:not(:last-of-type)': {
       marginRight: '4px',
@@ -72,7 +73,8 @@ export const radioButtonContent = style({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
-  height: '24px',
+  height: '28px',
+  padding: '4px 8px',
   borderRadius: '8px',
   filter: 'drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.1))',
   whiteSpace: 'nowrap',

packages/frontend/core/src/components/affine/language-menu/index.tsx

@@ -33,13 +33,14 @@ export const LanguageMenu = () => {
       contentOptions={{
         style: {
           background: 'var(--affine-white)',
+          width: '250px',
         },
         align: 'end',
       }}
     >
       <MenuTrigger
         data-testid="language-menu-button"
-        style={{ textTransform: 'capitalize', fontWeight: 600 }}
+        style={{ textTransform: 'capitalize', fontWeight: 600, width: '250px' }}
         block={true}
       >
         {currentLanguage?.originalName || ''}

packages/frontend/core/src/components/affine/new-workspace-setting-detail/profile.tsx

@@ -96,6 +96,8 @@ export const ProfilePanel = ({ workspace, isOwner }: ProfilePanelProps) => {
     [pushNotification, update]
   );
 
+  const canAdjustAvatar = workspaceAvatar && isOwner;
+
   return (
     <div className={style.profileWrapper}>
       <Upload
@@ -110,11 +112,15 @@ export const ProfilePanel = ({ workspace, isOwner }: ProfilePanelProps) => {
           name={name}
           colorfulFallback
           hoverIcon={isOwner ? <CameraIcon /> : undefined}
-          onRemove={
+          onRemove={canAdjustAvatar ? handleRemoveUserAvatar : undefined}
-            workspaceAvatar && isOwner ? handleRemoveUserAvatar : undefined
+          avatarTooltipOptions={
+            canAdjustAvatar
+              ? { content: t['Click to replace photo']() }
+              : undefined
+          }
+          removeTooltipOptions={
+            canAdjustAvatar ? { content: t['Remove photo']() } : undefined
           }
-          avatarTooltipOptions={{ content: t['Click to replace photo']() }}
-          removeTooltipOptions={{ content: t['Remove photo']() }}
           data-testid="workspace-setting-avatar"
           removeButtonProps={{
             ['data-testid' as string]: 'workspace-setting-remove-avatar-button',

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

@@ -38,16 +38,20 @@ import {
 
 export type UserInfoProps = {
   onAccountSettingClick: () => void;
+  active?: boolean;
 };
 
 export const UserInfo = ({
   onAccountSettingClick,
+  active,
 }: UserInfoProps): ReactElement => {
   const user = useCurrentUser();
   return (
     <div
       data-testid="user-info-card"
-      className={accountButton}
+      className={clsx(accountButton, {
+        active: active,
+      })}
       onClick={onAccountSettingClick}
     >
       <Avatar size={28} name={user.name} url={user.image} className="avatar" />
@@ -163,7 +167,10 @@ export const SettingSidebar = ({
 
         {runtimeConfig.enableCloud && loginStatus === 'authenticated' ? (
           <Suspense>
-            <UserInfo onAccountSettingClick={onAccountSettingClick} />
+            <UserInfo
+              onAccountSettingClick={onAccountSettingClick}
+              active={selectedGeneralKey === 'account'}
+            />
           </Suspense>
         ) : null}
       </div>

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

@@ -105,6 +105,11 @@ export const accountButton = style({
   ':hover': {
     background: 'var(--affine-hover-color)',
   },
+  selectors: {
+    '&.active': {
+      background: 'var(--affine-hover-color)',
+    },
+  },
 });
 
 globalStyle(`${accountButton} .avatar`, {

packages/frontend/core/src/components/affine/share-page-modal/share-menu/index.css.ts

@@ -112,9 +112,6 @@ export const radioButton = style({
     },
   },
 });
-export const spanStyle = style({
-  padding: '4px 20px',
-});
 
 export const disableSharePage = style({
   color: 'var(--affine-error-color)',

packages/frontend/core/src/components/affine/share-page-modal/share-menu/share-page.tsx

@@ -174,18 +174,10 @@ export const AffineSharePage = (props: ShareMenuProps) => {
             value={mode}
             onValueChange={onShareModeChange}
           >
-            <RadioButton
+            <RadioButton className={styles.radioButton} value={'page'}>
-              className={styles.radioButton}
-              value={'page'}
-              spanStyle={styles.spanStyle}
-            >
               {t['com.affine.pageMode.page']()}
             </RadioButton>
-            <RadioButton
+            <RadioButton className={styles.radioButton} value={'edgeless'}>
-              className={styles.radioButton}
-              value={'edgeless'}
-              spanStyle={styles.spanStyle}
-            >
               {t['com.affine.pageMode.edgeless']()}
             </RadioButton>
           </RadioButtonGroup>

packages/frontend/core/src/components/blocksuite/block-suite-header-title/styles.css.ts

@@ -32,6 +32,8 @@ export const titleInput = style({
       borderRadius: '8px',
       height: '32px',
       padding: '6px 8px',
+      borderColor: 'var(--affine-primary-color)',
+      boxShadow: 'var(--affine-active-shadow)',
     },
   },
 });

packages/frontend/core/src/components/pure/workspace-mode-filter-tab/index.css.ts

@@ -0,0 +1,8 @@
+import { style } from '@vanilla-extract/css';
+
+export const filterTab = style({
+  fontSize: 'var(--affine-font-xs)',
+  fontWeight: 600,
+  textTransform: 'capitalize',
+  minWidth: '91px',
+});

packages/frontend/core/src/components/pure/workspace-mode-filter-tab/index.tsx

@@ -3,6 +3,7 @@ import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { useAtom } from 'jotai';
 
 import { allPageModeSelectAtom } from '../../../atoms';
+import * as styles from './index.css';
 
 export const WorkspaceModeFilterTab = () => {
   const t = useAFFiNEI18N();
@@ -15,16 +16,14 @@ export const WorkspaceModeFilterTab = () => {
   };
 
   return (
-    <RadioButtonGroup
+    <RadioButtonGroup value={value} onValueChange={handleValueChange}>
-      width={300}
+      <RadioButton value="all" spanStyle={styles.filterTab}>
-      value={value}
-      onValueChange={handleValueChange}
-    >
-      <RadioButton value="all" style={{ textTransform: 'capitalize' }}>
         {t['com.affine.pageMode.all']()}
       </RadioButton>
-      <RadioButton value="page">{t['com.affine.pageMode.page']()}</RadioButton>
+      <RadioButton spanStyle={styles.filterTab} value="page">
-      <RadioButton value="edgeless">
+        {t['com.affine.pageMode.page']()}
+      </RadioButton>
+      <RadioButton spanStyle={styles.filterTab} value="edgeless">
         {t['com.affine.pageMode.edgeless']()}
       </RadioButton>
     </RadioButtonGroup>

packages/frontend/core/src/pages/workspace/collection.tsx

@@ -118,6 +118,7 @@ const Placeholder = ({ collection }: { collection: Collection }) => {
           alignItems: 'center',
           gap: 8,
           padding: '12px 24px',
+          fontSize: 'var(--affine-font-xs)',
         }}
       >
         <div
@@ -128,7 +129,10 @@ const Placeholder = ({ collection }: { collection: Collection }) => {
             color: 'var(--affine-text-secondary-color)',
           }}
         >
-          <ViewLayersIcon style={{ color: 'var(--affine-icon-color)' }} />
+          <ViewLayersIcon
+            style={{ color: 'var(--affine-icon-color)' }}
+            fontSize={14}
+          />
           {t['com.affine.collection.allCollections']()}
           <div>/</div>
         </div>