remove padding from bottom sheet

CrocSwap · Oct 9, 2024 · 4386190 · 4386190
1 parent 826249d
commit 4386190
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 7 deletions.
diff --git a/src/App/App.tsx b/src/App/App.tsx
@@ -29,6 +29,7 @@ import Navbar from '../components/Futa/Navbar/Navbar';
 import Footer from '../components/Futa/Footer/Footer';
 import { useModal } from '../components/Global/Modal/useModal';
 import CSSModal from '../pages/common/CSSDebug/CSSModal';
+import { useBottomSheet } from '../contexts/BottomSheetContext';
 
 /** ***** React Function *******/
 export default function App() {
@@ -52,6 +53,9 @@ export default function App() {
         sidebar: { toggle: toggleSidebar },
     } = useContext(SidebarContext);
 
+    const {  isBottomSheetOpen } =
+    useBottomSheet();
+
     const containerStyle = currentLocation.includes('trade')
         ? 'content-container-trade'
         : 'content-container';
@@ -137,6 +141,12 @@ export default function App() {
         };
     }, [isCSSModalOpen]);
 
+    const footerDisplay = platformName === 'futa' ? (
+        <Footer data-theme={skin.active} />
+    ) : (
+        ambientFooter
+    )
+
     return (
         <>
             {location.pathname == '/' && platformName !== 'futa' && (
@@ -168,11 +178,7 @@ export default function App() {
                 )}
                 <RouteRenderer platformName={platformName} />
             </FlexContainer>
-            {platformName === 'futa' ? (
-                <Footer data-theme={skin.active} />
-            ) : (
-                ambientFooter
-            )}
+            {!isBottomSheetOpen && footerDisplay}
             <GlobalPopup data-theme={skin.active} />
             <SnackbarComponent />
             {isWalletModalOpen && <GateWalletModal />}

diff --git a/src/components/Global/DropdownMenu2/DropdownMenu2.tsx b/src/components/Global/DropdownMenu2/DropdownMenu2.tsx
@@ -7,7 +7,6 @@ import { AppStateContext } from '../../../contexts/AppStateContext';
 import useKeyPress from '../../../App/hooks/useKeyPress';
 import { brand } from '../../../ambient-utils/constants';
 import Modal from '../Modal/Modal';
-import ModalHeader from '../ModalHeader/ModalHeader';
 import styles from './DropdownMenu2.module.css'
 import { motion } from 'framer-motion';
 // Interface for React functional components

diff --git a/src/components/Global/Modal/Modal.module.css b/src/components/Global/Modal/Modal.module.css
@@ -102,7 +102,7 @@
     left: 0;
     right: 0;
     bottom: 0;
-    padding-bottom: 56px;
+    /* padding-bottom: 56px; */
     border-top-left-radius: 16px;
     border-top-right-radius: 16px;
     box-shadow: 0px -2px 8px rgba(0, 0, 0, 0.15);
@@ -115,6 +115,10 @@
     transition:
         height 0.3s ease,
         backdrop-filter 0.3s ease;
+
+        max-height: 70sdh;
+        overflow-y: auto;
+
 }
 
 /* Drag handle for bottom sheet */