From 86f9a0953440c2ce39e5f5d78ba85f8a8b3c7d33 Mon Sep 17 00:00:00 2001
From: notV4l <imV4l@proton.me>
Date: Thu, 21 Sep 2023 12:37:38 +0200
Subject: [PATCH] header style

---
 web/src/components/Footer.tsx                 |  1 +
 web/src/components/Header.tsx                 | 19 ++++++-------
 web/src/components/HeaderButton.tsx           | 12 ++++----
 web/src/components/MediaPlayer.tsx            |  2 +-
 web/src/components/MobileMenu.tsx             |  2 +-
 .../components/icons/PixelatedBorderImage.tsx | 12 ++++++++
 .../[drugSlug]/[tradeDirection].tsx           | 18 ++++++++----
 .../pages/[gameId]/[locationSlug]/index.tsx   |  4 +--
 web/src/pages/[gameId]/travel.tsx             |  2 +-
 web/src/theme/styles.ts                       | 28 +++++++++++++++++++
 10 files changed, 72 insertions(+), 28 deletions(-)
 create mode 100644 web/src/components/icons/PixelatedBorderImage.tsx

diff --git a/web/src/components/Footer.tsx b/web/src/components/Footer.tsx
index 5ec0fbeb4..f4a67c099 100644
--- a/web/src/components/Footer.tsx
+++ b/web/src/components/Footer.tsx
@@ -17,6 +17,7 @@ export const Footer = ({
       bottom="0"
       justify="center"
       align="flex-end"
+      flexGrow={1}
       background="linear-gradient(transparent, #172217, #172217)"
       {...props}
     >
diff --git a/web/src/components/Header.tsx b/web/src/components/Header.tsx
index 2e6ff588f..ad9a7b07a 100644
--- a/web/src/components/Header.tsx
+++ b/web/src/components/Header.tsx
@@ -12,6 +12,9 @@ import { useGameEntity } from "@/dojo/entities/useGameEntity";
 import { formatCash } from "@/utils/ui";
 import { useDojo } from "@/dojo";
 import { formatAddress } from "@/utils/contract";
+import PixelatedBorderImage from "./icons/PixelatedBorderImage";
+import colors from "@/theme/colors";
+import { headerStyles, headerButtonStyles } from "@/theme/styles";
 
 // TODO: constrain this on contract side
 const MAX_INVENTORY = 100;
@@ -57,27 +60,22 @@ const Header = ({ back }: HeaderProps) => {
     <HStack
       w="full"
       px="10px"
-      py={["0", "20px"]}
       spacing="10px"
       zIndex="overlay"
       align="flex-start"
+      py={["0", "20px"]}
     >
       <HStack flex="1" justify={["left", "right"]}>
-        {back && (
-          <HeaderButton h="40px" onClick={() => router.back()}>
-            <Arrow />
-          </HeaderButton>
-        )}
       </HStack>
       {playerEntity && gameEntity && (
         <HStack flex="1" justify="center">
           <HStack
-            h="40px"
+            h="48px"
             w="auto"
             px="20px"
             spacing={["10px", "30px"]}
             bg="neon.700"
-            clipPath={`polygon(${generatePixelBorderPath()})`}
+            sx={{...headerStyles}}
           >
             <Flex w="full" align="center" justify="center" gap="10px">
               <HStack>
@@ -106,7 +104,7 @@ const Header = ({ back }: HeaderProps) => {
         </HStack>
       )}
 
-      <HStack flex="1" justify="right">
+      <HStack flex="1" justify="right" >
         {!isMobile && (
           <>
             <MediaPlayer />
@@ -115,7 +113,8 @@ const Header = ({ back }: HeaderProps) => {
 
         {(!isMobile || (!account && isMobile)) && (
           <Button
-            variant="pixelated"
+            h="48px"
+            sx={headerButtonStyles}
             isLoading={isBurnerDeploying}
             onClick={() => {
               if (!account) {
diff --git a/web/src/components/HeaderButton.tsx b/web/src/components/HeaderButton.tsx
index c185d407d..204cae440 100644
--- a/web/src/components/HeaderButton.tsx
+++ b/web/src/components/HeaderButton.tsx
@@ -7,22 +7,20 @@ import {
   forwardRef,
 } from "@chakra-ui/react";
 import { ReactNode } from "react";
-import { IsMobile } from "@/utils/ui";
 
 import { generatePixelBorderPath } from "@/utils/ui";
+import { headerStyles, headerButtonStyles } from "@/theme/styles";
 
 const HeaderButton = forwardRef<ButtonProps, "button">(
   ({ children, ...props }: { children?: ReactNode } & StyleProps, ref) => (
     <Box
       ref={ref}
       as="button"
+      p={[ "6px" , "6px 12px"]}
+      h="48px"
+      sx={headerButtonStyles}
       {...props}
-      _hover={{
-        backgroundColor: "neon.600",
-      }}
-      p={IsMobile() ? "6px" : "6px 12px"}
-      bgColor="neon.700"
-      clipPath={`polygon(${generatePixelBorderPath()})`}
+
     >
       {children}
     </Box>
diff --git a/web/src/components/MediaPlayer.tsx b/web/src/components/MediaPlayer.tsx
index ece1b3215..e138d41cf 100644
--- a/web/src/components/MediaPlayer.tsx
+++ b/web/src/components/MediaPlayer.tsx
@@ -64,7 +64,7 @@ const MediaPlayer = ({ ...props }: StyleProps) => {
   const mediaStore = useMediaStore();
   const songTitle =
     mediaStore.medias[mediaStore.currentIndex]?.name || "LOADING ...";
-  const height = "40px";
+  const height = "48px";
 
   useEffect(() => {
     const init = async () => {
diff --git a/web/src/components/MobileMenu.tsx b/web/src/components/MobileMenu.tsx
index 22e34a1fd..0ecbd30e4 100644
--- a/web/src/components/MobileMenu.tsx
+++ b/web/src/components/MobileMenu.tsx
@@ -23,7 +23,7 @@ const MobileMenu = ({ ...props }: StyleProps /*& ButtonProps*/) => {
     <>
       <Popover placement="bottom-end">
         <PopoverTrigger>
-          <HeaderButton>
+          <HeaderButton w="48px">
             <Dots />
           </HeaderButton>
         </PopoverTrigger>
diff --git a/web/src/components/icons/PixelatedBorderImage.tsx b/web/src/components/icons/PixelatedBorderImage.tsx
new file mode 100644
index 000000000..e10ed1b70
--- /dev/null
+++ b/web/src/components/icons/PixelatedBorderImage.tsx
@@ -0,0 +1,12 @@
+const PixelatedBorderImage = ({
+  color,
+}: {
+  color: string;
+}) => {
+  return `<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='${encodeURIComponent(
+    color,
+  )}' ><path d='M0 0H16V10.0075H14.0025V12.005H12.005V14.0025H10.0075V16H5.99252V14.0025H3.995V12.005H1.9975V10.0075H0V0Z' /></svg>`;
+};
+
+export default PixelatedBorderImage;
+
diff --git a/web/src/pages/[gameId]/[locationSlug]/[drugSlug]/[tradeDirection].tsx b/web/src/pages/[gameId]/[locationSlug]/[drugSlug]/[tradeDirection].tsx
index ba3fd8976..3d21d14b3 100644
--- a/web/src/pages/[gameId]/[locationSlug]/[drugSlug]/[tradeDirection].tsx
+++ b/web/src/pages/[gameId]/[locationSlug]/[drugSlug]/[tradeDirection].tsx
@@ -124,7 +124,6 @@ export default function Market() {
         prefixTitle: "The market",
         imageSrc: "/images/dealer.png",
       }}
-      showBack={true}
     >
       <VStack boxSize="full" justify={["normal", "center"]}>
         <Card variant="pixelated" p={6} mb={6} _hover={{}} align="center">
@@ -172,15 +171,22 @@ export default function Market() {
         )}
 
         <Footer alignItems={["flex-end", "flex-start"]}  height={["100%", "auto"]}>
-          {tradeDirection == TradeDirection.Buy && canBuy && (
             <Button
               w={["full", "auto"]}
-              isLoading={isSubmitting && !txError}
-              isDisabled={quantityBuy === 0}
-              onClick={onTrade}
+              onClick={()=> router.back()}
             >
-              Buy ({quantityBuy})
+              Back
             </Button>
+
+          {tradeDirection == TradeDirection.Buy && canBuy && (
+            <Button
+            w={["full", "auto"]}
+            isLoading={isSubmitting && !txError}
+            isDisabled={quantityBuy === 0}
+            onClick={onTrade}
+          >
+            Buy ({quantityBuy})
+          </Button>
           )}
 
           {tradeDirection == TradeDirection.Sell && canSell && (
diff --git a/web/src/pages/[gameId]/[locationSlug]/index.tsx b/web/src/pages/[gameId]/[locationSlug]/index.tsx
index cd1e0fe64..ac29ce610 100644
--- a/web/src/pages/[gameId]/[locationSlug]/index.tsx
+++ b/web/src/pages/[gameId]/[locationSlug]/index.tsx
@@ -101,7 +101,7 @@ export default function Location() {
         <Text textStyle="subheading" fontSize="10px" color="neon.500">
           Market
         </Text>
-        <SimpleGrid columns={2} w="full" gap={["10px","20px"]} fontSize={["16px","20px"]}>
+        <SimpleGrid columns={2} w="full" gap={["10px","16px"]} fontSize={["16px","20px"]}>
           {sortDrugMarkets(locationEntity.drugMarkets).map((drug, index) => {
             const drugInfo = getDrugById(drug.id)!;
             const canBuy =
@@ -168,7 +168,7 @@ export default function Location() {
             );
           })}
         </SimpleGrid>
-        <Box minH="60px" />
+        <Box minH={["60px", 0] }/>
       </VStack>
       <Footer>
         <Button
diff --git a/web/src/pages/[gameId]/travel.tsx b/web/src/pages/[gameId]/travel.tsx
index 62ffc0de0..f356ae496 100644
--- a/web/src/pages/[gameId]/travel.tsx
+++ b/web/src/pages/[gameId]/travel.tsx
@@ -186,7 +186,7 @@ export default function Travel() {
         </VStack>
         <LocationPrices prices={prices} />
         <Spacer minH="100px" />
-        <HStack w="full" pointerEvents="all">
+        <HStack w={["auto !important","full"]} pointerEvents="all">
           <Button
             isDisabled={isSubmitting}
             w="full"
diff --git a/web/src/theme/styles.ts b/web/src/theme/styles.ts
index d0a84cced..5d1c32124 100644
--- a/web/src/theme/styles.ts
+++ b/web/src/theme/styles.ts
@@ -1,5 +1,6 @@
 import BorderImage from "@/components/icons/BorderImage";
 import BorderImagePixelated from "@/components/icons/BorderImagePixelated";
+import PixelatedBorderImage from "@/components/icons/PixelatedBorderImage";
 
 import { generatePixelBorderPath } from "@/utils/ui";
 
@@ -92,6 +93,33 @@ export const cardPixelatedStyleOutset = ({
   },
 });
 
+export const headerStyles = {
+  border: 0,
+  bg: "neon.700",
+  borderStyle: "solid",
+  borderImageSlice: "8",
+  borderImageWidth: "12px",
+  borderRadius: ["30px", "0"],
+  borderImageSource: [
+    `url("data:image/svg+xml,${PixelatedBorderImage({
+      color: colors.neon["700"].toString(),
+    })}")`, 'none'
+  ],
+  clipPath: ["none", `polygon(${generatePixelBorderPath()})`],
+}
+
+export const headerButtonStyles = {
+  ...headerStyles,
+  _hover: {
+    bg: "neon.600",
+    borderImageSource: [
+      `url("data:image/svg+xml,${PixelatedBorderImage({
+        color: colors.neon["600"].toString(),
+      })}")`, 'none'
+    ]
+  },
+}
+
 //layer styles
 export const layerStyles = {
   card: cardStyle,