From dbfa61f9647949c3c89271fdc099a9d39b08cf05 Mon Sep 17 00:00:00 2001
From: Jen Breese-Kauth <jbreese@stanford.edu>
Date: Tue, 21 May 2024 22:34:32 +0000
Subject: [PATCH] SUL23-468: Changed button font size and basefont size

---
 src/components/layout/global-footer.tsx                     | 2 +-
 src/components/node/stanford-course/card.tsx                | 2 +-
 src/components/node/stanford-person/horizontal-card.tsx     | 2 +-
 src/components/node/stanford-person/list-item.tsx           | 2 +-
 src/components/node/stanford-person/vertical-card.tsx       | 2 +-
 .../paragraph/sul-contact-card/manual-fields-card.tsx       | 2 +-
 .../paragraph/sul-contact-card/node-reference-card.tsx      | 2 +-
 src/components/patterns/banner.tsx                          | 4 ++--
 src/components/patterns/card.tsx                            | 2 +-
 src/components/patterns/horizontal-card.tsx                 | 4 ++--
 src/components/patterns/link.tsx                            | 6 +++---
 src/components/search/search-form.tsx                       | 4 ++--
 12 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/components/layout/global-footer.tsx b/src/components/layout/global-footer.tsx
index b52f1a92..b40393ec 100644
--- a/src/components/layout/global-footer.tsx
+++ b/src/components/layout/global-footer.tsx
@@ -1,7 +1,7 @@
 const GlobalFooter = () => {
   return (
     <div
-      className="global-footer basefont-20 rs-py-1 text-white bg-cardinal-red">
+      className="global-footer basefont-18 rs-py-1 text-white bg-cardinal-red">
       <div className="centered flex flex-col lg:flex-row" title="Common Stanford resources">
         <div className="text-center mt-5 mb-9">
           <a  rel="nofollow" className="logo text-white hocus:text-white type-3" href="https://www.stanford.edu">
diff --git a/src/components/node/stanford-course/card.tsx b/src/components/node/stanford-course/card.tsx
index 8656be84..c206dfe0 100644
--- a/src/components/node/stanford-course/card.tsx
+++ b/src/components/node/stanford-course/card.tsx
@@ -11,7 +11,7 @@ const StanfordCourseCard = ({node, h3Heading, ...props}: Props) => {
   const HeadingElement = h3Heading ? 'h3' : 'h2';
   return (
     <article
-      className="block w-full basefont-20 leading-display bg-white text-black border border-solid border-black-10 shadow-md rs-pt-2 rs-px-2 rs-pb-3" {...props}>
+      className="block w-full basefont-18 leading-display bg-white text-black border border-solid border-black-10 shadow-md rs-pt-2 rs-px-2 rs-pb-3" {...props}>
       <div className="rs-pb-0">
         <span className="font-bold leading-cozy">
           {node.suCourseSubject?.name}
diff --git a/src/components/node/stanford-person/horizontal-card.tsx b/src/components/node/stanford-person/horizontal-card.tsx
index 8ab6b9c9..774b0f91 100644
--- a/src/components/node/stanford-person/horizontal-card.tsx
+++ b/src/components/node/stanford-person/horizontal-card.tsx
@@ -18,7 +18,7 @@ const HorizontalPersonCard = ({node, h3Heading, ...props}: Props) => {
 
   return (
     <article
-      className="flex flex-col @3xl:flex-row w-full basefont-20 leading-display bg-white text-black border-x border-t border-b-5 border-solid border-black-10  border-b-digital-red shadow-md rs-pt-2 rs-px-2 rs-pb-3 mt-0" {...props}>
+      className="flex flex-col @3xl:flex-row w-full basefont-18 leading-display bg-white text-black border-x border-t border-b-5 border-solid border-black-10  border-b-digital-red shadow-md rs-pt-2 rs-px-2 rs-pb-3 mt-0" {...props}>
       {imageUrl &&
         <div className="flex items-center mx-auto mb-50 @3xl:ml-0 @3xl:mb-0 @3xl:mr-50">
           <div className="relative aspect-[1/1] w-[155px]">
diff --git a/src/components/node/stanford-person/list-item.tsx b/src/components/node/stanford-person/list-item.tsx
index 61caca18..67c97948 100644
--- a/src/components/node/stanford-person/list-item.tsx
+++ b/src/components/node/stanford-person/list-item.tsx
@@ -9,7 +9,7 @@ const StanfordPersonListItem = ({node, ...props}: { node: NodeStanfordPerson })
 
   return (
     <article
-      className="@container flex flex-col gap-lg w-full basefont-20 leading-display bg-white text-black" {...props}>
+      className="@container flex flex-col gap-lg w-full basefont-18 leading-display bg-white text-black" {...props}>
       {imageUrl &&
         <div
           className="relative rounded-full overflow-hidden aspect-[1/1] w-[130px] @lg:w-[215px] mx-auto">
diff --git a/src/components/node/stanford-person/vertical-card.tsx b/src/components/node/stanford-person/vertical-card.tsx
index 1f31cbb1..a4f839f6 100644
--- a/src/components/node/stanford-person/vertical-card.tsx
+++ b/src/components/node/stanford-person/vertical-card.tsx
@@ -18,7 +18,7 @@ const VerticalPersonCard = ({node, h3Heading, ...props}: Props) => {
 
   return (
     <article
-      className="@container w-full basefont-20 leading-display bg-white text-black border-x border-t-5 border-b border-solid border-black-10 border-t-digital-red shadow-md rs-pt-2 rs-px-2 rs-pb-3 mt-70" {...props}>
+      className="@container w-full basefont-18 leading-display bg-white text-black border-x border-t-5 border-b border-solid border-black-10 border-t-digital-red shadow-md rs-pt-2 rs-px-2 rs-pb-3 mt-70" {...props}>
       {imageUrl &&
         <div
           className="relative flex justify-center pb-70 @lg:pb-80">
diff --git a/src/components/paragraph/sul-contact-card/manual-fields-card.tsx b/src/components/paragraph/sul-contact-card/manual-fields-card.tsx
index ebcd49d4..f5628bed 100644
--- a/src/components/paragraph/sul-contact-card/manual-fields-card.tsx
+++ b/src/components/paragraph/sul-contact-card/manual-fields-card.tsx
@@ -26,7 +26,7 @@ const ManualFieldsCard = ({paragraph}: Props) => {
   return (
     <div className="@container">
       <div
-        className="flex w-full basefont-20 leading-display shadow-md border-0 rounded flex-col @6xl:flex-row">
+        className="flex w-full basefont-18 leading-display shadow-md border-0 rounded flex-col @6xl:flex-row">
 
         {imageUrl &&
           <div className="overflow-hidden aspect-[16/9] relative flex-shrink-0 @6xl:w-1/2">
diff --git a/src/components/paragraph/sul-contact-card/node-reference-card.tsx b/src/components/paragraph/sul-contact-card/node-reference-card.tsx
index a388c672..187ecb85 100644
--- a/src/components/paragraph/sul-contact-card/node-reference-card.tsx
+++ b/src/components/paragraph/sul-contact-card/node-reference-card.tsx
@@ -26,7 +26,7 @@ const NodeReferenceCard = ({paragraph}: Props) => {
   return (
     <div className="@container">
       <div
-        className="flex w-full basefont-20 leading-display shadow-md border-0 rounded flex-col @6xl:flex-row">
+        className="flex w-full basefont-18 leading-display shadow-md border-0 rounded flex-col @6xl:flex-row">
 
         {imageUrl &&
           <div className="overflow-hidden aspect-[16/9] relative flex-shrink-0 @6xl:w-1/2">
diff --git a/src/components/patterns/banner.tsx b/src/components/patterns/banner.tsx
index 7b2d6006..ab0ffe18 100644
--- a/src/components/patterns/banner.tsx
+++ b/src/components/patterns/banner.tsx
@@ -31,7 +31,7 @@ const Banner = ({
   const hasCardText = header || superHeader || body || link;
 
   return (
-    <div className="hero basefont-20 relative h-full mx-auto w-full lg:max-h-500" {...props}>
+    <div className="hero basefont-18 relative h-full mx-auto w-full lg:max-h-500" {...props}>
       <div
         className="w-full overflow-hidden relative max-h-500 min-h-[30rem] lg:min-h-[50rem] bg-[grey]">
         {image}
@@ -41,7 +41,7 @@ const Banner = ({
         <div
           className={`mx-auto block lg:absolute lg:top-auto lg:bottom-36 ${overlayPosition === 'right' ? 'lg:right-36' : 'lg:left-36'}`}>
           <div
-            className="card basefont-20 leading-display bg-white text-black border border-solid border-black-10 shadow relative lg:max-w-[50%]">
+            className="card basefont-18 leading-display bg-white text-black border border-solid border-black-10 shadow relative lg:max-w-[50%]">
             <Card
               header={header}
               superHeader={superHeader}
diff --git a/src/components/patterns/card.tsx b/src/components/patterns/card.tsx
index 83dffdd3..4aaf8ad6 100644
--- a/src/components/patterns/card.tsx
+++ b/src/components/patterns/card.tsx
@@ -45,7 +45,7 @@ const Card = ({
   }
   return (
     <div
-      className="card block w-full basefont-20 leading-display bg-white text-black border border-solid border-black-10 shadow-md">
+      className="card block w-full basefont-18 leading-display bg-white text-black border border-solid border-black-10 shadow-md">
 
       {(image) &&
         <div className="overflow-hidden aspect-[16/9] relative" aria-hidden="true">
diff --git a/src/components/patterns/horizontal-card.tsx b/src/components/patterns/horizontal-card.tsx
index 10c40144..a63a0948 100644
--- a/src/components/patterns/horizontal-card.tsx
+++ b/src/components/patterns/horizontal-card.tsx
@@ -69,7 +69,7 @@ const HorizontalCard = ({
       }
 
       <div
-        className="@container centered relative basefont-20 leading-display text-white mt-[77px] @6xl:mt-0 pt-[5.8rem] pb-[7.2rem] lg:px-80">
+        className="@container centered relative basefont-18 leading-display text-white mt-[77px] @6xl:mt-0 pt-[5.8rem] pb-[7.2rem] lg:px-80">
 
         <div className="grid @6xl:grid-cols-2 gap-2xl items-center">
           {(image || video) &&
@@ -101,7 +101,7 @@ const HorizontalCard = ({
             {link?.url &&
               <Link
                 href={link.url}
-                className="border-2 border-digital-red rounded-full cta-button font-semibold leading-display block w-fit no-underline hocus:underline group transition-colors px-26 pt-10 pb-11 text-16 md:text-20 text-white hocus:bg-black-true hocus:text-white rs-mt-neg1 bg-digital-red"
+                className="border-2 border-digital-red rounded-full cta-button font-semibold leading-display block w-fit no-underline hocus:underline group transition-colors px-26 pt-10 pb-11 text-16 md:text-18 text-white hocus:bg-black-true hocus:text-white rs-mt-neg1 bg-digital-red"
                 {...linkAttributes}
               >
                 {link.title}
diff --git a/src/components/patterns/link.tsx b/src/components/patterns/link.tsx
index 6c45c9bd..ce411b20 100644
--- a/src/components/patterns/link.tsx
+++ b/src/components/patterns/link.tsx
@@ -9,7 +9,7 @@ export const DrupalLinkButton = ({href, children, className = '', ...props}: Pro
     <Link
       href={href}
       {...props}
-      className={twMerge("rounded-full cta-button font-semibold leading-display block w-fit no-underline hocus:underline group transition-colors px-26 pt-10 pb-11 text-16 md:text-20 bg-digital-red hover:bg-cardinal-red-dark focus:bg-black-true active:bg-black-true text-white hocus:text-white rs-mt-neg1", className)}
+      className={twMerge("rounded-full cta-button font-semibold leading-display block w-fit no-underline hocus:underline group transition-colors px-26 pt-10 pb-11 text-16 md:text-18 bg-digital-red hover:bg-cardinal-red-dark focus:bg-black-true active:bg-black-true text-white hocus:text-white rs-mt-neg1", className)}
     >
       {children}
     </Link>
@@ -21,7 +21,7 @@ export const DrupalLinkSecondaryButton = ({href, children, className = '', ...pr
     <Link
       href={href}
       {...props}
-      className={twMerge("rounded-full cta-button font-semibold leading-display block w-fit no-underline hocus:underline border-3 border-digital-red border-solid hover:border-cardinal-red focus:border-black-true active:border-black-true group transition-colors px-26 pt-10 pb-11 text-16 md:text-20 bg-white hover:bg-cardinal-red active:bg-black-true focus:bg-black-true text-black hocus:text-white rs-mt-neg1", className)}
+      className={twMerge("rounded-full cta-button font-semibold leading-display block w-fit no-underline hocus:underline border-3 border-digital-red border-solid hover:border-cardinal-red focus:border-black-true active:border-black-true group transition-colors px-26 pt-10 pb-11 text-16 md:text-18 bg-white hover:bg-cardinal-red active:bg-black-true focus:bg-black-true text-black hocus:text-white rs-mt-neg1", className)}
     >
       {children}
     </Link>
@@ -33,7 +33,7 @@ export const DrupalLinkBigButton = ({href, children, className = '', ...props}:
     <Link
       href={href}
       {...props}
-      className={twMerge("rounded-full cta-button font-large leading-display block w-fit no-underline hocus:underline group transition-colors px-36 py-16 text-16 md:text-20 bg-digital-red hover:bg-cardinal-red-dark focus:bg-black-true active:bg-black-true text-white hocus:text-white rs-mt-neg1", className)}
+      className={twMerge("rounded-full cta-button font-large leading-display block w-fit no-underline hocus:underline group transition-colors px-36 py-16 text-16 md:text-18 bg-digital-red hover:bg-cardinal-red-dark focus:bg-black-true active:bg-black-true text-white hocus:text-white rs-mt-neg1", className)}
     >
       {children}
     </Link>
diff --git a/src/components/search/search-form.tsx b/src/components/search/search-form.tsx
index 8bdda666..066c3d9d 100644
--- a/src/components/search/search-form.tsx
+++ b/src/components/search/search-form.tsx
@@ -49,9 +49,9 @@ const SearchFormComponent = ({action = '/search', inputProps = {}, ...props}: Fo
         </div>
         <button
           type="submit"
-          className="rounded-full p-15 bg-digital-red hover:bg-cardinal-red-dark transition text-white hocus:underline"
+          className="rounded-full p-15 text-16 md:text-18 bg-digital-red hover:bg-cardinal-red-dark transition text-white hocus:underline"
         >
-          Search
+         Search
         </button>
       </form>
     </div>