Merge pull request #2145 from lumi-tip/development-lumi-9601

changing on mobile positon of lang switcher and colormode

Author: lumi-tip

src/components/Navbar/MobileNav.jsx

@@ -1,29 +1,24 @@
 import {
   Box,
-  IconButton,
   useColorModeValue,
-  useColorMode,
   Flex,
 } from '@chakra-ui/react';
 import PropTypes from 'prop-types';
 import useTranslation from 'next-translate/useTranslation';
 import { useRouter } from 'next/router';
-import Icon from '../Icon';
 import MobileNavItem from './MobileNavItem';
-import LanguageSelector from '../LanguageSelector';
 import NextChakraLink from '../NextChakraLink';
 import useStyle from '../../hooks/useStyle';
 import { setStorageItem } from '../../utils';
 
 function MobileNav({
-  navbarItems, translations, onClickLink,
+  navbarItems, onClickLink,
 }) {
-  const { colorMode, toggleColorMode } = useColorMode();
   const { t } = useTranslation('navbar');
   const router = useRouter();
   const prismicRef = process.env.PRISMIC_REF;
   const prismicApi = process.env.PRISMIC_API;
-  const { borderColor, navbarBackground } = useStyle();
+  const { navbarBackground } = useStyle();
 
   return (
     <Flex
@@ -96,43 +91,12 @@ function MobileNav({
           {t('login')}
         </NextChakraLink>
       </Box>
-      <Box
-        borderTop={1}
-        borderStyle="solid"
-        borderColor={borderColor}
-        display="flex"
-        padding="14px 0 0 0"
-        justifyContent="center"
-        gridGap="20px"
-      >
-        <IconButton
-          display="flex"
-          _hover={{
-            background: navbarBackground,
-          }}
-          _active={{
-            background: navbarBackground,
-          }}
-          background={navbarBackground}
-          onClick={toggleColorMode}
-          title="Toggle Color Mode"
-          icon={
-            colorMode === 'light' ? (
-              <Icon icon="light" id="light-button-mobile" width="25px" height="23px" color="black" />
-            ) : (
-              <Icon icon="dark" id="dark-button-mobile" width="20px" height="20px" />
-            )
-          }
-        />
-        <LanguageSelector display="block" translations={translations} />
-      </Box>
     </Flex>
   );
 }
 
 MobileNav.propTypes = {
   navbarItems: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.any])),
-  translations: PropTypes.oneOfType([PropTypes.objectOf(PropTypes.any), PropTypes.arrayOf(PropTypes.any)]),
   onClickLink: PropTypes.func.isRequired,
 };
 
@@ -147,7 +111,6 @@ MobileNav.defaultProps = {
       },
     },
   ],
-  translations: undefined,
 };
 
 export default MobileNav;

src/components/Navbar/index.jsx

@@ -297,17 +297,17 @@ function Navbar({ translations, pageProps }) {
             </Flex>
           </Flex>
 
-          <Stack justify="flex-end" alignItems="center" direction="row" gridGap={hasPaidSubscription ? '16px' : '20px'}>
-            <Flex display={{ base: 'none', md: 'flex' }} gridGap="18px">
+          <Stack justify="flex-end" alignItems="center" direction="row" gridGap="14px">
+            <Flex display="flex" gridGap={{ base: '10px', md: '18px' }}>
               {disableLangSwitcher !== true && (
-                <LanguageSelector display={{ base: 'none ', lg: 'block' }} translations={translations} minWidth="unset" />
+                <LanguageSelector display="block" translations={translations} minWidth="unset" />
               )}
               <IconButton
                 style={{
                   margin: 0,
                   minWidth: 'unset',
                 }}
-                display={{ base: 'none', lg: 'flex' }}
+                display="flex"
                 height="auto"
                 _hover={{
                   background: navbarBackground,
@@ -333,7 +333,7 @@ function Navbar({ translations, pageProps }) {
               <Divider orientation="vertical" borderColor={hexColor.fontColor3} opacity={0.5} />
             </Box>
             {hasPaidSubscription && (
-              <Box display="flex" alignItems="center" height="100%" zIndex={10}>
+              <Box display={{ base: 'none', md: 'flex' }} alignItems="center" height="100%" zIndex={10}>
                 <Icon icon="crown" width="20px" height="26px" color="" />
               </Box>
             )}