Change close button border to red; clean up

SU-SWS · Dec 10, 2024 · 48d6a79 · 48d6a79
1 parent a49fa1f
commit 48d6a79
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 42 deletions.
diff --git a/components/AnnotatedImage/AnnotatedImage.styles.ts b/components/AnnotatedImage/AnnotatedImage.styles.ts
@@ -1,4 +1,4 @@
-export const root = 'relative self-start';
+export const root = 'relative self-start annotated-image';
 export const imageWrapper = 'relative @container';
 export const ul = 'list-unstyled';
 export const li = 'mb-0';
diff --git a/components/ChangemakerCard/ChangemakerCard.styles.ts b/components/ChangemakerCard/ChangemakerCard.styles.ts
@@ -6,7 +6,7 @@ import { cnb } from 'cnbuilder';
  * It caused a weird bug when you have the dialog open and click around sometimes
  * it will bring the body content under the dialog overlay to the front even though it is not focusable.
  */
-export const root = (isHorizontal: boolean) => cnb('relative w-full mx-auto break-words max-w-[29rem]', {
+export const root = (isHorizontal: boolean) => cnb('relative w-full mx-auto break-words max-w-[29rem] bg-black', {
   'sm:max-w-300 lg:max-w-[35rem]': !isHorizontal,
   'sm:max-w-550 md:max-w-600 xl:max-w-1000 2xl:max-w-1200': isHorizontal,
 });
@@ -30,28 +30,22 @@ export const heading = (isHorizontal: boolean) => cnb('mb-02em mt-auto text-30 w
 });
 export const subhead = 'text-19 md:text-21 xl:max-w-prose mx-auto whitespace-pre-line';
 
-export const cardContent = (isHorizontal: boolean) => cnb('hidden sm:block absolute size-full top-0 left-0 aria-hidden:opacity-0 opacity-100 backdrop-blur-sm transition-opacity duration-500 bg-gradient-to-b from-gc-black/60 to-gc-black/90 *:*:*:!mb-1em', {
-  'px-20 py-30 pb-120 3xl:pt-48 3xl:px-36' : !isHorizontal,
-  'rs-pt-3 rs-px-3 pb-150': isHorizontal,
-});
-export const contentWrapper = (isHorizontal: boolean) => isHorizontal && 'xl:columns-2 gap-x-38 xl:first:*:*:*:mt-0';
-
 export const button = 'group absolute size-full top-0 left-0';
 export const icon = (isHorizontal: boolean) => cnb('absolute bottom-40 right-36 text-white size-65 border-2 border-white rounded-full p-16 group-hocus-visible:border-dashed group-aria-expanded:rotate-45 transition-transform group-hocus-visible:bg-gc-black/80 transition-color', {
   'md:bottom-58 2xl:bottom-61 md:right-45': isHorizontal,
 });
 
 // Modal styles
 export const dialog = 'relative z-[100]';
-export const srOnly = 'sr-only';
 export const dialogOverlay = 'fixed inset-0 bg-gc-black/60 backdrop-blur-lg w-screen';
 export const dialogWrapper = 'fixed inset-0 sm:py-30 w-screen overflow-y-auto overscroll-contain overflow-x-hidden';
 export const dialogPanel = 'relative sm:cc flex w-screen min-h-screen inset-0 break-words justify-center items-start sm:items-center';
 export const dialogContentWrapper = 'relative flex flex-col items-center justify-center max-w-prose-wide text-white bg-black-true/60';
 
-export const modalClose = 'block ml-auto rs-mb-4 mr-20 mt-20 p-9 border-2 border-white rounded-full hocus-visible:border-dashed hocus-visible:rotate-90 transition-transform';
+export const modalClose = 'block ml-auto rs-mb-4 mr-20 mt-20 p-9 border-2 border-digital-red-xlight rounded-full hocus-visible:border-dashed hocus-visible:border-white hocus-visible:rotate-90 transition-transform';
 export const modalIcon = 'text-white size-26';
 export const modalTextWrapper = 'rs-pr-4 rs-pb-6 w-[75ch] max-w-[100vw] md:max-w-full';
 export const modalHeader = 'rs-mb-3 border-l-[1.2rem] md:border-l-[1.8rem] border-digital-red-light';
 export const modalHeading = 'mb-02em leading-tight ml-22 md:ml-40 2xl:ml-43 type-3 font-serif';
 export const modalSubhead = 'ml-22 md:ml-40 2xl:ml-43';
+export const nestedBloksWrapper = 'rs-pl-4';
diff --git a/components/ChangemakerCard/ChangemakerCard.tsx b/components/ChangemakerCard/ChangemakerCard.tsx
@@ -1,15 +1,14 @@
 'use client';
 import { cnb } from 'cnbuilder';
-import { useId, useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import {
   Description, Dialog, DialogPanel, DialogTitle, Transition, TransitionChild,
 } from '@headlessui/react';
-import { useOnClickOutside, useToggle } from 'usehooks-ts';
+import { useOnClickOutside } from 'usehooks-ts';
 import { AnimateInView, type AnimationType } from '@/components/Animate';
 import { Heading, type HeadingType, Text } from '@/components/Typography';
 import { FlexBox } from '@/components/FlexBox';
 import { HeroIcon } from '@/components/HeroIcon';
-import useEscape from '@/hooks/useEscape';
 import { getProcessedImage } from '@/utilities/getProcessedImage';
 import * as styles from './ChangemakerCard.styles';
 
@@ -111,17 +110,15 @@ export const ChangemakerCard = ({
                 </div>
               )}
               <FlexBox direction="col" className={styles.info(isHorizontal)}>
-                {heading && (
-                  <Heading
-                    as={headingLevel || 'h3'}
-                    leading="tight"
-                    align="center"
-                    color="white"
-                    className={styles.heading(isHorizontal)}
-                  >
-                    {heading}
-                  </Heading>
-                )}
+                <Heading
+                  as={headingLevel || 'h3'}
+                  leading="tight"
+                  align="center"
+                  color="white"
+                  className={styles.heading(isHorizontal)}
+                >
+                  {heading}
+                </Heading>
                 {subheading && (
                   <Text align="center" leading="display" color="white" className={styles.subhead}>{subheading}</Text>
                 )}
@@ -184,25 +181,13 @@ export const ChangemakerCard = ({
                     />
                   </button>
                   <div className={styles.modalTextWrapper}>
-                    {(heading || subheading) && (
-                      <div className={styles.modalHeader}>
-                        {heading &&
-                          <DialogTitle className={styles.modalHeading}>
-                            {heading}
-                          </DialogTitle>
-                        }
-                        {subheading &&
-                          <Description>
-                            <Text weight="semibold" variant="big" leading="tight" className={styles.modalSubhead}>
-                              {subheading}
-                            </Text>
-                          </Description>
-                        }
-                      </div>
-                    )}
-                    <div className="rs-pl-4">
-                      {children}
+                    <div className={styles.modalHeader}>
+                      <DialogTitle className={styles.modalHeading}>{heading}</DialogTitle>
+                      {subheading &&
+                        <Description className={styles.modalSubhead}>{subheading}</Description>
+                      }
                     </div>
+                    <div className={styles.nestedBloksWrapper}>{children}</div>
                   </div>
                 </div>
               </DialogPanel>