diff --git a/apps/web/src/components/contact-modal/Icons.tsx b/apps/web/src/components/contact-modal/Icons.tsx index 76079a826e..563bb4abef 100644 --- a/apps/web/src/components/contact-modal/Icons.tsx +++ b/apps/web/src/components/contact-modal/Icons.tsx @@ -95,13 +95,13 @@ export const DiscordIcon = () => { export const TelegramIcon = () => { return ( - + ); }; @@ -109,13 +109,14 @@ export const TelegramIcon = () => { export const RedditIcon = () => { return ( - + + ); }; @@ -123,16 +124,16 @@ export const RedditIcon = () => { export const LinkIcon = () => { return ( ); diff --git a/apps/web/src/components/contact-modal/affine-text-logo.png b/apps/web/src/components/contact-modal/affine-text-logo.png index a136ab17fa..ec692b647f 100644 Binary files a/apps/web/src/components/contact-modal/affine-text-logo.png and b/apps/web/src/components/contact-modal/affine-text-logo.png differ diff --git a/apps/web/src/components/contact-modal/bg.png b/apps/web/src/components/contact-modal/bg.png deleted file mode 100644 index 737c8c17c0..0000000000 Binary files a/apps/web/src/components/contact-modal/bg.png and /dev/null differ diff --git a/apps/web/src/components/contact-modal/index.tsx b/apps/web/src/components/contact-modal/index.tsx index 759df8a212..fd3ee9c9c7 100644 --- a/apps/web/src/components/contact-modal/index.tsx +++ b/apps/web/src/components/contact-modal/index.tsx @@ -1,8 +1,11 @@ -import { Modal, ModalCloseButton, ModalWrapper } from '@affine/component'; +import { + FlexWrapper, + Modal, + ModalCloseButton, + ModalWrapper, +} from '@affine/component'; import { useTranslation } from '@affine/i18n'; -import bg from '@/components/contact-modal/bg.png'; - import logo from './affine-text-logo.png'; import { DiscordIcon, @@ -16,13 +19,10 @@ import { } from './Icons'; import { StyledBigLink, - StyledContent, - StyledLeftContainer, StyledLogo, StyledModalFooter, StyledModalHeader, - StyledModalHeaderLeft, - StyledRightContainer, + StyledPrivacyContainer, StyledSmallLink, StyledSubTitle, } from './style'; @@ -64,7 +64,7 @@ export const ContactModal = ({ onClose, }: TransitionsModalProps): JSX.Element => { const { t } = useTranslation(); - const rightLinkList = [ + const topLinkList = [ { icon: , title: t('Official Website'), @@ -73,25 +73,19 @@ export const ContactModal = ({ }, { icon: , - title: t('AFFiNE Community'), - subTitle: 'community.affine.pro', - link: 'https://community.affine.pro', + title: t('Check Our Docs'), + subTitle: 'Open Source', + link: 'https://github.com/toeverything/AFFiNE', }, ]; const date = new Date(); const year = date.getFullYear(); return ( - + - - - Alpha - + + { onClose(); @@ -99,45 +93,40 @@ export const ContactModal = ({ /> - - - {rightLinkList.map(({ icon, title, subTitle, link }) => { - return ( - - {icon} -

{title}

-

- {subTitle} - -

- - ); - })} - - - {t('Get in touch!')} - {linkList.map(({ icon, title, link }) => { - return ( - - {icon} - {title} - - ); - })} - - + + {topLinkList.map(({ icon, title, subTitle, link }) => { + return ( + + {icon} +

{title}

+

+ {subTitle} + +

+ + ); + })} + + + {t('Get in touch! Join our communities.')} + + + {linkList.map(({ icon, title, link }) => { + return ( + + {icon} +

{title}

+ + ); + })} + -

- - {t('How is AFFiNE Alpha different?')} - -

Copyright © {year} Toeverything

+ + Terms + Privacy + diff --git a/apps/web/src/components/contact-modal/style.ts b/apps/web/src/components/contact-modal/style.ts index 1ba3b3b885..3af83cf7e6 100644 --- a/apps/web/src/components/contact-modal/style.ts +++ b/apps/web/src/components/contact-modal/style.ts @@ -2,73 +2,73 @@ import { absoluteCenter, displayFlex, styled } from '@affine/component'; export const StyledBigLink = styled('a')(({ theme }) => { return { - width: '334px', - height: '100px', - marginBottom: '48px', - paddingLeft: '90px', + width: '268px', + height: '76px', + paddingLeft: '96px', fontSize: '24px', lineHeight: '36px', - fontWeight: '600', color: theme.colors.textColor, borderRadius: '10px', flexDirection: 'column', ...displayFlex('center'), position: 'relative', transition: 'background .15s', + letterSpacing: '1px', + ':visited': { color: theme.colors.textColor, }, ':hover': { background: 'rgba(68, 97, 242, 0.1)', }, - ':last-of-type': { - marginBottom: 0, + ':not(:last-of-type)': { + marginRight: '48px', }, svg: { - width: '50px', - height: '50px', - marginRight: '40px', + width: '48px', + height: '48px', + marginRight: '24px', color: theme.colors.primaryColor, - ...absoluteCenter({ vertical: true, position: { left: '20px' } }), + ...absoluteCenter({ vertical: true, position: { left: '26px' } }), }, p: { width: '100%', - height: '30px', - lineHeight: '30px', + height: '24px', + lineHeight: '24px', + ...displayFlex('flex-start', 'center'), - ':not(:last-of-type)': { - marginBottom: '4px', - }, ':first-of-type': { - fontSize: '22px', + marginBottom: '4px', + fontSize: '18px', + fontWeight: '600', }, ':last-of-type': { - fontSize: '20px', + fontSize: '16px', color: theme.colors.primaryColor, + fontWeight: '500', }, svg: { - width: '15px', - height: '15px', + width: '20px', + height: '20px', position: 'static', transform: 'translate(0,0)', - marginLeft: '5px', + marginLeft: '4px', }, }, }; }); export const StyledSmallLink = styled('a')(({ theme }) => { return { - width: '214px', - height: '37px', - display: 'flex', - alignItems: 'center', - fontSize: '18px', + width: '124px', + height: '76px', + fontSize: '16px', fontWeight: '500', - paddingLeft: '24px', borderRadius: '5px', color: theme.colors.textColor, transition: 'background .15s, color .15s', + ...displayFlex('center', 'center'), + flexWrap: 'wrap', ':visited': { color: theme.colors.textColor, }, @@ -78,71 +78,36 @@ export const StyledSmallLink = styled('a')(({ theme }) => { }, svg: { width: '22px', - marginRight: '30px', color: theme.colors.primaryColor, }, + p: { + width: '100%', + textAlign: 'center', + }, }; }); export const StyledSubTitle = styled('div')(({ theme }) => { return { - width: '190px', fontSize: '18px', fontWeight: '600', color: theme.colors.textColor, - marginBottom: '24px', + marginTop: '48px', + marginBottom: '8px', + textAlign: 'center', }; }); -export const StyledLeftContainer = styled('div')({ - width: '320px', - flexDirection: 'column', - ...displayFlex('space-between', 'center'), -}); -export const StyledRightContainer = styled('div')({ - width: '214px', - flexShrink: '0', - flexDirection: 'column', - ...displayFlex('center', 'flex-end'), -}); - -export const StyledContent = styled('div')({ - height: '276px', - width: '100%', - padding: '0 140px', - ...displayFlex('space-between', 'center'), - color: '#3A4C5C', - marginTop: '58px', - letterSpacing: '0.06em', -}); - export const StyledLogo = styled('img')({ height: '18px', width: 'auto', + marginTop: '24px', }); export const StyledModalHeader = styled('div')(() => { return { - height: '20px', - marginTop: '36px', - padding: '0 48px', - ...displayFlex('space-between', 'center'), - }; -}); - -export const StyledModalHeaderLeft = styled('div')(({ theme }) => { - return { - color: theme.colors.primaryColor, - ...displayFlex('flex-end', 'flex-end'), - span: { - height: '20px', - border: `1px solid ${theme.colors.primaryColor}`, - borderRadius: '10px', - padding: '0 8px', - lineHeight: '26px', - fontSize: '14px', - marginLeft: '12px', - ...displayFlex('center', 'center'), - }, + height: '72px', + padding: '0 40px', + marginBottom: '24px', }; }); @@ -152,16 +117,27 @@ export const StyledModalFooter = styled('div')(({ theme }) => { lineHeight: '20px', textAlign: 'center', color: theme.colors.textColor, - marginTop: '40px', - 'p:first-of-type': { - color: theme.colors.primaryColor, - letterSpacing: '0.06em', - marginBottom: '25px', - a: { - ':visited': { - color: theme.colors.linkColor, - }, + }; +}); + +export const StyledPrivacyContainer = styled.div(({ theme }) => { + return { + marginTop: '4px', + position: 'relative', + a: { + height: '16px', + lineHeight: '16px', + color: theme.colors.iconColor, + padding: '0 8px', + ':visited': { + color: theme.colors.iconColor, + }, + ':first-of-type': { + borderRight: `1px solid ${theme.colors.borderColor}`, + }, + ':hover': { + color: theme.colors.primaryColor, }, }, }; diff --git a/apps/web/src/components/message-center-handler/index.tsx b/apps/web/src/components/message-center-handler/index.tsx index 46d935b53e..f747d9ebf0 100644 --- a/apps/web/src/components/message-center-handler/index.tsx +++ b/apps/web/src/components/message-center-handler/index.tsx @@ -42,7 +42,7 @@ export function MessageCenterHandler({ children }: { children?: ReactNode }) { } if (message.code === MessageCenter.messageCode.refreshTokenError) { - toast('Automatic login fail, please login self later'); + toast('Session expired, please log in again'); clearAuth(dataCenter, 'affine'); await router.push('/'); router.reload(); diff --git a/packages/i18n/src/resources/en.json b/packages/i18n/src/resources/en.json index a8c03841c5..f362285c7f 100644 --- a/packages/i18n/src/resources/en.json +++ b/packages/i18n/src/resources/en.json @@ -50,8 +50,8 @@ "Keyboard Shortcuts": "Keyboard Shortcuts", "Contact Us": "Contact Us", "Official Website": "Official Website", - "Get in touch!": "Get in touch!", - "AFFiNE Community": "AFFiNE Community", + "Check Our Docs": "Check Our Docs", + "Get in touch! Join our communities.": "Get in touch! Join our communities.", "How is AFFiNE Alpha different?": "How is AFFiNE Alpha different?", "Shortcuts": "Shortcuts", "Undo": "Undo", diff --git a/tests/contact-us.spec.ts b/tests/contact-us.spec.ts index d31346aa13..9ba3e2edf1 100644 --- a/tests/contact-us.spec.ts +++ b/tests/contact-us.spec.ts @@ -17,6 +17,6 @@ test.describe('Open contact us', () => { const contactUsModal = page.locator( '[data-testid=contact-us-modal-content]' ); - await expect(contactUsModal).toContainText('AFFiNE Community'); + await expect(contactUsModal).toContainText('Check Our Docs'); }); });