Matchu
c9603a40ea
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!
51 lines
1.4 KiB
JavaScript
51 lines
1.4 KiB
JavaScript
import React from "react";
|
|
import { Box, Grid, useColorModeValue } from "@chakra-ui/react";
|
|
|
|
function WardrobePageLayout({ preview, controls, itemsAndSearch }) {
|
|
const itemsAndSearchBackground = useColorModeValue("white", "gray.900");
|
|
|
|
return (
|
|
<Box
|
|
position="absolute"
|
|
top="0"
|
|
bottom="0"
|
|
left="0"
|
|
right="0"
|
|
// Create a stacking context, so that our drawers and modals don't fight
|
|
// with the z-indexes in here!
|
|
zIndex="0"
|
|
>
|
|
<Grid
|
|
templateAreas={{
|
|
base: `"previewAndControls"
|
|
"itemsAndSearch"`,
|
|
lg: `"previewAndControls itemsAndSearch"`,
|
|
}}
|
|
templateRows={{
|
|
base: "minmax(100px, 45%) minmax(300px, 55%)",
|
|
lg: "100%",
|
|
}}
|
|
templateColumns={{
|
|
base: "100%",
|
|
lg: "50% 50%",
|
|
}}
|
|
height="100%"
|
|
width="100%"
|
|
>
|
|
<Box gridArea="previewAndControls" bg="gray.900" pos="relative">
|
|
<Box position="absolute" top="0" bottom="0" left="0" right="0">
|
|
{preview}
|
|
</Box>
|
|
<Box position="absolute" top="0" bottom="0" left="0" right="0">
|
|
{controls}
|
|
</Box>
|
|
</Box>
|
|
<Box gridArea="itemsAndSearch" bg={itemsAndSearchBackground}>
|
|
{itemsAndSearch}
|
|
</Box>
|
|
</Grid>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
export default WardrobePageLayout;
|