feat(core): sidebar journal panel template onboarding and setting (#9680)
close AF-2108
This commit is contained in:
8 files changed
+468
No files matched your search
+129
@@ -0,0 +1,129 @@
|
||||
export const journalPaperLight = `<svg width="124" height="124" viewBox="0 0 124 124" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_d_923_1196)">
|
||||
<g clip-path="url(#clip0_923_1196)">
|
||||
<rect x="10.2379" y="10.2378" width="103.476" height="103.476" rx="12.8328" fill="white"/>
|
||||
<path d="M21.6069 32.4124C21.2245 32.4124 20.8813 32.3578 20.5773 32.2485C20.2734 32.1426 20.0139 31.989 19.7987 31.7875C19.587 31.586 19.4214 31.3453 19.3019 31.0652C19.1857 30.7818 19.1226 30.4659 19.1123 30.1176L19.1123 30.0766H20.6132L20.6132 30.1073C20.6234 30.2952 20.6661 30.4625 20.7413 30.6093C20.8198 30.7562 20.9291 30.8706 21.0691 30.9525C21.2125 31.0345 21.385 31.0755 21.5864 31.0755C21.9143 31.0755 22.1619 30.9782 22.3292 30.7835C22.4999 30.5889 22.5853 30.3071 22.5853 29.9383L22.5853 24.8313H24.1323L24.1323 29.9486C24.1323 30.4676 24.0332 30.9116 23.8352 31.2804C23.6371 31.6458 23.3486 31.9258 22.9695 32.1205C22.5939 32.3151 22.1397 32.4124 21.6069 32.4124ZM28.0294 32.3407C27.4523 32.3407 26.9554 32.2246 26.5388 31.9924C26.1221 31.7568 25.8028 31.4204 25.5809 30.9833C25.3589 30.5428 25.2479 30.0169 25.2479 29.4056L25.2479 29.3953C25.2479 28.7875 25.3606 28.265 25.586 27.8279C25.8114 27.3908 26.1307 27.0544 26.5439 26.8188C26.9605 26.5797 27.4557 26.4602 28.0294 26.4602C28.6031 26.4602 29.0965 26.578 29.5098 26.8136C29.9264 27.0493 30.2474 27.3874 30.4728 27.8279C30.6982 28.265 30.8108 28.7875 30.8108 29.3953L30.8108 29.4056C30.8108 30.0169 30.6999 30.5428 30.4779 30.9833C30.2559 31.4204 29.9366 31.7568 29.52 31.9924C29.1068 32.2246 28.6099 32.3407 28.0294 32.3407ZM28.0294 31.1677C28.2957 31.1677 28.5211 31.0977 28.7055 30.9577C28.8899 30.8177 29.0317 30.6162 29.1307 30.3532C29.2297 30.0903 29.2792 29.7744 29.2792 29.4056L29.2792 29.3953C29.2792 29.0265 29.2297 28.7123 29.1307 28.4528C29.0317 28.1899 28.8882 27.9884 28.7004 27.8484C28.516 27.7049 28.2923 27.6332 28.0294 27.6332C27.7664 27.6332 27.541 27.7049 27.3532 27.8484C27.1688 27.9884 27.0271 28.1899 26.9281 28.4528C26.829 28.7123 26.7795 29.0265 26.7795 29.3953L26.7795 29.4056C26.7795 29.7778 26.8273 30.0954 26.9229 30.3583C27.022 30.6213 27.1637 30.8228 27.3481 30.9628C27.5359 31.0994 27.763 31.1677 28.0294 31.1677ZM33.7706 32.3407C33.3505 32.3407 32.9971 32.2588 32.7102 32.0948C32.4268 31.9309 32.2133 31.6919 32.0699 31.3777C31.9265 31.0601 31.8548 30.6776 31.8548 30.2303L31.8548 26.5831H33.3505L33.3505 29.8871C33.3505 30.2866 33.4291 30.5889 33.5861 30.7938C33.7466 30.9986 34.0045 31.1011 34.3596 31.1011C34.544 31.1011 34.7062 31.0721 34.8463 31.014C34.9897 30.9525 35.1092 30.8672 35.2048 30.7579C35.3004 30.6486 35.3722 30.5171 35.42 30.3635C35.4712 30.2064 35.4968 30.0322 35.4968 29.841L35.4968 26.5831H36.9925L36.9925 32.2229H35.4968L35.4968 31.3521H35.4046C35.3192 31.557 35.1997 31.7346 35.046 31.8848C34.8924 32.0317 34.708 32.1444 34.4928 32.2229C34.2777 32.3014 34.0369 32.3407 33.7706 32.3407ZM38.3694 32.2229L38.3694 26.5831H39.8652L39.8652 27.4591H39.9574C40.0496 27.1517 40.2186 26.9144 40.4645 26.7471C40.7104 26.5763 41.016 26.4909 41.3814 26.4909C41.4838 26.4909 41.5829 26.4978 41.6785 26.5114C41.7775 26.5251 41.8646 26.5422 41.9397 26.5626L41.9397 27.8689C41.827 27.8415 41.7126 27.8211 41.5965 27.8074C41.4838 27.7903 41.3694 27.7818 41.2533 27.7818C40.9699 27.7818 40.724 27.8347 40.5157 27.9406C40.3074 28.043 40.1469 28.1899 40.0342 28.3811C39.9215 28.5723 39.8652 28.8011 39.8652 29.0675L39.8652 32.2229H38.3694ZM42.8658 32.2229L42.8658 26.5831H44.3616L44.3616 27.4539H44.4538C44.5836 27.1466 44.785 26.9041 45.0582 26.7266C45.3314 26.549 45.6695 26.4602 46.0725 26.4602C46.7008 26.4602 47.1789 26.6446 47.5067 27.0134C47.838 27.3788 48.0036 27.8996 48.0036 28.5758L48.0036 32.2229H46.5079L46.5079 28.9138C46.5079 28.5143 46.4242 28.2121 46.2569 28.0072C46.0895 27.8023 45.8283 27.6998 45.4732 27.6998C45.2443 27.6998 45.0463 27.7528 44.879 27.8586C44.715 27.9611 44.587 28.1062 44.4948 28.294C44.406 28.4818 44.3616 28.7038 44.3616 28.9599L44.3616 32.2229H42.8658ZM50.866 32.31C50.5108 32.31 50.1933 32.2417 49.9132 32.1051C49.6366 31.9651 49.4198 31.7687 49.2627 31.516C49.1056 31.2599 49.0271 30.9611 49.0271 30.6196L49.0271 30.6093C49.0271 30.2713 49.1107 29.981 49.2781 29.7385C49.4488 29.4961 49.6964 29.3065 50.0208 29.1699C50.3486 29.0299 50.7465 28.9463 51.2143 28.919L53.3145 28.7909L53.3145 29.7027L51.4397 29.8256C51.1187 29.8427 50.8797 29.911 50.7226 30.0305C50.5655 30.15 50.4869 30.3122 50.4869 30.5171L50.4869 30.5274C50.4869 30.7425 50.5689 30.9116 50.7328 31.0345C50.8967 31.1574 51.1085 31.2189 51.368 31.2189C51.6002 31.2189 51.8068 31.1728 51.9878 31.0806C52.1688 30.9884 52.3122 30.8638 52.4181 30.7067C52.5239 30.5462 52.5769 30.3669 52.5769 30.1688L52.5769 28.3709C52.5769 28.125 52.4949 27.9372 52.331 27.8074C52.1705 27.6742 51.9366 27.6076 51.6292 27.6076C51.3595 27.6076 51.1392 27.6537 50.9684 27.7459C50.8011 27.8347 50.6884 27.9628 50.6304 28.1301L50.6201 28.1506H49.2371L49.2422 28.1045C49.2832 27.7732 49.4078 27.4847 49.6161 27.2388C49.8279 26.9929 50.1113 26.8017 50.4664 26.6651C50.825 26.5285 51.2399 26.4602 51.7112 26.4602C52.2098 26.4602 52.6332 26.537 52.9815 26.6907C53.3299 26.841 53.5945 27.0595 53.7755 27.3464C53.9599 27.6298 54.0521 27.9713 54.0521 28.3709L54.0521 32.2229H52.5769L52.5769 31.475H52.4847C52.3891 31.6Line truncated
|
||||
<g clip-path="url(#clip1_923_1196)">
|
||||
<rect x="35.6624" y="41.8613" width="12.3981" height="12.3981" rx="1.9074" fill="#1E96EB"/>
|
||||
<path d="M37.933 50.8149L37.933 50.1262L39.8052 48.2104C40.0639 47.9492 40.2644 47.7341 40.4069 47.5652C40.552 47.3937 40.6536 47.2433 40.7117 47.114C40.7697 46.9821 40.7988 46.8435 40.7988 46.6984L40.7988 46.6865C40.7988 46.5124 40.7605 46.3567 40.684 46.2194C40.6074 46.0822 40.4979 45.9754 40.3554 45.8988C40.2129 45.8197 40.0427 45.7801 39.8448 45.7801C39.6443 45.7801 39.4675 45.8223 39.3144 45.9068C39.1614 45.9886 39.0426 46.1033 38.9582 46.2511C38.8737 46.3989 38.8315 46.5717 38.8315 46.7696L38.8276 46.7855L37.8776 46.7815L37.8736 46.7696C37.8736 46.4134 37.9594 46.0994 38.1309 45.8276C38.3024 45.5558 38.5399 45.3434 38.8434 45.1903C39.1469 45.0373 39.4978 44.9607 39.8963 44.9607C40.2657 44.9607 40.5943 45.0307 40.8819 45.1705C41.1722 45.3104 41.3991 45.503 41.5627 45.7484C41.7263 45.9938 41.8081 46.2775 41.8081 46.5994L41.8081 46.6113C41.8081 46.8251 41.7672 47.0348 41.6854 47.2407C41.6036 47.4439 41.4637 47.6668 41.2658 47.9096C41.0706 48.1524 40.8001 48.4413 40.4544 48.7765L39.0413 50.15L39.3105 49.6987L39.3105 50.15L39.0413 49.9718H41.8952L41.8952 50.8149H37.933ZM44.2234 50.8149L44.2234 46.1086H44.1522L42.7312 47.11L42.7312 46.1522L44.2234 45.1032H45.2407L45.2407 50.8149H44.2234Z" fill="white"/>
|
||||
<g clip-path="url(#clip2_923_1196)">
|
||||
<path d="M20.5281 50.8145L20.5281 50.1257L22.4003 48.2099C22.6589 47.9487 22.8595 47.7336 23.002 47.5648C23.1471 47.3932 23.2487 47.2428 23.3068 47.1135C23.3648 46.9816 23.3939 46.843 23.3939 46.6979L23.3939 46.686C23.3939 46.5119 23.3556 46.3562 23.2791 46.219C23.2025 46.0817 23.093 45.9749 22.9505 45.8983C22.808 45.8192 22.6378 45.7796 22.4399 45.7796C22.2394 45.7796 22.0626 45.8218 21.9095 45.9063C21.7565 45.9881 21.6377 46.1029 21.5533 46.2506C21.4688 46.3984 21.4266 46.5712 21.4266 46.7692L21.4227 46.785L20.4727 46.781L20.4687 46.7692C20.4687 46.4129 20.5545 46.0989 20.726 45.8271C20.8975 45.5553 21.135 45.3429 21.4385 45.1898C21.742 45.0368 22.0929 44.9602 22.4914 44.9602C22.8608 44.9602 23.1893 45.0302 23.477 45.17C23.7672 45.3099 23.9942 45.5025 24.1578 45.7479C24.3214 45.9933 24.4032 46.277 24.4032 46.599L24.4032 46.6108C24.4032 46.8246 24.3623 47.0344 24.2805 47.2402C24.1987 47.4434 24.0588 47.6663 23.8609 47.9091C23.6657 48.1519 23.3952 48.4408 23.0495 48.776L21.6364 50.1495L21.9056 49.6982L21.9056 50.1495L21.6364 49.9714H24.4903L24.4903 50.8145H20.5281ZM27.5112 50.9569C27.0573 50.9569 26.6681 50.8356 26.3435 50.5928C26.0216 50.35 25.7735 50.0043 25.5994 49.5557C25.4252 49.1071 25.3381 48.5754 25.3381 47.9606L25.3381 47.9527C25.3381 47.3378 25.4252 46.8074 25.5994 46.3615C25.7735 45.9129 26.0216 45.5672 26.3435 45.3244C26.6681 45.0816 27.0573 44.9602 27.5112 44.9602C27.9651 44.9602 28.3543 45.0816 28.6789 45.3244C29.0034 45.5672 29.2528 45.9129 29.427 46.3615C29.6011 46.8074 29.6882 47.3378 29.6882 47.9527L29.6882 47.9606C29.6882 48.5754 29.6011 49.1071 29.427 49.5557C29.2528 50.0043 29.0034 50.35 28.6789 50.5928C28.3543 50.8356 27.9651 50.9569 27.5112 50.9569ZM27.5112 50.1297C27.754 50.1297 27.9611 50.0426 28.1326 49.8684C28.3041 49.6943 28.4348 49.4462 28.5245 49.1243C28.6168 48.7997 28.663 48.4118 28.663 47.9606L28.663 47.9527C28.663 47.5014 28.6168 47.1148 28.5245 46.7929C28.4348 46.4683 28.3041 46.2203 28.1326 46.0488C27.9611 45.8746 27.754 45.7875 27.5112 45.7875C27.2684 45.7875 27.0613 45.8746 26.8897 46.0488C26.7209 46.2203 26.5902 46.4683 26.4979 46.7929C26.4082 47.1148 26.3633 47.5014 26.3633 47.9527L26.3633 47.9606C26.3633 48.4118 26.4082 48.7997 26.4979 49.1243C26.5902 49.4462 26.7209 49.6943 26.8897 49.8684C27.0613 50.0426 27.2684 50.1297 27.5112 50.1297Z" fill="#929292"/>
|
||||
</g>
|
||||
<path d="M54.8612 50.8149L54.8612 50.1262L56.7334 48.2104C56.992 47.9492 57.1926 47.7341 57.3351 47.5652C57.4802 47.3937 57.5818 47.2433 57.6398 47.114C57.6979 46.9821 57.7269 46.8435 57.7269 46.6984L57.7269 46.6865C57.7269 46.5124 57.6887 46.3567 57.6121 46.2194C57.5356 46.0822 57.4261 45.9754 57.2836 45.8988C57.1411 45.8197 56.9709 45.7801 56.773 45.7801C56.5724 45.7801 56.3956 45.8223 56.2426 45.9068C56.0895 45.9886 55.9708 46.1033 55.8864 46.2511C55.8019 46.3989 55.7597 46.5717 55.7597 46.7696L55.7557 46.7855L54.8058 46.7815L54.8018 46.7696C54.8018 46.4134 54.8876 46.0994 55.0591 45.8276C55.2306 45.5558 55.4681 45.3434 55.7716 45.1903C56.075 45.0373 56.426 44.9607 56.8244 44.9607C57.1939 44.9607 57.5224 45.0307 57.81 45.1705C58.1003 45.3104 58.3273 45.503 58.4909 45.7484C58.6545 45.9938 58.7363 46.2775 58.7363 46.5994L58.7363 46.6113C58.7363 46.8251 58.6954 47.0348 58.6136 47.2407C58.5318 47.4439 58.3919 47.6668 58.194 47.9096C57.9987 48.1524 57.7282 48.4413 57.3826 48.7765L55.9695 50.15L56.2386 49.6987L56.2386 50.15L55.9695 49.9718H58.8233L58.8234 50.8149H54.8612ZM59.7543 50.8149L59.7543 50.1262L61.6265 48.2104C61.8852 47.9492 62.0857 47.7341 62.2282 47.5652C62.3733 47.3937 62.4749 47.2433 62.533 47.114C62.591 46.9821 62.6201 46.8435 62.6201 46.6984L62.6201 46.6865C62.6201 46.5124 62.5818 46.3567 62.5053 46.2194C62.4287 46.0822 62.3192 45.9754 62.1767 45.8988C62.0342 45.8197 61.864 45.7801 61.6661 45.7801C61.4656 45.7801 61.2888 45.8223 61.1357 45.9068C60.9827 45.9886 60.8639 46.1033 60.7795 46.2511C60.695 46.3989 60.6528 46.5717 60.6528 46.7696L60.6489 46.7855L59.6989 46.7815L59.6949 46.7696C59.6949 46.4134 59.7807 46.0994 59.9522 45.8276C60.1237 45.5558 60.3612 45.3434 60.6647 45.1903C60.9682 45.0373 61.3191 44.9607 61.7176 44.9607C62.087 44.9607 62.4156 45.0307 62.7032 45.1705C62.9935 45.3104 63.2204 45.503 63.384 45.7484C63.5476 45.9938 63.6294 46.2775 63.6294 46.5994L63.6294 46.6113C63.6294 46.8251 63.5885 47.0348 63.5067 47.2407C63.4249 47.4439 63.285 47.6668 63.0871 47.9096C62.8919 48.1524 62.6214 48.4413 62.2757 48.7765L60.8626 50.15L61.1318 49.6987L61.1318 50.15L60.8626 49.9718H63.7165L63.7165 50.8149H59.7543Z" fill="#929292"/>
|
||||
<g clip-path="url(#clip3_923_1196)">
|
||||
<path d="M72.0277 50.8152L72.0277 50.1265L73.8999 48.2107C74.1585 47.9494 74.3591 47.7344 74.5016 47.5655C74.6467 47.394 74.7483 47.2436 74.8064 47.1143C74.8644 46.9823 74.8935 46.8438 74.8935 46.6986L74.8935 46.6868C74.8935 46.5126 74.8552 46.3569 74.7787 46.2197C74.7021 46.0825 74.5926 45.9756 74.4501 45.8991C74.3076 45.8199 74.1374 45.7803 73.9395 45.7803C73.739 45.7803 73.5622 45.8226 73.4091 45.907C73.2561 45.9888 73.1373 46.1036 73.0529 46.2514C72.9684 46.3991 72.9262 46.572 72.9262 46.7699L72.9223 46.7857L71.9723 46.7818L71.9683 46.7699C71.9683 46.4136 72.0541 46.0996 72.2256 45.8278C72.3971 45.556 72.6346 45.3436 72.9381 45.1906C73.2416 45.0375 73.5925 44.961 73.991 44.961C74.3604 44.961 74.6889 45.0309 74.9766 45.1708C75.2668 45.3106 75.4938 45.5033 75.6574 45.7487C75.821 45.9941 75.9028 46.2777 75.9028 46.5997L75.9028 46.6116C75.9028 46.8253 75.8619 47.0351 75.7801 47.2409C75.6983 47.4441 75.5584 47.6671 75.3605 47.9099C75.1653 48.1526 74.8948 48.4416 74.5491 48.7767L73.136 50.1502L73.4052 49.699L73.4052 50.1502L73.136 49.9721H75.9899L75.9899 50.8152H72.0277ZM78.9831 50.93C78.5661 50.93 78.2007 50.86 77.8867 50.7202C77.5753 50.5803 77.3285 50.3864 77.1465 50.1383C76.967 49.8876 76.8641 49.5987 76.8377 49.2715L76.8338 49.224H77.8075L77.8114 49.2675C77.8299 49.4285 77.8893 49.5723 77.9896 49.699C78.0898 49.823 78.2244 49.9206 78.3933 49.9919C78.5622 50.0605 78.7588 50.0948 78.9831 50.0948C79.2021 50.0948 79.3934 50.0565 79.557 49.98C79.7233 49.9035 79.8526 49.7979 79.9449 49.6633C80.0373 49.5288 80.0835 49.3731 80.0835 49.1963L80.0835 49.1884C80.0835 48.8875 79.9792 48.6566 79.7708 48.4957C79.5623 48.3347 79.2747 48.2542 78.9079 48.2542H78.231L78.231 47.4942H78.8881C79.0965 47.4942 79.2799 47.4573 79.4383 47.3834C79.5966 47.3095 79.7193 47.2092 79.8064 47.0826C79.8935 46.9533 79.937 46.8055 79.937 46.6393L79.937 46.6313C79.937 46.4545 79.8987 46.3041 79.8222 46.1801C79.7483 46.0561 79.6388 45.9611 79.4937 45.8951C79.3512 45.8291 79.1784 45.7962 78.9752 45.7962C78.7746 45.7962 78.5965 45.8305 78.4408 45.8991C78.2878 45.9677 78.165 46.0653 78.0727 46.192C77.9803 46.316 77.9249 46.4625 77.9064 46.6313L77.9025 46.6709H76.9565L76.9604 46.6234C76.9895 46.2936 77.0897 46.0073 77.2613 45.7645C77.4354 45.5191 77.6676 45.3291 77.9579 45.1945C78.2508 45.0573 78.5899 44.9887 78.9752 44.9887C79.3683 44.9887 79.7101 45.0533 80.0003 45.1826C80.2906 45.3093 80.5149 45.4848 80.6732 45.7091C80.8342 45.9334 80.9147 46.1959 80.9147 46.4968L80.9147 46.5047C80.9147 46.7395 80.8619 46.948 80.7564 47.1301C80.6534 47.3095 80.511 47.4586 80.3289 47.5774C80.1494 47.6961 79.9449 47.7792 79.7153 47.8267L79.7153 47.8465C80.1376 47.8861 80.4766 48.026 80.7326 48.2661C80.9886 48.5036 81.1166 48.8202 81.1166 49.2161L81.1166 49.224C81.1166 49.5565 81.0268 49.852 80.8474 50.1106C80.668 50.3666 80.4173 50.5671 80.0953 50.7123C79.776 50.8574 79.4053 50.93 78.9831 50.93Z" fill="#929292" fill-opacity="0.52"/>
|
||||
</g>
|
||||
<g clip-path="url(#clip4_923_1196)">
|
||||
<path d="M89.1943 50.8149L89.1943 50.1262L91.0665 48.2104C91.3251 47.9492 91.5257 47.7341 91.6682 47.5652C91.8133 47.3937 91.9149 47.2433 91.973 47.114C92.031 46.9821 92.0601 46.8435 92.0601 46.6984L92.0601 46.6865C92.0601 46.5124 92.0218 46.3567 91.9453 46.2194C91.8687 46.0822 91.7592 45.9754 91.6167 45.8988C91.4742 45.8197 91.304 45.7801 91.1061 45.7801C90.9056 45.7801 90.7288 45.8223 90.5757 45.9068C90.4227 45.9886 90.3039 46.1033 90.2195 46.2511C90.135 46.3989 90.0928 46.5717 90.0928 46.7696L90.0889 46.7855L89.1389 46.7815L89.1349 46.7696C89.1349 46.4134 89.2207 46.0994 89.3922 45.8276C89.5637 45.5558 89.8012 45.3434 90.1047 45.1903C90.4082 45.0373 90.7591 44.9607 91.1576 44.9607C91.527 44.9607 91.8555 45.0307 92.1432 45.1705C92.4334 45.3104 92.6604 45.503 92.824 45.7484C92.9876 45.9938 93.0694 46.2775 93.0694 46.5994L93.0694 46.6113C93.0694 46.8251 93.0285 47.0348 92.9467 47.2407C92.8649 47.4439 92.725 47.6668 92.5271 47.9096C92.3319 48.1524 92.0614 48.4413 91.7157 48.7765L90.3026 50.15L90.5718 49.6987L90.5718 50.15L90.3026 49.9718H93.1565L93.1565 50.8149H89.1943ZM96.6405 50.8149L96.6405 49.7185H93.846L93.846 48.8833C93.9964 48.6274 94.1468 48.3701 94.2972 48.1115C94.4503 47.8529 94.6046 47.5956 94.7603 47.3396C94.9187 47.081 95.0757 46.8264 95.2314 46.5757C95.3897 46.3224 95.5467 46.073 95.7024 45.8276C95.8607 45.5795 96.0191 45.3381 96.1774 45.1032H97.6142L97.6142 48.8754H98.3861L98.3861 49.7185H97.6142L97.6142 50.8149H96.6405ZM94.796 48.8992H96.6563L96.6563 45.9186H96.597C96.4808 46.0981 96.3608 46.2828 96.2368 46.4728C96.1154 46.6628 95.9927 46.8567 95.8686 47.0546C95.7446 47.2525 95.6219 47.4518 95.5005 47.6523C95.3791 47.8502 95.2591 48.0495 95.1403 48.25C95.0216 48.4479 94.9068 48.6445 94.796 48.8398L94.796 48.8992Z" fill="#929292" fill-opacity="0.22"/>
|
||||
</g>
|
||||
<g clip-path="url(#clip5_923_1196)">
|
||||
<path d="M106.361 50.8152L106.361 50.1265L108.233 48.2107C108.492 47.9494 108.692 47.7344 108.835 47.5655C108.98 47.394 109.081 47.2436 109.14 47.1143C109.198 46.9823 109.227 46.8438 109.227 46.6986L109.227 46.6868C109.227 46.5126 109.188 46.3569 109.112 46.2197C109.035 46.0825 108.926 45.9756 108.783 45.8991C108.641 45.8199 108.471 45.7803 108.273 45.7803C108.072 45.7803 107.895 45.8226 107.742 45.907C107.589 45.9888 107.47 46.1036 107.386 46.2514C107.302 46.3991 107.259 46.572 107.259 46.7699L107.255 46.7857L106.305 46.7818L106.301 46.7699C106.301 46.4136 106.387 46.0996 106.559 45.8278C106.73 45.556 106.968 45.3436 107.271 45.1906C107.575 45.0375 107.926 44.961 108.324 44.961C108.694 44.961 109.022 45.0309 109.31 45.1708C109.6 45.3106 109.827 45.5033 109.991 45.7487C110.154 45.9941 110.236 46.2777 110.236 46.5997L110.236 46.6116C110.236 46.8253 110.195 47.0351 110.113 47.2409C110.031 47.4441 109.892 47.6671 109.694 47.9099C109.498 48.1526 109.228 48.4416 108.882 48.7767L107.469 50.1502L107.738 49.699L107.738 50.1502L107.469 49.9721H110.323L110.323 50.8152H106.361ZM113.312 50.9577C112.924 50.9577 112.583 50.8851 112.287 50.74C111.992 50.5948 111.757 50.3983 111.583 50.1502C111.408 49.8995 111.308 49.6185 111.282 49.3071L111.278 49.2556H112.216L112.224 49.2834C112.25 49.439 112.312 49.5802 112.41 49.7069C112.507 49.8335 112.634 49.9351 112.79 50.0117C112.945 50.0856 113.121 50.1225 113.316 50.1225C113.538 50.1225 113.733 50.0737 113.902 49.976C114.074 49.8784 114.207 49.7438 114.302 49.5723C114.397 49.3981 114.444 49.2002 114.444 48.9786L114.444 48.9707C114.444 48.749 114.395 48.5537 114.298 48.3848C114.203 48.2133 114.071 48.0801 113.902 47.9851C113.736 47.8874 113.543 47.8386 113.324 47.8386C113.163 47.8386 113.014 47.8624 112.877 47.9099C112.742 47.9574 112.622 48.0286 112.517 48.1236C112.464 48.1685 112.415 48.2186 112.37 48.274C112.325 48.3268 112.286 48.3848 112.251 48.4482H111.377L111.654 45.1035H115.082L115.082 45.9387H112.449L112.287 47.6803H112.358C112.437 47.551 112.538 47.4415 112.659 47.3517C112.781 47.2594 112.919 47.1895 113.075 47.142C113.23 47.0918 113.397 47.0668 113.573 47.0668C113.932 47.0668 114.249 47.1486 114.523 47.3122C114.801 47.4731 115.018 47.6961 115.177 47.9811C115.335 48.2635 115.414 48.5867 115.414 48.9509L115.414 48.9588C115.414 49.3546 115.324 49.7029 115.145 50.0038C114.968 50.3019 114.721 50.5355 114.405 50.7044C114.088 50.8732 113.724 50.9577 113.312 50.9577Z" fill="#929292" fill-opacity="0.07"/>
|
||||
</g>
|
||||
</g>
|
||||
<rect width="52.6391" height="3.33794" rx="1.66897" transform="matrix(1 -5.50355e-05 -4.36708e-05 1 28.1203 89.6863)" fill="black" fill-opacity="0.07"/>
|
||||
<rect width="52.6391" height="3.33794" rx="1.66897" transform="matrix(1 -5.50355e-05 -4.36708e-05 1 28.1203 98.7463)" fill="black" fill-opacity="0.07"/>
|
||||
<rect x="20.0138" y="97.959" width="4.76849" height="4.76849" rx="0.953698" stroke="#1E96EB" stroke-width="0.953698"/>
|
||||
<rect width="25.273" height="4.29164" rx="2.14582" transform="matrix(1 -4.91764e-05 -4.8916e-05 1 19.4496 61.8904)" fill="black" fill-opacity="0.07"/>
|
||||
<rect width="84.4414" height="3.33794" rx="1.66897" transform="matrix(1 -4.91764e-05 -4.8916e-05 1 19.4496 71.3333)" fill="black" fill-opacity="0.07"/>
|
||||
<rect width="68.6507" height="3.33794" rx="1.66897" transform="matrix(1 -4.91764e-05 -4.8916e-05 1 19.4496 78.4854)" fill="black" fill-opacity="0.07"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.9675 88.4221C20.1774 88.4221 19.5369 89.0626 19.5369 89.8527L19.5369 92.7138C19.5369 93.5038 20.1774 94.1443 20.9675 94.1443H23.8286C24.6186 94.1443 25.2591 93.5038 25.2591 92.7138L25.2591 89.8527C25.2591 89.0626 24.6186 88.4221 23.8286 88.4221H20.9675ZM24.224 90.6013C24.3637 90.4616 24.3637 90.2352 24.224 90.0955C24.0843 89.9559 23.8579 89.9559 23.7182 90.0955L22.1504 91.6633L21.3629 90.8758C21.2233 90.7362 20.9968 90.7362 20.8571 90.8758C20.7175 91.0155 20.7175 91.2419 20.8571 91.3816L21.8975 92.422C22.0372 92.5617 22.2637 92.5617 22.4033 92.422L24.224 90.6013Z" fill="#1E96EB"/>
|
||||
</g>
|
||||
<rect x="10.3571" y="10.357" width="103.238" height="103.238" rx="12.7136" stroke="#E6E6E6" stroke-width="0.238424"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_923_1196" x="0.700874" y="0.700813" width="122.55" height="122.55" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset/>
|
||||
<feGaussianBlur stdDeviation="4.76849"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_923_1196"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_923_1196" result="shape"/>
|
||||
</filter>
|
||||
<clipPath id="clip0_923_1196">
|
||||
<rect x="10.2379" y="10.2378" width="103.476" height="103.476" rx="12.8328" fill="white"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip1_923_1196">
|
||||
<rect width="98.2309" height="12.3981" fill="white" transform="translate(18.4958 41.8613)"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip2_923_1196">
|
||||
<rect x="18.4958" y="41.8613" width="12.3981" height="12.3981" rx="1.9074" fill="white"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip3_923_1196">
|
||||
<rect x="69.9955" y="41.8613" width="12.3981" height="12.3981" rx="1.9074" fill="white"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip4_923_1196">
|
||||
<rect x="87.1621" y="41.8613" width="12.3981" height="12.3981" rx="1.9074" fill="white"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip5_923_1196">
|
||||
<rect x="104.329" y="41.8613" width="12.3981" height="12.3981" rx="1.9074" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
`;
|
||||
|
||||
export const journalPaperDark = `<svg width="124" height="124" viewBox="0 0 124 124" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_d_924_1072)">
|
||||
<g clip-path="url(#clip0_924_1072)">
|
||||
<rect x="10" y="10" width="103.476" height="103.476" rx="12.8328" fill="#141414"/>
|
||||
<path d="M21.3691 32.1746C20.9866 32.1746 20.6434 32.12 20.3395 32.0107C20.0356 31.9049 19.776 31.7512 19.5609 31.5497C19.3491 31.3482 19.1835 31.1075 19.064 30.8274C18.9479 30.544 18.8847 30.2281 18.8745 29.8798L18.8745 29.8388H20.3753L20.3753 29.8696C20.3856 30.0574 20.4283 30.2247 20.5034 30.3716C20.5819 30.5184 20.6912 30.6328 20.8312 30.7148C20.9747 30.7967 21.1471 30.8377 21.3486 30.8377C21.6764 30.8377 21.924 30.7404 22.0913 30.5457C22.2621 30.3511 22.3475 30.0693 22.3475 29.7005L22.3475 24.5935H23.8944L23.8944 29.7108C23.8944 30.2298 23.7954 30.6738 23.5973 31.0426C23.3993 31.408 23.1107 31.688 22.7316 31.8827C22.356 32.0773 21.9018 32.1746 21.3691 32.1746ZM27.7915 32.1029C27.2144 32.1029 26.7175 31.9868 26.3009 31.7546C25.8843 31.519 25.565 31.1826 25.343 30.7455C25.1211 30.305 25.0101 29.7791 25.0101 29.1678L25.0101 29.1575C25.0101 28.5497 25.1228 28.0272 25.3481 27.5901C25.5735 27.153 25.8928 26.8166 26.306 26.581C26.7227 26.3419 27.2178 26.2224 27.7915 26.2224C28.3652 26.2224 28.8587 26.3402 29.2719 26.5759C29.6885 26.8115 30.0095 27.1496 30.2349 27.5901C30.4603 28.0272 30.573 28.5497 30.573 29.1575L30.573 29.1678C30.573 29.7791 30.462 30.305 30.24 30.7455C30.0181 31.1826 29.6988 31.519 29.2821 31.7546C28.8689 31.9868 28.3721 32.1029 27.7915 32.1029ZM27.7915 30.9299C28.0579 30.9299 28.2833 30.8599 28.4677 30.7199C28.6521 30.5799 28.7938 30.3784 28.8928 30.1154C28.9919 29.8525 29.0414 29.5366 29.0414 29.1678L29.0414 29.1575C29.0414 28.7887 28.9919 28.4746 28.8928 28.215C28.7938 27.9521 28.6504 27.7506 28.4626 27.6106C28.2782 27.4671 28.0545 27.3954 27.7915 27.3954C27.5286 27.3954 27.3032 27.4671 27.1154 27.6106C26.931 27.7506 26.7892 27.9521 26.6902 28.215C26.5912 28.4746 26.5417 28.7887 26.5417 29.1575L26.5417 29.1678C26.5417 29.54 26.5895 29.8576 26.6851 30.1206C26.7841 30.3835 26.9258 30.585 27.1103 30.725C27.2981 30.8616 27.5252 30.9299 27.7915 30.9299ZM33.5327 32.1029C33.1127 32.1029 32.7592 32.021 32.4724 31.857C32.1889 31.6931 31.9755 31.4541 31.8321 31.1399C31.6886 30.8223 31.6169 30.4398 31.6169 29.9925L31.6169 26.3453H33.1127L33.1127 29.6493C33.1127 30.0488 33.1912 30.3511 33.3483 30.556C33.5088 30.7609 33.7666 30.8633 34.1218 30.8633C34.3062 30.8633 34.4684 30.8343 34.6084 30.7762C34.7518 30.7148 34.8714 30.6294 34.967 30.5201C35.0626 30.4108 35.1343 30.2793 35.1821 30.1257C35.2333 29.9686 35.2589 29.7944 35.2589 29.6032L35.2589 26.3453H36.7547L36.7547 31.9851H35.2589L35.2589 31.1143H35.1667C35.0814 31.3192 34.9618 31.4968 34.8082 31.647C34.6545 31.7939 34.4701 31.9066 34.255 31.9851C34.0398 32.0637 33.7991 32.1029 33.5327 32.1029ZM38.1316 31.9851L38.1316 26.3453H39.6273L39.6273 27.2213H39.7195C39.8117 26.9139 39.9808 26.6766 40.2266 26.5093C40.4725 26.3385 40.7781 26.2531 41.1435 26.2531C41.246 26.2531 41.345 26.26 41.4406 26.2736C41.5397 26.2873 41.6268 26.3044 41.7019 26.3249L41.7019 27.6311C41.5892 27.6037 41.4748 27.5833 41.3587 27.5696C41.246 27.5525 41.1316 27.544 41.0155 27.544C40.732 27.544 40.4862 27.5969 40.2779 27.7028C40.0695 27.8052 39.909 27.9521 39.7963 28.1433C39.6837 28.3345 39.6273 28.5633 39.6273 28.8297L39.6273 31.9851H38.1316ZM42.628 31.9851L42.628 26.3453H44.1237L44.1237 27.2162H44.2159C44.3457 26.9088 44.5472 26.6663 44.8204 26.4888C45.0936 26.3112 45.4317 26.2224 45.8346 26.2224C46.463 26.2224 46.9411 26.4068 47.2689 26.7756C47.6001 27.141 47.7658 27.6618 47.7658 28.338L47.7658 31.9851H46.27L46.27 28.676C46.27 28.2765 46.1864 27.9743 46.019 27.7694C45.8517 27.5645 45.5904 27.462 45.2353 27.462C45.0065 27.462 44.8084 27.515 44.6411 27.6208C44.4772 27.7233 44.3491 27.8684 44.2569 28.0562C44.1681 28.244 44.1237 28.466 44.1237 28.7221L44.1237 31.9851H42.628ZM50.6281 32.0722C50.273 32.0722 49.9554 32.0039 49.6754 31.8673C49.3988 31.7273 49.1819 31.5309 49.0248 31.2782C48.8677 31.0221 48.7892 30.7233 48.7892 30.3818L48.7892 30.3716C48.7892 30.0335 48.8729 29.7432 49.0402 29.5007C49.2109 29.2583 49.4585 29.0688 49.7829 28.9322C50.1108 28.7921 50.5086 28.7085 50.9765 28.6812L53.0766 28.5531L53.0766 29.4649L51.2019 29.5878C50.8808 29.6049 50.6418 29.6732 50.4847 29.7927C50.3276 29.9122 50.2491 30.0745 50.2491 30.2793L50.2491 30.2896C50.2491 30.5047 50.331 30.6738 50.495 30.7967C50.6589 30.9196 50.8706 30.9811 51.1301 30.9811C51.3624 30.9811 51.569 30.935 51.7499 30.8428C51.9309 30.7506 52.0744 30.626 52.1802 30.4689C52.2861 30.3084 52.339 30.1291 52.339 29.931L52.339 28.1331C52.339 27.8872 52.2571 27.6994 52.0931 27.5696C51.9326 27.4364 51.6987 27.3698 51.3914 27.3698C51.1216 27.3698 50.9013 27.4159 50.7306 27.5081C50.5633 27.5969 50.4506 27.725 50.3925 27.8923L50.3823 27.9128H48.9992L49.0043 27.8667C49.0453 27.5354 49.17 27.2469 49.3783 27.001C49.59 26.7551 49.8734 26.5639 50.2286 26.4273C50.5872 26.2907 51.0021 26.2224 51.4733 26.2224C51.9719 26.2224 52.3954 26.2992 52.7437 26.4529C53.092 26.6032 53.3567 26.8217 53.5377 27.1086C53.7221 27.392 53.8143 27.7335 53.8143 28.1331L53.8143 31.9851H52.339L52.339 31.2372H52.2468C52.1512 31.4114 52.0231 31.5617 51.8626 31.688C5Line truncated
|
||||
<g clip-path="url(#clip1_924_1072)">
|
||||
<rect x="35.4246" y="41.6235" width="12.3981" height="12.3981" rx="1.9074" fill="#1E96EB"/>
|
||||
<path d="M37.6952 50.5769L37.6952 49.8882L39.5675 47.9724C39.8261 47.7112 40.0266 47.4961 40.1691 47.3272C40.3142 47.1557 40.4158 47.0053 40.4739 46.876C40.5319 46.744 40.561 46.6055 40.561 46.4604L40.561 46.4485C40.561 46.2743 40.5227 46.1186 40.4462 45.9814C40.3697 45.8442 40.2601 45.7373 40.1176 45.6608C39.9752 45.5816 39.8049 45.5421 39.607 45.5421C39.4065 45.5421 39.2297 45.5843 39.0766 45.6687C38.9236 45.7505 38.8048 45.8653 38.7204 46.0131C38.636 46.1609 38.5937 46.3337 38.5937 46.5316L38.5898 46.5474L37.6398 46.5435L37.6358 46.5316C37.6358 46.1754 37.7216 45.8613 37.8931 45.5895C38.0647 45.3178 38.3021 45.1053 38.6056 44.9523C38.9091 44.7992 39.26 44.7227 39.6585 44.7227C40.0279 44.7227 40.3565 44.7926 40.6441 44.9325C40.9344 45.0723 41.1613 45.265 41.3249 45.5104C41.4885 45.7558 41.5703 46.0395 41.5703 46.3614L41.5703 46.3733C41.5703 46.587 41.5294 46.7968 41.4476 47.0026C41.3658 47.2058 41.2259 47.4288 41.028 47.6716C40.8328 47.9143 40.5623 48.2033 40.2166 48.5384L38.8035 49.9119L39.0727 49.4607L39.0727 49.9119L38.8035 49.7338H41.6574L41.6574 50.5769H37.6952ZM43.9856 50.5769L43.9856 45.8706H43.9144L42.4934 46.872L42.4934 45.9141L43.9856 44.8652H45.0029L45.0029 50.5769H43.9856Z" fill="white"/>
|
||||
<g clip-path="url(#clip2_924_1072)">
|
||||
<path d="M20.2902 50.5771L20.2902 49.8884L22.1624 47.9726C22.421 47.7114 22.6216 47.4963 22.7641 47.3275C22.9092 47.1559 23.0108 47.0055 23.0689 46.8762C23.1269 46.7443 23.1559 46.6057 23.1559 46.4606L23.1559 46.4487C23.1559 46.2746 23.1177 46.1189 23.0411 45.9817C22.9646 45.8444 22.8551 45.7376 22.7126 45.661C22.5701 45.5819 22.3999 45.5423 22.202 45.5423C22.0015 45.5423 21.8247 45.5845 21.6716 45.669C21.5186 45.7508 21.3998 45.8655 21.3154 46.0133C21.2309 46.1611 21.1887 46.3339 21.1887 46.5318L21.1847 46.5477L20.2348 46.5437L20.2308 46.5318C20.2308 46.1756 20.3166 45.8616 20.4881 45.5898C20.6596 45.318 20.8971 45.1056 21.2006 44.9525C21.504 44.7995 21.855 44.7229 22.2535 44.7229C22.6229 44.7229 22.9514 44.7929 23.2391 44.9327C23.5293 45.0726 23.7563 45.2652 23.9199 45.5106C24.0835 45.756 24.1653 46.0397 24.1653 46.3616L24.1653 46.3735C24.1653 46.5873 24.1244 46.797 24.0426 47.0029C23.9608 47.2061 23.8209 47.429 23.623 47.6718C23.4277 47.9146 23.1573 48.2035 22.8116 48.5387L21.3985 49.9122L21.6676 49.4609L21.6676 49.9122L21.3985 49.734H24.2524L24.2524 50.5771H20.2902ZM27.2733 50.7196C26.8194 50.7196 26.4302 50.5983 26.1056 50.3555C25.7837 50.1127 25.5356 49.767 25.3614 49.3184C25.1873 48.8698 25.1002 48.3381 25.1002 47.7233L25.1002 47.7154C25.1002 47.1005 25.1873 46.5701 25.3614 46.1242C25.5356 45.6756 25.7837 45.3299 26.1056 45.0871C26.4302 44.8443 26.8194 44.7229 27.2733 44.7229C27.7271 44.7229 28.1164 44.8443 28.4409 45.0871C28.7655 45.3299 29.0149 45.6756 29.189 46.1242C29.3632 46.5701 29.4503 47.1005 29.4503 47.7154L29.4503 47.7233C29.4503 48.3381 29.3632 48.8698 29.189 49.3184C29.0149 49.767 28.7655 50.1127 28.4409 50.3555C28.1164 50.5983 27.7271 50.7196 27.2733 50.7196ZM27.2733 49.8924C27.516 49.8924 27.7232 49.8053 27.8947 49.6311C28.0662 49.457 28.1969 49.2089 28.2866 48.887C28.3789 48.5624 28.4251 48.1745 28.4251 47.7233L28.4251 47.7154C28.4251 47.2641 28.3789 46.8775 28.2866 46.5556C28.1969 46.231 28.0662 45.983 27.8947 45.8115C27.7232 45.6373 27.516 45.5502 27.2733 45.5502C27.0305 45.5502 26.8233 45.6373 26.6518 45.8115C26.4829 45.983 26.3523 46.231 26.26 46.5556C26.1702 46.8775 26.1254 47.2641 26.1254 47.7154L26.1254 47.7233C26.1254 48.1745 26.1702 48.5624 26.26 48.887C26.3523 49.2089 26.4829 49.457 26.6518 49.6311C26.8234 49.8053 27.0305 49.8924 27.2733 49.8924Z" fill="#7A7A7A"/>
|
||||
</g>
|
||||
<path d="M54.6233 50.5769L54.6233 49.8882L56.4956 47.9724C56.7542 47.7112 56.9547 47.4961 57.0972 47.3272C57.2423 47.1557 57.3439 47.0053 57.402 46.876C57.46 46.744 57.4891 46.6055 57.4891 46.4604L57.4891 46.4485C57.4891 46.2743 57.4508 46.1186 57.3743 45.9814C57.2978 45.8442 57.1882 45.7373 57.0457 45.6608C56.9033 45.5816 56.733 45.5421 56.5351 45.5421C56.3346 45.5421 56.1578 45.5843 56.0047 45.6687C55.8517 45.7505 55.7329 45.8653 55.6485 46.0131C55.5641 46.1609 55.5218 46.3337 55.5218 46.5316L55.5179 46.5474L54.5679 46.5435L54.5639 46.5316C54.5639 46.1754 54.6497 45.8613 54.8212 45.5895C54.9928 45.3178 55.2302 45.1053 55.5337 44.9523C55.8372 44.7992 56.1881 44.7227 56.5866 44.7227C56.956 44.7227 57.2846 44.7926 57.5722 44.9325C57.8625 45.0723 58.0894 45.265 58.253 45.5104C58.4166 45.7558 58.4984 46.0395 58.4984 46.3614L58.4984 46.3733C58.4984 46.587 58.4575 46.7968 58.3757 47.0026C58.2939 47.2058 58.154 47.4288 57.9561 47.6716C57.7609 47.9143 57.4904 48.2033 57.1447 48.5384L55.7316 49.9119L56.0008 49.4607L56.0008 49.9119L55.7316 49.7338H58.5855L58.5855 50.5769H54.6233ZM59.5165 50.5769L59.5165 49.8882L61.3887 47.9724C61.6473 47.7112 61.8478 47.4961 61.9903 47.3272C62.1355 47.1557 62.2371 47.0053 62.2951 46.876C62.3532 46.744 62.3822 46.6055 62.3822 46.4604L62.3822 46.4485C62.3822 46.2743 62.3439 46.1186 62.2674 45.9814C62.1909 45.8442 62.0814 45.7373 61.9389 45.6608C61.7964 45.5816 61.6262 45.5421 61.4283 45.5421C61.2277 45.5421 61.0509 45.5843 60.8979 45.6687C60.7448 45.7505 60.6261 45.8653 60.5416 46.0131C60.4572 46.1609 60.415 46.3337 60.415 46.5316L60.411 46.5474L59.461 46.5435L59.4571 46.5316C59.4571 46.1754 59.5428 45.8613 59.7144 45.5895C59.8859 45.3178 60.1234 45.1053 60.4268 44.9523C60.7303 44.7992 61.0813 44.7227 61.4797 44.7227C61.8492 44.7227 62.1777 44.7926 62.4653 44.9325C62.7556 45.0723 62.9825 45.265 63.1461 45.5104C63.3098 45.7558 63.3916 46.0395 63.3916 46.3614L63.3916 46.3733C63.3916 46.587 63.3507 46.7968 63.2688 47.0026C63.187 47.2058 63.0472 47.4288 62.8493 47.6716C62.654 47.9143 62.3835 48.2033 62.0378 48.5384L60.6248 49.9119L60.8939 49.4607L60.8939 49.9119L60.6248 49.7338H63.4786L63.4786 50.5769H59.5165Z" fill="#7A7A7A"/>
|
||||
<g clip-path="url(#clip3_924_1072)">
|
||||
<path d="M71.7899 50.5771L71.7899 49.8884L73.6621 47.9726C73.9207 47.7114 74.1213 47.4963 74.2638 47.3275C74.4089 47.1559 74.5105 47.0055 74.5686 46.8762C74.6266 46.7443 74.6556 46.6057 74.6556 46.4606L74.6556 46.4487C74.6556 46.2746 74.6174 46.1189 74.5408 45.9817C74.4643 45.8444 74.3548 45.7376 74.2123 45.661C74.0698 45.5819 73.8996 45.5423 73.7017 45.5423C73.5012 45.5423 73.3244 45.5845 73.1713 45.669C73.0182 45.7508 72.8995 45.8655 72.8151 46.0133C72.7306 46.1611 72.6884 46.3339 72.6884 46.5318L72.6844 46.5477L71.7345 46.5437L71.7305 46.5318C71.7305 46.1756 71.8163 45.8616 71.9878 45.5898C72.1593 45.318 72.3968 45.1056 72.7003 44.9525C73.0037 44.7995 73.3547 44.7229 73.7532 44.7229C74.1226 44.7229 74.4511 44.7929 74.7388 44.9327C75.029 45.0726 75.256 45.2652 75.4196 45.5106C75.5832 45.756 75.665 46.0397 75.665 46.3616L75.665 46.3735C75.665 46.5873 75.6241 46.797 75.5423 47.0029C75.4605 47.2061 75.3206 47.429 75.1227 47.6718C74.9274 47.9146 74.657 48.2035 74.3113 48.5387L72.8982 49.9122L73.1673 49.4609L73.1673 49.9122L72.8982 49.734H75.7521L75.7521 50.5771H71.7899ZM78.7453 50.6919C78.3283 50.6919 77.9628 50.622 77.6488 50.4822C77.3374 50.3423 77.0907 50.1483 76.9086 49.9003C76.7292 49.6496 76.6263 49.3607 76.5999 49.0334L76.5959 48.9859H77.5697L77.5736 49.0295C77.5921 49.1905 77.6515 49.3343 77.7517 49.4609C77.852 49.585 77.9866 49.6826 78.1555 49.7538C78.3244 49.8224 78.521 49.8568 78.7453 49.8568C78.9643 49.8568 79.1556 49.8185 79.3192 49.742C79.4854 49.6654 79.6147 49.5599 79.7071 49.4253C79.7995 49.2907 79.8456 49.135 79.8456 48.9582L79.8456 48.9503C79.8456 48.6495 79.7414 48.4186 79.5329 48.2576C79.3245 48.0967 79.0368 48.0162 78.67 48.0162H77.9932L77.9932 47.2562H78.6503C78.8587 47.2562 79.0421 47.2193 79.2005 47.1454C79.3588 47.0715 79.4815 46.9712 79.5686 46.8445C79.6556 46.7152 79.6992 46.5675 79.6992 46.4012L79.6992 46.3933C79.6992 46.2165 79.6609 46.0661 79.5844 45.9421C79.5105 45.8181 79.401 45.7231 79.2559 45.6571C79.1134 45.5911 78.9405 45.5581 78.7373 45.5581C78.5368 45.5581 78.3587 45.5924 78.203 45.661C78.0499 45.7296 77.9272 45.8273 77.8349 45.9539C77.7425 46.078 77.6871 46.2244 77.6686 46.3933L77.6647 46.4329H76.7186L76.7226 46.3854C76.7516 46.0555 76.8519 45.7692 77.0234 45.5265C77.1976 45.2811 77.4298 45.0911 77.7201 44.9565C78.013 44.8193 78.3521 44.7507 78.7373 44.7507C79.1305 44.7507 79.4722 44.8153 79.7625 44.9446C80.0528 45.0713 80.2771 45.2467 80.4354 45.471C80.5964 45.6953 80.6769 45.9579 80.6769 46.2587L80.6769 46.2666C80.6769 46.5015 80.6241 46.71 80.5185 46.892C80.4156 47.0715 80.2731 47.2206 80.091 47.3393C79.9116 47.4581 79.7071 47.5412 79.4775 47.5887L79.4775 47.6085C79.8997 47.6481 80.2388 47.7879 80.4948 48.0281C80.7508 48.2655 80.8787 48.5822 80.8787 48.978L80.8787 48.9859C80.8787 49.3184 80.789 49.614 80.6096 49.8726C80.4301 50.1286 80.1795 50.3291 79.8575 50.4742C79.5382 50.6194 79.1675 50.6919 78.7453 50.6919Z" fill="#929292" fill-opacity="0.52"/>
|
||||
</g>
|
||||
<g clip-path="url(#clip4_924_1072)">
|
||||
<path d="M88.9565 50.5769L88.9565 49.8882L90.8287 47.9724C91.0874 47.7112 91.2879 47.4961 91.4304 47.3272C91.5755 47.1557 91.6771 47.0053 91.7352 46.876C91.7932 46.744 91.8223 46.6055 91.8223 46.4604L91.8223 46.4485C91.8223 46.2743 91.784 46.1186 91.7075 45.9814C91.6309 45.8442 91.5214 45.7373 91.3789 45.6608C91.2364 45.5816 91.0662 45.5421 90.8683 45.5421C90.6678 45.5421 90.491 45.5843 90.3379 45.6687C90.1849 45.7505 90.0661 45.8653 89.9817 46.0131C89.8972 46.1609 89.855 46.3337 89.855 46.5316L89.8511 46.5474L88.9011 46.5435L88.8971 46.5316C88.8971 46.1754 88.9829 45.8613 89.1544 45.5895C89.3259 45.3178 89.5634 45.1053 89.8669 44.9523C90.1704 44.7992 90.5213 44.7227 90.9198 44.7227C91.2892 44.7227 91.6178 44.7926 91.9054 44.9325C92.1957 45.0723 92.4226 45.265 92.5862 45.5104C92.7498 45.7558 92.8316 46.0395 92.8316 46.3614L92.8316 46.3733C92.8316 46.587 92.7907 46.7968 92.7089 47.0026C92.6271 47.2058 92.4872 47.4288 92.2893 47.6716C92.0941 47.9143 91.8236 48.2033 91.4779 48.5384L90.0648 49.9119L90.334 49.4607L90.334 49.9119L90.0648 49.7338H92.9187L92.9187 50.5769H88.9565ZM96.4027 50.5769L96.4027 49.4805H93.6082L93.6082 48.6453C93.7586 48.3893 93.909 48.132 94.0594 47.8734C94.2125 47.6148 94.3669 47.3576 94.5225 47.1016C94.6809 46.843 94.8379 46.5883 94.9936 46.3377C95.1519 46.0843 95.3089 45.835 95.4646 45.5895C95.6229 45.3415 95.7813 45.1 95.9396 44.8652H97.3764L97.3764 48.6374H98.1483L98.1483 49.4805H97.3764L97.3764 50.5769H96.4027ZM94.5582 48.6611H96.4185L96.4185 45.6806H96.3592C96.2431 45.86 96.123 46.0447 95.999 46.2347C95.8776 46.4247 95.7549 46.6187 95.6308 46.8166C95.5068 47.0145 95.3841 47.2137 95.2627 47.4143C95.1413 47.6122 95.0213 47.8114 94.9025 48.012C94.7838 48.2099 94.669 48.4065 94.5582 48.6018L94.5582 48.6611Z" fill="#929292" fill-opacity="0.17"/>
|
||||
</g>
|
||||
<g clip-path="url(#clip5_924_1072)">
|
||||
<path d="M106.123 50.5771L106.123 49.8884L107.995 47.9726C108.254 47.7114 108.454 47.4963 108.597 47.3275C108.742 47.1559 108.844 47.0055 108.902 46.8762C108.96 46.7443 108.989 46.6057 108.989 46.4606L108.989 46.4487C108.989 46.2746 108.951 46.1189 108.874 45.9817C108.797 45.8444 108.688 45.7376 108.545 45.661C108.403 45.5819 108.233 45.5423 108.035 45.5423C107.834 45.5423 107.657 45.5845 107.504 45.669C107.351 45.7508 107.233 45.8655 107.148 46.0133C107.064 46.1611 107.022 46.3339 107.022 46.5318L107.018 46.5477L106.068 46.5437L106.064 46.5318C106.064 46.1756 106.149 45.8616 106.321 45.5898C106.492 45.318 106.73 45.1056 107.033 44.9525C107.337 44.7995 107.688 44.7229 108.086 44.7229C108.456 44.7229 108.784 44.7929 109.072 44.9327C109.362 45.0726 109.589 45.2652 109.753 45.5106C109.916 45.756 109.998 46.0397 109.998 46.3616L109.998 46.3735C109.998 46.5873 109.957 46.797 109.875 47.0029C109.794 47.2061 109.654 47.429 109.456 47.6718C109.261 47.9146 108.99 48.2035 108.644 48.5387L107.231 49.9122L107.5 49.4609L107.5 49.9122L107.231 49.734H110.085L110.085 50.5771H106.123ZM113.074 50.7196C112.687 50.7196 112.345 50.6471 112.049 50.5019C111.754 50.3568 111.519 50.1602 111.345 49.9122C111.171 49.6615 111.07 49.3804 111.044 49.0691L111.04 49.0176H111.978L111.986 49.0453C112.012 49.201 112.074 49.3422 112.172 49.4688C112.27 49.5955 112.396 49.6971 112.552 49.7736C112.708 49.8475 112.883 49.8845 113.078 49.8845C113.3 49.8845 113.495 49.8356 113.664 49.738C113.836 49.6404 113.969 49.5058 114.064 49.3343C114.159 49.1601 114.206 48.9622 114.206 48.7405L114.206 48.7326C114.206 48.511 114.158 48.3157 114.06 48.1468C113.965 47.9753 113.833 47.842 113.664 47.747C113.498 47.6494 113.305 47.6006 113.086 47.6006C112.925 47.6006 112.776 47.6243 112.639 47.6718C112.504 47.7193 112.384 47.7906 112.279 47.8856C112.226 47.9304 112.177 47.9806 112.132 48.036C112.088 48.0887 112.048 48.1468 112.014 48.2101H111.139L111.416 44.8654H114.844L114.844 45.7006H112.212L112.049 47.4422H112.12C112.2 47.3129 112.3 47.2034 112.421 47.1137C112.543 47.0213 112.681 46.9514 112.837 46.9039C112.993 46.8538 113.159 46.8287 113.336 46.8287C113.695 46.8287 114.011 46.9105 114.286 47.0741C114.563 47.2351 114.78 47.4581 114.939 47.7431C115.097 48.0254 115.176 48.3487 115.176 48.7128L115.176 48.7207C115.176 49.1166 115.087 49.4649 114.907 49.7657C114.73 50.0639 114.484 50.2974 114.167 50.4663C113.85 50.6352 113.486 50.7196 113.074 50.7196Z" fill="#929292" fill-opacity="0.1"/>
|
||||
</g>
|
||||
</g>
|
||||
<rect width="52.6391" height="3.33794" rx="1.66897" transform="matrix(1 -5.50355e-05 -4.36708e-05 1 27.8824 89.4485)" fill="white" fill-opacity="0.09"/>
|
||||
<rect width="52.6391" height="3.33794" rx="1.66897" transform="matrix(1 -5.50355e-05 -4.36708e-05 1 27.8824 98.5085)" fill="white" fill-opacity="0.09"/>
|
||||
<rect x="19.7759" y="97.7212" width="4.76849" height="4.76849" rx="0.953698" stroke="#1E96EB" stroke-width="0.953698"/>
|
||||
<rect width="25.273" height="4.29164" rx="2.14582" transform="matrix(1 -4.91764e-05 -4.8916e-05 1 19.2117 61.6526)" fill="white" fill-opacity="0.09"/>
|
||||
<rect width="84.4414" height="3.33794" rx="1.66897" transform="matrix(1 -4.91764e-05 -4.8916e-05 1 19.2117 71.0955)" fill="white" fill-opacity="0.09"/>
|
||||
<rect width="68.6507" height="3.33794" rx="1.66897" transform="matrix(1 -4.91764e-05 -4.8916e-05 1 19.2117 78.2476)" fill="white" fill-opacity="0.09"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.7296 88.1843C19.9395 88.1843 19.2991 88.8248 19.2991 89.6149L19.2991 92.476C19.2991 93.266 19.9396 93.9065 20.7296 93.9065H23.5907C24.3808 93.9065 25.0213 93.266 25.0213 92.476L25.0213 89.6149C25.0213 88.8248 24.3808 88.1843 23.5907 88.1843H20.7296ZM23.9862 90.3635C24.1258 90.2238 24.1258 89.9974 23.9862 89.8577C23.8465 89.7181 23.6201 89.7181 23.4804 89.8577L21.9126 91.4255L21.1251 90.638C20.9854 90.4984 20.759 90.4984 20.6193 90.638C20.4796 90.7777 20.4796 91.0041 20.6193 91.1438L21.6597 92.1842C21.7994 92.3239 22.0258 92.3239 22.1655 92.1842L23.9862 90.3635Z" fill="#1E96EB"/>
|
||||
</g>
|
||||
<rect x="10.1192" y="10.1192" width="103.238" height="103.238" rx="12.7136" stroke="#414141" stroke-width="0.238424"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_924_1072" x="0.46302" y="0.46302" width="122.55" height="122.55" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset/>
|
||||
<feGaussianBlur stdDeviation="4.76849"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_924_1072"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_924_1072" result="shape"/>
|
||||
</filter>
|
||||
<clipPath id="clip0_924_1072">
|
||||
<rect x="10" y="10" width="103.476" height="103.476" rx="12.8328" fill="white"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip1_924_1072">
|
||||
<rect width="98.2309" height="12.3981" fill="white" transform="translate(18.258 41.6235)"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip2_924_1072">
|
||||
<rect x="18.258" y="41.6235" width="12.3981" height="12.3981" rx="1.9074" fill="white"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip3_924_1072">
|
||||
<rect x="69.7577" y="41.6235" width="12.3981" height="12.3981" rx="1.9074" fill="white"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip4_924_1072">
|
||||
<rect x="86.9243" y="41.6235" width="12.3981" height="12.3981" rx="1.9074" fill="white"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip5_924_1072">
|
||||
<rect x="104.091" y="41.6235" width="12.3981" height="12.3981" rx="1.9074" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
`;
|
||||
+4
@@ -28,6 +28,8 @@ import type { HTMLAttributes, PropsWithChildren, ReactNode } from 'react';
|
||||
import { useCallback, useMemo, useRef, useState } from 'react';
|
||||
|
||||
import * as styles from './journal.css';
|
||||
import { JournalTemplateOnboarding } from './template-onboarding';
|
||||
import { JournalTemplateSetting } from './template-setting';
|
||||
|
||||
/**
|
||||
* @internal
|
||||
@@ -156,12 +158,14 @@ export const EditorJournalPanel = () => {
|
||||
cellSize={34}
|
||||
/>
|
||||
</div>
|
||||
<JournalTemplateOnboarding />
|
||||
{journalDate ? (
|
||||
<>
|
||||
<JournalConflictBlock date={journalDate} />
|
||||
<JournalDailyCountBlock date={journalDate} />
|
||||
</>
|
||||
) : null}
|
||||
<JournalTemplateSetting />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
+3
@@ -36,9 +36,12 @@ const interactive = style({
|
||||
});
|
||||
export const calendar = style({
|
||||
padding: '16px',
|
||||
paddingBottom: 0,
|
||||
marginBottom: 10,
|
||||
selectors: {
|
||||
'&[data-mobile=true]': {
|
||||
padding: '8px 16px',
|
||||
marginBottom: 0,
|
||||
},
|
||||
},
|
||||
});
|
||||
+134
@@ -0,0 +1,134 @@
|
||||
import { cssVarV2 } from '@toeverything/theme/v2';
|
||||
import { keyframes, style } from '@vanilla-extract/css';
|
||||
|
||||
type Timeline = {
|
||||
duration: string;
|
||||
delay: string;
|
||||
easing: string;
|
||||
fill?: 'forwards' | 'backwards' | 'both' | 'none';
|
||||
keyframes: Parameters<typeof keyframes>[0];
|
||||
};
|
||||
|
||||
/**
|
||||
* Timeline for the onboarding animation
|
||||
*/
|
||||
export const timeline: Record<'container' | 'card' | 'paper', Timeline> = {
|
||||
container: {
|
||||
duration: '0.23s',
|
||||
delay: '0s',
|
||||
easing: 'ease-out',
|
||||
keyframes: {
|
||||
from: { height: 0 },
|
||||
to: { height: 140 },
|
||||
},
|
||||
},
|
||||
card: {
|
||||
duration: '0.5s',
|
||||
delay: '0.1s',
|
||||
easing: 'cubic-bezier(0,1.35,.17,.96)',
|
||||
fill: 'forwards',
|
||||
keyframes: {
|
||||
from: { transform: 'translateY(100%) scale(0.24)' },
|
||||
to: { transform: 'translateY(0) scale(1)' },
|
||||
},
|
||||
},
|
||||
paper: {
|
||||
duration: '0.5s',
|
||||
delay: '0.3s',
|
||||
easing: 'cubic-bezier(0,1.06,0,1.09)',
|
||||
fill: 'forwards',
|
||||
keyframes: {
|
||||
from: { transform: 'translate(100px, 100px) rotate(50deg)' },
|
||||
to: { transform: 'translate(22px, 42px) rotate(-8.71deg)' },
|
||||
},
|
||||
},
|
||||
};
|
||||
const animation = (tl: Timeline) => ({
|
||||
animationName: keyframes(tl.keyframes),
|
||||
animationDuration: tl.duration,
|
||||
animationTimingFunction: tl.easing,
|
||||
animationDelay: tl.delay,
|
||||
animationFillMode: tl.fill,
|
||||
});
|
||||
|
||||
export const container = style({
|
||||
paddingTop: 8,
|
||||
paddingLeft: 16,
|
||||
paddingRight: 16,
|
||||
paddingBottom: 8,
|
||||
marginBottom: 10,
|
||||
width: '100%',
|
||||
height: timeline.container.keyframes.to.height,
|
||||
overflow: 'hidden',
|
||||
...animation(timeline.container),
|
||||
|
||||
selectors: {
|
||||
'&[data-animation-played="true"]': {
|
||||
animation: 'none',
|
||||
height: timeline.container.keyframes.to.height,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const card = style({
|
||||
padding: '12px 0px 14px 12px',
|
||||
width: '100%',
|
||||
height: 124,
|
||||
borderRadius: 12,
|
||||
border: `1px solid ${cssVarV2.layer.insideBorder.border}`,
|
||||
backgroundColor: cssVarV2.layer.background.secondary,
|
||||
overflow: 'hidden',
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'flex-start',
|
||||
justifyContent: 'space-between',
|
||||
|
||||
transform: timeline.card.keyframes.from.transform,
|
||||
...animation(timeline.card),
|
||||
|
||||
selectors: {
|
||||
'&[data-animation-played="true"]': {
|
||||
animation: 'none',
|
||||
transform: 'none',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const title = style({
|
||||
fontSize: 15,
|
||||
lineHeight: '24px',
|
||||
fontWeight: 600,
|
||||
maxWidth: 'calc(100% - 115px)',
|
||||
});
|
||||
|
||||
export const close = style({
|
||||
position: 'absolute',
|
||||
top: 12,
|
||||
right: 12,
|
||||
});
|
||||
|
||||
export const menu = style({
|
||||
width: 280,
|
||||
});
|
||||
|
||||
export const paper = style({
|
||||
width: 124,
|
||||
height: 124,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
transformOrigin: '0% 100%',
|
||||
transform: timeline.paper.keyframes.from.transform,
|
||||
...animation(timeline.paper),
|
||||
|
||||
selectors: {
|
||||
'&[data-animation-played="true"]': {
|
||||
animation: 'none',
|
||||
transform: timeline.paper.keyframes.to.transform,
|
||||
},
|
||||
},
|
||||
});
|
||||
+128
@@ -0,0 +1,128 @@
|
||||
import { Button, IconButton, Menu } from '@affine/component';
|
||||
import { FeatureFlagService } from '@affine/core/modules/feature-flag';
|
||||
import { GlobalStateService } from '@affine/core/modules/storage';
|
||||
import { TemplateDocService } from '@affine/core/modules/template-doc';
|
||||
import { TemplateListMenuContentScrollable } from '@affine/core/modules/template-doc/view/template-list-menu';
|
||||
import { useI18n } from '@affine/i18n';
|
||||
import { CloseIcon, TemplateIcon } from '@blocksuite/icons/rc';
|
||||
import { LiveData, useLiveData, useService } from '@toeverything/infra';
|
||||
import { useTheme } from 'next-themes';
|
||||
import { memo, useCallback, useEffect, useMemo, useRef } from 'react';
|
||||
|
||||
import { journalPaperDark, journalPaperLight } from './assets';
|
||||
import * as styles from './template-onboarding.css';
|
||||
|
||||
const dismissedKey = 'journal-template-onboarding-dismissed';
|
||||
// to make sure the animation won't re-play until page is reloaded
|
||||
let animationPlayed = false;
|
||||
|
||||
export const JournalTemplateOnboarding = () => {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const globalState = useService(GlobalStateService).globalState;
|
||||
const featureFlagService = useService(FeatureFlagService);
|
||||
const templateDocService = useService(TemplateDocService);
|
||||
const enableTemplate = useLiveData(
|
||||
featureFlagService.flags.enable_template_doc.$
|
||||
);
|
||||
const t = useI18n();
|
||||
|
||||
const dismissed = useLiveData(
|
||||
useMemo(
|
||||
() => LiveData.from(globalState.watch(dismissedKey), false),
|
||||
[globalState]
|
||||
)
|
||||
);
|
||||
|
||||
const onDismiss = useCallback(() => {
|
||||
const container = containerRef.current;
|
||||
if (!container) {
|
||||
globalState.set(dismissedKey, true);
|
||||
return;
|
||||
}
|
||||
|
||||
const animation = container.animate(
|
||||
[
|
||||
{},
|
||||
{
|
||||
height: 0,
|
||||
paddingTop: 0,
|
||||
paddingBottom: 0,
|
||||
marginBottom: 0,
|
||||
opacity: 0,
|
||||
},
|
||||
],
|
||||
{ duration: 280, easing: 'cubic-bezier(.35,.58,.01,1)', fill: 'forwards' }
|
||||
);
|
||||
animation.onfinish = () => {
|
||||
globalState.set(dismissedKey, true);
|
||||
};
|
||||
}, [globalState]);
|
||||
|
||||
const updateJournalTemplate = useCallback(
|
||||
(templateId: string) => {
|
||||
templateDocService.setting.updateJournalTemplateDocId(templateId);
|
||||
},
|
||||
[templateDocService.setting]
|
||||
);
|
||||
|
||||
if (dismissed || !enableTemplate) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={styles.container}
|
||||
data-animation-played={animationPlayed}
|
||||
ref={containerRef}
|
||||
>
|
||||
<div className={styles.card} data-animation-played={animationPlayed}>
|
||||
<p className={styles.title}>
|
||||
{t['com.affine.template-journal-onboarding.title']()}
|
||||
</p>
|
||||
<Menu
|
||||
contentOptions={{ className: styles.menu, align: 'end' }}
|
||||
items={
|
||||
<TemplateListMenuContentScrollable
|
||||
onSelect={updateJournalTemplate}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<Button variant="primary" prefix={<TemplateIcon />}>
|
||||
{t['com.affine.template-journal-onboarding.select']()}
|
||||
</Button>
|
||||
</Menu>
|
||||
<JournalPaper />
|
||||
<IconButton
|
||||
size="16"
|
||||
className={styles.close}
|
||||
icon={<CloseIcon />}
|
||||
onClick={onDismiss}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const JournalPaper = memo(function JournalPaper() {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const { resolvedTheme } = useTheme();
|
||||
|
||||
useEffect(() => {
|
||||
const paper = ref.current;
|
||||
if (!paper) return;
|
||||
const onAnimationEnd = () => (animationPlayed = true);
|
||||
paper.addEventListener('animationend', onAnimationEnd, { once: true });
|
||||
return () => {
|
||||
paper.removeEventListener('animationend', onAnimationEnd);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className={styles.paper}
|
||||
data-animation-played={animationPlayed}
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: resolvedTheme === 'dark' ? journalPaperDark : journalPaperLight,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
});
|
||||
+17
@@ -0,0 +1,17 @@
|
||||
import { cssVarV2 } from '@toeverything/theme/v2';
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export const container = style({
|
||||
width: '100%',
|
||||
padding: '8px 16px',
|
||||
borderTop: `0.5px solid ${cssVarV2.layer.insideBorder.border}`,
|
||||
});
|
||||
|
||||
export const trigger = style({
|
||||
padding: '2px 4px',
|
||||
borderRadius: 4,
|
||||
});
|
||||
|
||||
export const menu = style({
|
||||
width: 280,
|
||||
});
|
||||
+51
@@ -0,0 +1,51 @@
|
||||
import { Button, Menu } from '@affine/component';
|
||||
import { DocDisplayMetaService } from '@affine/core/modules/doc-display-meta';
|
||||
import { TemplateDocService } from '@affine/core/modules/template-doc';
|
||||
import { TemplateListMenuContentScrollable } from '@affine/core/modules/template-doc/view/template-list-menu';
|
||||
import { TemplateIcon } from '@blocksuite/icons/rc';
|
||||
import { useLiveData, useService } from '@toeverything/infra';
|
||||
import { useCallback, useMemo } from 'react';
|
||||
|
||||
import * as styles from './template-setting.css';
|
||||
|
||||
export const JournalTemplateSetting = () => {
|
||||
const templateDocService = useService(TemplateDocService);
|
||||
const docDisplayService = useService(DocDisplayMetaService);
|
||||
const journalTemplateDocId = useLiveData(
|
||||
templateDocService.setting.journalTemplateDocId$
|
||||
);
|
||||
|
||||
const title = useLiveData(
|
||||
useMemo(() => {
|
||||
return journalTemplateDocId
|
||||
? docDisplayService.title$(journalTemplateDocId)
|
||||
: null;
|
||||
}, [docDisplayService, journalTemplateDocId])
|
||||
);
|
||||
|
||||
const updateJournalTemplate = useCallback(
|
||||
(templateId: string) => {
|
||||
templateDocService.setting.updateJournalTemplateDocId(templateId);
|
||||
},
|
||||
[templateDocService.setting]
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<Menu
|
||||
contentOptions={{ className: styles.menu }}
|
||||
items={
|
||||
<TemplateListMenuContentScrollable onSelect={updateJournalTemplate} />
|
||||
}
|
||||
>
|
||||
<Button
|
||||
variant="plain"
|
||||
prefix={<TemplateIcon />}
|
||||
className={styles.trigger}
|
||||
>
|
||||
{title}
|
||||
</Button>
|
||||
</Menu>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1632,6 +1632,8 @@
|
||||
"Template": "Template",
|
||||
"com.affine.template-list.empty": "No template",
|
||||
"com.affine.template-list.create-new": "Create new template",
|
||||
"com.affine.template-journal-onboarding.title": "Set a Template for the Journal",
|
||||
"com.affine.template-journal-onboarding.select": "Select",
|
||||
"com.affine.settings.workspace.template.title": "My Templates",
|
||||
"com.affine.settings.workspace.template.journal": "Template for journal",
|
||||
"com.affine.settings.workspace.template.journal-desc": "Select a template for your journal",
|
||||
|
||||
Reference in new issue
Block a user