feat: updated to show original logo color for manifest select on hover

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 = {
+interface IButtonProps {
-  default: {
+  selected: boolean;
-    filter: "grayscale(100%)",
+}
-    opacity: "90%"
+
-  },
+const Button = styled("button", {
-  selected: {
+  shouldForwardProp: (name) => name !== "selected"
-    filter: "grayscale(0)",
+})<IButtonProps>`
-    opacity: "100%"
+  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
+      <Button selected={selected === 1} type="button" onClick={handleK8s}>
-        style={selected === 1 ? styles.selected : styles.default}
-        type="button"
-        onClick={() => {
-          setManifest(1);
-          setSelected(1);
-        }}
-      >
         <K8sLogo />
-      </button>
+      </Button>
-
+
-      <button
+      <Button selected={selected === 0} type="button" onClick={handleDC}>
-        style={selected === 0 ? styles.selected : styles.default}
-        type="button"
-        onClick={() => {
-          setManifest(0);
-          setSelected(0);
-        }}
-      >
         <DcLogo />
-      </button>
+      </Button>
     </>
   );
 };