Merge pull request #963 from singnet/ui-fix

Ui-fix header
singnet · Jan 14, 2025 · 8daf348 · 8daf348
2 parents aca29b2 + fe2a150
commit 8daf348
Show file tree

Hide file tree

Showing 8 changed files with 133 additions and 129 deletions.
diff --git a/src/components/common/Header/HeaderActions.js b/src/components/common/Header/HeaderActions.js
@@ -4,6 +4,7 @@ import { useLocation, useNavigate } from "react-router-dom";
 import { useStyles } from "./styles";
 import Routes from "../../../utility/constants/Routes";
 import UserProfileToggler from "../../UserProfilePopUp/UserProfileToggler";
+import StyledButton from "../StyledButton";
 
 const HeaderActions = () => {
   const classes = useStyles();
@@ -18,30 +19,24 @@ const HeaderActions = () => {
   };
 
   return (
-    <ul className={classes.loginBtnsUl}>
+    <div className={classes.loginBtnsContainer}>
       {isLoggedIn ? (
         <UserProfileToggler />
       ) : (
         <Fragment>
-          <li className={classes.loginBtnsLi}>
-            <span
-              className={`${classes.loginBtnsAnchor} ${classes.loginBtn}`}
-              onClick={() => handleRedirection(`/${Routes.LOGIN}`)}
-            >
-              Login
-            </span>
-          </li>
-          <li className={`${classes.signupBtn} ${classes.loginBtnsLi}`}>
-            <span
-              className={`${classes.loginBtnsAnchor} ${classes.UppercaseText} ${classes.signupBtnText}`}
-              onClick={() => handleRedirection(`/${Routes.SIGNUP}`)}
-            >
-              Sign Up Free
-            </span>
-          </li>
+          <StyledButton
+            type="transparentBlueBorderDisable"
+            btnText="Login"
+            onClick={() => handleRedirection(`/${Routes.LOGIN}`)}
+          />
+          <StyledButton
+            type="whiteBorder"
+            btnText="Sign Up Free"
+            onClick={() => handleRedirection(`/${Routes.SIGNUP}`)}
+          />
         </Fragment>
       )}
-    </ul>
+    </div>
   );
 };
 

diff --git a/src/components/common/Header/MobileHeader/index.js b/src/components/common/Header/MobileHeader/index.js
@@ -1,4 +1,4 @@
-import React, { Fragment } from "react";
+import React from "react";
 import { withStyles } from "@mui/styles";
 import { connect } from "react-redux";
 import { stylesActions } from "../../../../Redux/actionCreators";
@@ -7,6 +7,7 @@ import CloseIcon from "@mui/icons-material/Close";
 import HeaderActions from "../HeaderActions";
 import NavItem from "../NavItem";
 import { useStyles } from "./styles";
