Changes signout/manage buttons

src/webviews/apps/plus/account/account.ts

@@ -64,11 +64,7 @@ export class AccountApp extends App {
 	}
 
 	private getDaysRemaining() {
-		if (
-			![SubscriptionState.FreeInPreviewTrial, SubscriptionState.FreePlusInTrial].includes(
-				this.state.subscription.state,
-			)
-		) {
+		if (this.state.subscription.state !== SubscriptionState.FreePlusInTrial) {
 			return 0;
 		}
 

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

@@ -26,7 +26,7 @@ export class AccountContent extends LitElement {
 				position: relative;
 				display: grid;
 				gap: 0 0.8rem;
-				grid-template-columns: 3.4rem auto;
+				grid-template-columns: 3.4rem auto min-content;
 				grid-auto-flow: column;
 				margin-bottom: 1.3rem;
 			}
@@ -56,6 +56,10 @@ export class AccountContent extends LitElement {
 				color: var(--color-foreground--65);
 			}
 
+			.account__signout {
+				grid-row: 1 / span 2;
+			}
+
 			.repo-access {
 				font-size: 1.1em;
 				margin-right: 0.2rem;
@@ -132,13 +136,12 @@ export class AccountContent extends LitElement {
 				</div>
 				<p class="account__title">${this.name}</p>
 				<p class="account__access">${this.planName}${this.daysLeft}</p>
+				<div class="account__signout">
+					<gk-button appearance="toolbar" href="command:gitlens.plus.logout"
+						><code-icon icon="sign-out" title="Sign Out" aria-label="Sign Out"></code-icon
+					></gk-button>
+				</div>
 			</div>
-			<button-container>
-				<gk-button appearance="secondary" full href="command:gitlens.plus.manage">Manage Account</gk-button>
-				<gk-button appearance="secondary" href="command:gitlens.plus.logout"
-					><code-icon icon="sign-out" title="Sign Out" aria-label="Sign Out"></code-icon
-				></gk-button>
-			</button-container>
 		`;
 	}
 
@@ -203,6 +206,11 @@ export class AccountContent extends LitElement {
 
 			case SubscriptionState.Paid:
 				return html`
+					<button-container>
+						<gk-button appearance="secondary" full href="command:gitlens.plus.manage"
+							>Manage Account</gk-button
+						>
+					</button-container>
 					<p>
 						You have access to ✨ features on privately hosted repos and ☁️ features based on your
 						subscription tier.