Archives/gristlabs_grist-core
1
0
Fork 0
mirror of https://github.com/gristlabs/grist-core.git synced 2026-03-02 04:09:24 +00:00
Code Issues Projects Releases Wiki Activity

(core) Update onboarding flow

Browse Source 
Summary:
A new onboarding page is now shown to all new users visiting the doc
menu for the first time. Tutorial cards on the doc menu have been
replaced with a new version that tracks completion progress, alongside
a new card that opens the orientation video.

Test Plan: Browser tests.

Reviewers: jarek

Reviewed By: jarek

Differential Revision: https://phab.getgrist.com/D4296
This commit is contained in:
George Gevoian
2024-07-22 11:10:57 -04:00
parent 3fd8719d8a
commit 4740f1f933
40 changed files with 1462 additions and 706 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
static/ui-icons/Login/LoginStreamline.svg
View File

@@ -1,7 +1,12 @@
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.1">
<path fill-rule="evenodd" clip-rule="evenodd" d="M39.5402 0H18.0047C8.06752 0 0 8.9774 0 20.0353V40H21.7051C31.5487 40 39.5402 31.1068 39.5402 20.1531V0Z" fill="#F9AE41"/>
<g clip-path="url(#clip0_1349_6885)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M39.5402 0H18.0047C8.06752 0 0 8.9774 0 20.0353V40H21.7051C31.5487 40 39.5402 31.1068 39.5402 20.1531V0Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.4917 27.9306L29.453 18.8307C29.652 18.5268 29.5776 18.1119 29.2866 17.904C29.1805 17.8281 29.0548 17.7875 28.9262 17.7875H24.279V11.9948C24.279 11.6266 23.9932 11.3281 23.6407 11.3281C23.43 11.3281 23.2329 11.4367 23.1139 11.6183L17.1526 20.7183C16.9535 21.0221 17.028 21.437 17.3189 21.6449C17.4251 21.7208 17.5507 21.7614 17.6794 21.7614H22.3266V27.5542C22.3266 27.9223 22.6123 28.2208 22.9649 28.2208C23.1756 28.2208 23.3727 28.1122 23.4917 27.9306Z" fill="#F9AE41"/>
<path opacity="0.44" fill-rule="evenodd" clip-rule="evenodd" d="M17.1458 24.7419C17.8508 24.7419 18.4224 25.3388 18.4224 26.0752V26.3889C18.4224 27.1253 17.8508 27.7223 17.1458 27.7223H11.8892C11.1841 27.7223 10.6126 27.1253 10.6126 26.3889V26.0752C10.6126 25.3388 11.1841 24.7419 11.8892 24.7419H17.1458ZM14.2171 18.7811C14.9221 18.7811 15.4937 19.3781 15.4937 20.1144V20.4282C15.4937 21.1645 14.9221 21.7615 14.2171 21.7615H9.93675C9.23171 21.7615 8.66016 21.1645 8.66016 20.4282V20.1144C8.66016 19.3781 9.23171 18.7811 9.93675 18.7811H14.2171ZM17.1458 12.8203C17.8508 12.8203 18.4224 13.4173 18.4224 14.1536V14.4674C18.4224 15.2038 17.8508 15.8007 17.1458 15.8007H11.8892C11.1841 15.8007 10.6126 15.2038 10.6126 14.4674V14.1536C10.6126 13.4173 11.1841 12.8203 11.8892 12.8203H17.1458Z" fill="#F9AE41"/>
</g>
<path fill-rule="evenodd" clip-rule="evenodd" d="M22.4917 27.9306L28.453 18.8307C28.652 18.5268 28.5776 18.1119 28.2866 17.904C28.1805 17.8281 28.0548 17.7875 27.9262 17.7875H23.279V11.9948C23.279 11.6266 22.9932 11.3281 22.6407 11.3281C22.43 11.3281 22.2329 11.4367 22.1139 11.6183L16.1526 20.7183C15.9535 21.0221 16.028 21.437 16.3189 21.6449C16.4251 21.7208 16.5507 21.7614 16.6794 21.7614H21.3266V27.5542C21.3266 27.9223 21.6123 28.2208 21.9649 28.2208C22.1756 28.2208 22.3727 28.1122 22.4917 27.9306Z" fill="#F9AE41"/>
<path opacity="0.44" fill-rule="evenodd" clip-rule="evenodd" d="M16.1453 24.7419C16.8503 24.7419 17.4219 25.3388 17.4219 26.0752V26.3889C17.4219 27.1253 16.8503 27.7223 16.1453 27.7223H10.8887C10.1837 27.7223 9.61211 27.1253 9.61211 26.3889V26.0752C9.61211 25.3388 10.1837 24.7419 10.8887 24.7419H16.1453ZM13.2166 18.7811C13.9217 18.7811 14.4932 19.3781 14.4932 20.1144V20.4282C14.4932 21.1645 13.9217 21.7615 13.2166 21.7615H8.93626C8.23122 21.7615 7.65967 21.1645 7.65967 20.4282V20.1144C7.65967 19.3781 8.23122 18.7811 8.93626 18.7811H13.2166ZM16.1453 12.8203C16.8503 12.8203 17.4219 13.4173 17.4219 14.1536V14.4674C17.4219 15.2038 16.8503 15.8007 16.1453 15.8007H10.8887C10.1837 15.8007 9.61211 15.2038 9.61211 14.4674V14.1536C9.61211 13.4173 10.1837 12.8203 10.8887 12.8203H16.1453Z" fill="#F9AE41"/>
<defs>
<clipPath id="clip0_1349_6885">
<rect width="40" height="40" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

