Merge pull request #61 from microsoft/psl-bug-15313

fix: Bug-15313 "selected state" in the left panel.

Author: Roopan-Microsoft

src/frontend/src/api/utils.tsx

@@ -75,7 +75,7 @@ export const useStyles = makeStyles({
   },
   selectedCard: {
     border: "var(--NeutralStroke2.Rest)",
-    backgroundColor: "rgb(221, 217, 217)",
+    backgroundColor: "#EBEBEB",
   },
   mainContent: {
     flex: 1,

src/frontend/src/pages/modernizationPage.tsx

@@ -489,7 +489,7 @@ const ModernizationPage = () => {
   // State for the loading component
   const [showLoading, setShowLoading] = useState(true);
   const [loadingError, setLoadingError] = useState<string | null>(null);
-
+  const [selectedFilebg, setSelectedFile] = useState<string | null>(null);
   const [selectedFileId, setSelectedFileId] = React.useState<string>("")
   const [fileId, setFileId] = React.useState<string>("");
   const [expandedSections, setExpandedSections] = React.useState<string[]>([])
@@ -1239,6 +1239,10 @@ const ModernizationPage = () => {
     navigate("/");
   };
 
+  const handleClick = (file: string) => {
+    setSelectedFile(file === selectedFilebg ? null : file);
+  };
+
   return (
     <div className={styles.root}>
       <div onClick={handleHeaderClick} style={{ cursor: "pointer" }}>
@@ -1296,6 +1300,10 @@ const ModernizationPage = () => {
                           // Don't allow selecting queued files
                           if (file.status === "ready_to_process") return;
                           setSelectedFileId(file.id);
+                          handleClick(file.id);
+                        }}
+                        style={{
+                          backgroundColor: selectedFilebg === file.id ? "#EBEBEB" : "var(--NeutralBackground1-Rest)",
                         }}
                       >
                         {isSummary ? (