Update header components. Update theme button.

components/settings/LanguageButton.js

@@ -46,8 +46,8 @@ export default function LanguageButton({ menuPosition = 'bottom', menuAlign = 'l
         )}
       </Head>
       <div ref={ref} className={styles.container}>
-        <Button icon={<Globe />} onClick={toggleMenu} size="small">
-          <div>{selectedLocale}</div>
+        <Button icon={<Globe />} onClick={toggleMenu} variant="light">
+          <div className={styles.text}>{selectedLocale}</div>
         </Button>
         {showMenu && (
           <Menu

components/settings/LanguageButton.module.css

@@ -7,3 +7,7 @@
 .menu {
   z-index: 100;
 }
+
+.text {
+  font-size: var(--font-size-small);
+}

components/settings/ThemeButton.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import Button from 'components/common/Button';
 import useTheme from 'hooks/useTheme';
+import ToggleOn from 'assets/toggle-on.svg';
+import ToggleOff from 'assets/toggle-off.svg';
 
 export default function ThemeButton() {
   const [theme, setTheme] = useTheme();
@@ -9,5 +11,12 @@ export default function ThemeButton() {
     setTheme(theme === 'light' ? 'dark' : 'light');
   }
 
-  return <Button onClick={handleClick}>{theme}</Button>;
+  return (
+    <Button
+      icon={theme === 'light' ? <ToggleOff /> : <ToggleOn />}
+      size="large"
+      variant="light"
+      onClick={handleClick}
+    />
+  );
 }

components/settings/ThemeButton.module.css

@@ -0,0 +1,43 @@
+.icon {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  line-height: 16px;
+}
+
+.sun {
+  height: 16px;
+  width: 16px;
+  border-radius: 100%;
+  background: var(--gray900);
+  z-index: 1;
+}
+
+.moon {
+  height: 16px;
+  width: 16px;
+  border-radius: 100%;
+  background: var(--gray900);
+}
+
+.moon:before {
+  content: '';
+  position: absolute;
+  height: 13px;
+  width: 13px;
+  left: -2px;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  border-radius: 100%;
+  background: var(--gray50);
+}
+
+.light .moon {
+  display: none;
+}
+
+.dark .sun {
+  display: none;
+}