chore: renamed variables, small styling, and added/removed props

Author: NoNathan17

apps/site/src/app/(home)/sections/About/About.tsx

@@ -22,8 +22,8 @@ const About = () => {
 	return (
 		<section className={styles.about}>
 			<div className={styles.content}>
-				<RetroWindow title="What is ZotHacks?" useChildBackground>
-					<p className={styles.aboutWindowText} style={{ backgroundColor: "white" }}>
+				<RetroWindow title="What is ZotHacks?">
+					<p className={styles.aboutWindowText}>
 						ZotHacks is a 12-hour hackathon designed for beginners where students
 						with minimal computer science experience will learn to build their
 						first CS project. Through ZotHacks, we introduce these students to the

apps/site/src/components/RetroWindow/RetroWindow.module.scss

@@ -1,7 +1,6 @@
 @use "zothacks-theme" as theme;
 
 $window-gray: #e2e2e0;
-$child-border: #ababad;
 
 .root {
 	width: 100%;
@@ -19,7 +18,7 @@ $child-border: #ababad;
 	align-items: center;
 	justify-content: space-between;
 	gap: 0.75rem;
-	padding: 0.35rem 0.5rem;
+	padding: 0.45rem 0.5rem;
 	background: linear-gradient(90deg, #03036d 0%, #487db5 100%);
 }
 
@@ -44,7 +43,7 @@ $control-size: 20px;
 .controls {
 	display: flex;
 	flex-shrink: 0;
-	gap: 2px;
+	gap: 0.65rem;
 }
 
 .windowControl {
@@ -144,16 +143,14 @@ $control-size: 20px;
 	gap: 0.35rem;
 }
 
-.childPanel {
-	border: 2.52px solid $child-border;
-	background: transparent;
-	overflow: hidden;
+.toolbar {
+	padding: 0 0.25rem;
 }
 
-.childContent {
+.content {
 	padding: 0.25rem 0.5rem;
 }
 
-.secondChild {
+.footer {
 	padding: 0 0.25rem;
 }

apps/site/src/components/RetroWindow/RetroWindow.tsx

@@ -4,39 +4,28 @@ import React, { PropsWithChildren } from "react";
 import styles from "./RetroWindow.module.scss";
 
 /**
- * Retro window shell: title bar, optional menu bar, main body, optional footer row.
+ * Retro window shell: title bar, optional menu bar, optional toolbar,
+ * main body, and optional footer row.
  *
  * `children` (from `PropsWithChildren`) is the main body content.
  */
 export interface RetroWindowProps extends PropsWithChildren {
 	/** When true, shows the “File Edit Insert” menu bar (visual only). */
-	isEdit?: boolean;
+	showEditBar?: boolean;
 	/** Text shown in the blue gradient title bar. */
 	title: string;
-	/**
-	 * When true, wraps the main `children` in the bordered panel; the child sets its
-	 * own background (e.g. white). When false, children sit on the default gray (#E2E2E0).
-	 */
-	useChildBackground?: boolean;
-	/**
-	 * Optional row below the main child (e.g. toolbar), on the window gray unless
-	 * `useChild2Background` is true.
-	 */
-	secondChild?: React.ReactNode;
-	/**
-	 * When true with `secondChild`, applies the same bordered panel treatment as
-	 * `useChildBackground` for the second row (rare; e.g. home background picker).
-	 */
-	useChild2Background?: boolean;
+	/** Optional row above the main content, e.g. tabs, filters, or tools. */
+	toolbar?: React.ReactNode;
+	/** Optional row below the main content, e.g. status text or actions. */
+	footer?: React.ReactNode;
 }
 
 const RetroWindow = ({
 	title,
 	children,
-	isEdit = false,
-	useChildBackground = false,
-	secondChild,
-	useChild2Background = false,
+	showEditBar = false,
+	toolbar,
+	footer,
 }: RetroWindowProps) => {
 	return (
 		<div className={styles.root}>
@@ -67,8 +56,8 @@ const RetroWindow = ({
 					</div>
 				</div>
 
-				<div className={clsx(styles.body, isEdit && styles.bodyWithMenu)}>
-					{isEdit && (
+				<div className={clsx(styles.body, showEditBar && styles.bodyWithMenu)}>
+					{showEditBar && (
 						<nav className={styles.editMenu} aria-hidden>
 							<span>
 								<span className={styles.menuKey}>F</span>ile
@@ -81,22 +70,15 @@ const RetroWindow = ({
 							</span>
 						</nav>
 					)}
-					<div
-						className={clsx(
-							useChildBackground ? styles.childPanel : styles.childContent,
-						)}
-					>
-						{children}
-					</div>
 
-					{secondChild != null && (
-						<div
-							className={clsx(
-								useChild2Background ? styles.childPanel : styles.secondChild,
-							)}
-						>
-							{secondChild}
-						</div>
+					{toolbar != null && (
+						<div className={styles.toolbar}>{toolbar}</div>
+					)}
+
+					<div className={styles.content}>{children}</div>
+
+					{footer != null && (
+						<div className={styles.footer}>{footer}</div>
 					)}
 				</div>
 			</div>