Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-13 21:05:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: modify contact modal (#1203)

Browse Source
This commit is contained in:
Qi
2023-02-27 16:14:13 +08:00
committed by GitHub
parent f2ce1ae662
commit 1e4d475327
8 changed files with 120 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
apps/web/src/components/contact-modal/Icons.tsx
View File

@@ -95,13 +95,13 @@ export const DiscordIcon = () => {
export const TelegramIcon = () => {
return (
<svg
width="22"
height="22"
viewBox="0 0 22 22"
width="20"
height="20"
viewBox="0 0 20 20"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M20.1081 4.59007L17.0651 19.43C16.8356 20.4774 16.2369 20.7381 15.3861 20.2447L10.7496 16.7115L8.51231 18.9366C8.26473 19.1926 8.05766 19.4068 7.5805 19.4068L7.91361 14.5237L16.507 6.49394C16.8806 6.14947 16.4259 5.95862 15.9263 6.30309L5.30275 13.2203L0.729238 11.7401C-0.265591 11.4189 -0.283597 10.7113 0.936307 10.2179L18.8252 3.09117C19.6535 2.76998 20.3782 3.28203 20.1081 4.59007V4.59007Z" />
<path d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM14.64 6.8C14.49 8.38 13.84 12.22 13.51 13.99C13.37 14.74 13.09 14.99 12.83 15.02C12.25 15.07 11.81 14.64 11.25 14.27C10.37 13.69 9.87 13.33 9.02 12.77C8.03 12.12 8.67 11.76 9.24 11.18C9.39 11.03 11.95 8.7 12 8.49C12.0069 8.45819 12.006 8.42517 11.9973 8.3938C11.9886 8.36244 11.9724 8.33367 11.95 8.31C11.89 8.26 11.81 8.28 11.74 8.29C11.65 8.31 10.25 9.24 7.52 11.08C7.12 11.35 6.76 11.49 6.44 11.48C6.08 11.47 5.4 11.28 4.89 11.11C4.26 10.91 3.77 10.8 3.81 10.45C3.83 10.27 4.08 10.09 4.55 9.9C7.47 8.63 9.41 7.79 10.38 7.39C13.16 6.23 13.73 6.03 14.11 6.03C14.19 6.03 14.38 6.05 14.5 6.15C14.6 6.23 14.63 6.34 14.64 6.42C14.63 6.48 14.65 6.66 14.64 6.8Z" />
</svg>
);
};
@@ -109,13 +109,14 @@ export const TelegramIcon = () => {
export const RedditIcon = () => {
return (
<svg
width="22"
height="22"
viewBox="0 0 22 22"
width="24"
height="24"
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M21.9987 11.3855C21.9987 11.8602 21.878 12.2919 21.6365 12.6807C21.3951 13.0694 21.0698 13.3661 20.6606 13.5707C20.7588 13.9471 20.8079 14.34 20.8079 14.7492C20.8079 16.0177 20.3721 17.1921 19.5005 18.2724C18.6289 19.3527 17.4402 20.2059 15.9343 20.832C14.4285 21.458 12.7916 21.7711 11.0239 21.7711C9.25614 21.7711 7.62138 21.458 6.11961 20.832C4.61784 20.2059 3.43116 19.3527 2.55956 18.2724C1.68796 17.1921 1.25216 16.0177 1.25216 14.7492C1.25216 14.3645 1.29717 13.9799 1.38719 13.5952C0.969808 13.3906 0.634263 13.0899 0.380558 12.6929C0.126853 12.296 0 11.8602 0 11.3855C0 10.7145 0.237337 10.1395 0.712011 9.66076C1.18669 9.18199 1.76366 8.94261 2.44293 8.94261C3.13858 8.94261 3.73192 9.2004 4.22296 9.716C6.00708 8.47203 8.11447 7.80912 10.5451 7.72728L11.9692 1.33145C11.9937 1.22506 12.0551 1.13913 12.1533 1.07366C12.2515 1.00818 12.3579 0.987724 12.4725 1.01228L17.0023 2.00664C17.1496 1.70383 17.3706 1.46035 17.6652 1.27621C17.9599 1.09207 18.2831 1 18.635 1C19.1425 1 19.5762 1.178 19.9363 1.53401C20.2964 1.89001 20.4765 2.32172 20.4765 2.82913C20.4765 3.33654 20.2964 3.7703 19.9363 4.13039C19.5762 4.49049 19.1425 4.67054 18.635 4.67054C18.1276 4.67054 17.6959 4.49254 17.3399 4.13653C16.9839 3.78053 16.8059 3.34882 16.8059 2.84141L12.7057 1.93298L11.429 7.72728C13.8842 7.80093 16.008 8.45566 17.8003 9.69145C18.275 9.19222 18.8601 8.94261 19.5558 8.94261C20.235 8.94261 20.812 9.18199 21.2867 9.66076C21.7614 10.1395 21.9987 10.7145 21.9987 11.3855ZM5.13139 13.8285C5.13139 14.3359 5.30939 14.7696 5.6654 15.1297C6.0214 15.4898 6.45311 15.6699 6.96052 15.6699C7.46793 15.6699 7.90169 15.4898 8.26178 15.1297C8.62188 14.7696 8.80193 14.3359 8.80193 13.8285C8.80193 13.3211 8.62188 12.8894 8.26178 12.5334C7.90169 12.1773 7.46793 11.9993 6.96052 11.9993C6.4613 11.9993 6.03163 12.1794 5.67154 12.5395C5.31144 12.8996 5.13139 13.3293 5.13139 13.8285ZM15.075 18.1865C15.165 18.0965 15.21 17.9901 15.21 17.8673C15.21 17.7445 15.165 17.6381 15.075 17.5481C14.9932 17.4663 14.8909 17.4254 14.7681 17.4254C14.6453 17.4254 14.5389 17.4663 14.4489 17.5481C14.1134 17.8919 13.6182 18.1456 12.9635 18.3092C12.3088 18.4729 11.6541 18.5548 10.9993 18.5548C10.3446 18.5548 9.6899 18.4729 9.03518 18.3092C8.38045 18.1456 7.88532 17.8919 7.54977 17.5481C7.45975 17.4663 7.35336 17.4254 7.2306 17.4254C7.10783 17.4254 7.00553 17.4663 6.92369 17.5481C6.83367 17.63 6.78866 17.7343 6.78866 17.8612C6.78866 17.988 6.83367 18.0965 6.92369 18.1865C7.27561 18.5384 7.76051 18.8166 8.37841 19.0212C8.9963 19.2258 9.49757 19.3466 9.88222 19.3834C10.2669 19.4202 10.6392 19.4386 10.9993 19.4386C11.3594 19.4386 11.7318 19.4202 12.1165 19.3834C12.5011 19.3466 13.0024 19.2258 13.6203 19.0212C14.2382 18.8166 14.7231 18.5384 15.075 18.1865ZM15.0382 15.6699C15.5456 15.6699 15.9773 15.4898 16.3333 15.1297C16.6893 14.7696 16.8673 14.3359 16.8673 13.8285C16.8673 13.3293 16.6872 12.8996 16.3272 12.5395C15.9671 12.1794 15.5374 11.9993 15.0382 11.9993C14.5308 11.9993 14.097 12.1773 13.7369 12.5334C13.3768 12.8894 13.1968 13.3211 13.1968 13.8285C13.1968 14.3359 13.3768 14.7696 13.7369 15.1297C14.097 15.4898 14.5308 15.6699 15.0382 15.6699Z" />
<path d="M10.75 13.04C10.75 12.47 10.28 12 9.71 12C9.14 12 8.67 12.47 8.67 13.04C8.67 13.3158 8.77957 13.5804 8.97461 13.7754C9.16965 13.9704 9.43418 14.08 9.71 14.08C9.98583 14.08 10.2504 13.9704 10.4454 13.7754C10.6404 13.5804 10.75 13.3158 10.75 13.04ZM14.09 15.41C13.64 15.86 12.68 16.02 12 16.02C11.32 16.02 10.36 15.86 9.91 15.41C9.88567 15.384 9.85626 15.3632 9.82357 15.349C9.79089 15.3348 9.75563 15.3275 9.72 15.3275C9.68437 15.3275 9.64911 15.3348 9.61643 15.349C9.58374 15.3632 9.55432 15.384 9.53 15.41C9.50396 15.4343 9.4832 15.4637 9.469 15.4964C9.45481 15.5291 9.44748 15.5644 9.44748 15.6C9.44748 15.6356 9.45481 15.6709 9.469 15.7036C9.4832 15.7363 9.50396 15.7657 9.53 15.79C10.24 16.5 11.6 16.56 12 16.56C12.4 16.56 13.76 16.5 14.47 15.79C14.496 15.7657 14.5168 15.7363 14.531 15.7036C14.5452 15.6709 14.5525 15.6356 14.5525 15.6C14.5525 15.5644 14.5452 15.5291 14.531 15.4964C14.5168 15.4637 14.496 15.4343 14.47 15.41C14.37 15.31 14.2 15.31 14.09 15.41ZM14.29 12C13.72 12 13.25 12.47 13.25 13.04C13.25 13.61 13.72 14.08 14.29 14.08C14.86 14.08 15.33 13.61 15.33 13.04C15.33 12.47 14.87 12 14.29 12Z" />
<path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM17.8 13.33C17.82 13.47 17.83 13.62 17.83 13.77C17.83 16.01 15.22 17.83 12 17.83C8.78 17.83 6.17 16.01 6.17 13.77C6.17 13.62 6.18 13.47 6.2 13.33C5.69 13.1 5.34 12.59 5.34 12C5.33852 11.7132 5.4218 11.4324 5.57939 11.1929C5.73698 10.9533 5.96185 10.7656 6.22576 10.6534C6.48966 10.5413 6.78083 10.5096 7.06269 10.5623C7.34456 10.6151 7.60454 10.75 7.81 10.95C8.82 10.22 10.22 9.76 11.77 9.71L12.51 6.22C12.52 6.15 12.56 6.09 12.62 6.06C12.68 6.02 12.75 6.01 12.82 6.02L15.24 6.54C15.3221 6.37358 15.4472 6.23215 15.6023 6.13038C15.7575 6.02861 15.9371 5.9702 16.1224 5.96122C16.3077 5.95224 16.4921 5.99301 16.6564 6.07931C16.8207 6.1656 16.9589 6.29428 17.0566 6.45199C17.1544 6.60969 17.2082 6.79069 17.2125 6.9762C17.2167 7.16171 17.1712 7.34498 17.0808 7.507C16.9903 7.66901 16.8582 7.80388 16.698 7.8976C16.5379 7.99132 16.3556 8.04049 16.17 8.04C15.61 8.04 15.16 7.6 15.13 7.05L12.96 6.59L12.3 9.71C13.83 9.76 15.2 10.23 16.2 10.95C16.3533 10.8036 16.5367 10.6925 16.7375 10.6244C16.9382 10.5563 17.1514 10.5329 17.3621 10.5558C17.5728 10.5787 17.776 10.6474 17.9574 10.757C18.1388 10.8667 18.2941 11.0146 18.4123 11.1905C18.5306 11.3664 18.609 11.5661 18.642 11.7754C18.6751 11.9848 18.662 12.1989 18.6037 12.4027C18.5454 12.6064 18.4432 12.795 18.3044 12.9552C18.1656 13.1154 17.9934 13.2433 17.8 13.33Z" />
</svg>
);
};
@@ -123,16 +124,16 @@ export const RedditIcon = () => {
export const LinkIcon = () => {
return (
<svg
width="14"
height="15"
viewBox="0 0 14 15"
width="16"
height="16"
viewBox="0 0 16 16"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M9 2.19999C8.6134 2.19999 8.3 1.88659 8.3 1.49999C8.3 1.11339 8.6134 0.799988 9 0.799988H13C13.0949 0.799988 13.1854 0.818878 13.268 0.853103C13.3499 0.887011 13.4267 0.937153 13.4935 1.00353C13.494 1.00402 13.4945 1.00452 13.495 1.00501C13.4955 1.00551 13.496 1.006 13.4965 1.0065C13.5628 1.07327 13.613 1.15009 13.6469 1.23204C13.6811 1.31457 13.7 1.40507 13.7 1.49999V5.49999C13.7 5.88659 13.3866 6.19999 13 6.19999C12.6134 6.19999 12.3 5.88659 12.3 5.49999V3.18994L6.16164 9.3283C5.88828 9.60166 5.44506 9.60166 5.17169 9.3283C4.89833 9.05493 4.89833 8.61171 5.17169 8.33835L11.3101 2.19999H9ZM2.33334 4.19999C2.16537 4.19999 2.00428 4.26671 1.8855 4.38549C1.76673 4.50426 1.7 4.66535 1.7 4.83332V12.1667C1.7 12.3346 1.76673 12.4957 1.8855 12.6145C2.00428 12.7333 2.16537 12.8 2.33334 12.8H9.66667C9.83464 12.8 9.99573 12.7333 10.1145 12.6145C10.2333 12.4957 10.3 12.3346 10.3 12.1667V8.16665C10.3 7.78006 10.6134 7.46665 11 7.46665C11.3866 7.46665 11.7 7.78006 11.7 8.16665V12.1667C11.7 12.7059 11.4858 13.2231 11.1045 13.6044C10.7231 13.9858 10.2059 14.2 9.66667 14.2H2.33334C1.79406 14.2 1.27688 13.9858 0.895553 13.6044C0.514229 13.2231 0.300003 12.7059 0.300003 12.1667V4.83332C0.300003 4.29405 0.514228 3.77686 0.895553 3.39554C1.27688 3.01421 1.79406 2.79999 2.33334 2.79999H6.33334C6.71994 2.79999 7.03334 3.11339 7.03334 3.49999C7.03334 3.88659 6.71994 4.19999 6.33334 4.19999H2.33334Z"
d="M10.2917 1.33334C10.2917 0.988166 10.5715 0.708344 10.9167 0.708344H14.6667C15.0118 0.708344 15.2917 0.988166 15.2917 1.33334V5.08334C15.2917 5.42852 15.0118 5.70834 14.6667 5.70834C14.3215 5.70834 14.0417 5.42852 14.0417 5.08334V2.84223L8.44194 8.44195C8.19787 8.68603 7.80214 8.68603 7.55806 8.44195C7.31398 8.19787 7.31398 7.80215 7.55806 7.55807L13.1578 1.95834H10.9167C10.5715 1.95834 10.2917 1.67852 10.2917 1.33334ZM3.97464 1.54168L7.58334 1.54168C7.92851 1.54168 8.20834 1.8215 8.20834 2.16668C8.20834 2.51185 7.92851 2.79168 7.58334 2.79168H4C3.52298 2.79168 3.2028 2.79216 2.95623 2.81231C2.71697 2.83186 2.60256 2.86676 2.5271 2.90521C2.33109 3.00508 2.17174 3.16443 2.07187 3.36044C2.03342 3.4359 1.99852 3.55031 1.97897 3.78957C1.95882 4.03614 1.95834 4.35632 1.95834 4.83334V12C1.95834 12.477 1.95882 12.7972 1.97897 13.0438C1.99852 13.283 2.03342 13.3974 2.07187 13.4729C2.17174 13.6689 2.33109 13.8283 2.5271 13.9281C2.60256 13.9666 2.71697 14.0015 2.95623 14.021C3.2028 14.0412 3.52298 14.0417 4 14.0417H11.1667C11.6437 14.0417 11.9639 14.0412 12.2104 14.021C12.4497 14.0015 12.5641 13.9666 12.6396 13.9281C12.8356 13.8283 12.9949 13.6689 13.0948 13.4729C13.1333 13.3974 13.1682 13.283 13.1877 13.0438C13.2079 12.7972 13.2083 12.477 13.2083 12V8.41668C13.2083 8.0715 13.4882 7.79168 13.8333 7.79168C14.1785 7.79168 14.4583 8.0715 14.4583 8.41668V12.0254C14.4583 12.4705 14.4584 12.842 14.4336 13.1456C14.4077 13.4621 14.3518 13.7594 14.2086 14.0404C13.9888 14.4716 13.6383 14.8222 13.2071 15.0419C12.926 15.1851 12.6288 15.241 12.3122 15.2669C12.0087 15.2917 11.6372 15.2917 11.192 15.2917H3.97463C3.5295 15.2917 3.15797 15.2917 2.85444 15.2669C2.53787 15.241 2.24066 15.1851 1.95961 15.0419C1.5284 14.8222 1.17782 14.4716 0.958113 14.0404C0.81491 13.7594 0.758984 13.4621 0.733119 13.1456C0.70832 12.842 0.708327 12.4705 0.708336 12.0254V4.80798C0.708327 4.36285 0.70832 3.99131 0.733119 3.68779C0.758984 3.37121 0.81491 3.074 0.958113 2.79295C1.17782 2.36174 1.5284 2.01116 1.95961 1.79145C2.24066 1.64825 2.53787 1.59232 2.85444 1.56646C3.15797 1.54166 3.52951 1.54167 3.97464 1.54168Z"
/>
</svg>
);

BIN
apps/web/src/components/contact-modal/affine-text-logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
apps/web/src/components/contact-modal/bg.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 299 KiB

101
apps/web/src/components/contact-modal/index.tsx
View File

@@ -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: <LogoIcon />,
title: t('Official Website'),
@@ -73,25 +73,19 @@ export const ContactModal = ({
},
{
icon: <DocIcon />,
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 (
<Modal open={open} onClose={onClose} data-testid="contact-us-modal-content">
<ModalWrapper
width={860}
height={540}
style={{ backgroundImage: `url(${bg.src})` }}
>
<ModalWrapper width={720} height={436} style={{ letterSpacing: '1px' }}>
<StyledModalHeader>
<StyledModalHeaderLeft>
<StyledLogo src={logo.src} alt="" />
<span>Alpha</span>
</StyledModalHeaderLeft>
<StyledLogo src={logo.src} alt="" />
<ModalCloseButton
onClick={() => {
onClose();
@@ -99,45 +93,40 @@ export const ContactModal = ({
/>
</StyledModalHeader>
<StyledContent>
<StyledLeftContainer>
{rightLinkList.map(({ icon, title, subTitle, link }) => {
return (
<StyledBigLink key={title} href={link} target="_blank">
{icon}
<p>{title}</p>
<p>
{subTitle}
<LinkIcon />
</p>
</StyledBigLink>
);
})}
</StyledLeftContainer>
<StyledRightContainer>
<StyledSubTitle>{t('Get in touch!')}</StyledSubTitle>
{linkList.map(({ icon, title, link }) => {
return (
<StyledSmallLink key={title} href={link} target="_blank">
{icon}
{title}
</StyledSmallLink>
);
})}
</StyledRightContainer>
</StyledContent>
<FlexWrapper alignItems="center" justifyContent="center">
{topLinkList.map(({ icon, title, subTitle, link }) => {
return (
<StyledBigLink key={title} href={link} target="_blank">
{icon}
<p>{title}</p>
<p>
{subTitle}
<LinkIcon />
</p>
</StyledBigLink>
);
})}
</FlexWrapper>
<StyledSubTitle>
{t('Get in touch! Join our communities.')}
</StyledSubTitle>
<FlexWrapper justifyContent="center">
{linkList.map(({ icon, title, link }) => {
return (
<StyledSmallLink key={title} href={link} target="_blank">
{icon}
<p>{title}</p>
</StyledSmallLink>
);
})}
</FlexWrapper>
<StyledModalFooter>
<p>
<a
href="https://affine.pro/content/blog/affine-alpha-is-coming/index"
target="_blank"
rel="noreferrer"
>
{t('How is AFFiNE Alpha different?')}
</a>
</p>
<p>Copyright &copy; {year} Toeverything</p>
<StyledPrivacyContainer>
<a href="https://affine.pro/terms">Terms</a>
<a href="https://affine.pro/privacy">Privacy</a>
</StyledPrivacyContainer>
</StyledModalFooter>
</ModalWrapper>
</Modal>

140
apps/web/src/components/contact-modal/style.ts
View File

@@ -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,
},
},
};

2
apps/web/src/components/message-center-handler/index.tsx
View File

@@ -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();