Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-03-24 22:41:28 -05:00
Code Issues Activity

feat(console): implement get-started progress indicator component

Browse source
This commit is contained in:
Charles Zhao 2022-05-11 20:13:08 +08:00
parent 74f2940398
commit ed9387bdda
No known key found for this signature in database
GPG key ID: 4858774754C92DF2
32 changed files with 515 additions and 272 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
packages/console/src/assets/images/cake.svg
View file

@ -1,22 +0,0 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect opacity="0.3" width="48" height="48" rx="16" fill="#F9CDD4"/>
<g clip-path="url(#clip0_1770_36648)">
<path d="M24 37.5C31.4558 37.5 37.5 34.1421 37.5 30C37.5 25.8579 31.4558 22.5 24 22.5C16.5442 22.5 10.5 25.8579 10.5 30C10.5 34.1421 16.5442 37.5 24 37.5Z" fill="#8899A6"/>
<path d="M24 36.1875C31.4558 36.1875 37.5 32.8296 37.5 28.6875C37.5 24.5454 31.4558 21.1875 24 21.1875C16.5442 21.1875 10.5 24.5454 10.5 28.6875C10.5 32.8296 16.5442 36.1875 24 36.1875Z" fill="#CCD6DD"/>
<path d="M35.0063 28.2637C35.0063 31.4587 30.0788 34.0477 24 34.0477C17.9213 34.0477 12.9938 31.4587 12.9938 28.2637C12.9938 25.0702 17.9213 22.4805 24 22.4805C30.078 22.4805 35.0063 25.0702 35.0063 28.2637Z" fill="#DD2E44"/>
<path d="M34.6747 27.4073C34.6747 34.7978 13.3252 34.7978 13.3252 27.4073V20.838H34.6747V27.4073Z" fill="#F4ABBA"/>
<path d="M23.988 24.1245C17.25 24.1245 13.3245 21.0255 13.3245 21.0255C13.3245 21.0255 13.3125 21.7185 13.3125 22.2893C13.3125 22.2893 13.3365 25.9628 15.2415 25.9628C17.0858 25.9628 16.9515 27.7238 18.117 27.906C19.2727 28.0868 19.401 27.2025 20.8358 27.2025C22.2705 27.2025 22.5232 28.782 23.988 28.782C25.7047 28.782 25.8457 27.2025 27.2797 27.2025C28.7137 27.2025 28.8788 28.1205 29.8193 27.8663C30.9495 27.5603 30.4298 25.9635 32.7345 25.9635C34.6395 25.9635 34.6868 22.4775 34.6868 22.4775C34.6868 21.9075 34.674 21.0263 34.674 21.0263C34.674 21.0263 30.7267 24.1245 23.988 24.1245Z" fill="#DD2E44"/>
<path d="M35.0063 20.0527C35.0063 23.247 30.0788 25.8367 24 25.8367C17.9213 25.8367 12.9938 23.247 12.9938 20.0527C12.9938 16.8585 17.9213 14.2687 24 14.2687C30.078 14.2687 35.0063 16.8585 35.0063 20.0527Z" fill="#EA596E"/>
<path d="M29.748 20.838C29.2943 20.838 28.9268 20.4705 28.9268 20.0168V14.2688C28.9268 13.815 29.2943 13.4475 29.748 13.4475C30.2018 13.4475 30.5693 13.815 30.5693 14.2688V20.0168C30.5693 20.4705 30.2018 20.838 29.748 20.838Z" fill="#FFF8E8"/>
<path d="M29.7481 15.5002C28.8766 15.5002 28.1911 15.1012 27.9143 14.433C27.6743 13.8532 27.5551 12.5955 29.4578 10.6935C29.6183 10.533 29.8778 10.533 30.0383 10.6935C31.9411 12.5962 31.8218 13.8532 31.5818 14.433C31.3051 15.1012 30.6196 15.5002 29.7481 15.5002Z" fill="#FAAA35"/>
<path d="M24 23.301C23.5462 23.301 23.1787 22.9335 23.1787 22.4798V16.7325C23.1787 16.2788 23.5462 15.9113 24 15.9113C24.4537 15.9113 24.8212 16.2788 24.8212 16.7325V22.4805C24.8212 22.9335 24.4537 23.301 24 23.301Z" fill="#FFF8E8"/>
<path d="M24 17.964C23.1285 17.964 22.443 17.565 22.1662 16.8967C21.9255 16.317 21.807 15.0592 23.7097 13.1572C23.8702 12.9967 24.1297 12.9967 24.2902 13.1572C26.193 15.06 26.0737 16.317 25.8337 16.8967C25.557 17.565 24.8715 17.964 24 17.964Z" fill="#FAAA35"/>
<path d="M18.252 20.838C17.7983 20.838 17.4308 20.4705 17.4308 20.0168V14.2688C17.4308 13.815 17.7983 13.4475 18.252 13.4475C18.7058 13.4475 19.0733 13.815 19.0733 14.2688V20.0168C19.0733 20.4705 18.7058 20.838 18.252 20.838Z" fill="#FFF8E8"/>
<path d="M18.252 15.5002C17.3805 15.5002 16.695 15.1012 16.4183 14.433C16.1775 13.8532 16.059 12.5955 17.9618 10.6935C18.1223 10.533 18.3818 10.533 18.5423 10.6935C20.445 12.5962 20.3258 13.8532 20.0858 14.433C19.809 15.1012 19.1235 15.5002 18.252 15.5002Z" fill="#FAAA35"/>
</g>
<defs>
<clipPath id="clip0_1770_36648">
<rect width="27" height="27" fill="white" transform="translate(10.5 10.5)"/>
</clipPath>
</defs>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 3.4 KiB

18
packages/console/src/assets/images/check-demo.svg Normal file
View file

@ -0,0 +1,18 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 8C0 3.58172 3.58172 0 8 0H40C44.4183 0 48 3.58172 48 8V40C48 44.4183 44.4183 48 40 48H8C3.58172 48 0 44.4183 0 40V8Z" fill="#F3EFFA"/>
<rect x="12" y="6" width="20" height="36" rx="4" fill="url(#paint0_linear_3406_128416)"/>
<circle cx="22" cy="38" r="1.5" stroke="#E6DEFF"/>
<path d="M17 6H27V8C27 8.55228 26.5523 9 26 9H18C17.4477 9 17 8.55228 17 8V6Z" fill="#4300DA"/>
<path d="M41.5 24C41.5 24.0667 41.4631 24.2311 41.3162 24.5033C41.1765 24.7621 40.9619 25.0736 40.673 25.4201C40.0959 26.1121 39.2493 26.911 38.1938 27.6685C36.0789 29.1863 33.179 30.5 30 30.5C26.821 30.5 23.9211 29.1863 21.8062 27.6685C20.7507 26.911 19.9041 26.1121 19.327 25.4201C19.0381 25.0736 18.8235 24.7621 18.6838 24.5033C18.5369 24.2311 18.5 24.0667 18.5 24C18.5 23.9333 18.5369 23.7689 18.6838 23.4967C18.8235 23.2379 19.0381 22.9264 19.327 22.5799C19.9041 21.8879 20.7507 21.089 21.8062 20.3315C23.9211 18.8137 26.821 17.5 30 17.5C33.179 17.5 36.0789 18.8137 38.1938 20.3315C39.2493 21.089 40.0959 21.8879 40.673 22.5799C40.9619 22.9264 41.1765 23.2379 41.3162 23.4967C41.4631 23.7689 41.5 23.9333 41.5 24Z" fill="#F5EEFF" stroke="black"/>
<circle cx="30" cy="24" r="4" fill="#191C1D"/>
<circle cx="33" cy="24" r="2" fill="#F07EFF"/>
<rect x="30" y="12" width="1" height="4" rx="0.5" fill="#F4E560"/>
<rect x="36.5625" y="13.2324" width="1" height="4" rx="0.5" transform="rotate(45 36.5625 13.2324)" fill="black"/>
<rect width="1" height="4" rx="0.5" transform="matrix(0.707107 -0.707107 -0.707107 -0.707107 26.5625 16.7676)" fill="#F4E560"/>
<defs>
<linearGradient id="paint0_linear_3406_128416" x1="10.3571" y1="26.625" x2="33.6675" y2="21.8434" gradientUnits="userSpaceOnUse">
<stop stop-color="#492EF3"/>
<stop offset="1" stop-color="#CF69FF"/>
</linearGradient>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.8 KiB

4
packages/console/src/assets/images/circle-tick.svg Normal file
View file

@ -0,0 +1,4 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="10" cy="10" r="9" fill="#4EA254" stroke="white" stroke-width="2"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.75789 8.99992C5.36736 9.39045 5.36736 10.0236 5.75789 10.4141L8.58632 13.2426C8.97684 13.6331 9.61 13.6331 10.0005 13.2426L14.2432 8.99992C14.6337 8.6094 14.6337 7.97624 14.2432 7.58571C13.8526 7.19519 13.2195 7.19519 12.829 7.58571L9.29342 11.1212L7.1721 8.99992C6.78158 8.6094 6.14841 8.6094 5.75789 8.99992Z" fill="white"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 561 B

28
packages/console/src/assets/images/crab.svg
View file

