From 425ba5c96c2565225c1d9f37232fce9759575a30 Mon Sep 17 00:00:00 2001
From: Samuel Rowe <samuelrowe1999@gmail.com>
Date: Wed, 7 Sep 2022 13:41:41 +0530
Subject: [PATCH] feat: updated to show original logo color for manifest select
 on hover

---
 .../src/components/Project/ManifestSelect.tsx | 59 ++++++++++---------
 1 file changed, 30 insertions(+), 29 deletions(-)

diff --git a/services/frontend/src/components/Project/ManifestSelect.tsx b/services/frontend/src/components/Project/ManifestSelect.tsx
index 6508085..4b8e2dd 100644
--- a/services/frontend/src/components/Project/ManifestSelect.tsx
+++ b/services/frontend/src/components/Project/ManifestSelect.tsx
@@ -1,17 +1,22 @@
-import { useState } from "react";
+import { styled } from "@mui/joy";
+import { useCallback, useState } from "react";
 import DcLogo from "../global/dc-logo";
 import K8sLogo from "../global/k8s-logo";
 
-const styles = {
-  default: {
-    filter: "grayscale(100%)",
-    opacity: "90%"
-  },
-  selected: {
-    filter: "grayscale(0)",
-    opacity: "100%"
+interface IButtonProps {
+  selected: boolean;
+}
+
+const Button = styled("button", {
+  shouldForwardProp: (name) => name !== "selected"
+})<IButtonProps>`
+  filter: grayscale(${({ selected }) => (selected ? "0%" : "100%")});
+  opacity: ${({ selected }) => (selected ? "100%" : "80%")};
+
+  &:hover {
+    filter: grayscale(0%);
   }
-};
+`;
 
 interface IManifestSelectProps {
   setManifest: any;
@@ -21,29 +26,25 @@ const ManifestSelect = (props: IManifestSelectProps) => {
   const { setManifest } = props;
   const [selected, setSelected] = useState(0);
 
+  const handleK8s = useCallback(() => {
+    setManifest(1);
+    setSelected(1);
+  }, []);
+
+  const handleDC = useCallback(() => {
+    setManifest(0);
+    setSelected(0);
+  }, []);
+
   return (
     <>
-      <button
-        style={selected === 1 ? styles.selected : styles.default}
-        type="button"
-        onClick={() => {
-          setManifest(1);
-          setSelected(1);
-        }}
-      >
+      <Button selected={selected === 1} type="button" onClick={handleK8s}>
         <K8sLogo />
-      </button>
-
-      <button
-        style={selected === 0 ? styles.selected : styles.default}
-        type="button"
-        onClick={() => {
-          setManifest(0);
-          setSelected(0);
-        }}
-      >
+      </Button>
+
+      <Button selected={selected === 0} type="button" onClick={handleDC}>
         <DcLogo />
-      </button>
+      </Button>
     </>
   );
 };