added hover image

bocacode · Oct 31, 2023 · 499b3f6 · 499b3f6
2 parents 201d535 + a017295
commit 499b3f6
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 4 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,7 @@
+{
+  "workbench.colorCustomizations": {
+    "activityBar.background": "#2C2560",
+    "titleBar.activeBackground": "#3E3386",
+    "titleBar.activeForeground": "#FBFBFD"
+  }
+}
diff --git a/src/App.css b/src/App.css
@@ -1,5 +1,5 @@
 body {
-  background-color: #402010;
+  background-color: #402090;
   color: antiquewhite;
   padding: 2em;
 }
@@ -30,11 +30,21 @@ main {
   border-radius: 8px;
   margin: 0.5em;
   width: 260px;
+  cursor: pointer;
+}
+
+.selected {
+  border: 1px solid #ff00d0;
 }
 
 .beer-image {
   width: 100%;
   max-height: 500px;
+  transition: 0.3s;
+}
+
+.beer-image:hover{
+  transform: scale(1.5);
 }
 
 .beer-image:hover {
@@ -64,6 +74,7 @@ main {
   max-width: 90%;
 }
 
+
 .beer-card h2 {
   font-size: medium;
   margin-bottom: 4px;
@@ -91,3 +102,7 @@ main {
   position: absolute;
   overflow: hidden;
 }
+
+.beer-card:hover, .beer-card:active {
+  background-color: greenyellow;
+}
diff --git 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}

diff --git 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}
             />
           ))
         )}

diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -1,3 +1,3 @@
 export default function Header() {
-  return <h1>The Beers! (hey that's a bad joke) 🍻</h1>
+  return <h1>🍻 IPA's 🍻</h1>
 }