aligned and switchout icons for expand and collapse (#1806)

hackforla · Sep 9, 2024 · 038577e · 038577e
1 parent 9522386
commit 038577e
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 17 deletions.
diff --git a/client/src/components/Faq/ExpandButtons.jsx b/client/src/components/Faq/ExpandButtons.jsx
@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { createUseStyles } from "react-jss";
-import { MdExpandLess, MdExpandMore } from "react-icons/md";
+import { MdOutlineUnfoldMore, MdOutlineUnfoldLess } from "react-icons/md";
 
 const useStyles = createUseStyles({
   expandCollapseFlexContainer: {
@@ -38,22 +38,36 @@ const ExpandButtons = ({ toggleExpandCollapse }) => {
   return (
     <div className={classes.expandCollapseFlexContainer}>
       <div className={classes.expandCollapseAll}>
-        <div className={classes.faqExpandIcons}>
-          <MdExpandMore className={classes.faqCarotIcon} />
-        </div>
-        <button
-          className={classes.toggleButton}
-          onClick={() => toggleExpandCollapse(true)}
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "center"
+          }}
         >
-          Expand All
-        </button>
-        <MdExpandLess className={classes.faqCarotIcon} />
-        <button
-          className={classes.toggleButton}
-          onClick={() => toggleExpandCollapse()}
+          <MdOutlineUnfoldMore className={classes.faqCarotIcon} />
+          <button
+            className={classes.toggleButton}
+            onClick={() => toggleExpandCollapse(true)}
+          >
+            Expand All
+          </button>
+        </div>
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "center"
+          }}
         >
-          Collapse All
-        </button>
+          <MdOutlineUnfoldLess className={classes.faqCarotIcon} />
+          <button
+            className={classes.toggleButton}
+            onClick={() => toggleExpandCollapse()}
+          >
+            Collapse All
+          </button>
+        </div>
       </div>
     </div>
   );

diff --git a/client/src/components/Faq/FaqButtonContainer.jsx b/client/src/components/Faq/FaqButtonContainer.jsx
@@ -51,12 +51,12 @@ export const FaqButtonContainer = ({
       )}
       <div className={classes.faqIcon}>
         {faq.expand ? (
-          <MdExpandMore
+          <MdExpandLess
             style={{ cursor: "pointer" }}
             onClick={() => collapseFaq(faq)}
           />
         ) : (
-          <MdExpandLess
+          <MdExpandMore
             style={{ cursor: "pointer" }}
             onClick={() => expandFaq(faq)}
           />