From 87ba71e77e9106c8bf4889bb6674af916b99e362 Mon Sep 17 00:00:00 2001 From: Qi <474021214@qq.com> Date: Wed, 5 Jul 2023 22:11:42 +0800 Subject: [PATCH] fix: a series of setting issues (#3032) --- .../src/stories/contact-modal.stories.tsx | 35 ----- apps/web/src/atoms/index.ts | 10 +- .../components/affine/language-menu/index.tsx | 13 +- .../general-setting/about/config.tsx | 35 +++++ .../general-setting/about}/icons.tsx | 0 .../general-setting/about/index.tsx | 2 +- .../general-setting/appearance/index.tsx | 14 +- .../components/affine/setting-modal/index.tsx | 92 ++++++----- .../setting-modal/setting-sidebar/index.tsx | 18 +-- .../setting-sidebar/style.css.ts | 1 + .../components/affine/setting-modal/type.ts | 6 - .../setting-modal/workspace-setting/index.tsx | 8 +- .../src/components/pure/help-island/index.tsx | 35 ++--- .../components/pure/workspace-title/index.tsx | 1 + apps/web/src/layouts/workspace-layout.tsx | 26 +++- apps/web/src/providers/modal-provider.tsx | 29 ++-- .../src/components/contact-modal/index.tsx | 138 ----------------- .../src/components/contact-modal/style.ts | 144 ------------------ .../components/setting-components/modal.tsx | 3 +- packages/component/src/ui/button/radio.tsx | 60 +++++--- .../component/src/ui/button/styles.css.ts | 12 +- packages/component/src/ui/button/utils.ts | 8 +- packages/component/src/ui/menu/styles.ts | 3 +- tests/parallels/contact-us.spec.ts | 5 +- 24 files changed, 235 insertions(+), 463 deletions(-) delete mode 100644 apps/storybook/src/stories/contact-modal.stories.tsx create mode 100644 apps/web/src/components/affine/setting-modal/general-setting/about/config.tsx rename {packages/component/src/components/contact-modal => apps/web/src/components/affine/setting-modal/general-setting/about}/icons.tsx (100%) delete mode 100644 apps/web/src/components/affine/setting-modal/type.ts delete mode 100644 packages/component/src/components/contact-modal/index.tsx delete mode 100644 packages/component/src/components/contact-modal/style.ts diff --git a/apps/storybook/src/stories/contact-modal.stories.tsx b/apps/storybook/src/stories/contact-modal.stories.tsx deleted file mode 100644 index 471d06fc8e..0000000000 --- a/apps/storybook/src/stories/contact-modal.stories.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { Button } from '@affine/component'; -import type { ContactModalProps } from '@affine/component/contact-modal'; -import { ContactModal } from '@affine/component/contact-modal'; -import type { StoryFn } from '@storybook/react'; -import { useState } from 'react'; - -export default { - title: 'AFFiNE/ContactModal', - component: ContactModal, -}; - -export const Basic: StoryFn = args => { - const [open, setOpen] = useState(false); - return ( - <> - - { - setOpen(false); - }} - /> - - ); -}; -Basic.args = { - logoSrc: '/imgs/affine-text-logo.png', -}; diff --git a/apps/web/src/atoms/index.ts b/apps/web/src/atoms/index.ts index 85d074406f..5537fbc9a1 100644 --- a/apps/web/src/atoms/index.ts +++ b/apps/web/src/atoms/index.ts @@ -2,13 +2,21 @@ import { atom } from 'jotai'; import { atomFamily, atomWithStorage } from 'jotai/utils'; import type { CreateWorkspaceMode } from '../components/affine/create-workspace-modal'; +import type { SettingProps } from '../components/affine/setting-modal'; // modal atoms export const openWorkspacesModalAtom = atom(false); export const openCreateWorkspaceModalAtom = atom(false); export const openQuickSearchModalAtom = atom(false); export const openOnboardingModalAtom = atom(false); -export const openSettingModalAtom = atom(false); + +export type SettingAtom = Pick & { + open: boolean; +}; + +export const openSettingModalAtom = atom({ + open: false, +}); export const openDisableCloudAlertModalAtom = atom(false); diff --git a/apps/web/src/components/affine/language-menu/index.tsx b/apps/web/src/components/affine/language-menu/index.tsx index 65d406c6d0..a389ec2724 100644 --- a/apps/web/src/components/affine/language-menu/index.tsx +++ b/apps/web/src/components/affine/language-menu/index.tsx @@ -1,4 +1,10 @@ -import { Menu, MenuItem, MenuTrigger, styled } from '@affine/component'; +import { + type ButtonProps, + Menu, + MenuItem, + MenuTrigger, + styled, +} from '@affine/component'; import { LOCALES } from '@affine/i18n'; import { useI18N } from '@affine/i18n'; import type { FC, ReactElement } from 'react'; @@ -41,7 +47,9 @@ const LanguageMenuContent: FC<{ ); }; -export const LanguageMenu: FC = () => { +export const LanguageMenu: FC<{ triggerProps: ButtonProps }> = ({ + triggerProps, +}) => { const i18n = useI18N(); const currentLanguage = LOCALES.find(item => item.tag === i18n.language); @@ -62,6 +70,7 @@ export const LanguageMenu: FC = () => { {currentLanguage?.originalName} diff --git a/apps/web/src/components/affine/setting-modal/general-setting/about/config.tsx b/apps/web/src/components/affine/setting-modal/general-setting/about/config.tsx new file mode 100644 index 0000000000..b1d9222105 --- /dev/null +++ b/apps/web/src/components/affine/setting-modal/general-setting/about/config.tsx @@ -0,0 +1,35 @@ +import { + DiscordIcon, + GithubIcon, + RedditIcon, + TelegramIcon, + TwitterIcon, +} from './icons'; + +export const relatedLinks = [ + { + icon: , + title: 'GitHub', + link: 'https://github.com/toeverything/AFFiNE', + }, + { + icon: , + title: 'Reddit', + link: 'https://www.reddit.com/r/Affine/', + }, + { + icon: , + title: 'Twitter', + link: 'https://twitter.com/AffineOfficial', + }, + { + icon: , + title: 'Telegram', + link: 'https://t.me/affineworkos', + }, + { + icon: , + title: 'Discord', + link: 'https://discord.gg/Arn7TqJBvG', + }, +]; diff --git a/packages/component/src/components/contact-modal/icons.tsx b/apps/web/src/components/affine/setting-modal/general-setting/about/icons.tsx similarity index 100% rename from packages/component/src/components/contact-modal/icons.tsx rename to apps/web/src/components/affine/setting-modal/general-setting/about/icons.tsx diff --git a/apps/web/src/components/affine/setting-modal/general-setting/about/index.tsx b/apps/web/src/components/affine/setting-modal/general-setting/about/index.tsx index 6637a54077..83730f1645 100644 --- a/apps/web/src/components/affine/setting-modal/general-setting/about/index.tsx +++ b/apps/web/src/components/affine/setting-modal/general-setting/about/index.tsx @@ -1,5 +1,4 @@ import { Switch } from '@affine/component'; -import { relatedLinks } from '@affine/component/contact-modal'; import { SettingHeader } from '@affine/component/setting-components'; import { SettingRow } from '@affine/component/setting-components'; import { SettingWrapper } from '@affine/component/setting-components'; @@ -8,6 +7,7 @@ import { ArrowRightSmallIcon, OpenInNewIcon } from '@blocksuite/icons'; import { useCallback } from 'react'; import { type AppSetting, useAppSetting } from '../../../../../atoms/settings'; +import { relatedLinks } from './config'; import { communityItem, communityWrapper, link } from './style.css'; export const AboutAffine = () => { diff --git a/apps/web/src/components/affine/setting-modal/general-setting/appearance/index.tsx b/apps/web/src/components/affine/setting-modal/general-setting/appearance/index.tsx index 5974a2aad7..5680f43490 100644 --- a/apps/web/src/components/affine/setting-modal/general-setting/appearance/index.tsx +++ b/apps/web/src/components/affine/setting-modal/general-setting/appearance/index.tsx @@ -21,6 +21,7 @@ export const ThemeSettings = () => { return ( { [setTheme] )} > - + {t['system']()} - + {t['light']()} - + {t['dark']()} @@ -72,7 +77,7 @@ export const AppearanceSettings = () => { desc={t['Select the language for the interface.']()} >
- +
{runtimeConfig.enableNewSettingUnstableApi && environment.isDesktop ? ( @@ -104,6 +109,7 @@ export const AppearanceSettings = () => { > { setAppSettings({ windowFrameStyle: value }); diff --git a/apps/web/src/components/affine/setting-modal/index.tsx b/apps/web/src/components/affine/setting-modal/index.tsx index f5cb84fd85..996b7ff330 100644 --- a/apps/web/src/components/affine/setting-modal/index.tsx +++ b/apps/web/src/components/affine/setting-modal/index.tsx @@ -2,18 +2,15 @@ import { SettingModal as SettingModalBase, type SettingModalProps, } from '@affine/component/setting-components'; -import type { - AffineCloudWorkspace, - LocalWorkspace, -} from '@affine/env/workspace'; import { WorkspaceFlavour } from '@affine/env/workspace'; import { useAFFiNEI18N } from '@affine/i18n/hooks'; import { ContactWithUsIcon } from '@blocksuite/icons'; import type React from 'react'; -import { useCallback, useMemo, useState } from 'react'; +import { useCallback, useMemo } from 'react'; import { useCurrentWorkspace } from '../../../hooks/current/use-current-workspace'; import { useWorkspaces } from '../../../hooks/use-workspaces'; +import type { AllWorkspace } from '../../../shared'; import { AccountSetting } from './account-setting'; import { GeneralSetting, @@ -22,80 +19,79 @@ import { } from './general-setting'; import { SettingSidebar } from './setting-sidebar'; import { settingContent } from './style.css'; -import type { Workspace } from './type'; import { WorkSpaceSetting } from './workspace-setting'; -export const SettingModal: React.FC = ({ +type ActiveTab = GeneralSettingKeys | 'workspace' | 'account'; +export type SettingProps = { + activeTab?: ActiveTab; + workspace?: AllWorkspace; + onSettingClick: (params: { + activeTab: ActiveTab; + workspace?: AllWorkspace; + }) => void; +}; +export const SettingModal: React.FC = ({ open, setOpen, + activeTab = 'appearance', + workspace = null, + onSettingClick, }) => { const t = useAFFiNEI18N(); + const workspaces = useWorkspaces(); const [currentWorkspace] = useCurrentWorkspace(); const generalSettingList = useGeneralSettingList(); const workspaceList = useMemo(() => { return workspaces.filter( ({ flavour }) => flavour !== WorkspaceFlavour.PUBLIC - ) as Workspace[]; + ) as AllWorkspace[]; }, [workspaces]); - const [currentRef, setCurrentRef] = useState<{ - workspace: Workspace | null; - generalKey: GeneralSettingKeys | null; - isAccount: boolean; - }>({ - workspace: null, - generalKey: generalSettingList[0].key, - isAccount: false, - }); - - const onGeneralSettingClick = useCallback((key: GeneralSettingKeys) => { - setCurrentRef({ - workspace: null, - generalKey: key, - isAccount: false, - }); - }, []); - const onWorkspaceSettingClick = useCallback((workspace: Workspace) => { - setCurrentRef({ - workspace: workspace, - generalKey: null, - isAccount: false, - }); - }, []); + const onGeneralSettingClick = useCallback( + (key: GeneralSettingKeys) => { + onSettingClick({ + activeTab: key, + }); + }, + [onSettingClick] + ); + const onWorkspaceSettingClick = useCallback( + (workspace: AllWorkspace) => { + onSettingClick({ + activeTab: 'workspace', + workspace, + }); + }, + [onSettingClick] + ); const onAccountSettingClick = useCallback(() => { - setCurrentRef({ - workspace: null, - generalKey: null, - isAccount: true, - }); - }, []); + onSettingClick({ activeTab: 'account' }); + }, [onSettingClick]); return (
- {currentRef.workspace ? ( - + {activeTab === 'workspace' && workspace ? ( + ) : null} - {currentRef.generalKey ? ( - + {generalSettingList.find(v => v.key === activeTab) ? ( + ) : null} - {currentRef.isAccount ? : null} + {activeTab === 'account' ? : null}
diff --git a/apps/web/src/components/affine/setting-modal/setting-sidebar/index.tsx b/apps/web/src/components/affine/setting-modal/setting-sidebar/index.tsx index d8454340b0..81a32d5912 100644 --- a/apps/web/src/components/affine/setting-modal/setting-sidebar/index.tsx +++ b/apps/web/src/components/affine/setting-modal/setting-sidebar/index.tsx @@ -1,18 +1,14 @@ import { UserAvatar } from '@affine/component/user-avatar'; import { WorkspaceAvatar } from '@affine/component/workspace-avatar'; -import type { - AffineCloudWorkspace, - LocalWorkspace, -} from '@affine/env/workspace'; import { useAFFiNEI18N } from '@affine/i18n/hooks'; import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-block-suite-workspace-name'; import clsx from 'clsx'; +import type { AllWorkspace } from '../../../../shared'; import type { GeneralSettingKeys, GeneralSettingList, } from '../general-setting'; -import type { Workspace } from '../type'; import { accountButton, settingSlideBar, @@ -34,13 +30,11 @@ export const SettingSidebar = ({ }: { generalSettingList: GeneralSettingList; onGeneralSettingClick: (key: GeneralSettingKeys) => void; - currentWorkspace: Workspace; - workspaceList: Workspace[]; - onWorkspaceSettingClick: ( - workspace: AffineCloudWorkspace | LocalWorkspace - ) => void; + currentWorkspace: AllWorkspace; + workspaceList: AllWorkspace[]; + onWorkspaceSettingClick: (workspace: AllWorkspace) => void; - selectedWorkspace: Workspace | null; + selectedWorkspace: AllWorkspace | null; selectedGeneralKey: string | null; onAccountSettingClick: () => void; }) => { @@ -118,7 +112,7 @@ const WorkspaceListItem = ({ isCurrent, isActive, }: { - workspace: AffineCloudWorkspace | LocalWorkspace; + workspace: AllWorkspace; onClick: () => void; isCurrent: boolean; isActive: boolean; diff --git a/apps/web/src/components/affine/setting-modal/setting-sidebar/style.css.ts b/apps/web/src/components/affine/setting-modal/setting-sidebar/style.css.ts index 2daac22668..a0623d1f04 100644 --- a/apps/web/src/components/affine/setting-modal/setting-sidebar/style.css.ts +++ b/apps/web/src/components/affine/setting-modal/setting-sidebar/style.css.ts @@ -34,6 +34,7 @@ export const sidebarItemsWrapper = style({ selectors: { '&.scroll': { flexGrow: 1, + overflowY: 'auto', }, }, }); diff --git a/apps/web/src/components/affine/setting-modal/type.ts b/apps/web/src/components/affine/setting-modal/type.ts deleted file mode 100644 index 9756368544..0000000000 --- a/apps/web/src/components/affine/setting-modal/type.ts +++ /dev/null @@ -1,6 +0,0 @@ -import type { - AffineCloudWorkspace, - LocalWorkspace, -} from '@affine/env/workspace'; - -export type Workspace = AffineCloudWorkspace | LocalWorkspace; diff --git a/apps/web/src/components/affine/setting-modal/workspace-setting/index.tsx b/apps/web/src/components/affine/setting-modal/workspace-setting/index.tsx index bfc13e354c..5d6b29c981 100644 --- a/apps/web/src/components/affine/setting-modal/workspace-setting/index.tsx +++ b/apps/web/src/components/affine/setting-modal/workspace-setting/index.tsx @@ -3,9 +3,13 @@ import { Suspense, useCallback } from 'react'; import { getUIAdapter } from '../../../../adapters/workspace'; import { useOnTransformWorkspace } from '../../../../hooks/root/use-on-transform-workspace'; import { useAppHelper } from '../../../../hooks/use-workspaces'; -import type { Workspace } from '../type'; +import type { AllWorkspace } from '../../../../shared'; -export const WorkSpaceSetting = ({ workspace }: { workspace: Workspace }) => { +export const WorkSpaceSetting = ({ + workspace, +}: { + workspace: AllWorkspace; +}) => { const helper = useAppHelper(); const { NewSettingsDetail } = getUIAdapter(workspace.flavour); diff --git a/apps/web/src/components/pure/help-island/index.tsx b/apps/web/src/components/pure/help-island/index.tsx index ac040766d8..461803c385 100644 --- a/apps/web/src/components/pure/help-island/index.tsx +++ b/apps/web/src/components/pure/help-island/index.tsx @@ -2,9 +2,9 @@ import { MuiFade, Tooltip } from '@affine/component'; import { useAFFiNEI18N } from '@affine/i18n/hooks'; import { CloseIcon, NewIcon, UserGuideIcon } from '@blocksuite/icons'; import { useAtom } from 'jotai'; -import { lazy, Suspense, useState } from 'react'; +import { useCallback, useState } from 'react'; -import { openOnboardingModalAtom } from '../../../atoms'; +import { openOnboardingModalAtom, openSettingModalAtom } from '../../../atoms'; import { useCurrentMode } from '../../../hooks/current/use-current-mode'; import { ShortcutsModal } from '../shortcuts-modal'; import { ContactIcon, HelpIcon, KeyboardIcon } from './icons'; @@ -14,11 +14,7 @@ import { StyledIsland, StyledTriggerWrapper, } from './style'; -const ContactModal = lazy(() => - import('@affine/component/contact-modal').then(({ ContactModal }) => ({ - default: ContactModal, - })) -); + const DEFAULT_SHOW_LIST: IslandItemNames[] = [ 'whatNew', 'contact', @@ -33,6 +29,7 @@ export const HelpIsland = ({ }) => { const mode = useCurrentMode(); const [, setOpenOnboarding] = useAtom(openOnboardingModalAtom); + const [, setOpenSettingModalAtom] = useAtom(openSettingModalAtom); const [spread, setShowSpread] = useState(false); // const { triggerShortcutsModal, triggerContactModal } = useModal(); // const blockHub = useGlobalState(store => store.blockHub); @@ -52,8 +49,18 @@ export const HelpIsland = ({ // useEffect(() => { // spread && blockHub?.toggleMenu(false); // }, [blockHub, spread]); - const [open, setOpen] = useState(false); + const [openShortCut, setOpenShortCut] = useState(false); + + const openAbout = useCallback(() => { + setShowSpread(false); + + setOpenSettingModalAtom({ + open: true, + activeTab: 'about', + }); + }, [setOpenSettingModalAtom]); + return ( <> { - setShowSpread(false); - setOpen(true); - }} + onClick={openAbout} > @@ -136,13 +140,6 @@ export const HelpIsland = ({ - - setOpen(false)} - logoSrc="/imgs/affine-text-logo.png" - /> - setOpenShortCut(false)} diff --git a/apps/web/src/components/pure/workspace-title/index.tsx b/apps/web/src/components/pure/workspace-title/index.tsx index ecd573801b..7b2346fe1a 100644 --- a/apps/web/src/components/pure/workspace-title/index.tsx +++ b/apps/web/src/components/pure/workspace-title/index.tsx @@ -54,6 +54,7 @@ export const WorkspaceModeFilterTab = ({ ...props }: WorkspaceTitleProps) => {
diff --git a/apps/web/src/layouts/workspace-layout.tsx b/apps/web/src/layouts/workspace-layout.tsx index 5a204baabd..45c4c1ecd1 100644 --- a/apps/web/src/layouts/workspace-layout.tsx +++ b/apps/web/src/layouts/workspace-layout.tsx @@ -38,6 +38,7 @@ import type { FC, PropsWithChildren, ReactElement } from 'react'; import { lazy, Suspense, useCallback, useEffect, useMemo } from 'react'; import { WorkspaceAdapters } from '../adapters/workspace'; +import type { SettingAtom } from '../atoms'; import { openQuickSearchModalAtom, openSettingModalAtom, @@ -100,14 +101,33 @@ export const QuickSearch: FC = () => { }; export const Setting: FC = () => { const [currentWorkspace] = useCurrentWorkspace(); - const [openSettingModal, setOpenSettingModalAtom] = + const [{ open, workspace, activeTab }, setOpenSettingModalAtom] = useAtom(openSettingModalAtom); const blockSuiteWorkspace = currentWorkspace?.blockSuiteWorkspace; + + const onSettingClick = useCallback( + ({ + activeTab, + workspace, + }: Pick) => { + setOpenSettingModalAtom(prev => ({ ...prev, activeTab, workspace })); + }, + [setOpenSettingModalAtom] + ); + if (!blockSuiteWorkspace) { return null; } return ( - + { + setOpenSettingModalAtom(prev => ({ ...prev, open })); + }} + /> ); }; @@ -336,7 +356,7 @@ export const WorkspaceLayoutInner: FC = ({ children }) => { const [, setOpenSettingModalAtom] = useAtom(openSettingModalAtom); const handleOpenSettingModal = useCallback(() => { - setOpenSettingModalAtom(true); + setOpenSettingModalAtom({ activeTab: 'appearance', open: true }); }, [setOpenSettingModalAtom]); const resizing = useAtomValue(appSidebarResizingAtom); diff --git a/apps/web/src/providers/modal-provider.tsx b/apps/web/src/providers/modal-provider.tsx index 3e359c2f70..6238009d8c 100644 --- a/apps/web/src/providers/modal-provider.tsx +++ b/apps/web/src/providers/modal-provider.tsx @@ -13,10 +13,12 @@ import { openCreateWorkspaceModalAtom, openDisableCloudAlertModalAtom, openOnboardingModalAtom, + openSettingModalAtom, openWorkspacesModalAtom, } from '../atoms'; import { useRouterHelper } from '../hooks/use-router-helper'; import { useWorkspaces } from '../hooks/use-workspaces'; +import type { AllWorkspace } from '../shared'; const WorkspaceListModal = lazy(() => import('../components/pure/workspace-list-modal').then(module => ({ @@ -93,6 +95,20 @@ export const AllWorkspaceModals = (): ReactElement => { rootCurrentWorkspaceIdAtom ); const [transitioning, transition] = useTransition(); + const [, setOpenSettingModalAtom] = useAtom(openSettingModalAtom); + + const handleOpenSettingModal = useCallback( + (workspace: AllWorkspace) => { + setOpenWorkspacesModal(false); + + setOpenSettingModalAtom({ + open: true, + activeTab: 'workspace', + workspace, + }); + }, + [setOpenSettingModalAtom, setOpenWorkspacesModal] + ); return ( <> @@ -129,18 +145,7 @@ export const AllWorkspaceModals = (): ReactElement => { }, [jumpToSubPath, setCurrentWorkspaceId, setOpenWorkspacesModal] )} - onClickWorkspaceSetting={useCallback( - workspace => { - setOpenWorkspacesModal(false); - setCurrentWorkspaceId(workspace.id); - jumpToSubPath(workspace.id, WorkspaceSubPath.SETTING).catch( - error => { - console.error(error); - } - ); - }, - [jumpToSubPath, setCurrentWorkspaceId, setOpenWorkspacesModal] - )} + onClickWorkspaceSetting={handleOpenSettingModal} onNewWorkspace={useCallback(() => { setOpenCreateWorkspaceModal('new'); }, [setOpenCreateWorkspaceModal])} diff --git a/packages/component/src/components/contact-modal/index.tsx b/packages/component/src/components/contact-modal/index.tsx deleted file mode 100644 index 9aae79eb91..0000000000 --- a/packages/component/src/components/contact-modal/index.tsx +++ /dev/null @@ -1,138 +0,0 @@ -import { useAFFiNEI18N } from '@affine/i18n/hooks'; - -import { FlexWrapper, Modal, ModalCloseButton, ModalWrapper } from '../..'; -import { - DiscordIcon, - DocIcon, - GithubIcon, - LinkIcon, - LogoIcon, - RedditIcon, - TelegramIcon, - TwitterIcon, -} from './icons'; -import { - StyledBigLink, - StyledLogo, - StyledModalFooter, - StyledModalHeader, - StyledPrivacyContainer, - StyledSmallLink, - StyledSubTitle, -} from './style'; -export const relatedLinks = [ - { - icon: , - title: 'GitHub', - link: 'https://github.com/toeverything/AFFiNE', - }, - { - icon: , - title: 'Reddit', - link: 'https://www.reddit.com/r/Affine/', - }, - { - icon: , - title: 'Twitter', - link: 'https://twitter.com/AffineOfficial', - }, - { - icon: , - title: 'Telegram', - link: 'https://t.me/affineworkos', - }, - { - icon: , - title: 'Discord', - link: 'https://discord.gg/Arn7TqJBvG', - }, -]; - -export type ContactModalProps = { - open: boolean; - onClose: () => void; - logoSrc: string; -}; - -export const ContactModal = ({ - open, - onClose, - logoSrc, -}: ContactModalProps): JSX.Element => { - const t = useAFFiNEI18N(); - const topLinkList = [ - { - icon: , - title: t['Official Website'](), - subTitle: 'AFFiNE.pro', - link: 'https://affine.pro', - }, - { - icon: , - title: t['Check Our Docs'](), - subTitle: 'Open Source', - link: 'https://community.affine.pro', - }, - ]; - const date = new Date(); - const year = date.getFullYear(); - return ( - - - - - - { - onClose(); - }} - /> - - - - {topLinkList.map(({ icon, title, subTitle, link }) => { - return ( - - {icon} -

{title}

-

- {subTitle} - -

- - ); - })} - - - {t['Get in touch! Join our communities']()} - - - {relatedLinks.map(({ icon, title, link }) => { - return ( - - {icon} -

{title}

- - ); - })} - - - -

Copyright © {year} Toeverything

- - - Terms - - - Privacy - - - - - - ); -}; diff --git a/packages/component/src/components/contact-modal/style.ts b/packages/component/src/components/contact-modal/style.ts deleted file mode 100644 index 3a21f226d5..0000000000 --- a/packages/component/src/components/contact-modal/style.ts +++ /dev/null @@ -1,144 +0,0 @@ -import { absoluteCenter, displayFlex, styled } from '../..'; - -export const StyledBigLink = styled('a')(() => { - return { - width: '268px', - height: '76px', - paddingLeft: '96px', - fontSize: '24px', - lineHeight: '36px', - color: 'var(--affine-text-primary-color)', - borderRadius: '10px', - flexDirection: 'column', - ...displayFlex('center'), - position: 'relative', - transition: 'background .15s', - letterSpacing: '1px', - - ':visited': { - color: 'var(--affine-text-primary-color)', - }, - ':hover': { - background: 'rgba(68, 97, 242, 0.1)', - }, - ':not(:last-of-type)': { - marginRight: '48px', - }, - svg: { - width: '48px', - height: '48px', - marginRight: '24px', - color: 'var(--affine-primary-color)', - ...absoluteCenter({ vertical: true, position: { left: '26px' } }), - }, - p: { - width: '100%', - height: '24px', - lineHeight: '24px', - - ...displayFlex('flex-start', 'center'), - ':first-of-type': { - marginBottom: '4px', - fontSize: '18px', - fontWeight: '600', - }, - ':last-of-type': { - fontSize: '16px', - color: 'var(--affine-primary-color)', - fontWeight: '500', - }, - svg: { - width: '20px', - height: '20px', - position: 'static', - transform: 'translate(0,0)', - marginLeft: '4px', - }, - }, - }; -}); -export const StyledSmallLink = styled('a')(() => { - return { - width: '124px', - height: '76px', - fontSize: '16px', - fontWeight: '500', - borderRadius: '5px', - color: 'var(--affine-text-primary-color)', - transition: 'background .15s, color .15s', - - ...displayFlex('center', 'center'), - flexWrap: 'wrap', - ':visited': { - color: 'var(--affine-text-primary-color)', - }, - ':hover': { - color: 'var(--affine-primary-color)', - background: 'var(--affine-hover-color)', - }, - svg: { - width: '22px', - color: 'var(--affine-primary-color)', - }, - p: { - width: '100%', - textAlign: 'center', - }, - }; -}); -export const StyledSubTitle = styled('div')(() => { - return { - fontSize: '18px', - fontWeight: '600', - color: 'var(--affine-text-primary-color)', - marginTop: '52px', - marginBottom: '8px', - textAlign: 'center', - }; -}); - -export const StyledLogo = styled('img')({ - height: '18px', - width: 'auto', - marginTop: '24px', -}); - -export const StyledModalHeader = styled('div')(() => { - return { - height: '72px', - padding: '0 40px', - marginBottom: '24px', - }; -}); - -export const StyledModalFooter = styled('div')(() => { - return { - fontSize: '14px', - lineHeight: '20px', - textAlign: 'center', - color: 'var(--affine-text-primary-color)', - marginTop: '40px', - }; -}); - -export const StyledPrivacyContainer = styled('div')(() => { - return { - marginTop: '4px', - position: 'relative', - a: { - height: '16px', - lineHeight: '16px', - color: 'var(--affine-icon-color)', - padding: '0 8px', - ':visited': { - color: 'var(--affine-icon-color)', - }, - ':first-of-type': { - borderRight: '1px solid var(--affine-border-color)', - }, - ':hover': { - color: 'var(--affine-primary-color)', - }, - }, - }; -}); diff --git a/packages/component/src/components/setting-components/modal.tsx b/packages/component/src/components/setting-components/modal.tsx index 0290c7c9f5..d8045f4466 100644 --- a/packages/component/src/components/setting-components/modal.tsx +++ b/packages/component/src/components/setting-components/modal.tsx @@ -31,7 +31,8 @@ export const SettingModal: FC> = ({ maxWidth: '70vw', overflow: 'hidden', display: 'flex', - backgroundColor: 'var(--affine-white)', + backgroundColor: 'var(--affine-background-overlay-panel-color)', + boxShadow: 'var(--affine-popover-shadow)', }} > diff --git a/packages/component/src/ui/button/radio.tsx b/packages/component/src/ui/button/radio.tsx index 7debf2c2be..080f2310f7 100644 --- a/packages/component/src/ui/button/radio.tsx +++ b/packages/component/src/ui/button/radio.tsx @@ -3,33 +3,45 @@ import type { RadioGroupProps, } from '@radix-ui/react-radio-group'; import * as RadioGroup from '@radix-ui/react-radio-group'; -import { forwardRef } from 'react'; +import clsx from 'clsx'; +import { type CSSProperties, forwardRef } from 'react'; import * as styles from './styles.css'; -export const RadioButton = forwardRef( - ({ children, ...props }, ref) => { - return ( - - {children} - - {children} - - - ); - } -); +export const RadioButton = forwardRef< + HTMLButtonElement, + RadioGroupItemProps & { bold?: boolean } +>(({ children, bold, className, ...props }, ref) => { + return ( + + + {children} + + + {children} + + + ); +}); RadioButton.displayName = 'RadioButton'; -export const RadioButtonGroup = forwardRef( - ({ ...props }, ref) => { - return ( - - ); - } -); +export const RadioButtonGroup = forwardRef< + HTMLDivElement, + RadioGroupProps & { width?: CSSProperties['width'] } +>(({ className, style, width, ...props }, ref) => { + return ( + + ); +}); RadioButtonGroup.displayName = 'RadioButtonGroup'; diff --git a/packages/component/src/ui/button/styles.css.ts b/packages/component/src/ui/button/styles.css.ts index 711a4db41f..ee8e2743db 100644 --- a/packages/component/src/ui/button/styles.css.ts +++ b/packages/component/src/ui/button/styles.css.ts @@ -54,11 +54,13 @@ export const dropdownIcon = style({ }); export const radioButton = style({ + flexGrow: 1, +}); +export const radioButtonContent = style({ fontSize: 'var(--affine-font-xs)', display: 'flex', justifyContent: 'center', alignItems: 'center', - padding: '0 30px', height: '24px', borderRadius: '8px', filter: 'drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.1))', @@ -71,11 +73,14 @@ export const radioButton = style({ '&[data-state="checked"]': { background: 'var(--affine-white)', }, + '&.bold': { + fontWeight: 600, + }, }, }); export const radioUncheckedButton = style([ - radioButton, + radioButtonContent, { selectors: { '[data-state="checked"] > &': { @@ -87,7 +92,8 @@ export const radioUncheckedButton = style([ export const radioButtonGroup = style({ display: 'inline-flex', - alignItems: 'flex-start', + justifyContent: 'space-between', + alignItems: 'center', background: 'var(--affine-hover-color)', borderRadius: '10px', padding: '2px', diff --git a/packages/component/src/ui/button/utils.ts b/packages/component/src/ui/button/utils.ts index 7f7f4de3b4..7a84d0573e 100644 --- a/packages/component/src/ui/button/utils.ts +++ b/packages/component/src/ui/button/utils.ts @@ -7,21 +7,21 @@ import { SIZE_DEFAULT, SIZE_MIDDLE, SIZE_SMALL } from './interface'; export const SIZE_CONFIG = { [SIZE_SMALL]: { iconSize: 16, - fontSize: 16, + fontSize: 'var(--affine-font-xs)', borderRadius: 4, - height: 26, + height: 28, padding: 6, }, [SIZE_MIDDLE]: { iconSize: 20, - fontSize: 16, + fontSize: 'var(--affine-font-sm)', borderRadius: 4, height: 32, padding: 12, }, [SIZE_DEFAULT]: { iconSize: 24, - fontSize: 16, + fontSize: 'var(--affine-font-base)', height: 38, padding: 24, borderRadius: 4, diff --git a/packages/component/src/ui/menu/styles.ts b/packages/component/src/ui/menu/styles.ts index 92e8417ff5..5dcff5aa1b 100644 --- a/packages/component/src/ui/menu/styles.ts +++ b/packages/component/src/ui/menu/styles.ts @@ -105,12 +105,11 @@ export const StyledMenuItem = styled('button')<{ export const StyledButton = styled(Button)(() => { return { width: '100%', - height: '32px', + // height: '32px', borderRadius: '8px', backgroundColor: 'transparent', ...displayFlex('space-between', 'center'), border: `1px solid var(--affine-border-color)`, padding: '0 10px', - fontSize: 'var(--affine-font-base)', }; }); diff --git a/tests/parallels/contact-us.spec.ts b/tests/parallels/contact-us.spec.ts index 9a0366f3f8..ec072bfc1a 100644 --- a/tests/parallels/contact-us.spec.ts +++ b/tests/parallels/contact-us.spec.ts @@ -14,6 +14,7 @@ test('Click right-bottom corner contact icon', async ({ page }) => { expect(await rightBottomContactUs.isVisible()).toEqual(true); await rightBottomContactUs.click(); - const contactUsModal = page.locator('[data-testid=contact-us-modal-content]'); - await expect(contactUsModal).toContainText('Check Our Docs'); + + const title = await page.getByTestId('about-title'); + await expect(title).toBeVisible(); });