Updates graph preview banner content

Author: d13

images/icons/clock.svg

@@ -28,5 +28,6 @@
   "expand": 61721,
   "list-auto": 61722,
   "arrow-up-force": 61723,
-  "pinned-filled": 61724
+  "pinned-filled": 61724,
+  "clock": 61725
 }

images/icons/template/mapping.json

@@ -6394,6 +6394,13 @@
 					"fontPath": "dist/glicons.woff2",
 					"fontCharacter": "\\f11c"
 				}
+			},
+			"gitlens-clock": {
+				"description": "clock icon",
+				"default": {
+					"fontPath": "dist/glicons.woff2",
+					"fontCharacter": "\\f11d"
+				}
 			}
 		},
 		"menus": {

package.json

@@ -349,18 +349,33 @@ export function GraphWrapper({
 			<section className="graph-app__banners">
 				{showPreview && (
 					<div className="alert">
-						<span className="alert__icon codicon codicon-search"></span>
+						<span className="alert__icon codicon codicon-eye"></span>
 						<div className="alert__content">
-							<p className="alert__title">Preview Feature</p>
+							<p className="alert__title">GitLens+ Feature Preview</p>
 							<p className="alert__message">
-								The Commit Graph is a ✨ GitLens+ feature currently in preview. It is freely available
-								for local and public repos, while a paid account is required for use on private repos.
-								We welcome your feedback in our{' '}
-								<a href="https://github.com/gitkraken/vscode-gitlens/discussions/2158">
-									Commit Graph discussion on GitHub
-								</a>
-								.
+								The Commit Graph is freely available for local and public repos, while private repos
+								require a paid plan. While this preview isn't yet fully featured, we are quickly working
+								on the next release, when it will exit preview.
 							</p>
+							<p className="alert__accent">
+								<span className="glicon glicon-clock alert__accent-icon" /> GitLens+ introductory
+								pricing will end with the next release (late Sept, early Oct).
+							</p>
+							<p className="alert__accent">
+								<span className="codicon codicon-feedback alert__accent-icon" /> Join the discussions on
+								GitHub! We'd love to hear from you.
+							</p>
+						</div>
+						<div className="alert__actions">
+							<a className="alert-action" href="command:gitlens.plus.purchase">
+								Get GitLens+
+							</a>
+							<a
+								className="alert-action"
+								href="https://github.com/gitkraken/vscode-gitlens/discussions/2158"
+							>
+								Give Feedback
+							</a>
 						</div>
 						<button className="alert__dismiss" type="button" onClick={() => handleDismissPreview()}>
 							<span className="codicon codicon-chrome-close"></span>

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

@@ -1,5 +1,6 @@
 @import '../../shared/base';
 @import '../../shared/codicons';
+@import '../../shared/glicons';
 @import '../../../../../node_modules/@gitkraken/gitkraken-components/dist/styles.css';
 
 body {
@@ -158,32 +159,48 @@ a {
 	color: var(--alert-foreground);
 
 	&__icon {
+		&,
+		&[class*=codicon-] {
+			font-size: 2rem;
+		}
 	}
 
 	&__content {
 		flex: 1;
-		padding-top: 0.24rem;
-		> :last-child {
+		padding-top: 0.1rem;
+		> *:not(:first-child) {
+			margin-top: 0.75rem;
+		}
+		> * {
 			margin-bottom: 0;
 		}
 	}
 	&__title {
 		font-size: 1.3rem;
 		font-weight: 700;
-		margin: 0;
 		text-transform: uppercase;
+		margin-top: 0;
 	}
 	&__message {
 		font-size: 1.2rem;
-		margin: 0;
 	}
 
-	&__title + &__message {
-		margin-top: 0.25rem;
+	&__accent {
+		&-icon {
+			margin-right: 0.2rem;
+			line-height: 1.4rem;
+			vertical-align: bottom;
+		}
+	}
+	&__accent + &__accent {
+		margin-top: 0.2rem;
 	}
 
 	&__actions {
 		align-self: center;
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
 	}
 
 	&__dismiss {

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

@@ -1,7 +1,7 @@
 @font-face {
 	font-family: 'glicons';
 	font-display: block;
-	src: url("./glicons.woff2?4e20ad02a9897de1654835070707d360") format("woff2");
+	src: url("./glicons.woff2?2e51fe40df2abdf6a27fbae6c29587b1") format("woff2");
 }
 
 .glicon {
@@ -142,3 +142,6 @@
 .glicon-pinned-filled:before {
 	content: '\f11c';
 }
+.glicon-clock:before {
+	content: '\f11d';
+}