OpenSource/AFFiNE
1
0 Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat: modify invite page & 404 page (#1097)

Browse Source
This commit is contained in:
Qi authored and GitHub committed 2023-02-17 09:44:48 +00:00
1 parent 5e6366ba44
commit 67fe1871da
26 files changed
+925 -500
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/web/src/components/404/index.tsx
+17 -15
View File
@@ -1,26 +1,28 @@
import { Button } from '@affine/component';
import { useTranslation } from '@affine/i18n';
import Image from 'next/image';
import { useRouter } from 'next/router';
import { NotFoundTitle, PageContainer } from './styles';
import ErrorImg from '../../../public/imgs/invite-error.svg';
import { StyledContainer } from './styles';
export const NotfoundPage = () => {
const { t } = useTranslation();
const router = useRouter();
return (
<PageContainer>
<NotFoundTitle data-testid="notFound">
{t('404 - Page Not Found')}
<p>
<Button
onClick={() => {
router.push('/workspace');
}}
>
{t('Back Home')}
</Button>
</p>
</NotFoundTitle>
</PageContainer>
<StyledContainer data-testid="notFound">
<Image alt="404" src={ErrorImg}></Image>
<p>{t('404 - Page Not Found')}</p>
<Button
shape="round"
onClick={() => {
router.push('/workspace');
}}
>
{t('Back Home')}
</Button>
</StyledContainer>
);
};
apps/web/src/components/404/styles.ts
+14 -16
View File
@@ -1,21 +1,19 @@
import { styled } from '@affine/component';
import { displayFlex, styled } from '@affine/component';
export const PageContainer = styled('div')(({ theme }) => {
export const StyledContainer = styled.div(() => {
return {
width: '100%',
height: 'calc(100vh)',
backgroundColor: theme.colors.pageBackground,
};
});
...displayFlex('center', 'center'),
flexDirection: 'column',
height: '100vh',
export const NotFoundTitle = styled('h1')(({ theme }) => {
return {
position: 'relative',
top: 'calc(50% - 100px)',
height: '100px',
fontSize: '60px',
lineHeight: '100px',
color: theme.colors.textColor,
textAlign: 'center',
img: {
width: '360px',
height: '270px',
},
p: {
fontSize: '22px',
fontWeight: 600,
margin: '24px 0',
},
};
});
apps/web/src/components/page-list/Empty.tsx
+15 -9
View File
@@ -4,16 +4,22 @@ import React from 'react';
export const PageListEmpty = (props: { listType?: string }) => {
const { listType } = props;
const { t } = useTranslation();
const getEmptyDescription = () => {
if (listType === 'all') {
return t('emptyAllPages');
}
if (listType === 'favorite') {
return t('emptyFavorite');
}
if (listType === 'trash') {
return t('emptyTrash');
}
};
return (
<div style={{ textAlign: 'center' }}>
<Empty
width={800}
height={300}
sx={{ marginTop: '100px', marginBottom: '30px' }}
/>
{listType === 'all' && <p>{t('emptyAllPages')}</p>}
{listType === 'favorite' && <p>{t('emptyFavorite')}</p>}
{listType === 'trash' && <p>{t('emptyTrash')}</p>}
<div style={{ height: 'calc(100% - 60px)' }}>
<Empty description={getEmptyDescription()} />
</div>
);
};
apps/web/src/components/quick-search/NoResultSVG.tsx
+38 -61
View File
@@ -1,95 +1,72 @@
export const NoResultSVG = () => {
return (
<svg
width="150"
height="150"
viewBox="0 0 154 120"
width="156"
height="100"
viewBox="0 0 156 100"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<mask
id="mask0_7969_10649"
maskUnits="userSpaceOnUse"
x="0"
y="0"
width="154"
height="120"
>
<g clipPath="url(#clip0_10846_21787)">
<path
d="M83.4345 10.7757H81.5042L60.4847 0.480469L14.156 4.12671L0 70.617L78.7159 119.519L146.493 98.7144L154 72.9763L137.27 68.4721L130.192 66.1128L135.34 53.2437L123.114 44.4498L108.315 32.8677L97.5905 10.9902H88.3677L83.4345 10.7757Z"
fill="#D9D9D9"
/>
</mask>
<g mask="url(#mask0_7969_10649)">
<path
d="M123.233 68.7528C122.29 66.239 117.597 67.8949 113.444 64.4631C111.728 63.0303 110.013 57.3422 110.013 57.3422C110.013 57.3422 114.302 60.3965 116.782 58.1487C119.261 55.9009 118.137 49.3891 113.35 51.0707C108.271 52.8724 106.95 50.942 101.15 48.9602C95.3503 46.9783 91.8928 50.616 91.8928 50.616C82.9789 49.5607 77.5224 51.3795 73.3442 53.6874C69.6551 49.3977 62.7916 52.4691 59.377 55.6864C55.4219 59.4098 56.1854 62.447 56.6401 63.4078C51.6384 67.2857 51.4925 71.2237 51.8443 74.1492C52.1343 77.2258 53.3709 80.1368 55.3836 82.4807C57.3963 84.8254 60.0863 86.489 63.0833 87.2414C63.0833 87.2414 62.946 93.6759 64.7305 94.2593C66.515 94.8427 67.21 92.6206 70.7361 90.8276C74.5453 89.8323 78.5862 85.8858 76.4585 83.1061C81.2029 86.0488 88.3581 84.2557 88.9501 76.6201C91.2837 81.15 101.999 80.6009 107.825 78.0872C108.528 83.4836 106.812 88.5883 104.479 90.7761C101.047 93.9676 98.2244 93.7102 96.4657 95.2202C94.7069 96.7302 98.8851 101.354 108.477 95.4004C116.979 90.1155 117.597 81.0471 111.685 73.7117C117.554 75.3332 124.211 71.3524 123.233 68.7528ZM74.1164 69.7051C74.0563 69.8424 72.9496 63.4593 78.6205 60.4994C82.5242 58.4575 87.0369 59.8474 87.5431 62.9617C88.2037 67.0455 76.999 62.1724 74.1164 69.7051Z"
fill="#BFD1FF"
d="M39.4187 37.5349C22.2581 37.5349 7.0595 50.1896 8.29792 65.6334C9.1854 76.6959 25.1286 93.4946 39.4187 93.732C56.5764 94.0171 70.5394 81.1271 70.5394 65.6334C70.5394 50.1397 56.5792 37.5349 39.4187 37.5349Z"
fill="#6166F0"
/>
<path
d="M60.7011 43.79C58.0071 41.954 62.5285 27.0087 67.4873 27.249C73.3213 27.5321 82.2096 40.3583 79.0953 44.9911C77.388 47.5306 65.2052 46.8529 60.7011 43.79Z"
fill="#BFD1FF"
d="M39.4187 47.5859C34.3599 47.5859 30.2447 51.7124 30.2447 56.7849C30.2447 61.8575 34.3599 65.9847 39.4187 65.9847C44.4774 65.9847 48.5926 61.8575 48.5926 56.7849C48.5926 51.7124 44.4774 47.5859 39.4187 47.5859Z"
fill="#FCF1D5"
/>
<path
d="M45.4019 33.2972C44.2093 32.4393 46.2083 25.5758 48.3961 25.653C50.9699 25.7817 54.8992 31.71 53.5437 33.8549C52.763 35.0131 47.3923 34.73 45.4019 33.2972Z"
fill="#BFD1FF"
d="M39.708 61.191C42.1823 61.191 44.1881 59.1796 44.1881 56.6986C44.1881 54.2175 42.1823 52.2062 39.708 52.2062C37.2336 52.2062 35.2278 54.2175 35.2278 56.6986C35.2278 59.1796 37.2336 61.191 39.708 61.191Z"
fill="black"
/>
<path
d="M83.8645 29.2825C82.8778 28.5961 84.5251 23.0539 86.3268 23.1397C88.4459 23.2512 91.6717 28.0042 90.5392 29.7286C89.9215 30.6724 85.4946 30.415 83.8645 29.2825Z"
fill="#BFD1FF"
d="M27.5711 39.8472C27.5424 39.8191 27.5172 39.7868 27.4884 39.7587C27.4632 39.7341 27.5781 39.9048 27.4919 39.7601C27.4219 39.6428 27.3469 39.5304 27.2825 39.4096C27.1767 39.2116 27.0804 39.0086 26.9939 38.8014C27.064 38.9643 26.933 38.6476 26.9148 38.6019C26.554 37.6762 26.2822 36.7153 26.0602 35.7474C25.4858 33.2491 25.254 30.6468 25.5012 28.0908C25.7576 25.4422 26.6416 22.7507 28.5216 20.8086C29.4798 19.8183 30.6601 18.9705 31.9174 18.4072C32.8729 17.9787 33.7786 17.7884 34.7991 17.9015C34.8222 17.9043 34.9364 17.9219 34.8131 17.9029C35.0842 17.9441 35.351 18.0099 35.6103 18.0996C35.6614 18.1171 35.943 18.2309 35.833 18.1824C36.2092 18.3496 36.6589 18.6369 36.8578 18.8061C37.58 19.4214 38.003 20.0058 38.4261 20.8746C39.2267 22.5189 39.4649 24.664 39.1301 26.4768C38.763 28.461 37.7775 30.2717 36.1055 31.3471C35.0758 32.0087 33.6455 31.9448 32.6032 31.3309C32.1374 31.057 31.7654 30.6545 31.6786 30.1116C31.5322 29.1999 31.8649 28.2552 32.3237 27.4826C34.2311 24.2713 38.5886 22.6741 42.1133 23.7881C43.6964 24.2882 45.1631 25.313 46.106 26.6917C47.102 28.1484 47.6918 30.1572 46.5241 31.6842C46.3189 31.9525 46.0681 32.2187 45.7802 32.3985C45.6745 32.4645 45.5512 32.4849 45.4503 32.5453C45.458 32.5404 45.5764 32.454 45.402 32.5425C45.4349 32.5256 45.5568 32.6148 45.4048 32.5214L45.7515 33.1276C45.7473 32.9871 45.7466 32.9702 45.8202 32.8642C45.8825 32.7743 45.755 32.9386 45.8258 32.8494C45.8538 32.8143 45.8853 32.7813 45.9175 32.7504C46.0352 32.6373 46.0128 32.6549 46.1165 32.5882C46.522 32.3262 46.9549 32.1892 47.4312 32.0831C48.5071 31.8429 49.7021 31.8436 50.7605 32.1653C53.2598 32.926 54.494 36.1843 53.3879 38.4902C52.0283 41.325 48.6479 42.3744 45.727 42.1348C44.0116 41.9944 42.3319 41.6706 40.6031 41.6952C39.1364 41.7162 37.6808 41.896 36.2232 42.0435C34.7725 42.1903 33.2693 42.3252 31.8236 42.0611C30.1943 41.7626 28.7822 40.9724 27.5711 39.8472C26.9106 39.2333 25.9173 40.2244 26.5806 40.8404C27.6565 41.8398 28.8802 42.6476 30.2777 43.114C31.4825 43.5157 32.7727 43.6323 34.0363 43.6021C36.7611 43.5368 39.4418 42.9517 42.1778 43.1392C43.8505 43.2537 45.5064 43.6485 47.1903 43.5761C48.7211 43.5126 50.2149 43.0842 51.5478 42.3266C54.0001 40.9225 55.6308 38.3294 55.0936 35.4489C54.8491 34.1362 54.1493 32.8677 53.1554 31.9764C52.2147 31.1335 51.1206 30.7121 49.88 30.5695C48.7677 30.4417 47.5741 30.5323 46.5059 30.8779C45.6331 31.1609 44.6679 31.6765 44.4066 32.6324C44.3415 32.8691 44.3163 33.1683 44.4129 33.3973C44.5607 33.7492 44.9705 33.9114 45.3291 33.9388C45.9161 33.9838 46.4415 33.6775 46.8821 33.3207C47.4258 32.8792 47.8614 32.3187 48.1557 31.6822C48.45 31.0457 48.5952 30.3501 48.58 29.6487C48.5015 26.6334 46.1585 23.9876 43.5045 22.8223C40.6753 21.5812 37.4567 21.8559 34.7711 23.3456C33.408 24.1014 32.1787 25.164 31.3101 26.4655C30.5088 27.6659 29.9253 29.3621 30.4115 30.7964C31.1708 33.0391 34.2829 33.7099 36.2617 32.8537C37.837 32.1716 39.0909 30.6173 39.7787 29.0798C41.1285 26.0631 41.0024 22.1916 39.1966 19.3786C38.3729 18.0953 37.1646 17.0474 35.6719 16.6506C33.9004 16.18 32.0589 16.6857 30.4955 17.5552C28.481 18.6762 26.7522 20.3338 25.6819 22.3883C24.6355 24.3985 24.164 26.6538 24.0387 28.9049C23.921 31.0198 24.1171 33.155 24.5213 35.2319C24.8225 36.7792 25.2351 38.3364 25.9005 39.7699C26.0749 40.1464 26.2794 40.5489 26.5806 40.8404C27.2293 41.469 28.2211 40.4765 27.5711 39.8472ZM69.6848 71.5538C65.7272 71.5538 62.3566 69.7375 61.2982 67.0334C61.2142 66.8187 61.1732 66.5895 61.1775 66.3589C61.1818 66.1283 61.2313 65.9008 61.3233 65.6895C61.4153 65.4781 61.5479 65.2869 61.7135 65.1269C61.8791 64.9669 62.0746 64.8412 62.2887 64.757C62.5028 64.6727 62.7313 64.6315 62.9613 64.6359C63.1912 64.6402 63.4181 64.6899 63.6289 64.7821C63.8397 64.8743 64.0303 65.0073 64.1899 65.1734C64.3495 65.3395 64.4748 65.5354 64.5589 65.7501C65.0702 67.0565 67.2739 68.042 69.6855 68.042C74.4998 68.042 76.9416 65.5183 77.3696 60.1002C77.6351 56.7464 77.0446 52.3909 75.6626 47.5031C75.542 47.057 75.6017 46.5813 75.8287 46.1791C76.0556 45.7768 76.4316 45.4806 76.875 45.3545C77.3184 45.2284 77.7935 45.2827 78.1973 45.5056C78.601 45.7284 78.9009 46.1019 79.0318 46.5451C80.5476 51.9049 81.1626 56.5588 80.8607 60.3776C80.2905 67.5847 76.3217 71.5538 69.6848 71.5538Z"
fill="#6166F0"
/>
<path
d="M48.2434 31.28C47.0423 31.3829 47.0594 32.9959 48.5608 32.8672C49.7962 32.7042 49.7362 31.0483 48.2434 31.28Z"
fill="#0F3471"
d="M39.2358 69.3196C35.4863 69.3196 31.6933 67.9204 28.5328 65.3167C28.4618 65.2582 28.4029 65.1862 28.3596 65.1049C28.3163 65.0235 28.2893 64.9345 28.2804 64.8427C28.2714 64.7509 28.2805 64.6583 28.3073 64.5701C28.334 64.4818 28.3778 64.3997 28.4361 64.3285C28.4945 64.2572 28.5663 64.1982 28.6474 64.1548C28.7285 64.1113 28.8174 64.0844 28.9089 64.0754C29.0004 64.0664 29.0928 64.0755 29.1808 64.1023C29.2688 64.1291 29.3506 64.173 29.4217 64.2316C32.9611 67.1471 37.3474 68.4233 41.4556 67.7301C45.4678 67.0537 48.9036 64.5448 51.393 60.4732C51.4403 60.393 51.5031 60.3231 51.5776 60.2675C51.6521 60.2118 51.7369 60.1717 51.8271 60.1492C51.9173 60.1268 52.011 60.1226 52.1028 60.1368C52.1946 60.151 52.2826 60.1834 52.3618 60.2321C52.441 60.2807 52.5098 60.3447 52.5641 60.4203C52.6184 60.4959 52.6572 60.5815 52.6782 60.6723C52.6992 60.763 52.7019 60.857 52.6863 60.9489C52.6707 61.0407 52.6371 61.1285 52.5873 61.2071C49.88 65.6349 46.1116 68.3693 41.6882 69.1152C40.8778 69.2517 40.0575 69.3201 39.2358 69.3196ZM43.4771 85.0387C43.2474 84.5056 40.6396 77.432 40.608 77.2508C40.6291 77.2262 41.6713 75.8446 42.1161 75.2996C42.4411 74.895 42.8404 74.4329 42.6576 73.8745C42.5126 73.4327 42.044 73.229 41.6209 73.163C40.3993 72.9719 39.1119 72.9768 37.8868 73.0583C37.3607 73.0934 36.8655 73.1876 36.6518 73.7558C36.4704 74.2397 36.6708 74.7159 36.9685 75.1022C37.339 75.5834 37.7551 76.0329 38.1501 76.4943L38.7728 77.222L38.8156 77.2705C38.7413 77.5058 38.6573 77.7389 38.576 77.9672C37.7534 80.2666 36.8658 82.542 35.9143 84.7908C35.908 84.8055 35.9094 84.8196 35.9052 84.8343C35.8975 84.8484 35.8855 84.8582 35.8792 84.8744C35.6453 85.4524 35.8589 85.8605 36.1685 86.3585C36.4886 86.8726 38.6748 89.784 39.5139 90.6627C39.58 90.7276 39.6689 90.7641 39.7615 90.7641C39.8541 90.7641 39.943 90.7276 40.0092 90.6627C40.6963 89.9378 43.3945 86.5292 43.5731 86.0923C43.7244 85.7179 43.6305 85.3948 43.4771 85.0387Z"
fill="black"
/>
<path
d="M69.6396 40.5871C71.0724 40.2525 71.141 39.935 71.0638 36.5547C70.9866 32.9085 70.6434 27.2634 66.8256 27.9754C62.8619 28.087 66.1993 41.4107 69.6396 40.5871Z"
fill="#0F3471"
d="M76.6425 48.8123C76.3904 48.8123 74.165 48.7681 73.7048 47.2257C73.6515 47.0472 73.671 46.8548 73.7592 46.6908C73.8473 46.5268 73.9968 46.4047 74.1748 46.3512C74.3528 46.2977 74.5446 46.3174 74.7082 46.4057C74.8717 46.4941 74.9936 46.644 75.0469 46.8225C75.1575 47.1941 76.0618 47.4041 76.6439 47.4069C76.8298 47.4071 77.008 47.4813 77.1393 47.6132C77.2706 47.7451 77.3442 47.9239 77.344 48.1103C77.3438 48.2967 77.2698 48.4753 77.1383 48.607C77.0067 48.7387 76.8284 48.8125 76.6425 48.8123Z"
fill="#6166F0"
/>
<path
d="M62.3727 78.2623C60.8541 78.4167 60.3908 78.8114 60.4766 79.5921C60.5453 80.1669 60.9828 80.6645 62.1925 80.5787C63.1791 80.5101 64.9293 81.4881 65.547 83.4185C66.1648 85.3489 68.0093 84.3451 67.7434 82.7579C67.4431 80.6302 65.2639 77.9706 62.3727 78.2623Z"
fill="#0F3471"
d="M76.2439 47.6098C76.1001 47.6098 75.9597 47.5654 75.8419 47.4826C75.7241 47.3997 75.6346 47.2826 75.5855 47.1469L74.628 44.4983C74.567 44.3237 74.5771 44.1321 74.6561 43.965C74.7352 43.7979 74.8768 43.6688 75.0502 43.6057C75.2235 43.5426 75.4148 43.5507 75.5823 43.6281C75.7498 43.7055 75.8801 43.8461 75.9449 44.0193L76.9024 46.6679C76.9408 46.774 76.9531 46.8878 76.9383 46.9997C76.9235 47.1115 76.8821 47.2182 76.8175 47.3106C76.7529 47.403 76.667 47.4784 76.5672 47.5305C76.4674 47.5826 76.3565 47.6098 76.2439 47.6098ZM77.6253 46.9643C77.4541 46.9642 77.289 46.9013 77.161 46.7874C77.0329 46.6735 76.9509 46.5166 76.9304 46.3462L76.611 43.7032C76.5887 43.5182 76.6406 43.3319 76.7553 43.1853C76.87 43.0387 77.038 42.9438 77.2225 42.9215C77.407 42.8991 77.5927 42.9511 77.7389 43.0661C77.8851 43.1811 77.9798 43.3497 78.0021 43.5346L78.3215 46.1777C78.3334 46.2764 78.3243 46.3765 78.2947 46.4714C78.2651 46.5663 78.2158 46.6538 78.15 46.7282C78.0842 46.8025 78.0034 46.862 77.9129 46.9028C77.8225 46.9435 77.7244 46.9645 77.6253 46.9643Z"
fill="#6166F0"
/>
<path
d="M70.1447 41.7917C67.1762 42.3665 67.4765 46.476 70.3163 46.2787C73.4993 46.0556 73.3534 41.1654 70.1447 41.7917Z"
fill="#0F3471"
d="M78.559 47.3711C78.3971 47.3711 78.2401 47.3149 78.1149 47.2119C77.9896 47.109 77.9038 46.9658 77.872 46.8066C77.8402 46.6474 77.8644 46.482 77.9405 46.3387C78.0166 46.1953 78.1398 46.0829 78.2893 46.0204C78.3601 45.9874 78.8868 45.7099 78.8868 44.7624C78.8868 44.5762 78.9606 44.3975 79.092 44.2658C79.2233 44.1341 79.4015 44.0601 79.5873 44.0601C79.773 44.0601 79.9512 44.1341 80.0826 44.2658C80.2139 44.3975 80.2877 44.5762 80.2877 44.7624C80.2877 46.3259 79.3617 47.107 78.814 47.3226C78.7327 47.3546 78.6463 47.3711 78.559 47.3711Z"
fill="#6166F0"
/>
<path
d="M48.9891 29.2474C48.9754 28.5727 48.8266 27.9075 48.5516 27.2913C48.3114 26.9481 47.2475 26.9567 46.8357 27.2913C46.1236 27.8489 46.7156 30.8088 47.8138 30.8002C48.543 30.723 49.135 30.5429 48.9891 29.2474Z"
fill="#0F3471"
d="M153.975 95.8553C152.352 99.2028 148.33 100.596 144.991 98.9689L88.0537 74.6765L93.932 62.5549L150.87 86.8473C151.663 87.2342 152.373 87.7742 152.959 88.4363C153.545 89.0985 153.995 89.8698 154.283 90.7063C154.571 91.5428 154.692 92.4281 154.64 93.3115C154.587 94.195 154.361 95.0594 153.975 95.8553Z"
fill="#F9C8B7"
/>
<path
d="M188.961 66.8503C186.707 66.5844 184.438 66.4531 182.167 66.4557C188.644 58.0822 190.892 52.6343 190.892 45.8651C190.892 32.284 177.825 17.1928 167.873 10.8098C172.086 8.85366 175.432 4.41812 175.011 -0.480713C178.203 -1.97353 176.633 -7.09542 177.13 -9.97809C178.186 -11.9256 181.249 -12.2945 180.622 -16.0351C180.107 -21.6375 169.984 -18.3945 172.223 -24.5287C172.686 -26.2961 173.33 -28.7241 171.417 -30.6887C169.435 -33.2197 161.353 -31.2035 158.676 -32.5247C157.475 -41.4215 151.959 -39.7486 145.533 -35.7763C133.23 -49.0658 110.246 -44.5702 94.88 -34.4808C87.4245 -29.5391 76.2112 -17.0475 83.5981 10.8698C74.0149 10.7068 62.1496 10.4408 52.0688 10.3636C27.3859 10.132 24.7178 13.0318 30.3716 33.4508C32.0874 42.8452 34.6612 54.6676 36.1541 61.3166C37.6383 67.3222 37.6898 73.6538 42.5629 76.2104C37.827 84.4381 43.1548 86.5057 49.4264 82.9281C51.5273 85.8871 54.359 88.2516 57.6454 89.7916C57.0963 102.429 63.977 99.1517 69.6566 92.4426C71.6298 91.1128 73.8948 91.5847 76.0482 89.62C85.5456 95.9859 93.8676 91.7391 104.515 89.0452C101.752 94.0041 87.6647 94.7162 86.4979 99.1002C85.2453 103.896 88.3167 106.942 92.1517 107.191C101.066 107.765 115.582 99.3405 117.032 86.2311C123.621 84.644 139.767 81.032 143.465 79.0931C145.31 78.2352 145.327 75.7729 145.327 74.4345C145.412 71.6633 144.194 71.0027 137.151 68.4804C150.654 69.4241 178.863 68.6434 188.627 68.6863C190.034 68.6949 190.42 66.8332 188.961 66.8503ZM169.967 7.05199C165.789 10.2435 163.841 8.99951 163.755 12.7659C163.506 24.3823 145.799 29.7702 131.634 30.5338C129.292 30.6539 127.284 30.448 125.199 30.3708C118.636 30.1305 114.158 28.1058 111.756 26.0811C109.121 23.9675 106.986 21.2988 105.501 18.2652C102.978 12.4592 102.424 5.98729 103.923 -0.163277C106.582 -3.45776 106.359 -4.45297 107.483 -4.62456C108.341 -4.77899 110.606 -3.03737 112.631 -3.41487C115.702 -3.97253 118.894 -7.25843 121.433 -8.15927C124.007 -7.7303 126.143 -3.86957 129.155 -4.47871C132.235 -4.75325 133.135 -9.54055 135.366 -10.4843C136.91 -9.94378 137.837 -7.19838 140.333 -7.50723C145.653 -8.4767 143.096 -14.5509 149.153 -8.41665C152.164 -5.24227 154.524 -4.024 156.977 -4.18701C159.92 -4.37575 161.413 -7.06968 163.369 -7.01821C165.78 -6.95815 169.452 -0.472136 172.806 -0.154699C172.984 1.18883 172.817 2.55553 172.32 3.81636C171.823 5.07727 171.013 6.19079 169.967 7.05199ZM146.459 -33.6829C148.887 -35.3216 153.048 -37.1833 154.412 -36.7286C156.3 -36.0938 155.631 -32.4389 156.986 -31.0405C158.822 -28.5267 167.496 -30.8603 169.855 -29.1016C171.974 -26.9052 168.019 -22.6413 170.507 -20.1361C172.163 -17.8197 177.894 -18.2829 178.46 -15.6491C178.374 -11.9428 173.767 -13.1868 174.865 -6.78656C175.483 4.72697 167.307 -10.0382 163.172 -9.25743C160.383 -8.91425 159.5 -6.23748 156.497 -6.28038C152.207 -6.59782 145.73 -18.18 141.981 -11.1363C141.432 -10.2784 141.123 -9.81509 140.222 -9.75503C138.412 -9.87514 137.588 -13.101 135.194 -12.7235C132.123 -12.6034 131.299 -7.45576 128.829 -6.71793C126.538 -6.71793 124.239 -10.5529 121.622 -10.4242C117.967 -10.2441 113.823 -3.56071 109.611 -6.49487C109.299 -6.73183 108.941 -6.90153 108.56 -6.99307C108.179 -7.08461 107.783 -7.09611 107.397 -7.02679C104.558 -6.7694 102.087 1.09789 99.2125 -0.386339C96.939 -1.35581 100.285 -5.46534 97.3594 -8.27938C94.7856 -10.7245 91.6198 -12.2002 96.7846 -14.1219C108.341 -18.4116 88.4283 -25.2751 110.426 -24.7261C114.861 -10.5443 141.895 -11.1621 142.607 -27.2999C145.275 -28.3466 147.137 -30.8689 146.459 -33.6829ZM96.1154 -32.662C107.74 -40.4435 121.682 -43.6436 133.264 -40.6237C139.947 -38.9078 148.132 -34.0175 142.324 -29.6335C141.94 -31.0081 141.263 -32.2837 140.342 -33.3741C139.39 -34.4637 137.914 -33.2969 138.892 -32.233C141.183 -29.7622 141.028 -24.2542 138.583 -21.9378C137.977 -23.4294 137.143 -24.8185 136.112 -26.0559C135.921 -26.2834 135.647 -26.4256 135.351 -26.4515C135.055 -26.4772 134.761 -26.3843 134.534 -26.1931C134.306 -26.002 134.164 -25.7283 134.138 -25.4322C134.113 -25.1362 134.205 -24.8421 134.397 -24.6145C135.323 -23.5164 136.661 -21.4058 136.739 -20.0417C134.475 -18.3075 131.77 -17.2434 128.931 -16.9703C128.629 -18.998 127.996 -20.9626 127.061 -22.7871C126.927 -23.051 126.693 -23.2508 126.412 -23.3426C126.13 -23.4343 125.824 -23.4104 125.56 -23.2761C125.296 -23.1419 125.096 -22.9083 125.005 -22.6267C124.913 -22.3451 124.937 -22.0387 125.071 -21.7748C125.868 -20.2232 126.415 -18.5553 126.692 -16.833C119.451 -16.7644 112.013 -20.9426 111.833 -29.4104C111.824 -29.707 111.698 -29.988 111.483 -30.1921C111.267 -30.3963 110.98 -30.5069 110.683 -30.5C108.967 -30.3198 109.748 -28.1235 109.825 -27.0168C100.877 -27.5229 94.8285 -25.4725 97.9857 -19.3468C99.1439 -17.0904 97.7026 -17.0904 95.8752 -16.181C87.6647 -12.7492 91.8 -9.56629 96.3728 -5.83425C96.6216 -4.04116 95.5148 -1.54456 96.7074 0.31717C92.5206 1.92152 86.4807 2.49633 84.13 2.65934C81.642 -13.367 85.7686 -25.7384 96.1154 -32.662ZM40.2464 68.9609C37.4924 57.5503 35.3562 47.2121 32.5679 33.0561C31.71 27.9943 28.5613 18.9602 30.9378 15.7172C37.4667 1Line truncated
fill="#0F3471"
d="M147.925 100.002C146.868 100.002 145.816 99.7612 144.839 99.2843L87.5781 74.8543L93.7632 62.0999L151.007 86.5236C152.722 87.3587 153.997 88.8007 154.614 90.591C155.231 92.3814 155.116 94.3052 154.29 96.0084L153.975 95.8546L154.29 96.0084C153.886 96.8473 153.32 97.5975 152.625 98.2155C151.93 98.8336 151.119 99.3071 150.241 99.6088C149.483 99.8722 148.702 100.002 147.925 100.002ZM88.53 74.4975L145.129 98.6452C146.675 99.3988 148.403 99.5027 150.011 98.9451C151.62 98.3874 152.916 97.2355 153.659 95.7008C154.403 94.1661 154.508 92.4326 153.952 90.82C153.395 89.2073 152.247 87.9079 150.716 87.162L94.1008 63.0073L88.53 74.4975Z"
fill="#F9C8B7"
/>
<path
d="M64.971 68.7307C64.7823 66.5687 63.0835 65.2989 60.6813 65.4705C58.8367 65.5992 57.893 67.092 58.7081 67.8127C59.5231 68.5334 60.1837 67.1864 61.4449 67.7526C61.6976 67.8642 61.9163 68.04 62.0786 68.2631C62.241 68.487 62.3413 68.7496 62.3692 69.0241C62.3971 69.2986 62.3517 69.5758 62.2375 69.8271C62.1234 70.0785 61.9446 70.2956 61.7194 70.4551C59.1885 69.52 58.7338 72.2911 60.0035 74.2387C61.625 77.1728 65.7346 75.3711 63.6498 72.0166C64.5077 70.8755 65.9662 70.2321 66.7212 72.2053C67.2102 73.4922 66.4552 74.8907 67.5791 75.3111C69.8012 76.1948 70.2559 68.2674 64.971 68.7307Z"
fill="#0F3471"
d="M24.3413 7.24359C1.83337 20.8865 -5.38417 50.2416 8.22087 72.8117C21.8259 95.3819 51.1016 102.618 73.6095 88.9755C96.1174 75.3333 103.335 45.9775 89.7292 23.4081C76.1235 0.838624 46.8491 -6.39865 24.3413 7.24359ZM70.2144 83.3432C50.8088 95.1051 25.5685 88.8659 13.8379 69.4073C2.10865 49.948 8.33084 24.6386 27.7364 12.8766C47.1419 1.11466 72.3823 7.35386 84.1122 26.8132C95.8428 46.2711 89.6199 71.5812 70.2144 83.3432Z"
fill="#F9C8B7"
/>
<path
d="M53.0804 69.9297C51.5618 69.9297 51.0557 70.2471 51.0557 71.0364C51.0557 71.6198 51.4332 72.1603 52.6857 72.2118C53.4532 72.38 54.1517 72.7763 54.6893 73.3486C55.2269 73.9217 55.5783 74.6441 55.6971 75.4205C56.0746 77.3337 58.0307 76.613 57.9535 75.0173C57.8505 72.8638 55.9888 69.964 53.0804 69.9297Z"
fill="#0F3471"
/>
<path
d="M41.0792 48.9636C39.1488 39.123 34.9192 23.9547 36.6865 20.4972C38.145 17.666 46.7759 18.7813 51.4345 18.3866C60.9662 18.3866 71.1242 18.155 84.3107 18.3094C88.8921 18.4124 92.6584 17.8461 94.0826 22.4275C94.5287 23.8517 96.1074 24.1434 95.8671 22.0071C95.1979 16.0016 89.6471 16.1817 84.345 16.0702C74.9077 15.9673 61.7555 16.0702 56.7794 16.1646C31.3159 16.1388 31.1872 13.1446 36.6694 39.1745C37.5959 41.6282 39.1488 53.4763 40.6245 59.705C41.4052 63.008 41.8942 64.1405 42.7178 63.9174C43.5415 63.6944 43.4471 62.6305 42.8894 59.7736C42.3318 56.9167 41.3194 51.3143 41.0792 48.9636Z"
fill="#0F3471"
/>
<path
d="M42.399 27.367C40.2027 31.7425 40.3142 34.2305 41.5411 35.4059C43.0854 36.8987 47.3665 35.8091 50.5323 35.6804C57.2156 35.4059 57.3186 31.8197 53.1061 26.8094C48.8936 21.799 45.6163 20.9668 42.399 27.367ZM53.3549 32.283C53.2005 33.4155 48.662 33.7072 46.5943 33.8444C43.0939 34.0847 41.9014 33.6986 44.3465 28.4652C46.4313 23.9867 48.3531 24.1755 51.3559 28.2421C52.3254 29.5719 53.4836 31.2878 53.3549 32.283Z"
fill="#0F3471"
/>
<path
d="M87.6653 28.2415C88.3001 28.2415 88.5832 27.7954 88.3773 26.8345C88.2143 25.1787 87.6309 23.8746 86.4899 24.947C85.8979 25.5047 86.61 28.3273 87.6653 28.2415Z"
fill="#0F3471"
/>
<path
d="M86.6856 21.3856C82.7476 22.1406 80.9803 30.4025 82.4903 31.8524C84.2061 33.4739 86.9687 32.6589 89.5854 32.5388C94.5958 32.2985 95.0848 29.7505 92.6997 26.0442C90.2203 22.1835 88.4444 21.051 86.6856 21.3856ZM92.2279 29.6904C91.7817 30.4969 90.7951 30.5483 89.8599 30.6256C85.004 30.9859 81.701 32.8305 84.7123 25.7267C87.6121 18.8632 92.8456 28.6008 92.2279 29.6904Z"
fill="#0F3471"
/>
<path
d="M87.9802 28.6219C86.9335 28.7248 86.9506 30.2605 88.2633 30.1147C89.3443 29.9602 89.2928 28.4074 87.9802 28.6219Z"
fill="#0F3471"
d="M49.0549 96.2008C32.8 96.2008 16.9262 87.931 7.92107 72.9929C1.29262 61.9972 -0.668668 49.0707 2.39865 36.5958C5.46596 24.1209 13.1941 13.5895 24.1598 6.94293C46.7966 -6.77727 76.3462 0.526733 90.0297 23.2261C103.713 45.9255 96.4284 75.5552 73.7909 89.2761C66.3322 93.8091 57.7766 96.2042 49.0549 96.2008ZM24.3413 7.24355L24.5227 7.54417C13.7167 14.0938 6.10128 24.4707 3.07879 36.7637C0.0563084 49.0567 1.98958 61.7943 8.52067 72.6298C22.0045 94.9977 51.1219 102.196 73.4288 88.6749C95.7356 75.1541 102.914 45.9571 89.4301 23.5892C75.947 1.22208 46.8288 -5.97656 24.5227 7.54417L24.3413 7.24355ZM49.0437 89.621C35.0128 89.621 21.3111 82.4827 13.5388 69.5885C1.72761 49.995 8.01564 24.4194 27.555 12.576C37.0203 6.83898 48.1478 5.14134 58.8865 7.79562C69.6253 10.4506 78.6907 17.1393 84.412 26.6312C90.1334 36.1224 91.8264 47.2797 89.1793 58.0485C86.5316 68.8166 79.8611 77.9067 70.3958 83.6437C63.9574 87.5566 56.5722 89.624 49.0437 89.621ZM48.9022 7.27516C41.5698 7.27516 34.3536 9.27622 27.9178 13.1772C8.70839 24.8198 2.52683 49.9627 14.1384 69.2254C25.7499 88.4873 50.8243 94.6858 70.0337 83.0425C79.3393 77.4024 85.897 68.4661 88.4999 57.8799C91.1028 47.2937 89.4378 36.3254 83.8131 26.9944C78.1884 17.6633 69.2765 11.0877 58.7191 8.47762C55.5072 7.68087 52.2109 7.27711 48.9022 7.27516Z"
fill="#F9C8B7"
/>
</g>
<defs>
<clipPath id="clip0_10846_21787">
<rect
width="154.006"
height="100"
fill="white"
transform="translate(0.997025)"
/>
</clipPath>
</defs>
</svg>
);
};
apps/web/src/components/quick-search/style.ts
+1 -1
View File
@@ -49,7 +49,7 @@ export const StyledNotFound = styled('div')(({ theme }) => {
'>svg': {
marginTop: '10px',
fontSize: '150px',
height: '200px',
},
};
});
apps/web/src/components/workspace-setting/ExportPage.tsx
+1 -1
View File
@@ -7,7 +7,7 @@ export const ExportPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
console.log(workspace);
return (
<>
<Wrapper marginBottom="32px"> {t('Export Description')}</Wrapper>
<Wrapper marginBottom="42px"> {t('Export Description')}</Wrapper>
<Button type="light" shape="circle" disabled>
{t('Export AFFiNE backup file')}
</Button>
apps/web/src/components/workspace-setting/PublishPage.tsx
+3 -3
View File
@@ -32,7 +32,7 @@ export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
if (workspace.published) {
return (
<>
<Wrapper marginBottom="32px">{t('Published Description')}</Wrapper>
<Wrapper marginBottom="42px">{t('Published Description')}</Wrapper>
<Wrapper marginBottom="12px">
<Content weight="500">{t('Share with link')}</Content>
@@ -66,7 +66,7 @@ export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
return (
<>
<Wrapper marginBottom="32px">{t('Publishing Description')}</Wrapper>
<Wrapper marginBottom="42px">{t('Publishing Description')}</Wrapper>
<Button
onClick={async () => {
setLoaded(true);
@@ -84,7 +84,7 @@ export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
return (
<>
<Wrapper marginBottom="32px">{t('Publishing')}</Wrapper>
<Wrapper marginBottom="42px">{t('Publishing')}</Wrapper>
<Button
type="light"
shape="circle"
apps/web/src/components/workspace-setting/SyncPage.tsx
+1 -1
View File
@@ -53,7 +53,7 @@ export const SyncPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
<Content weight={500}>{t('is a Local Workspace')}</Content>
</FlexWrapper>
<p>{t('Local Workspace Description')}</p>
<Wrapper marginTop="32px">
<Wrapper marginTop="42px">
<Button
type="light"
shape="circle"
apps/web/src/components/workspace-setting/general/delete/style.ts
+2 -2
View File
@@ -42,7 +42,7 @@ export const StyledInputContent = styled('div')(({ theme }) => {
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
margin: '32px 0',
margin: '42px 0',
fontSize: theme.font.base,
};
});
@@ -52,7 +52,7 @@ export const StyledButtonContent = styled('div')(() => {
position: 'absolute',
left: '50%',
transform: 'translateX(-50%)',
bottom: '32px',
bottom: '42px',
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
apps/web/src/components/workspace-setting/member/MembersPage.tsx
+118 -114
View File
@@ -1,7 +1,6 @@
import { Wrapper } from '@affine/component';
import { Button, IconButton } from '@affine/component';
import { Menu, MenuItem } from '@affine/component';
import { Empty } from '@affine/component';
import { toast } from '@affine/component';
import { FlexWrapper } from '@affine/component';
import { WorkspaceUnit } from '@affine/datacenter';
@@ -37,121 +36,126 @@ export const MembersPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
if (workspace.provider === 'affine') {
return (
<StyledMemberContainer>
<StyledMemberListContainer>
{!loaded && (
<FlexWrapper justifyContent="center">
<Loading size={25} />
</FlexWrapper>
)}
{loaded && members.length === 0 && (
<Empty width={648} sx={{ marginTop: '60px' }} height={300} />
)}
{loaded && members.length > 0 && (
<>
<StyledMemberTitleContainer>
<StyledMemberNameContainer>
{t('Users')} ({members.length})
</StyledMemberNameContainer>
<StyledMemberRoleContainer>
{t('Access level')}
</StyledMemberRoleContainer>
<div style={{ width: '24px', paddingRight: '48px' }}></div>
</StyledMemberTitleContainer>
{members.map((member, index) => {
const user = Object.assign(
{
avatar_url: '',
email: '',
id: '',
name: '',
},
member.user
);
return (
<StyledMemberListItem key={index}>
<StyledMemberNameContainer>
<StyledMemberAvatar
alt="member avatar"
src={user.avatar_url}
>
<EmailIcon />
</StyledMemberAvatar>
<>
<StyledMemberContainer>
<ul>
<StyledMemberTitleContainer>
<StyledMemberNameContainer>
{t('Users')} ({members.length})
</StyledMemberNameContainer>
<StyledMemberRoleContainer>
{t('Access level')}
</StyledMemberRoleContainer>
<div style={{ width: '24px', paddingRight: '48px' }}></div>
</StyledMemberTitleContainer>
</ul>
<StyledMemberInfo>
<StyledMemberName>{user.name}</StyledMemberName>
<StyledMemberEmail>
{member.user.email}
</StyledMemberEmail>
</StyledMemberInfo>
</StyledMemberNameContainer>
<StyledMemberRoleContainer>
{member.accepted
? member.type !== 99
? t('Member')
: t('Owner')
: t('Pending')}
</StyledMemberRoleContainer>
<StyledMoreVerticalButton>
{member.type === 99 ? (
<></>
) : (
<Menu
content={
<>
<MenuItem
onClick={async () => {
await removeMember(member.id);
toast(
t('Member has been removed', {
name: user.name,
})
);
}}
icon={<TrashIcon />}
>
{t('Remove from workspace')}
</MenuItem>
</>
}
placement="bottom-end"
disablePortal={true}
<StyledMemberListContainer>
{!loaded && (
<FlexWrapper justifyContent="center">
<Loading size={25} />
</FlexWrapper>
)}
{loaded && members.length > 0 && (
<>
{members.map((member, index) => {
const user = Object.assign(
{
avatar_url: '',
email: '',
id: '',
name: '',
},
member.user
);
return (
<StyledMemberListItem key={index}>
<StyledMemberNameContainer>
<StyledMemberAvatar
alt="member avatar"
src={user.avatar_url}
>
<IconButton>
<MoreVerticalIcon />
</IconButton>
</Menu>
)}
</StyledMoreVerticalButton>
</StyledMemberListItem>
);
})}
</>
)}
</StyledMemberListContainer>
<StyledMemberButtonContainer>
<Button
onClick={() => {
setIsInviteModalShow(true);
}}
type="primary"
shape="circle"
>
{t('Invite Members')}
</Button>
<InviteMemberModal
onClose={() => {
setIsInviteModalShow(false);
}}
onInviteSuccess={() => {
setIsInviteModalShow(false);
// refreshMembers();
}}
workspaceId={workspace.id}
open={isInviteModalShow}
></InviteMemberModal>
</StyledMemberButtonContainer>
</StyledMemberContainer>
<EmailIcon />
</StyledMemberAvatar>
<StyledMemberInfo>
<StyledMemberName>{user.name}</StyledMemberName>
<StyledMemberEmail>
{member.user.email}
</StyledMemberEmail>
</StyledMemberInfo>
</StyledMemberNameContainer>
<StyledMemberRoleContainer>
{member.accepted
? member.type !== 99
? t('Member')
: t('Owner')
: t('Pending')}
</StyledMemberRoleContainer>
<StyledMoreVerticalButton>
{member.type === 99 ? (
<></>
) : (
<Menu
content={
<>
<MenuItem
onClick={async () => {
// FIXME: remove ignore
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
await removeMember(member.id);
toast(
t('Member has been removed', {
name: user.name,
})
);
}}
icon={<TrashIcon />}
>
{t('Remove from workspace')}
</MenuItem>
</>
}
placement="bottom-end"
disablePortal={true}
>
<IconButton>
<MoreVerticalIcon />
</IconButton>
</Menu>
)}
</StyledMoreVerticalButton>
</StyledMemberListItem>
);
})}
</>
)}
</StyledMemberListContainer>
<StyledMemberButtonContainer>
<Button
onClick={() => {
setIsInviteModalShow(true);
}}
type="primary"
shape="circle"
>
{t('Invite Members')}
</Button>
</StyledMemberButtonContainer>
</StyledMemberContainer>
<InviteMemberModal
onClose={() => {
setIsInviteModalShow(false);
}}
onInviteSuccess={() => {
setIsInviteModalShow(false);
// refreshMembers();
}}
workspaceId={workspace.id}
open={isInviteModalShow}
></InviteMemberModal>
</>
);
}
apps/web/src/components/workspace-setting/member/style.ts
+6 -6
View File
@@ -5,7 +5,7 @@ export const StyledMemberTitleContainer = styled('li')(() => {
return {
display: 'flex',
fontWeight: '500',
marginBottom: '32px',
marginBottom: '42px',
flex: 1,
};
});
@@ -14,6 +14,7 @@ export const StyledMemberContainer = styled('div')(() => {
display: 'flex',
height: '100%',
flexDirection: 'column',
overflow: 'hidden',
};
});
@@ -40,8 +41,8 @@ export const StyledMemberRoleContainer = styled('div')(() => {
export const StyledMemberListContainer = styled('ul')(() => {
return {
overflowY: 'scroll',
width: '100%',
flex: 1,
flexGrow: 1,
paddingBottom: '58px',
};
});
@@ -80,9 +81,8 @@ export const StyledMemberEmail = styled('div')(({ theme }) => {
export const StyledMemberButtonContainer = styled('div')(() => {
return {
position: 'absolute',
bottom: '0',
marginBottom: '20px',
position: 'fixed',
bottom: '20px',
};
});
apps/web/src/components/workspace-setting/style.ts
+3 -4
View File
@@ -4,9 +4,8 @@ export const StyledSettingContainer = styled('div')(() => {
return {
display: 'flex',
flexDirection: 'column',
padding: '0 0 20px 48px',
height: '100vh',
marginTop: '48px',
padding: '48px 0 20px 48px',
height: 'calc(100vh - 60px)',
};
});
@@ -55,7 +54,7 @@ export const StyledSettingKey = styled.div(({ theme }) => {
});
export const StyledRow = styled(FlexWrapper)(() => {
return {
marginBottom: '32px',
marginBottom: '42px',
};
});
apps/web/src/components/workspace-slider-bar/style.ts
+1 -2
View File
@@ -56,10 +56,9 @@ export const StyledListItem = styled.div<{
disabled?: boolean;
}>(({ theme, active, disabled }) => {
return {
width: '296px',
height: '32px',
marginTop: '12px',
color: active ? theme.colors.primaryColor : theme.colors.popoverColor,
color: active ? theme.colors.primaryColor : theme.colors.textColor,
paddingLeft: '12px',
borderRadius: '5px',
cursor: 'pointer',
apps/web/src/hooks/use-workspace-helper.ts
+1 -5
View File
@@ -46,11 +46,7 @@ export const useWorkspaceHelper = () => {
};
const acceptInvite = async (inviteCode: string) => {
let inviteInfo;
if (inviteCode) {
inviteInfo = await dataCenter.acceptInvitation(inviteCode);
}
return inviteInfo;
return dataCenter.acceptInvitation(inviteCode);
};
return {
apps/web/src/pages/_app.tsx
-1
View File
@@ -1,5 +1,4 @@
import '../../public/globals.css';
import '../../public/variable.css';
import './temporary.css';
import '@fontsource/space-mono';
import '@fontsource/poppins';
apps/web/src/pages/invite/[invite_code].tsx
+81 -122
View File
@@ -1,145 +1,104 @@
import { styled } from '@affine/component';
import { Empty } from '@affine/component';
import { displayFlex, styled } from '@affine/component';
import { Button } from '@affine/component';
import { Permission } from '@affine/datacenter';
import {
SucessfulDuotoneIcon,
UnsucessfulDuotoneIcon,
} from '@blocksuite/icons';
import Image from 'next/image';
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
import { PageLoading } from '@/components/loading';
import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
import { useGlobalState } from '@/store/app';
// const User = ({ name, avatar }: { name: string; avatar?: string }) => {
// return (
// <UserContent>
// {avatar ? (
// <Avatar src={avatar}></Avatar>
// ) : (
// <UserIcon>{name.slice(0, 1)}</UserIcon>
// )}
// <span>{name}</span>
// </UserContent>
// );
// };
import inviteError from '../../../public/imgs/invite-error.svg';
import inviteSuccess from '../../../public/imgs/invite-success.svg';
export default function DevPage() {
const [loading, setLoading] = useState(true);
const router = useRouter();
const [successInvited, setSuccessInvited] = useState<boolean>(false);
const [inviteData, setInviteData] = useState<Permission | null>(null);
const { acceptInvite } = useWorkspaceHelper();
const dataCenter = useGlobalState(store => store.dataCenter);
useEffect(() => {
if (router.query.invite_code) {
acceptInvite(router.query.invite_code as string)
.then(data => {
if (data && data.accepted) {
setSuccessInvited(true);
}
})
.finally(() => {
setLoading(false);
});
} else {
const init = async () => {
const data = await dataCenter.acceptInvitation(
router.query.invite_code as string
);
setInviteData(data as Permission);
setLoading(false);
}
}, [router, acceptInvite]);
};
init();
}, [router, acceptInvite, dataCenter]);
return loading ? (
<PageLoading />
) : (
<Invited>
<div>
<Empty width={310} height={310}></Empty>
if (loading) {
return <PageLoading />;
}
<Content>
{/* TODO add inviteInfo*/}
{/* <User name={inviteData?.name ? inviteData.name : '-'}></User> invited */}
{/* you to join */}
{/* <User
name={inviteData?.workspaceName ? inviteData.workspaceName : '-'}
></User> */}
{successInvited ? (
<Status>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle opacity="0.14" cx="12" cy="12" r="9" fill="#6880FF" />
<path
fillRule="evenodd"
clipRule="evenodd"
d="M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM16.6783 8.2652C17.0841 8.6398 17.1094 9.27246 16.7348 9.67828L11.1963 15.6783C11.007 15.8834 10.7406 16 10.4615 16C10.1824 16 9.91604 15.8834 9.72674 15.6783L7.2652 13.0116C6.89059 12.6058 6.9159 11.9731 7.32172 11.5985C7.72754 11.2239 8.3602 11.2492 8.7348 11.6551L10.4615 13.5257L15.2652 8.32172C15.6398 7.9159 16.2725 7.89059 16.6783 8.2652Z"
fill="#6880FF"
/>
</svg>
Successfully joined
</Status>
) : (
<Status>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect
opacity="0.14"
x="2"
y="7"
width="12"
height="10"
rx="5"
fill="#6880FF"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M2.29289 2.29289C2.68342 1.90237 3.31658 1.90237 3.70711 2.29289L7.70678 6.29256C7.707 6.29278 7.70655 6.29234 7.70678 6.29256L21.7071 20.2929C22.0976 20.6834 22.0976 21.3166 21.7071 21.7071C21.3166 22.0976 20.6834 22.0976 20.2929 21.7071L16.5858 18H16.5C15.9477 18 15.5 17.5523 15.5 17C15.5 16.9722 15.5011 16.9447 15.5033 16.9176L13.961 15.3752C12.8815 16.959 11.0631 18 9 18H7C3.68629 18 1 15.3137 1 12C1 9.40763 2.64407 7.19925 4.94642 6.36064L2.29289 3.70711C1.90237 3.31658 1.90237 2.68342 2.29289 2.29289ZM6.60504 8.01925C4.5813 8.21761 3 9.92414 3 12C3 14.2091 4.79086 16 7 16H9C10.511 16 11.8282 15.1618 12.5087 13.9229L10.9367 12.3509C10.7946 12.7301 10.4288 13 10 13C9.44772 13 9 12.5523 9 12C9 11.5127 9.0583 11.0379 9.16858 10.5828L6.60504 8.01925ZM15 8C14.4436 8 13.9162 8.11302 13.4375 8.31642C12.9291 8.53238 12.342 8.29538 12.1261 7.78707C11.9101 7.27876 12.1471 6.69162 12.6554 6.47566C13.377 6.1691 14.17 6 15 6H17C20.3137 6 23 8.68629 23 12C23 13.4573 22.4792 14.7955 21.6146 15.8349C21.2615 16.2595 20.6309 16.3174 20.2063 15.9642C19.7817 15.6111 19.7239 14.9806 20.077 14.556C20.6539 13.8624 21 12.973 21 12C21 9.79086 19.2091 8 17 8H15Z"
fill="#6880FF"
/>
</svg>
The link has expired
</Status>
)}
</Content>
</div>
</Invited>
);
if (inviteData?.accepted) {
return (
<StyledContainer>
<Image src={inviteSuccess} alt="" />
<Button
type="primary"
shape="round"
onClick={() => {
router.push(`/workspace/${inviteData?.workspace_id}/all`);
}}
>
Go to Workspace
</Button>
<p>
<SucessfulDuotoneIcon />
Successfully joined
</p>
</StyledContainer>
);
}
if (inviteData?.accepted === false) {
return (
<StyledContainer>
<Image src={inviteError} alt="" />
<Button
shape="round"
onClick={() => {
router.push(`/`);
}}
>
Back to Home
</Button>
<p>
<UnsucessfulDuotoneIcon />
The link has expired
</p>
</StyledContainer>
);
}
}
// const UserIcon = styled('div')({
// display: 'inline-block',
// width: '28px',
// height: '28px',
// borderRadius: '50%',
// backgroundColor: '#FFF5AB',
// textAlign: 'center',
// color: '#896406',
// lineHeight: '28px',
// });
const Invited = styled('div')(({ theme }) => {
const StyledContainer = styled('div')(({ theme }) => {
return {
height: '100vh',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
textAlign: 'center',
color: theme.colors.textColor,
...displayFlex('center', 'center'),
flexDirection: 'column',
backgroundColor: theme.colors.pageBackground,
};
});
const Content = styled('div')({
fontSize: '16px',
marginTop: '35px',
});
const Status = styled('div')(() => {
return {
marginTop: '16px',
svg: {
verticalAlign: 'middle',
marginRight: '12px',
img: {
width: '300px',
height: '300px',
},
p: {
...displayFlex('center', 'center'),
marginTop: '24px',
svg: {
color: theme.colors.primaryColor,
fontSize: '24px',
marginRight: '12px',
},
},
};
});