fixup action link and button styles

SU-SWS · Apr 12, 2024 · 0804ba7 · 0804ba7
1 parent 3030ed2
commit 0804ba7
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 48 deletions.
diff --git a/src/components/config-pages/local-footer.tsx b/src/components/config-pages/local-footer.tsx
@@ -63,7 +63,7 @@ const LocalFooter = ({
   return (
     <div className="local-footer bg-foggy-light py-20">
       <div className="centered">
-        <div className="grid grid-cols-6 md:grid-cols-12 gap-32 md:gap-y-0 [&_a]:font-semibold [&_a]:no-underline [&_a:hover]:underline [&_a:hover]:text-black [&_a:focus]:underline [&_a:focus]:text-black [&_a]:transition">
+        <div className="grid grid-cols-6 md:grid-cols-12 gap-32 md:gap-y-0 [&_a]:font-semibold [&_a]:no-underline [&_a:hover]:underline [&_a:focus]:underline [&_a]:transition">
 
           <div className="col-span-6 md:col-start-2 md:col-span-5 md:rs-mb-4">
             <FooterLockup {...lockupProps} />
@@ -90,7 +90,7 @@ const LocalFooter = ({
               </ul>
             }
 
-            <Wysiwyg html={suLocalFootPrCo?.processed} className="[&_a]:rounded-full text-archway"/>
+            <Wysiwyg html={suLocalFootPrCo?.processed} className="text-archway"/>
 
             {suLocalFootSocial &&
               <ul className="rs-mt-4 list-unstyled flex gap-11 items-center children:mb-0">
@@ -118,7 +118,7 @@ const LocalFooter = ({
                   if (!link.url) return;
                   return (
                     <li key={`footer-primary-link-${index}`}>
-                      <Link href={link.url} className="link--arrow-right">
+                      <Link href={link.url} className="link--action">
                         {link.title}
                       </Link>
                     </li>
@@ -140,7 +140,7 @@ const LocalFooter = ({
                   if (!link.url) return;
                   return (
                     <li key={`footer-second-link-${index}`}>
-                      <Link href={link.url} className="link--arrow-right">
+                      <Link href={link.url} className="link--action">
                         {link.title}
                       </Link>
                     </li>

diff --git a/src/components/elements/action-link.tsx b/src/components/elements/action-link.tsx
@@ -1,21 +1,21 @@
 import Link from "@components/elements/link";
-import {ChevronRightIcon} from "@heroicons/react/20/solid";
-import {HtmlHTMLAttributes} from "react";
-import {twMerge} from "tailwind-merge";
+import { ArrowRightIcon } from "@heroicons/react/20/solid";
+import { HtmlHTMLAttributes } from "react";
+import { twMerge } from "tailwind-merge";
 
 type Props = HtmlHTMLAttributes<HTMLAnchorElement> & {
   /**
    * Link url.
    */
-  href: string
-}
+  href: string;
+};
 
-const ActionLink = ({children, ...props}: Props) => {
+const ActionLink = ({ children, ...props }: Props) => {
   return (
     <Link {...props} className={twMerge("relative", props.className)}>
       {children}
-      <ChevronRightIcon height={25} className="ml-2 inline-block"/>
+      <ArrowRightIcon width={20} className='ml-2 inline-block' />
     </Link>
-  )
-}
-export default ActionLink;
+  );
+};
+export default ActionLink;
diff --git a/src/components/elements/button.tsx b/src/components/elements/button.tsx
@@ -1,47 +1,48 @@
 import Link from "@components/elements/link";
-import {twMerge} from "tailwind-merge"
-import {HtmlHTMLAttributes, MouseEventHandler} from "react";
-import {Maybe} from "@lib/gql/__generated__/drupal.d";
-import {clsx} from "clsx";
+import { twMerge } from "tailwind-merge";
+import { HtmlHTMLAttributes, MouseEventHandler } from "react";
+import { Maybe } from "@lib/gql/__generated__/drupal.d";
+import { clsx } from "clsx";
+import { ArrowRightIcon } from "@heroicons/react/20/solid";
 
 type Props = HtmlHTMLAttributes<HTMLAnchorElement | HTMLButtonElement> & {
   /**
    * Link URL.
    */
-  href?: Maybe<string>
+  href?: Maybe<string>;
   /**
    * If the element should be a <button>, default is <a>.
    */
-  buttonElem?: boolean
+  buttonElem?: boolean;
   /**
    * Display a larger button.
    */
-  big?: boolean
+  big?: boolean;
   /**
    * Display a secondary styled button.
    */
-  secondary?: boolean
+  secondary?: boolean;
   /**
    * Center the button in the container.
    */
-  centered?: boolean
+  centered?: boolean;
   /**
    * Click handler, mostly when using a button element.
    */
-  onClick?: MouseEventHandler
+  onClick?: MouseEventHandler;
   /**
    * Next.js prefetch functionality.
    */
-  prefetch?: boolean
+  prefetch?: boolean;
   /**
    * Type of button: submit, reset, or button.
    */
-  type?: HTMLButtonElement["type"]
+  type?: HTMLButtonElement["type"];
   /**
    * Disabled button element.
    */
-  disabled?: boolean
-}
+  disabled?: boolean;
+};
 
 export const Button = ({
   href,
@@ -53,28 +54,29 @@ export const Button = ({
   className,
   ...props
 }: Props) => {
-
-  const standardClasses = clsx(
-    {
-      "flex items-center w-fit mx-auto": centered,
-      "inline-block text-center w-fit": !centered,
-      "btn btn--big transition text-5xl text-white hocus:text-white bg-digital-red hocus:bg-black no-underline hocus:underline py-6 px-12 font-normal": big && !secondary,
-      "btn btn--secondary transition text-digital-red border-2 border-digital-red hocus:border-black no-underline hocus:underline py-4 px-8 font-normal": !big && secondary,
-      "btn  btn--big btn--secondary transition text-5xl text-digital-red border-2 border-digital-red hocus:border-black no-underline hocus:underline py-6 px-12 font-normal": big && secondary,
-      "btn bg-digital-red font-normal text-white hocus:bg-black hocus:text-white py-4 px-8 no-underline hocus:underline transition": !big && !secondary,
-    }
-  )
+  const standardClasses = clsx({
+    "flex items-center w-fit mx-auto": centered,
+    "inline-block text-center w-fit": !centered,
+    "btn btn--big transition text-5xl text-white hocus:text-white bg-digital-red border-2 border-white hocus:outline hocus:outline-3 hocus:outline-digital-red no-underline hocus:underline py-6 px-12 font-normal rounded-full m-4":
+      big && !secondary,
+    "btn btn--secondary transition text-digital-red hocus:text-white hocus:bg-digital-red border-2 border-digital-red hocus:border-white no-underline hocus:underline hocus:outline hocus:outline-3 hocus:outline-digital-red py-4 px-16 font-normal rounded-full":
+      !big && secondary,
+    "btn  btn--big btn--secondary transition text-5xl text-digital-red hocus:text-white hocus:bg-digital-red border-2 border-digital-red hocus:border-white no-underline hocus:underline hocus:outline hocus:outline-3 hocus:outline-digital-red py-6 px-18 font-normal rounded-full":
+      big && secondary,
+    "btn bg-digital-red font-normal text-white border-2 border-white hocus:outline hocus:outline-3 hocus:outline-digital-red py-4 px-8 no-underline hocus:underline transition rounded-full m-4":
+      !big && !secondary,
+  });
 
   if (!href || buttonElem) {
     return (
       <button
         className={twMerge(standardClasses, className)}
-        type="button"
+        type='button'
         {...props}
       >
         {children}
       </button>
-    )
+    );
   }
 
   return (
@@ -84,8 +86,9 @@ export const Button = ({
       {...props}
     >
       {children}
+      <ArrowRightIcon width={20} className='ml-2 inline-block' />
     </Link>
-  )
-}
+  );
+};
 
-export default Button
+export default Button;
diff --git a/src/components/elements/link.tsx b/src/components/elements/link.tsx
@@ -4,7 +4,6 @@ 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 { ArrowRightIcon } from "@heroicons/react/20/solid";
 
 type Props = HtmlHTMLAttributes<HTMLAnchorElement | HTMLButtonElement> & LinkProps & {
   /**
@@ -49,9 +48,6 @@ const DrupalLink = ({href, className, children, ...props}: Props) => {
       {href.startsWith("mailto") &&
         <EnvelopeIcon width={20} className="ml-4 inline-block"/>
       }
-      {className?.includes("link--arrow-right") &&
-        <ArrowRightIcon width={20} className="ml-4 inline-block"/>
-      }
     </Link>
   )
 }