13
static/ui-icons/Login/LoginUnify.svg
View File

@@ -1,5 +1,12 @@
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.1" fill-rule="evenodd" clip-rule="evenodd" d="M39.5402 0H18.0047C8.06752 0 0 8.9774 0 20.0353V40H21.7051C31.5487 40 39.5402 31.1068 39.5402 20.1531V0Z" fill="#7141F9"/>
<path opacity="0.44" d="M13.8297 16.7786V23.223C13.8297 25.0026 15.211 26.4452 16.9148 26.4452H23.0851V27.324C23.0851 28.8431 22.2958 29.6675 20.8413 29.6675H12.9883C11.5339 29.6675 10.7446 28.8431 10.7446 27.324V19.122C10.7446 17.6029 11.5339 16.7786 12.9883 16.7786H13.8297ZM25.9832 11.4082C27.4376 11.4082 28.2269 12.2326 28.2269 13.7516V21.9537C28.2269 23.4727 27.4376 24.2971 25.9832 24.2971H25.1418V17.8526C25.1418 16.0731 23.7605 14.6304 22.0567 14.6304H15.8865V13.7516C15.8865 12.2326 16.6758 11.4082 18.1302 11.4082H25.9832Z" fill="#7141F9"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.1956 16.7793H21.7765C22.6249 16.7793 23.0853 17.2602 23.0853 18.1463V22.9308C23.0853 23.8169 22.6249 24.2978 21.7765 24.2978H17.1956C16.3471 24.2978 15.8867 23.8169 15.8867 22.9308V18.1463C15.8867 17.2602 16.3471 16.7793 17.1956 16.7793Z" fill="#7141F9"/>
<g clip-path="url(#clip0_1349_6871)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M39.5402 0H18.0047C8.06752 0 0 8.9774 0 20.0353V40H21.7051C31.5487 40 39.5402 31.1068 39.5402 20.1531V0Z" fill="white"/>
<path opacity="0.44" d="M13.8312 16.7786V23.223C13.8312 25.0026 15.2125 26.4452 16.9163 26.4452H23.0865V27.324C23.0865 28.8431 22.2972 29.6675 20.8428 29.6675H12.9898C11.5354 29.6675 10.7461 28.8431 10.7461 27.324V19.122C10.7461 17.6029 11.5354 16.7786 12.9898 16.7786H13.8312ZM25.9847 11.4082C27.4391 11.4082 28.2284 12.2326 28.2284 13.7516V21.9537C28.2284 23.4727 27.4391 24.2971 25.9847 24.2971H25.1433V17.8526C25.1433 16.0731 23.762 14.6304 22.0582 14.6304H15.8879V13.7516C15.8879 12.2326 16.6772 11.4082 18.1317 11.4082H25.9847Z" fill="#7141F9"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.1975 16.7793H21.7784C22.6268 16.7793 23.0873 17.2602 23.0873 18.1463V22.9308C23.0873 23.8169 22.6268 24.2978 21.7784 24.2978H17.1975C16.3491 24.2978 15.8887 23.8169 15.8887 22.9308V18.1463C15.8887 17.2602 16.3491 16.7793 17.1975 16.7793Z" fill="#7141F9"/>
</g>
<defs>
<clipPath id="clip0_1349_6871">
<rect width="40" height="40" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

17
static/ui-icons/Login/LoginVisualize.svg
View File

