Updates welcome video tutorial button

1 yıl önce · 2944c211ec
--- a/src/webviews/apps/media/getting-started.png
+++ b/src/webviews/apps/media/getting-started.png
--- a/src/webviews/apps/welcome/components/video-button.ts
+++ b/src/webviews/apps/welcome/components/video-button.ts
@ -0,0 +1,173 @@
 import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { elementBase } from '../../shared/components/styles/lit/base.css';

@customElement('video-button')
 export class VideoButton extends LitElement {
 	static override styles = [
 		elementBase,
 		css`
 			:host {
 				display: block;
 			}

 			:host-context(.vscode-high-contrast),
 			:host-context(.vscode-dark) {
 				--video-button-background: var(--color-background--lighten-05);
 				--video-button-hover-background: var(--color-background--lighten-075);
 			}

 			:host-context(.vscode-high-contrast-light),
 			:host-context(.vscode-light) {
 				--video-button-background: var(--color-background--darken-05);
 				--video-button-hover-background: var(--color-background--darken-075);
 			}

 			.video-button {
 				display: flex;
 				flex-direction: column;
 				justify-content: center;
 				align-items: flex-end;
 				background-color: var(--video-button-background);
 				padding: 0 2rem 0 0;
 				color: inherit;
 				transition: background-color ease-in-out 150ms;
 				border-radius: 0.4rem;
 				position: relative;
 				overflow: hidden;
 				height: 70px;
 			}
 			.video-button:hover {
 				background-color: var(--video-button-hover-background);
 				text-decoration: none;
 				color: inherit;
 			}

 			.video-button > .play {
 				transform: scale(1.2);
 				transition: transform ease-in-out 150ms;
 			}
 			.video-button:hover > .play {
 				transform: scale(1.4);
 			}

 			.background {
 				position: absolute;
 				top: 0;
 				left: 0;
 				right: 0;
 				bottom: 0;
 				object-fit: cover;
 				transition: transform ease-in-out 150ms;
 				width: 100%;
 				height: auto;
 			}
 			.video-button:hover .background {
 				transform: translateX(-3px) scale(1.05);
 			}

 			.background__base {
 				fill: var(--video-button-background);
 				transition: fill ease-in-out 150ms;
 			}
 			.video-button:hover .background__base {
 				opacity: 0.5;
 			}

 			:host-context(.vscode-high-contrast-light) .background--dark,
 			:host-context(.vscode-light) .background--dark {
 				display: none;
 			}
 			:host-context(.vscode-high-contrast) .background--light,
 			:host-context(.vscode-dark) .background--light {
 				display: none;
 			}
 		`,
 	];

 	override render() {
 		return html`
 			<a
 				class="video-button"
 				href="https://www.youtube.com/watch?v=UQPb73Zz9qk"
 				aria-label="Watch the Tutorial video"
 				title="Watch the Tutorial video"
 			>
 				<!-- Don't reformat or let prettier reformat the SVG otherwise whitespace will get added incorrect and screw up the positioning -->
 				<!-- prettier-ignore -->
 				<svg class="background background--light" width="235" height="110" viewBox="0 0 235 110" fill="none" xmlns="http://www.w3.org/2000/svg">
 					<mask id="mask0_332_69519" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="235" height="110">
 						<path d="M0 5.61224C0 2.51269 1.21493 0 2.71363 0H232.286C233.785 0 235 2.51269 235 5.61224V104.388C235 107.487 233.785 110 232.286 110H2.71362C1.21493 110 0 107.487 0 104.388V5.61224Z" fill="#110013"/>
 					</mask>
 					<g mask="url(#mask0_332_69519)">
 						<path d="M0 6.73469C0 3.01522 1.45792 0 3.25635 0H231.744C233.542 0 235 3.01523 235 6.73469V103.265C235 106.985 233.542 110 231.744 110H3.25635C1.45792 110 0 106.985 0 103.265V6.73469Z" fill="white" class="background__base"/>
 						<g opacity="0.3" filter="url(#filter0_f_332_69519)">
 							<path fill-rule="evenodd" clip-rule="evenodd" d="M18.7112 19.7739C18.8604 20.9461 18.7853 22.071 18.5987 23.0202C18.5392 23.3231 18.5072 23.64 18.5072 23.9693C18.5072 25.723 19.4319 27.2654 20.8448 28.1277C21.5546 28.5609 22.3035 29.1432 22.985 29.869C23.59 29.2757 24.3104 28.8165 25.0845 28.5252C25.8681 28.2302 26.7192 28.1011 27.5701 28.1524C27.6001 27.1475 27.7755 26.2057 28.022 25.4057C28.16 24.958 28.2361 24.4773 28.2361 23.9693C28.2361 21.2828 26.0582 19.1049 23.3716 19.1049C22.8637 19.1049 22.383 19.181 21.9353 19.319C21.0097 19.6042 19.8944 19.7942 18.7112 19.7739ZM23.3392 72.9228C22.5692 73.8363 21.6799 74.5524 20.8448 75.062C19.4319 75.9244 18.5072 77.4668 18.5072 79.2205C18.5072 81.907 20.6851 84.0849 23.3716 84.0849C26.0582 84.0849 28.2361 81.907 28.2361 79.2205C28.2361 77.4492 27.2925 75.8931 25.8559 75.0364C25.0157 74.5353 24.119 73.828 23.3392 72.9228ZM31.4566 44.4275V66.4411C35.6751 69.1141 38.4925 73.8358 38.4925 79.2205C38.4925 87.5715 31.7227 94.3413 23.3716 94.3413C15.0206 94.3413 8.25077 87.5715 8.25077 79.2205C8.25077 73.8911 11.0109 69.2109 15.1571 66.5241V36.6657C11.0109 33.9789 8.25077 29.2986 8.25077 23.9693C8.25077 23.1088 8.32317 22.2615 8.4632 21.4341L-9.56448 3.40645C-20.8419 13.6419 -27.9117 28.4028 -27.9117 44.8199C-27.9117 75.6989 -2.87935 100.731 27.9997 100.731C58.8787 100.731 83.911 75.6989 83.911 44.8199C83.911 13.9409 58.8787 -11.0915 27.9997 -11.0915C19.458 -11.0915 11.3751 -9.17948 4.1447 -5.76306L19.3094 9.40169C20.6074 9.04025 21.971 8.84845 23.3716 8.84845C31.7227 8.84845 38.4925 15.6183 38.4925 23.9693C38.4925 25.3699 38.3007 26.7336 37.9393 28.0316L47.9921 38.0844C49.2391 37.7529 50.5449 37.5775 51.8842 37.5775C60.2353 37.5775 67.0051 44.3473 67.0051 52.6984C67.0051 61.0494 60.2353 67.8192 51.8842 67.8192C43.5332 67.8192 36.7634 61.0494 36.7634 52.6984C36.7634 51.7738 36.847 50.8646 37.0081 49.979L31.4566 44.4275ZM37.0893 49.5576C37.0896 49.5562 37.0896 49.5587 37.0888 49.5652C37.0889 49.561 37.0892 49.5585 37.0893 49.5576ZM47.5581 38.2039C47.5581 38.2037 47.5609 38.2032 47.5666 38.2028C47.561 38.2038 47.5581 38.204 47.5581 38.2039ZM37.8142 28.4667C37.8141 28.4665 37.8143 28.4636 37.8153 28.4582C37.8149 28.4641 37.8143 28.4669 37.8142 28.4667ZM18.8743 9.52677C18.8743 9.52661 18.8772 9.52609 18.8828 9.52562C18.8771 9.5267 18.8742 9.52693 18.8743 9.52677ZM8.53867 21.0149C8.53885 21.0142 8.53882 21.0168 8.5381 21.0227C8.53825 21.018 8.53853 21.0154 8.53867 21.0149ZM15.5273 36.9003C15.5266 36.8999 15.5245 36.8983 15.521 36.8952C15.5263 36.899 15.5283 36.9009 15.5273 36.9003ZM15.5275 66.2893C15.5277 66.2893 15.5256 66.2912 15.521 66.2946C15.5251 66.291 15.5273 66.2893 15.5275 66.2893ZM31.0819 66.2088C31.0821 66.2088 31.0844 66.2105 31.0885 66.2141C31.0837 66.2106 31.0816 66.2087 31.0819 66.2088ZM47.2774 48.4486C48.4585 48.4828 49.574 48.3057 50.5018 48.0317C50.9339 47.9041 51.3964 47.8339 51.8842 47.8339C54.5708 47.8339 56.7487 50.0118 56.7487 52.6984C56.7487 55.3849 54.5708 57.5628 51.8842 57.5628C49.1977 57.5628 47.0198 55.3849 47.0198 52.6984C47.0198 52.3477 47.0561 52.011 47.1233 51.69C47.3216 50.7441 47.4105 49.6212 47.2774 48.4486ZM-47 45C-47 3.57864 -13.4214 -30 28 -30C69.4214 -30 103 3.57864 103 45C103 86.4214 69.4214 120 28 120C-13.4214 120 -47 86.4214 -47 45Z" fill="#9C00FF"/>
 						</g>
 						<path fill-rule="evenodd" clip-rule="evenodd" d="M24 117.171C63.8592 117.171 96.1714 84.8592 96.1714 45C96.1714 5.14084 63.8592 -27.1714 24 -27.1714C-15.8592 -27.1714 -48.1714 5.14084 -48.1714 45C-48.1714 84.8592 -15.8592 117.171 24 117.171ZM24 119C64.8691 119 98 85.8691 98 45C98 4.13093 64.8691 -29 24 -29C-16.8691 -29 -50 4.13093 -50 45C-50 85.8691 -16.8691 119 24 119ZM23.9996 109.455C59.7026 109.455 88.6456 80.5122 88.6456 44.8092C88.6456 9.10626 59.7026 -19.8367 23.9996 -19.8367C12.9548 -19.8367 2.55693 -17.0669 -6.53731 -12.184C-8.46031 -11.1515 -8.75328 -8.56997 -7.20991 -7.0266L11.6367 11.82C12.7504 12.9337 14.4725 13.0751 15.9777 12.6113C16.9641 12.3073 18.012 12.1437 19.0982 12.1437C24.9431 12.1437 29.6813 16.8819 29.6813 22.7268C29.6813 23.8129 29.5176 24.8609 29.2137 25.8473C28.7499 27.3525 28.8912 29.0746 30.0049 30.1883L42.007 42.1904C43.1066 43.29 44.8018 43.4424 46.2931 43.002C47.2449 42.721 48.2525 42.5701 49.2954 42.5701C55.1403 42.5701 59.8785 47.3083 59.8785 53.1532C59.8785 58.9981 55.1403 63.7363 49.2954 63.7363C43.4505 63.7363 38.7123 58.9981 38.7123 53.1532C38.7123 52.4052 38.7899 51.6752 38.9375 50.9711C39.2291 49.58 39.0107 48.0627 38.0057 47.0577L23.7755 32.8275C23.527 32.579 23.1541 32.5112 22.8252 32.6349V32.6349C22.4757 32.7664 22.2296 33.0935 22.2296 33.4669V68.627C22.2296 70.1153 23.2327 71.384 24.511 72.1463C27.6073 73.9928 29.6813 77.3753 29.6813 81.2423C29.6813 87.0872 24.9431 91.8254 19.0982 91.8254C13.2533 91.8254 8.51513 87.0872 8.51513 81.2423C8.51513 77.4141 10.5478 74.0606 13.5927 72.2022C14.8484 71.4358 15.8295 70.1774 15.8295 68.7062V35.2628C15.8295 33.7917 14.8484 32.5333 13.5927 31.7669C10.5478 29.9085 8.51513 26.555 8.51513 22.7268C8.51513 22.0245 8.58354 21.3381 8.71407 20.674C8.98424 19.2995 8.75703 17.809 7.76649 16.8185L-13.3452 -4.29319C-14.5522 -5.50015 -16.4744 -5.63034 -17.7765 -4.52668C-31.7665 7.33144 -40.6463 25.0333 -40.6463 44.8092C-40.6463 80.5122 -11.7033 109.455 23.9996 109.455ZM23.9996 111.284C60.7125 111.284 90.4742 81.5221 90.4742 44.8092C90.4742 8.09635 60.7125 -21.6653 23.9996 -21.6653C-12.7133 -21.6653 -42.4749 8.09635 -42.4749 44.8092C-42.4749 81.5221 -12.7133 111.284 23.9996 111.284Z" fill="url(#paint0_linear_332_69519)"/>
 						<path fill-rule="evenodd" clip-rule="evenodd" d="M96.8503 45C96.8503 85.2341 64.2341 117.85 24 117.85C-16.2341 117.85 -48.8503 85.2341 -48.8503 45C-48.8503 4.7659 -16.2341 -27.8503 24 -27.8503C64.2341 -27.8503 96.8503 4.7659 96.8503 45ZM24 118.321C64.4941 118.321 97.3211 85.4941 97.3211 45C97.3211 4.50588 64.4941 -28.3211 24 -28.3211C-16.4941 -28.3211 -49.3211 4.50588 -49.3211 45C-49.3211 85.4941 -16.4941 118.321 24 118.321ZM89.3245 44.8092C89.3245 80.8872 60.0776 110.134 23.9996 110.134C-12.0783 110.134 -41.3252 80.8872 -41.3252 44.8092C-41.3252 24.8255 -32.3511 6.93703 -18.2154 -5.04456C-16.6289 -6.38932 -14.3079 -6.21595 -12.8651 -4.77324L8.24654 16.3384C9.45024 17.5421 9.67716 19.2942 9.38022 20.805C9.25813 21.4261 9.19403 22.0686 9.19403 22.7268C9.19403 26.3086 11.095 29.4471 13.9463 31.1874C15.3246 32.0285 16.5084 33.4748 16.5084 35.2628V68.7062C16.5084 70.4942 15.3246 71.9405 13.9463 72.7817C11.095 74.5219 9.19403 77.6604 9.19403 81.2423C9.19403 86.7122 13.6283 91.1465 19.0982 91.1465C24.5681 91.1465 29.0024 86.7122 29.0024 81.2423C29.0024 77.6242 27.0627 74.4585 24.1633 72.7294C22.761 71.8931 21.5507 70.436 21.5507 68.627V33.4669C21.5507 32.7862 21.9958 32.2217 22.5861 31.9995C23.1455 31.789 23.8048 31.8967 24.2555 32.3474L38.4858 46.5777C39.7071 47.799 39.9223 49.5822 39.602 51.1103C39.4639 51.769 39.3912 52.4522 39.3912 53.1532C39.3912 58.6231 43.8255 63.0574 49.2954 63.0574C54.7653 63.0574 59.1996 58.6231 59.1996 53.1532C59.1996 47.6833 54.7653 43.249 49.2954 43.249C48.3183 43.249 47.3754 43.3903 46.4854 43.6531C44.8524 44.1353 42.8638 44.0073 41.527 42.6705L29.5249 30.6684C28.1708 29.3143 28.0573 27.2947 28.5649 25.6474C28.8491 24.725 29.0024 23.7444 29.0024 22.7268C29.0024 17.2569 24.5681 12.8226 19.0982 12.8226C18.0806 12.8226 17.1 12.9759 16.1776 13.2601C14.5303 13.7677 12.5107 13.6542 11.1566 12.3001L-7.68997 -6.54654C-9.53113 -8.38771 -9.21186 -11.5185 -6.85846 -12.7821C2.3321 -17.7168 12.84 -20.5156 23.9996 -20.5156C60.0776 -20.5156 89.3245 8.73132 89.3245 44.8092ZM23.9996 110.605C60.3376 110.605 89.7953 81.1472 89.7953 44.8092C89.7953 8.47129 60.3376 -20.9864 23.9996 -20.9864C-12.3383 -20.9864 -41.796 8.47129 -41.796 44.8092C-41.796 81.1472 -12.3383 110.605 23.9996 110.605ZM96.1714 45C96.1714 84.8592 63.8592 117.171 24 117.171C-15.8592 117.171 -48.1714 84.8592 -48.1714 45C-48.1714 5.14084 -15.8592 -27.1714 24 -27.1714C63.8592 -27.1714 96.1714 5.14084 96.1714 45ZM98 45C98 85.8691 64.8691 119 24 119C-16.8691 119 -50 85.8691 -50 45C-50 4.13093 -16.8691 -29 24 -29C64.8691 -29 98 4.13093 98 45ZM88.6456 44.8092C88.6456 80.5122 59.7026 109.455 23.9996 109.455C-11.7033 109.455 -40.6463 80.5122 -40.6463 44.8092C-40.6463 25.0333 -31.7665 7.33144 -17.7765 -4.52668C-16.4744 -5.63034 -14.5522 -5.50014 -13.3452 -4.29319L7.76649 16.8185C8.75703 17.809 8.98424 19.2995 8.71407 20.674C8.58354 21.3381 8.51513 22.0245 8.51513 22.7268C8.51513 26.555 10.5478 29.9085 13.5927 31.7669C14.8484 32.5333 15.8295 33.7917 15.8295 35.2628V68.7062C15.8295 70.1774 14.8484 71.4358 13.5927 72.2022C10.5478 74.0606 8.51513 77.4141 8.51513 81.2423C8.51513 87.0872 13.2533 91.8254 19.0982 91.8254C24.9431 91.8254 29.6813 87.0872 29.6813 81.2423C29.6813 77.3754 27.6073 73.9928 24.511 72.1463C23.2327 71.384 22.2296 70.1153 22.2296 68.627V33.4669C22.2296 33.0935 22.4757 32.7664 22.8252 32.6349C23.1541 32.5112 23.527 32.579 23.7755 32.8275L38.0057 47.0577C39.0107 48.0627 39.2291 49.58 38.9375 50.9711C38.7899 51.6752 38.7123 52.4052 38.7123 53.1532C38.7123 58.9981 43.4505 63.7363 49.2954 63.7363C55.1403 63.7363 59.8785 58.9981 59.8785 53.1532C59.8785 47.3083 55.1403 42.5701 49.2954 42.5701C48.2525 42.5701 47.2449 42.721 46.2931 43.002C44.8018 43.4424 43.1066 43.29 42.007 42.1904L30.0049 30.1883C28.8912 29.0746 28.7499 27.3524 29.2137 25.8473C29.5176 24.8609 29.6813 23.8129 29.6813 22.7268C29.6813 16.8819 24.9431 12.1437 19.0982 12.1437C18.012 12.1437 16.9641 12.3073 15.9777 12.6113C14.4725 13.0751 12.7504 12.9337 11.6367 11.82L-7.20991 -7.0266C-8.75328 -8.56997 -8.46031 -11.1515 -6.53731 -12.184C2.55694 -17.0669 12.9548 -19.8367 23.9996 -19.8367C59.7026 -19.8367 88.6456 9.10626 88.6456 44.8092ZM90.4742 44.8092C90.4742 81.5221 60.7125 111.284 23.9996 111.284C-12.7133 111.284 -42.4749 81.5221 -42.4749 44.8092C-42.4749 8.09635 -12.7133 -21.6653 23.9996 -21.6653C60.7125 -21.6653 90.4742 8.09635 90.4742 44.8092Z" fill="url(#paint1_linear_332_69519)"/>
 					</g>
 					<defs>
 						<filter id="filter0_f_332_69519" x="-77" y="-60" width="210" height="210" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 							<feFlood flood-opacity="0" result="BackgroundImageFix"/>
 							<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
 							<feGaussianBlur stdDeviation="15" result="effect1_foregroundBlur_332_69519"/>
 						</filter>
 						<linearGradient id="paint0_linear_332_69519" x1="5.33026" y1="4.26604" x2="45.5" y2="116" gradientUnits="userSpaceOnUse">
 							<stop stop-color="#9C00FF"/>
 							<stop offset="0.794921" stop-color="#9C00FF" stop-opacity="0.2"/>
 							<stop offset="0.896965" stop-color="#9C00FF" stop-opacity="0"/>
 						</linearGradient>
 						<linearGradient id="paint1_linear_332_69519" x1="88.4954" y1="3.2477" x2="5.6697" y2="89.4679" gradientUnits="userSpaceOnUse">
 							<stop stop-color="#9C00FF"/>
 							<stop offset="1" stop-color="#9C00FF" stop-opacity="0"/>
 						</linearGradient>
 					</defs>
 				</svg>
 				<!-- Don't reformat or let prettier reformat the SVG otherwise whitespace will get added incorrect and screw up the positioning -->
 				<!-- prettier-ignore -->
 				<svg class="background background--dark" width="235" height="110" viewBox="0 0 235 110" fill="none" xmlns="http://www.w3.org/2000/svg">
 					<mask id="mask0_338_69533" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="235" height="110">
 						<path d="M0 5.61224C0 2.51269 1.21493 0 2.71363 0H232.286C233.785 0 235 2.51269 235 5.61224V104.388C235 107.487 233.785 110 232.286 110H2.71362C1.21493 110 0 107.487 0 104.388V5.61224Z" fill="#110013"/>
 					</mask>
 					<g mask="url(#mask0_338_69533)">
 						<!-- <path d="M0 6.73469C0 3.01522 1.45792 0 3.25635 0H231.744C233.542 0 235 3.01523 235 6.73469V103.265C235 106.985 233.542 110 231.744 110H3.25635C1.45792 110 0 106.985 0 103.265V6.73469Z" fill="black"/> -->
 						<path d="M0 6.73469C0 3.01522 1.45792 0 3.25635 0H231.744C233.542 0 235 3.01523 235 6.73469V103.265C235 106.985 233.542 110 231.744 110H3.25635C1.45792 110 0 106.985 0 103.265V6.73469Z" fill="#2B2B2B" class="background__base" />
 						<g opacity="0.5" filter="url(#filter0_f_338_69533)">
 							<path fill-rule="evenodd" clip-rule="evenodd" d="M14.2158 18.4285C14.373 19.6632 14.2938 20.8481 14.0973 21.8479C14.0346 22.167 14.0009 22.5008 14.0009 22.8477C14.0009 24.6949 14.9749 26.3195 16.4632 27.2279C17.2108 27.6842 17.9997 28.2975 18.7175 29.062C19.3547 28.4371 20.1136 27.9534 20.929 27.6465C21.7544 27.3359 22.6509 27.1999 23.5472 27.2538C23.5788 26.1953 23.7635 25.2034 24.0232 24.3606C24.1685 23.8891 24.2487 23.3827 24.2487 22.8477C24.2487 20.0178 21.9547 17.7238 19.1248 17.7238C18.5898 17.7238 18.0834 17.804 17.6119 17.9493C16.6369 18.2497 15.4622 18.4499 14.2158 18.4285ZM19.0906 74.412C18.2796 75.3742 17.3429 76.1285 16.4632 76.6654C14.9749 77.5737 14.0009 79.1983 14.0009 81.0456C14.0009 83.8754 16.2949 86.1695 19.1248 86.1695C21.9547 86.1695 24.2487 83.8754 24.2487 81.0456C24.2487 79.1798 23.2547 77.5407 21.7415 76.6383C20.8565 76.1105 19.912 75.3655 19.0906 74.412ZM27.6409 44.397V67.5846C32.0844 70.4002 35.0521 75.3737 35.0521 81.0456C35.0521 89.842 27.9212 96.9729 19.1248 96.9729C10.3284 96.9729 3.19748 89.842 3.19748 81.0456C3.19748 75.432 6.10484 70.5021 10.4721 67.6721V36.2212C6.10484 33.3911 3.19748 28.4612 3.19748 22.8477C3.19748 21.9413 3.27374 21.0488 3.42123 20.1773L-15.5679 1.18812C-27.4468 11.9694 -34.8937 27.5177 -34.8937 44.8103C-34.8937 77.3362 -8.52625 103.704 23.9996 103.704C56.5255 103.704 82.893 77.3362 82.893 44.8103C82.893 12.2844 56.5255 -14.0831 23.9996 -14.0831C15.0024 -14.0831 6.48839 -12.069 -1.12758 -8.47042L14.8459 7.50311C16.2132 7.1224 17.6495 6.92037 19.1248 6.92037C27.9212 6.92037 35.0521 14.0513 35.0521 22.8477C35.0521 24.323 34.8501 25.7594 34.4694 27.1266L45.0584 37.7156C46.3719 37.3664 47.7473 37.1816 49.1581 37.1816C57.9545 37.1816 65.0854 44.3125 65.0854 53.1089C65.0854 61.9054 57.9545 69.0363 49.1581 69.0363C40.3617 69.0363 33.2307 61.9054 33.2307 53.1089C33.2307 52.1351 33.3188 51.1774 33.4886 50.2446L27.6409 44.397ZM33.5741 49.8007C33.5744 49.7992 33.5744 49.8019 33.5735 49.8087C33.5737 49.8043 33.5739 49.8016 33.5741 49.8007ZM44.6012 37.8414C44.6012 37.8413 44.6042 37.8407 44.6102 37.8403C44.6043 37.8413 44.6012 37.8416 44.6012 37.8414ZM34.3376 27.5849C34.3375 27.5847 34.3377 27.5817 34.3388 27.5759C34.3383 27.5822 34.3377 27.5852 34.3376 27.5849ZM14.3876 7.63486C14.3876 7.6347 14.3906 7.63415 14.3966 7.63365C14.3906 7.63479 14.3875 7.63503 14.3876 7.63486ZM3.50074 19.7357C3.50093 19.735 3.5009 19.7377 3.50013 19.7439C3.50029 19.739 3.50058 19.7363 3.50074 19.7357ZM10.8621 36.4684C10.8614 36.4679 10.8591 36.4662 10.8554 36.4629C10.861 36.467 10.8631 36.469 10.8621 36.4684ZM10.8623 67.4248C10.8626 67.4248 10.8603 67.4268 10.8554 67.4303C10.8597 67.4265 10.8621 67.4248 10.8623 67.4248ZM27.2462 67.3399C27.2465 67.3399 27.2489 67.3417 27.2532 67.3455C27.2482 67.3419 27.246 67.3399 27.2462 67.3399ZM44.3055 48.6325C45.5496 48.6685 46.7246 48.482 47.7019 48.1934C48.157 48.059 48.6442 47.985 49.1581 47.985C51.9879 47.985 54.282 50.2791 54.282 53.1089C54.282 55.9388 51.9879 58.2329 49.1581 58.2329C46.3282 58.2329 44.0342 55.9388 44.0342 53.1089C44.0342 52.7395 44.0724 52.3849 44.1433 52.0469C44.3521 51.0505 44.4458 49.8677 44.3055 48.6325ZM-55 45C-55 1.3695 -19.6305 -34 24 -34C67.6305 -34 103 1.3695 103 45C103 88.6305 67.6305 124 24 124C-19.6305 124 -55 88.6305 -55 45Z" fill="#F619FA"/>
 						</g>
 						<path fill-rule="evenodd" clip-rule="evenodd" d="M24 117.171C63.8592 117.171 96.1714 84.8592 96.1714 45C96.1714 5.14084 63.8592 -27.1714 24 -27.1714C-15.8592 -27.1714 -48.1714 5.14084 -48.1714 45C-48.1714 84.8592 -15.8592 117.171 24 117.171ZM24 119C64.8691 119 98 85.8691 98 45C98 4.13093 64.8691 -29 24 -29C-16.8691 -29 -50 4.13093 -50 45C-50 85.8691 -16.8691 119 24 119ZM23.9996 109.455C59.7026 109.455 88.6456 80.5122 88.6456 44.8092C88.6456 9.10626 59.7026 -19.8367 23.9996 -19.8367C12.9548 -19.8367 2.55693 -17.0669 -6.53731 -12.184C-8.46031 -11.1515 -8.75328 -8.56997 -7.20991 -7.0266L11.6367 11.82C12.7504 12.9337 14.4725 13.0751 15.9777 12.6113C16.9641 12.3073 18.012 12.1437 19.0982 12.1437C24.9431 12.1437 29.6813 16.8819 29.6813 22.7268C29.6813 23.8129 29.5176 24.8609 29.2137 25.8473C28.7499 27.3525 28.8912 29.0746 30.0049 30.1883L42.007 42.1904C43.1066 43.29 44.8018 43.4424 46.2931 43.002C47.2449 42.721 48.2525 42.5701 49.2954 42.5701C55.1403 42.5701 59.8785 47.3083 59.8785 53.1532C59.8785 58.9981 55.1403 63.7363 49.2954 63.7363C43.4505 63.7363 38.7123 58.9981 38.7123 53.1532C38.7123 52.4052 38.7899 51.6752 38.9375 50.9711C39.2291 49.58 39.0107 48.0627 38.0057 47.0577L23.7755 32.8275C23.527 32.579 23.1541 32.5112 22.8252 32.6349V32.6349C22.4757 32.7664 22.2296 33.0935 22.2296 33.4669V68.627C22.2296 70.1153 23.2327 71.384 24.511 72.1463C27.6073 73.9928 29.6813 77.3753 29.6813 81.2423C29.6813 87.0872 24.9431 91.8254 19.0982 91.8254C13.2533 91.8254 8.51513 87.0872 8.51513 81.2423C8.51513 77.4141 10.5478 74.0606 13.5927 72.2022C14.8484 71.4358 15.8295 70.1774 15.8295 68.7062V35.2628C15.8295 33.7917 14.8484 32.5333 13.5927 31.7669C10.5478 29.9085 8.51513 26.555 8.51513 22.7268C8.51513 22.0245 8.58354 21.3381 8.71407 20.674C8.98424 19.2995 8.75703 17.809 7.76649 16.8185L-13.3452 -4.29319C-14.5522 -5.50015 -16.4744 -5.63034 -17.7765 -4.52668C-31.7665 7.33144 -40.6463 25.0333 -40.6463 44.8092C-40.6463 80.5122 -11.7033 109.455 23.9996 109.455ZM23.9996 111.284C60.7125 111.284 90.4742 81.5221 90.4742 44.8092C90.4742 8.09635 60.7125 -21.6653 23.9996 -21.6653C-12.7133 -21.6653 -42.4749 8.09635 -42.4749 44.8092C-42.4749 81.5221 -12.7133 111.284 23.9996 111.284Z" fill="url(#paint0_linear_338_69533)"/>
 						<path fill-rule="evenodd" clip-rule="evenodd" d="M96.8503 45C96.8503 85.2341 64.2341 117.85 24 117.85C-16.2341 117.85 -48.8503 85.2341 -48.8503 45C-48.8503 4.7659 -16.2341 -27.8503 24 -27.8503C64.2341 -27.8503 96.8503 4.7659 96.8503 45ZM24 118.321C64.4941 118.321 97.3211 85.4941 97.3211 45C97.3211 4.50588 64.4941 -28.3211 24 -28.3211C-16.4941 -28.3211 -49.3211 4.50588 -49.3211 45C-49.3211 85.4941 -16.4941 118.321 24 118.321ZM89.3245 44.8092C89.3245 80.8872 60.0776 110.134 23.9996 110.134C-12.0783 110.134 -41.3252 80.8872 -41.3252 44.8092C-41.3252 24.8255 -32.3511 6.93703 -18.2154 -5.04456C-16.6289 -6.38932 -14.3079 -6.21595 -12.8651 -4.77324L8.24654 16.3384C9.45024 17.5421 9.67716 19.2942 9.38022 20.805C9.25813 21.4261 9.19403 22.0686 9.19403 22.7268C9.19403 26.3086 11.095 29.4471 13.9463 31.1874C15.3246 32.0285 16.5084 33.4748 16.5084 35.2628V68.7062C16.5084 70.4942 15.3246 71.9405 13.9463 72.7817C11.095 74.5219 9.19403 77.6604 9.19403 81.2423C9.19403 86.7122 13.6283 91.1465 19.0982 91.1465C24.5681 91.1465 29.0024 86.7122 29.0024 81.2423C29.0024 77.6242 27.0627 74.4585 24.1633 72.7294C22.761 71.8931 21.5507 70.436 21.5507 68.627V33.4669C21.5507 32.7862 21.9958 32.2217 22.5861 31.9995C23.1455 31.789 23.8048 31.8967 24.2555 32.3474L38.4858 46.5777C39.7071 47.799 39.9223 49.5822 39.602 51.1103C39.4639 51.769 39.3912 52.4522 39.3912 53.1532C39.3912 58.6231 43.8255 63.0574 49.2954 63.0574C54.7653 63.0574 59.1996 58.6231 59.1996 53.1532C59.1996 47.6833 54.7653 43.249 49.2954 43.249C48.3183 43.249 47.3754 43.3903 46.4854 43.6531C44.8524 44.1353 42.8638 44.0073 41.527 42.6705L29.5249 30.6684C28.1708 29.3143 28.0573 27.2947 28.5649 25.6474C28.8491 24.725 29.0024 23.7444 29.0024 22.7268C29.0024 17.2569 24.5681 12.8226 19.0982 12.8226C18.0806 12.8226 17.1 12.9759 16.1776 13.2601C14.5303 13.7677 12.5107 13.6542 11.1566 12.3001L-7.68997 -6.54654C-9.53113 -8.38771 -9.21186 -11.5185 -6.85846 -12.7821C2.3321 -17.7168 12.84 -20.5156 23.9996 -20.5156C60.0776 -20.5156 89.3245 8.73132 89.3245 44.8092ZM23.9996 110.605C60.3376 110.605 89.7953 81.1472 89.7953 44.8092C89.7953 8.47129 60.3376 -20.9864 23.9996 -20.9864C-12.3383 -20.9864 -41.796 8.47129 -41.796 44.8092C-41.796 81.1472 -12.3383 110.605 23.9996 110.605ZM96.1714 45C96.1714 84.8592 63.8592 117.171 24 117.171C-15.8592 117.171 -48.1714 84.8592 -48.1714 45C-48.1714 5.14084 -15.8592 -27.1714 24 -27.1714C63.8592 -27.1714 96.1714 5.14084 96.1714 45ZM98 45C98 85.8691 64.8691 119 24 119C-16.8691 119 -50 85.8691 -50 45C-50 4.13093 -16.8691 -29 24 -29C64.8691 -29 98 4.13093 98 45ZM88.6456 44.8092C88.6456 80.5122 59.7026 109.455 23.9996 109.455C-11.7033 109.455 -40.6463 80.5122 -40.6463 44.8092C-40.6463 25.0333 -31.7665 7.33144 -17.7765 -4.52668C-16.4744 -5.63034 -14.5522 -5.50014 -13.3452 -4.29319L7.76649 16.8185C8.75703 17.809 8.98424 19.2995 8.71407 20.674C8.58354 21.3381 8.51513 22.0245 8.51513 22.7268C8.51513 26.555 10.5478 29.9085 13.5927 31.7669C14.8484 32.5333 15.8295 33.7917 15.8295 35.2628V68.7062C15.8295 70.1774 14.8484 71.4358 13.5927 72.2022C10.5478 74.0606 8.51513 77.4141 8.51513 81.2423C8.51513 87.0872 13.2533 91.8254 19.0982 91.8254C24.9431 91.8254 29.6813 87.0872 29.6813 81.2423C29.6813 77.3754 27.6073 73.9928 24.511 72.1463C23.2327 71.384 22.2296 70.1153 22.2296 68.627V33.4669C22.2296 33.0935 22.4757 32.7664 22.8252 32.6349C23.1541 32.5112 23.527 32.579 23.7755 32.8275L38.0057 47.0577C39.0107 48.0627 39.2291 49.58 38.9375 50.9711C38.7899 51.6752 38.7123 52.4052 38.7123 53.1532C38.7123 58.9981 43.4505 63.7363 49.2954 63.7363C55.1403 63.7363 59.8785 58.9981 59.8785 53.1532C59.8785 47.3083 55.1403 42.5701 49.2954 42.5701C48.2525 42.5701 47.2449 42.721 46.2931 43.002C44.8018 43.4424 43.1066 43.29 42.007 42.1904L30.0049 30.1883C28.8912 29.0746 28.7499 27.3524 29.2137 25.8473C29.5176 24.8609 29.6813 23.8129 29.6813 22.7268C29.6813 16.8819 24.9431 12.1437 19.0982 12.1437C18.012 12.1437 16.9641 12.3073 15.9777 12.6113C14.4725 13.0751 12.7504 12.9337 11.6367 11.82L-7.20991 -7.0266C-8.75328 -8.56997 -8.46031 -11.1515 -6.53731 -12.184C2.55694 -17.0669 12.9548 -19.8367 23.9996 -19.8367C59.7026 -19.8367 88.6456 9.10626 88.6456 44.8092ZM90.4742 44.8092C90.4742 81.5221 60.7125 111.284 23.9996 111.284C-12.7133 111.284 -42.4749 81.5221 -42.4749 44.8092C-42.4749 8.09635 -12.7133 -21.6653 23.9996 -21.6653C60.7125 -21.6653 90.4742 8.09635 90.4742 44.8092Z" fill="url(#paint1_linear_338_69533)"/>
 					</g>
 					<defs>
 						<filter id="filter0_f_338_69533" x="-76" y="-55" width="200" height="200" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 							<feFlood flood-opacity="0" result="BackgroundImageFix"/>
 							<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
 							<feGaussianBlur stdDeviation="10.5" result="effect1_foregroundBlur_338_69533"/>
 						</filter>
 						<linearGradient id="paint0_linear_338_69533" x1="5.33025" y1="4.26604" x2="24" y2="92.5229" gradientUnits="userSpaceOnUse">
 							<stop stop-color="#DE98FF"/>
 							<stop offset="1" stop-color="#837A89" stop-opacity="0"/>
 						</linearGradient>
 						<linearGradient id="paint1_linear_338_69533" x1="88.4954" y1="3.2477" x2="5.6697" y2="89.4679" gradientUnits="userSpaceOnUse">
 							<stop stop-color="white"/>
 							<stop offset="1" stop-color="white" stop-opacity="0"/>
 						</linearGradient>
 					</defs>
 				</svg>
 				<!-- Don't reformat or let prettier reformat the SVG otherwise whitespace will get added incorrect and screw up the positioning -->
 				<!-- prettier-ignore -->
 				<svg class="play" width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
 					<path
 						d="M13.8626 11.0319C14.3464 10.5343 24.5 16.0074 24.5 17.5C24.5 18.9926 14.346 24.4657 13.8627 23.9681C13.3794 23.4706 13.3788 11.5294 13.8626 11.0319Z"
 						fill="currentColor"
 					></path>
 					<path
 						d="M34 18C34 26.8366 26.8366 34 18 34C9.16344 34 2 26.8366 2 18C2 9.16344 9.16344 2 18 2C26.8366 2 34 9.16344 34 18Z"
 						stroke="currentColor"
 					></path>
 				</svg>
 			</a>
 		`;
 	}
 }
