From bc3e13d54de8cf63a13adda17561ecbc05dce405 Mon Sep 17 00:00:00 2001
From: SNikhill <snikhill@protonmail.com>
Date: Sat, 24 Sep 2022 17:19:45 +0530
Subject: [PATCH 01/12] chore(actionCard): use chakra title & heading

---
 src/components/ActionCard.tsx | 19 +++++++------------
 1 file changed, 7 insertions(+), 12 deletions(-)

diff --git a/src/components/ActionCard.tsx b/src/components/ActionCard.tsx
index e3f50c909eb..422940623da 100644
--- a/src/components/ActionCard.tsx
+++ b/src/components/ActionCard.tsx
@@ -1,5 +1,6 @@
 import React, { ReactNode } from "react"
 import styled from "@emotion/styled"
+import { Text, Heading } from "@chakra-ui/react"
 import { GatsbyImage, IGatsbyImageData } from "gatsby-plugin-image"
 
 import Link from "./Link"
@@ -8,11 +9,6 @@ const Content = styled.div`
   padding: 1.5rem;
 `
 
-const Description = styled.p`
-  opacity: 0.8;
-  margin-bottom: 0rem;
-`
-
 const ChildrenContainer = styled.div`
   margin-top: 2rem;
 `
@@ -30,11 +26,6 @@ const ImageWrapper = styled.div<{
   min-height: 260px;
 `
 
-const Title = styled.h3`
-  margin-top: 0.5rem;
-  margin-bottom: 1rem;
-`
-
 const Image = styled(GatsbyImage)`
   width: 100%;
   height: 100%;
@@ -104,8 +95,12 @@ const ActionCard: React.FC<IProps> = ({
         )}
       </ImageWrapper>
       <Content className="action-card-content">
-        <Title>{title}</Title>
-        <Description>{description}</Description>
+        <Heading as="h3" fontSize="2xl" mt={2} mb={4}>
+          {title}
+        </Heading>
+        <Text mb={0} opacity={0.8}>
+          {description}
+        </Text>
         {children && <ChildrenContainer>{children}</ChildrenContainer>}
       </Content>
     </Card>

From 2f0eb482954a4ef9a8ae910b139940189ff2efd3 Mon Sep 17 00:00:00 2001
From: SNikhill <snikhill@protonmail.com>
Date: Sat, 24 Sep 2022 17:28:15 +0530
Subject: [PATCH 02/12] chore(actionCard): use chakra box

---
 src/components/ActionCard.tsx | 16 ++++------------
 1 file changed, 4 insertions(+), 12 deletions(-)

diff --git a/src/components/ActionCard.tsx b/src/components/ActionCard.tsx
index 422940623da..e4e211bf1c5 100644
--- a/src/components/ActionCard.tsx
+++ b/src/components/ActionCard.tsx
@@ -1,18 +1,10 @@
 import React, { ReactNode } from "react"
 import styled from "@emotion/styled"
-import { Text, Heading } from "@chakra-ui/react"
+import { Box, Text, Heading } from "@chakra-ui/react"
 import { GatsbyImage, IGatsbyImageData } from "gatsby-plugin-image"
 
 import Link from "./Link"
 
-const Content = styled.div`
-  padding: 1.5rem;
-`
-
-const ChildrenContainer = styled.div`
-  margin-top: 2rem;
-`
-
 const ImageWrapper = styled.div<{
   isRight: boolean | undefined
   isBottom: boolean | undefined
@@ -94,15 +86,15 @@ const ActionCard: React.FC<IProps> = ({
           <img src={image} alt={alt} className="action-card-image" />
         )}
       </ImageWrapper>
-      <Content className="action-card-content">
+      <Box p={6} className="action-card-content">
         <Heading as="h3" fontSize="2xl" mt={2} mb={4}>
           {title}
         </Heading>
         <Text mb={0} opacity={0.8}>
           {description}
         </Text>
-        {children && <ChildrenContainer>{children}</ChildrenContainer>}
-      </Content>
+        {children && <Box mt={8}>{children}</Box>}
+      </Box>
     </Card>
   )
 }

From 4a76a84485d10da112a7cbc73370525967241ef1 Mon Sep 17 00:00:00 2001
From: SNikhill <snikhill@protonmail.com>
Date: Sat, 24 Sep 2022 17:46:38 +0530
Subject: [PATCH 03/12] chore(imageWrapper): use chakra flex

---
 src/components/ActionCard.tsx | 27 +++++++++------------------
 1 file changed, 9 insertions(+), 18 deletions(-)