@@ -1,7 +1,14 @@
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.1" fill-rule="evenodd" clip-rule="evenodd" d="M39.5402 0H18.0047C8.06752 0 0 8.9774 0 20.0353V40H21.7051C31.5487 40 39.5402 31.1068 39.5402 20.1531V0Z" fill="#16B378"/>
<path opacity="0.44" d="M23.9718 12.2216C23.9718 11.3625 23.305 10.666 22.4824 10.666C21.6599 10.666 20.993 11.3625 20.993 12.2216V26.7401C20.993 27.5992 21.6599 28.2956 22.4824 28.2956C23.305 28.2956 23.9718 27.5992 23.9718 26.7401V12.2216Z" fill="#16B378"/>
<path d="M19.007 17.7304C19.007 16.8713 18.3402 16.1748 17.5177 16.1748C16.6951 16.1748 16.0283 16.8713 16.0283 17.7304V26.7396C16.0283 27.5987 16.6951 28.2952 17.5177 28.2952C18.3402 28.2952 19.007 27.5987 19.007 26.7396V17.7304Z" fill="#16B378"/>
<path d="M28.9362 19.9345C28.9362 19.0754 28.2694 18.3789 27.4469 18.3789C26.6243 18.3789 25.9575 19.0754 25.9575 19.9345V26.74C25.9575 27.5991 26.6243 28.2956 27.4469 28.2956C28.2694 28.2956 28.9362 27.5991 28.9362 26.74V19.9345Z" fill="#16B378"/>
<path d="M14.0427 22.1386C14.0427 21.2795 13.3759 20.583 12.5533 20.583C11.7308 20.583 11.064 21.2795 11.064 22.1386V26.7404C11.064 27.5995 11.7308 28.296 12.5533 28.296C13.3759 28.296 14.0427 27.5995 14.0427 26.7404V22.1386Z" fill="#16B378"/>
<g clip-path="url(#clip0_1349_6898)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M39.5402 0H18.0047C8.06752 0 0 8.9774 0 20.0353V40H21.7051C31.5487 40 39.5402 31.1068 39.5402 20.1531V0Z" fill="white"/>
<path opacity="0.44" d="M23.9729 12.9996C23.9729 12.2264 23.3061 11.5996 22.4835 11.5996C21.661 11.5996 20.9941 12.2264 20.9941 12.9996V26.0663C20.9941 26.8395 21.661 27.4663 22.4835 27.4663C23.3061 27.4663 23.9729 26.8395 23.9729 26.0663V12.9996Z" fill="#16B378"/>
<path d="M19.008 17.9576C19.008 17.1844 18.3412 16.5576 17.5187 16.5576C16.6961 16.5576 16.0293 17.1844 16.0293 17.9576V26.066C16.0293 26.8391 16.6961 27.466 17.5187 27.466C18.3412 27.466 19.008 26.8391 19.008 26.066V17.9576Z" fill="#16B378"/>
<path d="M28.9358 19.941C28.9358 19.1678 28.2689 18.541 27.4464 18.541C26.6238 18.541 25.957 19.1678 25.957 19.941V26.066C25.957 26.8392 26.6238 27.466 27.4464 27.466C28.2689 27.466 28.9358 26.8392 28.9358 26.066V19.941Z" fill="#16B378"/>
<path d="M14.0432 21.9254C14.0432 21.1522 13.3764 20.5254 12.5538 20.5254C11.7313 20.5254 11.0645 21.1522 11.0645 21.9254V26.0671C11.0645 26.8403 11.7313 27.4671 12.5538 27.4671C13.3764 27.4671 14.0432 26.8403 14.0432 26.0671V21.9254Z" fill="#16B378"/>
</g>
<defs>
<clipPath id="clip0_1349_6898">
<rect width="40" height="40" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

3
static/ui-icons/UI/Skip.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.0625 3.82104H15.8125V16.321H17.0625V3.82104ZM14.2643 10.9648C14.5785 10.7766 14.7708 10.4373 14.7708 10.071C14.7708 9.7048 14.5785 9.36546 14.2643 9.17732L5.82677 4.12551C5.50493 3.93281 5.10435 3.92804 4.77802 4.11301C4.45168 4.29798 4.25 4.64412 4.25 5.01923V15.1229C4.25 15.498 4.45168 15.8441 4.77802 16.0291C5.10435 16.214 5.50493 16.2093 5.82677 16.0166L14.2643 10.9648ZM5.29167 5.01923L13.7292 10.071L5.29167 15.1229L5.29167 5.01923Z" fill="#16B378"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 615 B

