Move dark mode button to tip level settings instead of hiding it in the settings popover.

Author: markrickert

src/components/common/DarkModeButton.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import { Button as AntdButton, Tooltip } from 'antd'
+import styled from '@emotion/styled'
+
+const Button = styled(AntdButton)`
+  width: 32px;
+  padding: 0;
+`
+
+const DarkModeButton = ({ isDarkMode, ...props }) => {
+  return (
+    <Tooltip placement="bottomLeft" title="Toggle Light/Dark Mode">
+      <Button {...props}>{isDarkMode ? '🌙' : '☀️'}</Button>
+    </Tooltip>
+  )
+}
+
+export { DarkModeButton }

src/components/common/Settings.js

@@ -31,8 +31,6 @@ const Settings = ({
   packageName,
   language,
   onChangePackageNameAndLanguage,
-  isDarkMode,
-  toggleDarkMode,
 }) => {
   const [popoverVisibility, setVisibility] = useState(false)
   const [newPackageName, setNewPackageName] = useState(packageName)
@@ -104,10 +102,6 @@ const Settings = ({
               </PackagesGroupContainer>
             </Radio.Group>
           </PlatformsContainer>
-          <h5>Theme:</h5>
-          <Button onClick={toggleDarkMode}>
-            {isDarkMode ? 'Dark' : 'Light'}
-          </Button>
         </>
       }
       trigger="click"

src/components/pages/Home.js

@@ -18,6 +18,7 @@ import {
   PACKAGE_NAMES,
 } from '../../constants'
 import { TroubleshootingGuidesButton } from '../common/TroubleshootingGuidesButton'
+import { DarkModeButton } from '../common/DarkModeButton'
 import { updateURL } from '../../utils/update-url'
 import { deviceSizes } from '../../utils/device-sizes'
 import { lightTheme, darkTheme } from '../../theme'
@@ -243,8 +244,10 @@ const Home = () => {
                     handlePackageNameAndLanguageChange
                   }
                   language={language}
+                />
+                <DarkModeButton
                   isDarkMode={isDarkMode}
-                  toggleDarkMode={toggleDarkMode}
+                  onClick={toggleDarkMode}
                 />
               </SettingsContainer>
             </HeaderContainer>