Done faq section for mobile version

Author: brianshattuck

src/pages/LaunchpadPage/FAQ.tsx

@@ -5,6 +5,7 @@ import StartIcon from 'assets/images/launchpad/faq/start-icon.svg';
 import FeesIcon from 'assets/images/launchpad/faq/fees-eligibility-icon.svg';
 import SecurityIcon from 'assets/images/launchpad/faq/security-icon.svg';
 import TroubleIcon from 'assets/images/launchpad/faq/troubleshooting-icon.svg';
+import { ChevronDown, ChevronUp } from 'react-feather';
 
 interface FAQItem {
   question: string;
@@ -24,34 +25,35 @@ const FAQItem: React.FC<FAQItem & { isOpen: boolean; toggle: () => void }> = ({
   isOpen,
   toggle,
 }) => (
-  <div>
-    <button
-      className='w-full text-left pl-3 pr-2 py-3 flex justify-between items-center border-t border-[#282D3D]'
-      onClick={toggle}
-    >
+  <Box>
+    <button className='faq-item-button' onClick={toggle}>
       <span className='text-base lg:text-lg leading-6 font-semibold'>
         {question}
       </span>
+      <ChevronDown
+        size='20'
+        className={`down-icon ${isOpen && 'rotate-180'}`}
+      />
       {/* <ChevronDownIcon
         className={clsx({
           ['min-w-5 h-5 p-[2px] lg:p-0 transition-transform duration-300']: true,
           ['rotate-180']: isOpen,
         })}
       /> */}
     </button>
-    <div
-      className={`overflow-hidden transition-all duration-300 ease-in-out ${
-        isOpen ? 'opacity-100' : 'max-h-0 opacity-0'
+    <Box
+      className={`cover-faq-item ${
+        isOpen ? 'faq-item-open' : 'faq-item-close'
       }`}
     >
-      <div className='p-4'>
+      <Box style={{ padding: '16px' }}>
         <p
-          className='text-gray-300'
+          style={{ color: '#D1D5DB' }}
           dangerouslySetInnerHTML={{ __html: answer }}
         ></p>
-      </div>
-    </div>
-  </div>
+      </Box>
+    </Box>
+  </Box>
 );
 
 const FAQ: React.FC = () => {
@@ -187,48 +189,62 @@ You should see a prompt from BlockPass saying, “If you have previously created
         <Typography className='title2'>Frequently Asked Questions</Typography>
       </Box>
       <Box className='cover-faq'>
-        <Box className='cover-faq-list'>
-          {faqList.map((faq) => (
-            <Box
-              className={`faq ${faq.id === tabActive && 'faq-selected'}`}
-              key={faq.id}
-              onClick={() => handleSelectTab(faq.id)}
-            >
+        <Box className='flex-40'>
+          <Box className='cover-faq-list'>
+            {faqList.map((faq) => (
               <Box
-                className={`cover-img ${faq.id === tabActive &&
-                  'cover-img-selected'}`}
+                className={`faq ${faq.id === tabActive && 'faq-selected'}`}
+                key={faq.id}
+                onClick={() => handleSelectTab(faq.id)}
               >
-                <img src={faq.logo} alt={faq.id} />
-              </Box>
-              <Box>
-                <Typography className='faq-name'>{faq.name}</Typography>
-              </Box>
-              {tabActive === faq.id && (
-                <svg
-                  width='79'
-                  height='14'
-                  viewBox='0 0 79 14'
-                  fill='none'
-                  strokeWidth='1.5'
-                  stroke='currentColor'
-                  className='faq-arrow'
-                  xmlns='http://www.w3.org/2000/svg'
+                <Box
+                  className={`cover-img ${faq.id === tabActive &&
+                    'cover-img-selected'}`}
                 >
-                  <g>
-                    <path
-                      d='M1 7H78M78 7L72 1M78 7L72 13'
-                      stroke='#4d5d7994'
-                      strokeWidth='1.5'
-                      strokeLinecap='round'
-                      strokeLinejoin='round'
-                    />
-                  </g>
-                </svg>
-              )}
-            </Box>
-          ))}
+                  <img src={faq.logo} alt={faq.id} />
+                </Box>
+                <Box>
+                  <Typography className='faq-name'>{faq.name}</Typography>
+                </Box>
+                {tabActive === faq.id && (
+                  <svg
+                    width='79'
+                    height='14'
+                    viewBox='0 0 79 14'
+                    fill='none'
+                    strokeWidth='1.5'
+                    stroke='currentColor'
+                    className='faq-arrow'
+                    xmlns='http://www.w3.org/2000/svg'
+                  >
+                    <g>
+                      <path
+                        d='M1 7H78M78 7L72 1M78 7L72 13'
+                        stroke='#4d5d7994'
+                        strokeWidth='1.5'
+                        strokeLinecap='round'
+                        strokeLinejoin='round'
+                      />
+                    </g>
+                  </svg>
+                )}
+              </Box>
+            ))}
+          </Box>
+        </Box>
+        <Box className='cover-faq-items'>
+          {faqList
+            .find((faq) => faq.id === tabActive)
+            ?.faq?.map((item, index) => (
+              <FAQItem
+                key={index}
+                question={item.question}
+                answer={item.answer}
+                isOpen={openItems.includes(index)}
+                toggle={() => toggleItem(index)}
+              />
+            ))}
         </Box>
-        <Box className='cover-faq-items'></Box>
       </Box>
     </Box>
   );

src/pages/styles/launchpad.scss

@@ -238,11 +238,14 @@
     margin-top: 1.5rem;
   }
 
+  .flex-40 {
+    flex: 40%;
+  }
+
   .cover-faq-list {
     display: grid;
     grid-template-columns: repeat(1, minmax(0, 1fr));
     gap: 0.25rem;
-    flex: 40%;
   }
 
   .faq {
@@ -294,6 +297,44 @@
   .cover-faq-items {
     flex: 60%;
   }
+
+  .faq-item-button {
+    width: 100%;
+    text-align: left;
+    padding: 0.75rem 0.5rem 0.75rem 0.75rem;
+    border-top: 1px solid #282D3D;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+    span {
+      font-size: 1.125rem;
+      line-height: 1.75rem;
+      font-weight: 600;
+    }
+  }
+
+  .cover-faq-item {
+    overflow: hidden;
+    transition: all 300ms ease-in-out;
+  }
+
+  .faq-item-open {
+    opacity: 100;
+  }
+
+  .faq-item-close{
+    max-height: 0;
+    opacity: 0;
+  }
+
+  .down-icon {
+    transition: transform 0.3s ease-in-out;
+  }
+
+  .rotate-180 {
+    transform: rotate(180deg);
+  }
 }
 
 .ctaSection {