Modify build-deploy-zodiac.yml to trigger deployment by merging PR to staging branch

Author: elainefan331

.github/workflows/build-deploy-zodiac.yml

@@ -7,6 +7,7 @@ on:
       - dev-fan
       - dev_mario
       - dev_fang
+      - staging
 
 jobs:
   deploy:

src/components/NodesFilter/FilterMenu.tsx

@@ -84,30 +84,38 @@ const FilterMenu: React.FC<FilterMenuProps> = ({
           transition: "transform 0.3s ease, opacity 0.3s ease",
           transformOrigin: "top right",
           "& .MuiPaper-root": {
-            backgroundColor: Colors.lightGray, // Override Paper's default background
-            // boxShadow: `0px 0px 15px ${Colors.lightGray}`,
+            // backgroundColor: "rgba(40, 44, 86, 0.1)", // Override Paper's default background
+            backgroundColor: Colors.lightGray,
+            // boxShadow: `0px 0px 5px ${Colors.lightGray}`,
+            backdropFilter: "blur(15px)",
           },
         }}
       >
         {/* unified panel */}
         <Box
           sx={{
-            backgroundColor: Colors.lightGray,
+            // backgroundColor: Colors.darkPurple,
+            // backdropFilter: "blur(15px)",
             minWidth: 300,
             padding: "10px",
           }}
         >
           <Typography
             sx={{
-              fontSize: "large",
+              fontSize: "x-large",
               fontWeight: "bold",
-              color: Colors.darkPurple,
+              color: Colors.orange,
             }}
           >
             Databases Filter
           </Typography>
 
-          <Divider sx={{ marginY: 2 }} />
+          <Divider
+            sx={{
+              marginY: 2,
+              //   borderColor: Colors.darkPurple,
+            }}
+          />
 
           {/* Keyword Filter */}
           <Box
@@ -119,7 +127,7 @@ const FilterMenu: React.FC<FilterMenuProps> = ({
           >
             <Typography
               variant="subtitle1"
-              sx={{ color: Colors.darkOrange, fontWeight: "bold" }}
+              sx={{ color: Colors.darkGreen, fontWeight: "bold" }}
             >
               Filter by Keyword
             </Typography>
@@ -129,7 +137,12 @@ const FilterMenu: React.FC<FilterMenuProps> = ({
             />
           </Box>
 
-          <Divider sx={{ marginY: 2 }} />
+          <Divider
+            sx={{
+              marginY: 2,
+              // borderColor: Colors.lightGray
+            }}
+          />
 
           {/* Modalities Filter */}
           <Box
@@ -141,7 +154,7 @@ const FilterMenu: React.FC<FilterMenuProps> = ({
           >
             <Typography
               variant="subtitle1"
-              sx={{ color: Colors.darkOrange, fontWeight: "bold" }}
+              sx={{ color: Colors.darkGreen, fontWeight: "bold" }}
             >
               Filter by Modalities
             </Typography>

src/components/NodesFilter/ModalitiesFilter.tsx

@@ -48,7 +48,21 @@ const ModalitiesFilter: React.FC<ModalitiesFilterProps> = ({
               // key={modality}
               control={
                 <Checkbox
-                  sx={{ color: Colors.primary.dark }}
+                  sx={
+                    {
+                      // color: Colors.lightGray,
+                      // "&.Mui-checked": {
+                      //   color: "black", // Change checkmark color
+                      // },
+                      // "&.Mui-checked.MuiCheckbox-root": {
+                      //   backgroundColor: "white", // Ensures white background when checked
+                      //   borderRadius: "3px",
+                      // },
+                      // "&.MuiCheckbox-root:hover": {
+                      //   backgroundColor: "white",
+                      // },
+                    }
+                  }
                   checked={selectedModalities.includes(modality)}
                   onChange={() => handleModalityChange(modality)}
                 />

src/pages/Home.tsx

@@ -143,15 +143,22 @@ const Home: React.FC = () => {
           position: "absolute",
           top: "6%",
           left: "1%",
-          backgroundColor: "rgba(97, 109, 243, 0.1)",
+          backgroundColor: "rgba(97, 109, 243, 0.4)",
+          // backgroundColor: "rgba(160, 165, 194, 0.4)",
+          // backgroundColor: Colors.primary.dark,
+
           backdropFilter: "blur(10px)",
-          boxShadow: `0px 0px 5px ${Colors.lightYellow}`,
+          // boxShadow: `2px 2px 5px ${Colors.lightGray}`,
           padding: "1.5rem",
           borderRadius: "8px",
         }}
       >
         {/* Header Section */}
-        <Typography variant="h3" gutterBottom sx={{ color: Colors.white }}>
+        <Typography
+          variant="h3"
+          gutterBottom
+          sx={{ color: Colors.white, fontWeight: "medium" }}
+        >
           Discover NeuroJSON.io
         </Typography>
         <Typography variant="body1" sx={{ color: Colors.white }}>