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 = {
-  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);
 
-  return (
-    <>
-      <button
-        style={selected === 1 ? styles.selected : styles.default}
-        type="button"
-        onClick={() => {
+  const handleK8s = useCallback(() => {
     setManifest(1);
     setSelected(1);
-        }}
-      >
-        <K8sLogo />
-      </button>
+  }, []);
 
-      <button
-        style={selected === 0 ? styles.selected : styles.default}
-        type="button"
-        onClick={() => {
+  const handleDC = useCallback(() => {
     setManifest(0);
     setSelected(0);
-        }}
-      >
+  }, []);
+
+  return (
+    <>
+      <Button selected={selected === 1} type="button" onClick={handleK8s}>
+        <K8sLogo />
+      </Button>
+
+      <Button selected={selected === 0} type="button" onClick={handleDC}>
         <DcLogo />
-      </button>
+      </Button>
     </>
   );
 };