From 06b37b5c2436d2869fdf665dabf12c9cb0774d17 Mon Sep 17 00:00:00 2001
From: "Todd H. Albert" <todd@bocacode.com>
Date: Tue, 31 Oct 2023 09:55:50 -0400
Subject: [PATCH 1/4] changed stars to beers

---
 .vscode/settings.json       | 7 +++++++
 src/components/BeerCard.jsx | 4 ++--
 2 files changed, 9 insertions(+), 2 deletions(-)
 create mode 100644 .vscode/settings.json

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..4699e85
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,7 @@
+{
+  "workbench.colorCustomizations": {
+    "activityBar.background": "#2C2560",
+    "titleBar.activeBackground": "#3E3386",
+    "titleBar.activeForeground": "#FBFBFD"
+  }
+}
\ No newline at end of file
diff --git a/src/components/BeerCard.jsx b/src/components/BeerCard.jsx
index 7de9389..0572219 100644
--- a/src/components/BeerCard.jsx
+++ b/src/components/BeerCard.jsx
@@ -16,8 +16,8 @@ export default function BeerCard({ name, image, avgRating, setSelectedBeer }) {
       </div>
       <h2>{name}</h2>
       <div className="rating">
-        <p className="grey-stars">⭐️⭐️⭐️⭐️⭐️</p>
-        <p className="yellow-stars" style={{ width: avgRating + 'em'}}>⭐️⭐️⭐️⭐️⭐️</p>
+        <p className="grey-stars">🍺🍺🍺🍺🍺</p>
+        <p className="yellow-stars" style={{ width: avgRating + 'em'}}>🍺🍺🍺🍺🍺</p>
       </div>
     </div>
   )

From aace20ae65a76c35d8451d0530c2d3b5b3eed000 Mon Sep 17 00:00:00 2001
From: "Todd H. Albert" <todd@bocacode.com>
Date: Tue, 31 Oct 2023 10:02:54 -0400
Subject: [PATCH 2/4] put stars back

---
 src/components/BeerCard.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/BeerCard.jsx b/src/components/BeerCard.jsx
index 0572219..7de9389 100644
--- a/src/components/BeerCard.jsx
+++ b/src/components/BeerCard.jsx
@@ -16,8 +16,8 @@ export default function BeerCard({ name, image, avgRating, setSelectedBeer }) {
       </div>
       <h2>{name}</h2>
       <div className="rating">
-        <p className="grey-stars">🍺🍺🍺🍺🍺</p>
-        <p className="yellow-stars" style={{ width: avgRating + 'em'}}>🍺🍺🍺🍺🍺</p>
+        <p className="grey-stars">⭐️⭐️⭐️⭐️⭐️</p>
+        <p className="yellow-stars" style={{ width: avgRating + 'em'}}>⭐️⭐️⭐️⭐️⭐️</p>
       </div>
     </div>
   )

From cfa0fd718f67512f894f06e0c52c3655a5da3c95 Mon Sep 17 00:00:00 2001
From: "Todd H. Albert" <todd@bocacode.com>
Date: Tue, 31 Oct 2023 10:03:59 -0400
Subject: [PATCH 3/4] made Xs

---
 src/components/BeerCard.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/BeerCard.jsx b/src/components/BeerCard.jsx
index 7de9389..261f458 100644
--- a/src/components/BeerCard.jsx
+++ b/src/components/BeerCard.jsx
@@ -16,8 +16,8 @@ export default function BeerCard({ name, image, avgRating, setSelectedBeer }) {
       </div>
       <h2>{name}</h2>
       <div className="rating">
-        <p className="grey-stars">⭐️⭐️⭐️⭐️⭐️</p>
-        <p className="yellow-stars" style={{ width: avgRating + 'em'}}>⭐️⭐️⭐️⭐️⭐️</p>
+        <p className="grey-stars">XXXXX</p>
+        <p className="yellow-stars" style={{ width: avgRating + 'em'}}>XXXXX</p>
       </div>
     </div>
   )

From c61afeadfc3751983db5372616ddb0e10a479677 Mon Sep 17 00:00:00 2001
From: "Todd H. Albert" <todd@bocacode.com>
Date: Tue, 31 Oct 2023 10:16:28 -0400
Subject: [PATCH 4/4] selected card is outlined

---
 src/App.css                 | 4 ++++
 src/components/BeerCard.jsx | 8 ++++----
 src/components/BeerList.jsx | 1 +
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/App.css b/src/App.css
index f526e98..6878609 100644
--- a/src/App.css
+++ b/src/App.css
@@ -32,6 +32,10 @@ main {
   width: 260px;
 }
 
+.selected {
+  border: 1px solid #00ff48;
+}
+
 .beer-image {
   width: 100%;
   max-height: 500px;
diff --git a/src/components/BeerCard.jsx b/src/components/BeerCard.jsx
index 261f458..9b4286b 100644
--- a/src/components/BeerCard.jsx
+++ b/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}
@@ -16,8 +16,8 @@ export default function BeerCard({ name, image, avgRating, setSelectedBeer }) {
       </div>
       <h2>{name}</h2>
       <div className="rating">
-        <p className="grey-stars">XXXXX</p>
-        <p className="yellow-stars" style={{ width: avgRating + 'em'}}>XXXXX</p>
+        <p className="grey-stars">⭐️⭐️⭐️⭐️⭐️</p>
+        <p className="yellow-stars" style={{ width: avgRating + 'em'}}>⭐️⭐️⭐️⭐️⭐️</p>
       </div>
     </div>
   )
diff --git a/src/components/BeerList.jsx b/src/components/BeerList.jsx
index 7c47138..f79fbfc 100644
--- a/src/components/BeerList.jsx
+++ b/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}
             />
           ))
         )}