feat: change the scroll-down arrows into expand more icon from MUI

Author: elainefan331

src/components/HomePageComponents/Section2.tsx

@@ -1,5 +1,4 @@
-import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
-import ArrowForwardOutlinedIcon from "@mui/icons-material/ArrowForwardOutlined";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import {
   Typography,
   Box,
@@ -67,7 +66,7 @@ const Section2: React.FC<Section2Props> = ({
         }}
       >
         {/* Filter Menu Button */}
-        <Box sx={{ position: "absolute", top: 20, left: 20, zIndex: 100 }}>
+        <Box sx={{ position: "absolute", top: 100, right: 20, zIndex: 100 }}>
           <FilterMenu
             onKeywordFilter={setFilterKeyword}
             onModalitiesFilter={setSelectedModalities}
@@ -219,7 +218,7 @@ const Section2: React.FC<Section2Props> = ({
         }}
       >
         <IconButton onClick={scrollToNext}>
-          <ArrowDownwardIcon sx={{ fontSize: 40, color: Colors.darkPurple }} />
+          <ExpandMoreIcon sx={{ fontSize: 40, color: Colors.darkPurple }} />
         </IconButton>
       </Box>
     </Box>

src/components/HomePageComponents/Section3.tsx

@@ -1,4 +1,4 @@
-import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import { Typography, Box, Button, IconButton } from "@mui/material";
 import { Colors } from "design/theme";
 import React from "react";
@@ -114,7 +114,7 @@ const Section3: React.FC<Section3Props> = ({ scrollToNext }) => {
         }}
       >
         <IconButton onClick={scrollToNext}>
-          <ArrowDownwardIcon sx={{ fontSize: 40, color: Colors.lightGray }} />
+          <ExpandMoreIcon sx={{ fontSize: 40, color: Colors.lightGray }} />
         </IconButton>
       </Box>
     </Box>

src/components/NodesFilter/FilterMenu.tsx

@@ -54,11 +54,11 @@ const FilterMenu: React.FC<FilterMenuProps> = ({
       <IconButton
         onClick={handleClick}
         sx={{
-          color: Colors.green,
-          backgroundColor: Colors.purple,
+          color: Colors.purple,
+          backgroundColor: Colors.lightGray,
           transition: "all 0.3s ease",
           "&:hover": {
-            backgroundColor: Colors.purple,
+            backgroundColor: Colors.lightGray,
             transform: "scale(1.05)",
           },
         }}

src/pages/Home.tsx

@@ -1,4 +1,4 @@
-import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import { Box, Typography, Button, Container, IconButton } from "@mui/material";
 import Section1 from "components/HomePageComponents/Section1";
 import Section2 from "components/HomePageComponents/Section2";
@@ -90,7 +90,7 @@ const Home: React.FC = () => {
               section2Ref.current?.scrollIntoView({ behavior: "smooth" })
             }
           >
-            <ArrowDownwardIcon sx={{ fontSize: 40, color: Colors.lightGray }} />
+            <ExpandMoreIcon sx={{ fontSize: 40, color: Colors.lightGray }} />
           </IconButton>
         </Box>
       </Box>