diff --git a/apps/core/package.json b/apps/core/package.json index 1a4db3332..dd51761b2 100644 --- a/apps/core/package.json +++ b/apps/core/package.json @@ -33,7 +33,7 @@ "@emotion/styled": "^11.11.0", "@mui/material": "^5.14.4", "@react-hookz/web": "^23.1.0", - "@toeverything/components": "^0.0.10", + "@toeverything/components": "^0.0.11", "async-call-rpc": "^6.3.1", "cmdk": "^0.2.0", "css-spring": "^4.1.0", diff --git a/apps/core/src/components/affine/language-menu/index.tsx b/apps/core/src/components/affine/language-menu/index.tsx index 6f072f2e1..fb65afd6b 100644 --- a/apps/core/src/components/affine/language-menu/index.tsx +++ b/apps/core/src/components/affine/language-menu/index.tsx @@ -1,4 +1,10 @@ -import { Menu, MenuItem, MenuTrigger, styled } from '@affine/component'; +import { + Menu, + MenuItem, + type MenuProps, + MenuTrigger, + styled, +} from '@affine/component'; import { LOCALES } from '@affine/i18n'; import { useI18N } from '@affine/i18n'; import type { ButtonProps } from '@toeverything/components/button'; @@ -46,11 +52,14 @@ const LanguageMenuContent = ({ currentLanguage }: LanguageMenuContentProps) => { ); }; -interface LanguageMenuProps { +interface LanguageMenuProps extends Omit { triggerProps?: ButtonProps; } -export const LanguageMenu = ({ triggerProps }: LanguageMenuProps) => { +export const LanguageMenu = ({ + triggerProps, + ...menuProps +}: LanguageMenuProps) => { const i18n = useI18N(); const currentLanguage = LOCALES.find(item => item.tag === i18n.language); @@ -67,6 +76,7 @@ export const LanguageMenu = ({ triggerProps }: LanguageMenuProps) => { placement="bottom-end" trigger="click" disablePortal={true} + {...menuProps} > { - return ( - - - - ); -}; - interface ProfilePanelProps { workspace: AffineOfficialWorkspace; } @@ -74,32 +55,35 @@ export const ProfilePanel = ({ workspace }: ProfilePanelProps) => { -
- - {input === workspace.blockSuiteWorkspace.meta.name ? null : ( - { - handleUpdateWorkspaceName(input); - }} - active={true} - style={{ - marginLeft: '12px', - }} - > - - - )} -
+ +
{t['Workspace Name']()}
+ + + {input === workspace.blockSuiteWorkspace.meta.name ? null : ( + { + handleUpdateWorkspaceName(input); + }} + active={true} + style={{ + marginLeft: '12px', + }} + > + + + )} + + ); }; diff --git a/apps/core/src/components/affine/new-workspace-setting-detail/style.css.ts b/apps/core/src/components/affine/new-workspace-setting-detail/style.css.ts index b7ee82685..22b73ec8c 100644 --- a/apps/core/src/components/affine/new-workspace-setting-detail/style.css.ts +++ b/apps/core/src/components/affine/new-workspace-setting-detail/style.css.ts @@ -5,12 +5,6 @@ export const profileWrapper = style({ alignItems: 'flex-end', marginTop: '12px', }); -export const profileHandlerWrapper = style({ - flexGrow: '1', - display: 'flex', - alignItems: 'center', - marginLeft: '20px', -}); export const avatarWrapper = style({ width: '56px', @@ -39,6 +33,8 @@ globalStyle(`${avatarWrapper} .camera-icon-wrapper`, { alignItems: 'center', backgroundColor: 'rgba(60, 61, 63, 0.5)', zIndex: '1', + color: 'var(--affine-white)', + fontSize: '24px', }); export const urlButton = style({ @@ -71,3 +67,9 @@ export const fakeWrapper = style({ }, }, }); + +export const label = style({ + fontSize: 'var(--affine-font-xs)', + color: 'var(--affine-text-secondary-color)', + marginBottom: '5px', +}); diff --git a/apps/core/src/components/affine/setting-modal/general-setting/appearance/index.tsx b/apps/core/src/components/affine/setting-modal/general-setting/appearance/index.tsx index 5ec69c608..6349b9d1a 100644 --- a/apps/core/src/components/affine/setting-modal/general-setting/appearance/index.tsx +++ b/apps/core/src/components/affine/setting-modal/general-setting/appearance/index.tsx @@ -35,10 +35,10 @@ export const ThemeSettings = () => { {t['system']()} - + {t['light']()} - + {t['dark']()} @@ -63,7 +63,6 @@ const FontFamilySettings = () => { return ( { desc={t['com.affine.settings.appearance.language-description']()} >
- +
{environment.isDesktop ? ( diff --git a/apps/core/src/components/affine/setting-modal/index.tsx b/apps/core/src/components/affine/setting-modal/index.tsx index 9d6c78fe3..c7db8d535 100644 --- a/apps/core/src/components/affine/setting-modal/index.tsx +++ b/apps/core/src/components/affine/setting-modal/index.tsx @@ -13,7 +13,7 @@ import { useGeneralSettingList, } from './general-setting'; import { SettingSidebar } from './setting-sidebar'; -import { settingContent } from './style.css'; +import { footerIconWrapper, settingContent } from './style.css'; import { WorkspaceSetting } from './workspace-setting'; type ActiveTab = GeneralSettingKeys | 'workspace' | 'account'; @@ -85,7 +85,9 @@ export const SettingModal = ({ {activeTab === 'account' ? : null}
- +
+ +
svg`, { +export const footerIconWrapper = style({ fontSize: 'var(--affine-font-base)', color: 'var(--affine-icon-color)', marginRight: '12px', - marginTop: '1px', + height: '19px', + display: 'flex', + alignItems: 'center', }); diff --git a/apps/core/src/components/affine/workspace-setting-detail/panel/general/icons.tsx b/apps/core/src/components/affine/workspace-setting-detail/panel/general/icons.tsx deleted file mode 100644 index e69de29bb..000000000 diff --git a/apps/core/src/components/pure/footer/index.tsx b/apps/core/src/components/pure/footer/index.tsx index b1a104efc..38ed80cee 100644 --- a/apps/core/src/components/pure/footer/index.tsx +++ b/apps/core/src/components/pure/footer/index.tsx @@ -1,11 +1,12 @@ import { useAFFiNEI18N } from '@affine/i18n/hooks'; import { CloudWorkspaceIcon } from '@blocksuite/icons'; +import { Button } from '@toeverything/components/button'; import { useSetAtom } from 'jotai'; import { type CSSProperties, forwardRef } from 'react'; import { openDisableCloudAlertModalAtom } from '../../../atoms'; import { stringToColour } from '../../../utils'; -import { StyledFooter, StyledSignInButton } from './styles'; +import { StyledFooter } from './styles'; export const Footer = () => { const t = useAFFiNEI18N(); @@ -13,13 +14,13 @@ export const Footer = () => { return ( - - -
+ } onClick={async () => { if (!runtimeConfig.enableCloud) { @@ -28,7 +29,7 @@ export const Footer = () => { }} > {t['Sign in']()} - + ); }; diff --git a/apps/core/src/components/pure/footer/styles.ts b/apps/core/src/components/pure/footer/styles.ts index 94ac11499..826676036 100644 --- a/apps/core/src/components/pure/footer/styles.ts +++ b/apps/core/src/components/pure/footer/styles.ts @@ -1,10 +1,4 @@ -import { - displayFlex, - displayInlineFlex, - styled, - textEllipsis, -} from '@affine/component'; -import { Button } from '@toeverything/components/button'; +import { displayFlex, styled, textEllipsis } from '@affine/component'; export const StyleWorkspaceInfo = styled('div')(() => { return { marginLeft: '15px', @@ -116,21 +110,3 @@ export const StyledModalHeader = styled('div')(() => { ...displayFlex('space-between', 'center'), }; }); - -export const StyledSignInButton = styled(Button)(() => { - return { - fontWeight: 600, - paddingLeft: 0, - '.circle': { - width: '40px', - height: '40px', - borderRadius: '20px', - backgroundColor: 'var(--affine-hover-color)', - color: 'var(--affine-primary-color)', - fontSize: '24px', - flexShrink: 0, - marginRight: '16px', - ...displayInlineFlex('center', 'center'), - }, - }; -}); diff --git a/packages/component/src/components/page-list/operation-menu-items/export.tsx b/packages/component/src/components/page-list/operation-menu-items/export.tsx index b1e372d66..b6595d5d5 100644 --- a/packages/component/src/components/page-list/operation-menu-items/export.tsx +++ b/packages/component/src/components/page-list/operation-menu-items/export.tsx @@ -233,7 +233,7 @@ export const Export = ({ return ( diff --git a/packages/component/src/components/setting-components/share.css.ts b/packages/component/src/components/setting-components/share.css.ts index bfff7880b..6064c15d0 100644 --- a/packages/component/src/components/setting-components/share.css.ts +++ b/packages/component/src/components/setting-components/share.css.ts @@ -57,7 +57,7 @@ export const settingRow = style({ }); globalStyle(`${settingRow} .left-col`, { - flexShrink: 0, + flex: 1, maxWidth: '100%', }); globalStyle(`${settingRow}.two-col .left-col`, { @@ -74,7 +74,7 @@ globalStyle(`${settingRow} .desc`, { color: 'var(--affine-text-secondary-color)', }); globalStyle(`${settingRow} .right-col`, { - flexGrow: 1, + width: '250px', display: 'flex', justifyContent: 'flex-end', paddingLeft: '15px', diff --git a/packages/component/src/ui/button/radio.tsx b/packages/component/src/ui/button/radio.tsx index 080f2310f..92daee1f8 100644 --- a/packages/component/src/ui/button/radio.tsx +++ b/packages/component/src/ui/button/radio.tsx @@ -8,27 +8,22 @@ import { type CSSProperties, forwardRef } from 'react'; import * as styles from './styles.css'; -export const RadioButton = forwardRef< - HTMLButtonElement, - RadioGroupItemProps & { bold?: boolean } ->(({ children, bold, className, ...props }, ref) => { - return ( - - - {children} - - ( + ({ children, className, ...props }, ref) => { + return ( + - {children} - - - ); -}); + {children} + + {children} + + + ); + } +); RadioButton.displayName = 'RadioButton'; export const RadioButtonGroup = forwardRef< diff --git a/packages/component/src/ui/button/styles.css.ts b/packages/component/src/ui/button/styles.css.ts index 1b846b2d2..b2e02ae5b 100644 --- a/packages/component/src/ui/button/styles.css.ts +++ b/packages/component/src/ui/button/styles.css.ts @@ -55,6 +55,11 @@ export const dropdownIcon = style({ export const radioButton = style({ flexGrow: 1, + selectors: { + '&:not(:last-of-type)': { + marginRight: '4px', + }, + }, }); export const radioButtonContent = style({ fontSize: 'var(--affine-font-xs)', @@ -66,6 +71,8 @@ export const radioButtonContent = style({ filter: 'drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.1))', whiteSpace: 'nowrap', userSelect: 'none', + fontWeight: 600, + selectors: { '&:hover': { background: 'var(--affine-hover-color)', @@ -73,9 +80,6 @@ export const radioButtonContent = style({ '&[data-state="checked"]': { background: 'var(--affine-white)', }, - '&.bold': { - fontWeight: 600, - }, }, }); diff --git a/packages/component/src/ui/menu/menu-trigger.tsx b/packages/component/src/ui/menu/menu-trigger.tsx index fb538b1ce..5f53b42cb 100644 --- a/packages/component/src/ui/menu/menu-trigger.tsx +++ b/packages/component/src/ui/menu/menu-trigger.tsx @@ -6,7 +6,7 @@ export const MenuTrigger = forwardRef( ({ children, ...props }, ref) => { return (