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

2026-02-19 07:17:00 +08:00 · 2023-11-30 12:23:57 +08:00
parent 6661e8bd9a
commit 3e662f358d
12 changed files with 56 additions and 33 deletions
--- a/packages/frontend/component/src/components/page-list/view/collection-list.tsx
+++ b/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']()}
--- a/packages/frontend/component/src/ui/button/styles.css.ts
+++ b/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',
--- a/packages/frontend/core/src/components/affine/language-menu/index.tsx
+++ b/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 || ''}
--- a/packages/frontend/core/src/components/affine/new-workspace-setting-detail/profile.tsx
+++ b/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={
-            workspaceAvatar && isOwner ? handleRemoveUserAvatar : undefined
+          onRemove={canAdjustAvatar ? 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',
--- a/packages/frontend/core/src/components/affine/setting-modal/setting-sidebar/index.tsx
+++ b/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>
--- a/packages/frontend/core/src/components/affine/setting-modal/setting-sidebar/style.css.ts
+++ b/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`, {
--- a/packages/frontend/core/src/components/affine/share-page-modal/share-menu/index.css.ts
+++ b/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)',
--- a/packages/frontend/core/src/components/affine/share-page-modal/share-menu/share-page.tsx
+++ b/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
-              className={styles.radioButton}
-              value={'page'}
-              spanStyle={styles.spanStyle}
-            >
+            <RadioButton className={styles.radioButton} value={'page'}>
              {t['com.affine.pageMode.page']()}
            </RadioButton>
-            <RadioButton
-              className={styles.radioButton}
-              value={'edgeless'}
-              spanStyle={styles.spanStyle}
-            >
+            <RadioButton className={styles.radioButton} value={'edgeless'}>
              {t['com.affine.pageMode.edgeless']()}
            </RadioButton>
          </RadioButtonGroup>
--- a/packages/frontend/core/src/components/blocksuite/block-suite-header-title/styles.css.ts
+++ b/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)',
    },
  },
 });
--- a/packages/frontend/core/src/components/pure/workspace-mode-filter-tab/index.css.ts
+++ b/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',
+});
--- a/packages/frontend/core/src/components/pure/workspace-mode-filter-tab/index.tsx
+++ b/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
-      width={300}
-      value={value}
-      onValueChange={handleValueChange}
-    >
-      <RadioButton value="all" style={{ textTransform: 'capitalize' }}>
+    <RadioButtonGroup value={value} onValueChange={handleValueChange}>
+      <RadioButton value="all" spanStyle={styles.filterTab}>
        {t['com.affine.pageMode.all']()}
      </RadioButton>
-      <RadioButton value="page">{t['com.affine.pageMode.page']()}</RadioButton>
-      <RadioButton value="edgeless">
+      <RadioButton spanStyle={styles.filterTab} value="page">
+        {t['com.affine.pageMode.page']()}
+      </RadioButton>
+      <RadioButton spanStyle={styles.filterTab} value="edgeless">
        {t['com.affine.pageMode.edgeless']()}
      </RadioButton>
    </RadioButtonGroup>
--- a/packages/frontend/core/src/pages/workspace/collection.tsx
+++ b/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>