Feature/style review

src/components/marvel-characters.jsx

@@ -3,6 +3,7 @@ import { useEffect, useState } from 'react';
 import Card from '../components/card';
 import Modal from '../components/modal';
 import Profile from '../components/profile';
+import '../style/marvel-characters.scss';
 
 const publicKey = import.meta.env.VITE_PUBLIC_KEY;
 
@@ -12,7 +13,8 @@ export default function MarvelCharacters({ addToFavorites }) {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [comics, setComics] = useState([]);
   const [currentPage, setCurrentPage] = useState(0);
-  const charactersPerPage = 20;
+  const charactersPerPage = 15;
+  const [count, setcount] = useState(0);
 
   useEffect(() => {
     const apiComics = `https://gateway.marvel.com/v1/public/characters?apikey=${publicKey}&limit=100`;
@@ -37,13 +39,17 @@ export default function MarvelCharacters({ addToFavorites }) {
 
   const handlePrev = () => {
     if (currentPage > 0) {
-      setCurrentPage(currentPage - 1);
+      setCurrentPage((prevPage) => prevPage - 1);
+      setcount((prevCount) => Math.max(prevCount - 1, 0));
     }
   };
 
   const handleNext = () => {
-    if ((currentPage + 1) * charactersPerPage < marvelCharacter.length) {
-      setCurrentPage(currentPage + 1);
+    if (count <= 3) {
+      if ((currentPage + 1) * charactersPerPage < marvelCharacter.length) {
+        setCurrentPage(currentPage + 1);
+      }
+      setcount(count + 1);
     }
   };
 
@@ -87,8 +93,12 @@ export default function MarvelCharacters({ addToFavorites }) {
   return (
     <div className='characters-comics'>
       <div className='pagination'>
-        <button onClick={handlePrev}>prev</button>
-        <button onClick={handleNext}>next</button>
+        <button className='btn-left' onClick={handlePrev}>
+          {`<`}
+        </button>
+        <button className='btn-right' onClick={handleNext} disabled={count >= 3}>
+          {`>`}
+        </button>
       </div>
       <div className='grid-box'>
         {displayedCharacters.map((character) => (

src/components/profile.jsx

@@ -25,7 +25,11 @@ export default function Profile({ characterMarvel, img, description, comics }) {
             <div className='comics-list'>
               {comics.map((comic) => (
                 <Link to={`/comics/${comic.id}`} key={comic.id}>
-                  <img src={`${comic.thumbnail.path}.${comic.thumbnail.extension}`} alt={comic.title} />
+                  <img
+                    className='item'
+                    src={`${comic.thumbnail.path}.${comic.thumbnail.extension}`}
+                    alt={comic.title}
+                  />
                   <p>{comic.title}</p>
                 </Link>
               ))}

src/style/card.scss

@@ -142,9 +142,8 @@
       border-radius: 8px;
       padding: 15px;
       img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
+        width: 150px;
+        height: 150px;
         margin-left: -1px;
         border: solid 4.5px $text-color;
         margin-top: -10px;

src/style/comics-page.scss

@@ -4,46 +4,19 @@
   padding-top: 20px;
   padding-left: 20px;
 
-  .more {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    top: 10px;
-
-    button {
-      background-color: $primary-color;
-      border: none;
-      color: $text-color;
-      padding: 10px 20px;
-      border-radius: 5px;
-      font-size: 1em;
-      font-weight: 700;
-      cursor: pointer;
-      margin-top: 45px;
-    }
-  }
   .typo-comics {
-    background-color: $primary-color;
-    font-family: $font-family;
+    background-color: #670208;
+    font-family: 'Aclonica', sans-serif;
     width: 140px;
     font-size: 18px;
     padding: 14px;
     border-radius: 10px;
-    margin-left: 157px;
-    color: $text-color;
+    margin-left: 13%;
+    color: white;
+    box-shadow: 0px 2px 6px black;
+    text-shadow: 3px 2px 8px black;
     text-align: center;
-    box-shadow: 0px 2px 6px $background-card;
-    text-shadow: 3px 2px 8px $background-card;
   }
-}
-.comics {
-  width: 100%;
-  display: grid;
-  grid-template-columns: repeat(6, 170px);
-  justify-content: center;
-  grid-gap: 25px;
-  padding: 1em;
-  margin-top: 20px;
   .comics {
     width: 100%;
     display: grid;
@@ -52,7 +25,6 @@
     grid-gap: 10px;
     padding: 1em;
     margin-top: 10px;
-
     .comics-title {
       font-family: $font-family;
       font-weight: 700;
@@ -114,13 +86,36 @@
     }
   }
 
+  .more {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    top: 10px;
+
+    button {
+      background-color: #670208;
+      border: none;
+      color: white;
+      padding: 10px 20px;
+      border-radius: 5px;
+      font-size: 1em;
+      font-weight: 700;
+      cursor: pointer;
+      margin-top: 45px;
+    }
+  }
   .comics-footer footer {
     margin-top: 50px;
   }
 
   @media screen and (min-width: 301px) and (max-width: 644px) {
-    .comics {
-      grid-template-columns: repeat(2, 170px);
+    .typo-comics {
+      margin-left: 21px;
+
+      .comics {
+        grid-template-columns: repeat(2, 170px);
+        grid-gap: 20px 52px;
+      }
     }
   }
 }

src/style/favorite-page.scss

@@ -20,4 +20,9 @@
     align-items: center;
     text-shadow: 3px 2px 8px $background-card;
   }
+  @media screen and (min-width: 301px) and (max-width: 644px) {
+    .typo {
+      margin-left: 27px;
+    }
+  }
 }

src/style/marvel-characters.scss

@@ -0,0 +1,74 @@
+@use 'settings' as *;
+.loading {
+  background-color: yellow;
+}
+.pagination {
+  position: relative;
+
+  .btn-right {
+    border-radius: 50%;
+    font-size: 190%;
+    gap: 30px;
+    padding: 6px;
+    background-color: $primary-color;
+    position: absolute;
+    right: 125px;
+    margin-left: 88%;
+    margin-top: 30%;
+    width: 3%;
+    border: none;
+    color: $text-color;
+    cursor: pointer;
+  }
+  .btn-left {
+    border-radius: 50%;
+    font-size: 190%;
+    gap: 30px;
+    padding: 6px;
+    background-color: $primary-color;
+    position: absolute;
+    margin-left: 5%;
+    margin-top: 30%;
+    width: 3%;
+    border: none;
+    color: $text-color;
+    cursor: pointer;
+  }
+}
+@media screen and (max-width: 644px) {
+  .pagination {
+    .btn-right {
+      border-radius: 50%;
+      font-size: 150%;
+      gap: 30px;
+      padding: 6px;
+      background-color: $primary-color;
+      position: absolute;
+
+      width: 8%;
+      border: none;
+      color: $text-color;
+      cursor: pointer;
+      margin-left: 65%;
+      margin-top: 530%;
+    }
+    .btn-left {
+      position: absolute;
+      top: 0;
+      left: 0;
+
+      border-radius: 50%;
+      font-size: 150%;
+      gap: 30px;
+      padding: 6px;
+      background-color: $primary-color;
+      position: absolute;
+      width: 8%;
+      border: none;
+      color: $text-color;
+      cursor: pointer;
+      margin-left: 27%;
+      margin-top: 530%;
+    }
+  }
+}

src/style/profile-page.scss

@@ -3,15 +3,18 @@
 .profile {
   max-width: 920px;
   margin: 0 auto;
+  overflow: auto;
 
   .comics-characters {
     .character-content {
       .present {
         display: flex;
+        margin-top: 5%;
         .image-containe {
           img {
-            width: 340px;
+            width: 300px;
             margin: 1% 0;
+            height: 300px;
             border-radius: 2%;
             margin-top: 7%;
           }
@@ -58,56 +61,62 @@
       }
       .comics-section {
         margin: 0.3%;
+      }
+      h1 {
+        font-size: 1.5rem;
+        margin: 1rem 0;
+      }
 
-        h1 {
-          font-size: 1.5rem;
-          margin: 1rem 0;
-        }
+      .comics-list {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 10px;
+        max-width: 880px;
+        margin: 2.5rem auto;
 
-        .comics-list {
-          display: flex;
-          flex-wrap: wrap;
-          gap: 10px;
-          max-width: 880px;
-          margin: 2.5rem auto;
+        a {
+          width: 18%;
+          text-align: center;
+          text-decoration: none;
+          color: $text-color;
+          transition: all 0.5s ease;
+          position: relative;
 
-          a {
-            width: 18%;
-            text-align: center;
-            text-decoration: none;
-            color: $text-color;
-            transition: all 0.5s ease;
-            position: relative;
+          img {
+            width: 160px;
+            height: auto;
+          }
 
-            img {
-              width: 100%;
-              height: auto;
-            }
+          p {
+            font-size: 0.8rem;
+            position: absolute;
+            bottom: 4rem;
+            background: $background-card;
+            left: 0;
+            right: 0;
+            text-transform: uppercase;
+            opacity: 0;
+            transition: all 0.5s ease;
+            transform: translateY(-100%);
+          }
 
+          &:hover {
+            transform: scale(1.05);
             p {
-              font-size: 0.8rem;
-              position: absolute;
-              bottom: 4rem;
-              background: $background-card;
-              left: 0;
-              right: 0;
-              text-transform: uppercase;
-              opacity: 0;
-              transition: all 0.5s ease;
-              transform: translateY(-100%);
-            }
-
-            &:hover {
+              opacity: 1;
               transform: scale(1.05);
-              p {
-                opacity: 1;
-                transform: scale(1.05);
-                transform: translateY(0);
-              }
+              transform: translateY(0);
             }
           }
         }
       }
     }
   }
 }
+
+@media screen and (max-width: 450px) {
+  .profile .comics-characters .character-content .comics-list {
+    display: flex;
+    gap: 16px 70px;
+  }
+}