fleche, styles

WildCodeSchool · Feb 25, 2025 · 166eca8 · 166eca8
2 parents b58db36 + 8923c76
commit 166eca8
Show file tree

Hide file tree

Showing 17 changed files with 77 additions and 61 deletions.
diff --git a/src/components/marvel-characters.jsx b/src/components/marvel-characters.jsx
@@ -28,7 +28,9 @@ export default function MarvelCharacters({ addToFavorites }) {
         const randomCharacters = data.data.results.sort(() => Math.random() - 1);
         setMarvelCharacter(randomCharacters);
       })
+      // eslint-disable-next-line no-console
       .catch((err) => console.error(err));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [MarvelCharacters]);
 
   const handleAddToFavorites = (character) => {
@@ -68,6 +70,7 @@ export default function MarvelCharacters({ addToFavorites }) {
       .then((data) => {
         setComics(data.data.results);
       })
+      // eslint-disable-next-line no-console
       .catch((err) => console.error(err));
   };
 
@@ -114,7 +117,6 @@ export default function MarvelCharacters({ addToFavorites }) {
             <Profile
               characterMarvel={selectedCharacter.name}
               img={`${selectedCharacter.thumbnail.path}.${selectedCharacter.thumbnail.extension}`}
-              title={selectedCharacter.title}
               description={selectedCharacter.description}
               comics={comics.filter((comic) => comic.description).slice(0, 5)}
             />

diff --git a/src/components/profile.jsx b/src/components/profile.jsx
@@ -17,7 +17,7 @@ export default function Profile({ characterMarvel, img, description, comics }) {
                 {' '}
                 <strong>Bio :</strong>
               </h3>
-              <p>{description}</p>
+              <p>{description ? description : 'Description not available'}</p>
             </div>
           </div>
           <div className='comics-section'>

diff --git a/src/pages/favorite-page.jsx b/src/pages/favorite-page.jsx
@@ -20,6 +20,7 @@ export default function FavoritePage({ favorites }) {
       .then((data) => {
         setComics(data.data.results.filter((comic) => comic.description));
       })
+      // eslint-disable-next-line no-console
       .catch((err) => console.error(err));
   };
 

diff --git a/src/style/card.scss b/src/style/card.scss
@@ -11,7 +11,7 @@
   padding-top: 20px;
 
   .card {
-    background-image: url(pictures/background-amended.jpg);
+    background-image: $background-image-comics;
     width: 170px;
     height: 293px;
     object-fit: cover;
@@ -98,7 +98,7 @@
       width: 150px;
 
       border: solid, $text-color;
-      background-color: black;
+      background-color: $background-card;
       opacity: 85%;
       height: 70px;
       // margin-top: 10px;
@@ -158,7 +158,6 @@
       display: flex;
       justify-content: center;
       align-items: end;
-      background-color: yellow;
     }
   }
 }
diff --git a/src/style/characters.scss b/src/style/characters.scss
@@ -15,23 +15,23 @@
     align-items: center;
     width: 100%;
     padding: 30px 0;
-    background-color: white;
+    background-color: $text-color;
     z-index: 200;
   }
 
   button.close-search {
     font-size: 22px bold;
-    border: 2px black solid;
+    border: 2px $background-card solid;
     border-radius: 20px;
     padding: 10px;
     background-color: transparent;
-    color: black;
+    color: $background-card;
     cursor: pointer;
 
     &:hover {
       cursor: pointer;
       filter: grayscale(0);
-      box-shadow: 6px 6px black;
+      box-shadow: 6px 6px $background-card;
       transform: translate(-2px, -2px);
     }
   }
@@ -58,21 +58,21 @@
     align-items: center;
     border:
       solid 4px,
