Skip to content

Commit

Permalink
header style
Browse files Browse the repository at this point in the history
  • Loading branch information
notV4l committed Sep 21, 2023
1 parent 0be4147 commit 86f9a09
Show file tree
Hide file tree
Showing 10 changed files with 72 additions and 28 deletions.
1 change: 1 addition & 0 deletions web/src/components/Footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ export const Footer = ({
bottom="0"
justify="center"
align="flex-end"
flexGrow={1}
background="linear-gradient(transparent, #172217, #172217)"
{...props}
>
Expand Down
19 changes: 9 additions & 10 deletions web/src/components/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -106,7 +104,7 @@ const Header = ({ back }: HeaderProps) => {
</HStack>
)}

<HStack flex="1" justify="right">
<HStack flex="1" justify="right" >
{!isMobile && (
<>
<MediaPlayer />
Expand All @@ -115,7 +113,8 @@ const Header = ({ back }: HeaderProps) => {

{(!isMobile || (!account && isMobile)) && (
<Button
variant="pixelated"
h="48px"
sx={headerButtonStyles}
isLoading={isBurnerDeploying}
onClick={() => {
if (!account) {
Expand Down
12 changes: 5 additions & 7 deletions web/src/components/HeaderButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion web/src/components/MediaPlayer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 () => {
Expand Down
2 changes: 1 addition & 1 deletion web/src/components/MobileMenu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const MobileMenu = ({ ...props }: StyleProps /*& ButtonProps*/) => {
<>
<Popover placement="bottom-end">
<PopoverTrigger>
<HeaderButton>
<HeaderButton w="48px">
<Dots />
</HeaderButton>
</PopoverTrigger>
Expand Down
12 changes: 12 additions & 0 deletions web/src/components/icons/PixelatedBorderImage.tsx
Original file line number Diff line number Diff line change
@@ -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;

Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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 && (
Expand Down
4 changes: 2 additions & 2 deletions web/src/pages/[gameId]/[locationSlug]/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 =
Expand Down Expand Up @@ -168,7 +168,7 @@ export default function Location() {
);
})}
</SimpleGrid>
<Box minH="60px" />
<Box minH={["60px", 0] }/>
</VStack>
<Footer>
<Button
Expand Down
2 changes: 1 addition & 1 deletion web/src/pages/[gameId]/travel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
28 changes: 28 additions & 0 deletions web/src/theme/styles.ts
Original file line number Diff line number Diff line change
@@ -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";

Expand Down Expand Up @@ -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,
Expand Down

0 comments on commit 86f9a09

Please sign in to comment.