OPHJOD-393: Refactor hero card to use icon instead of text arrow

Opetushallitus · May 2, 2024 · b287f4d · b287f4d
1 parent 2daa724
commit b287f4d
Showing 1 changed file with 7 additions and 5 deletions.
diff --git 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>
   );