update to outline button style

SU-SWS · Dec 11, 2024 · 73bf51f · 73bf51f
1 parent e927eb4
commit 73bf51f
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 13 deletions.
diff --git a/src/components/paragraph/stanford-accordion.tsx b/src/components/paragraph/stanford-accordion.tsx
@@ -1,4 +1,4 @@
-import {HtmlHTMLAttributes} from "react"
+import {ElementType, HtmlHTMLAttributes} from "react"
 import {ParagraphStanfordFaq} from "@/lib/gql/__generated__/drupal.d"
 import {twMerge} from "tailwind-merge"
 import formatHtml from "@/lib/format-html"
@@ -12,38 +12,36 @@ type Props = HtmlHTMLAttributes<HTMLDivElement> & {
 
 const StanfordAccordionParagraph = ({paragraph, ...props}: Props) => {
   const behaviors = getParagraphBehaviors(paragraph)
-  const headerTag = behaviors.faq_accordions?.heading || "h2"
+  const Heading: ElementType = behaviors.faq_accordions?.heading || "h2"
 
   const heading = paragraph.suFaqHeadline
 
   let accordionHeadingLevel: AccordionHeaderChoice = "h2"
   if (heading) {
-    if (headerTag === "h2") accordionHeadingLevel = "h3"
-    if (headerTag === "h3") accordionHeadingLevel = "h4"
-    if (headerTag === "h4") accordionHeadingLevel = "h5"
+    if (Heading === "h2") accordionHeadingLevel = "h3"
+    if (Heading === "h3") accordionHeadingLevel = "h4"
+    if (Heading === "h4") accordionHeadingLevel = "h5"
   }
 
   return (
     <div {...props} className={twMerge("space-y-20", props.className)}>
-      <div className="flex flex-col items-center justify-between gap-20 @3xl:flex-row">
+      <div className="flex flex-col items-center justify-between gap-20 md:flex-row">
         {paragraph.suFaqHeadline && (
-          <h2 id={paragraph.id} className="text-center">
+          <Heading id={paragraph.id} className="text-center">
             {paragraph.suFaqHeadline}
-          </h2>
+          </Heading>
         )}
         <ExpandCollapseAll className="ml-auto" />
       </div>
 
       {paragraph.suFaqDescription && (
-        <div className="wysiwyg centered relative mb-20 lg:max-w-[980px]">
-          {formatHtml(paragraph.suFaqDescription.processed)}
-        </div>
+        <div className="wysiwyg centered relative mb-20">{formatHtml(paragraph.suFaqDescription.processed)}</div>
       )}
 
       {paragraph.suFaqQuestions?.map(question => (
         <Accordion
           className="border-t border-black-40 last:border-b"
-          buttonProps={{className: "mt-6"}}
+          buttonProps={{className: "mt-15"}}
           key={question.id}
           button={question.suAccordionTitle}
           headingLevel={accordionHeadingLevel}

diff --git a/src/components/patterns/elements/expand-collapse-all.tsx b/src/components/patterns/elements/expand-collapse-all.tsx
@@ -30,7 +30,7 @@ const ExpandCollapseAll = ({...props}: Props) => {
       onClick={toggle}
       {...props}
       className={twMerge(
-        "cta-button group rs-mt-neg1 flex w-fit items-center gap-5 whitespace-nowrap rounded-full bg-digital-red px-26 pb-11 pt-10 text-16 font-semibold leading-display text-white no-underline transition-colors hover:bg-cardinal-red-dark focus:bg-black-true active:bg-black-true hocus:text-white hocus:underline md:text-18",
+        "cta-button group rs-mt-neg1 flex w-fit items-center gap-5 whitespace-nowrap rounded-full border-2 border-digital-red px-26 pb-11 pt-10 text-16 font-semibold leading-display text-digital-red no-underline transition-colors hocus:bg-cardinal-red hocus:text-white hocus:underline md:text-18",
         props.className
       )}
     >