🎨 Card styles have been improved.

luisalcarasr · Nov 26, 2023 · ab8eeaf · ab8eeaf
1 parent da18d7c
commit ab8eeaf
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 17 deletions.
diff --git a/src/components/Card.css b/src/components/Card.css
@@ -1,6 +1,17 @@
 .card {
-    border: 1px solid black;
-    margin: 2rem;
-    padding: 2rem;
-    display: inline-block;
-}
+  border-radius: 0.5rem;
+  margin: 1rem;
+  padding: 1rem;
+  display: inline-block;
+  width: 140px;
+  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.4);
+  user-select: none;
+  img {
+    width: 100%;
+  }
+  span {
+    display: block;
+    text-align: center;
+    margin-top: 0.5rem;
+  }
+}
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
@@ -16,24 +16,21 @@ export const Card: React.FC<CardProps> = ({ name, flipped, onClick }) => {
   }, [setPokemon, name]);
 
   return (
-    <div
-      className="card"
-      style={{
-        backgroundColor: flipped ? "cyan" : "gray",
-        minWidth: "50px",
-        minHeight: "80px",
-      }}
-      onClick={onClick}
-    >
+    <div className="card" onClick={onClick}>
       <img
-        onLoad={() => console.log(false)}
         src={pokemon?.sprites.other["official-artwork"].front_default}
         alt={pokemon?.name}
-        width="60"
         style={{
-          display: flipped ? "block" : "none",
+          visibility: flipped ? "visible" : "hidden",
         }}
       />
+      <span
+        style={{
+          visibility: flipped ? "visible" : "hidden",
+        }}
+      >
+        {pokemon?.name ?? name}
+      </span>
     </div>
   );
 };