Skip to content

Commit c1d4ecb

Browse files
xivancxivanc
committed
Add custom fonts; Add background and colors; Refactor custom Button;
1 parent ee104e9 commit c1d4ecb

18 files changed

+144
-85
lines changed

Diff for: ‎components/atoms/Button.tsx

+22-7
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,43 @@
1-
import React, { ReactNode } from "react";
2-
import { Button as ChakraButton } from "@chakra-ui/react";
1+
import React from "react";
2+
import { Button as ChakraButton, Text } from "@chakra-ui/react";
33

44
const Button: React.FC<{
5-
children: ReactNode;
65
handleClickCallback: () => void;
76
height: string;
87
width: string;
9-
}> = ({ children, handleClickCallback, height, width, ...props }) => (
8+
title: string;
9+
backgroundColor?: string | null;
10+
}> = ({ title, handleClickCallback, height, width, backgroundColor }) => (
1011
<ChakraButton
1112
onClick={handleClickCallback}
12-
_focus={{ boxShadow: "none" }}
1313
variant="unstyled"
14+
transition="all 0s"
1415
boxShadow="inset 2px 2px 0px rgba(255, 255, 255, 0.4), inset -2px -2px 0px rgba(0, 0, 0, 0.6)"
16+
_focus={{
17+
boxShadow:
18+
"inset 2px 2px 0px rgba(255, 255, 255, 0.4), inset -2px -2px 0px rgba(0, 0, 0, 0.6)",
19+
}}
20+
_active={{
21+
boxShadow: "none",
22+
WebkitTapHighlightColor: "transparent",
23+
}}
1524
border="2px solid #000000"
1625
py="5px"
1726
px="11px"
1827
height={height}
1928
width={width}
2029
background="background"
2130
borderRadius="0px"
22-
{...props}
31+
backgroundColor={backgroundColor || ""}
2332
>
24-
{children}
33+
<Text fontFamily="accent" fontWeight="400" fontSize="14px">
34+
{title}
35+
</Text>
2536
</ChakraButton>
2637
);
2738

39+
Button.defaultProps = {
40+
backgroundColor: null,
41+
};
42+
2843
export default Button;

Diff for: ‎components/closet/ClaimSuccess.tsx

+35-23
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,44 @@
11
/* eslint-disable prettier/prettier */
2-
import { Spacer, Center, VStack, Flex, Text } from "@chakra-ui/react";
2+
import { Center, VStack, Box, Text } from "@chakra-ui/react";
33
import type { NextPage } from "next";
44
import Image from "next/image";
5+
import { useRouter } from "next/router";
6+
import Button from "@/components/atoms/Button"
57

6-
const ClaimWearables: NextPage = () => (
7-
<Flex flex="1" flexDirection="row">
8-
<Spacer />
9-
<Center>
10-
<VStack spacing="0px">
8+
9+
const ClaimWearables: NextPage = () => {
10+
const router = useRouter();
11+
const handleClick = () => {
12+
router.push('/closet')
13+
};
14+
15+
return (
16+
<Center >
17+
<VStack spacing="0px" px="50px">
18+
<Box my="32px">
1119
<Image
12-
src="/header-logo-mf.svg"
20+
src="/success.png"
1321
alt=""
14-
width="100px"
15-
height="100px"
22+
width="80px"
23+
height="80px"
1624
/>
17-
<Text color="##8B2CFF" fontFamily="body" fontWeight="400" fontSize="24px" pt="5px" textAlign="center">
18-
Success!
19-
</Text>
20-
<Text color="##8B2CFF" fontFamily="body" fontWeight="400" fontSize="14px" pb="20px" textAlign="center">
21-
You have successfully claimed your item(s)!
22-
</Text>
23-
<Text color="##8B2CFF" fontFamily="body" fontWeight="400" fontSize="14px" textAlign="center">
24-
Click here to view your closet
25-
</Text>
26-
</VStack>
27-
</Center>
28-
<Spacer />
29-
</Flex>
30-
);
25+
</Box>
26+
<Text color="##8B2CFF" fontFamily="accent" fontWeight="400" fontSize="24px" pt="5px" textAlign="center">
27+
Success!
28+
</Text>
29+
<Text color="##8B2CFF" fontFamily="caption" fontWeight="400" fontSize="14px" pb="20px" textAlign="center">
30+
You have successfully claimed your item(s)!
31+
</Text>
32+
<Button
33+
handleClickCallback={handleClick}
34+
height="40px"
35+
width="141px"
36+
backgroundColor="yellow"
37+
title="VIEW CLOSET"
38+
/>
39+
</VStack>
40+
</Center>
41+
);
42+
};
3143

