feat: add language change in desktop

forbole · Nov 22, 2023 · 6819e07 · 6819e07
1 parent 3a187c9
commit 6819e07
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 48 deletions.
diff --git a/postcss.config.js b/postcss.config.js
@@ -1,5 +1,4 @@
 module.exports = {
-    plugins: [
-      'autoprefixer'
-    ]
-  }
+  plugins: ["autoprefixer"],
+};
+
diff --git a/src/components/nav/components/lang_menu_button/index.tsx b/src/components/nav/components/lang_menu_button/index.tsx
@@ -112,26 +112,32 @@ const LangMenuButton = () => {
         >
           {locales?.map((l) => (
             <div key={l}>
-              <Link href={{ pathname, query }} locale={l}>
+              <Link
+                href={{ pathname, query }}
+                locale={l}
+                style={{
+                  textDecoration: "none",
+                }}
+              >
                 <MenuItem
                   component="span"
                   sx={{
-                    "display": "flex",
                     "color": theme.palette.custom.forbole.indigo,
-                    "gap": "8px",
-                    "justifyContent": "flex-start",
+                    "display": "flex",
                     "fontSize": theme.spacing(2),
                     "fontWeight": 700,
+                    "gap": "8px",
                     "height": theme.spacing(7),
+                    "justifyContent": "flex-start",
                     "padding": theme.spacing(0, 4),
+
                     "> a": {
                       width: "100%",
                       textAlign: "left",
-                      textDecoration: "none",
                     },
                     "&:hover": {
-                      color: theme.palette.common.white,
                       background: "linear-gradient(to right,#623DF5,#362187)",
+                      color: theme.palette.common.white,
                     },
                   }}
                 >
@@ -151,23 +157,29 @@ const LangMenuButton = () => {
       >
         {locales?.map((l) => (
           <div key={l} style={{ display: lang !== l ? "block" : "none" }}>
-            <Link href={{ pathname, query }} locale={l}>
+            <Link
+              href={{ pathname, query }}
+              locale={l}
+              style={{
+                textDecoration: "none",
+              }}
+            >
               <MenuItem
                 component="span"
                 onClick={handleClose}
                 sx={{
+                  "color": theme.palette.custom.forbole.indigo,
                   "display": "flex",
-                  "gap": "8px",
-                  "justifyContent": "flex-start",
                   "fontSize": theme.spacing(2),
                   "fontWeight": 700,
+                  "gap": "8px",
                   "height": theme.spacing(7),
+                  "justifyContent": "flex-start",
                   "padding": theme.spacing(0, 4),
-                  "color": theme.palette.custom.forbole.indigo,
+
                   "> a": {
                     width: "100%",
                     textAlign: "left",
-                    textDecoration: "none",
                   },
                   "&:hover": {
                     color: theme.palette.common.white,

diff --git a/src/components/nav/components/mobile_nav_menu/index.tsx b/src/components/nav/components/mobile_nav_menu/index.tsx
@@ -213,12 +213,12 @@ const MobileNavMenu = () => {
           onClick={handleDropdownClick}
           sx={{
             "display": "flex",
-            "justifyContent": "space-between",
             "fontSize": theme.spacing(2),
             "fontWeight": 700,
-
             "height": theme.spacing(7),
+            "justifyContent": "space-between",
             "padding": theme.spacing(0, 4),
+
             "> a": {
               width: "100%",
               textAlign: "left",

diff --git a/src/components/nav/hooks.tsx b/src/components/nav/hooks.tsx
@@ -8,6 +8,7 @@ export const useNavHook = () => {
     if (window.pageYOffset === 0 && displayBackground) {
       setDisplayBackground(false);
     }
+
     if (window.pageYOffset > 0 && !displayBackground) {
       setDisplayBackground(true);
     }
@@ -17,6 +18,7 @@ export const useNavHook = () => {
     if (currPos.y === 0 && displayBackground) {
       setDisplayBackground(false);
     }
+
     if (currPos.y < 0 && !displayBackground) {
       setDisplayBackground(true);
     }

diff --git a/src/components/nav/index.tsx b/src/components/nav/index.tsx
@@ -8,6 +8,7 @@ import React from "react";
 import useColor from "@src/styles/useColor";
 
 import { DesktopNavMenu, MobileNavMenu } from "./components";
+import LangMenuButton from "./components/lang_menu_button";
 import { useNavHook } from "./hooks";
 
 interface NavProps {
@@ -21,7 +22,8 @@ const Nav = ({ staking, stakeNowRef, itemColor }: NavProps) => {
   const colors = useColor();
   const { displayBackground } = useNavHook();
   const { t } = useTranslation("staking");
-  const scrollToRef = (e: any) => {
+
+  const scrollToRef = (e: React.MouseEvent<HTMLElement>) => {
     e.preventDefault();
     if (stakeNowRef !== undefined && stakeNowRef.current !== null) {
       window.scrollTo({
@@ -36,15 +38,17 @@ const Nav = ({ staking, stakeNowRef, itemColor }: NavProps) => {
     <Box
       data-test="nav"
       sx={{
+        "backdropFilter": displayBackground ? "blur(16px)" : "none",
         "boxSizing": "content-box",
         "display": "flex",
+        "height": "100px",
         "justifyContent": "center",
         "position": "fixed",
         "top": 0,
-        "zIndex": 5,
-        "width": "100%",
-        "height": "100px",
         "transition": "all .3s",
+        "width": "100%",
+        "zIndex": 5,
+
         "background": (() => {
           if (displayBackground && !staking) {
             return "rgba(47, 58, 86, 0.60)";
@@ -54,7 +58,6 @@ const Nav = ({ staking, stakeNowRef, itemColor }: NavProps) => {
             ? " rgba(47, 58, 86, 0.60)"
             : "transparent";
         })(),
-        "backdropFilter": displayBackground ? "blur(16px)" : "none",
         [theme.breakpoints.up("laptop")]: {
           height: "100px",
         },
@@ -66,13 +69,14 @@ const Nav = ({ staking, stakeNowRef, itemColor }: NavProps) => {
       <Box
         sx={{
           boxSizing: "border-box",
-          width: "100%",
           height: "auto",
+          maxWidth: "desktop",
           position: "fixed",
-          top: 0,
           px: "16px",
+          top: 0,
+          width: "100%",
           zIndex: 2,
-          maxWidth: "desktop",
+
           [theme.breakpoints.up("laptop")]: {
             top: 30,
             margin: "auto",
@@ -84,12 +88,13 @@ const Nav = ({ staking, stakeNowRef, itemColor }: NavProps) => {
       >
         <Box
           sx={{
+            alignItems: "center",
             background: "transparent",
-            padding: theme.spacing(5, 0, 0, 0),
             display: "flex",
             flexDirection: "row",
-            alignItems: "center",
             justifyContent: "space-between",
+            padding: theme.spacing(5, 0, 0, 0),
+
             [theme.breakpoints.up("laptop")]: {
               padding: theme.spacing(5.5, 0, 0, 0),
               justifyContent: "space-between",
@@ -122,29 +127,49 @@ const Nav = ({ staking, stakeNowRef, itemColor }: NavProps) => {
             </Link>
           </Box>
           {staking ? (
-            <Button
-              onClick={(e: React.MouseEvent<HTMLElement>) => scrollToRef(e)}
-              sx={{
-                width: "97px",
-                height: "32px",
-                lineHeight: "17px",
-                fontWeight: 600,
-                padding: 0,
-                whiteSpace: "nowrap",
-                background:
-                  "linear-gradient(286.17deg, #D431EE 0%, #FF426B 100%)",
-                borderRadius: theme.spacing(3),
-                color: "primary.main",
-                boxShadow: "none",
-                [theme.breakpoints.up("laptop")]: {
-                  width: "111px",
-                  height: "45px",
-                },
+            <Box
+              style={{
+                alignItems: "center",
+                display: "flex",
+                flexDirection: "row",
+                gap: "20px",
+                justifyContent: "center",
               }}
-              variant="contained"
             >
-              {t("stake_now")}
-            </Button>
+              <Button
+                onClick={scrollToRef}
+                sx={{
+                  background:
+                    "linear-gradient(286.17deg, #D431EE 0%, #FF426B 100%)",
+                  borderRadius: theme.spacing(3),
+                  boxShadow: "none",
+                  color: "primary.main",
+                  fontWeight: 600,
+                  height: "32px",
+                  lineHeight: "17px",
+                  padding: 0,
+                  whiteSpace: "nowrap",
+                  width: "97px",
+
+                  [theme.breakpoints.up("laptop")]: {
+                    width: "111px",
+                    height: "45px",
+                  },
+                }}
+                variant="contained"
+              >
+                {t("stake_now")}
+              </Button>
+              <Box
+                sx={{
+                  [theme.breakpoints.down("laptop")]: {
+                    display: "none",
+                  },
+                }}
+              >
+                <LangMenuButton />
+              </Box>
+            </Box>
           ) : (
             <>
               <Box

diff --git a/src/screens/staking/index.tsx b/src/screens/staking/index.tsx
@@ -17,6 +17,7 @@ import { LaptopCSS } from "./styles";
 const Staking = () => {
   const { t } = useTranslation("staking");
   const stakeNowRef = useRef(null);
+
   React.useEffect(() => {
     window.scrollTo({
       left: 0,