Merge pull request #116 from P4-Games/feature/images-refactored

images and styles refactored

src/components/Navbar/Navbar.jsx

@@ -3,17 +3,11 @@ import PropTypes from 'prop-types'
 import { Link as LinkScroll } from 'react-scroll'
 import Link from 'next/link'
 import Image from 'next/image'
-import audio from './music/Dungeon.mp3'
-import Whitepaper from './Whitepaper.jsx'
-import NofTown from './NofTown.jsx'
-import Coin from './images/logo-coin.png'
-import Nof from './images/logo-1.png'
-import SoundOn from './images/sound.png'
-import SoundOff from './images/soundoff.png'
-import Shopimg from './images/shop.png'
 import dynamic from 'next/dynamic'
 import { useRouter } from 'next/router'
 import {useTranslation} from 'next-i18next'
+import Whitepaper from './Whitepaper.jsx'
+import NofTown from './NofTown.jsx'
 
 const LanguageSelection = dynamic(
   () => import('../translation'),
@@ -64,12 +58,12 @@ function Navbar ({
         <div className='navbar__icon'>
           <div className='hover' id='coin'>
             <Link href='/'>
-              <Image alt='coin' src={Coin} id='coin' fill/>
+              <Image alt='coin' src={'/images/navbar/logo-coin.png'} id='coin' fill/>
             </Link>
           </div>
           <div className='hover' id='nof'>
             <Link href='/'>
-              <Image alt='nof' src={Nof} fill/>
+              <Image alt='nof' src={'/images/navbar/logo-1.png'} fill/>
             </Link>
           </div>
         </div>
@@ -105,15 +99,15 @@ function Navbar ({
         <div className='navbar__corner'>
           {(router?.pathname == '/gamma') && walletAddress &&
             <div onClick={() => handleBuyPackClick()} className='navbar__corner__audio'>
-              <Image src={Shopimg} alt='shop' />
+              <Image src={'/images/navbar/shop.png'} alt='shop' height='60' width='60'/>
             </div>}
           <div onClick={() => audioHandleClick()} className='navbar__corner__audio'>
             {click
               ? (
-                <Image src={SoundOn} alt='soundimg' />
+                <Image src={'/images/navbar/soundOn.png'} alt='soundimg' height='60' width='60'/>
                 )
               : (
-                <Image src={SoundOff} alt='soundimg' />
+                <Image src={'/images/navbar/soundOff.png'} alt='soundimg' height='60' width='60'/>
                 )}
             <></>
           </div>
@@ -123,7 +117,7 @@ function Navbar ({
         </div>
       </div>
 
-      <audio src={audio} ref={ref} loop />
+      <audio src={'/music/Dungeon.mp3'} ref={ref} loop />
     </>
   )
 }

src/components/customImage/CustomImage.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 
 function CustomImage ({ src, alt, className }) {
   const [error, setError] = useState(false);
-  const defaultImage =  '/no-image.png'
+  const defaultImage =  '/images/common/no-image.png'
 
   const handleError = () => {
     setError(true)

src/components/translation/LanguageSelection.jsx

@@ -1,8 +1,4 @@
-import World from './images/world.png'
-import Brazilean from './images/br.png'
-import English from './images/en.png'
-import Spanish from './images/es.png'
-import Image from 'next/image.js'
+import Image from 'next/image'
 import { useSettingsContext } from '../../hooks'
 
 function LanguageSelection () {
@@ -35,7 +31,7 @@ function LanguageSelection () {
     <>
       <div className='dropdown' data-dropdown>
         <button className='link' data-dropdown-button>
-          <Image src={World} alt='language button' fill />
+          <Image src={'/images/navbar/world.png'} alt='language button' fill/>
         </button>
         <div className='dropdown-menu'>
           <ul className='language_ul'>
@@ -46,7 +42,7 @@ function LanguageSelection () {
               >
                 <Image
                   onClick={() => handleChangeLang('en')}
-                  src={English}
+                  src={'/images/flags/en.png'}
                   alt='English button'
                   height={30} width={50}
                 />
@@ -59,7 +55,7 @@ function LanguageSelection () {
               >
                 <Image
                   onClick={() => handleChangeLang('br')}
-                  src={Brazilean}
+                  src={'/images/flags/br.png'}
                   alt='Brazilean button'
                   height={30} width={50}
                 />
@@ -72,7 +68,7 @@ function LanguageSelection () {
               >
                 <Image
                   onClick={() => handleChangeLang('es')}
-                  src={Spanish}
+                  src={'/images/flags/es.png'}
                   alt='Spanish button'
                   height={30} width={50}
                 />

src/context/Web3ContextNew.js

@@ -106,7 +106,7 @@ const Web3ContextProvider = ({ children }) => {
       appMetadata: {
         name: 'NoF',
         description: 'Number one Fun',
-        icon: '/nof.png',
+        icon: '/images/common/nof.png',
         recommendedInjectedWallets: [{ name: 'MetaMask', url: 'https://metamask.io' }]
       }
     })

src/sections/Alpha/AlphaAlbums.jsx

@@ -96,7 +96,7 @@ const AlphaAlbums = ({
           ? (
             <div>
               <div className='alpha_albums_season'>
-                <img alt='alpha-full' src={'/marco.png'} />
+                <img alt='alpha-full' src={'/images/common/marco.png'} />
                 <span className='alpha_albums_season_name'>
                   {seasonNameAlbum || 'Number One Fan'}
                 </span>

src/sections/Alpha/AlphaCards.jsx

@@ -11,26 +11,19 @@ import { fetchDataAlpha } from '../../services/alpha'
 import { checkApproved } from '../../services/dai'
 import CustomImage from '../../components/customImage'
 
-import vida0 from './images/vida0.png'
-import vida1 from './images/vida1.png'
-import vida2 from './images/vida2.png'
-import vida3 from './images/vida3.png'
-import vida4 from './images/vida4.png'
-import vida5 from './images/vida5.png'
-
 import {useTranslation} from 'next-i18next'
 import { useWeb3Context, walletAddress } from '../../hooks'
 import { useLayoutContext } from '../../hooks'
 
 import { checkInputAddress } from '../../utils/addresses'
 
 const vidas = [
-  vida0.src,
-  vida1.src,
-  vida2.src,
-  vida3.src,
-  vida4.src,
-  vida5.src
+  '/images/alpha/vida0.png',
+  '/images/alpha/vida1.png',
+  '/images/alpha/vida2.png',
+  '/images/alpha/vida3.png',
+  '/images/alpha/vida4.png',
+  '/images/alpha/vida5.png'
 ]
 
 let swiper //eslint-disable-line 
@@ -46,7 +39,7 @@ const AlphaCards = ({ alphaMidButton }) => {
   const [cards, setCards] = useState([])
   const [noCardsError, setNoCardsError] = useState('')
   const [cardIndex, setCardIndex] = useState(0)
-  const [vida, setVida] = useState(vida0.src)
+  const [vida, setVida] = useState('/images/alpha/vida0.png')
   const [seasonNames, setSeasonNames] = useState(null)
   const [seasonName, setSeasonName] = useState('')
   const [packPrices, setPackPrices] = useState(null)
@@ -539,7 +532,7 @@ const AlphaCards = ({ alphaMidButton }) => {
             {seasonNames && seasonNames.length > 0 && 
             <>
               <div className='alpha_season'>
-                <img alt='marco' src={'/marco.png'} />
+                <img alt='marco' src={'/images/common/marco.png'} />
                 <span className='alpha_season_name'>{seasonName}</span>
                 <select
                   value={seasonName}

src/sections/Gamma/GammaAlbumEmpty.jsx

@@ -11,7 +11,7 @@ const GammaAlbumEmpty = React.forwardRef((_, book) => {
       <div style={{ background: 'none' }} key={index} className='grid-item'>
         {gammaCardsPages.user[item]?.stamped
           ? <img src={`${storageUrlGamma}/T1/${item}.png`} alt='img' />
-          : <img src='/gamma/Nofy.png' alt='img' />}
+          : <img src='/images/gamma/Nofy.png' alt='img' />}
         {!gammaCardsPages.user[item]?.stamped && <div className='numbershirt'>{gammaCardsPages.user[item]?.name}</div>}
       </div>
     )

src/sections/Gamma/GammaPack.jsx

@@ -55,11 +55,11 @@ const GammaPack = ({ setPackIsOpen, openPackage, setOpenPackage, cardsNumbers, l
         >
           <motion.img
             animate={openPackage ? { opacity: 0, x: -275, zIndex: 111111 } : ''}
-            transition={{ duration: 2, delay: 0 }} id='top' src='/gamma/SobreTop.png' alt=''
+            transition={{ duration: 2, delay: 0 }} id='top' src='/images/gamma/SobreTop.png' alt=''
           />
           <motion.img
             animate={openPackage ? { opacity: 0, zIndex: 111111 } : ''}
-            transition={{ duration: 1, delay: 3 }} id='bottom' src='/gamma/SobreBottom.png' alt=''
+            transition={{ duration: 1, delay: 3 }} id='bottom' src='/images/gamma/SobreBottom.png' alt=''
           />
           <motion.img
             animate={openPackage ? { y: -100 } : ''}

src/sections/Gamma/index.jsx

@@ -261,18 +261,9 @@ const index = React.forwardRef(() => {
     await fetchInventory()
   }
 
-  return (
-    <>
-      <Navbar
-        walletAddress={walletAddress}
-        cardInfo={cardInfo}
-        setCardInfo={setCardInfo}
-        inventory={inventory}
-        setInventory={setInventory}
-        handleBuyPackClick={handleBuyPackClick}
-      />
-
-      {!walletAddress && <div className='alpha'>
+  const NotConnected = () => {
+    return (
+      <div className='alpha'>
         <div className='main_buttons_container'>
           <button
             className='alpha_button alpha_main_button'
@@ -315,9 +306,22 @@ const index = React.forwardRef(() => {
             </div>
           </div>
         </div>
-
       </div>
-      }
+    )  
+  }
+
+  return (
+    <>
+      <Navbar
+        walletAddress={walletAddress}
+        cardInfo={cardInfo}
+        setCardInfo={setCardInfo}
+        inventory={inventory}
+        setInventory={setInventory}
+        handleBuyPackClick={handleBuyPackClick}
+      />
+
+     {!walletAddress && <NotConnected />}
 
       {walletAddress && <div className='gamma_main'>
         {packIsOpen && <GammaPack
@@ -328,21 +332,17 @@ const index = React.forwardRef(() => {
           openPackage={openPackage}
         />}
         <div className='hero__top'>
-          {!mobile && inventory &&
-            <CustomImage
-              alt='albums' src='/gamma/albums.png'
-              onClick={() => setInventory(false)} className='gammaAlbums'
+          {!mobile &&
+            <div 
+              onClick={() => setInventory(!inventory)}
+              className= {inventory ? 'gammaAlbums' : 'gammaAlbums2'}
             />
           }
 
-          {!mobile && !inventory &&
-            <div onClick={() => setInventory(false)} className='gammaAlbums2' />
-          }
-
           <div
             style={inventory 
-              ? { backgroundImage: 'url(\'/gamma/InventarioFondo.png\')' }
-              : { backgroundImage: 'url(\'/gamma/GammaFondo.png\')' }}
+              ? { backgroundImage: 'url(\'/images/gamma/InventarioFondo.png\')' }
+              : { backgroundImage: 'url(\'/images/gamma/GammaFondo.png\')' }}
             className='hero__top__album'
           >
             {gammaCardsContract && inventory && !cardInfo &&

src/sections/Hero/Friends.json

@@ -2,41 +2,41 @@
     {
         "id": 1,
         "caption": "Kenpa505",
-        "icon": "/book/kenpa505.png"
+        "icon": "/images/book/kenpa505.png"
     },
     {
         "id": 2,
         "caption": "Criptomaniakos",
-        "icon": "/book/criptomaniakos.png"
+        "icon": "/images/book/criptomaniakos.png"
     },
     {
         "id": 3,
         "caption": "Yo Gamer",
-        "icon": "/book/yo_gamer.png"
+        "icon": "/images/book/yo_gamer.png"
     },
     {
         "id": 4,
         "caption": "Crypto Brothers",
-        "icon": "/book/crypto_brothers.png"
+        "icon": "/images/book/crypto_brothers.png"
     },
     {
         "id": 5,
         "caption": "Dorrego",
-        "icon": "/book/dorrego.png"
+        "icon": "/images/book/dorrego.png"
     },
     {
         "id": 6,
         "caption": "Nico NFT",
-        "icon": "/book/niconft.png"
+        "icon": "/images/book/niconft.png"
     },
     {
         "id": 7,
         "caption": "Valiant",
-        "icon": "/book/valiant.png"
+        "icon": "/images/book/valiant.png"
     },
     {
         "id": 8,
         "caption": "Aca Esta Javi",
-        "icon": "/book/acaestajavi.png"
+        "icon": "/images/book/acaestajavi.png"
     }
 ]