3244
export default ClaimWearables;

Diff for: ‎components/closet/ClaimWearables.tsx

+8-10
Original file line numberDiff line numberDiff line change
@@ -14,22 +14,20 @@ const ClaimWearables: NextPage = () => {
1414

1515
return (
1616
<VStack spacing="0px">
17-
<VStack mb="34px" mt="26px">
18-
<Text fontFamily="body_bold" fontSize="15px">
17+
<VStack mb="34px" mt="26px" lineHeight="16px">
18+
<Text fontFamily="accent" fontSize="17px" fontWeight="400">
1919
Welcome metadreamer.eth
2020
</Text>
21-
<Text fontFamily="body" fontSize="15px">
21+
<Text fontFamily="caption" fontSize="12px" fontWeight="400" pb="10px">
2222
You have {items.length} items available to claim
2323
</Text>
2424
<Button
2525
handleClickCallback={handleClick}
26-
height="43px"
27-
width="105px"
28-
>
29-
<Text fontFamily="body_regular" fontWeight="400" fontSize="12px">
30-
CLAIM
31-
</Text>
32-
</Button>
26+
height="40px"
27+
width="141px"
28+
backgroundColor="yellow"
29+
title="CLAIM"
30+
/>
3331
</VStack>
3432
<ListItems items={items}/>
3533
</VStack>

Diff for: ‎components/closet/WearableDetail/Files.tsx

+11-9
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
/* eslint-disable prettier/prettier */
22
import { Flex, VStack, Spacer, Text, Box } from "@chakra-ui/react";
33
import type { NextPage } from "next";
4+
import Button from "@/components/atoms/Button"
45

56
const Files: NextPage = () => {
67
const handleDownload = () => {
@@ -9,24 +10,25 @@ const Files: NextPage = () => {
910

1011
return (
1112
<Flex flex="1" flexDirection="row" border="0px" padding="5px" pb="47px">
12-
<VStack p="5px">
13-
<Text fontFamily="body_regular" fontWeight="400" fontSize="9px" lineHeight="10px">
13+
<VStack p="5px" alignItems="start">
14+
<Text fontFamily="caption" fontSize="12px" fontWeight="400px" lineHeight="15px" textDecoration="underline">
1415
<a href="https://raw.githubusercontent.com/MetaFactoryAI/mf-wearables/main/bankless_tshirt/tshirt_tpose.glb">1. MUTANTV2.GLTF</a>
1516
</Text>
16-
<Text fontFamily="body_regular" fontWeight="400" fontSize="9px" lineHeight="10px">
17+
<Text fontFamily="caption" fontSize="12px" fontWeight="400px" lineHeight="15px" textDecoration="underline">
1718
<a href="https://raw.githubusercontent.com/MetaFactoryAI/mf-wearables/main/bankless_tshirt/tshirt_tpose.glb">2. MUTANTV2.GLB</a>
1819
</Text>
19-
<Text fontFamily="body_regular" fontWeight="400" fontSize="9px" lineHeight="10px">
20+
<Text fontFamily="caption" fontSize="12px" fontWeight="400px" lineHeight="15px" textDecoration="underline">
2021
<a href="https://raw.githubusercontent.com/MetaFactoryAI/mf-wearables/main/bankless_tshirt/bankless-shirt.png">3. MUTANTV2.PNG</a>
2122
</Text>
2223
</VStack>
2324
<Spacer />
2425
<Box p="5px" pr="10px">
25-
<Box onClick={handleDownload} border="1px solid #000000" boxShadow="0px 1px 4px 1px rgba(0, 0, 0, 0.6)" py="5px" px="11px">
26-
<Text fontFamily="body_regular" fontWeight="400" fontSize="9px">
27-
DOWNLOAD ALL
28-
</Text>
29-
</Box>
26+
<Button
27+
handleClickCallback={handleDownload}
28+
height="35px"
29+
width="121px"
30+
title="DOWNLOAD ALL"
31+
/>
3032
</Box>
3133
</Flex>
3234
)

Diff for: ‎components/closet/WearableDetail/Metadata.tsx

+16-16
Original file line numberDiff line numberDiff line change
@@ -13,72 +13,72 @@ const Metadata: NextPage = () => (
1313
<Tbody>
1414
<Tr>
1515
<Td border="0px" width="50%" padding="5px">
16-
<Text fontFamily="body_regular" fontWeight="400" fontSize="9px" lineHeight="10px">
16+
<Text fontFamily="caption" fontSize="12px" fontWeight="400px" lineHeight="15px">
1717
BRAND:
1818
</Text>
19-
<Text fontFamily="body_regular" fontWeight="400" fontSize="9px" lineHeight="10px">
19+
<Text fontFamily="caption" fontSize="12px" fontWeight="400px" lineHeight="15px">
2020
APESTHETICS
2121
</Text>
2222
</Td>
2323
<Td border="0px" width="50%" padding="5px">
24-
<Text fontFamily="body_regular" fontWeight="400" fontSize="9px" lineHeight="10px">
24+
<Text fontFamily="caption" fontSize="12px" fontWeight="400px" lineHeight="15px">
2525
MANUFACTURER:
2626
</Text>
27-
<Text fontFamily="body_regular" fontWeight="400" fontSize="9px" lineHeight="10px">
27+
<Text fontFamily="caption" fontSize="12px" fontWeight="400px" lineHeight="15px">
2828
DECODE MFG
2929
</Text>
3030
</Td>
3131
</Tr>
3232
<Tr>
3333
<Td border="0px" width="50%" padding="5px">
34-
<Text fontFamily="body_regular" fontWeight="400" fontSize="9px" lineHeight="10px">
34+
<Text fontFamily="caption" fontSize="12px" fontWeight="400px" lineHeight="15px">
3535
RELEASE DATE:
3636
</Text>
37-
<Text fontFamily="body_regular" fontWeight="400" fontSize="9px" lineHeight="10px">
37+
<Text fontFamily="caption" fontSize="12px" fontWeight="400px" lineHeight="15px">
3838
03.12.22
3939
</Text>
4040
</Td>
4141
<Td border="0px" width="50%" padding="5px">
42-
<Text fontFamily="body_regular" fontWeight="400" fontSize="9px" lineHeight="10px">
42+
<Text fontFamily="caption" fontSize="12px" fontWeight="400px" lineHeight="15px">
4343
MADE IN:
4444
</Text>
45-
<Text fontFamily="body_regular" fontWeight="400" fontSize="9px" lineHeight="10px">
45+
<Text fontFamily="caption" fontSize="12px" fontWeight="400px" lineHeight="15px">
4646
BROOKLYN, NY
4747
</Text>
4848
</Td>
4949
</Tr>
5050
<Tr>
5151
<Td border="0px" width="50%" padding="5px">
52-
<Text fontFamily="body_regular" fontWeight="400" fontSize="9px" lineHeight="10px">
52+
<Text fontFamily="caption" fontSize="12px" fontWeight="400px" lineHeight="15px">
5353
TOTAL SUPPLY:
5454
</Text>
55-
<Text fontFamily="body_regular" fontWeight="400" fontSize="9px" lineHeight="10px">
55+
<Text fontFamily="caption" fontSize="12px" fontWeight="400px" lineHeight="15px">
5656
150
5757
</Text>
5858
</Td>
5959
<Td border="0px" width="50%" padding="5px">
60-
<Text fontFamily="body_regular" fontWeight="400" fontSize="9px" lineHeight="10px">
60+
<Text fontFamily="caption" fontSize="12px" fontWeight="400px" lineHeight="15px">
6161
PRODUCTION TECH(S):
6262
</Text>
63-
<Text fontFamily="body_regular" fontWeight="400" fontSize="9px" lineHeight="10px">
63+
<Text fontFamily="caption" fontSize="12px" fontWeight="400px" lineHeight="15px">
6464
DAOFREN, MILFDAD
6565
</Text>
6666
</Td>
6767
</Tr>
6868
<Tr>
6969
<Td border="0px" width="50%" padding="5px">
70-
<Text fontFamily="body_regular" fontWeight="400" fontSize="9px" lineHeight="10px">
70+
<Text fontFamily="caption" fontSize="12px" fontWeight="400px" lineHeight="15px">
7171
DESIGNER:
7272
</Text>
73-
<Text fontFamily="body_regular" fontWeight="400" fontSize="9px" lineHeight="10px">
73+
<Text fontFamily="caption" fontSize="12px" fontWeight="400px" lineHeight="15px">
7474
ANONYMOUS
7575
</Text>
7676
</Td>
7777
<Td border="0px" width="50%" padding="5px">
78-
<Text fontFamily="body_regular" fontWeight="400" fontSize="9px" lineHeight="10px">
78+
<Text fontFamily="caption" fontSize="12px" fontWeight="400px" lineHeight="15px">
7979
RENDERED BY:
8080
</Text>
81-
<Text fontFamily="body_regular" fontWeight="400" fontSize="9px" lineHeight="10px">
81+
<Text fontFamily="caption" fontSize="12px" fontWeight="400px" lineHeight="15px">
8282
FRAEMWORK
8383
</Text>
8484
</Td>

Diff for: ‎components/closet/WearableDetail/index.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const Index: NextPage = () => {
1313
return (
1414
<VStack spacing="0px">
1515
<Box pl="10px" pr="10px" alignSelf="start" pb="10px">
16-
<Text fontFamily="body" fontSize="12px" textAlign="start">
16+
<Text fontFamily="caption" fontSize="12px" textAlign="start" fontWeight="400px">
1717
METADREAMER&apos;s CLOSET ➤ V2 MUTANT TEE
1818
</Text>
1919
</Box>
@@ -26,8 +26,8 @@ const Index: NextPage = () => {
2626
/>
2727
</Box>
2828
<Box pl="10px" pr="10px" alignSelf="center" pb="10px">
29-
<Text fontFamily="body" fontSize="10px">
30-
you own <b>2</b> of this item
29+
<Text fontFamily="caption" fontSize="12px" fontWeight="400px">
30+
you own 2 of this item
3131
</Text>
3232
</Box>
3333

@@ -42,7 +42,7 @@ const Index: NextPage = () => {
4242
<Tbody>
4343
<Tr>
4444
<Td border="1px solid black" padding="5px" sx={{ writingMode: "vertical-rl" }}>
45-
<Text fontFamily="body_bold" fontWeight="400" fontSize="18px" alignSelf="start" pt="14px" pb="14px">
45+
<Text fontFamily="heading" fontWeight="700" fontSize="18px" alignSelf="start" pt="14px" pb="14px">
4646
METADATA
4747
</Text>
4848
</Td>
@@ -52,7 +52,7 @@ const Index: NextPage = () => {
5252
</Tr>
5353
<Tr>
5454
<Td border="1px solid black" padding="5px" sx={{ writingMode: "vertical-rl" }}>
55-
<Text fontFamily="body_bold" fontWeight="400" fontSize="18px" alignSelf="start" pt="14px" pb="14px">
55+
<Text fontFamily="heading" fontWeight="700" fontSize="18px" alignSelf="start" pt="14px" pb="14px">
5656
FILES
5757
</Text>
5858
</Td>

Diff for: ‎components/closet/Wearables.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,11 @@ const Wearables: NextPage = () => {
88

99
return (
1010
<VStack spacing="0px">
11-
<HStack spacing="0px" alignSelf="start" mb="15px">
12-
<Text fontFamily="body_bold" fontSize="14px" mx="15px">
13-
CLOSET
11+
<HStack spacing="0px" alignSelf="start" mb="15px" alignItems="baseline" >
12+
<Text fontFamily="heading" fontWeight="700" fontSize="29px" mx="15px" paddingBottom="0px">
13+
Closet
1414
</Text>
15-
<Text fontFamily="body" fontSize="10px" textAlign="end">
15+
<Text fontFamily="caption" fontSize="14px" fontWeight="400" textAlign="end">
1616
{items.length} ITEMS
1717
</Text>
1818
</HStack>

Diff for: ‎components/closet/shared/ListItem.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,10 @@ const ListItem: React.FC<{
2626
onClick={handleClick}
2727
{...props}
2828
/>
29-
<Text fontFamily="body_regular" fontWeight="400" fontSize="9px">
29+
<Text fontFamily="heading" fontWeight="700" fontSize="12px">
3030
{title1}
3131
</Text>
32-
<Text fontFamily="body_regular" fontWeight="400" fontSize="6px">
32+
<Text fontFamily="caption" fontWeight="400" fontSize="10px">
3333
{title2}
3434
</Text>
3535
</Box>

Diff for: ‎components/profile/Connected.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,9 @@ const Connected: NextPage = () => {
2525
Header: "Product Title",
2626
accessor: "product_title",
2727
style: {
28-
fontSize: "16px",
29-
fontFamily: "body_semi_bold",
30-
fontWeight: "500",
28+
fontSize: "12px",
29+
fontFamily: "heading",
30+
fontWeight: "700",
3131
width: { md: "40%", lg: "40%" },
3232
minWidth: { md: "210px", lg: "210px" },
3333
},
@@ -61,9 +61,9 @@ const Connected: NextPage = () => {
6161
Header: "Order Number",
6262
accessor: "order_number",
6363
style: {
64-
fontSize: "16px",
65-
fontFamily: "body_semi_bold",
66-
fontWeight: "500",
64+
fontSize: "12px",
65+
fontFamily: "heading",
66+
fontWeight: "700",
6767
width: { md: "40%", lg: "40%" },
6868
minWidth: { md: "210px", lg: "210px" },
6969
},

Diff for: ‎pages/_app.tsx

+5
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,11 @@ function MyApp({ Component, pageProps }: AppProps) {
4545
<link rel="preload" href="/fonts/188 Sans-Pixel 100.otf" as="font" crossOrigin="" />
4646
<link rel="preload" href="/fonts/188 Sans-Regular.otf" as="font" crossOrigin="" />
4747
<link rel="preload" href="/fonts/188 Sans-Thin Condensed.otf" as="font" crossOrigin="" />
48+
<link rel="preload" href="/fonts/Inter-Bold.ttf" as="font" crossOrigin="" />
49+
<link rel="preload" href="/fonts/Inter-Regular.ttf" as="font" crossOrigin="" />
50+
<link rel="preload" href="/fonts/CoFo_Rax_V0.1.otf" as="font" crossOrigin="" />
51+
<link rel="preload" href="/fonts/RuneScape-UF.woff2" as="font" crossOrigin="" />
52+
<link rel="preload" href="/fonts/RuneScape-UF.woff" as="font" crossOrigin="" />
4853
</Head>
4954
<Web3ContextProvider>
5055
<Layout>

Diff for: ‎public/fonts/CoFo_Rax_V0.1.otf

46.9 KB
Binary file not shown.

Diff for: ‎public/fonts/Inter-Bold.ttf

309 KB
Binary file not shown.

Diff for: ‎public/fonts/Inter-Regular.ttf

303 KB
Binary file not shown.

Diff for: ‎public/fonts/RuneScape-UF.woff

3.78 KB
Binary file not shown.

Diff for: ‎public/fonts/RuneScape-UF.woff2

2.5 KB
Binary file not shown.

Diff for: ‎public/success.png

1.6 KB
Loading

0 commit comments

Comments
 (0)