add link styles

SU-SWS · May 6, 2024 · 620d926 · 620d926
1 parent ef2ef5a
commit 620d926
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 3 deletions.
diff --git a/src/components/elements/action-link.tsx b/src/components/elements/action-link.tsx
@@ -12,7 +12,7 @@ type Props = HtmlHTMLAttributes<HTMLAnchorElement> & {
 
 const ActionLink = ({ children, className, ...props }: Props) => {
   return (
-    <Link {...props} className={twMerge("relative", className?.replace("link--action", ""))}>
+    <Link {...props} className={twMerge("relative text-digital-red *:text-digital-red hocus:text-archway-dark *:hocus:text-archway-dark", className?.replace("link--action", ""))}>
       {children}
       <ArrowLongRightIcon height={20} className="ml-2 inline-block mb-2"/>
     </Link>

diff --git a/src/components/elements/link.tsx b/src/components/elements/link.tsx
@@ -4,6 +4,7 @@ import {EnvelopeIcon} from "@heroicons/react/24/outline";
 import ActionLink from "@components/elements/action-link";
 import Button from "@components/elements/button";
 import {LinkProps} from "next/dist/client/link";
+import clsx from "clsx";
 
 type Props = HtmlHTMLAttributes<HTMLAnchorElement | HTMLButtonElement> & LinkProps & {
   /**
@@ -43,7 +44,7 @@ const DrupalLink = ({href, children, ...props}: Props) => {
   }
 
   return (
-    <Link href={href} {...props}>
+    <Link href={href} className={clsx("text-digital-red *:text-digital-red hocus:text-archway-dark *:hocus:text-archway-dark", props.className)} {...props}>
       {children}
       {href.startsWith("mailto") &&
         <EnvelopeIcon width={20} className="ml-4 inline-block"/>

diff --git a/src/components/paragraphs/stanford-media-caption/media-caption-paragraph.tsx b/src/components/paragraphs/stanford-media-caption/media-caption-paragraph.tsx
@@ -34,7 +34,7 @@ const MediaCaptionParagraph = ({paragraph, ...props}: Props) => {
 
       <figcaption>
         {paragraph.suMediaCaptionLink?.url &&
-          <Link href={paragraph.suMediaCaptionLink.url} className="link--action text-stone-dark hocus:text-archway-dark">
+          <Link href={paragraph.suMediaCaptionLink.url} className="link--action text-stone-dark *:text-stone-dark hocus:text-archway-dark *:hocus:text-archway-dark">
             {paragraph.suMediaCaptionLink.title}
           </Link>
         }