feat(ui): Header - add theme switcher

Author: vio

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

@@ -6,23 +6,7 @@
   flex: 0 0 auto;
 }
 
-.toolsGitHub {
-  display: block;
-  border-radius: 50%;
-  opacity: 0.8;
-  color: var(--color-text-intense);
-  transition: var(--transition-out);
-}
-
-.toolsGitHub:hover,
-.toolsGitHub:focus,
-.toolsGitHub:active {
-  opacity: 1;
-  transition: var(--transition-in);
-}
-
-.toolsGitHubIcon {
-  display: block;
+.toolsButton {
 }
 
 @media (min-width: 1140px) {

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

@@ -3,32 +3,60 @@ import cx from 'classnames';
 
 import config from '../../config.json';
 import I18N from '../../i18n';
+import { useTheme } from '../../context/theme';
 import { Container } from '../../ui/container';
 import { Icon } from '../../ui/icon';
 import { FlexStack } from '../../layout/flex-stack';
 import { JobsHeader } from '../../components/jobs-header';
 import css from './header.module.css';
+import { Button } from '../../ui/button';
 
 interface HeaderProps {
   jobs: React.ComponentProps<typeof JobsHeader>['jobs'];
 }
 
-export const Header = ({ className = '', jobs }: HeaderProps & React.ComponentProps<'header'>) => (
-  <Container as="header" className={cx(css.root, className)}>
-    <FlexStack space="small" alignItems="center">
-      <JobsHeader className={css.jobs} jobs={jobs} />
-      <div className={css.tools}>
-        <a
-          href={config.gitHubUrl}
-          target="_blank"
-          rel="noopener noreferrer"
-          title={I18N.GITHUB_LINK_TITLE}
-          aria-label={I18N.GITHUB_LINK_TITLE}
-          className={css.toolsGitHub}
-        >
-          <Icon glyph={Icon.ICONS.GITHUB} size="large" className={css.toolsGitHubIcon} />
-        </a>
-      </div>
-    </FlexStack>
-  </Container>
-);
+export const Header = ({ className = '', jobs }: HeaderProps & React.ComponentProps<'header'>) => {
+  const theme = useTheme();
+
+  return (
+    <Container as="header" className={cx(css.root, className)}>
+      <FlexStack space="small" alignItems="center">
+        <JobsHeader className={css.jobs} jobs={jobs} />
+        <FlexStack space="xxxsmall" alignItems="center" className={css.tools}>
+          {theme.name === 'dark' ? (
+            <Button
+              size="small"
+              outline
+              onClick={() => theme.update('light')}
+              className={css.toolsButton}
+            >
+              <Icon glyph={Icon.ICONS.MOON} />
+            </Button>
+          ) : (
+            <Button
+              size="small"
+              outline
+              onClick={() => theme.update('dark')}
+              className={css.toolsButton}
+            >
+              <Icon glyph={Icon.ICONS.SUN} />
+            </Button>
+          )}
+          <Button
+            size="small"
+            outline
+            as="a"
+            href={config.gitHubUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            title={I18N.GITHUB_LINK_TITLE}
+            aria-label={I18N.GITHUB_LINK_TITLE}
+            className={css.toolsButton}
+          >
+            <Icon glyph={Icon.ICONS.GITHUB} />
+          </Button>
+        </FlexStack>
+      </FlexStack>
+    </Container>
+  );
+};

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

@@ -4,7 +4,7 @@
 }
 
 .dropdownGroupButton {
-  padding: calc(var(--space-xxsmall) - 1px);
+  padding: calc(var(--space-2x) - 1px);
 }
 
 .dropdownGroupAnchor {
@@ -22,7 +22,7 @@
 }
 
 .dropdownGroup:hover {
-  border-color: var(--color-outline-dark);
+  border-color: var(--color-outline-intense);
   transition: var(--transition-in);
 }