tweak site bg color, to let card elements "pop"

This has been bothering me for a long time, but I couldn't really figure out what to do about it. But tweaking the site bg color a smidge has helped us really add texture to the cards I want to have pop out, like the outfit polaroids!

I kinda went all-in in a burst, but tbh I think it looks great :3

I haven't really touched the wardrobe page with it yet though, that'll probably need some tweaking... for now I'm overriding it to keep the old background!

src/app/App.js

@@ -42,6 +42,7 @@ const theme = extendTheme({
         height: "100%",
       },
       body: {
+        background: mode("gray.50", "gray.800")(props),
         color: mode("green.800", "green.50")(props),
         transition: "all 0.25s",
       },

src/app/HomePage.js

@@ -15,7 +15,12 @@ import {
 import { useHistory, useLocation } from "react-router-dom";
 import { useLazyQuery } from "@apollo/client";
 
-import { Heading1, useLocalStorage, usePageTitle } from "./util";
+import {
+  Heading1,
+  useCommonStyles,
+  useLocalStorage,
+  usePageTitle,
+} from "./util";
 import OutfitPreview from "./components/OutfitPreview";
 import SpeciesColorPicker from "./components/SpeciesColorPicker";
 
@@ -207,6 +212,7 @@ function SubmitPetForm() {
     import("./WardrobePage");
   };
 
+  const { brightBackground } = useCommonStyles();
   const inputBorderColor = useColorModeValue("green.600", "green.500");
   const inputBorderColorHover = useColorModeValue("green.400", "green.300");
   const buttonBgColor = useColorModeValue("green.600", "green.300");
@@ -225,6 +231,7 @@ function SubmitPetForm() {
               aria-label="Enter a pet's name"
               borderColor={inputBorderColor}
               _hover={{ borderColor: inputBorderColorHover }}
+              background={brightBackground}
               boxShadow="md"
               width="14em"
               className={css`
@@ -252,12 +259,16 @@ function SubmitPetForm() {
 }
 
 function FeedbackFormSection() {
+  const { brightBackground } = useCommonStyles();
   const pitchBorderColor = useColorModeValue("gray.300", "green.400");
   const formBorderColor = useColorModeValue("gray.300", "blue.400");
 
   return (
     <VStack spacing="4" alignItems="stretch">
-      <FeedbackFormContainer borderColor={pitchBorderColor}>
+      <FeedbackFormContainer
+        background={brightBackground}
+        borderColor={pitchBorderColor}
+      >
         <Flex position="relative" alignItems="center">
           <Box padding="2" borderRadius="lg" overflow="hidden" flex="0 0 auto">
             <Box
@@ -293,10 +304,11 @@ function FeedbackFormSection() {
   );
 }
 
-function FeedbackFormContainer({ borderColor, children }) {
+function FeedbackFormContainer({ background, borderColor, children }) {
   return (
     <Box
       as="section"
+      background={background}
       border="1px solid"
       borderColor={borderColor}
       borderRadius="lg"
@@ -305,6 +317,7 @@ function FeedbackFormContainer({ borderColor, children }) {
       paddingLeft="2"
       paddingRight="4"
       paddingY="2"
+      transition="all 0.2s"
     >
       {children}
     </Box>
@@ -379,6 +392,8 @@ function FeedbackForm() {
     [content, email, toast]
   );
 
+  const { brightBackground } = useCommonStyles();
+
   return (
     <Box
       as="form"
@@ -397,6 +412,7 @@ function FeedbackForm() {
         gridArea="email"
         value={email}
         onChange={(e) => setEmail(e.target.value)}
+        background={brightBackground}
       />
       <Textarea
         size="sm"
@@ -404,6 +420,7 @@ function FeedbackForm() {
         gridArea="content"
         value={content}
         onChange={(e) => setContent(e.target.value)}
+        background={brightBackground}
       />
       <Button
         type="submit"

src/app/UserOutfitsPage.js

@@ -1,16 +1,9 @@
 import React from "react";
-import {
-  Box,
-  Center,
-  Flex,
-  Wrap,
-  WrapItem,
-  useColorModeValue,
-} from "@chakra-ui/react";
+import { Box, Center, Flex, Wrap, WrapItem } from "@chakra-ui/react";
 import gql from "graphql-tag";
 import { useQuery } from "@apollo/client";
 
-import { ErrorMessage, Heading1 } from "./util";
+import { ErrorMessage, Heading1, useCommonStyles } from "./util";
 import {
   getVisibleLayers,
   petAppearanceFragmentForGetVisibleLayers,
@@ -106,8 +99,7 @@ function OutfitCard({ outfit }) {
     outfit.itemAppearances
   );
 
-  const cardBackground = useColorModeValue("white", "gray.700");
-  const thumbnailBackground = useColorModeValue("gray.600", "gray.600");
+  const { brightBackground } = useCommonStyles();
 
   return (
     <Flex
@@ -118,7 +110,7 @@ function OutfitCard({ outfit }) {
       borderRadius="md"
       padding="3"
       width="calc(150px + 2em)"
-      background={cardBackground}
+      backgroundColor={brightBackground}
       transition="all 0.2s"
     >
       <Box
@@ -128,7 +120,7 @@ function OutfitCard({ outfit }) {
         height={150}
         marginBottom="2"
         borderRadius="md"
-        background={thumbnailBackground}
+        background="gray.600"
         transition="all 0.2s"
       />
       <Box>{outfit.name}</Box>

src/app/WardrobePage/WardrobePageLayout.js

@@ -1,7 +1,9 @@
 import React from "react";
-import { Box, Grid } from "@chakra-ui/react";
+import { Box, Grid, useColorModeValue } from "@chakra-ui/react";
 
 function WardrobePageLayout({ preview, controls, itemsAndSearch }) {
+  const itemsAndSearchBackground = useColorModeValue("white", "gray.900");
+
   return (
     <Box
       position="absolute"
@@ -38,7 +40,9 @@ function WardrobePageLayout({ preview, controls, itemsAndSearch }) {
             {controls}
           </Box>
         </Box>
-        <Box gridArea="itemsAndSearch">{itemsAndSearch}</Box>
+        <Box gridArea="itemsAndSearch" bg={itemsAndSearchBackground}>
+          {itemsAndSearch}
+        </Box>
       </Grid>
     </Box>
   );

src/app/components/ItemCard.js

@@ -14,10 +14,10 @@ import { CheckIcon, NotAllowedIcon, StarIcon } from "@chakra-ui/icons";
 import { HiSparkles } from "react-icons/hi";
 import { Link } from "react-router-dom";
 
-import { safeImageUrl } from "../util";
+import { safeImageUrl, useCommonStyles } from "../util";
 
 function ItemCard({ item, badges, ...props }) {
-  const borderColor = useColorModeValue("gray.100", "green.500");
+  const { brightBackground } = useCommonStyles();
 
   return (
     <Box
@@ -27,8 +27,8 @@ function ItemCard({ item, badges, ...props }) {
       p="2"
       boxShadow="lg"
       borderRadius="lg"
-      border="1px"
-      borderColor={borderColor}
+      background={brightBackground}
+      transition="all 0.2s"
       className="item-card"
       width="100%"
       minWidth="0"

src/app/components/WIPCallout.js

@@ -1,15 +1,21 @@
 import React from "react";
 import { Box, Flex, Tooltip } from "@chakra-ui/react";
 
+import { useCommonStyles } from "../util";
+
 import WIPXweeImg from "../images/wip-xwee.png";
 import WIPXweeImg2x from "../images/wip-xwee@2x.png";
 
 function WIPCallout({ children, details }) {
+  const { brightBackground } = useCommonStyles();
+
   let content = (
     <Flex
       alignItems="center"
       border="1px solid"
       borderColor="green.600"
+      background={brightBackground}
+      transition="all 0.2s"
       borderRadius="full"
       boxShadow="md"
       paddingLeft="2"

src/app/util.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Box, Heading } from "@chakra-ui/react";
+import { Box, Heading, useColorModeValue } from "@chakra-ui/react";
 
 /**
  * Delay hides its content and first, then shows it after the given delay.
@@ -88,6 +88,12 @@ export function ErrorMessage({ children }) {
   return <Box color="red.400">{children}</Box>;
 }
 
+export function useCommonStyles() {
+  return {
+    brightBackground: useColorModeValue("white", "gray.700"),
+  };
+}
+
 /**
  * safeImageUrl returns an HTTPS-safe image URL for Neopets assets!
  */