From 72a99fd5bfdd3d291eca52274205efabebad5fdf Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Mon, 4 Jan 2021 08:45:52 +0000
Subject: [PATCH] fix dark mode styles for outfits page

---
 src/app/UserOutfitsPage.js | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/app/UserOutfitsPage.js b/src/app/UserOutfitsPage.js
index 28df1a1..c834e0d 100644
--- a/src/app/UserOutfitsPage.js
+++ b/src/app/UserOutfitsPage.js
@@ -1,5 +1,12 @@
 import React from "react";
-import { Box, Center, Flex, Wrap, WrapItem } from "@chakra-ui/react";
+import {
+  Box,
+  Center,
+  Flex,
+  Wrap,
+  WrapItem,
+  useColorModeValue,
+} from "@chakra-ui/react";
 import gql from "graphql-tag";
 import { useQuery } from "@apollo/client";
 
@@ -93,6 +100,9 @@ function OutfitCard({ outfit }) {
     outfit.itemAppearances
   );
 
+  const cardBackground = useColorModeValue("white", "gray.700");
+  const thumbnailBackground = useColorModeValue("gray.600", "gray.600");
+
   return (
     <Flex
       direction="column"
@@ -102,7 +112,8 @@ function OutfitCard({ outfit }) {
       borderRadius="md"
       padding="3"
       width="calc(150px + 2em)"
-      backgroundColor="white"
+      background={cardBackground}
+      transition="all 0.2s"
     >
       <Box
         as="img"
@@ -111,7 +122,8 @@ function OutfitCard({ outfit }) {
         height={150}
         marginBottom="2"
         borderRadius="md"
-        background="gray.700"
+        background={thumbnailBackground}
+        transition="all 0.2s"
       />
       <Box>{outfit.name}</Box>
     </Flex>