Skip to content

Commit 46701ab

Browse files
d13d13
committed
Updates home style usage
1 parent 8ba9875 commit 46701ab

File tree

6 files changed

+41
-79
lines changed

6 files changed

+41
-79
lines changed

‎src/webviews/apps/home/components/feature-nav.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@ import type { State } from '../../../home/protocol';
66
import { GlElement } from '../../shared/components/element';
77
import { linkBase } from '../../shared/components/styles/lit/base.css';
88
import { stateContext } from '../context';
9-
import { navListStyles } from '../home.css';
9+
import { homeBaseStyles, navListStyles } from '../home.css';
1010

1111
@customElement('gl-feature-nav')
1212
export class GlFeatureNav extends GlElement {
13-
static override styles = [linkBase, navListStyles, css``];
13+
static override styles = [linkBase, homeBaseStyles, navListStyles, css``];
1414

1515
@property({ type: Object })
1616
private badgeSource = { source: 'home', detail: 'badge' };

‎src/webviews/apps/home/components/home-nav.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { getApplicablePromo } from '../../../../plus/gk/account/promos';
55
import type { State } from '../../../home/protocol';
66
import { linkBase } from '../../shared/components/styles/lit/base.css';
77
import { stateContext } from '../context';
8-
import { inlineNavStyles } from '../home.css';
8+
import { homeBaseStyles, inlineNavStyles } from '../home.css';
99
import '../../shared/components/code-icon';
1010
import '../../shared/components/overlays/tooltip';
1111
import '../../shared/components/promo';
@@ -14,6 +14,7 @@ import '../../shared/components/promo';
1414
export class GlHomeNav extends LitElement {
1515
static override styles = [
1616
linkBase,
17+
homeBaseStyles,
1718
inlineNavStyles,
1819
css`
1920
:host {

‎src/webviews/apps/home/components/onboarding.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,14 @@ import { CollapseSectionCommand } from '../../../home/protocol';
66
import { ipcContext } from '../../shared/context';
77
import type { HostIpc } from '../../shared/ipc';
88
import { stateContext } from '../context';
9-
import { alertStyles, buttonStyles } from '../home.css';
9+
import { alertStyles, buttonStyles, homeBaseStyles } from '../home.css';
1010
import '../../shared/components/button';
1111
import '../../shared/components/code-icon';
1212
import '../../shared/components/overlays/tooltip';
1313

1414
@customElement('gl-onboarding')
1515
export class GlOnboarding extends LitElement {
16-
static override styles = [alertStyles, buttonStyles];
16+
static override styles = [alertStyles, homeBaseStyles, buttonStyles];
1717

1818
@consume<State>({ context: stateContext, subscribe: true })
1919
@state()

‎src/webviews/apps/home/components/repo-alerts.ts

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,35 @@ import type { State } from '../../../home/protocol';
66
import { GlElement } from '../../shared/components/element';
77
import { linkBase } from '../../shared/components/styles/lit/base.css';
88
import { stateContext } from '../context';
9-
import { alertStyles } from '../home.css';
9+
import { alertStyles, homeBaseStyles } from '../home.css';
1010
import '../../shared/components/button';
1111

1212
@customElement('gl-repo-alerts')
1313
export class GlRepoAlerts extends GlElement {
1414
static override styles = [
1515
linkBase,
16+
homeBaseStyles,
1617
alertStyles,
1718
css`
1819
.alert {
1920
margin-bottom: 0;
2021
}
22+
23+
.centered {
24+
text-align: center;
25+
}
26+
27+
.one-line {
28+
white-space: nowrap;
29+
}
30+
31+
gl-button.is-basic {
32+
max-width: 300px;
33+
width: 100%;
34+
}
35+
gl-button.is-basic + gl-button.is-basic {
36+
margin-top: 1rem;
37+
}
2138
`,
2239
];
2340

‎src/webviews/apps/home/home.css.ts

Lines changed: 14 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
import { css } from 'lit';
2-
import { srOnly } from '../shared/components/styles/lit/a11y.css';
3-
import { linkBase, scrollableBase } from '../shared/components/styles/lit/base.css';
42

5-
export const homeStyles = css`
3+
export const homeBaseStyles = css`
64
* {
75
box-sizing: border-box;
86
}
@@ -15,18 +13,12 @@ export const homeStyles = css`
1513
display: none !important;
1614
}
1715
18-
${scrollableBase}
19-
2016
/* roll into shared focus style */
2117
:focus-visible {
2218
outline: 1px solid var(--vscode-focusBorder);
2319
outline-offset: -1px;
2420
}
2521
26-
${srOnly}
27-
28-
${linkBase}
29-
3022
b {
3123
font-weight: 600;
3224
}
@@ -39,16 +31,9 @@ export const homeStyles = css`
3931
margin-top: 0;
4032
padding-left: 1.2em;
4133
}
34+
`;
4235

43-
.promo-banner {
44-
text-align: center;
45-
margin-bottom: 1rem;
46-
}
47-
.promo-banner--eyebrow {
48-
color: var(--color-foreground--50);
49-
margin-bottom: 0.2rem;
50-
}
51-
36+
export const homeStyles = css`
5237
.home {
5338
padding: 0;
5439
height: 100vh;
@@ -79,44 +64,6 @@ export const homeStyles = css`
7964
flex: none;
8065
}
8166
82-
.centered {
83-
text-align: center;
84-
}
85-
86-
.one-line {
87-
white-space: nowrap;
88-
}
89-
90-
.foreground {
91-
color: var(--color-view-foreground);
92-
}
93-
94-
gl-button.is-basic {
95-
max-width: 300px;
96-
width: 100%;
97-
}
98-
gl-button.is-basic + gl-button.is-basic {
99-
margin-top: 1rem;
100-
}
101-
102-
.mb-0 {
103-
margin-bottom: 0;
104-
}
105-
106-
@media (max-width: 280px) {
107-
.not-small {
108-
display: none;
109-
}
110-
}
111-
@media (min-width: 281px) {
112-
.only-small {
113-
display: none;
114-
}
115-
}
116-
.t-subtle {
117-
color: var(--color-foreground--50);
118-
}
119-
12067
gl-home-account-content {
12168
margin-bottom: 0;
12269
}
@@ -148,10 +95,10 @@ export const inlineNavStyles = css`
14895
color: inherit;
14996
text-decoration: none;
15097
}
151-
.vscode-dark .inline-nav__link:hover {
98+
:host-context(.vscode-dark) .inline-nav__link:hover {
15299
background-color: var(--color-background--lighten-10);
153100
}
154-
.vscode-light .inline-nav__link:hover {
101+
:host-context(.vscode-light) .inline-nav__link:hover {
155102
background-color: var(--color-background--darken-10);
156103
}
157104
@media (max-width: 370px) {
@@ -172,6 +119,15 @@ export const inlineNavStyles = css`
172119
margin-left: 0.2rem;
173120
}
174121
}
122+
123+
.promo-banner {
124+
text-align: center;
125+
margin-bottom: 1rem;
126+
}
127+
.promo-banner--eyebrow {
128+
color: var(--color-foreground--50);
129+
margin-bottom: 0.2rem;
130+
}
175131
`;
176132

177133
export const buttonStyles = css`
@@ -270,14 +226,6 @@ export const alertStyles = css`
270226
background-color: var(--color-alert-errorBackground);
271227
border-left-color: var(--color-alert-errorBorder);
272228
}
273-
274-
gl-button.is-basic {
275-
max-width: 300px;
276-
width: 100%;
277-
}
278-
gl-button.is-basic + gl-button.is-basic {
279-
margin-top: 1rem;
280-
}
281229
`;
282230

