From 7bb0f47746f544849ae63512c7c43f5fd5142bdc Mon Sep 17 00:00:00 2001
From: Hursit Tarcan <75273616+hursittarcan@users.noreply.github.com>
Date: Tue, 31 May 2022 02:09:43 +0200
Subject: [PATCH 1/3] Migrated ActionCard.js to TS

---
 .../{ActionCard.js => ActionCard.tsx}         | 31 +++++++++++++------
 1 file changed, 21 insertions(+), 10 deletions(-)
 rename src/components/{ActionCard.js => ActionCard.tsx} (87%)

diff --git a/src/components/ActionCard.js b/src/components/ActionCard.tsx
similarity index 87%
rename from src/components/ActionCard.js
rename to src/components/ActionCard.tsx
index 2706ad116aa..d9bae405853 100644
--- a/src/components/ActionCard.js
+++ b/src/components/ActionCard.tsx
@@ -62,16 +62,27 @@ const Card = styled(Link)`
   }
 `
 
-const ActionCard = ({
-  to,
-  alt,
-  image,
-  title,
-  description,
-  children,
-  className,
-  isRight,
-  isBottom = true,
+export interface IProps {
+  to?: string
+  alt?: string
+  image?: string
+  title?: string
+  description?: string
+  className?: string
+  isRight?: boolean
+  isBottom?: boolean
+}
+
+const ActionCard: React.FC<IProps> = ({
+  to, 
+  alt, 
+  image, 
+  title, 
+  description, 
+  children, 
+  className, 
+  isRight, 
+  isBottom = true
 }) => {
   const isImageURL = typeof image === "string" && image.includes("http")
   return (

From ac38743dc277565743ec9fcdd3a0c93dccad4361 Mon Sep 17 00:00:00 2001
From: Hursit Tarcan <75273616+hursittarcan@users.noreply.github.com>
Date: Tue, 31 May 2022 12:23:09 +0200
Subject: [PATCH 2/3] Update ActionCard.tsx

---
 src/components/ActionCard.tsx | 81 ++++++++++++++++++-----------------
 1 file changed, 42 insertions(+), 39 deletions(-)

diff --git a/src/components/ActionCard.tsx b/src/components/ActionCard.tsx
index d9bae405853..6df675dc4bb 100644
--- a/src/components/ActionCard.tsx
+++ b/src/components/ActionCard.tsx
@@ -17,7 +17,10 @@ const ChildrenContainer = styled.div`
   margin-top: 2rem;
 `
 
-const ImageWrapper = styled.div`
+const ImageWrapper = styled.div<{
+    isRight: boolean | undefined
+    isBottom: boolean | undefined
+}>`
   display: flex;
   flex-direction: row;
   justify-content: ${(props) => (props.isRight ? `flex-end` : `center`)};
@@ -63,47 +66,47 @@ const Card = styled(Link)`
 `
 
 export interface IProps {
-  to?: string
-  alt?: string
-  image?: string
-  title?: string
-  description?: string
-  className?: string
-  isRight?: boolean
-  isBottom?: boolean
+    to: string
+    alt?: string
+    image: string
+    title: string
+    description: string
+    className?: string
+    isRight?: boolean
+    isBottom?: boolean
 }
 
 const ActionCard: React.FC<IProps> = ({
-  to, 
-  alt, 
-  image, 
-  title, 
-  description, 
-  children, 
-  className, 
-  isRight, 
-  isBottom = true
-}) => {
-  const isImageURL = typeof image === "string" && image.includes("http")
-  return (
-    <Card to={to} className={className} hideArrow={true}>
-      <ImageWrapper
-        isRight={isRight}
-        isBottom={isBottom}
-        className="action-card-image-wrapper"
-      >
-        {!isImageURL && <Image image={image} alt={alt} />}
-        {isImageURL && (
-          <img src={image} alt={alt} className="action-card-image" />
-        )}
-      </ImageWrapper>
-      <Content className="action-card-content">
-        <Title>{title}</Title>
-        <Description>{description}</Description>
-        {children && <ChildrenContainer>{children}</ChildrenContainer>}
-      </Content>
-    </Card>
-  )
+                                          to,
+                                          alt,
+                                          image,
+                                          title,
+                                          description,
+                                          children,
+                                          className,
+                                          isRight,
+                                          isBottom = true
+                                      }) => {
+    const isImageURL = typeof image === "string" && image.includes("http")
+    return (
+        <Card to={to} className={className} hideArrow={true}>
+            <ImageWrapper
+                isRight={isRight}
+                isBottom={isBottom}
+                className="action-card-image-wrapper"
+            >
+                {!isImageURL && <Image image={image} alt={alt} />}
+                {isImageURL && (
+                    <img src={image} alt={alt} className="action-card-image" />
+                )}
+            </ImageWrapper>
+            <Content className="action-card-content">
+                <Title>{title}</Title>
+                <Description>{description}</Description>
+                {children && <ChildrenContainer>{children}</ChildrenContainer>}
+            </Content>
+        </Card>
+    )
 }
 
 export default ActionCard

From 36251dd41d2dd31eb450635fcf6c68719b64c34a Mon Sep 17 00:00:00 2001
From: Hursit Tarcan <75273616+hursittarcan@users.noreply.github.com>
Date: Tue, 31 May 2022 15:24:27 +0200
Subject: [PATCH 3/3] Fixed formatting ActionCard

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

diff --git a/src/components/ActionCard.tsx b/src/components/ActionCard.tsx
index 6df675dc4bb..e7963998613 100644
--- a/src/components/ActionCard.tsx
+++ b/src/components/ActionCard.tsx
@@ -18,8 +18,8 @@ const ChildrenContainer = styled.div`
 `
 
 const ImageWrapper = styled.div<{
-    isRight: boolean | undefined
-    isBottom: boolean | undefined
+  isRight: boolean | undefined
+  isBottom: boolean | undefined
 }>`
   display: flex;
   flex-direction: row;
@@ -66,47 +66,47 @@ const Card = styled(Link)`
 `
 
 export interface IProps {
-    to: string
-    alt?: string
-    image: string
-    title: string
-    description: string
-    className?: string
-    isRight?: boolean
-    isBottom?: boolean
+  to: string
+  alt?: string
+  image: string
+  title: string
+  description: string
+  className?: string
+  isRight?: boolean
+  isBottom?: boolean
 }
 
 const ActionCard: React.FC<IProps> = ({
-                                          to,
-                                          alt,
-                                          image,
-                                          title,
-                                          description,
-                                          children,
-                                          className,
-                                          isRight,
-                                          isBottom = true
-                                      }) => {
-    const isImageURL = typeof image === "string" && image.includes("http")
-    return (
-        <Card to={to} className={className} hideArrow={true}>
-            <ImageWrapper
-                isRight={isRight}
-                isBottom={isBottom}
-                className="action-card-image-wrapper"
-            >
-                {!isImageURL && <Image image={image} alt={alt} />}
-                {isImageURL && (
-                    <img src={image} alt={alt} className="action-card-image" />
-                )}
-            </ImageWrapper>
-            <Content className="action-card-content">
-                <Title>{title}</Title>
-                <Description>{description}</Description>
-                {children && <ChildrenContainer>{children}</ChildrenContainer>}
-            </Content>
-        </Card>
-    )
+  to,
+  alt,
+  image,
+  title,
+  description,
+  children,
+  className,
+  isRight,
+  isBottom = true
+}) => {
+  const isImageURL = typeof image === "string" && image.includes("http")
+  return (
+    <Card to={to} className={className} hideArrow={true}>
+      <ImageWrapper
+        isRight={isRight}
+        isBottom={isBottom}
+        className="action-card-image-wrapper"
+      >
+        {!isImageURL && <Image image={image} alt={alt} />}
+        {isImageURL && (
+          <img src={image} alt={alt} className="action-card-image" />
+        )}
+      </ImageWrapper>
+      <Content className="action-card-content">
+        <Title>{title}</Title>
+        <Description>{description}</Description>
+        {children && <ChildrenContainer>{children}</ChildrenContainer>}
+      </Content>
+    </Card>
+  )
 }
 
 export default ActionCard