Updated font weights of faq, left-right margins match application but…

…tons, removed unnused variable
HackAtUCI · Oct 7, 2024 · 54ab71a · 54ab71a
1 parent 99d3a2a
commit 54ab71a
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 16 deletions.
diff --git a/apps/site/src/app/(home)/sections/FAQ/FAQ.module.scss b/apps/site/src/app/(home)/sections/FAQ/FAQ.module.scss
@@ -7,17 +7,6 @@ $mobile-item-padding-x: 32px;
 $item-padding-y: 32px;
 $item-padding-x: 48px;
 
-$answer-font-size: 16px;
-$question-font-size: 20px;
-
-.light-blue-text {
-	color: theme.$light-blue;
-}
-
-.purple-text {
-	color: theme.$purple;
-}
-
 .container {
 	position: relative;
 	padding-top: 6rem;
@@ -36,8 +25,6 @@ $question-font-size: 20px;
 }
 
 .accordion-border {
-	margin-left: 10px;
-	margin-right: 10px;
 	margin-bottom: 8px;
 }
 
@@ -46,6 +33,10 @@ $question-font-size: 20px;
 	border: 6px solid theme.$white;
 	box-shadow: inset 0 0 0 6px theme.$black;
 	border-radius: 16px;
+
+	& > * > * {
+		font-weight: 600;
+	}
 }
 
 .answer-body {
@@ -58,13 +49,30 @@ $question-font-size: 20px;
 
 	& > * {
 		margin: 0;
+		font-weight: 500;
+	}
+
+	& > * > * {
+		font-weight: 500;
 	}
 }
 
 .header-body {
 	padding: $mobile-item-padding-y $mobile-item-padding-x;
 }
 
+.faq-header, .faq-header > * {
+	font-weight: 600;
+}
+
+.light-blue-text {
+	color: theme.$light-blue;
+}
+
+.purple-text {
+	color: theme.$purple;
+}
+
 .accordion {
 	--bs-accordion-body-padding-y: #{$mobile-item-padding-y};
 	--bs-accordion-body-padding-x: #{$mobile-item-padding-x};
@@ -96,11 +104,16 @@ $question-font-size: 20px;
 	.accordion {
 		--bs-accordion-body-padding-y: #{$item-padding-y};
 		--bs-accordion-body-padding-x: #{$item-padding-x};
-	
+
 		--bs-accordion-btn-padding-y: #{$item-padding-y};
 		--bs-accordion-btn-padding-x: #{$item-padding-x};
 	}
 
+	.accordion-border {
+		margin-left: 10px;
+		margin-right: 10px;
+	}
+
 	.left-anteater {
 		display: block;
 		position: sticky;

diff --git a/apps/site/src/app/(home)/sections/FAQ/FAQ.tsx b/apps/site/src/app/(home)/sections/FAQ/FAQ.tsx
@@ -30,7 +30,7 @@ const FAQ = async () => {
 				<div
 					className={`${styles["accordion-border"]} ${styles["answer-body"]} ${styles["header-body"]}`}
 				>
-					<span className="h4">
+					<span className={styles["faq-header"] + " h4"}>
 						<h2 className="visually-hidden">FAQ</h2>
 						<span className={styles["light-blue-text"]}>FAQ!</span> Here's
 						answers to our most commonly asked questions!

diff --git a/apps/site/src/app/(home)/sections/FAQ/FAQAccordion.tsx b/apps/site/src/app/(home)/sections/FAQ/FAQAccordion.tsx
@@ -20,7 +20,7 @@ const FAQAccordion: React.FC<FAQAccordion> = ({ faq }) => {
 					className={styles["accordion-border"]}
 					eventKey={_key}
 				>
-					<Accordion.Header as="h3" className={styles["question-body"]}>
+					<Accordion.Header as="h4" className={styles["question-body"]}>
 						{question}
 					</Accordion.Header>
 					<Accordion.Body className={styles["answer-body"]}>