Skip to content

migrate assets to chakra UI #9406

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Mar 7, 2023
Merged

migrate assets to chakra UI #9406

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d0bf693
migrate assets to chakra UI
MrJithil Feb 6, 2023
4fffb5f
Merge branch 'dev' into pr/MrJithil/9406
pettinarip Mar 1, 2023
8be9edb
unify rows styles
pettinarip Mar 1, 2023
4a96a7f
fix headning styles
pettinarip Mar 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
142 changes: 57 additions & 85 deletions src/pages/assets.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,18 @@
// Libraries
import React from "react"
import { useIntl } from "react-intl"
import { useTheme } from "@emotion/react"
import styled from "@emotion/styled"
import { GatsbyImage } from "gatsby-plugin-image"
import { graphql, PageProps } from "gatsby"
import {
Box,
Center,
Flex,
Heading,
HeadingProps,
Img,
useTheme,
VStack,
} from "@chakra-ui/react"

// Assets
import EthGlyphColoredSvg from "../assets/assets/eth-glyph-colored.svg"
Expand All @@ -15,75 +23,44 @@ import AssetDownload from "../components/AssetDownload"
import Link from "../components/Link"
import PageMetadata from "../components/PageMetadata"
import Translation from "../components/Translation"
import { Page, Content } from "../components/SharedStyledComponents"
import FeedbackCard from "../components/FeedbackCard"

// Types
import { Context } from "../types"
import type { ChildOnlyProp, Context } from "../types"

// Utils
import { translateMessageId } from "../utils/translations"
import { getImage } from "../utils/image"

const Image = styled(GatsbyImage)`
align-self: center;
width: 100%;
margin-bottom: 2rem;
@media (max-width: ${(props) => props.theme.breakpoints.m}) {
width: 60%;
}
@media (max-width: ${(props) => props.theme.breakpoints.s}) {
width: 100%;
}
`

const HeroContainer = styled.div`
width: 100%;
display: flex;
flex-direction: column;
margin: 2rem 0rem;
`

const Row = styled.div`
display: flex;
width: 100%;
justify-content: space-between;
margin: 0 -1rem 2rem;
@media (max-width: ${(props) => props.theme.breakpoints.l}) {
flex-wrap: wrap;
}
`
const Row = (props: ChildOnlyProp) => (
<Flex
wrap={{ base: "wrap", lg: "nowrap" }}
justify="space-between"
mx={-4}
mb={8}
{...props}
/>
)

const H2 = styled.h2`
margin: 4.5rem 0 1.5rem;
/* Needed to fix issues of header padding overlapping links */
/* https://github.com/confluenza/confluenza/pull/17 */
position: inherit !important;
const H2 = (prop: ChildOnlyProp & HeadingProps) => (
<Heading
fontSize={{ base: "2xl", md: "3xl" }}
lineHeight={1.4}
mt={16}
mb={6}
{...prop}
/>
)

/* Prevent nav overlap */
&:before {
content: "";
display: block;
height: 120px;
margin-top: -120px;
visibility: hidden;
}
`

const H3 = styled.h3`
margin-bottom: 0;
`

const Header = styled.header`
display: flex;
flex-direction: column;
align-items: center;
margin-top: 6rem;
text-align: center;
@media (max-width: ${(props) => props.theme.breakpoints.l}) {
margin: 2rem;
}
`
const H3 = (prop: ChildOnlyProp) => (
<Heading
as="h3"
fontSize={{ base: "xl", md: "2xl" }}
lineHeight={1.4}
mb={0}
{...prop}
/>
)