diff --git a/src/components/ActionCard.tsx b/src/components/ActionCard.tsx
index e4e211bf1c5..2085e608d3f 100644
--- a/src/components/ActionCard.tsx
+++ b/src/components/ActionCard.tsx
@@ -1,23 +1,10 @@
 import React, { ReactNode } from "react"
 import styled from "@emotion/styled"
-import { Box, Text, Heading } from "@chakra-ui/react"
+import { Box, Flex, Text, Heading } from "@chakra-ui/react"
 import { GatsbyImage, IGatsbyImageData } from "gatsby-plugin-image"
 
 import Link from "./Link"
 
-const ImageWrapper = styled.div<{
-  isRight: boolean | undefined
-  isBottom: boolean | undefined
-}>`
-  display: flex;
-  flex-direction: row;
-  justify-content: ${(props) => (props.isRight ? `flex-end` : `center`)};
-  align-items: ${(props) => (props.isBottom ? `flex-end` : `center`)};
-  background: ${(props) => props.theme.colors.cardGradient};
-  box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.1);
-  min-height: 260px;
-`
-
 const Image = styled(GatsbyImage)`
   width: 100%;
   height: 100%;
@@ -76,16 +63,20 @@ const ActionCard: React.FC<IProps> = ({
 
   return (
     <Card to={to} className={className} hideArrow={true}>
-      <ImageWrapper
-        isRight={isRight}
-        isBottom={isBottom}
+      <Flex
+        minH={"260px"}
+        bg={"cardGradient"}
+        direction={"row"}
+        justify={isRight ? "flex-end" : "center"}
+        align={isBottom ? "flex-end" : "center"}
         className="action-card-image-wrapper"
+        boxShadow="inset 0px -1px 0px rgba(0, 0, 0, 0.1)"
       >
         {!isImageURL && <Image image={image} alt={alt || ""} />}
         {isImageURL && (
           <img src={image} alt={alt} className="action-card-image" />
         )}
-      </ImageWrapper>
+      </Flex>
       <Box p={6} className="action-card-content">
         <Heading as="h3" fontSize="2xl" mt={2} mb={4}>
           {title}

From 9f8df8903a438e0968a7a56ba54746cf0ebbe952 Mon Sep 17 00:00:00 2001
From: SNikhill <snikhill@protonmail.com>
Date: Sat, 24 Sep 2022 18:04:06 +0530
Subject: [PATCH 04/12] chore(card): use chakra props to customise link

---
 src/components/ActionCard.tsx | 43 +++++++++++++++++++----------------
 1 file changed, 23 insertions(+), 20 deletions(-)

diff --git a/src/components/ActionCard.tsx b/src/components/ActionCard.tsx
index 2085e608d3f..f64bb32907b 100644
--- a/src/components/ActionCard.tsx
+++ b/src/components/ActionCard.tsx
@@ -17,24 +17,14 @@ const Image = styled(GatsbyImage)`
   }
 `
 
-const Card = styled(Link)`
-  text-decoration: none;
-  flex: 1 1 372px;
-  color: ${(props) => props.theme.colors.text};
-  box-shadow: 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);
-  margin: 1rem;
-
-  &:hover,
-  &:focus {
-    text-decoration: none;
-    border-radius: 4px;
-    box-shadow: 0px 8px 17px rgba(0, 0, 0, 0.15);
-    background: ${(props) => props.theme.colors.tableBackgroundHover};
-    transition: transform 0.1s;
-    transform: scale(1.02);
-  }
-`
+const LinkFocusStyles = {
+  textDecoration: "none",
+  borderRadius: "4px",
+  boxShadow: "0px 8px 17px rgba(0, 0, 0, 0.15)",
+  bg: "tableBackgroundHover",
+  transition: "transform 0.1s",
+  transform: "scale(1.02)",
+}
 
 export interface IProps {
   children?: React.ReactNode
@@ -62,7 +52,20 @@ const ActionCard: React.FC<IProps> = ({
   const isImageURL = typeof image === "string"
 
   return (
-    <Card to={to} className={className} hideArrow={true}>
+    <Link
+      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)"
+      color="text"
+      flex="1 1 372px"
+      _hover={LinkFocusStyles}
+      _focus={LinkFocusStyles}
+      to={to}
+      className={className}
+      hideArrow={true}
+      m={4}
+      textDecoration="none"
+    >
       <Flex
         minH={"260px"}
         bg={"cardGradient"}
@@ -86,7 +89,7 @@ const ActionCard: React.FC<IProps> = ({
         </Text>
         {children && <Box mt={8}>{children}</Box>}
       </Box>
-    </Card>
+    </Link>
   )
 }
 

From e8adc7a7da542ad7df779e85eb0293b6e931af63 Mon Sep 17 00:00:00 2001
From: SNikhill <snikhill@protonmail.com>
Date: Sun, 6 Nov 2022 00:11:12 +0530
Subject: [PATCH 05/12] fix(linkFocusStyle): define correct type

---
 src/components/ActionCard.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/ActionCard.tsx b/src/components/ActionCard.tsx
index f64bb32907b..b01cc8d60e8 100644
--- a/src/components/ActionCard.tsx
+++ b/src/components/ActionCard.tsx
@@ -1,6 +1,6 @@
 import React, { ReactNode } from "react"
 import styled from "@emotion/styled"
-import { Box, Flex, Text, Heading } from "@chakra-ui/react"
+import { Box, Flex, Text, Heading, BoxProps } from "@chakra-ui/react"
 import { GatsbyImage, IGatsbyImageData } from "gatsby-plugin-image"
 
 import Link from "./Link"
@@ -17,7 +17,7 @@ const Image = styled(GatsbyImage)`
   }
 `
 
-const LinkFocusStyles = {
+const linkFocusStyles: BoxProps = {
   textDecoration: "none",
   borderRadius: "4px",
   boxShadow: "0px 8px 17px rgba(0, 0, 0, 0.15)",
@@ -58,8 +58,8 @@ const ActionCard: React.FC<IProps> = ({
     0px 10px 17px rgba(0, 0, 0, 0.03), 0px 4px 7px rgba(0, 0, 0, 0.05)"
       color="text"
       flex="1 1 372px"
-      _hover={LinkFocusStyles}
-      _focus={LinkFocusStyles}
+      _hover={linkFocusStyles}
+      _focus={linkFocusStyles}
       to={to}
       className={className}
       hideArrow={true}

From 1fb7316ec84c0541d8fee292b30ccf731ab64d1a Mon Sep 17 00:00:00 2001
From: SNikhill <snikhill@protonmail.com>
Date: Sun, 6 Nov 2022 00:31:01 +0530
Subject: [PATCH 06/12] refactor(actionCard): use Link Box & Overlay

Make use of LinkBox
and LinkOverlay from
ChakraUI instead of
wrapping the whole
component with a Link
---
 src/components/ActionCard.tsx | 40 +++++++++++++++++++++++++----------
 1 file changed, 29 insertions(+), 11 deletions(-)

diff --git a/src/components/ActionCard.tsx b/src/components/ActionCard.tsx
index b01cc8d60e8..c8361c4e589 100644
--- a/src/components/ActionCard.tsx
+++ b/src/components/ActionCard.tsx
@@ -1,6 +1,14 @@
 import React, { ReactNode } from "react"
 import styled from "@emotion/styled"
-import { Box, Flex, Text, Heading, BoxProps } from "@chakra-ui/react"
+import {
+  Box,
+  Flex,
+  Text,
+  Heading,
+  BoxProps,
+  LinkBox,
+  LinkOverlay,
+} from "@chakra-ui/react"
 import { GatsbyImage, IGatsbyImageData } from "gatsby-plugin-image"
 
 import Link from "./Link"
@@ -17,8 +25,7 @@ const Image = styled(GatsbyImage)`
   }
 `
 
-const linkFocusStyles: BoxProps = {
-  textDecoration: "none",
+const linkBoxFocusStyles: BoxProps = {
   borderRadius: "4px",
   boxShadow: "0px 8px 17px rgba(0, 0, 0, 0.15)",
   bg: "tableBackgroundHover",
@@ -26,6 +33,10 @@ const linkFocusStyles: BoxProps = {
   transform: "scale(1.02)",
 }
 
+const linkFocusStyles: BoxProps = {
+  textDecoration: "none",
+}
+
 export interface IProps {
   children?: React.ReactNode
   to: string
@@ -52,19 +63,16 @@ const ActionCard: React.FC<IProps> = ({
   const isImageURL = typeof image === "string"
 
   return (
-    <Link
+    <LinkBox
       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)"
       color="text"
       flex="1 1 372px"
-      _hover={linkFocusStyles}
-      _focus={linkFocusStyles}
-      to={to}
+      _hover={linkBoxFocusStyles}
+      _focus={linkBoxFocusStyles}
       className={className}
-      hideArrow={true}
       m={4}
-      textDecoration="none"
     >
       <Flex
         minH={"260px"}
@@ -82,14 +90,24 @@ const ActionCard: React.FC<IProps> = ({
       </Flex>
       <Box p={6} className="action-card-content">
         <Heading as="h3" fontSize="2xl" mt={2} mb={4}>
-          {title}
+          <LinkOverlay
+            as={Link}
+            color="text"
+            hideArrow
+            textDecoration="none"
+            to={to}
+            _hover={linkFocusStyles}
+            _focus={linkFocusStyles}
+          >
+            {title}
+          </LinkOverlay>
         </Heading>
         <Text mb={0} opacity={0.8}>
           {description}
         </Text>
         {children && <Box mt={8}>{children}</Box>}
       </Box>
-    </Link>
+    </LinkBox>
   )
 }
 

From 69f7f1acfafabdb2d7a6c39bccc90f9e7824a5a9 Mon Sep 17 00:00:00 2001
From: SNikhill <snikhill@protonmail.com>
Date: Sun, 6 Nov 2022 01:22:43 +0530
Subject: [PATCH 07/12] refactor(actionCardImage): use chakra image

---
 src/components/ActionCard.tsx | 27 +++++++++++++--------------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/src/components/ActionCard.tsx b/src/components/ActionCard.tsx
index c8361c4e589..349b1388d1e 100644
--- a/src/components/ActionCard.tsx
+++ b/src/components/ActionCard.tsx
@@ -1,5 +1,4 @@
 import React, { ReactNode } from "react"
-import styled from "@emotion/styled"
 import {
   Box,
   Flex,
@@ -8,23 +7,12 @@ import {
   BoxProps,
   LinkBox,
   LinkOverlay,
+  Image,
 } from "@chakra-ui/react"
 import { GatsbyImage, IGatsbyImageData } from "gatsby-plugin-image"
 
 import Link from "./Link"
 
-const Image = styled(GatsbyImage)`
-  width: 100%;
-  height: 100%;
-  min-width: 100px;
-  min-height: 100px;
-  max-width: 372px;
-  max-height: 257px;
-  @media (max-width: ${(props) => props.theme.breakpoints.s}) {
-    max-width: 311px;
-  }
-`
-
 const linkBoxFocusStyles: BoxProps = {
   borderRadius: "4px",
   boxShadow: "0px 8px 17px rgba(0, 0, 0, 0.15)",
@@ -83,7 +71,18 @@ const ActionCard: React.FC<IProps> = ({
         className="action-card-image-wrapper"
         boxShadow="inset 0px -1px 0px rgba(0, 0, 0, 0.1)"
       >
-        {!isImageURL && <Image image={image} alt={alt || ""} />}
+        {!isImageURL && (
+          <Image
+            alt={alt || ""}
+            as={GatsbyImage}
+            maxH="257px"
+            maxW={{ base: "372px", sm: "311px" }}
+            minW="100px"
+            minH="100px"
+            image={image}
+            sizes="full"
+          />
+        )}
         {isImageURL && (
           <img src={image} alt={alt} className="action-card-image" />
         )}

From 70159a09254d4810d56ca1b54ea72b225c76ce95 Mon Sep 17 00:00:00 2001
From: SNikhill <snikhill@protonmail.com>
Date: Sun, 6 Nov 2022 01:13:55 +0530
Subject: [PATCH 08/12] fix: strings without braces

---
 src/components/ActionCard.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/ActionCard.tsx b/src/components/ActionCard.tsx
index 349b1388d1e..4a7108f3b29 100644
--- a/src/components/ActionCard.tsx
+++ b/src/components/ActionCard.tsx
@@ -14,7 +14,7 @@ import { GatsbyImage, IGatsbyImageData } from "gatsby-plugin-image"
 import Link from "./Link"
 
 const linkBoxFocusStyles: BoxProps = {
-  borderRadius: "4px",
+  borderRadius: "base",
   boxShadow: "0px 8px 17px rgba(0, 0, 0, 0.15)",
   bg: "tableBackgroundHover",
   transition: "transform 0.1s",
@@ -63,9 +63,9 @@ const ActionCard: React.FC<IProps> = ({
       m={4}
     >
       <Flex
-        minH={"260px"}
-        bg={"cardGradient"}
-        direction={"row"}
+        minH="260px"
+        bg="cardGradient"
+        direction="row"
         justify={isRight ? "flex-end" : "center"}
         align={isBottom ? "flex-end" : "center"}
         className="action-card-image-wrapper"

From 8c9acfe0bc9b8fe84a03da564ab85cec21dc90ff Mon Sep 17 00:00:00 2001
From: SNikhill <snikhill@protonmail.com>
Date: Sun, 29 Jan 2023 00:31:41 +0530
Subject: [PATCH 09/12] refactor(description): color instead of opacity

---
 src/components/ActionCard.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/ActionCard.tsx b/src/components/ActionCard.tsx
index 4a7108f3b29..a3f0c13ea6e 100644
--- a/src/components/ActionCard.tsx
+++ b/src/components/ActionCard.tsx
@@ -8,6 +8,7 @@ import {
   LinkBox,
   LinkOverlay,
   Image,
+  useColorModeValue,
 } from "@chakra-ui/react"
 import { GatsbyImage, IGatsbyImageData } from "gatsby-plugin-image"
 
@@ -49,6 +50,7 @@ const ActionCard: React.FC<IProps> = ({
   isBottom = true,
 }) => {
   const isImageURL = typeof image === "string"
+  const descriptionColor = useColorModeValue("blackAlpha.700", "whiteAlpha.800")
 
   return (
     <LinkBox
@@ -101,7 +103,7 @@ const ActionCard: React.FC<IProps> = ({
             {title}
           </LinkOverlay>
         </Heading>
-        <Text mb={0} opacity={0.8}>
+        <Text mb={0} color={descriptionColor}>
           {description}
         </Text>
         {children && <Box mt={8}>{children}</Box>}

From 093c2b64d76c84a85c37ec0996df9c25b8c6d152 Mon Sep 17 00:00:00 2001
From: SNikhill <snikhill@protonmail.com>
Date: Sun, 29 Jan 2023 00:42:57 +0530
Subject: [PATCH 10/12] fix(ImageWrapper): use correct breakpoints

---
 src/components/ActionCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ActionCard.tsx b/src/components/ActionCard.tsx
index a3f0c13ea6e..c7406361927 100644
--- a/src/components/ActionCard.tsx
+++ b/src/components/ActionCard.tsx
@@ -78,7 +78,7 @@ const ActionCard: React.FC<IProps> = ({
             alt={alt || ""}
             as={GatsbyImage}
             maxH="257px"
-            maxW={{ base: "372px", sm: "311px" }}
+            maxW={{ base: "311px", sm: "372px" }}
             minW="100px"
             minH="100px"
             image={image}

From c4d0f048729c49ce6fb4038db9a74704b3092f1b Mon Sep 17 00:00:00 2001
From: Corwin Smith <cssmittys@gmail.com>
Date: Tue, 21 Feb 2023 16:47:12 -0700
Subject: [PATCH 11/12] Update src/components/ActionCard.tsx

Co-authored-by: Tyler Pfledderer <tyler.pfledderer@gmail.com>
---
 src/components/ActionCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ActionCard.tsx b/src/components/ActionCard.tsx
index c7406361927..256811eaa21 100644
--- a/src/components/ActionCard.tsx
+++ b/src/components/ActionCard.tsx
@@ -90,7 +90,7 @@ const ActionCard: React.FC<IProps> = ({
         )}
       </Flex>
       <Box p={6} className="action-card-content">
-        <Heading as="h3" fontSize="2xl" mt={2} mb={4}>
+        <Heading as="h3" fontSize="2xl" mt={2} mb={4} fontWeight={600} lineHeight={1.4}>
           <LinkOverlay
             as={Link}
             color="text"

From cfdcf29e330946d9939ca35bfd3178a6a7fcd37f Mon Sep 17 00:00:00 2001
From: Corwin Smith <cssmittys@gmail.com>
Date: Wed, 22 Feb 2023 12:25:38 -0700
Subject: [PATCH 12/12] Refactor Image component

---
 src/components/ActionCard.tsx | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/components/ActionCard.tsx b/src/components/ActionCard.tsx
index 256811eaa21..c953373d703 100644
--- a/src/components/ActionCard.tsx
+++ b/src/components/ActionCard.tsx
@@ -86,11 +86,27 @@ const ActionCard: React.FC<IProps> = ({
           />
         )}
         {isImageURL && (
-          <img src={image} alt={alt} className="action-card-image" />
+          <Image
+            alt={alt || ""}
+            maxH="257px"
+            maxW={{ base: "311px", sm: "372px" }}
+            minW="100px"
+            minH="100px"
+            src={image}
+            sizes="full"
+            className="action-card-image"
+          />
         )}
       </Flex>
       <Box p={6} className="action-card-content">
-        <Heading as="h3" fontSize="2xl" mt={2} mb={4} fontWeight={600} lineHeight={1.4}>
+        <Heading
+          as="h3"
+          fontSize="2xl"
+          mt={2}
+          mb={4}
+          fontWeight={600}
+          lineHeight={1.4}
+        >
           <LinkOverlay
             as={Link}
             color="text"