283231
export const navListStyles = css`

‎src/webviews/apps/home/home.ts

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,10 @@ import { html } from 'lit';
44
import { customElement } from 'lit/decorators.js';
55
import type { State } from '../../home/protocol';
66
import { GlApp } from '../shared/app';
7+
import { scrollableBase } from '../shared/components/styles/lit/base.css';
78
import type { HostIpc } from '../shared/ipc';
8-
import { homeStyles } from './home.css';
9+
import { homeBaseStyles, homeStyles } from './home.css';
910
import { HomeStateProvider } from './stateProvider';
10-
import '../shared/components/button';
11-
import '../shared/components/code-icon';
12-
import '../shared/components/feature-badge';
13-
import '../shared/components/overlays/tooltip';
14-
import '../shared/components/promo';
1511
import '../plus/shared/components/home-account-content';
1612
import './components/feature-nav';
1713
import './components/home-nav';
@@ -20,7 +16,7 @@ import './components/onboarding';
2016

2117
@customElement('gl-home-app')
2218
export class GlHomeApp extends GlApp<State> {
23-
static override styles = [homeStyles];
19+
static override styles = [homeBaseStyles, scrollableBase, homeStyles];
2420

2521
private badgeSource = { source: 'home', detail: 'badge' };
2622

0 commit comments

Comments
 (0)