refactor: addresses review comments

calblueprint · Jan 11, 2024 · 7815078 · 7815078
1 parent 0de4cf8
commit 7815078
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 21 deletions.
diff --git a/src/components/FAQ.astro b/src/components/FAQ.astro
@@ -77,7 +77,7 @@ const faqsCol2 = faqs.slice(split);
   <div class="faq-headers">
     <h4>FAQ</h4>
     <h2>
-      Frequently asked questions – <span>we've got the answers</span>
+      Frequently asked questions <span>– we've got the answers</span>
     </h2>
   </div>
   <div class="faq-content">
@@ -101,11 +101,13 @@ const faqsCol2 = faqs.slice(split);
 </section>
 
 <style lang="scss">
+  @use '../styles/_fonts.scss';
+
   #faq {
     display: flex;
     flex-direction: column;
     width: 80vw;
-    margin: 0 10%; // TODO: update section margin when graphics inserted
+    margin: 10rem auto 0;
   }
 
   .faq-headers {
@@ -116,25 +118,24 @@ const faqsCol2 = faqs.slice(split);
     margin-bottom: 4.5rem;
 
     span {
-      font-family: 'Apercu Pro';
+      font-family: fonts.$sans;
       font-size: 1.75rem;
-      font-weight: 400;
+      font-weight: 600;
     }
   }
 
   .faq-content {
     display: flex;
-    gap: 2rem;
+    gap: 32px;
+    width: 100%;
     align-items: flex-start;
-    max-width: 60vw;
-    margin: 0 15%;
+    padding: 0 15%;
   }
   .faq-container {
     display: flex;
     flex-direction: column;
-    gap: 2.19rem;
+    gap: 35px;
     width: 50%;
-    height: max-content;
     padding: 0 0.7rem;
   }
 </style>
diff --git a/src/components/FAQDropdown/index.tsx b/src/components/FAQDropdown/index.tsx
@@ -17,13 +17,11 @@ const FAQDropdown = ({ question, defaultOpen }: FAQDropdownProps) => {
   const { label, content, hyperlink } = question;
 
   const handleToggle = () => {
-    setIsOpen(!isOpen);
+    setIsOpen(prev => !prev);
   };
 
   const renderContent = () => {
-    const containsLink = ['Is there an event schedule?'].includes(label);
-
-    if (containsLink && hyperlink) {
+    if (hyperlink) {
       const { target, link } = hyperlink;
 
       const parts = content.split(target);
@@ -54,6 +52,7 @@ const FAQDropdown = ({ question, defaultOpen }: FAQDropdownProps) => {
         className={styles.labelContainer}
         onClick={handleToggle}
         tabIndex={0}
+        onKeyUp={handleToggle}
       >
         <div className={styles.statusIcon}>{isOpen ? '-' : '+'}</div>
         <b>{label}</b>

diff --git a/src/components/FAQDropdown/style.module.scss b/src/components/FAQDropdown/style.module.scss
@@ -13,13 +13,11 @@
   gap: 1.75rem;
   align-items: center;
   font-weight: 700;
-
-  &:hover {
-    cursor: pointer;
-  }
+  cursor: pointer;
 
   .statusIcon {
     font-size: 1.5rem;
+    text-align: center;
   }
 
   b {
@@ -32,11 +30,7 @@
   margin-left: 2.5rem;
 
   p {
-    color: colors.$text;
-    font-family: Apercu Pro;
-    font-size: 1rem;
     font-style: normal;
     font-weight: 400;
-    line-height: 24px;
   }
 }