Merge branch 'master' into dependabot/npm_and_yarn/lodash-4.17.23

Author: saurabhraghuvanshii

package-lock.json

@@ -9,7 +9,7 @@
     "@tanstack/react-query": "^4.29.25",
     "@tanstack/react-query-devtools": "^4.29.25",
     "@tanstack/react-table": "^8.9.3",
-    "axios": "^1.13.2",
+    "axios": "^1.13.5",
     "babel-plugin-styled-components": "^2.1.4",
     "gatsby": "^5.15.0",
     "gatsby-plugin-google-tagmanager": "^5.12.0",

package.json

@@ -271,6 +271,7 @@ const App = () => {
                 <Faq
                   category={['Layer5 Badges']}
                   display-category-title={'true'}
+                  theme={theme}
                 />
               </section>
 
@@ -279,6 +280,7 @@ const App = () => {
                 <Faq
                   category={['certifications']}
                   display-category-title={'true'}
+                  theme={theme}
                 />
               </section>
 

src/pages/index.js

@@ -8,15 +8,6 @@ import {
   AccordionItemPanel,
 } from "react-accessible-accordion";
 
-const fadeIn = keyframes`
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-`;
-
 export const AccordionWrapper = styled(Accordion)``;
 
 export const AccordionItemWrapper = styled(AccordionItem)``;
@@ -56,9 +47,26 @@ export const AccordionItemButtonWrapper = styled(AccordionItemButton)`
   padding: 0.625rem 1.5rem 0.625rem 1.5rem;
   `;
 export const AccordionBodyWrapper = styled(AccordionItemPanel)`
-  animation: 0.35s ${fadeIn} ease-in;
-  &.accordion__body--hidden {
-    animation: 0.35s ${fadeIn} ease-in;
+    overflow: hidden;
+    display: grid;
+    grid-template-rows: 1fr;
+    transition: grid-template-rows ease 1.0s;
+
+  > .inner {
+      min-height: 0;
+      visibility: visible;
+      opacity: 1;
+      transition: opacity 0.35s;
+  }
+
+  &[hidden] {
+      grid-template-rows: 0fr;
+
+      > .inner {
+          visibility: hidden;
+          opacity: 0;
+          transition: opacity 0.35s, visibility 0s 0.35s;
+      }
   }
 `;
 

src/reusecore/Accordion/accordion.style.js

@@ -10,106 +10,132 @@ const FaqSectionWrapper = styled.section`
     font-style: italic;
     text-transform: capitalize;
   }
-  .accordion__item + .accordion__item {
-    border-color: transparent;
+
+  /* Accordion wrapper */
+  .MuiAccordion-root {
+    margin-bottom: 2px;
+    background: ${(props) => props.theme.body};
+    color: ${(props) => props.theme.text};
+    // border-radius: 8px;
+    overflow: hidden;
+    
+
+    &::before {
+      display: none;
+    }
+    &.Mui-expanded {
+      margin: 0;   /* removes the empty top space */
+    }
+    &.Mui-expanded::before {
+      display: none;
+    }
+  }
+
+  /* Accordion header */
+  .MuiAccordionSummary-root {
+    background: #00b39f;
+    padding: 0rem 1rem;
+
+    h5 {
+      font-weight: 700;
+      font-size: 18px;
+      position: relative;
+      margin: 0;
+      color: #ffffff;
+    }
+    &.Mui-expanded {
+      background: black;
+      border: 1px solid #00b39f;
+    }
   }
-  .reusecore__accordion {
-    margin-bottom: 1rem;
+
+  /* Expand icon */
+  .MuiAccordionSummary-expandIconWrapper {
+    color: #ffffff;
   }
-  .accordion__item {
-    .accordion__header {
-      padding:0.5px;
-      background: #00b39f;
-      h5 {
-        font-weight: 700;
-        font-size: 18px;
-        position: relative;
-        color: #ffffff;
-      }
-      > div {
-        &:focus {
-          outline: none;
-        }
-      }
+
+  /* Accordion body */
+  .MuiAccordionDetails-root {
+    background: ${(props) => props.theme.body};
+    color: ${(props) => props.theme.text};
+
+    p {
+      font-size: 16px;
+      font-weight: 300;
+      text-align: initial;
+      color: inherit; /* FIX: prevents invisible text */
     }
 
-    .accordion__body {
-      padding: 0 0.625rem 0 0.625rem;
-      p {
-        font-size: 16px;
-        font-weight: 300;
-        text-align: initial;
-        margin: 0;
-      }
+    ul {
+      padding-left: 1.2rem;
+    }
+
+    li {
+      color: inherit;
     }
+      
   }
+
   div.faqbutton {
-    text-align: center; 
-    
+    text-align: center;
+
     button.faqbutton {
       margin-bottom: 1.25rem;
     }
   }
+
   .section-title {
     text-align: center;
+
     h1 {
       margin-bottom: 3.75rem;
       font-size: 40px;
       line-height: 3.125rem;
     }
+
     .search {
       margin-bottom: 3.125rem;
+
       input {
         font-size: 20px;
         width: 80%;
         padding: 1rem;
-        border: 1px solid #FFFFFF;
-        background-color: #F0F0F0;
+        border: 1px solid #ffffff;
+        background-color: #f0f0f0;
         border-radius: 1.25rem;
       }
     }
   }
+
   .askus_section {
     text-align: left;
+
     h2 {
       margin-bottom: 1rem;
     }
+
     p {
       margin-bottom: 2rem;
     }
+
     button {
       margin-bottom: 0.5rem;
     }
   }
-  @media only screen and (max-width: 912px) {
-    .reusecore__accordion {
-      margin-bottom: 3.125rem;
-    }
-  }
 
   @media only screen and (max-width: 568px) {
     .section-title {
       text-align: center;
     }
-    .reusecore__accordion {
-      text-align: left;
-    }
-    h2 {
-      text-align: left;
-    }
   }
-  
+
   @media only screen and (max-width: 480px) {
-    .accordion__item {
-      .accordion__header {
-        h5 {
-          font-size: 13px;
-          line-height: 21px;
-          padding-right: 1.6rem;
-        }
-      }
+    .MuiAccordionSummary-root h5 {
+      font-size: 13px;
+      line-height: 21px;
+      padding-right: 1.6rem;
     }
   }
 `;
 
-export default FaqSectionWrapper;
+export default FaqSectionWrapper;