From 5b856aea749fbb279911931b7b8efcbe5370dca5 Mon Sep 17 00:00:00 2001
From: gofnnp <fbicha1234@gmail.com>
Date: Thu, 26 Oct 2023 23:13:40 +0400
Subject: [PATCH] fix: modal styles

---
 src/components/Modal/styles.css      | 18 ++++++++++--------
 src/components/PaymentPage/index.tsx |  8 ++++----
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/components/Modal/styles.css b/src/components/Modal/styles.css
index f58405d..95b9a49 100644
--- a/src/components/Modal/styles.css
+++ b/src/components/Modal/styles.css
@@ -1,13 +1,13 @@
 .modal {
   background: rgba(85,84,85,.8);
-  height: calc(100% + 76px);
-  left: 0;
-  margin-inline: 50%;
-  overflow: hidden;
+  height: 100vh;
   position: fixed;
-  top: -76px;
-  -webkit-transform: translate(-50%);
-  transform: translate(-50%);
+  left: 0;
+  top: 0;
+  /* margin-inline: 50%; */
+  /* overflow: scroll; */
+  /* -webkit-transform: translate(-50%);
+  transform: translate(-50%); */
   width: 100vw;
   z-index: 2000;
 }
@@ -17,11 +17,13 @@
   background: #fff;
   width: 100%;
   max-width: 375px;
+  max-height: calc(100vh - 200px);
+  overflow: scroll;
   top: 50%;
   left: 50%;
   z-index: 3;
   border-radius: 16px;
-  padding: 64px 24px;
+  padding: 64px 24px 16px;
   transform: translate(-50%,-50%);
 }
 
diff --git a/src/components/PaymentPage/index.tsx b/src/components/PaymentPage/index.tsx
index 97e1e10..c3f40e1 100644
--- a/src/components/PaymentPage/index.tsx
+++ b/src/components/PaymentPage/index.tsx
@@ -11,7 +11,7 @@ import {
   GooglePayBanner,
   // GooglePayButton,
   // CardButton,
-  CardModal,
+  // CardModal,
 } from "./methods";
 import ErrorModal from "./ErrorModal";
 import UserHeader from "../UserHeader";
@@ -26,7 +26,7 @@ import { StripeButton, StripeModal } from "./methods/Stripe";
 function PaymentPage(): JSX.Element {
   const { t } = useTranslation();
   const { applePay } = usePayment();
-  const [openCardModal, setOpenCardModal] = useState(false);
+  // const [openCardModal, setOpenCardModal] = useState(false);
   const [openStripeModal, setOpenStripeModal] = useState(false);
   const [openErrorModal, setOpenErrorModal] = useState(false);
   const dispatch = useDispatch();
@@ -83,12 +83,12 @@ function PaymentPage(): JSX.Element {
                 ),
               })}
             </p>
-            <CardModal
+            {/* <CardModal
               open={openCardModal}
               onClose={() => setOpenCardModal(false)}
               onSuccess={onSuccess}
               onError={onError}
-            />
+            /> */}
             <StripeModal
               open={openStripeModal}
               onClose={() => setOpenStripeModal(false)}