Skip to content
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

Contributors.tsx migrated to Chakra.UI #8695

Merged
merged 6 commits into from
Dec 22, 2022
Merged

Contributors.tsx migrated to Chakra.UI #8695

Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e6ab8b3
changed Cotainer and ContributorCard to chakra components
armgp Nov 19, 2022
b791671
changed Cotainer and ContributorCard to chakra components
armgp Nov 19, 2022
97bab9a
Merge branch 'ethereum:dev' into contributors
armgp Nov 21, 2022
43347cb
Contributors.tsx migrated to chakra.ui
armgp Nov 21, 2022
8a64cbc
Merge branch 'ethereum:dev' into contributors
armgp Dec 20, 2022
52aa8e6
review changes
armgp Dec 20, 2022
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
94 changes: 57 additions & 37 deletions src/components/Contributors.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,36 +1,12 @@
import React, { useEffect, useState } from "react"
import styled from "@emotion/styled"
import { shuffle } from "lodash"

import ActionCard from "./ActionCard"
import data from "../data/contributors.json"

const Container = styled.div`
display: flex;
flex-wrap: wrap;
`
import { Box, Flex, Image, LinkBox, LinkOverlay, Text } from "@chakra-ui/react"

const ContributorCard = styled(ActionCard)`
max-width: 132px;
margin: 0.5rem;
import data from "../data/contributors.json"
import { borderRadius } from "polished"
armgp marked this conversation as resolved.
Show resolved Hide resolved

.action-card-image-wrapper {
min-height: 100px;
}
.action-card-image {
width: 132px;
height: 132px;
}
.action-card-content {
padding: 1rem;
h3 {
font-size: ${(props) => props.theme.fontSizes.m};
}
p {
margin-bottom: 0;
}
}
`
import Link from "./Link"

export interface IProps {}

Expand Down Expand Up @@ -59,17 +35,61 @@ const Contributors: React.FC<IProps> = () => {
have contributed so far!
</p>

<Container>
<Flex flexWrap="wrap">
{contributorsList.map((contributor, idx) => (
<ContributorCard
key={idx}
image={contributor.avatar_url}
to={contributor.profile}
title={contributor.name}
alt={contributor.name}
/>
<LinkBox
as="div"
maxWidth="132px"
margin="0.5rem"
armgp marked this conversation as resolved.
Show resolved Hide resolved
boxShadow="0px 14px 66px rgba(0, 0, 0, 0.07), 0px 10px 17px rgba(0, 0, 0, 0.03), 0px 4px 7px rgba(0, 0, 0, 0.05)"
_hover={{
textDecoration: "none",
borderRadius: "4px",
armgp marked this conversation as resolved.
Show resolved Hide resolved
boxShadow: "0px 8px 17px rgba(0, 0, 0, 0.15)",
background: "tableBackgroundHover",
transition: "transform 0.1s",
transform: "scale(1.02)",
}}
_focus={{
textDecoration: "none",
borderRadius: "4px",
armgp marked this conversation as resolved.
Show resolved Hide resolved
boxShadow: "0px 8px 17px rgba(0, 0, 0, 0.15)",
background: "tableBackgroundHover",
transition: "transform 0.1s",
transform: "scale(1.02)",
}}
>
<Box display="flex" flexDirection="row" minHeight="100px">
armgp marked this conversation as resolved.
Show resolved Hide resolved
<Image
armgp marked this conversation as resolved.
Show resolved Hide resolved
width="132px"
height="132px"
src={contributor.avatar_url}
alt={contributor.name}
/>
</Box>
<Box padding="1rem">
<Text
as="h3"
fontSize="md"
marginTop="0.5rem"
marginBottom="1rem"
armgp marked this conversation as resolved.
Show resolved Hide resolved
>
<LinkOverlay
as={Link}
href={contributor.profile}
hideArrow
color="text"
textDecoration="none"
_hover={{ textDecoration: "none" }}
isExternal={true}
>
{contributor.name}
</LinkOverlay>
</Text>
</Box>
</LinkBox>
))}
</Container>
</Flex>
</>
)
}
Expand Down