Merge pull request #37 from WildCodeSchool/release/style-modale

Release/style modale

src/components/card.jsx

@@ -16,12 +16,13 @@ export default function Card({ character, image, onAddToFavorites, onClick, onRe
         </button>
         {isFavoritePage && (
           <button
+            className='delete-fav'
             onClick={(e) => {
               e.stopPropagation();
               onRemove();
             }}
           >
-            Remove from Favorites
+            <img className='remove-fav' src='/pictures/remove-fave.svg' alt='' />
           </button>
         )}
       </div>

src/components/loader.jsx

@@ -3,7 +3,7 @@ import '../style/loader.scss';
 export default function Loader() {
   return (
     <div className='load'>
-      <img src='/pictures/hammer.png' alt='' /> <p> Loading..... </p>
+      <img src='/pictures/hammer.png' alt='' />
     </div>
   );
 }

src/components/modal.jsx

@@ -7,7 +7,7 @@ export default function Modal({ isOpen, onClose, children }) {
     <div className='modal-overlay'>
       <div className='modal-content'>
         <button className='btn-modal' onClick={onClose}>
-          &times;
+          x
         </button>
         {children}
       </div>

src/components/search.jsx

@@ -3,13 +3,15 @@ import { useState } from 'react';
 import '../style/search.scss';
 import Characters from './characters.jsx';
 import Comics from './comics.jsx';
+import Loader from './loader.jsx';
 
 const publicKey = import.meta.env.VITE_PUBLIC_KEY;
 
 export default function Search() {
   const [characterData, setCharacterData] = useState(null);
   const [comicData, setComicData] = useState(null);
   const [characterName, setCharacterName] = useState('');
+  const [loading, setLoading] = useState(false);
 
   const handleSubmit = (event) => {
     event.preventDefault();
@@ -18,6 +20,7 @@ export default function Search() {
   };
 
   const getCharacterData = () => {
+    setLoading(true);
     setCharacterData(null);
     setComicData(null);
 
@@ -32,10 +35,12 @@ export default function Search() {
         setCharacterData({ ...result.data, results: filteredCharacters });
       })
       // eslint-disable-next-line no-console
-      .catch((error) => console.log(error));
+      .catch((error) => console.log(error))
+      .finally(() => setLoading(false));
   };
 
   const getComicData = (characterId) => {
+    setLoading(true);
     window.scrollTo({ top: 0, left: 0 });
 
     const url = `https://gateway.marvel.com/v1/public/characters/${characterId}/comics?apikey=${publicKey}`;
@@ -49,7 +54,8 @@ export default function Search() {
         setComicData({ ...result.data, results: filteredComics });
       })
       // eslint-disable-next-line no-console
-      .catch((error) => console.log(error));
+      .catch((error) => console.log(error))
+      .finally(() => setLoading(false));
   };
 
   const handleChange = (event) => {
@@ -62,11 +68,17 @@ export default function Search() {
         <input type='text' placeholder='Search' value={characterName} onChange={handleChange} />
       </form>
 
-      {!comicData && characterData && characterData.results[0] && (
+      {loading && (
+        <div>
+          <Loader />
+        </div>
+      )}
+
+      {!loading && !comicData && characterData && characterData.results[0] && (
         <Characters data={characterData.results} onClick={getComicData} />
       )}
 
-      {comicData && comicData.results[0] && <Comics data={comicData.results} onClick={() => {}} />}
+      {!loading && comicData && comicData.results[0] && <Comics data={comicData.results} onClick={() => {}} />}
     </>
   );
 }

src/pages/favorite-page.jsx

@@ -42,7 +42,7 @@ export default function FavoritePage({ favorites, removeFromFavorites }) {
       <h1 className='typo'>My Favorite Characters</h1>
       <div className='grid-box'>
         {favorites.length === 0 ? (
-          <h1>No favorites added yet.</h1>
+          <h1 className='h1-favorite'>No favorites added yet.</h1>
         ) : (
           favorites.map((character) => (
             <Card

src/style/card.scss

@@ -91,35 +91,80 @@
         transform: scale(1.1) rotate(-35deg);
       }
     }
+    .delete-fav {
+      border: none;
+      background: none;
+    }
+    .remove-fav {
+      position: relative;
+      width: 25px;
+      height: 25px;
+      transform: rotate(-45deg);
+      animation: beat 1s infinite ease-in-out;
+      margin-left: -20px;
+      margin-top: 16px;
+      box-shadow: 5px 3px 5px;
+      margin: 0 auto;
 
-    .character-title {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 150px;
-
-      border: solid, $text-color;
-      background-color: $background-card;
-      opacity: 85%;
-      height: 70px;
-      // margin-top: 10px;
-      border-radius: 8px;
       cursor: pointer;
-      &:hover {
-        transform: scale(1.1);
-        transition: transform 0.5s;
-        filter: brightness(0.9);
+
+      &::before,
+      &::after {
+        content: '';
+        position: absolute;
+        width: 50px;
+        height: 50px;
+        border-radius: 50%;
+      }
+
+      &::before {
+        top: -50px;
+        left: 0;
+      }
+
+      &::after {
+        top: 0;
+        left: 50px;
       }
     }
+  }
 
-    h2 {
-      color: $text-color;
-      text-align: center;
-      font-size: 1.1em;
-      font-family: $font-family;
+  @keyframes beat {
+    0%,
+    100% {
+      transform: scale(1) rotate(-15deg);
+    }
+    50% {
+      transform: scale(1.1) rotate(-35deg);
     }
   }
 }
+.character-title {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 150px;
+
+  border: solid, $text-color;
+  background-color: $background-card;
+  opacity: 85%;
+  height: 70px;
+  // margin-top: 10px;
+  border-radius: 8px;
+  cursor: pointer;
+  &:hover {
+    transform: scale(1.1);
+    transition: transform 0.5s;
+    filter: brightness(0.9);
+  }
+}
+
+h2 {
+  color: $text-color;
+  text-align: center;
+  font-size: 1.1em;
+  font-family: $font-family;
+}
 
 @media screen and (min-width: 200px) and (max-width: 479px) {
   .grid-box {

src/style/favorite-page.scss

@@ -1,7 +1,12 @@
 @use 'settings.scss' as *;
 .favorite {
   padding: 20px 0 0 20px;
-
+  .h1-favorite {
+    color: white;
+    font-size: 1.5rem;
+    text-align: center;
+    font-family: 'Aclonica', sans-serif;
+  }
   .favor {
     display: none;
   }

src/style/loader.scss

@@ -14,13 +14,6 @@
   flex-direction: column;
   align-items: center;
 
-  p {
-    padding-bottom: 20px;
-    color: white;
-    font-size: 50px;
-
-    font-family: $font-family;
-  }
   img {
     width: 150px;
     animation: spin 1s linear infinite;

src/style/modal.scss

@@ -1,19 +1,24 @@
 @use 'settings' as *;
 
 .modal-overlay {
-  color: $text-color;
+  color: #f4f4f4;
   position: fixed;
-  top: 0;
-  left: 0;
+  top: -1px;
+  left: 0%;
   right: 0;
+  padding: 37px;
   bottom: 0;
+  max-width: 100%;
   z-index: 1000;
-  background: $background-comics;
+  background: rgba(0, 0, 0, 0.5);
 
   .modal-content {
     padding: 0 20px;
     border-radius: 8px;
     position: relative;
+    width: 87%;
+    background: #460702;
+    left: 6%;
 
     .btn-modal {
       position: absolute;

src/style/profile.scss

@@ -50,13 +50,14 @@
         padding: 1rem;
         border-radius: $border-radius;
         background: $background-card;
+        width: 450px;
 
         h3 {
-          font-size: 3.3rem;
+          font-size: 2.5rem;
           font-family: $font-family;
         }
         p {
-          font-size: 1.5rem;
+          font-size: 1rem;
           font-family: $font-family;
           line-height: 1.5;
         }