From e6ab8b3d761cb5aa43dbe210f9ebc21bdd0f353d Mon Sep 17 00:00:00 2001
From: armgp <arm.gp23@gmail.com>
Date: Sat, 19 Nov 2022 23:36:55 +0530
Subject: [PATCH 1/4] changed Cotainer and ContributorCard to chakra components

---
 src/components/Contributors.tsx | 75 +++++++++++++++++++++++++++++----
 1 file changed, 66 insertions(+), 9 deletions(-)

diff --git a/src/components/Contributors.tsx b/src/components/Contributors.tsx
index ca35703955b..78642158098 100644
--- a/src/components/Contributors.tsx
+++ b/src/components/Contributors.tsx
@@ -2,8 +2,13 @@ import React, { useEffect, useState } from "react"
 import styled from "@emotion/styled"
 import { shuffle } from "lodash"
 
+import Link from "./Link"
+
+import { Box, Flex, Image, LinkBox, LinkOverlay, Text } from "@chakra-ui/react"
+
 import ActionCard from "./ActionCard"
 import data from "../data/contributors.json"
+import { borderRadius } from "polished"
 
 const Container = styled.div`
   display: flex;
@@ -59,17 +64,69 @@ 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}
-          />
+          // <ActionCard
+          //   key={idx}
+          //   image={contributor.avatar_url}
+          //   to={contributor.profile}
+          //   title={contributor.name}
+          //   alt={contributor.name}
+          // />
+
+          <LinkBox
+            as="div"
+            maxWidth="132px"
+            margin="0.5rem"
+            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",
+              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",
+              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">
+              <Image
+                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"
+              >
+                <LinkOverlay
+                  as={Link}
+                  href={contributor.profile}
+                  hideArrow
+                  color="text"
+                  textDecoration="none"
+                  _hover={{ textDecoration: "none" }}
+                  isExternal={true}
+                >
+                  {contributor.name}
+                </LinkOverlay>
+              </Text>
+            </Box>
+          </LinkBox>
         ))}
-      </Container>
+      </Flex>
     </>
   )
 }

From b79167169a4125921a8354a74d1df3e860b07257 Mon Sep 17 00:00:00 2001
From: armgp <arm.gp23@gmail.com>
Date: Sat, 19 Nov 2022 23:37:48 +0530
Subject: [PATCH 2/4] changed Cotainer and ContributorCard to chakra components


From 43347cba103d863cf30d21ea692351902e06ebb4 Mon Sep 17 00:00:00 2001
From: armgp <arm.gp23@gmail.com>
Date: Mon, 21 Nov 2022 19:10:11 +0530
Subject: [PATCH 3/4] Contributors.tsx migrated to chakra.ui

---
 src/components/Contributors.tsx | 39 +--------------------------------
 1 file changed, 1 insertion(+), 38 deletions(-)

diff --git a/src/components/Contributors.tsx b/src/components/Contributors.tsx
index 78642158098..a588a950393 100644
--- a/src/components/Contributors.tsx
+++ b/src/components/Contributors.tsx
@@ -1,41 +1,12 @@
 import React, { useEffect, useState } from "react"
-import styled from "@emotion/styled"
 import { shuffle } from "lodash"
 
-import Link from "./Link"
-
 import { Box, Flex, Image, LinkBox, LinkOverlay, Text } from "@chakra-ui/react"
 
-import ActionCard from "./ActionCard"
 import data from "../data/contributors.json"
 import { borderRadius } from "polished"
 
-const Container = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-`
-
-const ContributorCard = styled(ActionCard)`
-  max-width: 132px;
-  margin: 0.5rem;
-
-  .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 {}
 
@@ -66,14 +37,6 @@ const Contributors: React.FC<IProps> = () => {
 
       <Flex flexWrap="wrap">
         {contributorsList.map((contributor, idx) => (
-          // <ActionCard
-          //   key={idx}
-          //   image={contributor.avatar_url}
-          //   to={contributor.profile}
-          //   title={contributor.name}
-          //   alt={contributor.name}
-          // />
-
           <LinkBox
             as="div"
             maxWidth="132px"

From 52aa8e69fda99a418c6fe99e0b8cee0c51e0fc97 Mon Sep 17 00:00:00 2001
From: armgp <arm.gp23@gmail.com>
Date: Tue, 20 Dec 2022 11:06:45 +0530
Subject: [PATCH 4/4] review changes

---
 src/components/Contributors.tsx | 28 ++++++++++------------------
 1 file changed, 10 insertions(+), 18 deletions(-)

diff --git a/src/components/Contributors.tsx b/src/components/Contributors.tsx
index a588a950393..684ecf91e9d 100644
--- a/src/components/Contributors.tsx
+++ b/src/components/Contributors.tsx
@@ -4,7 +4,6 @@ import { shuffle } from "lodash"
 import { Box, Flex, Image, LinkBox, LinkOverlay, Text } from "@chakra-ui/react"
 
 import data from "../data/contributors.json"
-import { borderRadius } from "polished"
 
 import Link from "./Link"
 
@@ -40,11 +39,11 @@ const Contributors: React.FC<IProps> = () => {
           <LinkBox
             as="div"
             maxWidth="132px"
-            margin="0.5rem"
+            margin="2"
             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",
+              borderRadius: "base",
               boxShadow: "0px 8px 17px rgba(0, 0, 0, 0.15)",
               background: "tableBackgroundHover",
               transition: "transform 0.1s",
@@ -52,28 +51,21 @@ const Contributors: React.FC<IProps> = () => {
             }}
             _focus={{
               textDecoration: "none",
-              borderRadius: "4px",
+              borderRadius: "base",
               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">
-              <Image
-                width="132px"
-                height="132px"
-                src={contributor.avatar_url}
-                alt={contributor.name}
-              />
-            </Box>
+            <Image
+              width="132px"
+              height="132px"
+              src={contributor.avatar_url}
+              alt={contributor.name}
+            />
             <Box padding="1rem">
-              <Text
-                as="h3"
-                fontSize="md"
-                marginTop="0.5rem"
-                marginBottom="1rem"
-              >
+              <Text as="h3" fontSize="md" marginTop="2" marginBottom="4">
                 <LinkOverlay
                   as={Link}
                   href={contributor.profile}