Adds what's new to the Welcome

src/ui/scss/main.scss

@@ -150,6 +150,80 @@ ul {
     padding: 0;
 }
 
+.changelog {
+    border-radius: 1em;
+    margin: 2em 4em 2em 2em;
+
+    .vscode-light & {
+        background-color: var(--background-color--darken-05);
+        box-shadow: inset 0 0 6px 0px rgba(0, 0, 0, 0.05);
+    }
+
+    .vscode-dark & {
+        background-color: var(--background-color--lighten-15);
+        box-shadow: inset 0 0 6px 0px rgba(255, 255, 255, 0.075);
+    }
+}
+
+.changelog__badge {
+    background-color: #0366d6;
+    color: #e6e6e6;
+    display: inline-block;
+    font-size: 11px;
+    font-weight: 600;
+    border-radius: 3px;
+    padding: 2px 5px;
+    text-transform: uppercase;
+    text-align: center;
+    vertical-align: text-top;
+    margin-right: 1.25em;
+    width: 65px;
+}
+
+.changelog__badge--added {
+    background-color: #28a745;
+}
+
+.changelog__badge--changed,
+.changelog__badge--fixed {
+    background-color: #0366d6;
+}
+
+.changelog__hint {
+    color: var(--color--75);
+    font-weight: 200;
+    margin: 0 1em 1em 1em;
+}
+
+.changelog__list {
+    flex: 100% 0 1;
+    list-style-type: none;
+    margin: 1em;
+    font-size: 1.2em;
+    font-weight: 200;
+    line-height: 1.7;
+
+    & li {
+        margin-bottom: 0.5em;
+    }
+}
+
+.changelog__title {
+    flex: 100% 0 0;
+    text-align: center;
+}
+
+.changelog__version {
+    background-color: #914db3;
+    color: #f2f2f2;
+    padding: 2px 10px;
+    text-align: center;
+    vertical-align: bottom;
+    border-radius: 3px;
+    border-bottom: 2px solid #914db3;
+    margin: 0 0.25em;
+}
+
 .command {
     font-weight: 600;
     padding: 1px 3px;
@@ -193,6 +267,16 @@ ul {
     }
 }
 
+.header__link {
+    color: var(--color);
+    outline: none;
+
+    &:hover, &:active, &:focus {
+        color: var(--color);
+        outline: none;
+    }
+}
+
 .header__logo {
     display: flex;
     flex-wrap: nowrap;

src/ui/settings/index.html

@@ -10,13 +10,15 @@
     <div class="container">
         <div class="content">
             <header>
-                <div class="header__logo">
-                    <img class="image__logo" src="{{root}}/images/gitlens-icon.png" />
-                    <div>
-                        <h1>GitLens</h1>
-                        <p class="header__subtitle">Git supercharged</p>
+                <a class="header__link" title="Open the GitLens Welcome" href="command:gitlens.showWelcomePage">
+                    <div class="header__logo">
+                        <img class="image__logo" src="{{root}}/images/gitlens-icon.png" />
+                        <div>
+                            <h1>GitLens</h1>
+                            <p class="header__subtitle">Git supercharged</p>
+                        </div>
                     </div>
-                </div>
+                </a>
                 <p class="header__blurb">
                     GitLens
                     <b>supercharges</b> the Git capabilities built into Visual Studio Code. It helps you to
@@ -493,7 +495,6 @@
                                 <span>
                                     Use the
                                     <a class="command" title="Run command" href="command:gitlens.toggleLineBlame" class="command">GitLens: Toggle Line Blame Annotations</a> command to override this setting for the current window
-
                                 </span>
                             </p>
                         </div>
@@ -524,7 +525,7 @@
                                 <span class="label__hint hidden" data-visibility="keymap =chorded">
                                     Chorded shortcuts that start with
                                     <i class="shortcut-key">Ctrl+Shift+G</i> (
-                                    <i class="shortcut-key">⌥⌘G</i> on macOS). Better for non-English keyboard layouts
+                                    <i class="shortcut-key">&#x2325;&#x2318;G</i> on macOS). Better for non-English keyboard layouts
                                 </span>
                                 <span class="label__hint hidden" data-visibility="keymap =none">
                                     GitLens won't bind any keyboard shortcuts. Configure your own via the

src/ui/welcome/index.html

@@ -31,6 +31,18 @@
                 <p class="page-header__subtitle">Thank you for taking the time to try GitLens!</p>
             </div>
 
+            <section id="whats-new" class="changelog">
+                <h2 class="changelog__title">What's New in <span class="changelog__version">GitLens 8</span> &#x1F389;&#x1F388;</h2>
+                <ul class="changelog__list">
+                    <li><span class="changelog__badge changelog__badge--added">NEW</span>Brand new Welcome experience &mdash; you're looking at it</li>
+                    <li><span class="changelog__badge changelog__badge--added">NEW</span>Brand new WYSIWYG <a class="command" title="Open GitLens Settings" href="command:gitlens.showSettingsPage">GitLens Settings</a> editor &mdash; GitLens is easier than ever to customize to suit your needs</li>
+                    <li><span class="changelog__badge changelog__badge--changed">IMPROVED</span>Reworked settings &mdash; clearer, simpler settings</li>
+                </ul>
+                <p class="changelog__hint">
+                    See the <a title="Open Release Notes" href="https://github.com/eamodio/vscode-gitlens/blob/feature-settings/CHANGELOG.md">Release Notes</a> for the full set of changes
+                </p>
+            </section>
+
             <div class="section-groups">
                 <div class="section-group__content">
                     <div class="section-group-section">
@@ -59,9 +71,9 @@
                         </p>
                         <p class="mb-2">GitLens is powerful, feature rich, and highly customizable to meet your specific needs
                             &mdash; find code lens intrusive or the current line blame annotation distracting &mdash;
-                            no problem, it is quick and easy to turn them off or change how they behave via the built-in <a title="Open GitLens Settings" href="command:gitlens.showSettingsPage">GitLens Settings</a> editor,
+                            no problem, it is quick and easy to turn them off or change how they behave via the built-in <a class="command" title="Open GitLens Settings" href="command:gitlens.showSettingsPage">GitLens Settings</a> editor,
                              a WYSIWYG editor covering many of GitLens' powerful settings.
-                             While for more advanced customizations, refer to the <a class="command" title="Open the GitLens settings docs" href="https://github.com/eamodio/vscode-gitlens/tree/feature-settings#gitlens-settings">GitLens settings docs</a>
+                             While for more advanced customizations, refer to the <a title="Open the GitLens settings docs" href="https://github.com/eamodio/vscode-gitlens/tree/feature-settings#gitlens-settings">GitLens settings docs</a>
                              and edit your <a class="command" title="Open User Settings" href="command:workbench.action.openGlobalSettings">User Settings</a>.
                         </p>
                     </div>