Skip to content

Commit 5271268

Browse files
committed
feat(ui): Header - add theme switcher
1 parent 7cfd6c6 commit 5271268

File tree

3 files changed

+50
-38
lines changed

3 files changed

+50
-38
lines changed

packages/ui/src/app/header/header.module.css

Lines changed: 1 addition & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -6,23 +6,7 @@
66
flex: 0 0 auto;
77
}
88

9-
.toolsGitHub {
10-
display: block;
11-
border-radius: 50%;
12-
opacity: 0.8;
13-
color: var(--color-text-intense);
14-
transition: var(--transition-out);
15-
}
16-
17-
.toolsGitHub:hover,
18-
.toolsGitHub:focus,
19-
.toolsGitHub:active {
20-
opacity: 1;
21-
transition: var(--transition-in);
22-
}
23-
24-
.toolsGitHubIcon {
25-
display: block;
9+
.toolsButton {
2610
}
2711

2812
@media (min-width: 1140px) {

packages/ui/src/app/header/header.tsx

Lines changed: 47 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -3,32 +3,60 @@ import cx from 'classnames';
33

44
import config from '../../config.json';
55
import I18N from '../../i18n';
6+
import { useTheme } from '../../context/theme';
67
import { Container } from '../../ui/container';
78
import { Icon } from '../../ui/icon';
89
import { FlexStack } from '../../layout/flex-stack';
910
import { JobsHeader } from '../../components/jobs-header';
1011
import css from './header.module.css';
12+
import { Button } from '../../ui/button';
1113

1214
interface HeaderProps {
1315
jobs: React.ComponentProps<typeof JobsHeader>['jobs'];
1416
}
1517

16-
export const Header = ({ className = '', jobs }: HeaderProps & React.ComponentProps<'header'>) => (
17-
<Container as="header" className={cx(css.root, className)}>
18-
<FlexStack space="small" alignItems="center">
19-
<JobsHeader className={css.jobs} jobs={jobs} />
20-
<div className={css.tools}>
21-
<a
22-
href={config.gitHubUrl}
23-
target="_blank"
24-
rel="noopener noreferrer"
25-
title={I18N.GITHUB_LINK_TITLE}
26-
aria-label={I18N.GITHUB_LINK_TITLE}
27-
className={css.toolsGitHub}
28-
>
29-
<Icon glyph={Icon.ICONS.GITHUB} size="large" className={css.toolsGitHubIcon} />
30-
</a>
31-
</div>
32-
</FlexStack>
33-
</Container>
34-
);
18+
export const Header = ({ className = '', jobs }: HeaderProps & React.ComponentProps<'header'>) => {
19+
const theme = useTheme();
20+
21+
return (
22+
<Container as="header" className={cx(css.root, className)}>
23+
<FlexStack space="small" alignItems="center">
24+
<JobsHeader className={css.jobs} jobs={jobs} />
25+
<FlexStack space="xxxsmall" alignItems="center" className={css.tools}>
26+
{theme.name === 'dark' ? (
27+
<Button
28+
size="small"
29+
outline
30+
onClick={() => theme.update('light')}
31+
className={css.toolsButton}
32+
>
33+
<Icon glyph={Icon.ICONS.MOON} />
34+
</Button>
35+
) : (
36+
<Button
37+
size="small"
38+
outline
39+
onClick={() => theme.update('dark')}
40+
className={css.toolsButton}
41+
>
42+
<Icon glyph={Icon.ICONS.SUN} />
43+
</Button>
44+
)}
45+
<Button
46+
size="small"
47+
outline
48+
as="a"
49+
href={config.gitHubUrl}
50+
target="_blank"
51+
rel="noopener noreferrer"
52+
title={I18N.GITHUB_LINK_TITLE}
53+
aria-label={I18N.GITHUB_LINK_TITLE}
54+
className={css.toolsButton}
55+
>
56+
<Icon glyph={Icon.ICONS.GITHUB} />
57+
</Button>
58+
</FlexStack>
59+
</FlexStack>
60+
</Container>
61+
);
62+
};

packages/ui/src/components/metrics-display-selector/metrics-display-selector.module.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
}
55

66
.dropdownGroupButton {
7-
padding: calc(var(--space-xxsmall) - 1px);
7+
padding: calc(var(--space-2x) - 1px);
88
}
99

1010
.dropdownGroupAnchor {
@@ -22,7 +22,7 @@
2222
}
2323

2424
.dropdownGroup:hover {
25-
border-color: var(--color-outline-dark);
25+
border-color: var(--color-outline-intense);
2626
transition: var(--transition-in);
2727
}
2828

0 commit comments

Comments
 (0)