Updates welcome graph illustration to svg

src/webviews/apps/welcome/welcome.html

@@ -327,11 +327,72 @@
 					helps you easily visualize and keep track of all work in progress<br />
 				</p>
 
-				<img
-					class="welcome__illustration welcome__illustration--graph"
-					src="#{webroot}/media/plus-commit-graph-illustrated.webp"
-					alt="Illustration of the Commit Graph"
-				/>
+				<!-- Don't reformat or let prettier reformat the SVG otherwise whitespace will get added incorrect and screw up the positioning -->
+				<!-- prettier-ignore -->
+				<svg class="graph welcome__illustration" width="850" height="290" viewBox="0 0 850 290" fill="none" xmlns="http://www.w3.org/2000/svg">
+					<mask id="mask0_2_254" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="850" height="290">
+					<rect width="850" height="290" rx="14" fill="#101317" class="graph__container"/>
+					</mask>
+					<g mask="url(#mask0_2_254)">
+					<rect width="850" height="290" rx="14" fill="#101317" class="graph__container"/>
+					<rect opacity="0.2" x="216" y="20" width="278" height="18" fill="#43B3AB" class="graph__lane-1-background"/>
+					<rect opacity="0.2" x="238" y="47" width="256" height="18" fill="#8146FF" class="graph__lane-2-background"/>
+					<rect x="82" y="47" width="114" height="18" rx="4" fill="#8146FF" class="graph__lane-2-background"/>
+					<path fill-rule="evenodd" clip-rule="evenodd" d="M95.6475 51.2055C96.0887 51.5417 96.1739 52.1718 95.8377 52.613L90.4814 59.6432C90.2914 59.8925 89.996 60.0389 89.6825 60.0389C89.3691 60.0389 89.0736 59.8925 88.8837 59.6432L86.2055 56.1281C85.8694 55.6869 85.9545 55.0567 86.3957 54.7206C86.8369 54.3844 87.4671 54.4696 87.8032 54.9108L89.6825 57.3774L94.24 51.3957C94.5761 50.9545 95.2063 50.8694 95.6475 51.2055Z" fill="white"/>
+					<rect opacity="0.2" x="238" y="128" width="256" height="18" fill="#8146FF" class="graph__lane-2-background"/>
+					<rect opacity="0.2" x="260" y="74" width="234" height="18" fill="#AD5F97" class="graph__lane-3-background"/>
+					<rect opacity="0.5" x="82" y="74" width="114" height="18" rx="4" fill="#AD5F97" class="graph__lane-3-background"/>
+					<rect opacity="0.2" x="282" y="101" width="212" height="18" fill="#8A743A" class="graph__lane-4-background"/>
+					<rect opacity="0.2" x="282" y="182" width="212" height="18" fill="#8A743A" class="graph__lane-4-background"/>
+					<rect opacity="0.2" x="260" y="155" width="234" height="18" fill="#AD5F97" class="graph__lane-3-background"/>
+					<rect opacity="0.2" x="260" y="209" width="234" height="18" fill="#AD5F97" class="graph__lane-3-background"/>
+					<rect opacity="0.2" x="304" y="236" width="190" height="18" fill="#81AD5F" class="graph__lane-5-background"/>
+					<rect opacity="0.2" x="238" y="263" width="256" height="18" fill="#8146FF" class="graph__lane-2-background"/>
+					<rect opacity="0.5" x="82" y="238" width="114" height="18" rx="4" fill="#81AD5F" class="graph__lane-5-background"/>
+					<rect opacity="0.5" x="82" y="100" width="114" height="18" rx="4" fill="#8A743A" class="graph__lane-4-background"/>
+					<path d="M187.231 52.7236C186.228 52.7236 185.423 53.4911 185.423 54.4472C185.423 55.0801 185.79 55.6322 186.327 55.9284V56.1708C186.327 57.0326 185.423 57.8944 184.519 57.8944C183.771 57.8944 183.178 58.0425 182.712 58.2849V54.2048C183.248 53.9086 183.616 53.3565 183.616 52.7236C183.616 51.7675 182.811 51 181.808 51C180.805 51 180 51.7675 180 52.7236C180 53.3565 180.367 53.9086 180.904 54.2048V59.8469C180.367 60.1432 180 60.6952 180 61.3281C180 62.2842 180.805 63.0517 181.808 63.0517C182.811 63.0517 183.616 62.2842 183.616 61.3281C183.616 60.8703 183.432 60.4663 183.135 60.1566C183.404 59.8469 183.827 59.6045 184.519 59.6045C186.327 59.6045 188.135 57.8809 188.135 56.1573V55.9149C188.672 55.6187 189.039 55.0666 189.039 54.4337C189.039 53.4777 188.234 52.7101 187.231 52.7101V52.7236ZM181.808 51.8618C182.302 51.8618 182.712 52.2523 182.712 52.7236C182.712 53.1949 182.302 53.5854 181.808 53.5854C181.313 53.5854 180.904 53.1949 180.904 52.7236C180.904 52.2523 181.313 51.8618 181.808 51.8618ZM181.808 62.2034C181.313 62.2034 180.904 61.8129 180.904 61.3416C180.904 60.8703 181.313 60.4798 181.808 60.4798C182.302 60.4798 182.712 60.8703 182.712 61.3416C182.712 61.8129 182.302 62.2034 181.808 62.2034ZM187.231 55.309C186.737 55.309 186.327 54.9185 186.327 54.4472C186.327 53.9759 186.737 53.5854 187.231 53.5854C187.725 53.5854 188.135 53.9759 188.135 54.4472C188.135 54.9185 187.725 55.309 187.231 55.309Z" fill="white"/>
+					<path d="M187.231 78.7236C186.228 78.7236 185.423 79.4911 185.423 80.4472C185.423 81.0801 185.79 81.6322 186.327 81.9284V82.1708C186.327 83.0326 185.423 83.8944 184.519 83.8944C183.771 83.8944 183.178 84.0425 182.712 84.2849V80.2048C183.248 79.9086 183.616 79.3565 183.616 78.7236C183.616 77.7675 182.811 77 181.808 77C180.805 77 180 77.7675 180 78.7236C180 79.3565 180.367 79.9086 180.904 80.2048V85.8469C180.367 86.1432 180 86.6952 180 87.3281C180 88.2842 180.805 89.0517 181.808 89.0517C182.811 89.0517 183.616 88.2842 183.616 87.3281C183.616 86.8703 183.432 86.4663 183.135 86.1566C183.404 85.8469 183.827 85.6045 184.519 85.6045C186.327 85.6045 188.135 83.8809 188.135 82.1573V81.9149C188.672 81.6187 189.039 81.0666 189.039 80.4337C189.039 79.4777 188.234 78.7101 187.231 78.7101V78.7236ZM181.808 77.8618C182.302 77.8618 182.712 78.2523 182.712 78.7236C182.712 79.1949 182.302 79.5854 181.808 79.5854C181.313 79.5854 180.904 79.1949 180.904 78.7236C180.904 78.2523 181.313 77.8618 181.808 77.8618ZM181.808 88.2034C181.313 88.2034 180.904 87.8129 180.904 87.3416C180.904 86.8703 181.313 86.4798 181.808 86.4798C182.302 86.4798 182.712 86.8703 182.712 87.3416C182.712 87.8129 182.302 88.2034 181.808 88.2034ZM187.231 81.309C186.737 81.309 186.327 80.9185 186.327 80.4472C186.327 79.9759 186.737 79.5854 187.231 79.5854C187.725 79.5854 188.135 79.9759 188.135 80.4472C188.135 80.9185 187.725 81.309 187.231 81.309Z" fill="white"/>
+					<path d="M187.231 242.724C186.228 242.724 185.423 243.491 185.423 244.447C185.423 245.08 185.79 245.632 186.327 245.928V246.171C186.327 247.033 185.423 247.894 184.519 247.894C183.771 247.894 183.178 248.043 182.712 248.285V244.205C183.248 243.909 183.616 243.356 183.616 242.724C183.616 241.768 182.811 241 181.808 241C180.805 241 180 241.768 180 242.724C180 243.356 180.367 243.909 180.904 244.205V249.847C180.367 250.143 180 250.695 180 251.328C180 252.284 180.805 253.052 181.808 253.052C182.811 253.052 183.616 252.284 183.616 251.328C183.616 250.87 183.432 250.466 183.135 250.157C183.404 249.847 183.827 249.605 184.519 249.605C186.327 249.605 188.135 247.881 188.135 246.157V245.915C188.672 245.619 189.039 245.067 189.039 244.434C189.039 243.478 188.234 242.71 187.231 242.71V242.724ZM181.808 241.862C182.302 241.862 182.712 242.252 182.712 242.724C182.712 243.195 182.302 243.585 181.808 243.585C181.313 243.585 180.904 243.195 180.904 242.724C180.904 242.252 181.313 241.862 181.808 241.862ZM181.808 252.203C181.313 252.203 180.904 251.813 180.904 251.342C180.904 250.87 181.313 250.48 181.808 250.48C182.302 250.48 182.712 250.87 182.712 251.342C182.712 251.813 182.302 252.203 181.808 252.203ZM187.231 245.309C186.737 245.309 186.327 244.918 186.327 244.447C186.327 243.976 186.737 243.585 187.231 243.585C187.725 243.585 188.135 243.976 188.135 244.447C188.135 244.918 187.725 245.309 187.231 245.309Z" fill="white"/>
+					<path d="M187.231 104.724C186.228 104.724 185.423 105.491 185.423 106.447C185.423 107.08 185.79 107.632 186.327 107.928V108.171C186.327 109.033 185.423 109.894 184.519 109.894C183.771 109.894 183.178 110.043 182.712 110.285V106.205C183.248 105.909 183.616 105.356 183.616 104.724C183.616 103.768 182.811 103 181.808 103C180.805 103 180 103.768 180 104.724C180 105.356 180.367 105.909 180.904 106.205V111.847C180.367 112.143 180 112.695 180 113.328C180 114.284 180.805 115.052 181.808 115.052C182.811 115.052 183.616 114.284 183.616 113.328C183.616 112.87 183.432 112.466 183.135 112.157C183.404 111.847 183.827 111.605 184.519 111.605C186.327 111.605 188.135 109.881 188.135 108.157V107.915C188.672 107.619 189.039 107.067 189.039 106.434C189.039 105.478 188.234 104.71 187.231 104.71V104.724ZM181.808 103.862C182.302 103.862 182.712 104.252 182.712 104.724C182.712 105.195 182.302 105.585 181.808 105.585C181.313 105.585 180.904 105.195 180.904 104.724C180.904 104.252 181.313 103.862 181.808 103.862ZM181.808 114.203C181.313 114.203 180.904 113.813 180.904 113.342C180.904 112.87 181.313 112.48 181.808 112.48C182.302 112.48 182.712 112.87 182.712 113.342C182.712 113.813 182.302 114.203 181.808 114.203ZM187.231 107.309C186.737 107.309 186.327 106.918 186.327 106.447C186.327 105.976 186.737 105.585 187.231 105.585C187.725 105.585 188.135 105.976 188.135 106.447C188.135 106.918 187.725 107.309 187.231 107.309Z" fill="white"/>
+					<text class="graph__foreground" opacity="0.7" fill="white" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="11" font-weight="300" letter-spacing="0em"><tspan x="516" y="59.5">Optimizes CSS output&#10;</tspan><tspan x="516" y="86.5">Add overflow corrector&#10;</tspan><tspan x="516" y="113.5">Fixes stash node icon alignment&#10;</tspan><tspan x="516" y="140.5">Removes dead code&#10;</tspan><tspan x="516" y="167.5">Fix bugs in telemetry system&#10;</tspan><tspan x="516" y="194.5">Ensures proper date ordering for Graph&#10;</tspan><tspan x="516" y="221.5">Use gitconfig to suggest profile author and email&#10;</tspan><tspan x="516" y="248.5">Log error instead of throwing&#10;</tspan><tspan x="516" y="275.5">Runs yarn install after unlink&#10;</tspan><tspan x="516" y="302.5">Add file-diff icons, bump component version&#10;</tspan><tspan x="516" y="329.5">Centralize command registrations&#10;</tspan><tspan x="516" y="356.5">Add type safety to date ordering</tspan></text>
+					<text fill="white" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="11" font-weight="300" letter-spacing="0em"><tspan x="87" y="59.5">    </tspan><tspan x="87" y="86.5">feature/onboard</tspan></text>
+					<text fill="white" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="11" font-weight="bold" letter-spacing="0em"><tspan x="99.375" y="59.5">main&#10;</tspan></text>
+					<text class="graph__foreground" opacity="0.4" fill="white" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="11" font-style="italic" letter-spacing="0em"><tspan x="541" y="33.5">Work In Progress</tspan></text>
+					<path opacity="0.4" d="M518 34.1919H517.5C517.5 34.468 517.724 34.6919 518 34.6919V34.1919ZM528.192 34.6919C528.468 34.6919 528.692 34.468 528.692 34.1919C528.692 33.9157 528.468 33.6919 528.192 33.6919V34.6919ZM518 31.5762L517.642 31.2273C517.551 31.3207 517.5 31.4459 517.5 31.5762H518ZM524.923 24.469L524.565 24.1201L524.565 24.1201L524.923 24.469ZM526.365 24.469L526.006 24.8178L526.006 24.8178L526.365 24.469ZM527.471 25.605L527.829 25.2561L527.829 25.2561L527.471 25.605ZM527.471 27.0846L527.113 26.7358L527.113 26.7358L527.471 27.0846ZM520.548 34.1919L520.548 34.6919C520.683 34.6919 520.812 34.6374 520.906 34.5407L520.548 34.1919ZM527.897 26.1428L528.374 25.9919L528.374 25.9919L527.897 26.1428ZM527.897 26.5469L527.42 26.396L527.42 26.396L527.897 26.5469ZM525.447 24.032L525.289 23.5577L525.289 23.5577L525.447 24.032ZM525.841 24.032L525.999 23.5577L525.999 23.5577L525.841 24.032ZM523.454 25.9959C523.261 25.7981 522.945 25.794 522.747 25.9867C522.549 26.1794 522.545 26.4959 522.738 26.6937L523.454 25.9959ZM525.286 29.3094C525.478 29.5072 525.795 29.5114 525.993 29.3187C526.191 29.126 526.195 28.8094 526.002 28.6116L525.286 29.3094ZM518 34.6919H528.192V33.6919H518V34.6919ZM518.5 34.1919V31.5762H517.5V34.1919H518.5ZM518.358 31.9251L525.281 24.8178L524.565 24.1201L517.642 31.2273L518.358 31.9251ZM526.006 24.8178L527.113 25.9539L527.829 25.2561L526.723 24.1201L526.006 24.8178ZM527.113 26.7358L520.19 33.843L520.906 34.5407L527.829 27.4335L527.113 26.7358ZM520.548 33.6919L518 33.6919L518 34.6919L520.548 34.6919L520.548 33.6919ZM527.113 25.9539C527.245 26.0892 527.323 26.1696 527.376 26.2336C527.425 26.293 527.424 26.3054 527.42 26.2937L528.374 25.9919C528.323 25.8308 528.235 25.7039 528.146 25.5964C528.061 25.4936 527.95 25.3797 527.829 25.2561L527.113 25.9539ZM527.829 27.4335C527.95 27.3099 528.061 27.196 528.146 27.0933C528.235 26.9858 528.323 26.8588 528.374 26.6977L527.42 26.396C527.424 26.3843 527.425 26.3967 527.376 26.456C527.323 26.5201 527.245 26.6004 527.113 26.7358L527.829 27.4335ZM527.42 26.2937C527.431 26.3268 527.431 26.3628 527.42 26.396L528.374 26.6977C528.446 26.4682 528.446 26.2214 528.374 25.9919L527.42 26.2937ZM525.281 24.8179C525.413 24.6824 525.491 24.6027 525.554 24.5485C525.612 24.4979 525.622 24.5008 525.605 24.5063L525.289 23.5577C525.127 23.6117 525.001 23.7036 524.897 23.7946C524.796 23.882 524.685 23.9965 524.565 24.1201L525.281 24.8179ZM526.723 24.1201C526.602 23.9966 526.491 23.882 526.391 23.7947C526.287 23.7037 526.161 23.6117 525.999 23.5577L525.683 24.5063C525.666 24.5008 525.676 24.4979 525.734 24.5485C525.796 24.6027 525.874 24.6824 526.006 24.8178L526.723 24.1201ZM525.605 24.5063C525.631 24.4979 525.657 24.4979 525.683 24.5063L525.999 23.5577C525.768 23.4808 525.519 23.4808 525.289 23.5577L525.605 24.5063ZM522.738 26.6937L525.286 29.3094L526.002 28.6116L523.454 25.9959L522.738 26.6937Z" fill="white" class="graph__foreground" />
+					<rect x="238" y="47" width="2" height="332" fill="#8146FF" class="graph__lane-2-background"/>
+					<rect x="492" y="20" width="2" height="18" fill="#43B3AB" class="graph__lane-1-background"/>
+					<rect x="492" y="47" width="2" height="18" fill="#8146FF" class="graph__lane-2-background"/>
+					<rect x="492" y="74" width="2" height="18" fill="#AD5F97" class="graph__lane-3-background"/>
+					<rect x="492" y="101" width="2" height="18" fill="#8A743A" class="graph__lane-4-background"/>
+					<rect x="492" y="128" width="2" height="18" fill="#8146FF" class="graph__lane-2-background"/>
+					<rect x="492" y="155" width="2" height="18" fill="#AD5F97" class="graph__lane-3-background"/>
+					<rect x="492" y="182" width="2" height="18" fill="#8A743A" class="graph__lane-4-background"/>
+					<rect x="492" y="209" width="2" height="18" fill="#AD5F97" class="graph__lane-3-background"/>
+					<rect x="492" y="236" width="2" height="18" fill="#81AD5F" class="graph__lane-5-background"/>
+					<rect x="492" y="263" width="2" height="18" fill="#8146FF" class="graph__lane-2-background"/>
+					<rect x="282" y="106" width="2" height="209" fill="#8A743A" class="graph__lane-4-background"/>
+					<circle cx="217" cy="29" r="8" fill="#0F1112" stroke="#43B3AB" stroke-width="2" stroke-dasharray="4 4" class="graph__lane-1-foreground graph__container"/>
+					<circle cx="239" cy="56" r="8" fill="#0F1112" stroke="#8146FF" stroke-width="2" class="graph__lane-2-foreground graph__container"/>
+					<circle cx="283" cy="110" r="8" fill="#0F1112" stroke="#8A743A" stroke-width="2" class="graph__lane-4-foreground graph__container"/>
+					<circle cx="283" cy="191" r="8" fill="#0F1112" stroke="#8A743A" stroke-width="2" class="graph__lane-4-foreground graph__container"/>
+					<circle cx="239" cy="137" r="8" fill="#0F1112" stroke="#8146FF" stroke-width="2" class="graph__lane-2-foreground graph__container"/>
+					<line x1="217" y1="38" x2="217" y2="319" stroke="#43B3AB" stroke-width="2" stroke-dasharray="4 4" class="graph__lane-1-foreground"/>
+					<line opacity="0.3" x1="196" y1="56" x2="230" y2="56" stroke="#8146FF" stroke-width="2" class="graph__lane-2-foreground"/>
+					<line opacity="0.3" x1="196" y1="246" x2="297" y2="246" stroke="#81AD5F" stroke-width="2" class="graph__lane-5-foreground"/>
+					<line opacity="0.3" x1="196" y1="109" x2="275" y2="109" stroke="#8A743A" stroke-width="2" class="graph__lane-4-foreground"/>
+					<line opacity="0.3" x1="196" y1="83" x2="253" y2="83" stroke="#AD5F97" stroke-width="2" class="graph__lane-3-foreground"/>
+					<path d="M239 270.74H297C301.418 270.74 305 267.158 305 262.74V247" stroke="#81AD5F" stroke-width="2" stroke-linecap="round" class="graph__lane-5-foreground"/>
+					<circle cx="305" cy="245" r="8" fill="#0F1112" stroke="#81AD5F" stroke-width="2" class="graph__lane-5-foreground graph__container"/>
+					<circle cx="239" cy="271" r="8" fill="#0F1112" stroke="#8146FF" stroke-width="2" class="graph__lane-2-foreground graph__container"/>
+					<rect x="260" y="74" width="2" height="305" fill="#AD5F97" class="graph__lane-3-background"/>
+					<circle cx="261" cy="83" r="8" fill="#0F1112" stroke="#AD5F97" stroke-width="2" class="graph__lane-3-foreground graph__container"/>
+					<circle cx="261" cy="164" r="8" fill="#0F1112" stroke="#AD5F97" stroke-width="2" class="graph__lane-3-foreground graph__container"/>
+					<circle cx="261" cy="218" r="8" fill="#0F1112" stroke="#AD5F97" stroke-width="2" class="graph__lane-3-foreground graph__container"/>
+					<text fill="white" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="11" font-weight="300" letter-spacing="0em"><tspan x="87" y="112.5">feature/graph</tspan></text>
+					<text fill="white" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="11" font-weight="300" letter-spacing="0em"><tspan x="87" y="250.5">bug/error-log</tspan></text>
+					</g>
+				</svg>
+
 				<p>✨ Requires a trial or subscription to use this on privately hosted repos</p>
 
 				<h3>Focus ✨</h3>

