Skip to content

Commit

Permalink
Merge pull request #8372 from TylerAPfledderer/refactor/call-to-contr…
Browse files Browse the repository at this point in the history 
…ibute

Refactor `CallToContribute` component
  • Loading branch information
@pettinarip
pettinarip committed Oct 29, 2022
2 parents 981a0e8 + e263802 commit 28fbbd6
Showing 1 changed file with 95 additions and 77 deletions.
172 changes: 95 additions & 77 deletions src/components/CallToContribute.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Flex, Heading, Icon, Text } from "@chakra-ui/react"
import { Flex, Heading, Icon, Show, Text, useToken } from "@chakra-ui/react"
import { FaGithub } from "react-icons/fa"
import React from "react"
import React, { ReactNode } from "react"
import Link from "./Link"
import ButtonLink from "./ButtonLink"

Expand All @@ -10,85 +10,103 @@ export interface IProps {
editPath: string
}

const CallToContribute: React.FC<IProps> = ({ editPath }) => (
export type ChildOnlyType = {
children: ReactNode
}

const ContentColumn = ({ children }: ChildOnlyType) => (
<Flex
bg="ednBackground"
align="center"
mt={8}
border="1px"
borderColor="primary"
borderRadius="base"
boxShadow="inset 0 -2px 0 0 var(--eth-colors-primary400)"
direction="column"
flexGrow={1}
flexShrink={1}
flexBasis="50%"
p={4}
color="text"
textAlign={{ base: "center", lg: "left" }}
>
{children}
</Flex>
)

const DescriptionParagraph = ({ children }: ChildOnlyType) => (
<Text lineHeight="140%" color="text" fontFamily="monospace">
{children}
</Text>
)

const CallToContribute: React.FC<IProps> = ({ editPath }) => {
/**
* TODO: After completion of the UI migration,
* Remove this and pass the token value directly
* into the `above` prop of `Show`
*/
const largeBp = useToken("breakpoints", "lg")

return (
<Flex
direction="column"
flexGrow={1}
flexShrink={1}
flexBasis="50%"
p={4}
color="text"
textAlign={{ base: "center", lg: "left" }}
display={{ base: "none", lg: "flex" }}
>
░░░░░░░░░▄░░░░░░░░░░░░░░▄░░░░ ░░░░░░░░▌▒█░░░░░░░░░░░▄▀▒▌░░░
░░░░░░░░▌▒▒█░░░░░░░░▄▀▒▒▒▐░░░ ░░░░░░░▐▄▀▒▒▀▀▀▀▄▄▄▀▒▒▒▒▒▐░░░
░░░░░▄▄▀▒░▒▒▒▒▒▒▒▒▒█▒▒▄█▒▐░░░ ░░░▄▀▒▒▒░░░▒▒▒░░░▒▒▒▀██▀▒▌░░░
░░▐▒▒▒▄▄▒▒▒▒░░░▒▒▒▒▒▒▒▀▄▒▒▌░░ ░░▌░░▌█▀▒▒▒▒▒▄▀█▄▒▒▒▒▒▒▒█▒▐░░
░▐░░░▒▒▒▒▒▒▒▒▌██▀▒▒░░░▒▒▒▀▄▌░ ░▌░▒▄██▄▒▒▒▒▒▒▒▒▒░░░░░░▒▒▒▒▌░
▀▒▀▐▄█▄█▌▄░▀▒▒░░░░░░░░░░▒▒▒▐░ ▐▒▒▐▀▐▀▒░▄▄▒▄▒▒▒▒▒▒░▒░▒░▒▒▒▒▌
▐▒▒▒▀▀▄▄▒▒▒▄▒▒▒▒▒▒▒▒░▒░▒░▒▒▐░ ░▌▒▒▒▒▒▒▀▀▀▒▒▒▒▒▒░▒░▒░▒░▒▒▒▌░
░▐▒▒▒▒▒▒▒▒▒▒▒▒▒▒░▒░▒░▒▒▄▒▒▐░░ ░░▀▄▒▒▒▒▒▒▒▒▒▒▒░▒░▒░▒▄▒▒▒▒▌░░
░░░░▀▄▒▒▒▒▒▒▒▒▒▒▄▄▄▀▒▒▒▒▄▀░░░ ░░░░░░▀▄▄▄▄▄▄▀▀▀▒▒▒▒▒▄▄▀░░░░░
░░░░░░░░░▒▒▒▒▒▒▒▒▒▒▀▀░░░░░░░░
</Flex>
<Flex
direction="column"
flexGrow={1}
flexShrink={1}
flexBasis="50%"
p={4}
color="text"
textAlign={{ base: "center", lg: "left" }}
bg="ednBackground"
align="center"
mt={8}
border="1px"
borderColor="primary"
borderRadius="base"
boxShadow="inset 0 -2px 0 0 var(--eth-colors-primary400)"
>
<Heading
as="h2"
fontFamily="monospace"
textTransform="uppercase"
bg="border"
p={1}
fontSize="2rem"
lineHeight={1.4}
>
<Translation id="page-calltocontribute-title" />
</Heading>
<Text lineHeight="140%" color="text" fontFamily="monospace">
<Translation id="page-calltocontribute-desc-1" />
</Text>
<Text lineHeight="140%" color="text" fontFamily="monospace">
<Translation id="page-calltocontribute-desc-2" />
</Text>
<Text lineHeight="140%" color="text" fontFamily="monospace">
<Translation id="page-calltocontribute-desc-3" />{" "}
<Link to="https://www.notion.so/efdn/Writer-template-4b40d196cde7422ca6a2091de33550bd">
<Translation id="page-calltocontribute-link" />
</Link>
</Text>
<Text lineHeight="140%" color="text" fontFamily="monospace">
<Translation id="page-calltocontribute-desc-4" />{" "}
<Link to="https://discord.gg/CetY6Y4">
<Translation id="page-calltocontribute-link-2" />
</Link>{" "}
</Text>
<ButtonLink
to={editPath}
leftIcon={
<Icon fill="background" w={6} h={6} as={FaGithub} name="github" />
}
>
<Translation id="page-calltocontribute-span" />
</ButtonLink>
<Show above={largeBp}>
<ContentColumn>
░░░░░░░░░▄░░░░░░░░░░░░░░▄░░░░ ░░░░░░░░▌▒█░░░░░░░░░░░▄▀▒▌░░░
░░░░░░░░▌▒▒█░░░░░░░░▄▀▒▒▒▐░░░ ░░░░░░░▐▄▀▒▒▀▀▀▀▄▄▄▀▒▒▒▒▒▐░░░
░░░░░▄▄▀▒░▒▒▒▒▒▒▒▒▒█▒▒▄█▒▐░░░ ░░░▄▀▒▒▒░░░▒▒▒░░░▒▒▒▀██▀▒▌░░░
░░▐▒▒▒▄▄▒▒▒▒░░░▒▒▒▒▒▒▒▀▄▒▒▌░░ ░░▌░░▌█▀▒▒▒▒▒▄▀█▄▒▒▒▒▒▒▒█▒▐░░
░▐░░░▒▒▒▒▒▒▒▒▌██▀▒▒░░░▒▒▒▀▄▌░ ░▌░▒▄██▄▒▒▒▒▒▒▒▒▒░░░░░░▒▒▒▒▌░
▀▒▀▐▄█▄█▌▄░▀▒▒░░░░░░░░░░▒▒▒▐░ ▐▒▒▐▀▐▀▒░▄▄▒▄▒▒▒▒▒▒░▒░▒░▒▒▒▒▌
▐▒▒▒▀▀▄▄▒▒▒▄▒▒▒▒▒▒▒▒░▒░▒░▒▒▐░ ░▌▒▒▒▒▒▒▀▀▀▒▒▒▒▒▒░▒░▒░▒░▒▒▒▌░
░▐▒▒▒▒▒▒▒▒▒▒▒▒▒▒░▒░▒░▒▒▄▒▒▐░░ ░░▀▄▒▒▒▒▒▒▒▒▒▒▒░▒░▒░▒▄▒▒▒▒▌░░
░░░░▀▄▒▒▒▒▒▒▒▒▒▒▄▄▄▀▒▒▒▒▄▀░░░ ░░░░░░▀▄▄▄▄▄▄▀▀▀▒▒▒▒▒▄▄▀░░░░░
░░░░░░░░░▒▒▒▒▒▒▒▒▒▒▀▀░░░░░░░░
</ContentColumn>
</Show>
<ContentColumn>
<Heading
as="h2"
fontFamily="monospace"
textTransform="uppercase"
bg="border"
p={1}
fontSize="2rem"
lineHeight={1.4}
>
<Translation id="page-calltocontribute-title" />
</Heading>
<DescriptionParagraph>
<Translation id="page-calltocontribute-desc-1" />
</DescriptionParagraph>
<DescriptionParagraph>
<Translation id="page-calltocontribute-desc-2" />
</DescriptionParagraph>
<DescriptionParagraph>
<Translation id="page-calltocontribute-desc-3" />{" "}
<Link to="https://www.notion.so/efdn/Writer-template-4b40d196cde7422ca6a2091de33550bd">
<Translation id="page-calltocontribute-link" />
</Link>
</DescriptionParagraph>
<DescriptionParagraph>
<Translation id="page-calltocontribute-desc-4" />{" "}
<Link to="https://discord.gg/CetY6Y4">
<Translation id="page-calltocontribute-link-2" />
</Link>{" "}
</DescriptionParagraph>
<ButtonLink
to={editPath}
leftIcon={
<Icon fill="background" w={6} h={6} as={FaGithub} name="github" />
}
>
<Translation id="page-calltocontribute-span" />
</ButtonLink>
</ContentColumn>
</Flex>
</Flex>
)
)
}

export default CallToContribute

0 comments on commit 28fbbd6

Please sign in to comment.