@ -1,28 +0,0 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect opacity="0.1" width="48" height="48" rx="16" fill="#BE1931"/>
<g clip-path="url(#clip0_1770_36728)">
<path d="M15.72 25.9777C15.771 26.457 15.3128 26.8987 14.694 26.964C14.076 27.0307 13.5338 26.6962 13.4828 26.2177C13.4318 25.7385 13.8908 25.2975 14.5088 25.2322C15.1268 25.1655 15.669 25.4992 15.72 25.9777ZM17.2853 28.0155C17.379 28.629 15.9683 29.9235 15.3533 30.0172C14.739 30.111 14.1653 29.6887 14.0723 29.0745C13.9785 28.461 14.5073 28.2195 15.1208 28.1257C15.735 28.0327 17.1915 27.402 17.2853 28.0155ZM18.6225 29.5935C18.7523 30.201 17.4015 32.5387 16.794 32.6685C16.1858 32.7982 15.5603 32.778 15.4313 32.1697C15.3015 31.5622 15.6608 30.9037 16.2683 30.774C16.8758 30.6435 18.4928 28.986 18.6225 29.5935V29.5935ZM21.5123 30.237C21.636 30.8452 20.5088 33.5025 19.8998 33.6262C19.2908 33.75 18.8205 33.9645 18.6968 33.3562C18.573 32.7472 18.8925 31.875 19.4513 31.4212C19.9343 31.029 21.3893 29.6287 21.5123 30.237V30.237Z" fill="#A0041E"/>
<path d="M13.4438 24.6518C13.899 25.188 14.3288 25.5743 13.7918 26.028C13.2548 26.4825 12.4815 26.1495 12.0263 25.6125C11.5725 25.0763 10.347 23.0475 10.8833 22.5938C11.421 22.1393 12.99 24.1155 13.4438 24.6518V24.6518ZM13.6913 28.3118C14.3603 28.533 15.084 28.9125 14.8635 29.58C14.643 30.2483 13.8675 30.3233 13.1993 30.1035C12.5325 29.8823 10.3703 28.8353 10.5908 28.1678C10.812 27.5003 13.0238 28.0913 13.6913 28.3118ZM14.6018 31.7108C15.2805 31.521 16.032 31.4985 16.221 32.175C16.41 32.8523 16.0095 33.3263 15.3315 33.5153C14.655 33.7035 12.075 34.0605 11.886 33.3833C11.6978 32.7045 13.9245 31.8983 14.6018 31.7108ZM17.8628 34.1018C17.9258 33.399 18.3458 32.85 19.0455 32.913C19.746 32.9768 19.989 33.6818 19.9253 34.383C19.8615 35.0835 20.0355 37.0545 18.639 37.395C17.955 37.5608 17.7983 34.8 17.8628 34.1018V34.1018ZM32.28 25.9778C32.229 26.457 32.6873 26.8988 33.3053 26.964C33.9233 27.0308 34.4655 26.6963 34.5165 26.2178C34.5675 25.7385 34.1085 25.2975 33.4913 25.2323C32.8733 25.1655 32.331 25.4993 32.28 25.9778ZM30.7148 28.0155C30.621 28.629 32.0325 29.9235 32.646 30.0173C33.2603 30.111 33.834 29.6888 33.9278 29.0745C34.0215 28.4603 33.4928 28.2195 32.8793 28.1258C32.265 28.0328 30.8085 27.402 30.7148 28.0155ZM29.3775 29.5935C29.2478 30.201 30.5985 32.5388 31.206 32.6685C31.8135 32.7983 32.439 32.778 32.568 32.1698C32.6985 31.5623 32.3393 30.9038 31.7318 30.774C31.1243 30.6435 29.5073 28.986 29.3775 29.5935ZM26.4878 30.237C26.3633 30.8453 27.4913 33.5025 28.0995 33.6263C28.7085 33.75 29.178 33.9645 29.3025 33.3563C29.4255 32.7473 29.106 31.875 28.5473 31.4213C28.0658 31.029 26.6108 29.6288 26.4878 30.237V30.237Z" fill="#A0041E"/>
<path d="M34.5563 24.6517C34.1011 25.188 33.6713 25.5742 34.2076 26.028C34.7446 26.4825 35.5178 26.1495 35.9731 25.6125C36.4268 25.0762 37.6523 23.0475 37.1153 22.5937C36.5791 22.1392 35.0101 24.1155 34.5563 24.6517V24.6517ZM34.3088 28.3117C33.6398 28.533 32.9161 28.9125 33.1373 29.58C33.3571 30.2482 34.1333 30.3232 34.8016 30.1035C35.4683 29.8822 37.6298 28.8352 37.4093 28.1677C37.1888 27.5002 34.9763 28.0912 34.3088 28.3117V28.3117ZM33.3976 31.7107C32.7196 31.521 31.9681 31.4985 31.7791 32.175C31.5901 32.8522 31.9905 33.3262 32.6678 33.5152C33.3443 33.7035 35.9251 34.0605 36.1133 33.3825C36.3023 32.7045 34.0756 31.8982 33.3976 31.7107ZM30.1373 34.1017C30.0743 33.399 29.6536 32.85 28.9546 32.913C28.2533 32.9767 28.0111 33.6817 28.0748 34.383C28.1378 35.0835 27.9646 37.0545 29.3611 37.395C30.0451 37.5607 30.2018 34.8 30.1373 34.1017V34.1017ZM12.8611 20.9085C12.5738 20.2665 12.8618 19.5135 13.5038 19.227C14.1458 18.9397 14.8988 19.2285 15.1861 19.8705C15.4718 20.5117 17.1743 24.0795 16.5323 24.366C15.8911 24.6525 13.1476 21.5497 12.8611 20.9085V20.9085Z" fill="#A0041E"/>
<path d="M13.4954 19.5255C14.4112 21.7425 19.7512 17.0198 20.0977 14.8148C20.4442 12.6105 19.8667 11.664 19.5772 11.4398C19.2877 11.2155 19.6852 12.516 18.6869 13.9193C17.8972 15.0308 12.8624 17.9948 13.4954 19.5255V19.5255ZM35.1389 20.9085C35.4269 20.2665 35.1382 19.5135 34.4962 19.227C33.8534 18.9398 33.1004 19.2285 32.8132 19.8705C32.5274 20.5118 30.8257 24.0795 31.4677 24.366C32.1089 24.6525 34.8524 21.5498 35.1389 20.9085Z" fill="#A0041E"/>
<path d="M34.5052 19.5255C33.5887 21.7425 28.2495 17.0198 27.9022 14.8148C27.5565 12.6105 28.134 11.664 28.4227 11.4398C28.7122 11.2155 28.3147 12.516 29.313 13.9193C30.1035 15.0308 35.1375 17.9948 34.5052 19.5255Z" fill="#A0041E"/>
<path d="M15 27C15 25.5 16.5 19.5 24 19.5C31.5 19.5 33 25.5 33 27C29.25 29.25 28.9703 32.25 24 32.25C19.0298 32.25 19.5 29.25 15 27ZM13.7423 19.6672C11.3775 20.0745 13.4738 13.5615 15.1545 12.093C16.8345 10.6245 18.6473 10.6552 18.9908 10.7805C19.3343 10.9057 18.1103 12.7267 17.6783 13.914C17.4585 14.5162 15.3743 19.386 13.7423 19.6672V19.6672ZM34.2578 19.6672C36.6218 20.0745 34.5263 13.5615 32.8463 12.093C31.1663 10.6245 29.3543 10.6552 29.01 10.7805C28.6658 10.9057 29.8905 12.7267 30.3225 13.914C30.5423 14.5162 32.6258 19.386 34.2578 19.6672V19.6672Z" fill="#BE1931"/>
<path d="M23.2741 19.602C23.5253 20.6062 23.2403 20.793 22.6373 20.9437C22.0343 21.0945 21.3421 21.1522 21.0916 20.148C20.8403 19.1437 21.1253 18.207 21.7283 18.0562C22.3306 17.9055 23.0228 18.597 23.2741 19.602ZM26.9086 20.148C26.6573 21.153 25.9651 21.0945 25.3628 20.9437C24.7598 20.793 24.4748 20.6062 24.7261 19.602C24.9773 18.597 25.6696 17.9055 26.2726 18.0562C26.8748 18.2062 27.1598 19.143 26.9086 20.148Z" fill="#A0041E"/>
<path d="M21.375 18.75C21.9963 18.75 22.5 18.2463 22.5 17.625C22.5 17.0037 21.9963 16.5 21.375 16.5C20.7537 16.5 20.25 17.0037 20.25 17.625C20.25 18.2463 20.7537 18.75 21.375 18.75Z" fill="#292F33"/>
<path d="M26.625 18.75C27.2463 18.75 27.75 18.2463 27.75 17.625C27.75 17.0037 27.2463 16.5 26.625 16.5C26.0037 16.5 25.5 17.0037 25.5 17.625C25.5 18.2463 26.0037 18.75 26.625 18.75Z" fill="#292F33"/>
<path d="M17.2898 26.6467C17.1848 26.8237 15 27.1957 15.5625 26.0985C16.125 25.0012 17.3948 26.4712 17.2898 26.6467Z" fill="#DD2E44"/>
<path d="M17.9183 25.593C17.7548 25.7618 15.5273 25.8862 16.4768 24.54C17.4255 23.1952 18.1523 25.3515 17.9183 25.593Z" fill="#DD2E44"/>
<path d="M19.2428 24.495C18.9593 24.6683 16.6396 24.1193 18.1876 23.046C19.5916 22.074 19.6171 24.2655 19.2428 24.495Z" fill="#DD2E44"/>
<path d="M21.0765 23.5702C20.3205 23.7945 18.543 22.5937 20.4157 21.9645C22.2892 21.3352 21.8325 23.346 21.0765 23.5702ZM30.642 26.6467C30.7477 26.823 32.9317 27.195 32.3692 26.0985C31.8067 25.0012 30.537 26.4712 30.642 26.6467Z" fill="#DD2E44"/>
<path d="M30.0143 25.593C30.1778 25.7618 32.4053 25.8862 31.4558 24.54C30.5063 23.1952 29.7795 25.3515 30.0143 25.593Z" fill="#DD2E44"/>
<path d="M28.6898 24.495C28.9733 24.6683 31.293 24.1193 29.7443 23.046C28.3403 22.074 28.3148 24.2655 28.6898 24.495Z" fill="#DD2E44"/>
<path d="M26.856 23.5703C27.612 23.7945 29.3895 22.5938 27.5167 21.9645C25.6425 21.3352 26.0992 23.346 26.856 23.5703Z" fill="#DD2E44"/>
<path d="M30.6368 22.6875C30.6368 22.998 28.995 21 24 21C19.0043 21 17.364 22.998 17.364 22.6875C17.364 22.377 19.4295 19.875 24 19.875C28.5705 19.875 30.6368 22.377 30.6368 22.6875Z" fill="#A0041E"/>
<path d="M18.5947 28.8248C18.5947 28.5143 19.9312 30.5123 24 30.5123C28.0687 30.5123 29.406 28.5143 29.406 28.8248C29.406 29.1353 27.723 31.6373 24 31.6373C20.277 31.6373 18.5947 29.1353 18.5947 28.8248Z" fill="#DD2E44"/>
</g>
<defs>
<clipPath id="clip0_1770_36728">
<rect width="27" height="27" fill="white" transform="translate(10.5 10.5)"/>
</clipPath>
</defs>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 7.4 KiB

18
packages/console/src/assets/images/create-app.svg Normal file
View file

@ -0,0 +1,18 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 8C0 3.58172 3.58172 0 8 0H40C44.4183 0 48 3.58172 48 8V40C48 44.4183 44.4183 48 40 48H8C3.58172 48 0 44.4183 0 40V8Z" fill="#F3EFFA"/>
<path d="M7 12C7 9.79086 8.79086 8 11 8L37 8C39.2091 8 41 9.79086 41 12V30C41 32.2091 39.2091 34 37 34H11C8.79086 34 7 32.2091 7 30L7 12Z" fill="url(#paint0_linear_3406_128353)"/>
<rect x="10.25" y="14.25" width="27.5" height="0.5" rx="0.25" fill="#AF9EFF" stroke="black" stroke-width="0.5"/>
<rect x="10.25" y="21.25" width="27.5" height="0.5" rx="0.25" fill="#AF9EFF" stroke="black" stroke-width="0.5"/>
<rect x="10.25" y="28.25" width="27.5" height="0.5" rx="0.25" fill="#AF9EFF" stroke="black" stroke-width="0.5"/>
<rect x="14" y="11" width="4" height="6" rx="2" fill="#5D34F2"/>
<rect x="30" y="18" width="4" height="6" rx="2" fill="#5D34F2"/>
<rect x="19" y="25" width="4" height="6" rx="2" fill="#5D34F2"/>
<rect x="14.5" y="36.5" width="19" height="3" rx="1.5" fill="#F5EEFF" stroke="black"/>
<defs>
<linearGradient id="paint0_linear_3406_128353" x1="5.11111" y1="26.5714" x2="36.9255" y2="7.71964" gradientUnits="userSpaceOnUse">
<stop stop-color="#FFF06A"/>
<stop offset="0.5" stop-color="#FC85E9"/>
<stop offset="1" stop-color="#EC78FF"/>
</linearGradient>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

44
packages/console/src/assets/images/customize.svg Normal file
View file

