Prettier light mode button

caprover · Oct 12, 2024 · ae940de · ae940de
1 parent 665347f
commit ae940de
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 12 deletions.
diff --git a/src/containers/PageRoot.tsx b/src/containers/PageRoot.tsx
@@ -6,6 +6,7 @@ import {
     FileTextOutlined,
     GiftTwoTone,
     GithubOutlined,
+    GlobalOutlined,
     LaptopOutlined,
     LogoutOutlined,
     SettingOutlined,
@@ -49,6 +50,7 @@ class PageRoot extends ApiComponent<
     {
         versionInfo: IVersionInfo | undefined
         collapsed: boolean
+        showLanguageSelector: boolean
     }
 > {
     private mainContainer: RefObject<HTMLDivElement>
@@ -59,6 +61,7 @@ class PageRoot extends ApiComponent<
         this.state = {
             versionInfo: undefined,
             collapsed: false,
+            showLanguageSelector: false,
         }
     }
 
@@ -248,7 +251,7 @@ class PageRoot extends ApiComponent<
                                     </span>
                                     <span
                                         style={{
-                                            marginInlineEnd: 50,
+                                            marginInlineEnd: 20,
                                         }}
                                     >
                                         <DarkModeSwitch />
@@ -258,7 +261,7 @@ class PageRoot extends ApiComponent<
                                             marginInlineEnd: 50,
                                         }}
                                     >
-                                        <LanguageSelector />
+                                        {self.createLanguageSelector()}
                                     </span>
                                     <span>
                                         <Button
@@ -444,6 +447,18 @@ class PageRoot extends ApiComponent<
             </Layout>
         )
     }
+    createLanguageSelector(): React.ReactNode {
+        const self = this
+        return self.state.showLanguageSelector ? (
+            <LanguageSelector />
+        ) : (
+            <Button
+                onClick={() => self.setState({ showLanguageSelector: true })}
+                shape="circle"
+                icon={<GlobalOutlined />}
+            />
+        )
+    }
 }
 
 function mapStateToProps(state: any) {

diff --git a/src/containers/global/DarkModeSwitch.tsx b/src/containers/global/DarkModeSwitch.tsx
@@ -1,19 +1,18 @@
-import { BulbFilled, BulbOutlined } from '@ant-design/icons'
-import { Switch } from 'antd'
+import { SunFilled, SunOutlined } from '@ant-design/icons'
+import { Button } from 'antd'
 import { useContext } from 'react'
 import DarkModeContext from '../../contexts/DarkModeContext'
 
 const DarkModeSwitch = () => {
     const { isDarkMode, setIsDarkMode } = useContext(DarkModeContext)
 
     return (
-        <Switch
-            checkedChildren={<BulbOutlined />}
-            unCheckedChildren={<BulbFilled />}
-            checked={isDarkMode}
-            onChange={(checked) => {
-                setIsDarkMode(checked)
+        <Button
+            onClick={() => {
+                setIsDarkMode(!isDarkMode)
             }}
+            shape="circle"
+            icon={isDarkMode ? <SunOutlined /> : <SunFilled />}
         />
     )
 }

diff --git a/src/utils/StorageHelper.ts b/src/utils/StorageHelper.ts
@@ -59,8 +59,11 @@ class StorageHelper {
         // If not preference exists, return DarkMode based on users colorScheme
         return isDarkMode
             ? JSON.parse(isDarkMode)
-            : window.matchMedia &&
-                  window.matchMedia('(prefers-color-scheme: dark)').matches
+            : // default to dark mode
+              !(
+                  window.matchMedia &&
+                  window.matchMedia('(prefers-color-scheme: light)').matches
+              )
     }
 
     setLanguageInLocalStorage(language: string) {