Merge pull request #264 from The-Best-Codes/best/ui-tweaks-1

Add event button classname is not applied

Author: Kara Sowles Deloss

components/button-link/ButtonLink.jsx

@@ -1,13 +1,14 @@
 import Link from 'next/link'
 import IconArrowRight from '../../public/icons/arrow-right'
+import clsx from 'clsx'
 
-const ButtonLink = ({ href, isExternal, children }) => {
+const ButtonLink = ({ href, isExternal, children, className }) => {
   return (
     <Link
       href={href}
       target={isExternal ? '_blank' : undefined}
       rel={isExternal ? 'noreferrer' : undefined}
-      className="button-link"
+      className={clsx('button-link', className)}
     >
       {children} <IconArrowRight />
     </Link>

components/button-link/button-link.scss

@@ -18,6 +18,7 @@
 
   svg path {
     transition: fill 0.2s ease;
+    fill: $white;
   }
 
   &:hover svg path {
@@ -29,6 +30,7 @@
     background: $white;
     color: $purple;
     font-weight: 600;
+    margin-top: spacing(1);
 
     svg path {
       fill: $purple;