@ -0,0 +1,44 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_3406_128176)">
<path d="M0 8C0 3.58172 3.58172 0 8 0H40C44.4183 0 48 3.58172 48 8V40C48 44.4183 44.4183 48 40 48H8C3.58172 48 0 44.4183 0 40V8Z" fill="#F3EFFA"/>
<g opacity="0.1">
<circle cx="24" cy="24" r="19.8" stroke="#666666" stroke-width="0.4"/>
<circle cx="24" cy="24" r="15.8" stroke="#666666" stroke-width="0.4"/>
<rect x="8.2" y="4.2" width="31.6" height="39.6" rx="1.8" stroke="#666666" stroke-width="0.4"/>
<rect x="6.2" y="6.2" width="35.6" height="35.6" rx="1.8" stroke="#666666" stroke-width="0.4"/>
<rect x="4.2" y="39.8" width="31.6" height="39.6" rx="1.8" transform="rotate(-90 4.2 39.8)" stroke="#666666" stroke-width="0.4"/>
<rect y="44" width="4" height="4" fill="#FFF06A"/>
<circle cx="24" cy="24" r="7.8" stroke="#666666" stroke-width="0.4"/>
<rect x="24" width="0.2" height="48" fill="#666666"/>
<rect x="0.101562" y="24.0996" width="0.2" height="48" transform="rotate(-90 0.101562 24.0996)" fill="#666666"/>
</g>
<path d="M12.129 13.1016C11.7385 12.7111 11.7385 12.0779 12.129 11.6874C12.5195 11.2969 13.1527 11.2969 13.5432 11.6874L22.7356 20.8798L21.3214 22.294L12.129 13.1016Z" fill="#7958FF"/>
<path d="M8.5939 10.9806C7.81285 10.1996 7.81285 8.93324 8.5939 8.15219C9.37495 7.37114 10.6413 7.37114 11.4223 8.15219L14.2508 10.9806C15.0318 11.7617 15.0318 13.028 14.2508 13.809C13.4697 14.5901 12.2034 14.5901 11.4223 13.809L8.5939 10.9806Z" fill="#7958FF"/>
<path d="M21.3208 29.3657C18.9776 27.0225 18.9776 23.2236 21.3208 20.8804C23.6639 18.5373 27.4629 18.5373 29.806 20.8804L38.2913 29.3657C40.6345 31.7088 40.6345 35.5078 38.2913 37.851C35.9482 40.1941 32.1492 40.1941 29.806 37.851L21.3208 29.3657Z" fill="url(#paint0_linear_3406_128176)"/>
<rect x="22.0273" y="25.8301" width="2" height="16" rx="1" transform="rotate(-45 22.0273 25.8301)" fill="#CABEFF"/>
<rect x="24.8594" y="23.002" width="2" height="16" rx="1" transform="rotate(-45 24.8594 23.002)" fill="#CABEFF"/>
<path d="M23.2927 16.0511C24.8548 14.489 27.3874 14.489 28.9495 16.0511L30.3637 17.4653C31.9258 19.0274 31.9258 21.5601 30.3637 23.1222L14.8074 38.6785C13.2453 40.2406 10.7126 40.2406 9.15053 38.6785L7.73632 37.2643C6.17422 35.7022 6.17422 33.1695 7.73632 31.6074L23.2927 16.0511Z" fill="url(#paint1_linear_3406_128176)"/>
<rect x="21.1719" y="23.8301" width="2" height="16" rx="1" transform="rotate(45 21.1719 23.8301)" fill="#B545CA"/>
<path d="M37.7903 22.0623C34.0803 25.7723 28.0652 25.7723 24.3552 22.0623C20.6453 18.3523 20.6453 12.3372 24.3552 8.62726C26.3753 6.60716 29.0781 5.68689 31.722 5.86684C32.2149 5.90039 32.5008 6.19144 32.5993 6.56375C32.7027 6.95413 32.5994 7.45413 32.2123 7.84131L29.305 10.7486C28.3287 11.7249 28.3287 13.3078 29.305 14.2841L32.1334 17.1125C33.1097 18.0889 34.6926 18.0889 35.6689 17.1125L38.5762 14.2053C38.9634 13.8181 39.4634 13.7149 39.8538 13.8182C40.2261 13.9167 40.5171 14.2026 40.5507 14.6955C40.7306 17.3394 39.8104 20.0422 37.7903 22.0623Z" fill="#F5EEFF" stroke="black"/>
<circle cx="7" cy="19" r="1.5" stroke="#9FE79F"/>
<circle cx="42" cy="27" r="1.5" stroke="#F7F8F8"/>
<circle cx="42" cy="27" r="1.5" stroke="#78767F" stroke-opacity="0.02"/>
<circle cx="42" cy="27" r="1.5" stroke="#5D34F2" stroke-opacity="0.14"/>
<rect x="36.879" y="7" width="3" height="3" rx="0.5" transform="rotate(-45 36.879 7)" stroke="#C4C7C7"/>
<rect x="19.879" y="40" width="3" height="3" rx="0.5" transform="rotate(-45 19.879 40)" stroke="#C4C7C7"/>
</g>
<defs>
<linearGradient id="paint0_linear_3406_128176" x1="40.3502" y1="40.855" x2="21.869" y2="15.8622" gradientUnits="userSpaceOnUse">
<stop stop-color="#492EF3"/>
<stop offset="1" stop-color="#CF69FF"/>
</linearGradient>
<linearGradient id="paint1_linear_3406_128176" x1="28.7914" y1="16.207" x2="3.05556" y2="23.2678" gradientUnits="userSpaceOnUse">
<stop stop-color="#FFF06A"/>
<stop offset="0.5" stop-color="#FC85E9"/>
<stop offset="1" stop-color="#E264F7"/>
</linearGradient>
<clipPath id="clip0_3406_128176">
<path d="M0 8C0 3.58172 3.58172 0 8 0H40C44.4183 0 48 3.58172 48 8V40C48 44.4183 44.4183 48 40 48H8C3.58172 48 0 44.4183 0 40V8Z" fill="white"/>
</clipPath>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 4.1 KiB

24
packages/console/src/assets/images/drink.svg
View file

@ -1,24 +0,0 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect opacity="0.3" width="48" height="48" rx="16" fill="#CCE6FA"/>
<g clip-path="url(#clip0_1770_36684)">
<path d="M30.6481 16.5H24.0001V37.5C28.5001 37.5 31.5001 36.75 32.5448 32.2388C33.1253 29.7323 33.7921 22.9875 33.7921 18.858C33.7921 17.4593 32.7173 16.5 30.6481 16.5ZM17.1691 16.5H24.0001V37.5C19.5001 37.5 16.5001 36.75 15.3638 32.2388C14.7353 29.7435 14.0708 22.9875 14.0708 18.858C14.0708 17.4593 15.0991 16.5 17.1691 16.5Z" fill="#8899A6"/>
<path d="M33.789 18.375C33.789 19.9283 31.4415 21.1875 23.9962 21.1875C16.5517 21.1875 14.2035 19.9283 14.2035 18.375C14.2035 16.821 16.5517 15.5625 23.9962 15.5625C31.4415 15.5625 33.789 16.821 33.789 18.375Z" fill="#CCD6DD"/>
<path d="M24.0187 20.2477L15.387 19.5C15.387 24.75 16.215 30.2865 16.6477 31.929C17.1442 33.8108 18.75 33.7357 24 33.7485V33.75V33.7485C29.25 33.735 30.8745 33.8108 31.3702 31.929C31.8037 30.2865 32.64 24.75 32.64 19.5L24.0187 20.2477Z" fill="#CCD6DD"/>
<path d="M24 26.25V36C29.25 36 30.75 35.25 31.3928 31.929C31.5735 30.9968 31.998 28.8728 32.2733 26.25H24ZM15.7643 26.25C16.0388 28.8728 16.4505 30.9953 16.626 31.929C17.25 35.25 18.75 36 24 36V26.25H15.7643Z" fill="#55ACEE"/>
<path d="M24 33.12C20.583 33.12 17.8132 33.7912 17.8132 34.62C17.8132 34.6267 17.817 34.6335 17.8177 34.641C18.8655 35.6985 20.6835 36 24 36C27.3097 36 29.127 35.7 30.1807 34.6477C30.1815 34.6387 30.1867 34.6297 30.1867 34.62C30.1867 33.7912 27.417 33.12 24 33.12Z" fill="#3B88C3"/>
<path d="M23.9963 27.75C28.5592 27.75 32.2583 27.0784 32.2583 26.25C32.2583 25.4216 28.5592 24.75 23.9963 24.75C19.4333 24.75 15.7343 25.4216 15.7343 26.25C15.7343 27.0784 19.4333 27.75 23.9963 27.75Z" fill="#88C9F9"/>
<path d="M35.9685 11.202L30.8505 12.4747C30.2873 12.615 29.6768 12.9075 29.0205 13.404C27.7883 14.3362 27.537 15.6015 27.336 16.2997L24.255 27H26.5965L29.4975 16.923C29.6955 16.236 29.892 15.6465 30.3443 15.2362C30.7448 14.8732 31.407 14.6595 32.0273 14.499L36.51 13.3867C37.1108 13.2375 37.4798 12.6247 37.3313 12.024C37.182 11.4225 36.5693 11.0527 35.9685 11.202Z" fill="#E1E8ED"/>
<path d="M24.2549 27L22.2517 33.9578C22.0807 34.5525 22.4272 35.1788 23.0212 35.3505C23.6159 35.5215 24.2422 35.175 24.4132 34.581L26.5964 27H24.2549Z" fill="#88C9F9"/>
<path d="M24.4807 27.5078L24.0397 27.7493L23.835 28.4595L25.3845 31.2113L25.9665 29.1893L25.0207 27.5085L24.4807 27.5078Z" fill="#744EAA"/>
<path d="M31.4295 12.3307L30.5835 15.066C30.9817 14.8057 31.515 14.631 32.0287 14.4982L32.3542 14.4172L33.1305 11.9077L31.4295 12.3307Z" fill="#DD2E44"/>
<path d="M23.2838 30.3743L22.701 32.397L24.1725 35.0108C24.2805 34.8893 24.366 34.746 24.414 34.5803L24.8326 33.126L23.2838 30.3743Z" fill="#744EAA"/>
<path d="M25.536 22.551L24.9532 24.5745L25.989 26.4135L26.343 26.4923L26.8125 26.25L27.0855 25.3035L25.536 22.551ZM36.3712 11.1803C36.24 11.1645 36.1042 11.1683 35.9685 11.202L34.6965 11.5185L33.9195 14.0288L35.6197 13.6065L36.3712 11.1803ZM26.0932 20.616L27.6427 23.367L28.2247 21.345L26.676 18.5933L26.0932 20.616ZM28.9897 13.4318C28.3912 13.8945 28.026 14.4353 27.789 14.9483L28.779 19.4243L29.499 16.923C29.5485 16.7505 29.5987 16.584 29.652 16.425L28.9897 13.4318Z" fill="#DD2E44"/>
<path d="M24.4973 26.1608L24.0398 27.75C24.8603 27.7492 25.6523 27.7267 26.4 27.6855L26.8388 26.1615C26.1353 26.5238 24.6683 26.2973 24.4973 26.1608Z" fill="#55ACEE"/>
<path d="M32.7112 18.9817C32.5297 18.495 31.9957 18.2505 31.5232 18.4387C28.8187 19.5007 26.2402 19.8705 23.9962 19.8915V21.7605C26.496 21.735 29.313 21.3277 32.181 20.2005C32.6557 20.0145 32.8935 19.4685 32.7112 18.9817ZM15.2812 18.9817C15.4627 18.495 15.9967 18.2505 16.4692 18.4387C19.1737 19.5007 21.7522 19.8705 23.9962 19.8915V21.7605C21.4965 21.735 18.6795 21.3277 15.8115 20.2005C15.3375 20.0145 15.099 19.4685 15.2812 18.9817Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_1770_36684">
<rect width="27" height="27" fill="white" transform="translate(10.5 10.5)"/>
</clipPath>
</defs>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 3.9 KiB

18
packages/console/src/assets/images/frog.svg
View file

@ -1,18 +0,0 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect opacity="0.3" width="48" height="48" rx="16" fill="#C6E5B3"/>
<g clip-path="url(#clip0_1770_36833)">
<path d="M37.5 27C37.5 32.592 31.4557 36 24 36C16.5443 36 10.5 32.592 10.5 27C10.5 21.408 16.5443 15.75 24 15.75C31.4557 15.75 37.5 21.408 37.5 27Z" fill="#C6E5B3"/>
<path d="M34.3162 20.007C35.3422 19.182 36 17.9182 36 16.5C36 14.0152 33.9848 12 31.5 12C29.3542 12 27.5625 13.503 27.1117 15.5137C26.1458 15.1515 25.0995 14.9452 24 14.9452C22.9012 14.9452 21.8542 15.1515 20.8883 15.5137C20.4375 13.503 18.6458 12 16.5 12C14.0152 12 12 14.0152 12 16.5C12 17.9182 12.6577 19.182 13.6837 20.007C11.7 22.017 10.5 24.5137 10.5 27C10.5 32.592 16.5443 27.75 24 27.75C31.4557 27.75 37.5 32.592 37.5 27C37.5 24.5137 36.3 22.017 34.3162 20.007Z" fill="#77B255"/>
<path d="M16.125 18.75C17.5747 18.75 18.75 17.5747 18.75 16.125C18.75 14.6753 17.5747 13.5 16.125 13.5C14.6753 13.5 13.5 14.6753 13.5 16.125C13.5 17.5747 14.6753 18.75 16.125 18.75Z" fill="white"/>
<path d="M16.125 17.25C16.7463 17.25 17.25 16.7463 17.25 16.125C17.25 15.5037 16.7463 15 16.125 15C15.5037 15 15 15.5037 15 16.125C15 16.7463 15.5037 17.25 16.125 17.25Z" fill="#292F33"/>
<path d="M31.875 18.75C33.3247 18.75 34.5 17.5747 34.5 16.125C34.5 14.6753 33.3247 13.5 31.875 13.5C30.4253 13.5 29.25 14.6753 29.25 16.125C29.25 17.5747 30.4253 18.75 31.875 18.75Z" fill="white"/>
<path d="M31.875 17.25C32.4963 17.25 33 16.7463 33 16.125C33 15.5037 32.4963 15 31.875 15C31.2537 15 30.75 15.5037 30.75 16.125C30.75 16.7463 31.2537 17.25 31.875 17.25Z" fill="#292F33"/>
<path d="M21 26.25C21.4142 26.25 21.75 25.9142 21.75 25.5C21.75 25.0858 21.4142 24.75 21 24.75C20.5858 24.75 20.25 25.0858 20.25 25.5C20.25 25.9142 20.5858 26.25 21 26.25Z" fill="#5C913B"/>
<path d="M27 26.25C27.4142 26.25 27.75 25.9142 27.75 25.5C27.75 25.0858 27.4142 24.75 27 24.75C26.5858 24.75 26.25 25.0858 26.25 25.5C26.25 25.9142 26.5858 26.25 27 26.25Z" fill="#5C913B"/>
</g>
<defs>
<clipPath id="clip0_1770_36833">
<rect width="27" height="27" fill="white" transform="translate(10.5 10.5)"/>
</clipPath>
</defs>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 2.1 KiB

