From b287f4db9edd68e404698c430b605dc8f6f7d81b Mon Sep 17 00:00:00 2001
From: Sauli Anto <sauli.anto@gofore.com>
Date: Tue, 30 Apr 2024 14:21:25 +0300
Subject: [PATCH] OPHJOD-393: Refactor hero card to use icon instead of text
 arrow

---
 lib/components/HeroCard/HeroCard.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/lib/components/HeroCard/HeroCard.tsx b/lib/components/HeroCard/HeroCard.tsx
index 1d4fcc4..75c6fd1 100644
--- a/lib/components/HeroCard/HeroCard.tsx
+++ b/lib/components/HeroCard/HeroCard.tsx
@@ -44,17 +44,19 @@ const BaseCard = ({ title, content, actionContent, backgroundColor, href }: Hero
           className="absolute bottom-0 right-7 translate-y-2/4 rounded-[40px] outline-none transition-transform hover:scale-105 focus:scale-105"
         >
           <div
-            className="flex select-none gap-4 rounded-[40px] bg-white px-8 py-[20px] text-[28px] font-bold leading-[40px]"
+            className="flex select-none items-center gap-4 rounded-[40px] bg-white px-8 py-[20px] text-[28px] font-bold leading-[40px]"
             style={{ color: backgroundColor }}
           >
             {actionContent}
-            <i aria-hidden>→</i>
+            <span className="material-symbols-outlined size-32 select-none font-bold" aria-hidden>
+              arrow_forward
+            </span>
           </div>
         </a>
       ) : (
-        <i className="absolute bottom-5 right-7 select-none text-[28px] font-bold leading-[32px]" aria-hidden>
-          →
-        </i>
+        <span className="material-symbols-outlined size-32 absolute bottom-5 right-7 select-none font-bold" aria-hidden>
+          arrow_forward
+        </span>
       )}
     </div>
   );