Merge branch 'dev' into all-contributors/add-SaratAngajalaoffl

Author: corwintines

.all-contributorsrc

@@ -9882,6 +9882,79 @@
       "contributions": [
         "doc"
       ]
+    },
+    {
+      "login": "questions",
+      "name": "questions",
+      "avatar_url": "https://avatars.githubusercontent.com/u/3233328?v=4",
+      "profile": "https://github.com/Questions",
+      "contributions": [
+        "projectManagement",
+        "question"
+      ]
+    },
+    {
+      "login": "machin3boy",
+      "name": "machin3boy",
+      "avatar_url": "https://avatars.githubusercontent.com/u/78896694?v=4",
+      "profile": "https://github.com/machin3boy",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "nsexer",
+      "name": "nethan",
+      "avatar_url": "https://avatars.githubusercontent.com/u/30265113?v=4",
+      "profile": "https://github.com/nsexer",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "MrJithil",
+      "name": "Jithil P Ponnan",
+      "avatar_url": "https://avatars.githubusercontent.com/u/26359740?v=4",
+      "profile": "https://www.linkedin.com/in/jithil",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "chocolatesuit",
+      "name": "chocolatesuit",
+      "avatar_url": "https://avatars.githubusercontent.com/u/120116662?v=4",
+      "profile": "https://github.com/chocolatesuit",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "apinanyogaratnam",
+      "name": "Apinan Yogaratnam",
+      "avatar_url": "https://avatars.githubusercontent.com/u/72412733?v=4",
+      "profile": "http://apinanyogaratnam.github.io/my-personal-website-v2.0/",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "trevorsc19",
+      "name": "trevorsc19",
+      "avatar_url": "https://avatars.githubusercontent.com/u/30576577?v=4",
+      "profile": "http://trevorscanlon.eth.xyz",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "thouravi",
+      "name": "ImThour",
+      "avatar_url": "https://avatars.githubusercontent.com/u/15676184?v=4",
+      "profile": "https://github.com/thouravi",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "contributorsPerLine": 7,

README.md

@@ -51,45 +51,45 @@ If you're ready to contribute and create your PR, it will help to set up a local
 If this is your first time forking our repo, this is all you need to do for this step:
 
 ```sh
-$ git clone git@github.com:[your_github_handle]/ethereum-org-website.git && cd ethereum-org-website
+git clone git@github.com:[your_github_handle]/ethereum-org-website.git && cd ethereum-org-website
 ```
 
 If you've already forked the repo, you'll want to ensure your fork is configured and that it's up to date. This will save you the headache of potential merge conflicts.
 
 To [configure your fork](https://docs.github.com/en/github/collaborating-with-issues-and-pull-requests/configuring-a-remote-for-a-fork):
 
 ```sh
-$ git remote add upstream https://github.com/ethereum/ethereum-org-website.git
+git remote add upstream https://github.com/ethereum/ethereum-org-website.git
 ```
 
 To [sync your fork with the latest changes](https://docs.github.com/en/github/collaborating-with-issues-and-pull-requests/syncing-a-fork):
 
 ```sh
-$ git checkout dev
-$ git fetch upstream
-$ git merge upstream/dev
+git checkout dev
+git fetch upstream
+git merge upstream/dev
 ```
 
 3. Install dependencies
 
 We recommend using a node manager to use multiple node versions in your system. We use [Volta](https://volta.sh/). In case you don't use a manager or you use `nvm`, you can check the currently supported versions under the `"volta"` section on our `package.json` file.
 
 ```sh
-$ yarn
+yarn
 ```
 
 ### 4. Make awesome changes!
 
 1. Create new branch for your changes
 
 ```sh
-$ git checkout -b new_branch_name
+git checkout -b new_branch_name
 ```
 
 2. Start developing!
 
 ```sh
-$ yarn start
+yarn start
 ```
 
 - Open this directory in your favorite text editor / IDE, and see your changes live by visiting `localhost:8000` from your browser
@@ -102,13 +102,13 @@ By default the script will build all the languages (complete list in `data/trans
 3. Commit and prepare for pull request (PR). In your PR commit message, reference the issue it resolves (see [how to link a commit message to an issue using a keyword](https://docs.github.com/en/free-pro-team@latest/github/managing-your-work-on-github/linking-a-pull-request-to-an-issue#linking-a-pull-request-to-an-issue-using-a-keyword)).
 
 ```sh
-$ git commit -m "brief description of changes [Fixes #1234]"
+git commit -m "brief description of changes [Fixes #1234]"
 ```
 
 4. Push to your GitHub account
 
 ```sh
-$ git push
+git push
 ```
 
 ### 5. Local development with lambda functions
@@ -1549,6 +1549,16 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/qiuhaohao"><img src="https://avatars.githubusercontent.com/u/22148367?v=4?s=100" width="100px;" alt="qiuhaohao"/><br /><sub><b>qiuhaohao</b></sub></a><br /><a href="#content-qiuhaohao" title="Content">🖋</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/debeldami"><img src="https://avatars.githubusercontent.com/u/44111962?v=4?s=100" width="100px;" alt="damilola debel"/><br /><sub><b>damilola debel</b></sub></a><br /><a href="#content-debeldami" title="Content">🖋</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/SaratAngajalaoffl"><img src="https://avatars.githubusercontent.com/u/60383339?v=4?s=100" width="100px;" alt="Sarat Angajala"/><br /><sub><b>Sarat Angajala</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=SaratAngajalaoffl" title="Documentation">📖</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/Questions"><img src="https://avatars.githubusercontent.com/u/3233328?v=4?s=100" width="100px;" alt="questions"/><br /><sub><b>questions</b></sub></a><br /><a href="#projectManagement-questions" title="Project Management">📆</a> <a href="#question-questions" title="Answering Questions">💬</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/machin3boy"><img src="https://avatars.githubusercontent.com/u/78896694?v=4?s=100" width="100px;" alt="machin3boy"/><br /><sub><b>machin3boy</b></sub></a><br /><a href="#content-machin3boy" title="Content">🖋</a></td>
+    </tr>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/nsexer"><img src="https://avatars.githubusercontent.com/u/30265113?v=4?s=100" width="100px;" alt="nethan"/><br /><sub><b>nethan</b></sub></a><br /><a href="#content-nsexer" title="Content">🖋</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://www.linkedin.com/in/jithil"><img src="https://avatars.githubusercontent.com/u/26359740?v=4?s=100" width="100px;" alt="Jithil P Ponnan"/><br /><sub><b>Jithil P Ponnan</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=MrJithil" title="Documentation">📖</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/chocolatesuit"><img src="https://avatars.githubusercontent.com/u/120116662?v=4?s=100" width="100px;" alt="chocolatesuit"/><br /><sub><b>chocolatesuit</b></sub></a><br /><a href="#content-chocolatesuit" title="Content">🖋</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="http://apinanyogaratnam.github.io/my-personal-website-v2.0/"><img src="https://avatars.githubusercontent.com/u/72412733?v=4?s=100" width="100px;" alt="Apinan Yogaratnam"/><br /><sub><b>Apinan Yogaratnam</b></sub></a><br /><a href="#content-apinanyogaratnam" title="Content">🖋</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="http://trevorscanlon.eth.xyz"><img src="https://avatars.githubusercontent.com/u/30576577?v=4?s=100" width="100px;" alt="trevorsc19"/><br /><sub><b>trevorsc19</b></sub></a><br /><a href="#content-trevorsc19" title="Content">🖋</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/thouravi"><img src="https://avatars.githubusercontent.com/u/15676184?v=4?s=100" width="100px;" alt="ImThour"/><br /><sub><b>ImThour</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=thouravi" title="Code">💻</a></td>
     </tr>
   </tbody>
 </table>

src/api/coinmetrics.ts

@@ -1,10 +1,18 @@
 import React from "react"
-import styled from "@emotion/styled"
 import { GatsbyImage } from "gatsby-plugin-image"
+import {
+  Box,
+  Flex,
+  Container,
+  Img,
+  Center,
+  Heading,
+  Text,
+} from "@chakra-ui/react"
 
 import Translation from "../components/Translation"
 import ButtonLink from "./ButtonLink"
-import Emoji from "./OldEmoji"
+import Emoji from "./Emoji"
 import Link from "./Link"
 
 import { getImage, getSrc, ImageDataLike } from "../utils/image"
@@ -34,56 +42,6 @@ interface IPropsWithImage extends IPropsBase {
 
 export type IProps = IPropsWithImage | IPropsWithSVG
 
-const Container = styled.div<IHide>`
-  flex: 1 1 45%;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  margin: 1rem;
-  opacity: ${(props) => (props.shouldHide ? 0 : 1)};
-  @media (max-width: ${(props) => props.theme.breakpoints.l}) {
-    display: ${(props) => (props.shouldHide ? `none` : `flex`)};
-  }
-`
-
-const Image = styled(GatsbyImage)`
-  align-self: center;
-  width: 100%;
-`
-
-const ImageContainer = styled.div`
-  border: 1px solid ${(props) => props.theme.colors.white700};
-  width: 100%;
-  padding: 2rem;
-  text-align: center;
-  display: flex;
-  justify-content: center;
-`
-
-const ArtistSubtitle = styled.div`
-  display: flex;
-  font-size: ${(props) => props.theme.fontSizes.m};
-  color: ${(props) => props.theme.colors.text300};
-  margin-right: 0.5rem;
-`
-
-const Caption = styled.div`
-  display: flex;
-  justify-content: flex-start;
-  margin-bottom: 1rem;
-  width: 100%;
-  background: ${(props) => props.theme.colors.background};
-  border-left: 1px solid ${(props) => props.theme.colors.white700};
-  border-bottom: 1px solid ${(props) => props.theme.colors.white700};
-  border-right: 1px solid ${(props) => props.theme.colors.white700};
-  border-radius: 0px 0px 4px 4px;
-  padding: 0.5rem 1rem;
-`
-
-const ButtonContainer = styled.div`
-  margin-top: 1rem;
-`
-
 // TODO add ability to download SVGs
 const AssetDownload: React.FC<IProps> = ({
   alt,
@@ -102,35 +60,77 @@ const AssetDownload: React.FC<IProps> = ({
   const Svg = svg
 
   return (
-    <Container shouldHide={shouldHide}>
-      <h4>{title}</h4>
-      <div>
-        {children && <ImageContainer>{children}</ImageContainer>}
+    <Box
+      display={{
+        base: shouldHide ? "none" : "flex",
+        lg: "flex",
+      }}
+      maxW="100%"
+      minW="170px"
+      flex="1 1 45%"
+      flexDirection="column"
+      justifyContent="space-between"
+      m={4}
+      p={0}
+      opacity={shouldHide ? 0 : 1}
+    >
+      <Heading as="h4" fontSize={{ base: "md", md: "xl" }} fontWeight="500">
+        {title}
+      </Heading>
+      <Box>
+        {children && (
+          <Flex
+            border="1px"
+            borderColor="white700"
+            w="100%"
+            p={8}
+            textAlign="center"
+            justify="center"
+          >
+            {children}
+          </Flex>
+        )}
         {!children && (
-          <ImageContainer>
+          <Center border="1px" borderColor="white700" p={8} w="100%">
             {Svg && <Svg alt={alt} />}
-            {image && <Image image={getImage(image)!} alt={alt} />}
-          </ImageContainer>
+            {image && (
+              <Img
+                as={GatsbyImage}
+                image={getImage(image)!}
+                alt={alt}
+                w="100%"
+                alignSelf="center"
+              />
+            )}
+          </Center>
         )}
         {artistName && (
-          <Caption>
-            <ArtistSubtitle>
-              <Emoji text=":artist_palette:" mr={`0.5em`} />
+          <Flex
+            mb={4}
+            border="1px"
+            borderTop="none"
+            borderColor="white700"
+            py={2}
+            px={4}
+            borderRadius="0 0 4px 4px"
+          >
+            <Flex mr={2} fontSize="md" textColor="text300">
+              <Emoji text=":artist_palette:" mr={2} fontSize="2xl" />
               <Translation id="page-assets-download-artist" />
-            </ArtistSubtitle>
+            </Flex>
             {artistUrl && <Link to={artistUrl}>{artistName}</Link>}
-            {!artistUrl && <span>{artistName}</span>}
-          </Caption>
+            {!artistUrl && <Text m={0}>{artistName}</Text>}
+          </Flex>
         )}
-      </div>
-      <ButtonContainer>
+      </Box>
+      <Box mt={4} p={0}>
         {!Svg && (
           <ButtonLink to={downloadUrl}>
             <Translation id="page-assets-download-download" />
           </ButtonLink>
         )}
-      </ButtonContainer>
-    </Container>
+      </Box>
+    </Box>
   )
 }