Updates home view content

- consolidates welcome and getting started - adds subheading to features - updates list styles Co-authored-by: Eric Amodio <eamodio@gmail.com>
gitkraken · Nov 1, 2022 · beb4c78 · beb4c78
1 parent ce24429
commit beb4c78
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 24 deletions.
diff --git a/src/webviews/apps/home/components/stepped-section.ts b/src/webviews/apps/home/components/stepped-section.ts
@@ -13,7 +13,7 @@ const template = html<SteppedSection>`<template role="region">
 			@click="${(x, c) => x.handleClick(c.event)}"
 		>
 			<slot name="heading"></slot>
-			<small class="description"><slot name="description"></slot></small>
+			<span class="description"><slot name="description"></slot></span>
 		</button>
 	</header>
 	<div class="content${x => (x.completed ? ' is-hidden' : '')}" id="content" aria-labelledby="button">
@@ -113,11 +113,9 @@ const styles = css`
 	}
 
 	.description {
-		margin-left: 0.2rem;
+		margin-left: 0.6rem;
 		text-transform: none;
-		color: var(--gitlens-brand-color-2);
-		opacity: 0.6;
-		font-style: italic;
+		opacity: 0.5;
 	}
 `;
 

diff --git a/src/webviews/apps/home/home.html b/src/webviews/apps/home/home.html
@@ -91,34 +91,30 @@
 						GitLens supercharges Git inside VS Code and unlocks the untapped knowledge within each
 						repository.
 					</p>
-					<p>
-						<a href="command:gitlens.showWelcomePage?%22quick-setup%22" class="button-link"
-							><code-icon icon="pass"></code-icon>Quick Setup</a
-						>
-					</p>
-				</stepped-section>
-				<stepped-section id="getting-started">
-					<span slot="heading">Getting Started</span>
 					<a class="video-banner" href="https://www.youtube.com/watch?v=UQPb73Zz9qk">
 						<span>Get Started</span> <small>Tutorial Video</small>
 					</a>
-					<ul>
+					<ul class="icon-list">
 						<li>
-							The <a href="command:gitlens.showWelcomePage?%22quick-setup%22">Quick Setup</a> helps you
-							start personalizing GitLens to your needs.
+							<code-icon icon="circle-filled"></code-icon>
+							<a href="command:gitlens.showWelcomePage?%22quick-setup%22">Quick Setup</a> &mdash;
+							personalize GitLens to your needs.
 						</li>
 						<li>
-							The <a href="command:gitlens.getStarted">Feature Walkthrough</a> gets you familiarized with
-							the rich features GitLens provides.
+							<code-icon icon="circle-filled"></code-icon>
+							<a href="command:gitlens.getStarted">Feature Walkthrough</a> &mdash; learn about the rich
+							features GitLens provides.
 						</li>
 						<li>
-							The <a href="command:gitlens.showSettingsPage">Interactive settings editor</a> helps you
-							fine-tune your GitLens experience.
+							<code-icon icon="circle-filled"></code-icon>
+							<a href="command:gitlens.showSettingsPage">Interactive Settings editor</a> &mdash; fine-tune
+							your GitLens experience.
 						</li>
 					</ul>
 				</stepped-section>
 				<stepped-section id="features">
 					<span slot="heading">Features</span>
+					<span slot="description">always free and accessible</span>
 					<p>
 						GitLens is deeply integrated into many areas and aspects of VS Code, especially editors and
 						views.
@@ -136,12 +132,15 @@
 						</div>
 					</card-section>
 					<div class="activitybar-banner">
-						<ul>
+						<ul class="icon-list">
 							<li>
-								Find many features by opening the
+								<code-icon icon="circle-filled"></code-icon> Find many features by opening the
 								<a href="command:workbench.view.scm">Source Control Side Bar</a>
 							</li>
-							<li>Your central hub for the latest feature updates and support information</li>
+							<li>
+								<code-icon icon="circle-filled"></code-icon> Your central hub for the latest feature
+								updates and support information
+							</li>
 						</ul>
 						<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 83 76">
 							<rect x="42.5" y=".5" width="40" height="75" rx="16.5" stroke="url(#a)" />
@@ -238,7 +237,7 @@
 				<stepped-section id="plus">
 					<span slot="heading">Want even more from GitLens?</span>
 					<card-section class="gl-plus-banner" no-heading>
-						<div class="centered">
+						<div class="centered plus-banner-text">
 							<p class="type-tight">
 								<span class="logo"
 									><span class="foreground">Git</span>Lens+

diff --git a/src/webviews/apps/home/home.scss b/src/webviews/apps/home/home.scss
@@ -136,6 +136,24 @@ ul {
 	padding-left: 1.2em;
 }
 
+.icon-list {
+	list-style: none;
+	padding-left: 0;
+
+	li {
+		position: relative;
+		padding-left: 2.2rem;
+
+		> code-icon:first-child {
+			position: absolute;
+			left: 0;
+			top: 0.1rem;
+			font-size: 1.6rem;
+			color: var(--color-foreground--50);
+		}
+	}
+}
+
 .button-container {
 	display: flex;
 	flex-direction: column;
@@ -217,9 +235,14 @@ ul {
 	}
 }
 
+.plus-banner-text {
+	text-shadow: 0.1rem 0.1rem 0 var(--color-background), 0.1rem 0.1rem 0.2rem var(--color-background);
+}
+
 .logo {
 	font-size: 1.8rem;
 	color: var(--gitlens-brand-color-2);
+	font-weight: 500;
 }
 
 .description {