Refactor selector positions

src/App.tsx

@@ -3966,7 +3966,7 @@ function App() {
             bottom: '1%',
             display: 'flex',
             flexDirection: 'column',
-            left: '1%',
+            left: '3px',
             position: 'absolute',
             width: 'auto',
           }}

src/components/Apps/AppsDesktop.tsx

@@ -25,6 +25,8 @@ import { CoreSyncStatus } from '../CoreSyncStatus';
 import { MessagingIconFilled } from '../../assets/Icons/MessagingIconFilled';
 import { useAtom } from 'jotai';
 import { useTranslation } from 'react-i18next';
+import LanguageSelector from '../Language/LanguageSelector';
+import ThemeSelector from '../Theme/ThemeSelector';
 
 const uid = new ShortUniqueId({ length: 8 });
 
@@ -457,6 +459,7 @@ export const AppsDesktop = ({
             </IconWrapper>
           </ButtonBase>
         )}
+
         {mode !== 'home' && (
           <AppsNavBarDesktop
             disableBack={isNewTabWindow && mode === 'viewer'}
@@ -499,6 +502,7 @@ export const AppsDesktop = ({
       {mode === 'appInfo' && !selectedTab && (
         <AppInfo app={selectedAppInfo} myName={myName} />
       )}
+
       {mode === 'appInfo-from-category' && !selectedTab && (
         <AppInfo app={selectedAppInfo} myName={myName} />
       )}
@@ -553,6 +557,26 @@ export const AppsDesktop = ({
           </Box>
         </>
       )}
+
+      <Box
+        sx={{
+          alignItems: 'flex-start',
+          bottom: '1%',
+          display: 'flex',
+          flexDirection: 'column',
+          left: '3px',
+          position: 'absolute',
+          width: 'auto',
+        }}
+      >
+        <Box sx={{ alignSelf: 'left' }}>
+          <LanguageSelector />
+        </Box>
+
+        <Box sx={{ alignSelf: 'center' }}>
+          <ThemeSelector />
+        </Box>
+      </Box>
     </AppsParent>
   );
 };

src/components/Apps/AppsDevMode.tsx

@@ -18,6 +18,8 @@ import { IconWrapper } from '../Desktop/DesktopFooter';
 import { CoreSyncStatus } from '../CoreSyncStatus';
 import { MessagingIconFilled } from '../../assets/Icons/MessagingIconFilled';
 import { useTranslation } from 'react-i18next';
+import LanguageSelector from '../Language/LanguageSelector';
+import ThemeSelector from '../Theme/ThemeSelector';
 
 const uid = new ShortUniqueId({ length: 8 });
 
@@ -351,6 +353,24 @@ export const AppsDevMode = ({
         </ButtonBase>
 
         {mode !== 'home' && <AppsDevModeNavBar />}
+        <Box
+          sx={{
+            alignItems: 'flex-start',
+            bottom: '1%',
+            display: 'flex',
+            flexDirection: 'column',
+            position: 'absolute',
+            width: 'auto',
+          }}
+        >
+          <Box sx={{ alignSelf: 'left' }}>
+            <LanguageSelector />
+          </Box>
+
+          <Box sx={{ alignSelf: 'center' }}>
+            <ThemeSelector />
+          </Box>
+        </Box>
       </Box>
 
       {mode === 'home' && (

src/components/Apps/AppsDevModeNavBar.tsx

@@ -35,7 +35,6 @@ export const AppsDevModeNavBar = () => {
   const [isNewTabWindow, setIsNewTabWindow] = useState(false);
   const tabsRef = useRef(null);
   const [anchorEl, setAnchorEl] = useState(null);
-  const open = Boolean(anchorEl);
 
   const handleClick = (event) => {
     setAnchorEl(event.currentTarget);

src/components/Apps/AppsHomeDesktop.tsx

@@ -14,8 +14,6 @@ import { SortablePinnedApps } from './SortablePinnedApps';
 import { extractComponents } from '../Chat/MessageDisplay';
 import ArrowOutwardIcon from '@mui/icons-material/ArrowOutward';
 import { AppsPrivate } from './AppsPrivate';
-import ThemeSelector from '../Theme/ThemeSelector';
-import LanguageSelector from '../Language/LanguageSelector';
 import { useTranslation } from 'react-i18next';
 
 export const AppsHomeDesktop = ({
@@ -169,26 +167,6 @@ export const AppsHomeDesktop = ({
           myApp={myApp}
         />
       </AppsContainer>
-
-      <Box
-        sx={{
-          alignItems: 'flex-start',
-          bottom: '1%',
-          display: 'flex',
-          flexDirection: 'column',
-          left: '4px',
-          position: 'absolute',
-          width: 'auto',
-        }}
-      >
-        <Box sx={{ alignSelf: 'left' }}>
-          <LanguageSelector />
-        </Box>
-
-        <Box sx={{ alignSelf: 'center' }}>
-          <ThemeSelector />
-        </Box>
-      </Box>
     </>
   );
 };