Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Mui homepage styling #20

Merged
merged 14 commits into from
Nov 27, 2024
Merged

Mui homepage styling #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
c4e5756
Form input styling
rcubbon Nov 24, 2024
4884b80
Formatting for Public Games items
rcubbon Nov 24, 2024
63f4ce5
Added disclaimer, changes to grid and banner formatting
rcubbon Nov 24, 2024
c511b4a
Added correct style to creategame card, updated background opacity
rcubbon Nov 25, 2024
96e863e
Updated Login/Social nav styles, removed Patreon link
rcubbon Nov 25, 2024
8361a86
Updating pages to use 'const styles'
rcubbon Nov 25, 2024
3195c00
Updates to column and box padding
rcubbon Nov 25, 2024
aa0f56b
News and Notice column polish
rcubbon Nov 25, 2024
b2f8d1a
Revised column padding implementation
rcubbon Nov 25, 2024
74d07ce
Updating more pages to use 'const styles'
rcubbon Nov 25, 2024
5ecedcc
Update CreateGameForm.tsx
danbastin Nov 27, 2024
08a28e1
Merge branch 'main' into mui-homepage-styling
danbastin Nov 27, 2024
299bee1
cleanup control box
danbastin Nov 27, 2024
684f6cb
lint cleanup
danbastin Nov 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
120 changes: 120 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 0 additions & 1 deletion src/app/_components/HomePage/HomePageTypes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ export interface HexagonProps {

export interface GameInProgressPlayerProps {
playerImage: string;
hexagonColors: string[];
}

export interface PublicGameInProgressProps {
Expand Down
40 changes: 13 additions & 27 deletions src/app/_components/HomePage/News/News.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
);
};
Expand Down
38 changes: 19 additions & 19 deletions src/app/_components/HomePage/PublicGames/PublicGames.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
10 changes: 0 additions & 10 deletions src/app/_components/HomePage/_subcomponents/GameInProgressPlayer/GameInProgressPlayer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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------------------------//

Expand All @@ -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",
};
Expand Down
50 changes: 16 additions & 34 deletions src/app/_components/HomePage/_subcomponents/GamesInProgress/GamesInProgress.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
))}
Expand Down
30 changes: 14 additions & 16 deletions src/app/_components/HomePage/_subcomponents/JoinableGame/JoinableGame.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
Loading