const AssetsPage = ({ data }: PageProps<Queries.AssetsPageQuery, Context>) => {
const intl = useIntl()
Expand All @@ -93,32 +70,42 @@ const AssetsPage = ({ data }: PageProps<Queries.AssetsPageQuery, Context>) => {
? data.ethDiamondPurpleHero
: data.ethDiamondBlackHero
return (
<Page>
<Flex direction="column" width="full">
<PageMetadata
title={translateMessageId("page-assets-meta-title", intl)}
description={translateMessageId("page-assets-meta-desc", intl)}
/>
<Content>
<HeroContainer>
<Header>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We are missing this Header styles.

<Image
<Box py={4} px={8}>
<Flex direction="column" px={8} py={4}>
<Center>
<Img
as={GatsbyImage}
image={getImage(assetPageHeroImage)!}
alt={translateMessageId("page-assets-eth-diamond-gray", intl)}
/>
</Center>
<Center>
<h1>
<Translation id="page-assets-h1" />
</h1>
</Center>
<Center>
<Link to="/assets/#illustrations">
<Translation id="page-assets-illustrations" />
</Link>
</Center>
<Center>
<Link to="/assets/#historical">
<Translation id="page-assets-historical-artwork" />
</Link>
</Center>
<Center>
<Link to="/assets/#brand">
<Translation id="page-assets-ethereum-brand-assets" />
</Link>
</Header>
</HeroContainer>
</Center>
</Flex>

<H2 id="illustrations">
<Translation id="page-assets-illustrations" />
</H2>
Expand Down Expand Up @@ -149,7 +136,6 @@ const AssetsPage = ({ data }: PageProps<Queries.AssetsPageQuery, Context>) => {
svg={MergePandaSvg}
/>
</Row>

<Row>
<AssetDownload
title={translateMessageId("page-assets-doge", intl)}
Expand All @@ -173,7 +159,6 @@ const AssetsPage = ({ data }: PageProps<Queries.AssetsPageQuery, Context>) => {
artistUrl="https://cargocollective.com/willtempest"
/>
</Row>

<Row>
<AssetDownload
title={translateMessageId("page-assets-infrastructure", intl)}
Expand All @@ -197,7 +182,6 @@ const AssetsPage = ({ data }: PageProps<Queries.AssetsPageQuery, Context>) => {
artistUrl="https://cargocollective.com/willtempest"
/>
</Row>

<Row>
<AssetDownload
title={translateMessageId("page-assets-future", intl)}
Expand All @@ -214,7 +198,6 @@ const AssetsPage = ({ data }: PageProps<Queries.AssetsPageQuery, Context>) => {
artistUrl="https://cargocollective.com/willtempest"
/>
</Row>

<Row>
<AssetDownload
title={translateMessageId("page-assets-robot", intl)}
Expand All @@ -232,7 +215,6 @@ const AssetsPage = ({ data }: PageProps<Queries.AssetsPageQuery, Context>) => {
shouldHide={true}
/>
</Row>

<Row>
<AssetDownload
title={translateMessageId("page-assets-bazaar", intl)}
Expand All @@ -249,7 +231,6 @@ const AssetsPage = ({ data }: PageProps<Queries.AssetsPageQuery, Context>) => {
artistUrl="http://viktorhachmang.nl/"
/>
</Row>

<Row>
<AssetDownload
title={translateMessageId("page-assets-mainnet", intl)}
Expand All @@ -266,7 +247,6 @@ const AssetsPage = ({ data }: PageProps<Queries.AssetsPageQuery, Context>) => {
artistUrl="https://viktorhachmang.nl"
/>
</Row>

<Row>
<AssetDownload
title={translateMessageId("page-assets-beacon-chain", intl)}
Expand All @@ -283,7 +263,6 @@ const AssetsPage = ({ data }: PageProps<Queries.AssetsPageQuery, Context>) => {
artistUrl="https://viktorhachmang.nl"
/>
</Row>

<Row>
<AssetDownload
title={translateMessageId("page-assets-defi", intl)}
Expand All @@ -300,7 +279,6 @@ const AssetsPage = ({ data }: PageProps<Queries.AssetsPageQuery, Context>) => {
artistUrl="https://www.patrickatkins.co.uk/"
/>
</Row>

<Row>
<AssetDownload
title={translateMessageId("page-assets-leslie-the-rhino", intl)}
Expand All @@ -318,19 +296,15 @@ const AssetsPage = ({ data }: PageProps<Queries.AssetsPageQuery, Context>) => {
shouldHide={true}
/>
</Row>

<H2 id="historical">
<Translation id="page-assets-historical-artwork" />
</H2>

<H2 id="brand">
<Translation id="page-assets-ethereum-brand-assets" />
</H2>

<H3>
<Translation id="page-assets-page-assets-transparent-background" />
</H3>

<Row>
<AssetDownload
title={translateMessageId("page-assets-eth-diamond-glyph", intl)}
Expand Down Expand Up @@ -426,11 +400,9 @@ const AssetsPage = ({ data }: PageProps<Queries.AssetsPageQuery, Context>) => {
image={data.ethWordmarkPurple}
/>
</Row>

<H3>
<Translation id="page-assets-page-assets-solid-background" />
</H3>

<Row>
<AssetDownload
title={translateMessageId("page-assets-eth-diamond-white", intl)}
Expand Down Expand Up @@ -537,9 +509,9 @@ const AssetsPage = ({ data }: PageProps<Queries.AssetsPageQuery, Context>) => {
image={data.ethWordmarkPurpleWhite}
/>
</Row>
</Content>
</Box>
<FeedbackCard />
</Page>
</Flex>
)
}

Expand Down