Uses promo image in other places and shrinks gap

Author: axosoft-ramint

src/webviews/apps/home/home.ts

@@ -18,7 +18,7 @@ import '../shared/components/button';
 import '../shared/components/code-icon';
 import '../shared/components/feature-badge';
 import '../shared/components/overlays/tooltip';
-import './svg-devExDays';
+import '../shared/components/svg-devExDays';
 
 export class HomeApp extends App<State> {
 	constructor() {

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

@@ -16,6 +16,7 @@ import { elementBase, linkBase } from '../../../shared/components/styles/lit/bas
 import '../../../shared/components/button';
 import '../../../shared/components/button-container';
 import '../../../shared/components/code-icon';
+import '../../../shared/components/svg-devExDays';
 
 @customElement('account-content')
 export class AccountContent extends LitElement {
@@ -121,12 +122,12 @@ export class AccountContent extends LitElement {
 			}
 
 			.special {
-				font-size: smaller;
 				margin-top: 0.8rem;
 				text-align: center;
 			}
 
 			.special-dim {
+				font-size: smaller;
 				opacity: 0.6;
 			}
 		`,
@@ -303,6 +304,7 @@ export class AccountContent extends LitElement {
 					</button-container>
 					${promo?.description
 						? html`<p class="special ${promo.key === 'pro50' ? 'special-dim' : ''}">
+								${promo.key === 'devex-days' ? html`<gl-devex-days-svg></gl-devex-days-svg>` : nothing}
 								${promo.descriptionIntro ?? 'Special'}: <b>${promo.description}</b><br />
 						  </p>`
 						: nothing}
@@ -317,7 +319,8 @@ export class AccountContent extends LitElement {
 						<gl-button full href="command:gitlens.plus.upgrade">Upgrade to Pro</gl-button>
 					</button-container>
 					${promo?.description
-						? html`<p class="${promo.key === 'pro50' ? 'special dim' : 'special dim'}">
+						? html`<p class="special ${promo.key === 'pro50' ? 'special-dim' : ''}">
+								${promo.key === 'devex-days' ? html`<gl-devex-days-svg></gl-devex-days-svg>` : nothing}
 								${promo.descriptionIntro ?? 'Special'}: <b>${promo.description}</b><br />
 						  </p>`
 						: nothing}

src/webviews/apps/plus/shared/components/feature-gate-plus-state.ts

@@ -7,6 +7,7 @@ import { SubscriptionState } from '../../../../../plus/gk/account/subscription';
 import type { GlButton } from '../../../shared/components/button';
 import { linkStyles } from './vscode.css';
 import '../../../shared/components/button';
+import '../../../shared/components/svg-devExDays';
 
 declare global {
 	interface HTMLElementTagNameMap {
@@ -62,11 +63,11 @@ export class GlFeatureGatePlusState extends LitElement {
 			}
 
 			.special {
-				font-size: smaller;
 				text-align: center;
 			}
 
 			:host([appearance='welcome']) .special-dim {
+				font-size: smaller;
 				opacity: 0.6;
 			}
 		`,
@@ -171,6 +172,7 @@ export class GlFeatureGatePlusState extends LitElement {
 					</p>
 					${promo?.description
 						? html`<p class="special ${promo.key === 'pro50' ? 'special-dim' : ''}">
+								${promo.key === 'devex-days' ? html`<gl-devex-days-svg></gl-devex-days-svg>` : nothing}
 								${promo.descriptionIntro ?? 'Special'}: <b>${promo.description}</b><br />
 						  </p>`
 						: nothing}`;

src/webviews/apps/shared/components/feature-badge.ts

@@ -19,6 +19,7 @@ import { focusOutline } from './styles/lit/a11y.css';
 import { elementBase, linkBase } from './styles/lit/base.css';
 import './overlays/popover';
 import './overlays/tooltip';
+import './svg-devExDays';
 
 declare global {
 	interface HTMLElementTagNameMap {
@@ -121,12 +122,12 @@ export class GlFeatureBadge extends LitElement {
 			}
 
 			.popup-content .actions .special {
-				font-size: smaller;
 				margin-top: 0.8rem;
 				text-align: center;
 			}
 
 			.popup-content .actions .special-dim {
+				font-size: smaller;
 				opacity: 0.6;
 			}
 
@@ -348,6 +349,7 @@ export class GlFeatureBadge extends LitElement {
 			>
 			${promo?.description
 				? html`<p class="special ${promo.key === 'pro50' ? 'special-dim' : ''}">
+						${promo.key === 'devex-days' ? html`<gl-devex-days-svg></gl-devex-days-svg>` : nothing}
 						${promo.descriptionIntro ?? 'Special'}: <b>${promo.description}</b><br />
 				  </p>`
 				: nothing}

src/webviews/apps/home/svg-devExDays.ts renamed to src/webviews/apps/shared/components/svg-devExDays.ts

@@ -9,7 +9,7 @@ export class DevexDaysSvg extends LitElement {
 				max-width: 8rem;
 				height: auto;
 				vertical-align: text-bottom;
-				margin-inline-end: 0.4rem;
+				margin-inline-end: 0.2rem;
 			}
 		`,
 	];