src/webviews/apps/welcome/welcome.scss

@@ -542,6 +542,59 @@ gk-card p {
 	}
 }
 
+.graph {
+	border: 0.1rem solid var(--vscode-editorWidget-border);
+
+	text {
+		font-family: var(--vscode-font-family);
+		font-weight: var(--vscode-font-weight);
+		font-size: 1.1rem;
+	}
+
+	&__container {
+		fill: var(--vscode-editor-background);
+	}
+
+	&__foreground {
+		fill: var(--vscode-editor-foreground);
+	}
+
+	&__lane-1-foreground {
+		stroke: var(--vscode-gitlens-graphLane1Color);
+	}
+	&__lane-1-background {
+		fill: var(--vscode-gitlens-graphLane1Color);
+	}
+
+	&__lane-2-foreground {
+		stroke: var(--vscode-gitlens-graphLane2Color);
+	}
+	&__lane-2-background {
+		fill: var(--vscode-gitlens-graphLane2Color);
+	}
+
+	&__lane-3-foreground {
+		stroke: var(--vscode-gitlens-graphLane3Color);
+	}
+	&__lane-3-background {
+		fill: var(--vscode-gitlens-graphLane3Color);
+	}
+
+	&__lane-4-foreground {
+		stroke: var(--vscode-gitlens-graphLane4Color);
+	}
+	&__lane-4-background {
+		fill: var(--vscode-gitlens-graphLane4Color);
+	}
+
+	&__lane-5-foreground {
+		stroke: var(--vscode-gitlens-graphLane5Color);
+	}
+	&__lane-5-background {
+		fill: var(--vscode-gitlens-graphLane5Color);
+	}
+}
+
 [data-action] {
 	cursor: pointer;
 }