Skip to content

Commit

Permalink
Merge pull request #748 from celestemods-com/centralize-all-colors
Browse files Browse the repository at this point in the history 
Get All Colors From `~/styles` Or Mantine Theme
  • Loading branch information
@otobot1
otobot1 authored Mar 16, 2024
2 parents a735e0c + 5c5351e commit 17962f5
Show file tree
Hide file tree
Showing 6 changed files with 100 additions and 85 deletions.
39 changes: 22 additions & 17 deletions src/components/layout/footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,27 +2,32 @@ import { Box, Group, Stack, createStyles } from "@mantine/core";
import Link from "next/link";
import { cmlDiscordInviteUrl } from "~/consts/cmlDiscordInviteUrl";
import { COMING_SOON_PATHNAME } from "~/consts/pathnames";
import { blackBackgroundColor } from "~/styles/layoutColors";
import { difficultyColors } from "~/styles/mods-colors";




const useStyles = createStyles(() => ({
outerFooter: {
backgroundColor: "rgba(1.0, 1.0, 1.0, 0.9)",
/* top | left and right | bottom */
padding: "1px 10px 10px",
},
footer: {
padding: "0 12px",
},
horizontalRule: {
border: "2px solid #5b8bb3",
},
discordLink: {
fontWeight: "bold",
textAlign: "center",
},
}));
const useStyles = createStyles(
() => ({
outerFooter: {
backgroundColor: blackBackgroundColor,
/* top | left and right | bottom */
padding: "1px 10px 10px",
},
footer: {
padding: "0 12px",
},
horizontalRule: {
border: "2px solid",
borderColor: difficultyColors.beginner.primaryHover1,
},
discordLink: {
fontWeight: "bold",
textAlign: "center",
},
})
);



Expand Down
39 changes: 21 additions & 18 deletions src/components/layout/header.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,27 @@
import { Flex, createStyles, Title, Box } from "@mantine/core";
import Image from "next/image";
import cmlLogo from "~/../public/images/logo/cml_logo.png";




const useStyles = createStyles(() => ({
header: {
color: "white",
backgroundColor: "rgba(1.0, 1.0, 1.0, 0.9)",
padding: "10px 45px",
alignItems: "center",
},
siteTitle: {
fontSize: "45px",
flexGrow: 1,
textAlign: "center",
margin: "0",
}
}));
import { blackBackgroundColor } from "~/styles/layoutColors";




const useStyles = createStyles(
(theme) => ({
header: {
color: theme.white,
backgroundColor: blackBackgroundColor,
padding: "10px 45px",
alignItems: "center",
},
siteTitle: {
fontSize: "45px",
flexGrow: 1,
textAlign: "center",
margin: "0",
}
})
);



Expand Down
27 changes: 15 additions & 12 deletions src/components/layout/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { Navbar } from "./navbar/navbar";
import { Footer } from "./footer";
import { getNonEmptyArray } from "~/utils/getNonEmptyArray";
import { MODS_PAGE_PATHNAME } from "~/consts/pathnames";
import { blackBackgroundColor } from "~/styles/layoutColors";