+import NavigateToMainPortalButton from "../NavigateToMainPortalButton";
 
 const MobileHeader = ({ classes, data, isLoggedIn, hamburgerMenu, updateHamburgerState }) => {
   const toggleMobileMenu = () => {
@@ -24,33 +25,32 @@ const MobileHeader = ({ classes, data, isLoggedIn, hamburgerMenu, updateHamburge
   }
 
   return (
-    <Fragment>
-      <div className={classes.mobileNavContainer}>
-        <div className={classes.closeMenuIcon}>
-          <CloseIcon onClick={toggleMobileMenu} />
-        </div>
-        <nav className={classes.mobileNavigation}>
-          <ul>
-            {data.tabs.map((tab) => (
-              <NavItem key={tab.title} title={tab.title} link={tab.link} active={tab.active} />
-            ))}
-            {data.dropdowns.map((dropdown) => (
-              <div key={dropdown.label} className={classes.subMenues}>
-                <Fragment>
-                  <NavItem title={dropdown.label} subHeader />
-                  {dropdown.list.map((item) => (
-                    <NavItem key={item.label} title={item.label} link={item.link} subListItem />
-                  ))}
-                </Fragment>
-              </div>
-            ))}
-          </ul>
-          <div className={`${classes.mobileActionBtns} ${isLoggedIn ? classes.loggedInState : ""}`}>
-            <HeaderActions />
+    <div className={classes.mobileNavContainer}>
+      <div className={classes.closeMenuIcon}>
+        <CloseIcon onClick={toggleMobileMenu} />
+      </div>
+      <nav className={classes.mobileNavigation}>
+        <ul>
+          {data.tabs.map((tab) => (
+            <NavItem key={tab.title} title={tab.title} link={tab.link} active={tab.active} />
+          ))}
+          {data.dropdowns.map((dropdown) => (
+            <div key={dropdown.label} className={classes.subMenues}>
+              <NavItem title={dropdown.label} subHeader />
+              {dropdown.list.map((item) => (
+                <NavItem key={item.label} title={item.label} link={item.link} subListItem />
+              ))}
+            </div>
+          ))}
+          <div className={classes.mainPortalButton}>
+            <NavigateToMainPortalButton />
           </div>
-        </nav>
+        </ul>
+      </nav>
+      <div className={`${classes.mobileActionBtns} ${isLoggedIn ? classes.loggedInState : ""}`}>
+        <HeaderActions />
       </div>
-    </Fragment>
+    </div>
   );
 };
 

diff --git a/src/components/common/Header/MobileHeader/styles.js b/src/components/common/Header/MobileHeader/styles.js
@@ -1,7 +1,6 @@
 export const useStyles = (theme) => ({
   hamburger: {
     padding: 10,
-    margin: "0 39px 0 23px",
     display: "none",
     cursor: "pointer",
     "& span": {
@@ -12,12 +11,13 @@ export const useStyles = (theme) => ({
       marginBottom: 3,
     },
     "@media (max-width:1024px)": { display: "block" },
-    "@media (max-width:768px)": { margin: "0 25px 0 0" },
   },
   mobileNavContainer: {
     display: "flex",
     alignItems: "center",
+    flexDirection: "column",
     position: "fixed",
+    overflow: "auto",
     top: 0,
     right: 0,
     bottom: 0,
@@ -36,9 +36,7 @@ export const useStyles = (theme) => ({
   mobileNavigation: {
     boxSizing: "border-box",
     width: "100%",
-    height: "100%",
-    padding: "90px 0 50px",
-    overflow: "auto",
+    padding: "70px 0 20px",
     textAlign: "left",
     "& ul": {
       padding: 0,
@@ -65,38 +63,45 @@ export const useStyles = (theme) => ({
     borderTopWidth: 1,
     borderTopStyle: "solid",
     borderTopColor: theme.palette.text.white,
-    paddingTop: 30,
+    padding: "30px 15px",
+    display: "flex",
+    flexDirection: "column",
+    gap: 20,
     "& ul": {
-      marginLeft: "29%",
-      justifyContent: "flex-start",
-      "& > div": {
-        "@media (max-width:550px)": { display: "none" },
-      },
-      "@media(max-width: 480px)": { margin: 0 },
+      // marginLeft: "30%",
+      // justifyContent: "flex-start",
+      // "& > div": {
+      //   "@media (max-width:550px)": { display: "none" },
+      // },
+      // "@media(max-width: 480px)": { margin: 0 },
       "& li": {
-        margin: 0,
-        padding: 0,
-        border: "none",
-        "&:first-of-type": { marginRight: 15 },
-        "&:last-of-type span": {
-          padding: "10px 28px",
-          borderWidth: 1,
-          borderStyle: "solid",
-          borderColor: theme.palette.text.white,
-          borderRadius: 4,
-        },
-        "@media (max-width:550px)": { display: "block" },
+        // margin: 0,
+        // padding: 0,
+        // border: "none",
+        // "&:first-of-type": { marginRight: 15 },
+        // "&:last-of-type span": {
+        //   padding: "10px 28px",
+        //   borderWidth: 1,
+        //   borderStyle: "solid",
+        //   borderColor: theme.palette.text.white,
+        //   borderRadius: 4,
+        // },
+        // "@media (max-width:550px)": { display: "block" },
       },
-      "& span": {
-        fontSize: 24,
-        textTransform: "capitalize",
-      },
-      "& a": { paddingBottom: 0 },
-    },
-    "@media(max-width: 480px)": {
-      display: "flex",
-      justifyContent: "center",
+      // "& span": {
+      //   fontSize: 24,
+      //   textTransform: "capitalize",
+      // },
+      // "& a": { paddingBottom: 0 },
     },
+    // "@media(max-width: 480px)": {
+    //   display: "flex",
+    //   justifyContent: "center",
+    // },
+  },
+  mainPortalButton: {
+    textAlign: "center",
+    padding: 20,
   },
   subMenues: {
     "& li": {

diff --git a/src/components/common/Header/NavigateToMainPortalButton.js b/src/components/common/Header/NavigateToMainPortalButton.js
@@ -0,0 +1,19 @@
+import { isMainnet } from "../../../config/Networks";
+import StyledButton from "../StyledButton";
+
+const NavigateToMainPortalButton = () => {
+  if (isMainnet(process.env.REACT_APP_ETH_NETWORK)) {
+    return null;
+  } else {
+    return (
+      <StyledButton
+        type="whiteBorder"
+        btnText="Marketplace Mainnet"
+        href="https://beta.singularitynet.io/"
+        newTab={true}
+      />
+    );
+  }
+};
+
+export default NavigateToMainPortalButton;
diff --git a/src/components/common/Header/index.js b/src/components/common/Header/index.js
@@ -7,6 +7,7 @@ import Title from "./Title";
 import MobileHeader from "./MobileHeader";
 import UpdateNotificationBar from "../../common/UpdateNotificationBar";
 import { NavData } from "../../../utility/constants/Header";
+import NavigateToMainPortalButton from "./NavigateToMainPortalButton";
 
 const Header = ({ showNotification, onCloseClick }) => {
   const classes = useStyles();
@@ -20,6 +21,9 @@ const Header = ({ showNotification, onCloseClick }) => {
           <div className={classes.logoSection}>
             <MobileHeader data={NavData} />
             <Title />
+            <div className={classes.mainPortalButton}>
+              <NavigateToMainPortalButton />
+            </div>
           </div>
           {!process.env.REACT_APP_SANDBOX && (
             <>