Changed FAQ div to use Bootstrap container

HackAtUCI · Oct 4, 2024 · a4572ce · a4572ce
1 parent 00f055c
commit a4572ce
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 17 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
@@ -15,21 +15,12 @@ $question-font-size: 20px;
 	color: theme.$purple;
 }
 
-.faq {
-	position: relative;
-	display: flex;
-	flex-direction: column;
-	width: 90%;
-
-	padding-bottom: 1.875rem;
-}
-
 .container {
 	position: relative;
 	padding-top: 6rem;
 	padding-bottom: 6rem;
 	display: flex;
-	justify-content: space-around;
+	justify-content: space-evenly;
 	width: 100vw;
 }
 
@@ -118,8 +109,4 @@ $question-font-size: 20px;
 	.container {
 		padding-right: 30px;
 	}
-
-	.faq {
-		width: 70%;
-	}
 }
diff --git a/apps/site/src/app/(home)/sections/FAQ/FAQ.tsx b/apps/site/src/app/(home)/sections/FAQ/FAQ.tsx
@@ -1,7 +1,9 @@
+import { Container } from "react-bootstrap";
+import { PortableText } from "@portabletext/react";
+
 import { getQuestions } from "./getQuestions";
 import FAQAccordion from "./FAQAccordion";
 
-import { PortableText } from "@portabletext/react";
 import styles from "./FAQ.module.scss";
 
 import leftAnteater from "@/assets/images/left-faq-anteater.svg";
@@ -24,7 +26,7 @@ const FAQ = async () => {
 				className={styles["left-anteater"]}
 			/>
 
-			<div className={styles.faq}>
+			<Container as="div" className="m-0">
 				<div
 					className={`${styles["accordion-border"]} ${styles["answer-body"]} ${styles["header-body"]}`}
 				>
@@ -43,7 +45,7 @@ const FAQ = async () => {
 					</p>
 				</div>
 				<FAQAccordion faq={faq} />
-			</div>
+			</Container>
 
 			<AnteaterFloatie
 				src={rightAnteater}