fix: make the primary button clickable

2anki · May 4, 2024 · 61ec3f2 · 61ec3f2
1 parent ec2c8b9
commit 61ec3f2
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 45 deletions.
diff --git a/src/components/buttons/PrimaryButton/index.tsx b/src/components/buttons/PrimaryButton/index.tsx
@@ -8,21 +8,15 @@ interface PrimaryButtonProps {
 }
 
 export default function PrimaryButton({
-  text,
-  destination,
-  onClickLink,
-}: PrimaryButtonProps) {
+                                        text,
+                                        destination,
+                                        onClickLink
+                                      }: PrimaryButtonProps) {
   return (
-    <StyledButton>
-      {destination.includes('http') ? (
-        <a href={destination} rel="noopener noreferrer">
-          {text}
-        </a>
-      ) : (
-        <a onClick={onClickLink} href={destination}>
-          {text}
-        </a>
-      )}
+    <StyledButton onClick={onClickLink}
+                  href={destination} rel="noopener noreferrer"
+    >
+      {text}
       <img width={24} height={24} src="/icons/arrow-right.svg" alt="arrow" />
     </StyledButton>
   );

diff --git a/src/components/buttons/PrimaryButton/styled.tsx b/src/components/buttons/PrimaryButton/styled.tsx
@@ -1,38 +1,40 @@
 import styled from 'styled-components';
 
-export const StyledButton = styled.div`
-  margin-top: 0.5rem;
-  margin-bottom: 2rem;
-  background: #5397f5;
-  padding: 1rem 1.9rem;
-  border-radius: 3px;
-  text-transform: uppercase;
-  width: 268px;
-  height: 66px;
-  display: flex;
-  grid-gap: 0.7rem;
-  align-items: center;
-  justify-content: center;
-  a {
+export const StyledButton = styled.a`
+    margin-top: 0.5rem;
+    margin-bottom: 2rem;
+    background: #5397f5;
+    padding: 1rem 1.9rem;
+    border-radius: 3px;
+    text-transform: uppercase;
+    width: 268px;
+    height: 66px;
+    display: flex;
+    grid-gap: 0.7rem;
+    align-items: center;
+    justify-content: center;
+
     text-decoration: none;
     color: white;
-  }
-  &:hover {
-    background-color: #2b2e3c;
-  }
 
-  /* Typography */
-  font-family: Rubik;
-  font-size: 20px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 30px;
-  letter-spacing: 0em;
-  text-align: center;
+    &:hover {
+        background-color: #2b2e3c;
+        color: white;
+    }
+
+
+    /* Typography */
+    font-family: Rubik;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 30px;
+    letter-spacing: 0em;
+    text-align: center;
 
-  @media (max-width: 1024px) {
-    font-size: 16px;
-    height: 54px;
-    margin-right: auto;
-  }
+    @media (max-width: 1024px) {
+        font-size: 16px;
+        height: 54px;
+        margin-right: auto;
+    }
 `;