33
packages/console/src/assets/images/further-readings.svg Normal file
View file

@ -0,0 +1,33 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 8C0 3.58172 3.58172 0 8 0H40C44.4183 0 48 3.58172 48 8V40C48 44.4183 44.4183 48 40 48H8C3.58172 48 0 44.4183 0 40V8Z" fill="#F3EFFA"/>
<path d="M8 11C8 8.79086 9.79086 7 12 7L32 7C34.2091 7 36 8.79086 36 11V35C36 37.2091 34.2091 39 32 39H12C9.79086 39 8 37.2091 8 35L8 11Z" fill="url(#paint0_linear_3406_128140)"/>
<rect x="12" y="20" width="10" height="2" rx="1" fill="#F4E560"/>
<rect x="12" y="24" width="12" height="2" rx="1" fill="#F4E560"/>
<rect x="12" y="28" width="4" height="2" rx="1" fill="#F4E560"/>
<rect x="12.5" y="10.5" width="7" height="7" rx="1.5" stroke="black"/>
<mask id="path-7-inside-1_3406_128140" fill="white">
<path fill-rule="evenodd" clip-rule="evenodd" d="M29 21C29 20.4477 29.4477 20 30 20H32C32.5523 20 33 20.4477 33 21V23H29V21ZM29 41C29 41.5523 29.4477 42 30 42H32C32.5523 42 33 41.5523 33 41V39H29V41ZM21 33C20.4477 33 20 32.5523 20 32V30C20 29.4477 20.4477 29 21 29H23V33H21ZM41 33C41.5523 33 42 32.5523 42 32V30C42 29.4477 41.5523 29 41 29H39V33H41Z"/>
</mask>
<path fill-rule="evenodd" clip-rule="evenodd" d="M29 21C29 20.4477 29.4477 20 30 20H32C32.5523 20 33 20.4477 33 21V23H29V21ZM29 41C29 41.5523 29.4477 42 30 42H32C32.5523 42 33 41.5523 33 41V39H29V41ZM21 33C20.4477 33 20 32.5523 20 32V30C20 29.4477 20.4477 29 21 29H23V33H21ZM41 33C41.5523 33 42 32.5523 42 32V30C42 29.4477 41.5523 29 41 29H39V33H41Z" fill="#F7F8F8"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M29 21C29 20.4477 29.4477 20 30 20H32C32.5523 20 33 20.4477 33 21V23H29V21ZM29 41C29 41.5523 29.4477 42 30 42H32C32.5523 42 33 41.5523 33 41V39H29V41ZM21 33C20.4477 33 20 32.5523 20 32V30C20 29.4477 20.4477 29 21 29H23V33H21ZM41 33C41.5523 33 42 32.5523 42 32V30C42 29.4477 41.5523 29 41 29H39V33H41Z" fill="#78767F" fill-opacity="0.02"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M29 21C29 20.4477 29.4477 20 30 20H32C32.5523 20 33 20.4477 33 21V23H29V21ZM29 41C29 41.5523 29.4477 42 30 42H32C32.5523 42 33 41.5523 33 41V39H29V41ZM21 33C20.4477 33 20 32.5523 20 32V30C20 29.4477 20.4477 29 21 29H23V33H21ZM41 33C41.5523 33 42 32.5523 42 32V30C42 29.4477 41.5523 29 41 29H39V33H41Z" fill="#5D34F2" fill-opacity="0.05"/>
<path d="M33 23V24H34V23H33ZM29 23H28V24H29V23ZM33 39H34V38H33V39ZM29 39V38H28V39H29ZM23 29H24V28H23V29ZM23 33V34H24V33H23ZM39 29V28H38V29H39ZM39 33H38V34H39V33ZM30 19C28.8954 19 28 19.8954 28 21H30V21V19ZM32 19H30V21H32V19ZM34 21C34 19.8954 33.1046 19 32 19V21H34ZM34 23V21H32V23H34ZM29 24H33V22H29V24ZM28 21V23H30V21H28ZM30 41H28C28 42.1046 28.8954 43 30 43V41ZM32 41H30V43H32V41ZM32 41V43C33.1046 43 34 42.1046 34 41H32ZM32 39V41H34V39H32ZM29 40H33V38H29V40ZM30 41V39H28V41H30ZM19 32C19 33.1046 19.8954 34 21 34V32H21H19ZM19 30V32H21V30H19ZM21 28C19.8954 28 19 28.8954 19 30H21V28ZM23 28H21V30H23V28ZM24 33V29H22V33H24ZM21 34H23V32H21V34ZM41 32V34C42.1046 34 43 33.1046 43 32H41ZM41 30V32H43V30H41ZM41 30H43C43 28.8954 42.1046 28 41 28V30ZM39 30H41V28H39V30ZM40 33V29H38V33H40ZM41 32H39V34H41V32Z" fill="black" mask="url(#path-7-inside-1_3406_128140)"/>
<mask id="path-9-inside-2_3406_128140" fill="white">
<path fill-rule="evenodd" clip-rule="evenodd" d="M22.5164 25.3431C22.1259 24.9526 22.1259 24.3195 22.5164 23.9289L23.9306 22.5147C24.3211 22.1242 24.9543 22.1242 25.3448 22.5147L26.759 23.9289L23.9306 26.7574L22.5164 25.3431ZM36.6585 39.4853C37.049 39.8758 37.6822 39.8758 38.0727 39.4853L39.4869 38.0711C39.8775 37.6805 39.8775 37.0474 39.4869 36.6569L38.0727 35.2426L35.2443 38.0711L36.6585 39.4853ZM25.3448 39.4853C24.9543 39.8758 24.3211 39.8758 23.9306 39.4853L22.5164 38.0711C22.1259 37.6805 22.1259 37.0474 22.5164 36.6569L23.9306 35.2426L26.759 38.0711L25.3448 39.4853ZM39.4869 25.3431C39.8775 24.9526 39.8775 24.3195 39.4869 23.9289L38.0727 22.5147C37.6822 22.1242 37.049 22.1242 36.6585 22.5147L35.2443 23.9289L38.0727 26.7574L39.4869 25.3431Z"/>
</mask>
<path fill-rule="evenodd" clip-rule="evenodd" d="M22.5164 25.3431C22.1259 24.9526 22.1259 24.3195 22.5164 23.9289L23.9306 22.5147C24.3211 22.1242 24.9543 22.1242 25.3448 22.5147L26.759 23.9289L23.9306 26.7574L22.5164 25.3431ZM36.6585 39.4853C37.049 39.8758 37.6822 39.8758 38.0727 39.4853L39.4869 38.0711C39.8775 37.6805 39.8775 37.0474 39.4869 36.6569L38.0727 35.2426L35.2443 38.0711L36.6585 39.4853ZM25.3448 39.4853C24.9543 39.8758 24.3211 39.8758 23.9306 39.4853L22.5164 38.0711C22.1259 37.6805 22.1259 37.0474 22.5164 36.6569L23.9306 35.2426L26.759 38.0711L25.3448 39.4853ZM39.4869 25.3431C39.8775 24.9526 39.8775 24.3195 39.4869 23.9289L38.0727 22.5147C37.6822 22.1242 37.049 22.1242 36.6585 22.5147L35.2443 23.9289L38.0727 26.7574L39.4869 25.3431Z" fill="#F7F8F8"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M22.5164 25.3431C22.1259 24.9526 22.1259 24.3195 22.5164 23.9289L23.9306 22.5147C24.3211 22.1242 24.9543 22.1242 25.3448 22.5147L26.759 23.9289L23.9306 26.7574L22.5164 25.3431ZM36.6585 39.4853C37.049 39.8758 37.6822 39.8758 38.0727 39.4853L39.4869 38.0711C39.8775 37.6805 39.8775 37.0474 39.4869 36.6569L38.0727 35.2426L35.2443 38.0711L36.6585 39.4853ZM25.3448 39.4853C24.9543 39.8758 24.3211 39.8758 23.9306 39.4853L22.5164 38.0711C22.1259 37.6805 22.1259 37.0474 22.5164 36.6569L23.9306 35.2426L26.759 38.0711L25.3448 39.4853ZM39.4869 25.3431C39.8775 24.9526 39.8775 24.3195 39.4869 23.9289L38.0727 22.5147C37.6822 22.1242 37.049 22.1242 36.6585 22.5147L35.2443 23.9289L38.0727 26.7574L39.4869 25.3431Z" fill="#78767F" fill-opacity="0.02"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M22.5164 25.3431C22.1259 24.9526 22.1259 24.3195 22.5164 23.9289L23.9306 22.5147C24.3211 22.1242 24.9543 22.1242 25.3448 22.5147L26.759 23.9289L23.9306 26.7574L22.5164 25.3431ZM36.6585 39.4853C37.049 39.8758 37.6822 39.8758 38.0727 39.4853L39.4869 38.0711C39.8775 37.6805 39.8775 37.0474 39.4869 36.6569L38.0727 35.2426L35.2443 38.0711L36.6585 39.4853ZM25.3448 39.4853C24.9543 39.8758 24.3211 39.8758 23.9306 39.4853L22.5164 38.0711C22.1259 37.6805 22.1259 37.0474 22.5164 36.6569L23.9306 35.2426L26.759 38.0711L25.3448 39.4853ZM39.4869 25.3431C39.8775 24.9526 39.8775 24.3195 39.4869 23.9289L38.0727 22.5147C37.6822 22.1242 37.049 22.1242 36.6585 22.5147L35.2443 23.9289L38.0727 26.7574L39.4869 25.3431Z" fill="#5D34F2" fill-opacity="0.05"/>
<path d="M22.5164 25.3431L21.8093 26.0503L22.5164 25.3431ZM26.759 23.9289L27.4661 24.636L28.1732 23.9289L27.4661 23.2218L26.759 23.9289ZM23.9306 26.7574L23.2235 27.4645L23.9306 28.1716L24.6377 27.4645L23.9306 26.7574ZM38.0727 35.2426L38.7798 34.5355L38.0727 33.8284L37.3656 34.5355L38.0727 35.2426ZM35.2443 38.0711L34.5372 37.364L33.8301 38.0711L34.5372 38.7782L35.2443 38.0711ZM23.9306 35.2426L24.6377 34.5355L23.9306 33.8284L23.2235 34.5355L23.9306 35.2426ZM26.759 38.0711L27.4661 38.7782L28.1732 38.0711L27.4661 37.364L26.759 38.0711ZM35.2443 23.9289L34.5372 23.2218L33.8301 23.9289L34.5372 24.636L35.2443 23.9289ZM38.0727 26.7574L37.3656 27.4645L38.0727 28.1716L38.7798 27.4645L38.0727 26.7574ZM21.8093 23.2218C21.0282 24.0029 21.0282 25.2692 21.8093 26.0503L23.2235 24.636L23.2235 24.636L21.8093 23.2218ZM23.2235 21.8076L21.8093 23.2218L23.2235 24.636L24.6377 23.2218L23.2235 21.8076ZM26.0519 21.8076C25.2709 21.0266 24.0045 21.0266 23.2235 21.8076L24.6377 23.2218L26.0519 21.8076ZM27.4661 23.2218L26.0519 21.8076L24.6377 23.2218L26.0519 24.636L27.4661 23.2218ZM24.6377 27.4645L27.4661 24.636L26.0519 23.2218L23.2235 26.0503L24.6377 27.4645ZM21.8093 26.0503L23.2235 27.4645L24.6377 26.0503L23.2235 24.636L21.8093 26.0503ZM37.3656 38.7782L35.9514 40.1924C36.7325 40.9734 37.9988 40.9734 38.7798 40.1924L37.3656 38.7782ZM38.7798 37.364L37.3656 38.7782L38.7798 40.1924L40.194 38.7782L38.7798 37.364ZM38.7798 37.364L40.194 38.7782C40.9751 37.9971 40.9751 36.7308 40.194 35.9497L38.7798 37.364ZM37.3656 35.9497L38.7798 37.364L40.194 35.9497L38.7798 34.5355L37.3656 35.9497ZM35.9514 38.7782L38.7798 35.9497L37.3656 34.5355L34.5372 37.364L35.9514 38.7782ZM37.3656 38.7782L35.9514 37.364L34.5372 38.7782L35.9514 40.1924L37.3656 38.7782ZM23.2235 40.1924C24.0045 40.9734 25.2709 40.9734 26.0519 40.1924L24.6377 38.7782L24.6377 38.7782L23.2235 40.1924ZM21.8093 38.7782L23.2235 40.1924L24.6377 38.7782L23.2235 37.364L21.8093 38.7782ZM21.8093 35.9497C21.0282 36.7308 21.0282 37.9971 21.8093 38.7782L23.2235 37.364L21.8093 35.9497ZM23.2235 34.5355L21.8093 35.9497L23.2235 37.364L24.6377 35.9497L23.2235 34.5355ZM27.4661 37.364L24.6377 34.5355L23.2235 35.9497L26.0519 38.7782L27.4661 37.364ZM26.0519 40.1924L27.4661 38.7782L26.0519 37.364L24.6377 38.7782L26.0519 40.1924ZM38.7798 24.636L40.194 26.0503C40.9751 25.2692 40.9751 24.0029 40.194 23.2218L38.7798 24.636ZM37.3656 23.2218L38.7798 24.636L40.194 23.2218L38.7798 21.8076L37.3656 23.2218ZM37.3656 23.2218L38.7798 21.8076C37.9988 21.0266 36.7325 21.0266 35.9514 21.8076L37.3656 23.2218ZM35.9514 24.636L37.3656 23.2218L35.9514 21.8076L34.5372 23.2218L35.9514 24.636ZM38.7798 26.0503L35.9514 23.2218L34.5372 24.636L37.3656 27.4645L38.7798 26.0503ZM38.7798 24.636L37.3656 26.0503L38.7798 27.4645L40.194 26.0503L38.7798 24.636Z" fill="black" mask="url(#path-9-inside-2_3406_128140)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M31 40C35.9706 40 40 35.9706 40 31C40 26.0294 35.9706 22 31 22C26.0294 22 22 26.0294 22 31C22 35.9706 26.0294 40 31 40ZM31 34C32.6569 34 34 32.6569 34 31C34 29.3431 32.6569 28 31 28C29.3431 28 28 29.3431 28 31C28 32.6569 29.3431 34 31 34Z" fill="url(#paint1_linear_3406_128140)"/>
<defs>
<linearGradient id="paint0_linear_3406_128140" x1="8" y1="41.5" x2="31.504" y2="7.61547" gradientUnits="userSpaceOnUse">
<stop stop-color="#F9CB54"/>
<stop offset="1" stop-color="#E45CFA"/>
</linearGradient>
<linearGradient id="paint1_linear_3406_128140" x1="20.5214" y1="32.3125" x2="39.7606" y2="25.2088" gradientUnits="userSpaceOnUse">
<stop stop-color="#492EF3"/>
<stop offset="1" stop-color="#CF69FF"/>
</linearGradient>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 9.7 KiB

