From 305fa47ee9956d67812c739dcda569c023d1dd9e Mon Sep 17 00:00:00 2001
From: nikhil arora <narora200@gmail.com>
Date: Thu, 9 Feb 2023 23:50:00 +0530
Subject: [PATCH] style: nav bars style improvement

---
 packages/frontend/package.json                |   1 -
 .../LandingPage/DesktopLandingPage.tsx        |  41 ++--
 .../LandingPage/MobileLandingPage.tsx         |  64 ++++--
 packages/frontend/src/components/Nav.tsx      | 188 ++++++++++--------
 yarn.lock                                     |   7 -
 5 files changed, 170 insertions(+), 131 deletions(-)

diff --git a/packages/frontend/package.json b/packages/frontend/package.json
index 4b450390e..d4244ce5f 100644
--- a/packages/frontend/package.json
+++ b/packages/frontend/package.json
@@ -57,7 +57,6 @@
         "fzero": "^0.2.4",
         "graphql": "^16.1.0",
         "gray-matter": "^4.0.3",
-        "hamburger-react": "^2.5.0",
         "highcharts": "^10.2.1",
         "highcharts-react-official": "^3.1.0",
         "javascript-time-ago": "^2.5.7",
diff --git a/packages/frontend/src/components/LandingPage/DesktopLandingPage.tsx b/packages/frontend/src/components/LandingPage/DesktopLandingPage.tsx
index 3f592322b..c911ca9c0 100644
--- a/packages/frontend/src/components/LandingPage/DesktopLandingPage.tsx
+++ b/packages/frontend/src/components/LandingPage/DesktopLandingPage.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react'
 import { makeStyles, createStyles } from '@material-ui/core/styles'
-import logo from 'public/images/OpynLogo.svg'
+import logo from 'public/images/logo.png'
 import LandingPageBackground from 'public/images/landing/athena1-desktop.png'
 import LandingPageBackgroundDown from 'public/images/landing-page-background-down.svg'
 import LandingTitle from 'public/images/landing/landing-title.png'
@@ -31,7 +31,8 @@ const useStyles = makeStyles((theme) =>
       overflow: 'hidden',
     },
     logo: {
-      cursor: 'pointer',
+      display: 'flex',
+      alignItems: 'center',
     },
     gradientText: {
       background: `linear-gradient(180deg, #FFFFFF 0%, #C2C2C2 100%)`,
@@ -281,9 +282,6 @@ const useStyles = makeStyles((theme) =>
       alignItems: 'center',
       gap: `${vwCalculator(9)}`,
     },
-    socialIcon: {
-      cursor: 'pointer',
-    },
   }),
 )
 
