Fixes home integration banner

Author: d13

src/webviews/apps/home/components/integration-banner.ts

@@ -1,8 +1,9 @@
 import { consume } from '@lit/context';
 import { html, LitElement, nothing } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
+import { customElement, query, state } from 'lit/decorators.js';
 import type { State } from '../../../home/protocol';
 import { CollapseSectionCommand } from '../../../home/protocol';
+import type { GlButton } from '../../shared/components/button';
 import { ipcContext } from '../../shared/context';
 import type { HostIpc } from '../../shared/ipc';
 import { stateContext } from '../context';
@@ -28,10 +29,15 @@ export class GlIntegrationBanner extends LitElement {
 	private _ipc!: HostIpc;
 
 	@state()
-	closed = false;
+	private closed = false;
+
+	@query('gl-button')
+	private _button!: GlButton;
 
 	override render() {
-		if (closed || this._state.hasAnyIntegrationConnected || this._state.integrationBannerCollapsed) return nothing;
+		if (this.closed || this._state.hasAnyIntegrationConnected || this._state.integrationBannerCollapsed) {
+			return nothing;
+		}
 
 		return html`
 			<gl-card>
@@ -63,6 +69,10 @@ export class GlIntegrationBanner extends LitElement {
 			collapsed: true,
 		});
 	}
+
+	override focus() {
+		this._button.focus();
+	}
 }
 
 declare global {

src/webviews/apps/home/home.scss

@@ -5,11 +5,13 @@
 .vscode-high-contrast,
 .vscode-dark {
 	--popover-bg: var(--color-background--lighten-15);
+	--gl-card-background: color-mix(in lab, var(--vscode-sideBar-background) 100%, #fff 6%);
 }
 
 .vscode-high-contrast-light,
 .vscode-light {
 	--popover-bg: var(--color-background--darken-15);
+	--gl-card-background: color-mix(in lab, var(--vscode-sideBar-background) 100%, #000 4%);
 }
 
 * {

src/webviews/apps/home/home.ts

@@ -73,10 +73,10 @@ export class GlHomeApp extends GlApp<State> {
 				<gl-repo-alerts class="home__header"></gl-repo-alerts>
 				<main class="home__main scrollable" id="main">
 					<gl-onboarding></gl-onboarding>
-					<gl-integration-banner></gl-integration-banner>
 					${when(
 						this.state?.previewEnabled === true,
 						() => html`
+							<gl-integration-banner></gl-integration-banner>
 							<gl-active-work></gl-active-work>
 							<gl-launchpad></gl-launchpad>
 							<gl-overview></gl-overview>

src/webviews/apps/shared/components/card/card.css.ts

@@ -8,7 +8,7 @@ export const cardStyles = css`
 		padding: 0.8rem 1.2rem;
 		border-radius: 0.4rem;
 		border-inline-start: 0.3rem solid transparent;
-		background-color: var(--gl-card-background, color-mix(in lab, var(--vscode-sideBar-background) 100%, #fff 10%));
+		background-color: var(--gl-card-background, color-mix(in lab, var(--vscode-sideBar-background) 100%, #fff 5%));
 		margin-block-end: 0.6rem;
 		position: relative;
 	}