From 7e7537bbd909649a97e33f90264d4fea7a87fdc7 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Sat, 7 May 2022 11:56:24 +0300
Subject: [PATCH] ally: vote card

---
 src/App.tsx                                   |  2 +-
 .../ModalsContainer/ModalsContainer.tsx       | 15 ++++++++++----
 .../pages/ProjectPage/VoteCard/VoteCard.tsx   | 20 +++++++++++++------
 src/styles/index.scss                         |  5 +----
 src/styles/scrollbar.scss                     |  2 +-
 5 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 5682034..bb396a5 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -39,7 +39,7 @@ function App() {
 
 
 
-  return <div id="app" className='w-screen overflow-hidden'>
+  return <div id="app" className='w-full overflow-hidden'>
     <Navbar />
     <Suspense fallback={<LoadingPage />}>
       <Routes>
diff --git a/src/Components/Modals/ModalsContainer/ModalsContainer.tsx b/src/Components/Modals/ModalsContainer/ModalsContainer.tsx
index 0186017..b439c66 100644
--- a/src/Components/Modals/ModalsContainer/ModalsContainer.tsx
+++ b/src/Components/Modals/ModalsContainer/ModalsContainer.tsx
@@ -50,10 +50,17 @@ export default function ModalsContainer() {
     }
 
     useEffect(() => {
-        if (isOpen)
-            document.body.style.overflowY = "hidden";
-        else
-            document.body.style.overflowY = "initial";
+        if (isOpen) {
+            const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+            document.documentElement.style.overflow = 'hidden';
+            if (scrollbarWidth) {
+                document.documentElement.style.paddingRight = `${scrollbarWidth}px`;
+            }
+        }
+        else {
+            document.documentElement.style.overflow = "";
+            document.documentElement.style.paddingRight = "";
+        }
     }, [isOpen]);
 
     return (
diff --git a/src/features/Projects/pages/ProjectPage/VoteCard/VoteCard.tsx b/src/features/Projects/pages/ProjectPage/VoteCard/VoteCard.tsx
index 10ca7af..70c91d4 100644
--- a/src/features/Projects/pages/ProjectPage/VoteCard/VoteCard.tsx
+++ b/src/features/Projects/pages/ProjectPage/VoteCard/VoteCard.tsx
@@ -1,5 +1,5 @@
 import { motion } from 'framer-motion'
-import React, { useState } from 'react';
+import React, { FormEvent, useState } from 'react';
 import { AiFillThunderbolt } from 'react-icons/ai'
 import { IoClose } from 'react-icons/io5'
 import { ModalCard, modalCardVariants } from 'src/Components/Modals/ModalsContainer/ModalsContainer';
@@ -97,7 +97,8 @@ export default function VoteCard({ onClose, direction, projectId, initVotes, ...
         setVoteAmount(defaultOptions[idx].value);
     }
 
-    const requestPayment = () => {
+    const requestPayment = (e: FormEvent) => {
+        e.preventDefault();
         setPaymentStatus(PaymentStatus.FETCHING_PAYMENT_DETAILS);
         vote({ variables: { "amountInSat": voteAmount, "projectId": projectId! } });
     }
@@ -113,7 +114,7 @@ export default function VoteCard({ onClose, direction, projectId, initVotes, ...
         >
             <IoClose className='absolute text-body2 top-24 right-24 hover:cursor-pointer' onClick={onClose} />
             <h2 className='text-h5 font-bold'>Vote for this Project</h2>
-            <div className="mt-32 ">
+            <form onSubmit={requestPayment} className="mt-32 ">
                 <label className="block text-gray-700 text-body4 mb-2 ">
                     Enter Amount
                 </label>
@@ -122,7 +123,9 @@ export default function VoteCard({ onClose, direction, projectId, initVotes, ...
                         className={` input-text input-removed-arrows`}
                         value={voteAmount} onChange={onChangeInput}
                         type="number"
-                        placeholder="e.g 5 sats" />
+                        placeholder="e.g 5 sats"
+                        autoFocus
+                    />
                     <p className='px-16 shrink-0 self-center text-primary-400'>
                         Sats
                     </p>
@@ -130,6 +133,7 @@ export default function VoteCard({ onClose, direction, projectId, initVotes, ...
                 <div className="flex mt-16 justify-between">
                     {defaultOptions.map((option, idx) =>
                         <button
+                            type='button'
                             key={idx}
                             className={`btn border px-12 rounded-md py-8 text-body ${idx === selectedOption && "border-primary-500 bg-primary-100 hover:bg-primary-100 text-primary-600"}`}
                             onClick={() => onSelectOption(idx)}
@@ -145,10 +149,14 @@ export default function VoteCard({ onClose, direction, projectId, initVotes, ...
                 {paymentStatus === PaymentStatus.PAID && <p className="text-body6 mt-12 text-green-500">The invoice was paid! Please wait while we confirm it.</p>}
                 {paymentStatus === PaymentStatus.AWAITING_PAYMENT && <p className="text-body6 mt-12 text-yellow-500">Waiting for your payment...</p>}
                 {paymentStatus === PaymentStatus.PAYMENT_CONFIRMED && <p className="text-body6 mt-12 text-green-500">Thanks for your vote</p>}
-                <button className="btn btn-primary w-full mt-32" disabled={paymentStatus !== PaymentStatus.DEFAULT && paymentStatus !== PaymentStatus.NOT_PAID} onClick={requestPayment}>
+                <button
+                    type='submit'
+                    className="btn btn-primary w-full mt-32"
+                    disabled={paymentStatus !== PaymentStatus.DEFAULT && paymentStatus !== PaymentStatus.NOT_PAID}
+                >
                     {paymentStatus === PaymentStatus.DEFAULT || paymentStatus === PaymentStatus.NOT_PAID ? "Vote" : "Voting..."}
                 </button>
-            </div>
+            </form>
             {paymentStatus === PaymentStatus.PAYMENT_CONFIRMED && <Confetti width={width} height={height} />}
         </motion.div>
     )
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 99d0019..d5fec55 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -2,10 +2,7 @@
 @import './tw.scss',"./shared.scss",'./vendors.scss','./scrollbar.scss';
 
 
-
-html{
-  width: 100vw;
-}
+ 
 
 body {
   overflow-x: hidden;
diff --git a/src/styles/scrollbar.scss b/src/styles/scrollbar.scss
index 8b27405..c54df2f 100644
--- a/src/styles/scrollbar.scss
+++ b/src/styles/scrollbar.scss
@@ -7,7 +7,7 @@
 
     /* width */
     ::-webkit-scrollbar {
-        width: 10px;
+        width: 12px;
     }
 }