Merge pull request #750 from celestemods-com/choose-new-colors

Choose New Colors
celestemods-com · Mar 18, 2024 · 88e6995 · 88e6995
2 parents 17962f5 + 113e590
commit 88e6995
Show file tree

Hide file tree

Showing 17 changed files with 738 additions and 291 deletions.
diff --git a/src/components/filterPopovers/listSelect.tsx b/src/components/filterPopovers/listSelect.tsx
@@ -1,6 +1,6 @@
 import type { Dispatch, SetStateAction } from "react";
 import { MultiSelect, createStyles } from "@mantine/core";
-import { colorsForDifficultyIndex } from "~/styles/mods-colors";
+import { colorsForDifficultyIndex } from "~/styles/modsColors";
 
 
 
@@ -28,48 +28,49 @@ const useStyles = createStyles(
         return {
             defaultValue: {
                 "&&&&": {
-                    color: "white",
-                    backgroundColor: colors.primaryHover1,
+                    backgroundColor: colors.primaryHover.backgroundColor, // highlight color for selected items
+                    color: colors.primaryHover.textColor,
                 },
                 "&&&& button": {
-                    color: "white",
-                }
+                    color: colors.primaryHover.textColor,
+                },
             },
             input: {
                 "&&&&": {
-                    backgroundColor: colors.primary,
-                    color: "white",
+                    backgroundColor: colors.primary.backgroundColor, // dropdown parent
+                    color: colors.primary.textColor, // this doesn't seem to be used
                 },
                 "&&&& input::placeholder": {
-                    color: "white",
-                }
+                    color: colors.primary.textColor,
+                },
             },
             dropdown: {
                 "&&&&": {
-                    backgroundColor: colors.primary,
-                }
+                    backgroundColor: colors.primary.backgroundColor, // dropdown
+                },
             },
             item: {
                 "&&&&": {
-                    color: "white",
+                    color: colors.primary.textColor,
                 },
                 "&&&&[data-hovered]": {
-                    backgroundColor: colors.primaryHover2,
-                }
+                    backgroundColor: colors.primaryHover.backgroundColor, // highlight color for hovered items in dropdown
+                    color: colors.primaryHover.textColor,
+                },
             },
             root: {
                 // Style the arrow on top of the box.
                 "+ div": {
-                    backgroundColor: colors.primary,
-                }
+                    backgroundColor: colors.primary.backgroundColor,
+                },
             },
             rightSection: {
                 "&&&& path": {
-                    color: "white",
-                }
-            }
+                    color: colors.primary.textColor,
+                },
+            },
         };
-    }
+    },
 );
 
 

diff --git a/src/components/filterPopovers/numberSearch.tsx b/src/components/filterPopovers/numberSearch.tsx
@@ -1,6 +1,6 @@
 import type { Dispatch, SetStateAction } from "react";
 import { NumberInput, Stack, type NumberInputProps, createStyles } from "@mantine/core";
-import { colorsForDifficultyIndex } from "~/styles/mods-colors";
+import { colorsForDifficultyIndex } from "~/styles/modsColors";
 
 
 
