Updates more GL+ and Pro messaging

- updates home GL+ banner
- updates graph account banners
- updates visual file history content

src/webviews/apps/home/components/plus-content.ts

@@ -36,7 +36,19 @@ const template = html`
 		`,
 	)}
 	${when(
-		x => [SubscriptionState.FreeInPreviewTrial, SubscriptionState.FreePlusInTrial].includes(x.state),
+		x => x.state === SubscriptionState.FreeInPreviewTrial,
+		html<PlusContent>`
+			<h3>GitLens Pro Trial</h3>
+			<p>
+				You have ${x => x.daysRemaining} left in your 3-day
+				<a title="Learn more about GitLens+ features" href="command:gitlens.plus.learn">GitLens Pro trial</a>.
+				Don't worry, once your trial ends, you can extend it for an additional 7-days of GitLens+ features on
+				private repos for free.
+			</p>
+		`,
+	)}
+	${when(
+		x => x.state === SubscriptionState.FreePlusInTrial,
 		html<PlusContent>`
 			<h3>GitLens Pro Trial</h3>
 			<p>
@@ -53,7 +65,7 @@ const template = html`
 			<h3>Extend Your GitLens Pro Trial</h3>
 			<p>
 				Your free 3-day GitLens Pro trial has ended, extend your trial to get an additional 7-days of GitLens+
-				features on private repos.
+				features on private repos for free.
 			</p>
 			<p class="mb-1">
 				<vscode-button @click="${x => x.fireAction('command:gitlens.plus.loginOrSignUp')}"

src/webviews/apps/plus/graph/GraphWrapper.tsx

@@ -592,19 +592,35 @@ export function GraphWrapper({
 			case SubscriptionState.Paid:
 				return;
 			case SubscriptionState.FreeInPreviewTrial:
+				icon = 'calendar';
+				modifier = 'neutral';
+				content = (
+					<>
+						<p className="alert__title">GitLens Pro Trial</p>
+						<p className="alert__message">
+							You have {days < 1 ? 'less than one day' : pluralize('day', days)} left in your 3-day{' '}
+							<a title="Learn more about GitLens+ features" href="command:gitlens.plus.learn">
+								GitLens Pro trial
+							</a>
+							. Don't worry, once your trial ends, you can extend it for an additional 7-days of GitLens+
+							features on private repos for free.
+						</p>
+					</>
+				);
+				break;
 			case SubscriptionState.FreePlusInTrial:
 				icon = 'calendar';
 				modifier = 'neutral';
 				content = (
 					<>
-						<p className="alert__title">GitLens+ Trial</p>
+						<p className="alert__title">GitLens Pro Trial</p>
 						<p className="alert__message">
 							You have {days < 1 ? 'less than one day' : pluralize('day', days)} left in your{' '}
 							<a title="Learn more about GitLens+ features" href="command:gitlens.plus.learn">
-								GitLens+ trial
+								GitLens Pro trial
 							</a>
-							. Once your trial ends, you'll need a paid plan to continue to use GitLens+ features,
-							including the Commit Graph, on this and other private repos.
+							. Once your trial ends, you'll continue to have access to GitLens+ features on local and
+							public repos, while private repos require GitLens Pro.
 						</p>
 					</>
 				);
@@ -614,16 +630,16 @@ export function GraphWrapper({
 				modifier = 'warning';
 				content = (
 					<>
-						<p className="alert__title">Extend Your GitLens+ Trial</p>
+						<p className="alert__title">Extend Your GitLens Pro Trial</p>
 						<p className="alert__message">
-							Your free trial has ended, please sign in to extend your trial of GitLens+ features on
-							private repos by an additional 7-days.
+							Your free 3-day GitLens Pro trial has ended, extend your trial to get an additional 7-days
+							of GitLens+ features on private repos for free.
 						</p>
 					</>
 				);
 				actions = (
 					<a className="alert-action" href="command:gitlens.plus.loginOrSignUp">
-						Extend Trial
+						Extend Pro Trial
 					</a>
 				);
 				break;
@@ -632,16 +648,16 @@ export function GraphWrapper({
 				modifier = 'warning';
 				content = (
 					<>
-						<p className="alert__title">GitLens+ Trial Expired</p>
+						<p className="alert__title">GitLens Pro Trial Expired</p>
 						<p className="alert__message">
-							Your free trial has ended, please upgrade your account to continue to use GitLens+ features,
-							including the Commit Graph, on this and other private repos.
+							Your GitLens Pro trial has ended, please upgrade to GitLens Pro to continue to use GitLens+
+							features on private repos.
 						</p>
 					</>
 				);
 				actions = (
 					<a className="alert-action" href="command:gitlens.plus.purchase">
-						Upgrade Your Account
+						Upgrade to Pro
 					</a>
 				);
 				break;
@@ -651,7 +667,10 @@ export function GraphWrapper({
 				content = (
 					<>
 						<p className="alert__title">Please verify your email</p>
-						<p className="alert__message">Please verify the email for the account you created.</p>
+						<p className="alert__message">
+							Before you can also use GitLens+ features on private repos, please verify your email
+							address.
+						</p>
 					</>
 				);
 				actions = (

src/webviews/apps/plus/timeline/partials/state.free-preview-trial-expired.html

@@ -1,25 +1,13 @@
 <template id="state:free-preview-trial-expired">
 	<section>
 		<p>
-			Sign in to use the Visual File History and other GitLens+ features on public repos and get an additional
-			7-day free trial for both public and private repos.
-		</p>
-		<vscode-button data-action="command:gitlens.plus.loginOrSignUp">Sign in to GitLens+</vscode-button>
-		<p>
-			✨ The Visual File History is
-			<a title="Learn more about GitLens+ features" href="command:gitlens.plus.learn">GitLens+ feature</a> which
-			can be used on public repos with a
-			<a title="Sign in" href="command:gitlens.plus.loginOrSignUp">free account</a> and private repos with a
-			<a title="View plans" href="command:gitlens.plus.purchase">paid account</a>.
+			Your free 3-day GitLens Pro trial has ended, extend your trial to get an additional 7-days of Visual File
+			History and other GitLens+ features on private repos.
 		</p>
+		<vscode-button data-action="command:gitlens.plus.loginOrSignUp">Extend Pro Trial</vscode-button>
 		<p>
 			<i class="codicon codicon-info"></i>&nbsp;All other GitLens features can always be used on any repo, without
 			an account.
 		</p>
-		<p class="mt-tight">
-			<span class="glicon glicon-clock"></span> GitLens+
-			<a href="command:gitlens.plus.purchase">introductory pricing</a> will end with the next release (late Sept,
-			early Oct).
-		</p>
 	</section>
 </template>

src/webviews/apps/plus/timeline/partials/state.free.html

@@ -1,28 +1,15 @@
 <template id="state:free">
 	<section>
 		<p>
-			Try it now, without an account, for 3 days on public and private repos, or
-			<a title="Sign in to GitLens+" href="command:gitlens.plus.loginOrSignUp">sign in</a> for use on public
-			repos.
+			Try it now on private repos, free for 3 days, without an account or
+			<a href="command:gitlens.plus.loginOrSignUp">sign in to GitLens Pro</a>.
 		</p>
 		<vscode-button data-action="command:gitlens.plus.startPreviewTrial"
 			>Try the Visual File History now</vscode-button
 		>
 		<p>
-			✨ The Visual File History is
-			<a title="Learn more about GitLens+ features" href="command:gitlens.plus.learn">GitLens+ feature</a> which
-			can be used on public repos with a
-			<a title="Sign in" href="command:gitlens.plus.loginOrSignUp">free account</a> and private repos with a
-			<a title="View plans" href="command:gitlens.plus.purchase">paid account</a>.
-		</p>
-		<p>
 			<i class="codicon codicon-info"></i>&nbsp;All other GitLens features can always be used on any repo, without
 			an account.
 		</p>
-		<p class="mt-tight">
-			<span class="glicon glicon-clock"></span> GitLens+
-			<a href="command:gitlens.plus.purchase">introductory pricing</a> will end with the next release (late Sept,
-			early Oct).
-		</p>
 	</section>
 </template>

src/webviews/apps/plus/timeline/partials/state.plus-trial-expired.html

@@ -1,21 +1,13 @@
 <template id="state:plus-trial-expired">
 	<section>
-		<p>Upgrade your account to use the Visual File History and other GitLens+ features on private repos.</p>
-		<vscode-button data-action="command:gitlens.plus.purchase">Upgrade your account</vscode-button>
 		<p>
-			✨ The Visual File History is
-			<a title="Learn more about GitLens+ features" href="command:gitlens.plus.learn">GitLens+ feature</a> which
-			can be used on public repos with a free account and private repos with a
-			<a title="Upgrade your account" href="command:gitlens.plus.purchase">paid account</a>.
+			Your free trial has ended, please upgrade your account to continue to use GitLens+ features, including the
+			Visual File History, on this and other private repos.
 		</p>
+		<vscode-button data-action="command:gitlens.plus.purchase">Upgrade your account</vscode-button>
 		<p>
 			<i class="codicon codicon-info"></i>&nbsp;All other GitLens features can always be used on any repo, without
 			an account.
 		</p>
-		<p class="mt-tight">
-			<span class="glicon glicon-clock"></span> GitLens+
-			<a href="command:gitlens.plus.purchase">introductory pricing</a> will end with the next release (late Sept,
-			early Oct).
-		</p>
 	</section>
 </template>

src/webviews/apps/plus/timeline/timeline.html

@@ -41,13 +41,22 @@
 		<div id="overlay" class="hidden">
 			<div class="modal">
 				<p>
-					The Visual File History allows you to quickly see the evolution of a file, including when changes
-					were made, how large they were, and who made them.
+					The Visual File History, a
+					<a title="Learn more about GitLens+ features" href="command:gitlens.plus.learn"
+						>✨GitLens+ feature</a
+					>, allows you to quickly see the evolution of a file, including when changes were made, how large
+					they were, and who made them.
 				</p>
 				<div id="overlay-slot"></div>
 			</div>
 		</div>
 		#{endOfBody}
+
+		<style nonce="#{cspNonce}">
+			:root {
+				--gl-plus-bg: url(#{webroot}/media/gitlens-backdrop.webp);
+			}
+		</style>
 		<style nonce="#{cspNonce}">
 			@font-face {
 				font-family: 'codicon';

src/webviews/apps/plus/timeline/timeline.scss

@@ -200,10 +200,12 @@ span.button-subaction {
 
 .modal {
 	max-width: 600px;
-	background: var(--color-hover-background);
+	background: var(--color-hover-background) no-repeat left top;
+	background-image: var(--gl-plus-bg);
 	border: 1px solid var(--color-hover-border);
+	border-radius: 0.4rem;
 	margin: 1rem;
-	padding: 1rem;
+	padding: 1.2rem;
 
 	> p:first-child {
 		margin-top: 0;