From 8f57e73a72fef61a5733bdda74e590406ab0804b Mon Sep 17 00:00:00 2001
From: browny <mahendrabrowny@gmail.com>
Date: Wed, 16 Nov 2022 14:09:11 +0530
Subject: [PATCH 1/6] Refactor `SkipLink.tsx` component to use ChakraUI

---
 src/components/SkipLink.tsx | 44 ++++++++++++++-----------------------
 1 file changed, 16 insertions(+), 28 deletions(-)

diff --git a/src/components/SkipLink.tsx b/src/components/SkipLink.tsx
index 06ed104af78..77b2105cd35 100644
--- a/src/components/SkipLink.tsx
+++ b/src/components/SkipLink.tsx
@@ -1,28 +1,6 @@
 import React from "react"
-import styled from "@emotion/styled"
 import Translation from "./Translation"
-
-const Div = styled.div`
-  background-color: ${(props) => props.theme.colors.primary};
-`
-
-const Anchor = styled.a`
-  line-height: 2rem;
-  position: absolute;
-  top: -3rem;
-  margin-left: 0.5rem;
-  color: ${(props) => props.theme.colors.background};
-  text-decoration: none;
-
-  &:focus {
-    position: static;
-  }
-`
-
-const DivAnchor = styled.div`
-  height: 80px;
-  margin-top: -80px;
-`
+import { Box, Link } from "@chakra-ui/react"
 
 export interface IProps {
   hrefId: string
@@ -30,14 +8,24 @@ export interface IProps {
 
 export const SkipLink: React.FC<IProps> = ({ hrefId }) => {
   return (
-    <Div>
-      <Anchor href={hrefId}>
+    <Box bg="primary">
+      <Link
+        href={hrefId}
+        lineHeight="2rem"
+        position="absolute"
+        top="-3rem"
+        ml=".5rem"
+        color="background"
+        textDecorationLine="none"
+        _hover={{ textDecoration: "none" }}
+        _focus={{ position: "static" }}
+      >
         <Translation id="skip-to-main-content" />
-      </Anchor>
-    </Div>
+      </Link>
+    </Box>
   )
 }
 
 export const SkipLinkAnchor: React.FC<{ id: string }> = ({ id }) => {
-  return <DivAnchor id={id}></DivAnchor>
+  return <Box height="80px" mt="-80px" id={id}></Box>
 }

From c238e6f05d73be2cfa7bc21fa506d2f048282794 Mon Sep 17 00:00:00 2001
From: browny <mahendrabrowny@gmail.com>
Date: Sat, 26 Nov 2022 14:28:11 +0530
Subject: [PATCH 2/6] Update src/components/SkipLink.tsx

Co-authored-by: Pablo Pettinari <pettinarip@gmail.com>
---
 src/components/SkipLink.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/SkipLink.tsx b/src/components/SkipLink.tsx
index 77b2105cd35..b8a324ca3f9 100644
--- a/src/components/SkipLink.tsx
+++ b/src/components/SkipLink.tsx
@@ -14,7 +14,7 @@ export const SkipLink: React.FC<IProps> = ({ hrefId }) => {
         lineHeight="2rem"
         position="absolute"
         top="-3rem"
-        ml=".5rem"
+        ml="2"
         color="background"
         textDecorationLine="none"
         _hover={{ textDecoration: "none" }}

From 2fd0f031795319f5f07d318bce6d81b56a77bdb5 Mon Sep 17 00:00:00 2001
From: browny <mahendrabrowny@gmail.com>
Date: Sat, 26 Nov 2022 14:28:22 +0530
Subject: [PATCH 3/6] Update src/components/SkipLink.tsx

Co-authored-by: Pablo Pettinari <pettinarip@gmail.com>
---
 src/components/SkipLink.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/SkipLink.tsx b/src/components/SkipLink.tsx
index b8a324ca3f9..d83956c87e8 100644
--- a/src/components/SkipLink.tsx
+++ b/src/components/SkipLink.tsx
@@ -11,7 +11,7 @@ export const SkipLink: React.FC<IProps> = ({ hrefId }) => {
     <Box bg="primary">
       <Link
         href={hrefId}
-        lineHeight="2rem"
+        lineHeight="taller"
         position="absolute"
         top="-3rem"
         ml="2"

From cc6e9f89200dfea1fd3c1b254b06c2e28865ad74 Mon Sep 17 00:00:00 2001
From: browny <mahendrabrowny@gmail.com>
Date: Sat, 26 Nov 2022 14:28:57 +0530
Subject: [PATCH 4/6] Update src/components/SkipLink.tsx

Co-authored-by: Pablo Pettinari <pettinarip@gmail.com>
---
 src/components/SkipLink.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/SkipLink.tsx b/src/components/SkipLink.tsx
index d83956c87e8..13216785642 100644
--- a/src/components/SkipLink.tsx
+++ b/src/components/SkipLink.tsx
@@ -13,7 +13,7 @@ export const SkipLink: React.FC<IProps> = ({ hrefId }) => {
         href={hrefId}
         lineHeight="taller"
         position="absolute"
-        top="-3rem"
+        top="-12"
         ml="2"
         color="background"
         textDecorationLine="none"

From e0c7674ea1c632307c033ac20691e258de48a61f Mon Sep 17 00:00:00 2001
From: browny <mahendrabrowny@gmail.com>
Date: Sat, 26 Nov 2022 14:51:00 +0530
Subject: [PATCH 5/6] Update SkipLink.tsx

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

diff --git a/src/components/SkipLink.tsx b/src/components/SkipLink.tsx
index 13216785642..47ab0bb0a7d 100644
--- a/src/components/SkipLink.tsx
+++ b/src/components/SkipLink.tsx
@@ -1,6 +1,7 @@
 import React from "react"
 import Translation from "./Translation"
-import { Box, Link } from "@chakra-ui/react"
+import { Box } from "@chakra-ui/react"
+import Link from "../components/Link"
 
 export interface IProps {
   hrefId: string

From 49bd54c8d3a86abb8f2d69939d9ee3b26bf33c41 Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Mon, 28 Nov 2022 14:23:14 -0300
Subject: [PATCH 6/6] fix import order

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

diff --git a/src/components/SkipLink.tsx b/src/components/SkipLink.tsx
index 47ab0bb0a7d..8a7dca751ba 100644
--- a/src/components/SkipLink.tsx
+++ b/src/components/SkipLink.tsx
@@ -1,6 +1,7 @@
 import React from "react"
-import Translation from "./Translation"
 import { Box } from "@chakra-ui/react"
+
+import Translation from "./Translation"
 import Link from "../components/Link"
 
 export interface IProps {