style: nav bars style improvement

opynfinance · Feb 9, 2023 · 305fa47 · 305fa47
1 parent 5c86a69
commit 305fa47
Show file tree

Hide file tree

Showing 5 changed files with 170 additions and 131 deletions.
diff --git 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
@@ -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
@@ -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>