@@ -320,11 +318,12 @@ function DesktopLandingPage() {
   return (
     <div className={classes.landing_page_container}>
       <div className={classes.nav}>
-        <div className={classes.logo}>
-          <Link href={'/'} passHref>
-            <Image src={logo} alt="logo" width={97} height={75} />
-          </Link>
-        </div>
+        <Link href={'/'} passHref>
+          <a className={classes.logo}>
+            <Image src={logo} alt="logo" width={95} height={75} />
+          </a>
+        </Link>
+
         <div className={classes.navLinks}>
           {navLinks.map((link) => (
             <Typography
@@ -400,7 +399,7 @@ function DesktopLandingPage() {
             <div>
               <div className={classes.contentSectionHeader}>
                 <div className={classes.contentSectionHeaderImage}>
-                  <Image src={logo} alt="logo" width={97} height={75} />
+                  <Image src={logo} alt="logo" width={95} height={75} />
                 </div>
                 <Typography variant="h3" className={clsx([classes.contentSectionHeaderLabel, classes.gradientText])}>
                   SQUEETH
@@ -436,7 +435,7 @@ function DesktopLandingPage() {
             <div>
               <div className={classes.contentSectionHeader}>
                 <div className={classes.contentSectionHeaderImage}>
-                  <Image src={logo} alt="logo" width={97} height={75} />
+                  <Image src={logo} alt="logo" width={95} height={75} />
                 </div>
                 <Typography variant="h3" className={clsx([classes.contentSectionHeaderLabel, classes.gradientText])}>
                   STRATEGIES
@@ -480,7 +479,7 @@ function DesktopLandingPage() {
             <div>
               <div className={classes.contentSectionHeader}>
                 <div className={classes.contentSectionHeaderImage}>
-                  <Image src={logo} alt="logo" width={97} height={75} />
+                  <Image src={logo} alt="logo" width={95} height={75} />
                 </div>
                 <Typography variant="h3" className={clsx([classes.contentSectionHeaderLabel, classes.gradientText])}>
                   AUCTION
@@ -526,22 +525,30 @@ function DesktopLandingPage() {
         <div className={classes.footerSocial}>
           <div onClick={() => track(LANDING_EVENTS.NAV_SOCIAL_TWITTER)}>
             <Link href={'https://twitter.com/opyn_'} passHref>
-              <Image className={classes.socialIcon} src={Twitter} alt="Opyn Twitter" />
+              <a>
+                <Image src={Twitter} alt="Opyn Twitter" />
+              </a>
             </Link>
           </div>
           <div onClick={() => track(LANDING_EVENTS.NAV_SOCIAL_DISCORD)}>
             <Link href={'https://tiny.cc/opyndiscord'} passHref>
-              <Image className={classes.socialIcon} src={Discord} alt="Opyn Discord" />
+              <a>
+                <Image src={Discord} alt="Opyn Discord" />
+              </a>
             </Link>
           </div>
           <div onClick={() => track(LANDING_EVENTS.NAV_SOCIAL_GITHUB)}>
             <Link href={'https://github.com/opynfinance/squeeth-monorepo'} passHref>
-              <Image className={classes.socialIcon} src={Github} alt="Opyn Github" />
+              <a>
+                <Image src={Github} alt="Opyn Github" />
+              </a>
             </Link>
           </div>
           <div onClick={() => track(LANDING_EVENTS.NAV_SOCIAL_MEDIUM)}>
             <Link href={'https://medium.com/opyn'} passHref>
-              <Image className={classes.socialIcon} src={Medium} alt="Opyn Medium" />
+              <a>
+                <Image src={Medium} alt="Opyn Medium" />
+              </a>
             </Link>
           </div>
         </div>
diff --git a/packages/frontend/src/components/LandingPage/MobileLandingPage.tsx b/packages/frontend/src/components/LandingPage/MobileLandingPage.tsx
index 9a27f2882..ec10e2ab8 100644
--- a/packages/frontend/src/components/LandingPage/MobileLandingPage.tsx
+++ b/packages/frontend/src/components/LandingPage/MobileLandingPage.tsx
@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from 'react'
 import { makeStyles, createStyles } from '@material-ui/core/styles'
-import { Paper } from '@material-ui/core'
-import Hamburger from 'hamburger-react'
+import { Paper, IconButton } from '@material-ui/core'
+import MenuIcon from '@material-ui/icons/Menu'
 import Collapse from '@material-ui/core/Collapse'
-import logo from 'public/images/OpynLogo.svg'
+import logo from 'public/images/logo.png'
 import LandingPageBackgroundOne from 'public/images/landing/athena1.png'
 import LandingPageBackgroundTwo from 'public/images/landing/athena2.png'
 import LandingPageBackgroundThree from 'public/images/landing/athena3.png'
@@ -45,7 +45,7 @@ const useStyles = makeStyles((theme) =>
       overflow: 'hidden',
     },
     nav: {
-      padding: `0px ${vwCalculator(10)}`,
+      padding: `8px ${vwCalculator(10)}`,
       display: 'flex',
       alignItems: 'center',
       boxShadow: '0px 3px 4px rgba(0, 0, 0, 0.2)',
@@ -55,7 +55,12 @@ const useStyles = makeStyles((theme) =>
       margin: `0 ${vwCalculator(10)}`,
       position: 'absolute',
     },
-    navLogo: { flex: 1, alignItems: 'center', justifyContent: 'center', display: 'flex' },
+    navLogo: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      display: 'flex',
+    },
     navDrawer: {},
     navDrawerBackground: {
       backgroundColor: '#191B1C',
@@ -284,8 +289,11 @@ const useStyles = makeStyles((theme) =>
       alignItems: 'center',
       gap: `${vwCalculator(9)}`,
     },
-    socialIcon: {
-      cursor: 'pointer',
+    menuButton: {
+      padding: 0,
+      '&:hover': {
+        backgroundColor: 'transparent',
+      },
     },
   }),
 )
@@ -321,17 +329,25 @@ function MobileLandingPage() {
     track(LANDING_EVENTS.LANDING_VISIT_MOBILE)
   }, [track])
 
+  const handleNavOpen = () => {
+    setNavOpen(!navOpen)
+  }
+
   return (
     <div className={classes.landing_page_container}>
       <div className={classes.nav}>
         <div className={classes.navMenu}>
-          <Hamburger size={20} toggled={navOpen} toggle={setNavOpen} />
-        </div>
-        <div className={classes.navLogo}>
-          <Link href={'/'} passHref>
-            <Image src={logo} alt="logo" width={83} height={59} />
-          </Link>
+          <IconButton onClick={handleNavOpen} className={classes.menuButton}>
+            <MenuIcon />
+          </IconButton>
         </div>
+
+        <Link href={'/'} passHref>
+          <a className={classes.navLogo}>
+            <Image src={logo} alt="logo" width={56} height={44} />
+          </a>
+        </Link>
+
         <div className={classes.navAction}>
           <Link href={'/strategies/crab'} passHref>
             <Button onClick={() => track(LANDING_EVENTS.NAV_START_EARNING)} className={classes.navStartEarningButton}>
@@ -422,7 +438,7 @@ function MobileLandingPage() {
         <div className={classes.squeethSection}>
           <div className={classes.contentSectionHeader}>
             <div className={classes.contentSectionHeaderImage}>
-              <Image src={logo} alt="logo" width={70} height={53} />
+              <Image src={logo} alt="logo" width={67} height={53} />
             </div>
             <Typography variant="h3" className={clsx([classes.contentSectionHeaderLabel, classes.gradientText])}>
               SQUEETH
@@ -453,7 +469,7 @@ function MobileLandingPage() {
         <div className={classes.squeethSection}>
           <div className={classes.contentSectionHeader}>
             <div className={classes.contentSectionHeaderImage}>
-              <Image src={logo} alt="logo" width={70} height={53} />
+              <Image src={logo} alt="logo" width={67} height={53} />
             </div>
             <Typography variant="h3" className={clsx([classes.contentSectionHeaderLabel, classes.gradientText])}>
               STRATEGIES
@@ -490,7 +506,7 @@ function MobileLandingPage() {
         <div className={classes.squeethSection}>
           <div className={classes.contentSectionHeader}>
             <div className={classes.contentSectionHeaderImage}>
-              <Image src={logo} alt="logo" width={70} height={53} />
+              <Image src={logo} alt="logo" width={67} height={53} />
             </div>
             <Typography variant="h3" className={clsx([classes.contentSectionHeaderLabel, classes.gradientText])}>
               AUCTION
@@ -533,22 +549,30 @@ function MobileLandingPage() {
           <div className={classes.footerSocial}>
             <div onClick={() => track(LANDING_EVENTS.NAV_SOCIAL_TWITTER)}>
               <Link href={'https://twitter.com/opyn_'} passHref>
-                <Image className={classes.socialIcon} src={Twitter} alt="Opyn Twitter" />
+                <a>
+                  <Image src={Twitter} alt="Opyn Twitter" />
+                </a>
               </Link>
             </div>
             <div onClick={() => track(LANDING_EVENTS.NAV_SOCIAL_DISCORD)}>
               <Link href={'https://tiny.cc/opyndiscord'} passHref>
-                <Image className={classes.socialIcon} src={Discord} alt="Opyn Discord" />
+                <a>
+                  <Image src={Discord} alt="Opyn Discord" />
+                </a>
               </Link>
             </div>
             <div onClick={() => track(LANDING_EVENTS.NAV_SOCIAL_GITHUB)}>
               <Link href={'https://github.com/opynfinance/squeeth-monorepo'} passHref>
-                <Image className={classes.socialIcon} src={Github} alt="Opyn Github" />
+                <a>
+                  <Image src={Github} alt="Opyn Github" />
+                </a>
               </Link>
             </div>
             <div onClick={() => track(LANDING_EVENTS.NAV_SOCIAL_MEDIUM)}>
               <Link href={'https://medium.com/opyn'} passHref>
-                <Image className={classes.socialIcon} src={Medium} alt="Opyn Medium" />
+                <a>
+                  <Image src={Medium} alt="Opyn Medium" />
+                </a>
               </Link>
             </div>
           </div>
diff --git a/packages/frontend/src/components/Nav.tsx b/packages/frontend/src/components/Nav.tsx
index 4c988d1fc..9ddd7beeb 100644
--- a/packages/frontend/src/components/Nav.tsx
+++ b/packages/frontend/src/components/Nav.tsx
@@ -14,7 +14,7 @@ import { useWalletBalance } from '@state/wallet/hooks'
 import { addressesAtom } from '@state/positions/atoms'
 import { toTokenAmount } from '@utils/calculations'
 import { BIG_ZERO } from '@constants/index'
-import logo from 'public/images/OpynLogo.svg'
+import logo from 'public/images/logo.png'
 import WalletButton from './Button/WalletButton'
 import SettingMenu from './SettingsMenu'
 import useAmplitude from '@hooks/useAmplitude'
@@ -32,11 +32,11 @@ const useStyles = makeStyles((theme) =>
     content: {
       maxWidth: '1280px',
       width: '80%',
-      padding: theme.spacing(0, 2.5),
+      padding: theme.spacing(1.5, 5),
       margin: '0 auto',
-      height: '64px',
       display: 'flex',
       alignItems: 'center',
+      justifyContent: 'space-between',
       [theme.breakpoints.down('lg')]: {
         maxWidth: 'none',
         width: '90%',
@@ -45,29 +45,35 @@ const useStyles = makeStyles((theme) =>
         width: '100%',
       },
       [theme.breakpoints.down('sm')]: {
-        padding: theme.spacing(0, 2),
+        padding: theme.spacing(1.5, 4),
       },
       [theme.breakpoints.down('xs')]: {
-        padding: theme.spacing(0, 1),
+        padding: theme.spacing(1.5, 3),
       },
     },
+    leftNav: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'flex-start',
+      gridGap: theme.spacing(1.5),
+    },
+    rightNav: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'flex-end',
+    },
     logo: {
-      marginRight: 'auto',
-      marginTop: theme.spacing(1.75),
-      marginLeft: theme.spacing(-1),
-      cursor: 'pointer',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      flex: '0 0 56px',
     },
     navDiv: {
       display: 'flex',
       alignItems: 'center',
-      position: 'absolute',
-      marginLeft: theme.spacing(12),
-      [theme.breakpoints.down(1042)]: {
-        marginLeft: theme.spacing(18),
-      },
     },
     navLink: {
-      margin: theme.spacing(0, 2),
+      margin: theme.spacing(0, 1.75),
       textDecoration: 'none',
       cursor: 'pointer',
       color: theme.palette.text.secondary,
@@ -86,16 +92,19 @@ const useStyles = makeStyles((theme) =>
     navActive: {
       color: theme.palette.primary.main,
     },
-    wallet: {
-      display: 'flex',
-      marginRight: theme.spacing(2),
-    },
     navDrawer: {
       padding: theme.spacing(2, 4),
       '& > *': {
         marginBottom: theme.spacing(1),
       },
     },
+    menuButton: {
+      padding: 0,
+      marginLeft: theme.spacing(1.5),
+      '&:hover': {
+        backgroundColor: 'transparent',
+      },
+    },
   }),
 )
 
@@ -133,15 +142,16 @@ const Nav: React.FC = () => {
   return (
     <div className={classes.root}>
       <div className={classes.content}>
-        <div className={classes.logo}>
-          <Link href={'/'} passHref>
-            <Image src={logo} alt="logo" width={102} height={44} />
-          </Link>
-        </div>
         {/*For Desktop view*/}
         <Hidden smDown>
-          <div className={classes.navDiv}>
-            <div style={{ display: 'flex' }}>
+          <div className={classes.leftNav}>
+            <Link href={'/'} passHref>
+              <a className={classes.logo}>
+                <Image src={logo} alt="logo" width={56} height={44} />
+              </a>
+            </Link>
+
+            <div className={classes.navDiv}>
               <NavLink
                 highlightForPaths={['/strategies/crab', '/strategies/bull']}
                 path="/strategies/crab"
@@ -172,7 +182,7 @@ const Nav: React.FC = () => {
               </a>
             </div>
           </div>
-          <div className={classes.wallet}>
+          <div className={classes.rightNav}>
             <Button
               variant="outlined"
               color="primary"
@@ -196,66 +206,72 @@ const Nav: React.FC = () => {
           </div>
         </Hidden>
         <Hidden mdUp>
-          <Typography color="primary">{toTokenAmount(balance ?? BIG_ZERO, 18).toFixed(4)} ETH</Typography>
-          <IconButton onClick={() => setNavOpen(true)}>
-            <MenuIcon />
-          </IconButton>
-          <Drawer anchor="right" open={navOpen} onClose={() => setNavOpen(false)}>
-            <div className={classes.navDrawer}>
-              <div style={{ display: 'flex', justifyContent: 'flex-start' }}>
-                <WalletButton />
-                <SettingMenu />
-              </div>
-              <Button
-                variant="outlined"
-                color="primary"
-                onClick={() => {
-                  setCopied(oSqueeth)
-                }}
-                style={{
-                  marginTop: '8px',
-                  width: '200px',
-                }}
-              >
-                {isCopied ? (
-                  <>Copied</>
-                ) : (
-                  <>
-                    <span style={{ textTransform: 'none' }}>oSQTH</span>: {oSqueeth?.substring(0, 6)}...
-                    {oSqueeth?.substring(oSqueeth.length - 4)}
-                  </>
-                )}
-              </Button>
-              <NavLink
-                highlightForPaths={['/strategies/crab', '/strategies/bull']}
-                path="/strategies/crab"
-                name="Strategies"
-              />
-              <NavLink path="/squeeth" name="Squeeth" />
-              <NavLink path="/positions" name="Positions" />
-              <a
-                href="https://squeethportal.xyz"
-                target="_blank"
-                rel="noreferrer"
-                onClick={() => track(SITE_EVENTS.NAV_AUCTION)}
-              >
-                <Typography className={classes.navLink} variant="h6">
-                  Auction
-                </Typography>
+          <div className={classes.leftNav}>
+            <Link href={'/'} passHref>
+              <a className={classes.logo}>
+                <Image src={logo} alt="logo" width={56} height={44} />
               </a>
-              <NavLink path="/lp" name="LP" />
-              <a
-                href="https://opyn.gitbook.io/squeeth/resources/squeeth-faq"
-                target="_blank"
-                rel="noreferrer"
-                onClick={() => track(SITE_EVENTS.NAV_FAQ)}
-              >
-                <Typography className={classes.navLink} variant="h6">
-                  FAQ
-                </Typography>
-              </a>
-            </div>
-          </Drawer>
+            </Link>
+          </div>
+
+          <div className={classes.rightNav}>
+            <Typography color="primary">{toTokenAmount(balance ?? BIG_ZERO, 18).toFixed(4)} ETH</Typography>
+            <IconButton onClick={() => setNavOpen(true)} className={classes.menuButton}>
+              <MenuIcon />
+            </IconButton>
+            <Drawer anchor="right" open={navOpen} onClose={() => setNavOpen(false)}>
+              <div className={classes.navDrawer}>
+                <div style={{ display: 'flex', justifyContent: 'flex-start' }}>
+                  <WalletButton />
+                  <SettingMenu />
+                </div>
+                <Button
+                  variant="outlined"
+                  color="primary"
+                  onClick={() => {
+                    setCopied(oSqueeth)
+                  }}
+                >
+                  {isCopied ? (
+                    <>Copied</>
+                  ) : (
+                    <>
+                      <span style={{ textTransform: 'none' }}>oSQTH</span>: {oSqueeth?.substring(0, 6)}...
+                      {oSqueeth?.substring(oSqueeth.length - 4)}
+                    </>
+                  )}
+                </Button>
+                <NavLink
+                  highlightForPaths={['/strategies/crab', '/strategies/bull']}
+                  path="/strategies/crab"
+                  name="Strategies"
+                />
+                <NavLink path="/squeeth" name="Squeeth" />
+                <NavLink path="/positions" name="Positions" />
+                <a
+                  href="https://squeethportal.xyz"
+                  target="_blank"
+                  rel="noreferrer"
+                  onClick={() => track(SITE_EVENTS.NAV_AUCTION)}
+                >
+                  <Typography className={classes.navLink} variant="h6">
+                    Auction
+                  </Typography>
+                </a>
+                <NavLink path="/lp" name="LP" />
+                <a
+                  href="https://opyn.gitbook.io/squeeth/resources/squeeth-faq"
+                  target="_blank"
+                  rel="noreferrer"
+                  onClick={() => track(SITE_EVENTS.NAV_FAQ)}
+                >
+                  <Typography className={classes.navLink} variant="h6">
+                    FAQ
+                  </Typography>
+                </a>
+              </div>
+            </Drawer>
+          </div>
         </Hidden>
       </div>
     </div>
diff --git a/yarn.lock b/yarn.lock
index ba7ba7737..5faa15bb1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -14784,11 +14784,6 @@ growl@1.10.5:
   resolved "https://registry.yarnpkg.com/growl/-/growl-1.10.5.tgz#f2735dc2283674fa67478b10181059355c369e5e"
   integrity sha512-qBr4OuELkhPenW6goKVXiv47US3clb3/IbuWF9KNKEijAy9oeHxU9IgzjvJhHkUzhaj7rOUD7+YGWqUjLp5oSA==
 
-hamburger-react@^2.5.0:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/hamburger-react/-/hamburger-react-2.5.0.tgz#7c0148af8f02f3b693564d69e590d02db8ffc221"
-  integrity sha512-5GSXe+ucxTPJ0SkhIsPQ/PRDweZPIKya1lfahAuExx31SdheeUA4uOPfQIAirbKona8hvo79VDr5LJQzPXsdpw==
-
 handlebars@^4.0.1, handlebars@^4.7.6:
   version "4.7.7"
   resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.7.7.tgz#9ce33416aad02dbd6c8fafa8240d5d98004945a1"
@@ -22317,8 +22312,6 @@ set-interval-async@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/set-interval-async/-/set-interval-async-2.0.3.tgz#8d9e4904deaf8406fd98219c67fd9ef469f5fae2"
   integrity sha512-8jJgvnhQYQc+XHzyKuJ2g4/0h4jPcT/q3x9VURk+AZohRKpcggcueNhPbS7wOXnamgpAn/enbGl4OnWXurVafg==
-  dependencies:
-    "@babel/runtime" "7.5.0"
 
 set-value@^2.0.0, set-value@^2.0.1:
   version "2.0.1"