move theme switch to header, simplify

src/components/atoms/Hamburger.module.scss

@@ -58,9 +58,7 @@
 }
 
 .hamburgerButton {
-  padding: 0.65rem 0.85rem;
+  padding: $spacer / 2;
-  text-align: center;
-  line-height: 1;
   vertical-align: middle;
   display: inline-block;
   margin: 0;

src/components/molecules/Search/SearchButton.module.scss

@@ -1,9 +1,7 @@
 @import 'variables';
 
 .searchButton {
-  padding: 0.65rem 0.85rem;
+  padding: $spacer / 2;
-  text-align: center;
-  line-height: 1;
   vertical-align: middle;
   display: inline-block;
   margin-right: $spacer / 4;

src/components/molecules/ThemeSwitch.module.scss

@@ -4,57 +4,36 @@
 .themeSwitch {
   position: relative;
   display: inline-block;
-  margin-bottom: $spacer * $line-height;
+  vertical-align: middle;
+  margin-right: $spacer / 4;
 
   svg {
     stroke: $brand-grey-light;
-    width: $font-size-base;
+    width: 24px;
-    height: $font-size-base;
+    height: 24px;
-    margin-top: -0.05rem;
+  }
 
-    &:last-child {
+  &:hover,
-      width: $font-size-base * 0.9;
+  &:focus {
-      height: $font-size-base * 0.9;
+    svg {
+      stroke: $brand-cyan;
     }
   }
-}
 
-.checkboxContainer {
+  &:active {
-  display: flex;
+    svg {
-  align-items: center;
+      stroke: darken($brand-cyan, 30%);
-}
+    }
-
-$knob-size: 8px;
-$knob-space: 1px;
-
-.checkboxFake {
-  display: block;
-  position: relative;
-  width: ($knob-size + ($knob-space * 2)) * 2;
-  height: $knob-size + ($knob-space * 4);
-  border: 1px solid $brand-grey-light;
-  border-radius: 15rem;
-  margin-left: $spacer / 3;
-  margin-right: $spacer / 3;
-
-  &::after {
-    content: '';
-    position: absolute;
-    top: $knob-space;
-    left: $knob-space;
-    width: $knob-size;
-    height: $knob-size;
-    background-color: $brand-grey-light;
-    border-radius: 15rem;
-    transition: transform 0.2s $easing;
-    transform: translate3d(0, 0, 0);
   }
 }
 
 .checkbox {
   position: relative;
   cursor: pointer;
+  padding: $spacer / 2;
+  display: block;
 
+  // hide visually
   [type='checkbox'],
   .label {
     width: 1px;
@@ -66,16 +45,4 @@ $knob-space: 1px;
     padding: 0;
     position: absolute;
   }
-
-  [type='checkbox'] {
-    &:checked {
-      + .checkboxContainer {
-        .checkboxFake {
-          &::after {
-            transform: translate3d(100%, 0, 0);
-          }
-        }
-      }
-    }
-  }
 }

src/components/molecules/ThemeSwitch.tsx

@@ -5,14 +5,6 @@ import styles from './ThemeSwitch.module.scss'
 import Icon from '../atoms/Icon'
 import { useSiteMetadata } from '../../hooks/use-site-metadata'
 
-const ThemeToggle = () => (
-  <span id="toggle" className={styles.checkboxContainer} aria-live="assertive">
-    <Icon name="Sun" />
-    <span className={styles.checkboxFake} />
-    <Icon name="Moon" />
-  </span>
-)
-
 const ThemeToggleInput = ({
   isDark,
   toggleDark
@@ -48,7 +40,7 @@ export default function ThemeSwitch() {
   return (
     <>
       <HeadMarkup themeColor={themeColor} />
-      <aside className={styles.themeSwitch}>
+      <aside className={styles.themeSwitch} title="Toggle Dark Mode">
         <label
           htmlFor="toggle"
           className={styles.checkbox}
@@ -61,7 +53,9 @@ export default function ThemeSwitch() {
             isDark={darkMode.value}
             toggleDark={darkMode.toggle}
           />
-          <ThemeToggle />
+          <div aria-live="assertive">
+            {darkMode.value ? <Icon name="Sun" /> : <Icon name="Moon" />}
+          </div>
         </label>
       </aside>
     </>

src/components/organisms/Footer.tsx

@@ -37,7 +37,6 @@ export default class Footer extends PureComponent {
     return (
       <footer role="contentinfo" className={styles.footer}>
         <Container>
-          <ThemeSwitch />
           <Vcard />
 
           <Copyright />

src/components/organisms/Header.tsx

@@ -3,6 +3,7 @@ import { Link } from 'gatsby'
 import Container from '../atoms/Container'
 import Search from '../molecules/Search'
 import Menu from '../molecules/Menu'
+import ThemeSwitch from '../molecules/ThemeSwitch'
 import { ReactComponent as Logo } from '../../images/logo.svg'
 
 import styles from './Header.module.scss'
@@ -20,6 +21,7 @@ export default class Header extends PureComponent {
             </h1>
 
             <nav role="navigation" className={styles.nav}>
+              <ThemeSwitch />
               <Search />
               <Menu />
             </nav>