cleanup(modal): clean up modal code a bit

src/components/Modal/index.tsx

@@ -87,14 +87,6 @@ const StyledDialogContent = styled(({ minHeight, maxHeight, mobile, isOpen, ...r
   }
 `
 
-const HiddenCloseButton = styled.button`
-  margin: 0;
-  padding: 0;
-  width: 0;
-  height: 0;
-  border: none;
-`
-
 interface ModalProps {
   isOpen: boolean
   onDismiss: () => void
@@ -119,7 +111,7 @@ export default function Modal({
     leave: { opacity: 0 }
   })
 
-  const [{ xy }, set] = useSpring(() => ({ xy: [0, 0] }))
+  const [{ y }, set] = useSpring(() => ({ y: 0, config: { mass: 1, tension: 210, friction: 20 } }))
   const bind = useGesture({
     onDrag: state => {
       let velocity = state.velocity
@@ -130,8 +122,7 @@ export default function Modal({
         velocity = 8
       }
       set({
-        xy: state.down ? state.movement : [0, 0],
-        config: { mass: 1, tension: 210, friction: 20 }
+        y: state.down ? state.movement[1] : 0
       })
       if (velocity > 3 && state.direction[1] > 0) {
         onDismiss()
@@ -164,18 +155,17 @@ export default function Modal({
                     <animated.div
                       {...bind()}
                       style={{
-                        transform: (xy as any).interpolate((x, y) => `translate3d(${0}px,${y > 0 ? y : 0}px,0)`)
+                        transform: y.interpolate(y => `translateY(${y > 0 ? y : 0}px)`)
                       }}
                     >
                       <StyledDialogContent
-                        ariaLabel="test"
+                        aria-label="dialog content"
                         style={props}
                         hidden={true}
                         minHeight={minHeight}
                         maxHeight={maxHeight}
-                        mobile={isMobile ?? undefined}
+                        mobile={isMobile}
                       >
-                        <HiddenCloseButton onClick={onDismiss} />
                         {children}
                       </StyledDialogContent>
                     </animated.div>
@@ -193,8 +183,13 @@ export default function Modal({
           ({ item, key, props }) =>
             item && (
               <StyledDialogOverlay key={key} style={props} onDismiss={onDismiss} initialFocusRef={initialFocusRef}>
-                <StyledDialogContent hidden={true} minHeight={minHeight} maxHeight={maxHeight} isOpen={isOpen}>
-                  <HiddenCloseButton onClick={onDismiss} />
+                <StyledDialogContent
+                  aria-label="dialog content"
+                  hidden={true}
+                  minHeight={minHeight}
+                  maxHeight={maxHeight}
+                  isOpen={isOpen}
+                >
                   {children}
                 </StyledDialogContent>
               </StyledDialogOverlay>