From 67e51c5125de435fb48ac6b618291e4f7d835ce5 Mon Sep 17 00:00:00 2001
From: Alexander Alemayhu <alexander@alemayhu.com>
Date: Sat, 4 May 2024 21:30:25 +0200
Subject: [PATCH] fix: make the primary button clickable (#524)

* fix: make the primary button clickable

* fix: remove toilet post
---
 .../buttons/PrimaryButton/index.tsx           | 22 +++----
 .../buttons/PrimaryButton/styled.tsx          | 64 ++++++++++---------
 .../components/Sections/news/NewsSection.tsx  | 14 ++--
 3 files changed, 46 insertions(+), 54 deletions(-)

diff --git a/src/components/buttons/PrimaryButton/index.tsx b/src/components/buttons/PrimaryButton/index.tsx
index ad0e9b78..1166dacb 100644
--- 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
index b67bfd52..6d13aa36 100644
--- 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;
+    }
 `;
diff --git a/src/pages/HomePage/components/Sections/news/NewsSection.tsx b/src/pages/HomePage/components/Sections/news/NewsSection.tsx
index 33125bf3..13997d50 100644
--- a/src/pages/HomePage/components/Sections/news/NewsSection.tsx
+++ b/src/pages/HomePage/components/Sections/news/NewsSection.tsx
@@ -17,7 +17,8 @@ function FeaturedEntry() {
           wanted to give you a special update.
           <br />
         </div>
-        <ReadMore href="https://www.patreon.com/posts/state-of-2anki-60331662?utm_medium=clipboard_copy&utm_source=copy_to_clipboard&utm_campaign=postshareI" />
+        <ReadMore
+          href="https://www.patreon.com/posts/state-of-2anki-60331662?utm_medium=clipboard_copy&utm_source=copy_to_clipboard&utm_campaign=postshareI" />
       </div>
     </div>
   );
@@ -38,23 +39,18 @@ function NewsSection() {
         </div>
         <div className="column">
           <NewsEntry
-            title={"What's Next? The Path to v1.0.0!"}
+            title={'What\'s Next? The Path to v1.0.0!'}
             description="There are a three main things I would like to tackle longterm but in this session"
             link="https://www.patreon.com/posts/whats-next-path-51204766"
           />
-          <div className="my-2" />
-          <NewsEntry
-            title="Good News!"
-            description="I woke up in the middle of the night and had to go to the toilet 🚾"
-            link="https://www.patreon.com/posts/good-news-51122343"
-          />
         </div>
       </div>
       <Centered>
         <ReadMoreNews
           destination="https://www.patreon.com/alemayhu"
           text="READ MORE NEWS"
-          onClickLink={() => {}}
+          onClickLink={() => {
+          }}
         />
       </Centered>
     </section>