#54 - quick actions now working, need to refresh page after action. adjusted styling on plant cards

growbros-frontend/src/components/NavbarRegistrationAndLogin.tsx

 import {NavLink} from "react-router-dom";
+import "../stylesheets/Navbar.css"
 
 function NavbarRegistrationAndLogin() {
     return (
         <nav>
-            <ul>
+            <ul className="navBarList">
                 <li>
                     <NavLink className="title" to="/">
                         GrowBros

growbros-frontend/src/components/PlantCard.tsx

 import "../stylesheets/PlantCard.css";
 import {Link} from "react-router-dom";
 import {Plant} from "../utils/schemas";
-import {QuickActionButtonProps} from "./QuickActionButton.tsx";
+import {QuickActionButtonType} from "./QuickActionButton.tsx";
 import QuickActions from "./QuickActions.tsx";
 
 type PlantCardProps = {
     plant: Plant,
-    quickActions?: QuickActionButtonProps[]
+    quickActions?: QuickActionButtonType[]
 }
 
 export default function PlantCard({plant, quickActions}: PlantCardProps) {
@@ -19,7 +19,7 @@ export default function PlantCard({plant, quickActions}: PlantCardProps) {
                         <h2>{plant.name}</h2>
                     </div>
                 </Link>
-                <QuickActions quickActions={quickActions}/>
+                <QuickActions quickActions={quickActions} plantId={plant.id}/>
             </li>
         </>
     );

growbros-frontend/src/components/PlantsOverview.tsx

 import PlantCard from "./PlantCard";
 import {Plant} from "../utils/schemas";
-import {QuickActionButtonProps} from "./QuickActionButton.tsx";
+import {QuickActionButtonType} from "./QuickActionButton.tsx";
 
 type PlantsOverviewProps = {
     plants: Plant[],
-    quickActions?: QuickActionButtonProps[]
+    quickActions?: QuickActionButtonType[]
 }
 
 export default function PlantsOverview({plants, quickActions}: PlantsOverviewProps) {

growbros-frontend/src/components/QuickActionButton.tsx

 import "../stylesheets/QuickActions.css"
+import useGrowbrosFetcher from "../utils/useGrowbrosFetcher.ts";
+import HeartBrokenIcon from "@mui/icons-material/HeartBroken";
+import AgricultureIcon from "@mui/icons-material/Agriculture";
 
 export type QuickActionButtonProps = {
-    iconClassName: string,
-    tooltip: string,
-    onClick: () => void
+    type: QuickActionButtonType,
+    plantId: number
 }
 
-function QuickActionButton({iconClassName, onClick, tooltip}: QuickActionButtonProps) {
-    return (
-        <button onClick={onClick} className={iconClassName + " quickActionButton"} title={tooltip}/>
-    );
+export type QuickActionButtonType = "ADD_TO_WISHLIST" | "REMOVE_FROM_WISHLIST" | "ADD_TO_GARDEN" | "REMOVE_FROM_GARDEN"
+
+function QuickActionButton({type, plantId}: QuickActionButtonProps) {
+    const bc = useGrowbrosFetcher();
+
+    switch (type) {
+        case "ADD_TO_WISHLIST":
+            return <button onClick={() => bc.addToWishlist(plantId)} className={"fa fa-heart quickActionButton"}
+                           title={"Add this plant to your wishlist"}/>
+        case "ADD_TO_GARDEN":
+            return <button onClick={() => bc.addToGarden(plantId)} className={"fa fa-leaf quickActionButton"}
+                           title={"Add this plant to your garden"}/>
+        case "REMOVE_FROM_WISHLIST":
+            return (<button onClick={() => bc.removeFromWishlist(plantId)} className={"quickActionButton"}
+                            title={"Remove this plant from your wishlist"}><HeartBrokenIcon sx={{fontSize: 19}}/>
+            </button>)
+        case "REMOVE_FROM_GARDEN":
+            return (<button onClick={() => bc.removeFromGarden(plantId)} className={"quickActionButton"}
+                            title={"Remove this plant from your garden"}><AgricultureIcon/>
+            </button>)
+    }
 }
 
-export default QuickActionButton;
\ No newline at end of file
+export default QuickActionButton;

growbros-frontend/src/components/QuickActions.tsx

-import QuickActionButton, {QuickActionButtonProps} from "./QuickActionButton.tsx";
+import QuickActionButton, {QuickActionButtonType} from "./QuickActionButton.tsx";
 import "../stylesheets/QuickActions.css"
 
 type QuickActionsProps = {
-    quickActions?: QuickActionButtonProps[];
+    quickActions?: QuickActionButtonType[];
+    plantId: number;
 }
 
-function QuickActions({quickActions}: QuickActionsProps) {
+function QuickActions({quickActions, plantId}: QuickActionsProps) {
     if (quickActions) {
         return <div className="quickActions">{quickActions.map(
             (action, index) =>
-                <QuickActionButton iconClassName={action.iconClassName}
-                                   tooltip={action.tooltip}
-                                   onClick={action.onClick}
+                <QuickActionButton plantId={plantId}
+                                   type={action}
                                    key={index}
                 />
         )} </div>

growbros-frontend/src/pages/Wunschliste.tsx

@@ -69,11 +69,7 @@ function Wunschliste() {
                 />
                 <button onClick={handleClearWishList}>Wunschliste leeren</button>
             </div>
-            <PlantsOverview plants={plants}quickActions={[{
-        iconClassName: "fa fa-heart",
-        onClick: () => console.log("clicked quick action"),
-        tooltip: "TOOLTIP!"
-      }]}/>
+            <PlantsOverview plants={plants} quickActions={["ADD_TO_GARDEN", "REMOVE_FROM_WISHLIST"]}/>
         </>
     );
 }

growbros-frontend/src/stylesheets/PlantCard.css

 .plantCard {
+    color: #ececec;
     position: relative;
     display: flex;
     flex-direction: column;
@@ -20,9 +21,9 @@
     padding: 1rem;
     background: linear-gradient(
             to bottom,
-            rgba(220, 220, 220, 0),
-            rgba(220, 220, 220, 0.45),
-            rgba(220, 220, 220, 0.65)
+            rgba(20, 20, 20, 0),
+            rgba(20, 20, 20, 0.3),
+            rgba(0, 0, 0, 0.5)
     );
 }
 
@@ -34,7 +35,7 @@
 }
 
 .plantCard:hover {
-    color: #4d5927;
+    color: white;
     border-color: black;
     box-shadow: 0 12px 24px rgb(24 24 24 / 15%);
 }