styling fixes

cartridge-gg · Jul 17, 2023 · a110158 · a110158
1 parent c87e555
commit a110158
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 51 deletions.
diff --git a/web/src/components/Layout.tsx b/web/src/components/Layout.tsx
@@ -49,11 +49,11 @@ const Layout = ({
         animate={{ opacity: 1 }}
       >
         <Flex
-          w={["full", "1400px"]}
+          w={["full", "1200px"]}
           h="full"
-          pt={["80px", "10%"]}
+          py={["60px", "10%"]}
           px="24px"
-          gap={["0", "200px"]}
+          gap={["0", "100px"]}
           direction={["column", "row"]}
         >
           <LeftPanel
@@ -83,7 +83,7 @@ const LeftPanel = ({
 }) => {
   return (
     <VStack flex={["0", "1"]}>
-      <VStack justify={["flex-end"]} zIndex="overlay">
+      <VStack zIndex="overlay">
         <Text textStyle="subheading" fontSize="11px">
           {prefixTitle}
         </Text>
@@ -96,7 +96,7 @@ const LeftPanel = ({
       ) : (
         <Image
           src={imageSrc}
-          maxH="600px"
+          maxH="500px"
           pt="60px"
           display={["none", "block"]}
           alt="context"

diff --git a/web/src/pages/[gameId]/[locationSlug]/index.tsx b/web/src/pages/[gameId]/[locationSlug]/index.tsx
@@ -82,53 +82,55 @@ export default function Location() {
         getLocationByName(locationEntity.name).slug
       }.png`}
     >
-      <Inventory gap={gap} />
-      <VStack w="full" align="flex-start" gap={gap}>
-        <Text textStyle="subheading" fontSize="10px" color="neon.500">
-          Market
-        </Text>
-        <SimpleGrid columns={2} w="full" gap="18px" fontSize="20px">
-          {locationEntity.drugMarkets.map((drug, index) => {
-            const playerQuantity =
-              playerEntity.drugs.find((d) => d.name === drug.name)?.quantity ||
-              0;
+      <VStack w="full" gap={gap}>
+        <Inventory gap={gap} />
+        <VStack w="full" align="flex-start" gap={gap}>
+          <Text textStyle="subheading" fontSize="10px" color="neon.500">
+            Market
+          </Text>
+          <SimpleGrid columns={2} w="full" gap="18px" fontSize="20px">
+            {locationEntity.drugMarkets.map((drug, index) => {
+              const playerQuantity =
+                playerEntity.drugs.find((d) => d.name === drug.name)
+                  ?.quantity || 0;
 
-            return (
-              <Card
-                h="180px"
-                key={index}
-                cursor="pointer"
-                onClick={() => {
-                  playSound(Sounds.HoverClick, 0.3, false);
-                  router.push(
-                    `${router.asPath}/${getDrugByName(drug.name).slug}`,
-                  );
-                }}
-              >
-                <CardHeader
-                  textTransform="uppercase"
-                  fontSize="20px"
-                  textAlign="left"
+              return (
+                <Card
+                  h="180px"
+                  key={index}
+                  cursor="pointer"
+                  onClick={() => {
+                    playSound(Sounds.HoverClick, 0.3, false);
+                    router.push(
+                      `${router.asPath}/${getDrugByName(drug.name).slug}`,
+                    );
+                  }}
                 >
-                  {drug.name}
-                </CardHeader>
-                <CardBody>
-                  <HStack w="full" justify="center">
-                    <Box>{getDrugByName(drug.name).icon({})}</Box>
-                  </HStack>
-                </CardBody>
-                <CardFooter fontSize="16px">
-                  <Text>{formatCash(drug.price)}</Text>
-                  <Spacer />
-                  <HStack>
-                    <Cart />
-                    <Text>{formatQuantity(drug.marketPool.quantity)}</Text>
-                  </HStack>
-                </CardFooter>
-              </Card>
-            );
-          })}
-        </SimpleGrid>
+                  <CardHeader
+                    textTransform="uppercase"
+                    fontSize="20px"
+                    textAlign="left"
+                  >
+                    {drug.name}
+                  </CardHeader>
+                  <CardBody>
+                    <HStack w="full" justify="center">
+                      <Box>{getDrugByName(drug.name).icon({})}</Box>
+                    </HStack>
+                  </CardBody>
+                  <CardFooter fontSize="16px">
+                    <Text>{formatCash(drug.price)}</Text>
+                    <Spacer />
+                    <HStack>
+                      <Cart />
+                      <Text>{formatQuantity(drug.marketPool.quantity)}</Text>
+                    </HStack>
+                  </CardFooter>
+                </Card>
+              );
+            })}
+          </SimpleGrid>
+        </VStack>
       </VStack>
       <Footer>
         <Button

diff --git a/web/src/pages/[gameId]/travel.tsx b/web/src/pages/[gameId]/travel.tsx
@@ -92,7 +92,7 @@ export default function Travel() {
         />
       }
     >
-      <VStack w="full" pt="140px">
+      <VStack w="full" pt="100px">
         <Car boxSize="60px" />
         {locations.map((location, index) => (
           <Location