Change headerRef footerRef to be camelcase

components/auth/AccountModal/index.tsx

@@ -277,8 +277,8 @@ const AccountModal = React.forwardRef<HTMLDivElement, Props>(
       <Dialog open={open} onOpenChange={openChange}>
         <DialogContent
           className="Account"
-          headerref={headerRef}
+          headerRef={headerRef}
-          footerref={footerRef}
+          footerRef={footerRef}
           onOpenAutoFocus={(event: Event) => {}}
           onEscapeKeyDown={onEscapeKeyDown}
         >

components/auth/LoginModal/index.tsx

@@ -218,7 +218,7 @@ const LoginModal = (props: Props) => {
     <Dialog open={open} onOpenChange={openChange}>
       <DialogContent
         className="login"
-        footerref={footerRef}
+        footerRef={footerRef}
         onEscapeKeyDown={onEscapeKeyDown}
         onOpenAutoFocus={onOpenAutoFocus}
       >

components/auth/SignupModal/index.tsx

@@ -298,7 +298,7 @@ const SignupModal = (props: Props) => {
     <Dialog open={open} onOpenChange={openChange}>
       <DialogContent
         className="signup"
-        footerref={footerRef}
+        footerRef={footerRef}
         onEscapeKeyDown={onEscapeKeyDown}
         onOpenAutoFocus={onOpenAutoFocus}
       >

components/character/CharacterConflictModal/index.tsx

@@ -77,7 +77,7 @@ const CharacterConflictModal = (props: Props) => {
     <Dialog open={open} onOpenChange={openChange}>
       <DialogContent
         className="conflict"
-        footerref={footerRef}
+        footerRef={footerRef}
         onOpenAutoFocus={(event) => event.preventDefault()}
         onEscapeKeyDown={close}
       >

components/character/CharacterModal/index.tsx

@@ -354,8 +354,8 @@ const CharacterModal = ({
         <DialogTrigger asChild>{children}</DialogTrigger>
         <DialogContent
           className="character"
-          headerref={headerRef}
+          headerRef={headerRef}
-          footerref={footerRef}
+          footerRef={footerRef}
           onOpenAutoFocus={(event) => event.preventDefault()}
           onEscapeKeyDown={() => {}}
         >

components/common/DialogContent/index.tsx

@@ -12,15 +12,15 @@ interface Props
     HTMLDivElement
   > {
   wrapperClassName?: string
-  headerref?: React.RefObject<HTMLDivElement>
+  headerRef?: React.RefObject<HTMLDivElement>
-  footerref?: React.RefObject<HTMLDivElement>
+  footerRef?: React.RefObject<HTMLDivElement>
   scrollable?: boolean
   onEscapeKeyDown: (event: KeyboardEvent) => void
   onOpenAutoFocus: (event: Event) => void
 }
 
 const DialogContent = React.forwardRef<HTMLDivElement, Props>(function Dialog(
-  { scrollable, children, ...props },
+  { scrollable, wrapperClassName, headerRef, footerRef, children, ...props },
   forwardedRef
 ) {
   // Classes
@@ -37,12 +37,12 @@ const DialogContent = React.forwardRef<HTMLDivElement, Props>(function Dialog(
     const scrollHeight = event.currentTarget.scrollHeight
     const clientHeight = event.currentTarget.clientHeight
 
-    if (props.headerref && props.headerref.current)
+    if (headerRef && headerRef.current)
-      manipulateHeaderShadow(props.headerref.current, scrollTop)
+      manipulateHeaderShadow(headerRef.current, scrollTop)
 
-    if (props.footerref && props.footerref.current)
+    if (footerRef && footerRef.current)
       manipulateFooterShadow(
-        props.footerref.current,
+        footerRef.current,
         scrollTop,
         scrollHeight,
         clientHeight
@@ -94,7 +94,7 @@ const DialogContent = React.forwardRef<HTMLDivElement, Props>(function Dialog(
   const calculateFooterShadow = debounce(() => {
     const boxShadowBase = '0 -2px 8px'
     const scrollable = document.querySelector(`.${styles.scrollable}`)
-    const footer = props.footerref
+    const footer = footerRef
 
     if (footer && footer.current) {
       if (scrollable && scrollable.clientHeight >= scrollable.scrollHeight) {
@@ -133,9 +133,7 @@ const DialogContent = React.forwardRef<HTMLDivElement, Props>(function Dialog(
           {
             [styles.dialog]: true,
           },
-          props.wrapperClassName
+          wrapperClassName?.split(' ').map((className) => styles[className])
-            ?.split(' ')
-            .map((className) => styles[className])
         )}
       >
         <DialogPrimitive.Content

components/search/SearchModal/index.tsx

@@ -412,7 +412,7 @@ const SearchModal = (props: Props) => {
       <DialogTrigger asChild>{props.children}</DialogTrigger>
       <DialogContent
         className="search"
-        headerref={headerRef}
+        headerRef={headerRef}
         scrollable={false}
         onEscapeKeyDown={onEscapeKeyDown}
         onOpenAutoFocus={onOpenAutoFocus}

components/weapon/WeaponConflictModal/index.tsx

@@ -71,7 +71,7 @@ const WeaponConflictModal = (props: Props) => {
     <Dialog open={open} onOpenChange={openChange}>
       <DialogContent
         className="conflict"
-        footerref={footerRef}
+        footerRef={footerRef}
         onOpenAutoFocus={(event) => event.preventDefault()}
         onEscapeKeyDown={close}
       >

components/weapon/WeaponModal/index.tsx

@@ -469,8 +469,8 @@ const WeaponModal = ({
         <DialogTrigger asChild>{children}</DialogTrigger>
         <DialogContent
           className="Weapon"
-          headerref={headerRef}
+          headerRef={headerRef}
-          footerref={footerRef}
+          footerRef={footerRef}
           onOpenAutoFocus={(event) => event.preventDefault()}
           onEscapeKeyDown={onEscapeKeyDown}
         >