Updates home & graph state content

src/webviews/apps/home/components/header-card.ts

@@ -14,19 +14,15 @@ const template = html`
 		${when(x => x.name !== '', html<HeaderCard>`<span class="foreground">${x => x.name}</span>`)}
 	</h1>
 	<p class="header-card__account">
-		<span class="status"
-			><span
-				class="repo-access${x => (x.isPro ? ' is-pro' : '')}"
-				title="You have access to GitLens+ features on ${x => (x.isPro ? 'any repo' : 'local & public repos')}"
-				>✨</span
-			>${x => x.planName}</span
+		<span
+			class="status"
+			title="Can access GitLens+ features on ${x => (x.isPro ? 'any repo' : 'local & public repos')}"
+			><span class="repo-access${x => (x.isPro ? ' is-pro' : '')}">✨</span>${x => x.planName}</span
 		>
-		<span>
+		<span class="account-actions">
 			${when(
 				x => !x.hasAccount,
-				html<HeaderCard>`
-					<a class="action" title="Sign in to GitLens+" href="command:gitlens.plus.loginOrSignUp">Sign In</a>
-				`,
+				html<HeaderCard>`<a class="action" href="command:gitlens.plus.loginOrSignUp">Sign In</a>`,
 			)}
 			${when(
 				x => x.hasAccount,
@@ -59,18 +55,29 @@ const template = html`
 	</div>
 	<span class="actions">
 		${when(
+			x => x.state === SubscriptionState.Free,
+			html<HeaderCard>`<a class="action is-primary" href="command:gitlens.plus.startPreviewTrial"
+				>Start Pro Trial</a
+			>`,
+		)}
+		${when(
 			x => x.state === SubscriptionState.FreePreviewTrialExpired,
-			html<HeaderCard>`<a class="action" href="command:gitlens.plus.loginOrSignUp">Extend Trial</a>`,
+			html<HeaderCard>`<a class="action is-primary" href="command:gitlens.plus.loginOrSignUp"
+				>Extend Pro Trial</a
+			>`,
 		)}
 		${when(
-			x => x.state === SubscriptionState.FreePlusTrialExpired,
-			html<HeaderCard>`<a class="action" href="command:gitlens.plus.purchase">Upgrade to Pro</a>`,
+			x =>
+				x.state === SubscriptionState.FreeInPreviewTrial ||
+				x.state === SubscriptionState.FreePlusInTrial ||
+				x.state === SubscriptionState.FreePlusTrialExpired,
+			html<HeaderCard>`<a class="action is-primary" href="command:gitlens.plus.purchase">Upgrade to Pro</a>`,
 		)}
 		${when(
 			x => x.state === SubscriptionState.VerificationRequired,
 			html<HeaderCard>`
 				<a
-					class="action"
+					class="action is-primary"
 					href="command:gitlens.plus.resendVerification"
 					title="Resend Verification Email"
 					aria-label="Resend Verification Email"

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

@@ -8,15 +8,18 @@ const template = html`
 	${when(
 		x => x.state === SubscriptionState.Free,
 		html<PlusContent>`
-			<p>Adds all-new, completely optional, features that enhance your GitLens experience.</p>
-			<p>These features are free for local and public repos, no account required.</p>
+			<p>All-new, completely optional, features that enhance your GitLens experience.</p>
+			<p>
+				GitLens+ features are free for local and public repos, no account required, while private repos require
+				GitLens Pro.
+			</p>
 
 			<p class="mb-1">
 				<vscode-button @click="${x => x.fireAction('command:gitlens.plus.startPreviewTrial')}"
-					>Try GitLens+ Pro for private repos</vscode-button
+					>Try GitLens Pro for private repos</vscode-button
 				>
 			</p>
-			<p>
+			<p class="mb-1">
 				<a class="minimal" href="command:gitlens.plus.hide">Hide GitLens+ features</a>
 			</p>
 		`,
@@ -40,7 +43,7 @@ const template = html`
 				You have ${x => x.daysRemaining} left in your
 				<a title="Learn more about GitLens+ features" href="command:gitlens.plus.learn">GitLens Pro trial</a>.
 				Once your trial ends, you'll continue to have access to GitLens+ features on local and public repos,
-				while private repo access will need GitLens Pro.
+				while private repos require GitLens Pro.
 			</p>
 		`,
 	)}
@@ -54,7 +57,7 @@ const template = html`
 			</p>
 			<p class="mb-1">
 				<vscode-button @click="${x => x.fireAction('command:gitlens.plus.loginOrSignUp')}"
-					>Extend Trial</vscode-button
+					>Extend Pro Trial</vscode-button
 				>
 			</p>
 		`,
@@ -131,6 +134,9 @@ const styles = css`
 
 	.minimal {
 		color: var(--color-foreground--50);
+		font-size: 1rem;
+		position: relative;
+		top: -0.2rem;
 	}
 `;
 

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

@@ -548,7 +548,7 @@ export function GraphWrapper({
 			case SubscriptionState.FreePlusInTrial: {
 				const days = getSubscriptionTimeRemaining(subscription, 'days') ?? 0;
 				label = 'GitLens Pro (Trial)';
-				subText = `${days < 1 ? '< 1 day' : pluralize('day', days)} left`;
+				subText = `${days < 1 ? '<1 day' : pluralize('day', days)} left`;
 				break;
 			}
 			case SubscriptionState.VerificationRequired:
@@ -561,7 +561,7 @@ export function GraphWrapper({
 			<span className="mr-loose">
 				<span
 					className="badge"
-					title={`You have access to GitLens+ features on ${isPro ? 'any repo' : 'local & public repos'}`}
+					title={`Can access GitLens+ features on ${isPro ? 'any repo' : 'local & public repos'}`}
 				>
 					<span className={`repo-access${isPro ? ' is-pro' : ''}`}>✨</span> {label}
 					{subText && (

src/webviews/apps/plus/graph/graph.scss

@@ -17,6 +17,7 @@ a {
 	small {
 		font-size: inherit;
 		opacity: 0.6;
+		font-weight: 400;
 	}
 }