🎨 fix some visual bugs for links (#2357)

web/core/Button/index.tsx

@@ -3,7 +3,7 @@ import { ButtonHTMLAttributes, forwardRef } from 'react'
 import { twMerge } from 'tailwind-merge'
 
 export const commonButtonStyling = `
-w-max
+w-fit
 text-sm
 px-5
 py-3

web/core/Link/ReadMoreLink.tsx

@@ -55,7 +55,7 @@ export const ReadMoreLink = forwardRef<HTMLAnchorElement, ReadMoreLinkProps>(fun
     ${
       type === 'downloadableFile' || type === 'downloadableImage'
         ? 'group-hover:translate-y-0.5'
-        : 'group-hover:translate-x-2'
+        : '-translate-y-1 group-hover:translate-x-2'
     }
     transition-all
     duration-300

web/core/Link/ResourceLink.tsx

@@ -61,7 +61,7 @@ export const ResourceLink = forwardRef<HTMLAnchorElement, ResourceLinkProps>(fun
 
   return (
     <BaseLink className={classNames} ref={ref} href={href} {...rest}>
-      <span className="grid grid-cols-[1fr_max-content] gap-2 items-end  pb-5 pr-2">
+      <span className="grid grid-cols-[1fr_max-content] gap-14 items-end pb-5 pr-2">
         {children}
         <ArrowRight className={iconClassNames} />
       </span>

web/sections/CallToActions/index.tsx

@@ -15,27 +15,38 @@ type CallToActionsProps = {
 const CallToActions = ({ callToActions = [], overrideButtonStyle, splitList, className }: CallToActionsProps) => {
   if (!callToActions) return null
 
-  const getSingleButtonLink = () => {
+  const getSingleAction = () => {
     const { label, extension, type, link } = callToActions[0]
     const url = getUrlFromAction(callToActions[0])
     if (!url) {
       console.warn(`CallToActions: Missing URL on 'ButtonLink' link with type: '${type}' and label: '${label}'`)
+      return null
     }
-    return url ? (
+    const linkContent = `${label} ${extension ? `(${extension.toUpperCase()})` : ''}`
+
+    return overrideButtonStyle ? (
+      <ResourceLink
+        href={url}
+        {...(link?.lang && { locale: getLocaleFromName(link?.lang) })}
+        type={type}
+        className="w-fit"
+      >
+        {linkContent}
+      </ResourceLink>
+    ) : (
       <ButtonLink
         {...(type === 'internalUrl' && { locale: getLocaleFromName(link?.lang) })}
         href={url}
         type={type}
         className={twMerge(className, 'mb-8 block')}
       >
-        {`${label} ${extension ? `(${extension.toUpperCase()})` : ''}`}
+        {linkContent}
       </ButtonLink>
-    ) : null
+    )
   }
-  // If we have only one link and the publisher has not made an active choice of overriding the style
-  // in Sanity the default style is a button style
-  return callToActions?.length === 1 && !overrideButtonStyle ? (
-    getSingleButtonLink()
+
+  return callToActions?.length === 1 ? (
+    getSingleAction()
   ) : (
     <List split={splitList} className={className} listClassName={'list-none'}>
       {callToActions.map((callToAction: LinkData) => {