Added language and dark mode to settings in mobile

caprover · Oct 17, 2024 · 3792da4 · 3792da4
1 parent 9fd2187
commit 3792da4
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 2 deletions.
diff --git a/src/containers/global/ThemeSelector.tsx b/src/containers/global/ThemeSelector.tsx
@@ -27,12 +27,12 @@ const ThemeSelector: React.FC<ThemeSelectorProps> = ({ themes }) => {
         ThemeProvider.getInstance()
             .saveCurrentTheme(t ? t.name : '')
             .catch(Toaster.createCatcher())
-        // dispatch(emitRootKeyChanged()) Needed? TODO
+        // dispatch(emitRootKeyChanged()) Needed?
     }
 
     return (
         <Select
-            style={{ width: 250 }}
+            style={{ width: 200 }}
             options={options}
             value={currentTheme?.name || options[0].value}
             onChange={handleChange}

diff --git a/src/containers/settings/Settings.tsx b/src/containers/settings/Settings.tsx
@@ -3,6 +3,8 @@ import { Component } from 'react'
 import { connect } from 'react-redux'
 import { IMobileComponent } from '../../models/ContainerProps'
 import { localize } from '../../utils/Language'
+import DarkModeSwitch from '../global/DarkModeSwitch'
+import LanguageSelector from '../global/LanguageSelector'
 import ChangePass from './ChangePass'
 import NginxConfig from './NginxConfig'
 import ProFeatures from './ProFeatures'
@@ -15,6 +17,30 @@ class Settings extends Component<
     {}
 > {
     render() {
+        const self = this
+        function createMobileOnlyComponents() {
+            if (!self.props.isMobile) return <div></div>
+
+            return (
+                <Col
+                    style={{ marginTop: 10, marginBottom: 10 }}
+                    lg={{ span: 8 }}
+                    xs={{ span: 23 }}
+                >
+                    <Card style={{ height: '100%' }} title={''}>
+                        <Row justify={'space-between'}>
+                            <div>
+                                <LanguageSelector />
+                            </div>
+                            <div style={{ marginInlineEnd: 5 }}>
+                                <DarkModeSwitch />
+                            </div>
+                        </Row>
+                    </Card>
+                </Col>
+            )
+        }
+
         return (
             <div>
                 <Row justify="center" gutter={20}>
@@ -25,6 +51,7 @@ class Settings extends Component<
                     >
                         <ProFeatures isMobile={this.props.isMobile} />
                     </Col>{' '}
+                    {createMobileOnlyComponents()}
                     <Col
                         style={{ marginTop: 40, marginBottom: 80 }}
                         lg={{ span: 8 }}