15
packages/console/src/assets/images/grinning-face.svg
View file

@ -1,15 +0,0 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect opacity="0.3" width="48" height="48" rx="16" fill="#FFCC4D"/>
<g clip-path="url(#clip0_1329_27188)">
<path d="M24 37.5C31.4558 37.5 37.5 31.4558 37.5 24C37.5 16.5442 31.4558 10.5 24 10.5C16.5442 10.5 10.5 16.5442 10.5 24C10.5 31.4558 16.5442 37.5 24 37.5Z" fill="#FFCC4D"/>
<path d="M24 26.25C21.2828 26.25 19.4798 25.9335 17.25 25.5C16.7407 25.4017 15.75 25.5 15.75 27C15.75 30 19.1962 33.75 24 33.75C28.803 33.75 32.25 30 32.25 27C32.25 25.5 31.2592 25.401 30.75 25.5C28.5203 25.9335 26.7172 26.25 24 26.25Z" fill="#664500"/>
<path d="M17.25 27C17.25 27 19.5 27.75 24 27.75C28.5 27.75 30.75 27 30.75 27C30.75 27 29.25 30 24 30C18.75 30 17.25 27 17.25 27Z" fill="white"/>
<path d="M19.5 23.25C20.5355 23.25 21.375 22.0747 21.375 20.625C21.375 19.1753 20.5355 18 19.5 18C18.4645 18 17.625 19.1753 17.625 20.625C17.625 22.0747 18.4645 23.25 19.5 23.25Z" fill="#664500"/>
<path d="M28.5 23.25C29.5355 23.25 30.375 22.0747 30.375 20.625C30.375 19.1753 29.5355 18 28.5 18C27.4645 18 26.625 19.1753 26.625 20.625C26.625 22.0747 27.4645 23.25 28.5 23.25Z" fill="#664500"/>
</g>
<defs>
<clipPath id="clip0_1329_27188">
<rect width="27" height="27" fill="white" transform="translate(10.5 10.5)"/>
</clipPath>
</defs>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 1.3 KiB

15
packages/console/src/assets/images/one-click.svg Normal file
View file

@ -0,0 +1,15 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 8C0 3.58172 3.58172 0 8 0H40C44.4183 0 48 3.58172 48 8V40C48 44.4183 44.4183 48 40 48H8C3.58172 48 0 44.4183 0 40V8Z" fill="#F3EFFA"/>
<path d="M25.2916 19.0005C26.9525 17.5346 28 15.3899 28 13.0005C28 9.64314 25.9318 6.76881 23 5.58203M14 18.2922C12.7553 16.8819 12 15.0294 12 13.0005C12 9.64314 14.0682 6.76881 17 5.58203" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M25 13C25 11.9869 24.6987 11.0441 24.1807 10.2564C23.287 8.89728 21.7483 8 20 8C17.2386 8 15 10.2386 15 13C15 13.431 15.0545 13.8492 15.1571 14.2482" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10.8083 33.4587C9.06747 32.0987 8.75881 29.5849 10.1189 27.8441C11.479 26.1032 13.9928 25.7946 15.7336 27.1547L25.1897 34.5426C26.9305 35.9027 27.2392 38.4165 25.8791 40.1573C24.519 41.8981 22.0052 42.2068 20.2644 40.8467L10.8083 33.4587Z" fill="#7958FF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M20 12C17.7909 12 16 13.7909 16 16V26V31V33C16 38.5228 20.4772 43 26 43H30C35.5228 43 40 38.5228 40 33V27C40 24.7909 38.2091 23 36 23C36 21.3431 34.6569 20 33 20C31.3431 20 30 21.3431 30 23V22C30 20.3431 28.6569 19 27 19C25.3431 19 24 20.3431 24 22V16C24 13.7909 22.2091 12 20 12Z" fill="url(#paint0_linear_3406_128238)"/>
<circle cx="7" cy="20" r="1.5" stroke="#FAABFF"/>
<rect x="35.7071" y="8.82812" width="3" height="3" rx="0.5" transform="rotate(-45 35.7071 8.82812)" stroke="#9FE79F"/>
<defs>
<linearGradient id="paint0_linear_3406_128238" x1="19.7088" y1="10.6324" x2="22.8478" y2="43.466" gradientUnits="userSpaceOnUse">
<stop stop-color="#DD7DFF"/>
<stop offset="0.927083" stop-color="#694BF4"/>
</linearGradient>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

14
packages/console/src/assets/images/owl.svg
View file

@ -1,14 +0,0 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect opacity="0.3" width="48" height="48" rx="16" fill="#ECD2CA"/>
<path d="M15.9878 18.75C11.6956 25.5623 16.7063 32.25 16.7063 32.25C16.7063 32.25 18.8618 31.9185 21.8626 28.35C24.8626 24.7815 15.9878 18.75 15.9878 18.75ZM31.9943 18.75C36.2866 25.5623 31.2758 32.25 31.2758 32.25C31.2758 32.25 29.1203 31.9185 26.1196 28.35C23.1188 24.7815 31.9943 18.75 31.9943 18.75Z" fill="#662113"/>
<path d="M21.9022 34.1677C21.81 33.996 21.6645 33.8797 21.504 33.7957C19.98 32.1667 21.0622 30.258 21.0622 30.258C21.0622 29.7307 22.0155 28.35 21.0622 28.35L20.1082 29.304C19.1542 30.2572 19.1542 33.1207 19.1542 33.1207H17.2462C16.719 33.1207 16.2922 33.5467 16.2922 34.0747C16.2922 34.6005 16.719 35.028 17.2462 35.028H18.3022L18.0907 35.1427C17.6272 35.3932 17.4547 35.9715 17.7052 36.4372C17.9557 36.8992 18.5347 37.0732 18.9982 36.8227L21.516 35.4607C21.9802 35.2102 22.1505 34.632 21.9022 34.1677ZM26.0992 34.1677C26.1915 33.996 26.337 33.8797 26.4967 33.7957C28.0215 32.1667 26.9385 30.258 26.9385 30.258C26.9385 29.7307 25.9852 28.35 26.9385 28.35L27.8925 29.304C28.8472 30.2572 28.8472 33.1207 28.8472 33.1207H30.7552C31.2832 33.1207 31.7085 33.5467 31.7085 34.0747C31.7085 34.6005 31.284 35.028 30.7552 35.028H29.6992L29.91 35.1427C30.375 35.3932 30.546 35.9715 30.2962 36.4372C30.0442 36.8992 29.4675 37.0732 29.0017 36.8227L26.4847 35.4607C26.0205 35.2102 25.8495 34.632 26.0992 34.1677Z" fill="#FFAC33"/>
<path d="M31.7085 18.969C33.8767 14.4 31.7085 11.0625 31.7085 11.0625C31.7085 11.0625 27.3727 11.7817 26.6505 13.2188C25.7362 15.0368 31.7085 18.969 31.7085 18.969Z" fill="#662113"/>
<path d="M32.6715 20.0535C32.6715 27.7762 30.3075 35.4998 24 35.4998C17.6933 35.4998 15.3278 27.7762 15.3278 20.0535C15.3278 12.33 19.2105 12.0623 24 12.0623C28.7903 12.0623 32.6715 12.33 32.6715 20.0535Z" fill="#662113"/>
<path d="M31.2495 23.8035C31.2495 31.5263 25.419 34.7498 24 34.7498C22.581 34.7498 16.7505 31.5263 16.7505 23.8035C16.7505 16.08 31.2495 16.08 31.2495 23.8035Z" fill="#C1694F"/>
<path d="M16.2915 18.969C14.1233 14.4 16.2915 11.0625 16.2915 11.0625C16.2915 11.0625 20.628 11.7817 21.351 13.2188C22.2645 15.0368 16.2915 18.969 16.2915 18.969Z" fill="#662113"/>
<path d="M21.6967 13.7798C18.5265 12.5918 16.2915 11.0625 16.2915 11.0625C16.2915 11.0625 14.7345 13.4782 15.5955 17.007C15.93 18.6097 17.0505 20.1532 18.5235 20.5035C20.5012 20.9738 24 20.4668 24 17.5312C24 15.51 23.1945 14.3423 21.6967 13.7798ZM26.3032 13.7798C29.4735 12.5918 31.7077 11.0625 31.7077 11.0625C31.7077 11.0625 33.2647 13.4782 32.4037 17.007C32.07 18.6097 30.9495 20.1532 29.4772 20.5035C27.4987 20.9738 24 20.4668 24 17.5312C24 15.51 24.8055 14.3423 26.3032 13.7798Z" fill="#C1694F"/>
<path d="M22.5622 16.8127C22.5622 18.4005 21.2752 19.6875 19.6875 19.6875C18.0997 19.6875 16.8127 18.4005 16.8127 16.8127C16.8127 15.225 18.1005 13.938 19.6875 13.938C21.2752 13.9373 22.5622 15.225 22.5622 16.8127ZM31.1872 16.8127C31.1872 18.4005 29.9002 19.6875 28.3125 19.6875C26.7247 19.6875 25.4377 18.4005 25.4377 16.8127C25.4377 15.225 26.7247 13.938 28.3125 13.938C29.9002 13.938 31.1872 15.225 31.1872 16.8127Z" fill="#FFD983"/>
<path d="M21.1253 16.8127C21.1253 17.607 20.4818 18.2505 19.6875 18.2505C18.8933 18.2505 18.2498 17.607 18.2498 16.8127C18.2498 16.0192 18.8933 15.375 19.6875 15.375C20.4818 15.375 21.1253 16.0185 21.1253 16.8127ZM29.7503 16.8127C29.7503 17.607 29.1068 18.2505 28.3125 18.2505C27.5183 18.2505 26.8748 17.607 26.8748 16.8127C26.8748 16.0192 27.5183 15.375 28.3125 15.375C29.1068 15.375 29.7503 16.0185 29.7503 16.8127Z" fill="#292F33"/>
<path d="M26.1562 20.0468C26.1562 21.8333 24 22.5623 24 22.5623C24 22.5623 21.8438 21.8325 21.8438 20.0468C21.8438 18.261 24 17.5312 24 17.5312C24 17.5312 26.1562 18.2603 26.1562 20.0468Z" fill="#FFCC4D"/>
<path d="M26.1562 20.0467C26.1562 21.8332 24 22.5622 24 22.5622C24 22.5622 21.8438 21.8325 21.8438 20.0467C22.7422 20.9452 24 21.1252 24 21.1252C24 21.1252 25.2578 20.9452 26.1562 20.0467Z" fill="#F4900C"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 4 KiB

