Mui homepage styling (#20)

Co-authored-by: Ross Cubbon <[email protected]>
SWU-Karabast · Nov 27, 2024 · e2e0692 · e2e0692
1 parent b3523a2
commit e2e0692
Show file tree

Hide file tree

Showing 16 changed files with 485 additions and 351 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/app/_components/HomePage/HomePageTypes.ts b/src/app/_components/HomePage/HomePageTypes.ts
@@ -4,7 +4,6 @@ export interface HexagonProps {
 
 export interface GameInProgressPlayerProps {
 	playerImage: string;
-	hexagonColors: string[];
 }
 
 export interface PublicGameInProgressProps {

diff --git a/src/app/_components/HomePage/News/News.tsx b/src/app/_components/HomePage/News/News.tsx
@@ -6,40 +6,26 @@ import { articles } from "@/app/_constants/mockData";
 const NewsColumn: React.FC = () => {;
 
 	const styles = {
-		notice: {
-			mb: "1rem",
-			height:"auto", 
-			overflow: "visible",
-		},
-		newsBox: {
+		box: {
 			display: "flex",
 			flexDirection: "column",
+			alignItems: "center",
 			height: "100%",
 		},
-		newsList: {
-			"::-webkit-scrollbar": {
-				width: "0.2vw",
-			},
-			"::-webkit-scrollbar-thumb": {
-				backgroundColor: "#D3D3D3B3",
-				borderRadius: "1vw",
-			},
-			"::-webkit-scrollbar-button": {
-				display: "none",
-			},
-			transition: "scrollbar-color 0.3s ease-in-out",
-			overflowY: "scroll",
+		notice: {
+			mb: "1.5rem",
+			overflow:"visible",
 		},
-		boxStyle: {
-			display: "flex",
-			flexDirection: "column",
-			alignItems: "center",
+		boxNews: {
 			height: "100%",
+			scrollbarColor: "#888888 rgba(0, 0, 0, 0)",
+  			scrollbarWidth: "thin",
 		},
 	};
 
 	return (
-		<Box sx={styles.boxStyle}>
+		<Box sx={styles.box}>
+
 			<Card variant="blue" sx={styles.notice}>
 				<CardContent>
 					<Typography variant="bodyBold">Karabast is an open-source, fan-made platform.</Typography>
@@ -48,19 +34,19 @@ const NewsColumn: React.FC = () => {;
 				</CardContent>
 			</Card>
 
-			{/* Bottom Card: Scrollable and displays NewsItem */}
-			<Card variant="black" sx={styles.newsBox}>
+			<Card variant="black" sx={styles.boxNews}>
 				<Box>
 					<Typography variant="h2">
 						News
 					</Typography>
 				</Box>
-				<Box sx={styles.newsList}>
+				<Box>
 					{articles.map((article, index) => (
 						<NewsItem article={article} key={index} />
 					))}
 				</Box>
 			</Card>
+
 		</Box>
 	);
 };

diff --git a/src/app/_components/HomePage/PublicGames/PublicGames.tsx b/src/app/_components/HomePage/PublicGames/PublicGames.tsx
@@ -5,37 +5,37 @@ import GamesInProgress from "../_subcomponents/GamesInProgress/GamesInProgress";
 import { PublicGamesProps } from "../HomePageTypes";
 
 const PublicGames: React.FC<PublicGamesProps> = ({ format }) => {
-	//------------------------STYLES------------------------//
 
-
-	const PublicGamesWrapper = {
-		height: "100%",
-	  };
-
-	const cardContentStyle = {
-		display: "flex",
-		flexDirection: "column",
-		justifyContent: "center",
-	};
-
-	const dividerStyle = {
-		backgroundColor: "#fff",
-		my: ".7em",
+	const styles = {
+		publicGamesWrapper: {
+			height: "100%",
+			scrollbarColor: "#888888 rgba(0, 0, 0, 0)",
+			scrollbarWidth: "thin",
+		},
+		cardContent: {
+			display: "flex",
+			flexDirection: "column",
+			justifyContent: "center",
+		},
+		divider: {
+		 	 backgroundColor: "#fff",
+		  	my: ".7em",
+		},
 	};
 
 	return (
-		<Card variant="black" sx={PublicGamesWrapper}>
-			<CardContent sx={cardContentStyle}>
+		<Card variant="black" sx={styles.publicGamesWrapper}>
+			<CardContent sx={styles.cardContent}>
 				<Typography variant="h2">Public Games</Typography>
 				<Typography variant="h3">{format}</Typography>
-				<Divider sx={dividerStyle} />
+				<Divider sx={styles.divider} />
 				<JoinableGame />
 				<JoinableGame />
 				<JoinableGame />
 				<Typography variant="h3">
 					Request-Undo {format}
 				</Typography>
-				<Divider sx={dividerStyle} />
+				<Divider sx={styles.divider} />
 				<JoinableGame />
 				<GamesInProgress />
 			</CardContent>

diff --git a/src/app/_components/HomePage/_subcomponents/GameInProgressPlayer/GameInProgressPlayer.tsx b/src/app/_components/HomePage/_subcomponents/GameInProgressPlayer/GameInProgressPlayer.tsx
@@ -1,10 +1,8 @@
 import { Box } from "@mui/material";
-import Hexagon from "../Hexagon/Hexagon";
 import { GameInProgressPlayerProps } from "../../HomePageTypes";
 
 const GameInProgressPlayer: React.FC<GameInProgressPlayerProps> = ({
 	playerImage,
-	hexagonColors,
 }) => {
 	//------------------------STYLES------------------------//
 
@@ -17,14 +15,6 @@ const GameInProgressPlayer: React.FC<GameInProgressPlayerProps> = ({
 		display: "flex",
 	};
 
-	const hexagonsContainerStyle = {
-		display: "flex",
-		flexDirection: "column",
-		justifyContent: "center",
-		alignItems: "center",
-		ml: ".3vw",
-	};
-
 	const boxStyle = {
 		display: "flex",
 	};

diff --git a/src/app/_components/HomePage/_subcomponents/GamesInProgress/GamesInProgress.tsx b/src/app/_components/HomePage/_subcomponents/GamesInProgress/GamesInProgress.tsx
@@ -8,49 +8,31 @@ const GamesInProgress: React.FC = () => {
 	const randomGamesInProgress =
 		Math.floor(Math.random() * 9 * twoOrThreeDigits) + twoOrThreeDigits;
 
-	//------------------------STYLES------------------------//
-
-	const headerBoxStyle = {
-		position: "sticky",
-		top: 0,
-		zIndex: 1,
-		display: "flex",
-		justifyContent: "space-between",
-		alignItems: "flex-end",
-		alignContent: "center",
-		mt: 1,
-	};
-
-	const dividerStyle = {
-		mt: ".5vh",
-		mb: "1vh",
-	};
-
-	const scrollableBoxStyle = {
-		overflowY: "auto",
-		mb: ".5em",
-		pr: ".5em",
-		"::-webkit-scrollbar": {
-			width: "0.2vw",
+	const styles = {
+		headerBox: {
+			display: "flex",
+			justifyContent: "space-between",
+			alignItems: "flex-end",
+			alignContent: "center",
+			mt: 1,
 		},
-		"::-webkit-scrollbar-thumb": {
-			backgroundColor: "#D3D3D3B3",
-			borderRadius: "1vw",
+		divider: {
+			mt: ".5vh",
+			mb: "1vh",
 		},
-		"::-webkit-scrollbar-button": {
-			display: "none",
+		activeGamesNumber: {
+			fontWeight: 400,
 		},
-		transition: "scrollbar-color 0.3s ease-in-out",
 	};
 
 	return (
 		<>
-			<Box sx={headerBoxStyle}>
+			<Box sx={styles.headerBox}>
 				<Typography variant="h3">Games in Progress</Typography>
-				<Typography variant="h3">{randomGamesInProgress}</Typography>
+				<Typography variant="h3" sx={styles.activeGamesNumber}>{randomGamesInProgress}</Typography>
 			</Box>
-			<Divider sx={dividerStyle} />
-			<Box sx={scrollableBoxStyle}>
+		<Divider sx={styles.divider} />
+			<Box>
 				{playerMatches.map((match, index) => (
 					<PublicMatch key={index} match={match} />
 				))}

diff --git a/src/app/_components/HomePage/_subcomponents/JoinableGame/JoinableGame.tsx b/src/app/_components/HomePage/_subcomponents/JoinableGame/JoinableGame.tsx
@@ -6,25 +6,23 @@ const JoinableGame: React.FC = () => {
 
 	//------------------------STYLES------------------------//
 
-	const boxStyle = {
-		width: "100%",
-		display: "flex",
-		justifyContent: "space-between",
-		alignContent: "center",
-		alignItems: "center",
-		mb: ".5em",
-		pr: ".5em",
-	};
-
-	const typographyStyle = {
-		fontFamily: "var(--font-barlow), sans-serif",
-		fontSize: "1.5em",
-		color: "#fff",
+	const styles = {
+		box: {
+			width: "100%",
+			display: "flex",
+			justifyContent: "space-between",
+			alignContent: "center",
+			alignItems: "center",
+			mb: "1rem",
+		},
+		matchType: {
+		  	margin: 0,
+		},
 	};
 
 	return (
-		<Box sx={boxStyle}>
-			<Typography variant="body1">Game #{randomGameId}</Typography>
+		<Box sx={styles.box}>
+			<Typography variant="body1" sx={styles.matchType}>Game #{randomGameId}</Typography>
 			<Button>Join Game</Button>
 		</Box>
 	);