diff --git a/src/frontend/src/api/utils.tsx b/src/frontend/src/api/utils.tsx index 6c625a8..f66517c 100644 --- a/src/frontend/src/api/utils.tsx +++ b/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, diff --git a/src/frontend/src/pages/modernizationPage.tsx b/src/frontend/src/pages/modernizationPage.tsx index c5a3ab8..082d44f 100644 --- a/src/frontend/src/pages/modernizationPage.tsx +++ b/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(null); - + const [selectedFilebg, setSelectedFile] = useState(null); const [selectedFileId, setSelectedFileId] = React.useState("") const [fileId, setFileId] = React.useState(""); const [expandedSections, setExpandedSections] = React.useState([]) @@ -1239,6 +1239,10 @@ const ModernizationPage = () => { navigate("/"); }; + const handleClick = (file: string) => { + setSelectedFile(file === selectedFilebg ? null : file); + }; + return (
@@ -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 ? (