@@ -27,47 +27,47 @@ const useStyles = createStyles(
 
         return {
             box: {
-                padding: '10px',
-                backgroundColor: colors.primary,
+                padding: "10px",
+                backgroundColor: colors.primary.backgroundColor, // filter popover
                 "label": {
-                    color: "white",
+                    color: colors.primary.textColor,
                 },
                 // Style the arrow on top of the box.
                 "+ div": {
-                    backgroundColor: colors.primary,
+                    backgroundColor: colors.primary.backgroundColor,
                 }
             },
             root: {
                 "&&&&": {
-                    color: "white",
+                    color: colors.primary.textColor,    // this doesn't seem to be used
                 }
             },
             label: {
                 "&&&&": {
-                    color: "white",
+                    color: colors.primary.textColor,    // this doesn't seem to be used
                 }
             },
             description: {
                 "&&&&": {
-                    color: "white",
+                    color: colors.primary.textColor,
                 }
             },
             input: {
                 "&&&&": {
-                    color: 'white',
-                    borderColor: 'white',
-                    backgroundColor: 'transparent',
+                    color: colors.primary.textColor,
+                    borderColor: colors.primary.textColor,
+                    backgroundColor: "transparent",
                 },
                 "::placeholder": {
-                    color: "white",
+                    color: colors.primary.textColor,
                 },
             },
             control: {
                 "&&&&": {
-                    color: "white",
+                    color: colors.primary.textColor,
                     border: "none",
                     ":hover": {
-                        backgroundColor: colors.primaryHover2,
+                        backgroundColor: colors.primaryHover.backgroundColor, // increase/decrease arrows
                     }
                 },
             }

diff --git a/src/components/filterPopovers/stringSearch.tsx b/src/components/filterPopovers/stringSearch.tsx
@@ -1,7 +1,7 @@
 import { ActionIcon, TextInput, createStyles, type TextInputProps } from "@mantine/core";
 import type { Dispatch, SetStateAction } from "react";
 import { X, type IconProps } from "tabler-icons-react";
-import { colorsForDifficultyIndex } from "~/styles/mods-colors";
+import { colorsForDifficultyIndex } from "~/styles/modsColors";
 
 
 
@@ -28,46 +28,46 @@ const useStyles = createStyles(
 
         return {
             box: {
-                padding: '10px',
-                backgroundColor: colors.primary,
+                padding: "10px",
+                backgroundColor: colors.primary.backgroundColor, // filter popover
                 // Style the arrow on top of the box.
                 "+ div": {
-                    backgroundColor: colors.primary,
+                    backgroundColor: colors.primary.backgroundColor,
                 }
             },
             root: {
                 "&&&&": {
-                    color: "white",
+                    color: colors.primary.textColor,    // this doesn't seem to be used
                 }
             },
             wrapper: {
-                borderColor: 'white',
+                borderColor: colors.primary.textColor,  // this doesn't seem to be used
                 "&&&& button": {
-                    color: "white",
+                    color: colors.primary.textColor,    // this doesn't seem to be used
                 },
             },
             input: {
                 "&&&&": {
-                    color: 'white',
-                    borderColor: 'white',
-                    backgroundColor: 'transparent',
+                    color: colors.primary.textColor,
+                    borderColor: colors.primary.textColor,
+                    backgroundColor: "transparent",
                 },
                 "::placeholder": {
-                    color: "white",
+                    color: colors.primary.textColor,
                 },
             },
             label: {
                 "&&&&": {
-                    color: "white",
+                    color: colors.primary.textColor,    // this doesn't seem to be used
                 }
             },
             description: {
                 "&&&&": {
-                    color: "white",
+                    color: "red",    // this doesn't seem to be used
                 }
-            }
+            },
         };
-    }
+    },
 );
 
 
