Update get started theme picker images and styles (microsoft#166651)

Update theme picker images and styles

Author: daviddossett

src/vs/workbench/contrib/welcomeGettingStarted/browser/gettingStartedDetailsRenderer.ts

@@ -60,10 +60,15 @@ export class GettingStartedDetailsRenderer {
 						padding: 0;
 						height: inherit;
 					}
+					.theme-picker-row {
+						display: flex;
+						gap: 32px;
+						justify-content: center;
+					}
 					checklist {
 						display: flex;
-						flex-wrap: wrap;
-						justify-content: space-around;
+						gap: 32px;
+						flex-direction: column;
 					}
 					checkbox {
 						display: flex;
@@ -73,14 +78,19 @@ export class GettingStartedDetailsRenderer {
 						cursor: pointer;
 					}
 					checkbox > img {
-						margin-bottom: 4px;
+						margin-bottom: 8px !important;
 					}
 					checkbox.checked > img {
 						box-sizing: border-box;
 					}
 					checkbox.checked > img {
 						outline: 2px solid var(--vscode-focusBorder);
-						outline-offset: 2px;
+						outline-offset: 4px;
+						border-radius: 4px;
+					}
+					.theme-picker-link {
+						margin-top: 16px;
+						color: var(--vscode-textLink-foreground);
 					}
 					blockquote > p:first-child {
 						margin-top: 0;
@@ -92,6 +102,9 @@ export class GettingStartedDetailsRenderer {
 					vertically-centered {
 						padding-top: 5px;
 						padding-bottom: 5px;
+						display: flex;
+						justify-content: center;
+						flex-direction: column;
 					}
 					html {
 						height: 100%;

src/vs/workbench/contrib/welcomeGettingStarted/common/media/dark-hc.png

@@ -8,24 +8,28 @@ import { localize } from 'vs/nls';
 
 export default () => `
 <checklist>
-	<checkbox when-checked="setTheme:Default Light+" checked-on="config.workbench.colorTheme == 'Default Light+'">
-		<img width="150" src="./light.png"/>
-		${escape(localize('light', "Light"))}
-	</checkbox>
-	<checkbox when-checked="setTheme:Default Dark+" checked-on="config.workbench.colorTheme == 'Default Dark+'">
-		<img width="150" src="./dark.png"/>
-		${escape(localize('dark', "Dark"))}
-	</checkbox>
-	<checkbox when-checked="setTheme:Default High Contrast" checked-on="config.workbench.colorTheme == 'Default High Contrast'">
-		<img width="150" src="./dark-hc.png"/>
-		${escape(localize('HighContrast', "Dark High Contrast"))}
-	</checkbox>
-	<checkbox when-checked="setTheme:Default High Contrast Light" checked-on="config.workbench.colorTheme == 'Default High Contrast Light'">
-		<img width="150" src="./light-hc.png"/>
-		${escape(localize('HighContrastLight', "Light High Contrast"))}
-	</checkbox>
+	<div class="theme-picker-row">
+		<checkbox when-checked="setTheme:Default Dark+" checked-on="config.workbench.colorTheme == 'Default Dark+'">
+			<img width="200" src="./dark.png"/>
+			${escape(localize('dark', "Dark"))}
+		</checkbox>
+		<checkbox when-checked="setTheme:Default Light+" checked-on="config.workbench.colorTheme == 'Default Light+'">
+			<img width="200" src="./light.png"/>
+			${escape(localize('light', "Light"))}
+		</checkbox>
+	</div>
+	<div class="theme-picker-row">
+		<checkbox when-checked="setTheme:Default High Contrast" checked-on="config.workbench.colorTheme == 'Default High Contrast'">
+			<img width="200" src="./dark-hc.png"/>
+			${escape(localize('HighContrast', "Dark High Contrast"))}
+		</checkbox>
+		<checkbox when-checked="setTheme:Default High Contrast Light" checked-on="config.workbench.colorTheme == 'Default High Contrast Light'">
+			<img width="200" src="./light-hc.png"/>
+			${escape(localize('HighContrastLight', "Light High Contrast"))}
+		</checkbox>
+	</div>
 </checklist>
-<checkbox when-checked="command:workbench.action.selectTheme" checked-on="false">
+<checkbox class="theme-picker-link" when-checked="command:workbench.action.selectTheme" checked-on="false">
 	${escape(localize('seeMore', "See More Themes..."))}
 </checkbox>
 `;