3
static/ui-icons/UI/Star.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.24081 4.84923C2.60023 4.4299 3.23153 4.38134 3.65086 4.74076L7.15086 7.74076C7.57018 8.10018 7.61875 8.73148 7.25932 9.15081C6.8999 9.57014 6.2686 9.6187 5.84928 9.25927L2.34928 6.25927C1.92995 5.89985 1.88139 5.26855 2.24081 4.84923ZM11.5 7.02081C11.137 7.02081 10.8052 7.2259 10.6429 7.55057L8.87455 11.0872L4.98709 11.6527C4.62616 11.7052 4.32631 11.958 4.2136 12.3049C4.1009 12.6518 4.19487 13.0326 4.45602 13.2872L7.28619 16.0466L6.64959 19.9369C6.59079 20.2962 6.74071 20.6578 7.03651 20.8702C7.33231 21.0825 7.72289 21.1089 8.04453 20.9382L11.5 19.1047L14.9555 20.9382C15.2772 21.1089 15.6678 21.0825 15.9636 20.8702C16.2594 20.6578 16.4093 20.2962 16.3505 19.9369L15.7139 16.0466L18.544 13.2872C18.8052 13.0326 18.8992 12.6518 18.7865 12.3049C18.6738 11.958 18.3739 11.7052 18.013 11.6527L14.1255 11.0872L12.3572 7.55057C12.1949 7.2259 11.863 7.02081 11.5 7.02081ZM10.365 12.3921L11.5 10.122L12.6351 12.3921C12.7753 12.6726 13.0439 12.8667 13.3543 12.9119L15.8162 13.27L14.0185 15.0227C13.7946 15.241 13.6913 15.5549 13.7418 15.8636L14.1469 18.3393L11.9492 17.1732C11.6683 17.0242 11.3318 17.0242 11.0508 17.1732L8.85317 18.3393L9.25829 15.8636C9.3088 15.5549 9.2055 15.241 8.98155 15.0227L7.18391 13.27L9.64579 12.9119C9.95613 12.8667 10.2248 12.6726 10.365 12.3921ZM19.3492 4.74076C19.7686 4.38134 20.3999 4.4299 20.7593 4.84923C21.1187 5.26855 21.0701 5.89985 20.6508 6.25927L17.1508 9.25927C16.7315 9.6187 16.1002 9.57014 15.7408 9.15081C15.3814 8.73148 15.4299 8.10018 15.8492 7.74076L19.3492 4.74076ZM22.2753 19.6316C21.9265 20.0598 21.2966 20.1241 20.8684 19.7753L18.3684 17.7386C17.9403 17.3897 17.876 16.7598 18.2248 16.3317C18.5736 15.9035 19.2035 15.8392 19.6317 16.188L22.1317 18.2247C22.5599 18.5736 22.6242 19.2035 22.2753 19.6316ZM2.13165 19.7753C1.70347 20.1241 1.07358 20.0598 0.724752 19.6316C0.375919 19.2035 0.440238 18.5736 0.868413 18.2247L3.36841 16.188C3.79659 15.8392 4.42648 15.9035 4.77531 16.3317C5.12414 16.7598 5.05982 17.3897 4.63165 17.7386L2.13165 19.7753Z" fill="#16B378"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

6
static/ui-icons/UI/VideoPlay.svg Normal file
View File

@@ -0,0 +1,6 @@
<svg width="39" height="35" viewBox="0 0 39 35" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Group">
<path id="Vector (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M4.0625 3.25C3.40666 3.25 2.875 3.78166 2.875 4.4375V30.5625C2.875 31.2183 3.40666 31.75 4.0625 31.75H34.9375C35.5933 31.75 36.125 31.2183 36.125 30.5625V4.4375C36.125 3.78166 35.5933 3.25 34.9375 3.25H4.0625ZM0.5 4.4375C0.5 2.46999 2.09499 0.875 4.0625 0.875H34.9375C36.905 0.875 38.5 2.46999 38.5 4.4375V30.5625C38.5 32.53 36.905 34.125 34.9375 34.125H4.0625C2.09499 34.125 0.5 32.53 0.5 30.5625V4.4375Z" fill="white"/>
<path id="Vector (Stroke)_2" fill-rule="evenodd" clip-rule="evenodd" d="M12.9911 8.14653C13.371 7.93797 13.8344 7.95296 14.2 8.18565L27.2625 16.4982C27.6051 16.7161 27.8125 17.094 27.8125 17.5C27.8125 17.906 27.6051 18.2839 27.2625 18.5019L14.2 26.8144C13.8344 27.047 13.371 27.062 12.9911 26.8535C12.6111 26.6449 12.375 26.2459 12.375 25.8125V9.1875C12.375 8.75409 12.6111 8.35509 12.9911 8.14653ZM14.75 11.3507V23.6493L24.4131 17.5L14.75 11.3507Z" fill="white"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

3
static/ui-icons/UI/VideoPlay2.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.5 7.24105C6.5 5.69747 8.17443 4.73573 9.50774 5.51349L18.5231 10.7725C19.8461 11.5442 19.8461 13.4558 18.5231 14.2276L9.50774 19.4865C8.17443 20.2643 6.5 19.3026 6.5 17.759V7.24105ZM17.5154 12.5L8.5 7.24105V17.759L17.5154 12.5Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 359 B