Expand All @@ -18,18 +19,20 @@ const PAGES = getNonEmptyArray([



const useStyles = createStyles(() => ({
backgroundImage: {
minWidth: "100vw",
minHeight: "100vh",
padding: "20px",
},
children: {
backgroundColor: "rgba(1.0, 1.0, 1.0, 0.9)",
height: "630px",
padding: "5px 45px",
},
}));
const useStyles = createStyles(
() => ({
backgroundImage: {
minWidth: "100vw",
minHeight: "100vh",
padding: "20px",
},
children: {
backgroundColor: blackBackgroundColor,
height: "630px",
padding: "5px 45px",
},
})
);



Expand Down
49 changes: 26 additions & 23 deletions src/components/layout/navbar/navLink.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,33 @@
import { Flex, createStyles } from "@mantine/core";
import Link from "next/link";
import { difficultyColors } from "~/styles/mods-colors";




const useStyles = createStyles((theme) => ({
navLink: {
width: "150px",
height: "40px",
position: "relative",
},
navLinkLabel: {
backgroundColor: "#263972",
color: theme.white,
flexGrow: 1,
fontSize: '17px',
display: "flex",
justifyContent: "center",
alignItems: "center",
fontWeight: "bold",
},
activeNavLink: {
position: "absolute",
right: "-40px",
},
}));
const useStyles = createStyles(
(theme) => ({
navLink: {
width: "150px",
height: "40px",
position: "relative",
},
navLinkLabel: {
backgroundColor: difficultyColors.beginner.primary,
color: theme.white,
flexGrow: 1,
fontSize: '17px',
display: "flex",
justifyContent: "center",
alignItems: "center",
fontWeight: "bold",
},
activeNavLink: {
position: "absolute",
right: "-40px",
},
})
);



Expand Down Expand Up @@ -54,7 +57,7 @@ export const NavLink = ({ label, pathname, active }: NavLinkProps) => {
xmlns="http://www.w3.org/2000/svg"
width="40px"
height="40px"
fill="#263972"
fill={difficultyColors.beginner.primary}
>
<polygon points="0,0 100,0 100,100 0,100 100,50" />
</svg>
Expand All @@ -67,7 +70,7 @@ export const NavLink = ({ label, pathname, active }: NavLinkProps) => {
xmlns="http://www.w3.org/2000/svg"
width="40px"
height="40px"
fill="#263972"
fill={difficultyColors.beginner.primary}
className={classes.activeNavLink}
>
<polygon points="0,0 100,50 0,100" />
Expand Down
30 changes: 15 additions & 15 deletions src/components/mods/modsTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ const useStyles = createStyles(
justifyContent: "end",
},
tab: {
color: "white",
color: theme.white,
padding: "1px 20px",
display: "inline-block",
borderTopLeftRadius: "5px",
Expand All @@ -48,22 +48,22 @@ const useStyles = createStyles(
"button": {
border: "none",
},
backgroundColor: colors ? colors.primary : "black",
color: "white",
backgroundColor: colors ? colors.primary : theme.black,
color: theme.white,
"&&&& button": {
backgroundColor: colors ? colors.secondary : "black",
backgroundColor: colors ? colors.secondary : theme.black,
},
"&&&& button:hover": {
backgroundColor: colors ? colors.secondaryHover : "black",
backgroundColor: colors ? colors.secondaryHover : theme.black,
},
'&&&&& button[data-active]': {
backgroundColor: colors ? colors.primaryHover1 : "black",
backgroundColor: colors ? colors.primaryHover1 : theme.black,
},
'&&&&& button[data-active]:hover': {
backgroundColor: colors ? colors.primaryHover2 : "black",
backgroundColor: colors ? colors.primaryHover2 : theme.black,
},
'&&&&&& button[data-disabled]': {
backgroundColor: colors ? colors.secondaryDisabled : "black",
backgroundColor: colors ? colors.secondaryDisabled : theme.black,
},
},
beginner: {
Expand Down Expand Up @@ -103,7 +103,7 @@ const useStyles = createStyles(
"&&&&": {
/* top | left and right | bottom */
padding: `${theme.spacing.sm} ${theme.spacing.xl} ${theme.spacing.sm}`,
backgroundColor: "#e1e1e2",
backgroundColor: theme.colors.gray[2],
color: theme.black,
borderWidth: 0,
fontWeight: "bold",
Expand All @@ -121,34 +121,34 @@ const useStyles = createStyles(
padding: "10px",
textAlign: "center",
border: "none",
backgroundColor: colors ? colors.primary : "black",
backgroundColor: colors ? colors.primary : theme.black,
// The down arrow appears blurry due to rotation, so we zoom in to fix that.
// https://stackoverflow.com/a/53556981
".mantine-Center-root": {
zoom: 1.1,
},
"svg": {
color: "white",
color: theme.white,
}
},
"&&&& th:hover": {
backgroundColor: colors ? colors.primaryHover1 : "black",
backgroundColor: colors ? colors.primaryHover1 : theme.black,
},
},
columnTitle: {
"&&&& .mantine-UnstyledButton-root": {
border: "none",
":hover": {
backgroundColor: colors ? colors.primaryHover2 : "black",
backgroundColor: colors ? colors.primaryHover2 : theme.black,
}
}
},
filteredColumnTitle: {
"&&&& .mantine-UnstyledButton-root": {
border: "none",
backgroundColor: colors ? colors.primaryHover1 : "black",
backgroundColor: colors ? colors.primaryHover1 : theme.black,
":hover": {
backgroundColor: colors ? colors.primaryHover2 : "black",
backgroundColor: colors ? colors.primaryHover2 : theme.black,
}
}
},
Expand Down
1 change: 1 addition & 0 deletions src/styles/layoutColors.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export const blackBackgroundColor = "rgba(1.0, 1.0, 1.0, 0.9)";

0 comments on commit 17962f5

Please sign in to comment.