fix tab container background color

src/components/layout/footer.tsx

@@ -2,7 +2,7 @@ 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 { blackBackgroundColorWithoutOpacity } from "~/styles/layoutColors";
 import { difficultyColors } from "~/styles/difficultyColors";
 
 
@@ -11,7 +11,7 @@ import { difficultyColors } from "~/styles/difficultyColors";
 const useStyles = createStyles(
     () => ({
         outerFooter: {
-            backgroundColor: blackBackgroundColor,
+            backgroundColor: blackBackgroundColorWithoutOpacity,
             /* top | left and right | bottom */
             padding: "1px 10px 10px",
         },

src/components/layout/header.tsx

@@ -1,7 +1,7 @@
 import { Flex, createStyles, Title, Box } from "@mantine/core";
 import Image from "next/image";
 import cmlLogo from "~/../public/images/logo/cml_logo.png";
-import { blackBackgroundColor } from "~/styles/layoutColors";
+import { blackBackgroundColorWithoutOpacity } from "~/styles/layoutColors";
 
 
 
@@ -10,7 +10,7 @@ const useStyles = createStyles(
     (theme) => ({
         header: {
             color: theme.white,
-            backgroundColor: blackBackgroundColor,
+            backgroundColor: blackBackgroundColorWithoutOpacity,
             padding: "10px 45px",
             alignItems: "center",
         },

src/components/layout/layout.tsx

@@ -6,7 +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";
+import { blackBackgroundColorWithOpacity } from "~/styles/layoutColors";
 
 
 
@@ -27,7 +27,7 @@ const useStyles = createStyles(
             padding: "20px",
         },
         children: {
-            backgroundColor: blackBackgroundColor,
+            backgroundColor: blackBackgroundColorWithOpacity,
             height: "630px",
             padding: "5px 45px",
         },

src/components/mods/modsTable.tsx

@@ -16,6 +16,7 @@ import { colorsForDifficultyIndex, greatestValidDifficultyIndex } from "~/styles
 import { canonicalDifficultyNames, difficultyColors, type DifficultyColor } from "~/styles/difficultyColors";
 import { expandedModColors } from "~/styles/expandedModColors";
 import { TABLE_HEADER_ARROW_ZOOM } from "~/consts/tableHeaderArrowZoom";
+import { blackBackgroundColorWithoutOpacity } from "~/styles/layoutColors";
 
 
 
@@ -39,7 +40,7 @@ const useStyles = createStyles(
                 display: "flex",
                 justifyContent: "end",
                 padding: "0 15px",
-                backgroundColor: "theme.black",
+                backgroundColor: blackBackgroundColorWithoutOpacity,
             },
             tab: {
                 padding: "1px 20px",

src/styles/layoutColors.ts

@@ -1 +1,5 @@
-export const blackBackgroundColor = "rgba(1.0, 1.0, 1.0, 0.9)";
+const rgbString = "1.0, 1.0, 1.0";
+
+export const blackBackgroundColorWithoutOpacity = `rgb(${rgbString})`;
+
+export const blackBackgroundColorWithOpacity = `rgba(${rgbString}, 0.9)`;