21
packages/console/src/assets/images/passwordless.svg Normal file
View file

@ -0,0 +1,21 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_3406_128288)">
<path d="M0 8C0 3.58172 3.58172 0 8 0H40C44.4183 0 48 3.58172 48 8V40C48 44.4183 44.4183 48 40 48H8C3.58172 48 0 44.4183 0 40V8Z" fill="#F3EFFA"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M21 8C21 6.89543 21.8954 6 23 6H25C26.1046 6 27 6.89543 27 8V12H21V8ZM21 40C21 41.1046 21.8954 42 23 42H25C26.1046 42 27 41.1046 27 40V36H21V40ZM8 27C6.89543 27 6 26.1046 6 25V23C6 21.8954 6.89543 21 8 21H12V27H8ZM40 27C41.1046 27 42 26.1046 42 25V23C42 21.8954 41.1046 21 40 21H36V27H40Z" fill="#7958FF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.5638 14.8076C9.78274 14.0266 9.78274 12.7602 10.5638 11.9792L11.978 10.565C12.759 9.78392 14.0254 9.78392 14.8064 10.565L17.6349 13.3934L13.3922 17.636L10.5638 14.8076ZM33.1912 37.435C33.9722 38.2161 35.2386 38.2161 36.0196 37.435L37.4338 36.0208C38.2149 35.2398 38.2149 33.9734 37.4338 33.1924L34.6054 30.364L30.3628 34.6066L33.1912 37.435ZM14.8064 37.435C14.0254 38.2161 12.759 38.2161 11.978 37.435L10.5638 36.0208C9.78274 35.2398 9.78274 33.9734 10.5638 33.1924L13.3922 30.364L17.6349 34.6066L14.8064 37.435ZM37.4338 14.8076C38.2149 14.0266 38.2149 12.7602 37.4338 11.9792L36.0196 10.565C35.2386 9.78392 33.9722 9.78392 33.1912 10.565L30.3628 13.3934L34.6054 17.636L37.4338 14.8076Z" fill="#7958FF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M24 38C31.732 38 38 31.732 38 24C38 16.268 31.732 10 24 10C16.268 10 10 16.268 10 24C10 31.732 16.268 38 24 38ZM24 29.6C27.0928 29.6 29.6 27.0928 29.6 24C29.6 20.9072 27.0928 18.4 24 18.4C20.9072 18.4 18.4 20.9072 18.4 24C18.4 27.0928 20.9072 29.6 24 29.6Z" fill="url(#paint0_linear_3406_128288)"/>
<path d="M16.5 36C16.5 34.067 18.067 32.5 20 32.5H38C39.933 32.5 41.5 34.067 41.5 36V38C41.5 39.933 39.933 41.5 38 41.5H20C18.067 41.5 16.5 39.933 16.5 38V36Z" fill="#F5EEFF" stroke="black"/>
<circle cx="23" cy="37" r="2" fill="#2D3132"/>
<circle cx="29" cy="37" r="2" fill="#2D3132"/>
<circle cx="35" cy="37" r="2" fill="#2D3132"/>
</g>
<defs>
<linearGradient id="paint0_linear_3406_128288" x1="7.7" y1="26.0417" x2="37.6276" y2="14.9915" gradientUnits="userSpaceOnUse">
<stop stop-color="#492EF3"/>
<stop offset="1" stop-color="#CF69FF"/>
</linearGradient>
<clipPath id="clip0_3406_128288">
<path d="M0 8C0 3.58172 3.58172 0 8 0H40C44.4183 0 48 3.58172 48 8V40C48 44.4183 44.4183 48 40 48H8C3.58172 48 0 44.4183 0 40V8Z" fill="white"/>
</clipPath>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.5 KiB

40
packages/console/src/assets/images/tada.svg
View file

@ -1,23 +1,29 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_2113_14561)">
<path d="M7.75042 4.9922C7.67576 5.06686 7.61909 5.15686 7.57176 5.25553L7.56642 5.2502L0.0890901 22.0942L0.0964234 22.1015C-0.0422433 22.3702 0.189757 22.9169 0.66509 23.3929C1.14042 23.8682 1.68709 24.1002 1.95576 23.9615L1.96242 23.9682L18.8064 16.4902L18.8011 16.4842C18.8991 16.4375 18.9891 16.3809 19.0644 16.3049C20.1058 15.2635 18.4171 11.8869 15.2938 8.76286C12.1691 5.63886 8.79242 3.95086 7.75042 4.9922Z" fill="#DD2E44"/>
<path d="M8.66642 8L0.27709 21.6707L0.0890901 22.094L0.0964234 22.1013C-0.0422433 22.37 0.189757 22.9167 0.66509 23.3927C0.819757 23.5473 0.980423 23.6647 1.13776 23.764L11.3331 11.3333L8.66642 8Z" fill="#EA596E"/>
<path d="M15.3418 8.7107C18.4551 11.8254 20.1838 15.1454 19.2011 16.1267C18.2191 17.1094 14.8991 15.3814 11.7838 12.268C8.66977 9.15336 6.94177 5.83203 7.92377 4.85003C8.90643 3.86803 12.2264 5.59603 15.3418 8.7107Z" fill="#A0041E"/>
<path d="M12.3932 9.07254C12.2606 9.17987 12.0872 9.23587 11.9039 9.21587C11.3252 9.1532 10.8386 8.95187 10.4979 8.63387C10.1372 8.29721 9.95923 7.8452 10.0079 7.39254C10.0932 6.59787 10.8906 5.86854 12.2499 6.0152C12.7786 6.07187 13.0146 5.90187 13.0226 5.82054C13.0319 5.73987 12.8379 5.52321 12.3092 5.46587C11.7306 5.40321 11.2439 5.20187 10.9026 4.88387C10.5419 4.5472 10.3632 4.09521 10.4126 3.64254C10.4992 2.84787 11.2959 2.11854 12.6539 2.26587C13.0392 2.30721 13.2426 2.22787 13.3286 2.17654C13.3972 2.13454 13.4246 2.09454 13.4272 2.07121C13.4352 1.99054 13.2439 1.77387 12.7139 1.71654C12.3479 1.67654 12.0826 1.34854 12.1232 0.981872C12.1626 0.615872 12.4899 0.351205 12.8572 0.391205C14.2152 0.537205 14.8392 1.41921 14.7532 2.21454C14.6666 3.01054 13.8699 3.73854 12.5106 3.59254C12.1252 3.55054 11.9239 3.63054 11.8372 3.68187C11.7686 3.7232 11.7406 3.76387 11.7379 3.78654C11.7292 3.86787 11.9219 4.08387 12.4519 4.1412C13.8099 4.28787 14.4339 5.16921 14.3479 5.96454C14.2619 6.7592 13.4652 7.48854 12.1066 7.34121C11.7212 7.29987 11.5186 7.37987 11.4319 7.43054C11.3626 7.47321 11.3359 7.51321 11.3332 7.53587C11.3246 7.61654 11.5172 7.83321 12.0466 7.89054C12.4119 7.93054 12.6779 8.2592 12.6372 8.62521C12.6186 8.80787 12.5259 8.96587 12.3932 9.07254Z" fill="#AA8DD8"/>
<path d="M20.4411 15.2379C21.7564 14.8666 22.6638 15.4532 22.8798 16.2232C23.0958 16.9926 22.6278 17.9666 21.3131 18.3366C20.7998 18.4806 20.6458 18.7259 20.6664 18.8039C20.6891 18.8826 20.9498 19.0119 21.4618 18.8672C22.7764 18.4972 23.6838 19.0839 23.8998 19.8532C24.1171 20.6232 23.6478 21.5959 22.3324 21.9666C21.8198 22.1106 21.6651 22.3566 21.6878 22.4346C21.7098 22.5126 21.9698 22.6419 22.4824 22.4979C22.8358 22.3986 23.2051 22.6046 23.3044 22.9586C23.4031 23.3132 23.1971 23.6812 22.8424 23.7812C21.5284 24.1512 20.6204 23.5659 20.4031 22.7952C20.1871 22.0259 20.6558 21.0532 21.9718 20.6826C22.4851 20.5379 22.6391 20.2932 22.6164 20.2146C22.5951 20.1366 22.3351 20.0066 21.8231 20.1506C20.5071 20.5212 19.6004 19.9359 19.3838 19.1646C19.1671 18.3952 19.6358 17.4226 20.9511 17.0512C21.4631 16.9079 21.6171 16.6612 21.5958 16.5839C21.5731 16.5052 21.3138 16.3759 20.8011 16.5199C20.4464 16.6199 20.0791 16.4132 19.9791 16.0592C19.8798 15.7059 20.0864 15.3379 20.4411 15.2379Z" fill="#77B255"/>
<path d="M15.3342 13.4401C15.1382 13.4401 14.9449 13.3541 14.8129 13.1901C14.5829 12.9021 14.6302 12.4828 14.9169 12.2528C15.0622 12.1361 18.5289 9.41345 23.4282 10.1141C23.7929 10.1661 24.0462 10.5034 23.9942 10.8681C23.9422 11.2321 23.6075 11.4881 23.2395 11.4334C18.9109 10.8188 15.7815 13.2695 15.7509 13.2941C15.6269 13.3928 15.4802 13.4401 15.3342 13.4401Z" fill="#AA8DD8"/>
<path d="M3.83631 10.6667C3.77297 10.6667 3.70831 10.6574 3.64431 10.6387C3.29164 10.5327 3.09164 10.1614 3.19764 9.80873C3.95297 7.29339 4.63764 3.27939 3.79631 2.23273C3.70231 2.11406 3.56031 1.99739 3.23497 2.02206C2.60964 2.07006 2.66897 3.38939 2.66964 3.40273C2.69764 3.77006 2.42164 4.09006 2.05497 4.11739C1.68231 4.14006 1.36764 3.86939 1.34031 3.50206C1.27164 2.58273 1.55764 0.81206 3.13497 0.692727C3.83897 0.639394 4.42364 0.88406 4.83631 1.39739C6.41697 3.36473 4.81231 9.06806 4.47497 10.1921C4.38831 10.4807 4.12297 10.6667 3.83631 10.6667Z" fill="#77B255"/>
<path d="M17 7.3335C17.5523 7.3335 18 6.88578 18 6.3335C18 5.78121 17.5523 5.3335 17 5.3335C16.4477 5.3335 16 5.78121 16 6.3335C16 6.88578 16.4477 7.3335 17 7.3335Z" fill="#5C913B"/>
<path d="M1.33333 13.3332C2.06971 13.3332 2.66667 12.7362 2.66667 11.9998C2.66667 11.2635 2.06971 10.6665 1.33333 10.6665C0.596954 10.6665 0 11.2635 0 11.9998C0 12.7362 0.596954 13.3332 1.33333 13.3332Z" fill="#9266CC"/>
<path d="M21.667 14C22.2193 14 22.667 13.5523 22.667 13C22.667 12.4477 22.2193 12 21.667 12C21.1147 12 20.667 12.4477 20.667 13C20.667 13.5523 21.1147 14 21.667 14Z" fill="#5C913B"/>
<path d="M15.667 22C16.2193 22 16.667 21.5523 16.667 21C16.667 20.4477 16.2193 20 15.667 20C15.1147 20 14.667 20.4477 14.667 21C14.667 21.5523 15.1147 22 15.667 22Z" fill="#5C913B"/>
<path d="M18.6663 4.00016C19.4027 4.00016 19.9997 3.40321 19.9997 2.66683C19.9997 1.93045 19.4027 1.3335 18.6663 1.3335C17.93 1.3335 17.333 1.93045 17.333 2.66683C17.333 3.40321 17.93 4.00016 18.6663 4.00016Z" fill="#FFCC4D"/>
<path d="M21.667 6.6665C22.2193 6.6665 22.667 6.21879 22.667 5.6665C22.667 5.11422 22.2193 4.6665 21.667 4.6665C21.1147 4.6665 20.667 5.11422 20.667 5.6665C20.667 6.21879 21.1147 6.6665 21.667 6.6665Z" fill="#FFCC4D"/>
<path d="M19.667 9.3335C20.2193 9.3335 20.667 8.88578 20.667 8.3335C20.667 7.78121 20.2193 7.3335 19.667 7.3335C19.1147 7.3335 18.667 7.78121 18.667 8.3335C18.667 8.88578 19.1147 9.3335 19.667 9.3335Z" fill="#FFCC4D"/>
<path d="M5 16.6665C5.55228 16.6665 6 16.2188 6 15.6665C6 15.1142 5.55228 14.6665 5 14.6665C4.44772 14.6665 4 15.1142 4 15.6665C4 16.2188 4.44772 16.6665 5 16.6665Z" fill="#FFCC4D"/>
<g clip-path="url(#clip0_3616_33231)">
<rect x="7" y="8" width="4" height="4" fill="#947DFF"/>
<rect x="21" y="14" width="2" height="2" fill="#FFB95A"/>
<rect x="16.5859" y="6.97266" width="2" height="2" transform="rotate(-43.9234 16.5859 6.97266)" fill="#FFF480"/>
<path d="M3.52271 1.31646C3.58411 1.29247 3.64655 1.34888 3.6289 1.41239L3.10775 3.28796C3.09183 3.34526 3.02118 3.36577 2.97705 3.32591L1.68505 2.15876C1.64092 2.1189 1.65417 2.04653 1.70957 2.02488L3.52271 1.31646Z" fill="#68BE6C"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M9 6C9.55228 6 10 5.55228 10 5C10 4.44772 9.55228 4 9 4C8.44772 4 8 4.44772 8 5C8 5.55228 8.44772 6 9 6ZM9 5.5C9.27614 5.5 9.5 5.27614 9.5 5C9.5 4.72386 9.27614 4.5 9 4.5C8.72386 4.5 8.5 4.72386 8.5 5C8.5 5.27614 8.72386 5.5 9 5.5Z" fill="#83DA85"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M21 3C21.5523 3 22 2.55228 22 2C22 1.44772 21.5523 1 21 1C20.4477 1 20 1.44772 20 2C20 2.55228 20.4477 3 21 3ZM21 2.5C21.2761 2.5 21.5 2.27614 21.5 2C21.5 1.72386 21.2761 1.5 21 1.5C20.7239 1.5 20.5 1.72386 20.5 2C20.5 2.27614 20.7239 2.5 21 2.5Z" fill="#C4C7C7"/>
<path d="M13.0947 5.76172L12.7729 4.87551C12.5952 4.38607 12.8479 3.84525 13.3374 3.66755V3.66755C13.8268 3.48985 14.0795 2.94903 13.9018 2.45959V2.45959C13.7241 1.97015 13.9769 1.42933 14.4663 1.25163L15.3525 0.929881" stroke="#AF9EFF" stroke-width="0.666667" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M20.6081 9.80512L20.397 10.33C20.2805 10.6198 19.951 10.7603 19.6611 10.6437V10.6437C19.3713 10.5272 19.0418 10.6677 18.9252 10.9575V10.9575C18.8087 11.2474 18.4792 11.3879 18.1894 11.2713L17.6645 11.0603" stroke="#68BE6C" stroke-width="0.666667" stroke-linecap="round" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M13 15C14.6569 15 16 13.6569 16 12C16 10.3431 14.6569 9 13 9C11.3431 9 10 10.3431 10 12C10 13.6569 11.3431 15 13 15ZM13 13.5C13.8284 13.5 14.5 12.8284 14.5 12C14.5 11.1716 13.8284 10.5 13 10.5C12.1716 10.5 11.5 11.1716 11.5 12C11.5 12.8284 12.1716 13.5 13 13.5Z" fill="#FFB95A"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.5829 12.0417C15.5829 12.0187 15.6015 12 15.6246 12H16.3756C16.3986 12 16.4173 12.0187 16.4173 12.0417V13.3634L17.5619 12.7026C17.5819 12.6911 17.6074 12.6979 17.6189 12.7179L17.9944 13.3682C18.0059 13.3882 17.9991 13.4137 17.9791 13.4252L16.8344 14.0861L17.9791 14.747C17.999 14.7585 18.0059 14.784 17.9943 14.804L17.6188 15.4543C17.6073 15.4743 17.5818 15.4811 17.5618 15.4696L16.4173 14.8088V16.1305C16.4173 16.1535 16.3986 16.1722 16.3756 16.1722H15.6246C15.6015 16.1722 15.5829 16.1535 15.5829 16.1305V14.8087L14.4382 15.4696C14.4182 15.4811 14.3927 15.4743 14.3812 15.4543L14.0057 14.804C13.9941 14.784 14.001 14.7585 14.0209 14.747L15.1656 14.0861L14.0209 13.4252C14.0009 13.4137 13.9941 13.3882 14.0056 13.3682L14.3811 12.7179C14.3926 12.6979 14.4181 12.6911 14.4381 12.7026L15.5829 13.3635V12.0417Z" fill="#7958FF"/>
<path d="M2.47295 20.6848C2.29922 21.206 2.79505 21.7018 3.31622 21.5281L15.8772 17.3411C16.3474 17.1844 16.4882 16.5877 16.1378 16.2373L7.76381 7.86325C7.41337 7.51282 6.81666 7.65368 6.65995 8.12384L2.47295 20.6848Z" fill="#FF5449"/>
<mask id="mask0_3616_33231" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="2" y="7" width="15" height="15">
<path d="M2.47295 20.6848C2.29922 21.206 2.79505 21.7018 3.31622 21.5281L15.8772 17.3411C16.3474 17.1844 16.4882 16.5877 16.1378 16.2373L7.76381 7.86325C7.41337 7.51282 6.81666 7.65368 6.65995 8.12384L2.47295 20.6848Z" fill="#FF5449"/>
</mask>
<g mask="url(#mask0_3616_33231)">
<rect x="2.35938" y="8.71875" width="16" height="2" rx="0.666667" transform="rotate(15 2.35938 8.71875)" fill="#FFB4A9"/>
<rect x="1.65234" y="12.2559" width="16" height="2" rx="0.666667" transform="rotate(15 1.65234 12.2559)" fill="#FFB4A9"/>
<rect x="0.945312" y="15.791" width="16" height="2" rx="0.666667" transform="rotate(15 0.945312 15.791)" fill="#FFB4A9"/>
</g>
<path d="M3.51651 14.2879C3.51338 14.222 3.58677 14.1808 3.64133 14.2178L5.2523 15.3106C5.30152 15.344 5.29839 15.4175 5.24652 15.4466L3.72793 16.2983C3.67606 16.3274 3.61171 16.2917 3.60889 16.2323L3.51651 14.2879Z" fill="#68BE6C"/>
<path d="M19.193 19.5617L18.7961 19.1586C18.5769 18.936 18.2188 18.9332 17.9962 19.1524V19.1524C17.7735 19.3716 17.4154 19.3688 17.1962 19.1462V19.1462C16.977 18.9236 16.6188 18.9208 16.3962 19.14L15.9931 19.5369" stroke="#FF897A" stroke-width="0.666667" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_2113_14561">
<clipPath id="clip0_3616_33231">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.9 KiB

