Merge pull request #138 from P4-Games/feature/styles

refactored navbar styles
P4-Games · Nov 17, 2023 · 308df20 · 308df20
2 parents 929d227 + 06bf489
commit 308df20
Show file tree

Hide file tree

Showing 5 changed files with 192 additions and 292 deletions.
diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx
@@ -8,12 +8,11 @@ import {useTranslation} from 'next-i18next'
 import Whitepaper from './Whitepaper.jsx'
 import NofTown from './NofTown.jsx'
 import LanguageSelection from '../translation'
-
+import { useWeb3Context } from '../../hooks'
 
 function Navbar ({
   goToCollections,
   alphaMidButton,
-  walletAddress,
   setInventory,
   setCardInfo,
   cardInfo,
@@ -25,18 +24,23 @@ function Navbar ({
   const router = useRouter()
   const ref = useRef(null)
   const [click, setClick] = useState(false)
-
+  const { walletAddress } = useWeb3Context()
+  const [inHome, setInHome] = useState(true)
+  const [showShop, setShowShop] = useState(false)
+
   useEffect(() => {
     setPage(window.history.state.url)
-
+    setShowShop(router?.pathname == '/gamma' && walletAddress)
     setMidButton(t('collections'))
+
     if (window.history.state.url.endsWith('/alpha')) {
+      setInHome(false)
       setMidButton('Albums')
     } else if (window.history.state.url.endsWith('/gamma')) {
+      setInHome(false)
       setMidButton('Inventory')
     }
-  }, [page, t])
-
+  }, [page, t, router?.pathname, walletAddress])
 
   const audioHandleClick = () => {
     setClick(!click)
@@ -47,6 +51,37 @@ function Navbar ({
     }
   }
 
+  const MidButton = () => (
+    <LinkScroll to={t('contacto')}>
+      { (walletAddress || inHome) && <button
+        onClick={() => {
+          if (page.endsWith('/alpha')) {
+            alphaMidButton()
+          } else if (page.endsWith('/gamma')) {
+            if (cardInfo) {
+              setCardInfo(false)
+              setInventory(true)
+            } else { 
+              setInventory(true)
+            }
+          } else {
+            goToCollections(5)
+          }
+        }}
+        className='navbar__ul__li__contacto'
+      >
+        {midButton}
+      </button>}
+    </LinkScroll>
+  )
+
+  const ButtonShop = () => (
+    showShop ?
+    <div onClick={() => handleBuyPackClick()} className='navbar__corner__shop'>
+      <Image src={'/images/navbar/shop.png'} alt='shop' height='60' width='60'/>
+    </div> : null
+  )
+
   return (
     <>
       <div className='navbar'>
@@ -63,48 +98,20 @@ function Navbar ({
           </div>
         </div>
         <ul className='navbar__ul'>
-          <li className='navbar__ul__li'>
+          <li className={showShop ? 'navbar__ul__li__shop' : 'navbar__ul__li'}>
             <NofTown />
-            <LinkScroll
-              to={t('contacto')}
-            >
-              <button
-                onClick={() => {
-                  if (page.endsWith('/alpha')) {
-                    alphaMidButton()
-                  } else if (page.endsWith('/gamma')) {
-                    if (cardInfo) {
-                      setCardInfo(false)
-                      setInventory(true)
-                    } else { 
-                      setInventory(true)
-                    }
-                  } else {
-                    goToCollections(5)
-                  }
-                }}
-                className='navbar__ul__li__contacto'
-              >
-                {midButton}
-              </button>
-            </LinkScroll>
+            <MidButton />
             <Whitepaper />
           </li>
         </ul>
         <div className='navbar__corner'>
-          {(router?.pathname == '/gamma') && walletAddress &&
-            <div onClick={() => handleBuyPackClick()} className='navbar__corner__audio'>
-              <Image src={'/images/navbar/shop.png'} alt='shop' height='60' width='60'/>
-            </div>}
+          <ButtonShop />
           <div onClick={() => audioHandleClick()} className='navbar__corner__audio'>
-            {click
-              ? (
-                <Image src={'/images/navbar/soundOn.png'} alt='soundimg' height='60' width='60'/>
-                )
-              : (
-                <Image src={'/images/navbar/soundOff.png'} alt='soundimg' height='60' width='60'/>
-                )}
-            <></>
+            <Image 
+              src={`${'/images/navbar'}/${click ? 'soundOn' : 'soundOff'}.png`}
+              alt='soundimg'
+              height='60'
+              width='60'/>
           </div>
           <LanguageSelection
 
@@ -120,7 +127,6 @@ function Navbar ({
 Navbar.propTypes = {
   goToCollections: PropTypes.func,
   alphaMidButton: PropTypes.func,
-  walletAddress: PropTypes.string,
   setInventory: PropTypes.func,
   setCardInfo: PropTypes.func,
   cardInfo: PropTypes.bool,

diff --git a/src/sections/Gamma/index.jsx b/src/sections/Gamma/index.jsx
@@ -1,13 +1,13 @@
 import React, { useState, useEffect } from 'react'
 import { ethers } from 'ethers'
-import GammaInfoCard from './GammaInfoCard'
+import GammaCardInfo from './GammaCardInfo'
 import Swal from 'sweetalert2'
 import {useTranslation} from 'next-i18next'
 
 import Navbar from '../../components/Navbar'
 import Footer from '../../components/Footer'
 import GammaAlbum from './GammaAlbum'
-import GammaPack from './GammaPack'
+import GammaPackOpen from './GammaPackOpen'
 import { checkApproved } from '../../services/dai'
 import { fetchPackData } from '../../services/gamma'
 import { 
@@ -352,10 +352,60 @@ const index = React.forwardRef(() => {
     </div>
   )
 
+  const GammaPackInfo = () => {
+    if (!mobile && inventory) {
+      return (
+        <div className='gammapack'>
+          <div className=''>
+              <h1
+                className={numberOfPacks==='0' ? 'pack_number_disabled' : 'pack_number'}
+                onClick={() => { setPackIsOpen(true), handleOpenPack() }} >
+                {numberOfPacks}
+              </h1>
+          </div>
+          <div 
+            onClick={() => { setPackIsOpen(true), handleOpenPack() }} 
+            className={numberOfPacks==='0' ? 'openPack_disabled' : 'openPack'}>
+            <h3>{t('abrir')}</h3>
+          </div>
+          <div
+            onClick={() => { handleTransferPack() }}
+            className={numberOfPacks==='0' ? 'transferPack_disabled' : 'transferPack'}>
+            <h3>{t('transferir')}</h3>
+          </div>
+        </div>
+      )
+    }
+
+    if (!mobile && !inventory && cardsQtty >= 0) {
+      return (
+        <div className='gammaComplete'>
+          <div className={cardsQtty===120 ? 'title_complete' : 'title_incomplete'}>
+            <h3>
+                {cardsQtty === 120 
+                  ? `${t('album')} ${t('completo')}`
+                  : `${t('album')} ${t('incompleto')}`
+                } 
+            </h3>
+          </div>
+          <div className={cardsQtty===120 ? 'qtty_complete' : 'qtty_incomplete'}>
+            <h3>{`${cardsQtty}/120`}</h3>
+          </div>
+          {cardsQtty===120 && <div
+            onClick={() => { handleFinishAlbum() }}
+            className={cardsQtty===120 ? 'completeAlbum' : 'completeAlbum_disabled'}>
+            <h3>{t('reclamar_premio')}</h3>
+          </div>}
+        </div>
+      )
+    }
+
+    return (<></>)
+  }
+
   return (
     <>
       <Navbar
-        walletAddress={walletAddress}
         cardInfo={cardInfo}
         setCardInfo={setCardInfo}
         inventory={inventory}
@@ -366,7 +416,7 @@ const index = React.forwardRef(() => {
      {!walletAddress && <NotConnected />}
 
       {walletAddress && <div className='gamma_main'>
-        {packIsOpen && <GammaPack
+        {packIsOpen && <GammaPackOpen
           loaderPack={loaderPack}
           setPackIsOpen={setPackIsOpen}
           cardsNumbers={openPackCardsNumbers}
@@ -392,12 +442,7 @@ const index = React.forwardRef(() => {
               showInventory={false}
               paginationObj={paginationObj}
               setImageNumber={setImageNumber}
-              setCardInfo={setCardInfo}/>
-            /*
-              <GammaAlbumStatistics
-                paginationObj={paginationObj}
-              />
-            */}
+              setCardInfo={setCardInfo}/>}
             {inventory && !cardInfo &&
             <GammaAlbum
               showInventory={true}
@@ -406,54 +451,13 @@ const index = React.forwardRef(() => {
               setCardInfo={setCardInfo}/>
             }
             {inventory && cardInfo &&
-              <GammaInfoCard 
+              <GammaCardInfo 
                 imageNumber={imageNumber} 
                 handleFinishInfoCard={handleFinishInfoCard}
               />
             }
           </div>
-
-          {!mobile && inventory &&          
-            <div className='gammapack'>
-              <div className=''>
-                  <h1
-                    className={numberOfPacks==='0' ? 'pack_number_disabled' : 'pack_number'}
-                    onClick={() => { setPackIsOpen(true), handleOpenPack() }} >
-                    {numberOfPacks}
-                  </h1>
-              </div>
-              <div 
-                onClick={() => { setPackIsOpen(true), handleOpenPack() }} 
-                className={numberOfPacks==='0' ? 'openPack_disabled' : 'openPack'}>
-                <h3>{t('abrir')}</h3>
-              </div>
-              <div
-                onClick={() => { handleTransferPack() }}
-                className={numberOfPacks==='0' ? 'transferPack_disabled' : 'transferPack'}>
-                <h3>{t('transferir')}</h3>
-              </div>
-            </div>
-          }
-
-          {!mobile && !inventory && cardsQtty >= 0 &&
-            <div className='gammaComplete'>
-              <div className={cardsQtty===120 ? 'title_complete' : 'title_incomplete'}>
-                <h3>
-                    {cardsQtty === 120 
-                      ? `${t('album')} ${t('completo')}`
-                      : `${t('album')} ${t('incompleto')}`
-                    } 
-                </h3>
-              </div>
-              <div className={cardsQtty===120 ? 'qtty_complete' : 'qtty_incomplete'}>
-                <h3>{`${cardsQtty}/120`}</h3>
-              </div>
-              {cardsQtty===120 && <div
-                onClick={() => { handleFinishAlbum() }}
-                className={cardsQtty===120 ? 'completeAlbum' : 'completeAlbum_disabled'}>
-                <h3>{t('reclamar_premio')}</h3>
-              </div>}
-            </div>}
+          <GammaPackInfo />
         </div>
       </div>}
       <Footer />

diff --git a/src/sections/Hero/Hero.jsx b/src/sections/Hero/Hero.jsx
@@ -233,7 +233,6 @@ const Hero = React.forwardRef((_, book) => {
               <div className='hero__top__album__book__page__page-content'>
                 <h3> {t ? t('ECONOMICS') : ''}</h3>
                 <p className='hero__top__album__book__page__text2'>
-                  {/* {t("NoF economy")} */}
                   {t ? t('NoF economy') : ''}
                 </p>
                 <div className='season_container'>

diff --git a/src/styles/_hero.scss b/src/styles/_hero.scss
@@ -25,7 +25,7 @@ $groundHeight: 40px;
     left 0px bottom $groundHeight,
     left 0px bottom 0px;
   animation: back 120s infinite linear;
-  padding: 0px 9% 0px 0px;
+  padding: 0px 0px 0px 0px;
 
   @keyframes back {
     0% {
@@ -577,6 +577,9 @@ $groundHeight: 40px;
     }
   }
 }
+.navbar__icon {
+  display: flex;
+}
 
 .hero__top__conteiner__swiper {
   position: absolute;