@@ -83,32 +83,32 @@ type StringSearchProps = {
 
 
 
-export const StringSearch = (props: StringSearchProps) => {
-    const { classes } = useStyles({ difficultyIndex: props.difficultyIndex });
+export const StringSearch = ({ value, setValue, iconProps, difficultyIndex }: StringSearchProps) => {
+    const { classes } = useStyles({ difficultyIndex: difficultyIndex });
 
 
     return (
         <div className={classes.box}>
             <TextInput
-                {...props}
+                value={value}
                 classNames={{
                     root: classes.root,
                     wrapper: classes.wrapper,
                     input: classes.input,
                     label: classes.label,
                     description: classes.description,
                 }}
-                onChange={(event) => props.setValue(event.currentTarget.value)}
+                onChange={(event) => setValue(event.currentTarget.value)}
                 rightSection={
                     <ActionIcon
                         variant="light"
-                        onClick={() => props.setValue("")}
+                        onClick={() => setValue("")}
                     >
                         <X
-                            {...props.iconProps}
-                            size={props.iconProps?.size ?? 18   /*TODO!!: get this from MantineTheme*/}
-                            strokeWidth={props.iconProps?.strokeWidth ?? 1.5}
-                            color={props.iconProps?.color ?? "white"}
+                            {...iconProps}
+                            size={iconProps?.size ?? 18   /*TODO!!: get this from MantineTheme*/}
+                            strokeWidth={iconProps?.strokeWidth ?? 1.5}
+                            color={iconProps?.color ?? "white"}
                         />
                     </ActionIcon>
                 }

diff --git a/src/components/layout/footer.tsx b/src/components/layout/footer.tsx
@@ -3,7 +3,7 @@ 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";
+import { difficultyColors } from "~/styles/difficultyColors";
 
 
 
@@ -20,7 +20,7 @@ const useStyles = createStyles(
         },
         horizontalRule: {
             border: "2px solid",
-            borderColor: difficultyColors.beginner.primaryHover1,
+            borderColor: difficultyColors.beginner.primaryHover.backgroundColor,
         },
         discordLink: {
             fontWeight: "bold",

diff --git a/src/components/layout/navbar/navLink.tsx b/src/components/layout/navbar/navLink.tsx
@@ -1,6 +1,6 @@
 import { Flex, createStyles } from "@mantine/core";
 import Link from "next/link";
-import { difficultyColors } from "~/styles/mods-colors";
+import { difficultyColors } from "~/styles/difficultyColors";
 
 
 
@@ -13,7 +13,7 @@ const useStyles = createStyles(
             position: "relative",
         },
         navLinkLabel: {
-            backgroundColor: difficultyColors.beginner.primary,
+            backgroundColor: difficultyColors.beginner.primary.backgroundColor,
             color: theme.white,
             flexGrow: 1,
             fontSize: '17px',
@@ -57,7 +57,7 @@ export const NavLink = ({ label, pathname, active }: NavLinkProps) => {
                     xmlns="http://www.w3.org/2000/svg"
                     width="40px"
                     height="40px"
-                    fill={difficultyColors.beginner.primary}
+                    fill={difficultyColors.beginner.primary.backgroundColor}
                 >
                     <polygon points="0,0 100,0 100,100 0,100 100,50" />
                 </svg>
@@ -70,7 +70,7 @@ export const NavLink = ({ label, pathname, active }: NavLinkProps) => {
                         xmlns="http://www.w3.org/2000/svg"
                         width="40px"
                         height="40px"
-                        fill={difficultyColors.beginner.primary}
+                        fill={difficultyColors.beginner.primary.backgroundColor}
                         className={classes.activeNavLink}
                     >
                         <polygon points="0,0 100,50 0,100" />

diff --git a/src/components/mods/expandedMod.tsx b/src/components/mods/expandedMod.tsx
@@ -7,6 +7,8 @@ import ModDownloadButton from "./modDownloadButton/modDownloadButton";
 import Link from "next/link";
 import ModCarousel from "./modCarousel";
 import { COMING_SOON_PATHNAME } from "~/consts/pathnames";
+import { expandedModColors } from "~/styles/expandedModColors";
+import type { DifficultyColor } from "~/styles/difficultyColors";
 
 
 
@@ -21,8 +23,8 @@ const useStyles = createStyles(
             },
         },
         expandedMod: {
-            backgroundColor: "#e1e1e2",
-            color: "black",
+            backgroundColor: expandedModColors.default.backgroundColor,
+            color: expandedModColors.default.textColor,
             borderRadius: "0 0 50px 50px",
             // We move the expanded mod up to make
             // the mod row and expanded mod look like a single row.
@@ -43,12 +45,17 @@ const useStyles = createStyles(
 type ExpandedModProps = {
     isLoading: boolean,
     mod: Mod,
+    colors: DifficultyColor,
 };
 
 
 
 
-const ExpandedMod = ({ isLoading, mod }: ExpandedModProps) => {
+const ExpandedMod = ({
+    isLoading,
+    mod,
+    colors,
+}: ExpandedModProps) => {
     const isMapperNameVisiblePermitted = false;
 
 
@@ -81,8 +88,9 @@ const ExpandedMod = ({ isLoading, mod }: ExpandedModProps) => {
                     isNormalMod={mod.type === "Normal"}
                     isMapperNameVisiblePermitted={isMapperNameVisiblePermitted}
                     mapIds={mod.Map.map(({ id }) => id)}
+                    colors={colors}
                 />
-                <ModCarousel gamebananaModId={mod.gamebananaModId} numberOfMaps={mod.Map.length}/>
+                <ModCarousel gamebananaModId={mod.gamebananaModId} numberOfMaps={mod.Map.length} colors={colors} />
             </Flex>
         </Stack>
     );

diff --git a/src/components/mods/maps/maps.tsx b/src/components/mods/maps/maps.tsx
@@ -4,6 +4,7 @@ import { api } from "~/utils/api";
 import { useMemo } from "react";
 import { noRatingsFoundMessage } from "~/consts/noRatingsFoundMessage";
 import MapsTable from "./mapsTable";
+import type { DifficultyColor } from "~/styles/difficultyColors";
 
 
 
@@ -24,6 +25,7 @@ export type MapsProps = {
     isNormalMod: boolean;
     isMapperNameVisiblePermitted: boolean;
     mapIds: number[];
+    colors: DifficultyColor;
 };
 
 
@@ -126,6 +128,7 @@ const Maps = ({
     isNormalMod,
     isMapperNameVisiblePermitted,
     mapIds,
+    colors,
 }: MapsProps) => {
     //get common data
     const qualityQuery = api.quality.getAll.useQuery({}, { queryKey: ["quality.getAll", {}] });
@@ -213,7 +216,7 @@ const Maps = ({
     return (
         <Stack align="center" justify="flex-start" spacing="0">
             <Title order={3}>Maps</Title>
-            <MapsTable isNormalMod={isNormalMod} isMapperNameVisiblePermitted={isMapperNameVisiblePermitted} mapsWithInfo={mapsWithInfo} isLoading={isLoading}/>
+            <MapsTable isNormalMod={isNormalMod} isMapperNameVisiblePermitted={isMapperNameVisiblePermitted} mapsWithInfo={mapsWithInfo} isLoading={isLoading} colors={colors}/>
         </Stack>
     );
 };