feat: fixed modal positioning on mobile & updated theming (#5790)

* feat: fixed modal positioning on mobile & updated theming

* fix: undid spacing change

src/components/Modal/index.tsx

@@ -17,6 +17,9 @@ const StyledDialogOverlay = styled(AnimatedDialogOverlay)<{ $scrollOverlay?: boo
 
     display: flex;
     align-items: center;
+    @media screen and (max-width: ${({ theme }) => theme.breakpoint.sm}px) {
+      align-items: flex-end;
+    }
     overflow-y: ${({ $scrollOverlay }) => $scrollOverlay && 'scroll'};
     justify-content: center;
 
@@ -27,7 +30,6 @@ const StyledDialogOverlay = styled(AnimatedDialogOverlay)<{ $scrollOverlay?: boo
 type StyledDialogProps = {
   $minHeight?: number | false
   $maxHeight?: number
-  $isBottomSheet?: boolean
   $scrollOverlay?: boolean
   $hideBorder?: boolean
   $maxWidth: number
@@ -40,14 +42,12 @@ const StyledDialogContent = styled(AnimatedDialogContent)<StyledDialogProps>`
   &[data-reach-dialog-content] {
     margin: auto;
     background-color: ${({ theme }) => theme.backgroundSurface};
-    border: ${({ theme, $hideBorder }) => !$hideBorder && `1px solid ${theme.deprecated_bg1}`};
+    border: ${({ theme, $hideBorder }) => !$hideBorder && `1px solid ${theme.backgroundOutline}`};
     box-shadow: ${({ theme }) => theme.deepShadow};
     padding: 0px;
     width: 50vw;
     overflow-y: auto;
     overflow-x: hidden;
-
-    align-self: ${({ $isBottomSheet }) => $isBottomSheet && 'flex-end'};
     max-width: ${({ $maxWidth }) => $maxWidth}px;
     ${({ $maxHeight }) =>
       $maxHeight &&
@@ -61,22 +61,17 @@ const StyledDialogContent = styled(AnimatedDialogContent)<StyledDialogProps>`
       `}
     display: ${({ $scrollOverlay }) => ($scrollOverlay ? 'inline-table' : 'flex')};
     border-radius: 20px;
-    ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
+
+    @media screen and (max-width: ${({ theme }) => theme.breakpoint.md}px) {
       width: 65vw;
-      margin: auto;
-    `}
-    ${({ theme, $isBottomSheet }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
-      width:  85vw;
-      ${
-        $isBottomSheet &&
-        css`
-          width: 100vw;
-          border-radius: 20px;
-          border-bottom-left-radius: 0;
-          border-bottom-right-radius: 0;
-        `
-      }
-    `}
+    }
+    @media screen and (max-width: ${({ theme }) => theme.breakpoint.sm}px) {
+      margin: 0;
+      width: 100vw;
+      border-radius: 20px;
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
   }
 `
 
@@ -91,7 +86,6 @@ interface ModalProps {
   children?: React.ReactNode
   $scrollOverlay?: boolean
   hideBorder?: boolean
-  isBottomSheet?: boolean
 }
 
 export default function Modal({
@@ -104,7 +98,6 @@ export default function Modal({
   children,
   onSwipe = onDismiss,
   $scrollOverlay,
-  isBottomSheet = isMobile,
   hideBorder = false,
 }: ModalProps) {
   const fadeTransition = useTransition(isOpen, {
@@ -148,7 +141,6 @@ export default function Modal({
                 aria-label="dialog"
                 $minHeight={minHeight}
                 $maxHeight={maxHeight}
-                $isBottomSheet={isBottomSheet}
                 $scrollOverlay={$scrollOverlay}
                 $hideBorder={hideBorder}
                 $maxWidth={maxWidth}