Merge branch 'main' into ADD-Card-Outline-mp

.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+  "workbench.colorCustomizations": {
+    "activityBar.background": "#2C2560",
+    "titleBar.activeBackground": "#3E3386",
+    "titleBar.activeForeground": "#FBFBFD"
+  }
+}

src/App.css

@@ -1,5 +1,5 @@
 body {
-  background-color: #402010;
+  background-color: #402090;
   color: antiquewhite;
   padding: 2em;
 }
@@ -33,9 +33,18 @@ main {
   /* background-color; */
 }
 
+.selected {
+  border: 1px solid #ff00d0;
+}
+
 .beer-image {
   width: 100%;
   max-height: 500px;
+  transition: 0.3s;
+}
+
+.beer-image:hover{
+  transform: scale(1.5);
 }
 
 .close-button {
@@ -61,6 +70,7 @@ main {
   max-width: 90%;
 }
 
+
 .beer-card h2 {
   font-size: medium;
   margin-bottom: 4px;

src/components/BeerCard.jsx

@@ -1,10 +1,10 @@
 import { useState } from "react";
 
-export default function BeerCard({ name, image, avgRating, setSelectedBeer }) {
+export default function BeerCard({ name, image, avgRating, setSelectedBeer, isSelected }) {
   const [hidden, setHidden] = useState(false)
   if(hidden) return null
   return (
-    <div className="beer-card" onClick={() => setSelectedBeer(name)}>
+    <div className={`beer-card ${isSelected && 'selected'}`} onClick={() => setSelectedBeer(name)}>
       <div className="close-button" onClick={() => setHidden(true)}>x</div>
       <div className="beer-image">
         <img src={image} alt={name}

src/components/BeerList.jsx

@@ -40,6 +40,7 @@ export default function BeerList() {
               image={beer.image}
               avgRating={beer.rating.average}
               setSelectedBeer={setSelectedBeer}
+              isSelected={selectedBeer === beer.name}
             />
           ))
         )}

src/components/Header.jsx

@@ -1,3 +1,3 @@
 export default function Header() {
-  return <h1>The Beers! (IPA) 🍻</h1>
+  return <h1>IPA's! 🍻</h1>
 }