Merge pull request #25 from GuilhermeFreire-Dev/23-fix-ajustes-de-layout

Fix Ajustes de Layout
GuilhermeFreire-Dev · Jul 19, 2023 · 9cf2b97 · 9cf2b97
2 parents f37d2a3 + df07886
commit 9cf2b97
Show file tree

Hide file tree

Showing 19 changed files with 158 additions and 215 deletions.
diff --git a/public/index.html b/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Game Store</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/components/layout/Catalog/CardC.jsx b/src/components/layout/Catalog/CardC.jsx
diff --git a/src/components/layout/Catalog/CardV.jsx b/src/components/layout/Catalog/CardV.jsx
@@ -7,41 +7,35 @@ function CardV({game}) {
   return (
     game && (
       <a href={`${process.env.REACT_APP_URL}/game/${game.id}`}>
-        <div className="flex flex-col
-                      bg-stone-800 rounded-xl
-                        w-52 max-h-96 p-3 m-2
-                        h-full
-                        select-none
-                        cursor-pointer
-                        hover:brightness-110"
-        >
-          <img className="h-60 m-1
-                          rounded-lg" src={ game.attributes.image_url } alt="farcry" />
-          <div className="flex flex-col justify-between h-28">
+        <div className="flex flex-col bg-transparent rounded-xl w-52 p-3
+                        h-full select-none cursor-pointer
+                        hover:brightness-110">
+          <img className="h-60 m-1 rounded-lg" src={ game.attributes.image_url } alt={game.attributes.name} />
+          <div className="flex flex-col pl-1 pr-1 h-28">
             <h5 className="font-bold">{ game.attributes.name }</h5>
             {
               game.attributes.edition && (
                 <span className="bg-stone-700 text-xs font-semibold text-center
-                              pl-2 pr-2 pb-0.5 w-2/3
-                              rounded-lg">{ game.attributes.edition }</span>
+                              pl-2 pr-2 pb-0.5 mt-2 w-2/3 rounded-lg">
+                  { game.attributes.edition }
+                </span>
               )
             }
-            <div className="flex justify-between items-center
-                            mt-1"
-            >
+            <div className="flex justify-between items-center mt-1">
               <div className="mt-2">
-                <p className="text-xs text-stone-400 line-through">{ utils.getMonetaryFormat(game.attributes.last_price) }</p>
+                {
+                  game.attributes.last_price && (
+                    <p className="text-xs text-stone-400 line-through">{ utils.getMonetaryFormat(game.attributes.last_price) }</p>
+                  )
+                }
                 <p className="text-lg font-semibold">{ utils.getMonetaryFormat(game.attributes.current_price) }</p>
               </div>
               {
-                utils.getDiscount(game.attributes.current_price, game.attributes.last_price) && (
+                utils.getDiscount(game.attributes.current_price, game.attributes.last_price) > 0 && (
                   <span className="bg-gradient-to-r from-violet-600 to-blue-600
-                                  w-12 p-0.5
-                                  rounded-lg
-                                  text-center
-                                  text-sm
+                                  w-12 p-0.5 rounded-lg text-center text-sm
                                   font-semibold">
-                    -{ utils.getDiscount(game.attributes.current_price, game.attributes.last_price) }%
+                    { `-${utils.getDiscount(game.attributes.current_price, game.attributes.last_price)}%` }
                   </span>
                 )
               }

diff --git a/src/components/layout/Catalog/Catalog.jsx b/src/components/layout/Catalog/Catalog.jsx
diff --git a/src/components/layout/Footer/Footer.jsx b/src/components/layout/Footer/Footer.jsx
@@ -1,17 +1,25 @@
-import { BsFacebook, BsInstagram, BsTwitter } from "react-icons/bs";
+import { IoLogoFacebook, IoLogoInstagram, IoLogoTwitch, IoLogoTwitter } from "react-icons/io5";
 
 function Footer() {
   return (
-    <footer className="flex justify-between items-center
-                     bg-stone-950
-                       pl-20 pt-10 pb-10 pr-20"
-    >
+    <footer className="flex justify-between items-center bg-stone-950
+                       pl-20 pt-10 pb-10 pr-20">
       <div className="flex flex-col">
-        <a className="link-btn mb-1" href="#">Suporte</a>
-        <a className="link-btn mb-1" href="#">Política de reembolso</a>
-        <a className="link-btn mb-1" href="#">Cookies</a>
-        <a className="link-btn mb-1" href="#">Gamers Club</a>
-        <a className="link-btn mb-1" href="#">Contate-nos</a>
+        <a className="mb-2 pt-1 pr-3 pb-2 pl-3
+                        rounded-2xl duration-300
+                        hover:bg-stone-600" href="#">Quem somos</a>
+        <a className="mb-2 pt-1 pr-3 pb-2 pl-3
+                        rounded-2xl duration-300
+                        hover:bg-stone-600" href="#">Institucional</a>
+        <a className="mb-2 pt-1 pr-3 pb-2 pl-3
+                        rounded-2xl duration-300
+                        hover:bg-stone-600" href="#">Política de privacidade</a>
+        <a className="mb-2 pt-1 pr-3 pb-2 pl-3
+                        rounded-2xl duration-300
+                        hover:bg-stone-600" href="#">Gamers Club</a>
+        <a className="mb-2 pt-1 pr-3 pb-2 pl-3
+                        rounded-2xl duration-300
+                        hover:bg-stone-600" href="#">Contato</a>
       </div>
       <div className="">
         <img className="mb-5" src="/images/fulllogo.svg" alt="fulllogo" />
@@ -23,9 +31,9 @@ function Footer() {
       <div>
         <p>Siga nossas redes</p>
         <div className="flex mt-2">
-          <a href="#"><BsInstagram className="mr-2 cursor-pointer"></BsInstagram></a>
-          <a href="#"><BsFacebook className="mr-2 cursor-pointer"></BsFacebook></a>
-          <a href="#"><BsTwitter className="cursor-pointer"></BsTwitter></a>
+          <a href="#"><IoLogoInstagram className="mr-2 w-5 h-5 cursor-pointer"></IoLogoInstagram></a>
+          <a href="#"><IoLogoFacebook className="mr-2 w-5 h-5 cursor-pointer"></IoLogoFacebook></a>
+          <a href="#"><IoLogoTwitter className="w-5 h-5 cursor-pointer"></IoLogoTwitter></a>
         </div>
       </div>
     </footer>

diff --git a/src/components/layout/Game/Classification.jsx b/src/components/layout/Game/Classification.jsx
@@ -37,7 +37,7 @@ function Classification({classification}) {
   }
 
   return (
-    <span className="pr-20">
+    <span className="pr-10">
       <p>Classificação Indicativa:</p>
       <p className={"border-2 rounded-lg p-1 mt-1 w-10 h-10 text-center font-bold text-lg " + color}>{ classification !== 1 ? classification : "L"}</p>
     </span>

diff --git a/src/components/layout/Game/Media.jsx b/src/components/layout/Game/Media.jsx
@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { IoChevronBack, IoChevronForward } from "react-icons/io5";
 
 function Media({medias}) {
 
@@ -25,28 +26,20 @@ function Media({medias}) {
                                         bg-stone-900 bg-opacity-80
                                           -mr-14 w-10 h-10 rounded-full
                                           hover:bg-stone-800 hover:bg-opacity-80 duration-300">
-          <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#fff">
-            <path d="M0 0h24v24H0V0z" fill="none"/>
-            <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12l4.58-4.59z"/>
-          </svg>
+          <IoChevronBack></IoChevronBack>
         </button>
         {
           medias.data.map(function (media, id = 0) {
             return (
-              <>
-                <img key={media.id} className={++id === index ? "rounded-xl w-full h-full" : "hidden" } src={media.attributes.media_url} alt={media.attributes.description}></img>
-              </>
+              <img key={media.id} className={++id === index ? "rounded-xl w-full h-full" : "hidden" } src={media.attributes.media_url} alt={media.attributes.description}></img>
             );
           })
         }
         <button type="button" onClick={next} className="flex justify-center items-center relative 
                                         bg-stone-900 bg-opacity-80
                                           -m-14 w-10 h-10 rounded-full
                                           hover:bg-stone-800 hover:bg-opacity-80 duration-300">
-          <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#fff">
-            <path d="M0 0h24v24H0V0z" fill="none"/>
-            <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6z"/>
-          </svg>
+          <IoChevronForward></IoChevronForward>
         </button>
       </div>
       <div className="w-full inline-flex justify-center p-3">

diff --git a/src/components/layout/Game/SimilarGames.jsx b/src/components/layout/Game/SimilarGames.jsx
@@ -36,7 +36,9 @@ function SimilarGames({genres, gameId}) {
     games.length > 0 && (
       <>
         <h3 className="text-2xl mb-5 mt-10 font-bold">Você pode se interessar por</h3>
-        <div className="flex justify-start w-fit">
+        <div className="flex justify-start flex-wrap 
+                      overflow-y-hidden 
+                      m-auto mb-5 pb-10 max-h-96">
           {
             games.map(game => {
               return (

diff --git a/src/components/layout/Game/Specs.jsx b/src/components/layout/Game/Specs.jsx
@@ -1,9 +1,9 @@
 
 
-function Specs({specs}) {
+function Specs({specs, nvl}) {
   return (
     <div className="pl-4 pr-4 w-1/2">
-      <h5 className="text-lg mb-2">Requisitos mínimos:</h5>
+      <h5 className="text-lg mb-2">{ `Requisitos ${nvl}:`}</h5>
       <ul>
         <li className="mb-2">
           <span>Sistema operacional: </span>

diff --git a/src/components/layout/Homepage/CardH.jsx b/src/components/layout/Homepage/CardH.jsx
@@ -3,12 +3,9 @@ function CardH({game}) {
   return (
     <a className="w-1/2" href={`${process.env.REACT_APP_URL}/game/${game.id}`}>
       <div className="bg-stone-800 rounded-xl
-                      p-4 pb-0 m-2 min-h-full
-                      select-none
-                      hover:brightness-110"
-      >
-        <div className="w-full rounded-lg h-72 mb-5
-                        bg-cover bg-center bg-no-repeat"
+                      p-4 pb-0 m-2 min-h-full select-none
+                      hover:brightness-110">
+        <div className="w-full rounded-lg h-72 mb-5 bg-cover bg-center bg-no-repeat"
           style={{backgroundImage: `url(${game.attributes.thumb})`}}></div>
         <div>
           <h4 className="text-xl font-bold pb-2">{ game.attributes.name }</h4>

diff --git a/src/components/layout/Homepage/Carousel.jsx b/src/components/layout/Homepage/Carousel.jsx
@@ -12,12 +12,12 @@ function Carousel() {
 
   async function getCarousel() {
     if (!carousel) {
-      await axios.get("http://localhost:1337/api/game-carousels/1?populate=*")
+      await axios.get(`${process.env.REACT_APP_API_URL}/api/game-carousels/1?populate=*`)
       .then(response => {
         setCarousel(response.data.data.attributes.games.data);
       })
       .catch(error => {
-        console.log("error");
+        console.log(error);
       })
     }
   } 
@@ -49,12 +49,11 @@ function Carousel() {
             }
           </div>
         </div>
-        <div className="flex flex-col justify-between 
-                        w-1/3 pl-10">
+        <div className="flex flex-col justify-between w-1/3 pl-10">
           {
             carousel.map(function(item, id = 0) {
               return (
-                <div key={item.id} className={++id === index ? "bg-stone-500 p-5 w-full rounded-xl cursor-pointer duration-300" : "bg-stone-800 p-5 w-full rounded-xl cursor-pointer duration-300 hover:bg-stone-700"}
+                <div key={item.id} className={++id === index ? "bg-stone-500 p-5 w-full rounded-xl cursor-pointer duration-300 select-none" : "bg-stone-800 p-5 w-full rounded-xl cursor-pointer duration-300 hover:bg-stone-700 select-none"}
                   onClick={() => sideTo(id)}
                 >
                   <p>{item.attributes.name}</p>

diff --git a/src/components/layout/Homepage/Highlights.jsx b/src/components/layout/Homepage/Highlights.jsx
@@ -10,15 +10,15 @@ function Highlights() {
     if (!games.length) {
       getHighlightsGames();
     }
-  }, [])
+  }, []);
 
   async function getHighlightsGames() {
     await axios.get(`${process.env.REACT_APP_API_URL}/api/games?filters[highlighted][$eq]=true`)
     .then(response => {
       setGames(response.data.data);
     })
     .catch(error => {
-      console.log("error");
+      console.log(error);
     })
   }
 

diff --git a/src/components/layout/Homepage/PopularGames.jsx b/src/components/layout/Homepage/PopularGames.jsx
@@ -1,28 +1,35 @@
 import axios from "axios";
 import { useEffect, useState } from "react";
 import CardV from "../Catalog/CardV";
+import { IoChevronForwardOutline } from "react-icons/io5";
 
 function PopularGames() {
 
   const [games, setGames] = useState([]);
 
   useEffect(() => {
     if (!games.length) {
-      axios.get(`${process.env.REACT_APP_API_URL}/api/games?sort=popularity%3Adesc&pagination[pageSize]=5`)
+      axios.get(`${process.env.REACT_APP_API_URL}/api/games?sort=popularity%3Adesc`)
       .then(response => {
         setGames(response.data.data);
       })
       .catch(error => {
-        console.log("error");
+        console.log(error);
       })
     }
   }, []);
 
   return (
     games.length > 0 && (
       <>
-        <h3 className="text-2xl mb-5 ml-10 font-bold">Mais populares</h3>
-        <div className="flex w-fit justify-start m-auto pb-10">
+        <div className="inline-flex items-center 
+                        mb-3 ml-10">
+          <h3 className="text-2xl font-bold">Mais populares</h3>
+          <IoChevronForwardOutline className="ml-2 mt-1 cursor-pointer"></IoChevronForwardOutline>
+        </div>
+        <div className="flex justify-around flex-wrap 
+                      w-fit overflow-y-hidden 
+                      m-auto mb-5 pb-10 max-h-96">
           {
             games.map(game => ((
               <CardV key={game.id} game={game}></CardV>

diff --git a/src/components/layout/Homepage/Promotions.jsx b/src/components/layout/Homepage/Promotions.jsx
@@ -1,25 +1,36 @@
 import axios from "axios";
 import { useEffect, useState } from "react";
 import CardV from "../Catalog/CardV";
+import { IoChevronForwardOutline } from "react-icons/io5";
 
 function Promotions() {
 
   const [games, setGames] = useState([]);
 
   useEffect(() => {
-    axios.get(`${process.env.REACT_APP_API_URL}/api/games`)
+    getPromotionsGames();
+  }, []);
+
+  function getPromotionsGames() {
+    axios.get(`${process.env.REACT_APP_API_URL}/api/games?pagination[pageSize]=10`)
     .then(response => {
       setGames(response.data.data);
     })
     .catch(error => {
       console.log(error);
     })
-  }, []);
+  }
 
   return (
     <>
-      <h3 className="text-2xl mb-5 font-bold">Promoções</h3>
-      <div className="flex justify-between w-fit overflow-hidden m-auto pb-10">
+      <div className="inline-flex items-center 
+                      mb-3 ml-10">
+        <h3 className="text-2xl font-bold">Promoções</h3>
+        <IoChevronForwardOutline className="ml-2 mt-1 cursor-pointer"></IoChevronForwardOutline>
+      </div>
+      <div className="flex justify-around flex-wrap 
+                      w-fit overflow-y-hidden 
+                      m-auto mb-5 pb-10 max-h-96">
         {
           games.map(game => {
             return (