refactor: clean up css and use bootstrap grid

HackAtUCI · Sep 8, 2023 · 5304ad4 · 5304ad4
1 parent b2f5113
commit 5304ad4
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 46 deletions.
diff --git a/apps/site/src/components/Footer/Footer.module.scss b/apps/site/src/components/Footer/Footer.module.scss
@@ -4,14 +4,6 @@
 	padding-bottom: 7vw;
 }
 
-.socials {
-	display: grid;
-	grid-template-columns: repeat(4, 7.5vw);
-	column-gap: 2vw;
-	place-items: center;
-	place-content: center;
-}
-
 .text {
 	font-size: 1.5rem;
 	font-weight: bold;

diff --git a/apps/site/src/components/Footer/Footer.tsx b/apps/site/src/components/Footer/Footer.tsx
@@ -1,7 +1,12 @@
+"use client";
+
 import Image from "next/image";
 
 import styles from "./Footer.module.scss";
 
+import Row from "react-bootstrap/Row";
+import Col from "react-bootstrap/Col";
+
 import Mail from "@/assets/icons/mail.svg";
 import Facebook from "@/assets/icons/facebook.svg";
 import Instagram from "@/assets/icons/insta.svg";
@@ -50,13 +55,23 @@ export default function Footer() {
 	return (
 		<footer className={styles.footer}>
 			<p className={styles.text}>Made with &lt;3 in Irvine, CA - Hack @ UCI</p>
-			<div className={styles.socials}>
+			<Row
+				className="justify-content-center align-items-center"
+				xs="auto"
+				sm="auto"
+				md="auto"
+				lg="auto"
+				xl="auto"
+				xxl="auto"
+			>
 				{SOCIALS.map(({ icon, link, alt, width, height }: Social) => (
-					<a key={link} href={link} target="_blank">
-						<Image src={icon.src} alt={alt} width={width} height={height} />
-					</a>
+					<Col>
+						<a key={link} href={link} target="_blank">
+							<Image src={icon.src} alt={alt} width={width} height={height} />
+						</a>
+					</Col>
 				))}
-			</div>
+			</Row>
 		</footer>
 	);
 }
diff --git a/apps/site/src/components/NavBar/NavBar.module.scss b/apps/site/src/components/NavBar/NavBar.module.scss
@@ -1,16 +1,16 @@
 @use "@/lib/styles/variables.scss" as variables;
 
 .nav {
-	position: fixed;
+	position: sticky;
 	width: 100%;
+	filter: drop-shadow(0px 2.5px 2px rgba(0, 0, 0, 0.4));
 }
 
 .navbar {
 	background-image: url("~@/assets/images/lined_paper.svg");
 	background-size: cover;
 	background-position: left bottom;
 	background-repeat: no-repeat;
-	filter: drop-shadow(0px 2.5px 2px rgba(0, 0, 0, 0.4));
 }
 
 .logo {
@@ -22,44 +22,31 @@
 	transform: rotate(-16.81deg) translateY(-5vw);
 }
 
-.homeNotActive,
-.resourcesNotActive,
-.scheduleNotActive {
+.text {
 	margin-left: 1vw;
 	margin-right: 1vw;
 	font-size: 2rem;
 	font-weight: bold;
-	color: black;
 	text-decoration: none;
 }
 
-.homeActive {
-	margin-left: 1vw;
-	margin-right: 1vw;
-	font-size: 2rem;
-	font-weight: bold;
+.notActive {
+	@extend .text;
 	color: black;
-	text-decoration: none;
+}
+
+.homeActive {
+	@extend .text;
 	color: variables.$green;
 }
 
 .resourcesActive {
-	margin-left: 1vw;
-	margin-right: 1vw;
-	font-size: 2rem;
-	font-weight: bold;
-	color: black;
-	text-decoration: none;
+	@extend .text;
 	color: variables.$blue;
 }
 
 .scheduleActive {
-	margin-left: 1vw;
-	margin-right: 1vw;
-	font-size: 2rem;
-	font-weight: bold;
-	color: black;
-	text-decoration: none;
+	@extend .text;
 	color: variables.$navbar-red;
 }
 
@@ -68,12 +55,7 @@
 		left: 3vw;
 		transform: rotate(-16.81deg) translateY(-6vw);
 	}
-	.homeNotActive,
-	.resourcesNotActive,
-	.scheduleNotActive,
-	.homeActive,
-	.resourcesActive,
-	.scheduleActive {
+	.text {
 		font-size: 1.5rem;
 	}
 }

diff --git a/apps/site/src/components/NavBar/NavBar.tsx b/apps/site/src/components/NavBar/NavBar.tsx
@@ -26,7 +26,7 @@ export default function NavBar() {
 							<Link
 								href="/"
 								className={
-									activeRoute === "/" ? styles.homeActive : styles.homeNotActive
+									activeRoute === "/" ? styles.homeActive : styles.notActive
 								}
 							>
 								Home
@@ -36,7 +36,7 @@ export default function NavBar() {
 								className={
 									activeRoute === "/resources"
 										? styles.resourcesActive
-										: styles.resourcesNotActive
+										: styles.notActive
 								}
 							>
 								Resources
@@ -46,7 +46,7 @@ export default function NavBar() {
 								className={
 									activeRoute === "/schedule"
 										? styles.scheduleActive
-										: styles.scheduleNotActive
+										: styles.notActive
 								}
 							>
 								Schedule