-      white;
+      $text-color;
     border-radius: 8px;
     cursor: pointer;
 
     &:hover {
       cursor: pointer;
       filter: grayscale(0);
-      box-shadow: 6px 6px black;
+      box-shadow: 6px 6px $background-card;
       transform: translate(-2px, -2px);
     }
 
     .character-img {
       width: 150px;
       height: 150px;
-      border: solid 4px white;
+      border: solid 4px $text-color;
       border-radius: 8px;
     }
     .character-title {
@@ -81,16 +81,16 @@
       align-items: center;
       margin: 0 auto;
       width: 150px;
-      border: solid, white;
-      background-color: black;
+      border: solid, $text-color;
+      background-color: $background-card;
       opacity: 85%;
       height: 70px;
       margin-top: 10px;
       border-radius: 8px;
     }
 
     h2 {
-      color: white;
+      color: $text-color;
       text-align: center;
       font-size: 0.7em;
       font-family: $font-family;

diff --git a/src/style/comics-display.scss b/src/style/comics-display.scss
@@ -3,15 +3,20 @@
 .comics-display {
   font-family: $font-family;
   color: $text-color;
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  // justify-content: center;
-  height: 76svh;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  gap: 12%;
   background-color: $background-comics;
   max-width: 1000px;
   margin: 0.4% auto;
   overflow: hidden;
-  // transition: all 0.3sease;
+
+  //mobile
+  @media (max-width: 768px) {
+    flex-wrap: wrap;
+    gap: 10px;
+  }
 
   .comics-img {
     width: 67%;
@@ -22,10 +27,9 @@
       width: 100%;
       height: 100%;
       border-radius: 0.5rem;
-      box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
+      box-shadow: 0 0 10px 0 $background-comics;
       border-radius: 2.5rem;
-      border: 2px solid red;
-      margin: 1rem;
+      border: 1px solid $text-color;
     }
   }
 
@@ -34,7 +38,7 @@
     flex-direction: column;
     justify-content: left;
     width: 80%;
-    margin: 2.5rem 0;
+    padding: 2rem;
     height: 83%;
     gap: 2.5rem;
 

diff --git a/src/style/comics-page.scss b/src/style/comics-page.scss
@@ -25,13 +25,12 @@
     grid-gap: 10px;
     padding: 1em;
     margin-top: 10px;
-
     .comics-title {
       font-family: $font-family;
       font-weight: 700;
       font-size: 1.2em;
       text-transform: lowercase;
-      color: black;
+      color: $background-card;
     }
 
     .comic-card {
@@ -44,7 +43,7 @@
       text-decoration: none;
       border:
         solid 4px,
-        white;
+        $text-color;
       border-radius: 8px;
 
       .caption {
@@ -53,9 +52,9 @@
         flex-wrap: wrap;
         justify-content: center;
         align-items: center;
-        color: white;
+        color: $text-color;
         text-align: center;
-        background-color: #0000004b;
+        background: $background-card;
         height: 100%;
 
         &.bottom {
@@ -64,7 +63,7 @@
           left: 50%;
           transform: translateX(-50%);
           opacity: 0;
-          color: white;
+          color: $text-color;
           text-decoration: underline;
           width: 60%;
         }
@@ -73,7 +72,7 @@
       &:hover {
         cursor: pointer;
         filter: grayscale(0);
-        box-shadow: 6px 6px black;
+        box-shadow: 6px 6px $background-card;
         transform: translate(-2px, -2px);
 
         .caption {

diff --git a/src/style/comics.scss b/src/style/comics.scss
@@ -19,7 +19,7 @@
   text-decoration: none;
   border:
     solid 4px,
-    white;
+    $text-color;
   border-radius: 8px;
 
   .comics-title {
@@ -28,17 +28,17 @@
     flex-wrap: wrap;
     justify-content: center;
     align-items: center;
-    color: white;
+    color: $text-color;
     text-align: center;
-    background-color: #0000004b;
+    background-color: $background-card;
     height: 100%;
 
     h3 {
       font-family: $font-family;
       font-weight: 700;
       font-size: 1em;
       text-transform: lowercase;
-      color: white;
+      color: $text-color;
       :hover {
         transition: all 0.2s linear;
       }
@@ -48,7 +48,7 @@
   &:hover {
     cursor: pointer;
     filter: grayscale(0);
-    box-shadow: 6px 6px black;
+    box-shadow: 6px 6px $background-card;
     transform: translate(-2px, -2px);
     transition: all 0.2s linear;
 

diff --git a/src/style/favorite-page.scss b/src/style/favorite-page.scss
@@ -1,24 +1,24 @@
+@use 'settings.scss' as *;
 .favorite {
-  padding-top: 20px;
-  padding-left: 20px;
+  padding: 20px 0 0 20px;
 
   .favor {
     display: none;
   }
 
   .typo {
-    background-color: #670208;
+    background: $primary-color;
     font-family: 'Aclonica', sans-serif;
     padding-top: 60px;
     width: 240px;
     font-size: 16px;
     padding: 14px;
     border-radius: 10px;
     margin-left: 160px;
-    color: white;
-    box-shadow: 0px 2px 6px black;
+    color: $text-color;
+    box-shadow: 0px 2px 6px $background-card;
     align-items: center;
-    text-shadow: 3px 2px 8px black;
+    text-shadow: 3px 2px 8px $background-card;
   }
   @media screen and (min-width: 301px) and (max-width: 644px) {
     .typo {

diff --git a/src/style/footer.scss b/src/style/footer.scss
@@ -1,4 +1,5 @@
 @use 'settings' as *;
+
 .footer {
   display: flex;
   flex-direction: row;
@@ -41,7 +42,7 @@
       font-size: clamp(16px, 2vw, 20px);
       text-decoration: none;
       list-style-type: none;
-      color: white;
+      color: $text-color;
       padding: 5px 10px;
 
       @media screen and (min-width: 301px) and (max-width: 644px) {

diff --git a/src/style/marvel-characters.scss b/src/style/marvel-characters.scss
@@ -3,13 +3,16 @@
   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%;
@@ -50,6 +53,10 @@
       margin-top: 530%;
     }
     .btn-left {
+      position: absolute;
+      top: 0;
+      left: 0;
+
       border-radius: 50%;
       font-size: 150%;
       gap: 30px;

diff --git a/src/style/modal.scss b/src/style/modal.scss
@@ -8,7 +8,7 @@
   right: 0;
   bottom: 0;
   z-index: 1000;
-  background: rgba(0, 0, 0, 0.5);
+  background: $background-comics;
 
   .modal-content {
     padding: 0 20px;

diff --git a/src/style/navbar.scss b/src/style/navbar.scss
@@ -19,7 +19,7 @@
     gap: 40px;
 
     .my-link {
-      color: white;
+      color: $text-color;
       text-decoration: none;
       display: flex;
     }
@@ -35,7 +35,7 @@
       display: flex;
       align-items: center;
       font-size: 22px;
-      color: white;
+      color: $text-color;
       font-family: $font-family;
       margin-left: 20px;
     }
@@ -56,11 +56,11 @@
       background-color: transparent;
       font-size: 20px;
       width: 140px;
-      color: white;
+      color: $text-color;
     }
 
     input::placeholder {
-      color: white;
+      color: $text-color;
     }
 
     input:focus {