--- a/src/webviews/apps/welcome/welcome.html
+++ b/src/webviews/apps/welcome/welcome.html
@ -13,10 +13,6 @@
 				font-display: block;
 				src: url('#{root}/dist/glicons.woff2?ab6c9110fb0444acd9ba719c4c55fa68') format('woff2');
 			}

 			.video-button {
 				--video-banner-bg: url(#{webroot}/media/getting-started.webp);
 			}
 		</style>
 	</head>

@ -260,23 +256,7 @@

 				<h2>Tutorial Video</h2>
 				<nav class="welcome__starting-nav" aria-label="Getting started links">
 					<a
 						class="video-button"
 						href="https://www.youtube.com/watch?v=UQPb73Zz9qk"
 						aria-label="Watch the Tutorial video"
 						title="Watch the Tutorial video"
 					>
 						<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
 							<path
 								d="M13.8626 11.0319C14.3464 10.5343 24.5 16.0074 24.5 17.5C24.5 18.9926 14.346 24.4657 13.8627 23.9681C13.3794 23.4706 13.3788 11.5294 13.8626 11.0319Z"
 								fill="currentColor"
 							/>
 							<path
 								d="M34 18C34 26.8366 26.8366 34 18 34C9.16344 34 2 26.8366 2 18C2 9.16344 9.16344 2 18 2C26.8366 2 34 9.16344 34 18Z"
 								stroke="currentColor"
 							/>
 						</svg>
 					</a>
 					<video-button></video-button>
 					<span
 						><gk-button appearance="secondary" href="command:gitlens.getStarted"
 							>Get Started Walkthrough</gk-button
--- a/src/webviews/apps/welcome/welcome.scss
+++ b/src/webviews/apps/welcome/welcome.scss
@ -173,52 +173,6 @@ gk-card p {
 	margin: 0;
 }

 .video-button {
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
 	align-items: flex-end;
 	background-color: var(--gk-card-background);
 	padding: 0 2rem 0 0;
 	color: inherit;
 	transition: background-color ease-in-out 150ms;
 	border-radius: 0.4rem;
 	position: relative;
 	overflow: hidden;
 	height: 70px;

 	> svg {
 		transform: scale(1.2);
 		transition: transform ease-in-out 150ms;
 	}

 	&:hover {
 		background-color: var(--gk-card-hover-background);
 		text-decoration: none;
 		color: inherit;

 		& > svg {
 			transform: scale(1.4);
 		}

 		&::before {
 			transform: translateX(-3px) scale(1.05);
 		}
 	}

 	&::before {
 		content: '';
 		position: absolute;
 		top: 0;
 		left: 0;
 		right: 0;
 		bottom: 0;
 		background: no-repeat var(--video-banner-bg) left center;
 		background-size: cover;
 		transition: transform ease-in-out 150ms;
 	}
 }

 .welcome {
 	padding: var(--gitlens-gutter-width);

--- a/src/webviews/apps/welcome/welcome.ts
+++ b/src/webviews/apps/welcome/welcome.ts
@ -19,6 +19,7 @@ import './components/svg-editor-toolbar';
 import './components/svg-graph';
 import './components/svg-revision-navigation';
 import './components/svg-timeline';
 import './components/video-button';

 export class WelcomeApp extends App<State> {
 	constructor() {