From c1892a528565d5abae0d08d2da7acbf8b90fc36a Mon Sep 17 00:00:00 2001
From: jeannettearias <jeannettearias@icloud.com>
Date: Thu, 22 Aug 2024 19:18:22 +0200
Subject: [PATCH] message id doesnt exist

---
 src/components/filters/CharacterFilter.jsx | 15 +++++--------
 src/components/filters/HouseFilter.jsx     | 26 ++++++++++------------
 src/components/pages/CharacterDetail.jsx   | 23 ++++++++++---------
 src/components/pages/CharacterList.jsx     |  2 +-
 src/styles/App.scss                        |  6 +++++
 src/styles/layout/_filters.scss            |  2 +-
 src/styles/layout/_landing.scss            | 13 +++++------
 7 files changed, 43 insertions(+), 44 deletions(-)

diff --git a/src/components/filters/CharacterFilter.jsx b/src/components/filters/CharacterFilter.jsx
index 449ce54..c71f539 100644
--- a/src/components/filters/CharacterFilter.jsx
+++ b/src/components/filters/CharacterFilter.jsx
@@ -17,17 +17,14 @@ function CharacterFilter({ searchInput, handleChangeCharacterFilter }) {
     return (
         <>
             <form className='form__input'>
-                <div>
-                    <label className='form__label'>Busca por personaje: </label>
-                    <input className='form__input'
-                        type="text"
-                        name="search" id="search"
-                        value={searchInput}
-                        onChange={handleInputChange} />
-                </div>
+                <label className='form__label'>Busca por personaje: </label>
+                <input className='form__input'
+                    type="text"
+                    name="search" id="search"
+                    value={searchInput}
+                    onChange={handleInputChange} />
             </form>
         </>
-
     );
 }
 CharacterFilter.propTypes = {
diff --git a/src/components/filters/HouseFilter.jsx b/src/components/filters/HouseFilter.jsx
index f0bff7e..2477e6f 100644
--- a/src/components/filters/HouseFilter.jsx
+++ b/src/components/filters/HouseFilter.jsx
@@ -14,20 +14,18 @@ function HouseFilter({ houseFilter, handleChangeHouse }) {
     return (
         <>
             <form className='form__select'>
-                <div>
-                    <label className='form__label'>Selecciona la casa: </label>
-                    <select className='form__select'
-                        name="house"
-                        id="house"
-                        onChange={handleChangeHouseFilter}
-                        value={houseFilter}>
-                        <option className='filter__house' value="All">All</option>
-                        <option className='filter__house' value="Gryffindor">Gryffindor</option>
-                        <option className='filter__house' value="Slytherin">Slytherin</option>
-                        <option className='filter__house' value="Ravenclaw">Ravenclaw</option>
-                        <option className='filter__house' value="Hufflepuff">Hufflepuff</option>
-                    </select>
-                </div>
+                <label className='form__label'>Selecciona la casa: </label>
+                <select className='form__select'
+                    name="house"
+                    id="house"
+                    onChange={handleChangeHouseFilter}
+                    value={houseFilter}>
+                    <option className='filter__house' value="All">All</option>
+                    <option className='filter__house' value="Gryffindor">Gryffindor</option>
+                    <option className='filter__house' value="Slytherin">Slytherin</option>
+                    <option className='filter__house' value="Ravenclaw">Ravenclaw</option>
+                    <option className='filter__house' value="Hufflepuff">Hufflepuff</option>
+                </select>
             </form>
         </>
     );
diff --git a/src/components/pages/CharacterDetail.jsx b/src/components/pages/CharacterDetail.jsx
index b410185..2221a2c 100644
--- a/src/components/pages/CharacterDetail.jsx
+++ b/src/components/pages/CharacterDetail.jsx
@@ -9,10 +9,11 @@ function CharacterDetail({ findCharacter }) {
     const params = useParams();
     const characterToShow = findCharacter(params.id);
 
-    if (characterToShow !== undefined) {
-        localStorage.setItem('character', JSON.stringify(characterToShow));
+    if (characterToShow === undefined) {
+        return (
+            <p className='p__text'>El personaje que buscas no existe</p>
+        )
     }
-    const getCharacter = JSON.parse(localStorage.getItem('character'));
 
     //HTML code
     return (
@@ -20,18 +21,18 @@ function CharacterDetail({ findCharacter }) {
             <section className="detail__section">
                 <div className="card__detail">
                     <div >
-                        <img src={getCharacter.image}
+                        <img src={characterToShow.image}
                             className='cardDetail__img'
-                            alt={`Picture of ${getCharacter.name}`}
-                            title={`Picture of ${getCharacter.name}`} />
+                            alt={`Picture of ${characterToShow.name}`}
+                            title={`Picture of ${characterToShow.name}`} />
                     </div>
                     <form className="form__detail">
                         <div>
-                            <p className="cardDetail__description name">{getCharacter.name}</p>
-                            <p className="cardDetail__description ">Estado: {translateStatus(getCharacter.alive)}</p>
-                            <p className="cardDetail__description">Especie: {translateSpecie(getCharacter.species)}</p>
-                            <p className="cardDetail__description">Género: {translateGender(getCharacter.gender)}</p>
-                            <p className="cardDetail__description">Casa: {getCharacter.house}</p>
+                            <p className="cardDetail__description name">{characterToShow.name}</p>
+                            <p className="cardDetail__description ">Estado: {translateStatus(characterToShow.alive)}</p>
+                            <p className="cardDetail__description">Especie: {translateSpecie(characterToShow.species)}</p>
+                            <p className="cardDetail__description">Género: {translateGender(characterToShow.gender)}</p>
+                            <p className="cardDetail__description">Casa: {characterToShow.house}</p>
                         </div>
                     </form>
 
diff --git a/src/components/pages/CharacterList.jsx b/src/components/pages/CharacterList.jsx
index ed2615a..472bdc1 100644
--- a/src/components/pages/CharacterList.jsx
+++ b/src/components/pages/CharacterList.jsx
@@ -7,7 +7,7 @@ function CharacterList({ characters, searchWord }) {
 
     if (characters.length === 0) {
         return (
-            <p>No hay ningún personaje que coincida con la palabra: {searchWord}</p>
+            <p className='p__text'>No hay ningún personaje que coincida con la palabra: {searchWord}</p>
         )
     }
 
diff --git a/src/styles/App.scss b/src/styles/App.scss
index 95aafe0..618cf21 100644
--- a/src/styles/App.scss
+++ b/src/styles/App.scss
@@ -12,3 +12,9 @@
   display: grid;
   align-items: center;
 }
+
+.p__text {
+  color: whitesmoke;
+  margin: 2rem;
+  font-size: 1.5rem;
+}
diff --git a/src/styles/layout/_filters.scss b/src/styles/layout/_filters.scss
index f9d92f2..ab2f683 100644
--- a/src/styles/layout/_filters.scss
+++ b/src/styles/layout/_filters.scss
@@ -31,7 +31,7 @@
 
 @media (min-width: 600px) {
   .filters__section {
-    flex-direction: row;
+    grid-template-columns: 1fr 1fr;
     gap: 2rem;
   }
 
diff --git a/src/styles/layout/_landing.scss b/src/styles/layout/_landing.scss
index b41964b..8871b76 100644
--- a/src/styles/layout/_landing.scss
+++ b/src/styles/layout/_landing.scss
@@ -23,7 +23,7 @@
 .cards__ul {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: 1rem; /* Space between cards */
+  gap: 1rem;
 }
 
 .card__li {
@@ -57,7 +57,7 @@
 
 .card__description {
   font-size: 11px;
-  margin-bottom: 1rem; /* Add space below the description */
+  margin-bottom: 1rem;
 }
 
 .card__img {
@@ -66,13 +66,10 @@
   height: 20rem;
   margin: 0 auto;
 }
-/* Responsive adjustments for smaller screens */
+
 @media (max-width: 660px) {
   .cards__ul {
-    grid-template-columns: repeat(
-      2,
-      1fr
-    ); /* 2 equal columns on small screens */
+    grid-template-columns: repeat(2, 1fr);
   }
   .card__img {
     display: block;
@@ -84,7 +81,7 @@
 
 @media (max-width: 480px) {
   .cards__ul {
-    grid-template-columns: 1fr; /* 1 column on very small screens */
+    grid-template-columns: 1fr;
   }
   .card__img {
     display: block;