After

Width:  |  Height:  |  Size: 4.6 KiB

2
packages/console/src/components/AppContent/components/Topbar/index.module.scss
View file

@ -3,7 +3,7 @@
.topbar {
flex: 0 0 64px;
width: 100%;
padding: _.unit(4) _.unit(6);
padding: 0 _.unit(6);
display: flex;
align-items: center;

4
packages/console/src/components/AppContent/components/Topbar/index.tsx
View file

@ -1,7 +1,9 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
import Spacer from '@/components/Spacer';
import Logo from '@/icons/Logo';
import GetStartedProgress from '@/pages/GetStarted/components/GetStartedProgress';
import * as styles from './index.module.scss';
@ -13,6 +15,8 @@ const Topbar = () => {
<Logo className={styles.logo} />
<div className={styles.line} />
<div className={styles.text}>{t('admin_console.title')}</div>
<Spacer />
<GetStartedProgress />
</div>
);
};

2
packages/console/src/components/AppContent/index.module.scss
View file

@ -10,7 +10,7 @@
.content {
flex-grow: 1;
display: flex;
padding-right: _.unit(5);
padding-right: _.unit(6);
margin-bottom: _.unit(6);
overflow: hidden;

20
packages/console/src/components/Dropdown/DropdownItem.tsx
View file

@ -5,19 +5,23 @@ import * as styles from './DropdownItem.module.scss';
type Props = {
onClick?: () => void;
className?: string;
children: React.ReactNode;
icon?: React.ReactNode;
iconClassName?: string;
type?: 'default' | 'danger';
};
const DropdownItem = ({ onClick, children, icon, type = 'default' }: Props) => (
<li
className={classNames(styles.item, styles[type])}
onClick={() => {
onClick?.();
}}
>
{icon && <span className={styles.icon}>{icon}</span>}
const DropdownItem = ({
onClick,
className,
children,
icon,
iconClassName,
type = 'default',
}: Props) => (
<li className={classNames(styles.item, styles[type], className)} onClick={onClick}>
{icon && <span className={classNames(styles.icon, iconClassName)}>{icon}</span>}
{children}
</li>
);

12
packages/console/src/components/Dropdown/index.module.scss
View file

@ -13,12 +13,12 @@
&:focus {
outline: none;
}
}
.title {
padding: _.unit(4) _.unit(3) 0 _.unit(3);
font: var(--font-subhead-cap-small);
color: var(--color-caption);
}
.title {
padding: _.unit(4) _.unit(3) 0 _.unit(3);
font: var(--font-subhead-cap-small);
color: var(--color-caption);
}
.overlay {
@ -27,7 +27,7 @@
inset: 0;
}
ul.list {
.list {
margin: 0;
padding: _.unit(2) _.unit(1);
}

14
packages/console/src/components/Dropdown/index.tsx
View file

@ -3,7 +3,7 @@ import React, { ReactNode, RefObject, useRef } from 'react';
import ReactModal from 'react-modal';
import * as styles from './index.module.scss';
import usePosition from './use-position';
import usePosition, { HorizontalAlignment } from './use-position';
export { default as DropdownItem } from './DropdownItem';
@ -15,6 +15,8 @@ type Props = {
anchorRef: RefObject<HTMLElement>;
isFullWidth?: boolean;
className?: string;
titleClassName?: string;
horizontalAlign?: HorizontalAlignment;
};
const Dropdown = ({
@ -25,10 +27,12 @@ const Dropdown = ({
anchorRef,
isFullWidth,
className,
titleClassName,
horizontalAlign,
}: Props) => {
const overlayRef = useRef<HTMLDivElement>(null);
const { position, mutate } = usePosition(anchorRef, overlayRef);
const { position, mutate } = usePosition(anchorRef, overlayRef, horizontalAlign);
return (
<ReactModal
@ -43,14 +47,14 @@ const Dropdown = ({
}
: { visibility: 'hidden' },
}}
className={classNames(styles.content, className, position?.isOnTop && styles.onTop)}
className={classNames(styles.content, position?.isOnTop && styles.onTop)}
overlayClassName={styles.overlay}
onRequestClose={onClose}
onAfterOpen={mutate}
>
<div ref={overlayRef}>
{title && <div className={styles.title}>{title}</div>}
<ul className={styles.list} onClick={onClose}>
{title && <div className={classNames(styles.title, titleClassName)}>{title}</div>}
<ul className={classNames(styles.list, className)} onClick={onClose}>
{children}
</ul>
</div>

10
packages/console/src/components/Dropdown/use-position.ts
View file

@ -7,6 +7,8 @@ type Position = {
isOnTop?: boolean;
};
export type HorizontalAlignment = 'left' | 'right';
// Leave space for box-shadow effect.
const safePadding = 12;
// The distance to anchor
@ -14,9 +16,11 @@ const distance = 4;
export default function usePosition(
anchorRef: RefObject<HTMLElement>,
overlayRef: RefObject<HTMLElement>
overlayRef: RefObject<HTMLElement>,
horizontalAlign: HorizontalAlignment = 'left'
) {
const [position, setPosition] = useState<Position>();
const isRightAligned = horizontalAlign === 'right';
const updatePosition = useCallback(() => {
if (anchorRef.current && overlayRef.current) {
@ -24,13 +28,13 @@ export default function usePosition(
const overlay = overlayRef.current.getBoundingClientRect();
const isOnTop = anchor.y + anchor.height + overlay.height > window.innerHeight - safePadding;
const isOnLeft = anchor.x + overlay.width > window.innerWidth - safePadding;
const left = isOnLeft ? anchor.x + anchor.width - overlay.width : anchor.x;
const left = isOnLeft || isRightAligned ? anchor.x + anchor.width - overlay.width : anchor.x;
const top = isOnTop
? anchor.y - overlay.height - distance
: anchor.y + anchor.height + distance;
setPosition({ left, top, width: anchor.width, isOnTop });
}
}, [anchorRef, overlayRef]);
}, [anchorRef, isRightAligned, overlayRef]);
useLayoutEffect(() => {
updatePosition();

26
packages/console/src/components/Index/index.module.scss Normal file
View file

@ -0,0 +1,26 @@
@use '@/scss/underscore' as _;
.container {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
color: var(--color-primary);
background: var(--color-surface-5);
font: var(--font-title-medium);
&.active {
color: var(--color-on-primary);
background: var(--color-primary);
}
&.completed {
background: var(--color-primary);
> svg {
fill: var(--color-on-primary);
}
}
}

28
packages/console/src/components/Index/index.tsx Normal file
View file

@ -0,0 +1,28 @@
import classNames from 'classnames';
import React from 'react';
import Tick from '@/icons/Tick';
import * as styles from './index.module.scss';
type Props = {
className?: string;
index: number;
isActive?: boolean;
isComplete?: boolean;
};
const Index = ({ className, index, isActive, isComplete }: Props) => (
<div
className={classNames(
styles.container,
className,
isActive && styles.active,
isComplete && styles.completed
)}
>
{isComplete ? <Tick /> : index}
</div>
);
export default Index;

22
packages/console/src/mdx-components/Step/index.module.scss
View file

@ -17,29 +17,7 @@
}
.index {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
color: var(--color-primary);
background: var(--color-surface-5);
font: var(--font-title-medium);
margin-right: _.unit(4);
&.active {
color: var(--color-on-primary);
background: var(--color-primary);
}
&.completed {
background: var(--color-primary);
> svg {
fill: var(--color-on-primary);
}
}
}
}

17
packages/console/src/mdx-components/Step/index.tsx
View file

@ -8,9 +8,9 @@ import Card from '@/components/Card';
import CardTitle from '@/components/CardTitle';
import DangerousRaw from '@/components/DangerousRaw';
import IconButton from '@/components/IconButton';
import Index from '@/components/Index';
import Spacer from '@/components/Spacer';
import { ArrowDown, ArrowUp } from '@/icons/Arrow';
import Tick from '@/icons/Tick';
import * as styles from './index.module.scss';
@ -62,15 +62,12 @@ const Step = ({
setIsExpanded(!isExpanded);
}}
>
<div
className={classNames(
styles.index,
isActive && styles.active,
isComplete && styles.completed
)}
>
{isComplete ? <Tick /> : index + 1}
</div>
<Index
className={styles.index}
index={index + 1}
isActive={isActive}
isComplete={isComplete}
/>
<CardTitle
size="medium"
title={<DangerousRaw>{title}</DangerousRaw>}

51
packages/console/src/pages/GetStarted/components/GetStartedProgress/index.module.scss Normal file
View file

@ -0,0 +1,51 @@
@use '@/scss/underscore' as _;
.container {
display: flex;
align-items: center;
padding: _.unit(2);
border-radius: 8px;
transition: background-color 0.2s ease-in-out;
user-select: none;
cursor: pointer;
&:hover,
&.active {
background-color: var(--color-surface-5);
}
img {
width: 24px;
height: 24px;
margin-right: 8px;
}
span {
font: var(--font-subhead-2);
color: var(--color-text);
}
}
.dropdownTitle {
padding: _.unit(5) _.unit(5) _.unit(3) _.unit(4);
font: var(--font-subhead-cap);
text-transform: uppercase;
letter-spacing: 0.1em;
}
.dropdown {
padding: 0;
}
.index {
width: 20px;
height: 20px;
font: var(--font-subhead-cap);
}
.dropdownItem {
height: 44px;
padding: 0 _.unit(5) 0 _.unit(4);
border-top: 1px solid var(--color-neutral-95);
border-radius: unset;
}

67
packages/console/src/pages/GetStarted/components/GetStartedProgress/index.tsx Normal file
View file

@ -0,0 +1,67 @@
import classNames from 'classnames';
import React, { useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import icon from '@/assets/images/tada.svg';
import Dropdown, { DropdownItem } from '@/components/Dropdown';
import Index from '@/components/Index';
import useConfigs from '@/hooks/use-configs';
import useGetStartedMetadata from '../../hook';
import * as styles from './index.module.scss';
const GetStartedProgress = () => {
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
const { configs } = useConfigs();
const anchorRef = useRef<HTMLDivElement>(null);
const [showDropDown, setShowDropdown] = useState(false);
const { data, completedCount, totalCount } = useGetStartedMetadata();
if (!configs) {
return null;
}
return (
<>
<div
ref={anchorRef}
className={classNames(styles.container, showDropDown && styles.active)}
onClick={() => {
setShowDropdown(true);
}}
>
<img src={icon} />
<span>
{t('get_started.progress', {
completed: completedCount,
total: totalCount,
})}
</span>
</div>
<Dropdown
anchorRef={anchorRef}
className={styles.dropdown}
isOpen={showDropDown}
horizontalAlign="right"
title={t('get_started.progress_dropdown_title')}
titleClassName={styles.dropdownTitle}
onClose={() => {
setShowDropdown(false);
}}
>
{data.map(({ id, title, isComplete, onClick }, index) => (
<DropdownItem
key={id}
className={styles.dropdownItem}
icon={<Index className={styles.index} index={index + 1} isComplete={isComplete} />}
onClick={onClick}
>
{t(title)}
</DropdownItem>
))}
</Dropdown>
</>
);
};
export default GetStartedProgress;

103
packages/console/src/pages/GetStarted/hook.ts Normal file
View file

@ -0,0 +1,103 @@
import { AdminConsoleKey, I18nKey } from '@logto/phrases';
import { useNavigate } from 'react-router-dom';
import checkDemoIcon from '@/assets/images/check-demo.svg';
import createAppIcon from '@/assets/images/create-app.svg';
import customizeIcon from '@/assets/images/customize.svg';
import furtherReadingsIcon from '@/assets/images/further-readings.svg';
import oneClickIcon from '@/assets/images/one-click.svg';
import passwordlessIcon from '@/assets/images/passwordless.svg';
import useAdminConsoleConfigs from '@/hooks/use-configs';
type GetStartedMetadata = {
id: string;
title: AdminConsoleKey;
subtitle: AdminConsoleKey;
icon: string;
buttonText: I18nKey;
isComplete?: boolean;
onClick: () => void;
};
const useGetStartedMetadata = () => {
const { configs, updateConfigs } = useAdminConsoleConfigs();
const navigate = useNavigate();
const data: GetStartedMetadata[] = [
{
id: 'checkDemo',
title: 'get_started.card1_title',
subtitle: 'get_started.card1_subtitle',
icon: checkDemoIcon,
buttonText: 'general.check_out',
isComplete: configs?.checkDemo,
onClick: async () => {
void updateConfigs({ checkDemo: true });
window.open('https://logto.io/', '_blank');
},
},
{
id: 'createApplication',
title: 'get_started.card2_title',
subtitle: 'get_started.card2_subtitle',
icon: createAppIcon,
buttonText: 'general.create',
isComplete: configs?.createApplication,
onClick: () => {
navigate('/applications');
},
},
{
id: 'configurePasswordless',
title: 'get_started.card3_title',
subtitle: 'get_started.card3_subtitle',
icon: passwordlessIcon,
buttonText: 'general.create',
isComplete: configs?.configurePasswordless,
onClick: () => {
navigate('/connectors');
},
},
{
id: 'configureSocialSignIn',
title: 'get_started.card4_title',
subtitle: 'get_started.card4_subtitle',
icon: oneClickIcon,
buttonText: 'general.set_up',
onClick: () => {
navigate('/connectors/social');
},
},
{
id: 'customizeSignInExperience',
title: 'get_started.card5_title',
subtitle: 'get_started.card5_subtitle',
icon: customizeIcon,
buttonText: 'general.customize',
isComplete: configs?.customizeSignInExperience,
onClick: () => {
navigate('/sign-in-experience');
},
},
{
id: 'checkFurtherReadings',
title: 'get_started.card6_title',
subtitle: 'get_started.card6_subtitle',
icon: furtherReadingsIcon,
buttonText: 'general.check_out',
isComplete: configs?.checkFurtherReadings,
onClick: () => {
void updateConfigs({ checkFurtherReadings: true });
window.open('https://docs.logto.io/', '_blank');
},
},
];
return {
data,
completedCount: data.filter(({ isComplete }) => isComplete).length,
totalCount: data.length,
};
};
export default useGetStartedMetadata;

7
packages/console/src/pages/GetStarted/index.module.scss
View file

@ -32,6 +32,7 @@
.card {
display: flex;
padding: _.unit(6) _.unit(8);
position: relative;
.icon {
width: 48px;
@ -39,6 +40,12 @@
margin-right: _.unit(6);
}
.completeIndicator {
position: absolute;
top: 53px;
left: 70px;
}
.wrapper {
flex: 1;
display: flex;

84
packages/console/src/pages/GetStarted/index.tsx
View file

@ -1,90 +1,17 @@
import { AdminConsoleKey, I18nKey } from '@logto/phrases';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
import cakeIcon from '@/assets/images/cake.svg';
import crabIcon from '@/assets/images/crab.svg';
import drinkIcon from '@/assets/images/drink.svg';
import frogIcon from '@/assets/images/frog.svg';
import grinningFaceIcon from '@/assets/images/grinning-face.svg';
import owlIcon from '@/assets/images/owl.svg';
import completeIndicator from '@/assets/images/circle-tick.svg';
import Button from '@/components/Button';
import Card from '@/components/Card';
import Spacer from '@/components/Spacer';
import useAdminConsoleConfigs from '@/hooks/use-configs';
import useGetStartedMetadata from './hook';
import * as styles from './index.module.scss';
const GetStarted = () => {
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
const { updateConfigs } = useAdminConsoleConfigs();
const navigate = useNavigate();
const data: Array<{
title: AdminConsoleKey;
subtitle: AdminConsoleKey;
icon: string;
buttonText: I18nKey;
onClick: () => void;
}> = [
{
title: 'get_started.card1_title',
subtitle: 'get_started.card1_subtitle',
icon: grinningFaceIcon,
buttonText: 'general.check_out',
onClick: async () => {
void updateConfigs({ checkDemo: true });
window.open('https://fake.demo.com', '_blank');
},
},
{
title: 'get_started.card2_title',
subtitle: 'get_started.card2_subtitle',
icon: cakeIcon,
buttonText: 'general.create',
onClick: () => {
navigate('/applications');
},
},
{
title: 'get_started.card3_title',
subtitle: 'get_started.card3_subtitle',
icon: drinkIcon,
buttonText: 'general.create',
onClick: () => {
navigate('/connectors');
},
},
{
title: 'get_started.card4_title',
subtitle: 'get_started.card4_subtitle',
icon: crabIcon,
buttonText: 'general.set_up',
onClick: () => {
navigate('/connectors/social');
},
},
{
title: 'get_started.card5_title',
subtitle: 'get_started.card5_subtitle',
icon: owlIcon,
buttonText: 'general.customize',
onClick: () => {
navigate('/sign-in-experience');
},
},
{
title: 'get_started.card6_title',
subtitle: 'get_started.card6_subtitle',
icon: frogIcon,
buttonText: 'general.check_out',
onClick: () => {
void updateConfigs({ checkFurtherReadings: true });
window.open('https://further.readings.com', '_blank');
},
},
];
const { data } = useGetStartedMetadata();
return (
<div className={styles.container}>
@ -99,9 +26,10 @@ const GetStarted = () => {
</span>
</div>
</div>
{data.map(({ title, subtitle, icon, buttonText, onClick }) => (
<Card key={title} className={styles.card}>
{data.map(({ id, title, subtitle, icon, isComplete, buttonText, onClick }) => (
<Card key={id} className={styles.card}>
<img className={styles.icon} src={icon} />
{isComplete && <img className={styles.completeIndicator} src={completeIndicator} />}
<div className={styles.wrapper}>
<div className={styles.title}>{t(title)}</div>
<div className={styles.subtitle}>{t(subtitle)}</div>

2
packages/phrases/src/locales/en.ts
View file

@ -273,6 +273,8 @@ const translation = {
connector_deleted: 'The connector has been deleted.',
},
get_started: {
progress: 'Get started guide: {{completed}}/{{total}}',
progress_dropdown_title: 'A few things you can do...',
title: 'How do you want to get started with Logto?',
subtitle_part1: 'Here are the following things you can do',
subtitle_part2: 'I’m done with this set up. ',

2
packages/phrases/src/locales/zh-cn.ts
View file

@ -270,6 +270,8 @@ const translation = {
connector_deleted: '成功删除连接器。',
},
get_started: {
progress: '开始使用: {{completed}}/{{total}}',
progress_dropdown_title: '快速上手',
title: '还不知道如何使用 Logto?',
subtitle_part1: '下列是一些适合您快速上手的事情',
subtitle_part2: '这配置页面我要看吐了，',