Modification(frontend): Modified the pages so that all the items shou…

…ld be aligned
Motouom · Jun 13, 2024 · c34f940 · c34f940
1 parent d3e5d6f
commit c34f940
Show file tree

Hide file tree

Showing 10 changed files with 28 additions and 37 deletions.
diff --git a/power-pay-frontend/dev-dist/sw.js b/power-pay-frontend/dev-dist/sw.js
@@ -82,7 +82,7 @@ define(['./workbox-b5f7729d'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "index.html",
-    "revision": "0.ikm1g2neomg"
+    "revision": "0.238rr2rpmug"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

diff --git a/power-pay-frontend/index.html b/power-pay-frontend/index.html
@@ -7,7 +7,7 @@
   <link rel="icon" href="/favicon.svg" type="image/svg+xml">
   <link rel="manifest" href="/manifest.json">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title></title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/power-pay-frontend/src/components/AccountBalance.tsx b/power-pay-frontend/src/components/AccountBalance.tsx
@@ -18,7 +18,7 @@ import { useNavigate } from 'react-router-dom';
             </div>
           </div>
           <div className="pt-12">
-            <button className="rounded-full bg-blue-950 hover:bg-blue-900 w-80 m-auto px-4 py-2 text-white text-lg absolute  inset-x-0 bottom-12" 
+            <button className="rounded-full w-80 m-auto px-4 py-2 text-white bg-blue-950 text-lg absolute inset-x-0 bottom-6" 
             onClick={handleOkClick}
             >
               OK

diff --git a/power-pay-frontend/src/components/Home.tsx b/power-pay-frontend/src/components/Home.tsx
@@ -12,30 +12,21 @@ const Home: React.FC = () => {
         navigate('/payment');
     };
 
-    useEffect(() => {
-        // Prevent scrolling on mount
-        document.body.style.overflow = 'hidden';
-        // Re-enable scrolling when component unmounts
-        return () => {
-            document.body.style.overflow = 'auto';
-        };
-    }, []);
+
 
     return (
-        <div className="flex flex-col items-center justify-center h-screen overflow-hidden">
-            <div className="rounded-full object-cover h-[100px] w-[300px] pt-0 pb-12 w-32 mb-8">
-                <img src={Logo} alt="Logo" />
-            </div>
-            <div className="w-80 m-auto">
-                <p className="pt-0 text-gray-700">Send money far and wide with ease.</p>
+        <div className="flex justify-center items-center  mb-34 bg-800 text-black text-sm">
+            <div className="w-80 m-auto px-4 py-2  text-lg absolute  inset-x-0 top-12">
+                <img src={Logo}  alt="Logo" />
+                <p className="text-sm text-center text-black pb-4">Send money far and wide with ease.</p>
             </div>
             <div className="pt-12 w-80 m-auto">
-                <button className="rounded-full w-full px-4 py-2 my-4 text-white bg-blue-950 hover:border-blue-950 text-lg"
+                <button className="rounded-full w-80 m-auto px-4 py-2 text-white bg-blue-950 text-lg absolute inset-x-0 bottom-20"
                     onClick={handleSendMoneyClick}>
                     Send Money
                 </button>
                 <button
-                    className="rounded-full w-full px-4 py-2 text-white bg-blue-950 text-lg"
+                    className="rounded-full w-80 m-auto px-4 py-2 text-white bg-blue-950 text-lg absolute inset-x-0 bottom-6"
                     onClick={handleCheckBalanceClick}>
                     Check Balance
                 </button>

diff --git a/power-pay-frontend/src/components/PinInput_Balance.tsx b/power-pay-frontend/src/components/PinInput_Balance.tsx
@@ -36,13 +36,13 @@ const PinInput_For_Balance: React.FC = () => {
         </div>
         <div className="pt-12">
           <button
-            className="rounded-full w-80 m-auto px-4 py-2 my-16 text-white bg-red-600 hover:border-red-950 text-lg absolute inset-x-0 bottom-12"
+            className="rounded-full w-80 m-auto px-4 py-2 text-white bg-red-600 text-lg absolute inset-x-0 bottom-20"
             onClick={handleCancelClick}
           >
             Cancel
           </button>
           <button
-            className="rounded-full w-80 m-auto px-4 py-2 text-white bg-blue-950 text-lg absolute inset-x-0 bottom-12"
+            className="rounded-full w-80 m-auto px-4 py-2 text-white bg-blue-950 text-lg absolute inset-x-0 bottom-6"
             onClick={handleConfirmClick}
           >
             Confirm

diff --git a/power-pay-frontend/src/components/RecipientInfo.tsx b/power-pay-frontend/src/components/RecipientInfo.tsx
@@ -69,12 +69,12 @@ const RecipientInfo: React.FC = () => {
                     </div>
                 </div>
                 <div className="pt-12">
-                    <button className="rounded-full w-80 m-auto px-4 py-2 my-16 text-white bg-red-600 hover:border-red-950 text-lg absolute  inset-x-0 bottom-12"
+                    <button className="rounded-full w-80 m-auto px-4 py-2 text-white bg-red-600 text-lg absolute inset-x-0 bottom-20"
                     onClick={handleCancelClick}
                     >
                         Cancel
                     </button>
-                    <button className="rounded-full w-80 m-auto px-4 py-2 text-white bg-blue-950  text-lg absolute  inset-x-0 bottom-12"
+                    <button className="rounded-full w-80 m-auto px-4 py-2 text-white bg-blue-950 text-lg absolute inset-x-0 bottom-6"
                     onClick={handleConfirmClick}
                     >
                         Confirm

diff --git a/power-pay-frontend/src/components/SendMoneyConfirmation.tsx b/power-pay-frontend/src/components/SendMoneyConfirmation.tsx
@@ -24,12 +24,12 @@ interface SendMoneyConfirmationProps {
         <div className="">
           <div className="rounded-lg w-80 m-auto px-4 py-2  text-lg absolute  inset-x-0 top-12 bg-gray-100">
             <div>
-              <h1 className="text-2xl font-bold pb-10">Confirmation Alert!</h1>
-              <p className="text-md">{successMessage}</p>
+              <h1 className="text-bold text-2xl text-center pb-5">Confirmation Alert!</h1>
+              <p className="text-sm text-center text-black-400 pb-4">{successMessage}</p>
             </div>
           </div>
           <div className="pt-12">
-            <button className="rounded-full bg-blue-950 hover:bg-blue-900 w-80 m-auto px-4 py-2 text-white text-lg absolute  inset-x-0 bottom-12" 
+            <button className="rounded-full w-80 m-auto px-4 py-2 text-white bg-blue-950 text-lg absolute inset-x-0 bottom-6" 
             onClick={handleOkClick}>
               OK
             </button>

diff --git a/power-pay-frontend/src/components/paymentoption.tsx b/power-pay-frontend/src/components/paymentoption.tsx
@@ -12,15 +12,15 @@ const PaymentOptions: React.FC = () => {
     };
   return ( 
     <div className="container">
-      <div className="absolute inset-x-6 top-12 h-40 rounded-lg">
-        <h5 className="h-auto text-center pt-9 mb-2 text-2xl font-bold tracking-tight text-black">Payment Option.</h5>
-        <h5 className="text-center pt-9 mb-2 text-black">Choose the option you wish to pay</h5>
+      <div className="rounded-lg w-80 m-auto px-4 py-2  text-lg absolute  inset-x-0 top-12 bg-gray-100">
+        <h5 className="text-bold text-2xl text-black text-center pb-5">Payment Option.</h5>
+        <h5 className="text-sm text-center text-black pb-4">Choose the option you wish to pay</h5>
       </div>
       <div className="pt-12">
-          <button onClick={handleManuallyClick} className='bg-blue-950 rounded-full w-80 m-auto px-4  text-white text-lg absolute  inset-x-0 mb-20 bottom-12'>Input Manually</button>
+          <button onClick={handleManuallyClick} className='rounded-full w-80 m-auto px-4 py-2 text-white bg-blue-950 text-lg absolute inset-x-0 bottom-20'>Input Manually</button>
           <br></br>
         <div className="pt-12">
-          <button onClick={handleQRscanClick} className="bg-blue-950 rounded-full w-80 m-auto px-4  text-white text-lg absolute  inset-x-0 bottom-12"
+          <button onClick={handleQRscanClick} className="rounded-full w-80 m-auto px-4 py-2 text-white bg-blue-950 text-lg absolute inset-x-0 bottom-6"
            type='button'>
             QR Scan
           </button>

diff --git a/power-pay-frontend/src/components/pinInput.tsx b/power-pay-frontend/src/components/pinInput.tsx
@@ -16,9 +16,9 @@ const PinInput: React.FC = () => {
   return (
     <div className="flex justify-center items-center  mb-34  bg-800 text-black text-sm">
       <div className="">
-        <div className="flex rounded-lg w-80 m-auto px-4 py-2  text-lg absolute  inset-x-0 top-4 bg-gray-100">
+        <div className="rounded-lg w-80 m-auto px-4 py-2  text-lg absolute  inset-x-0 top-12 bg-gray-100">
           <div>
-            <h1 className="text-lg text-center text-red-400 pb-5">Notice!!!</h1>
+            <h1 className="text-bold text-2xl text-center pb-5">Notice!!!</h1>
             <p className="text-sm text-center text-black-400 pb-4">By entering you PIN below, you confirm that the sum of of FCFA100.50  be sent to Mr Stephane</p>
           </div>
         </div>
@@ -42,12 +42,12 @@ const PinInput: React.FC = () => {
           </form>
         </div>
         <div className="pt-12">
-          <button className="rounded-full w-80 m-auto px-4 py-2 my-16 text-white bg-red-600 hover:border-red-950 text-lg absolute  inset-x-0 bottom-12"
+          <button className="rounded-full w-80 m-auto px-4 py-2 text-white bg-red-600 text-lg absolute inset-x-0 bottom-20"
           onClick={handleCancelClick}
           >
             Cancel
           </button>
-          <button className="rounded-full w-80 m-auto px-4 py-2 text-white bg-blue-950  text-lg absolute  inset-x-0 bottom-12"
+          <button className="rounded-full w-80 m-auto px-4 py-2 text-white bg-blue-950 text-lg absolute inset-x-0 bottom-6"
           onClick={handleConfirmClick}
           >
             Confirm

diff --git a/power-pay-frontend/src/components/scan_rq.tsx b/power-pay-frontend/src/components/scan_rq.tsx
@@ -45,12 +45,12 @@ const QRScannerComponent  = () => {
         />
       </div>
       <div className="pt-12">
-      <button className="rounded-full w-80 m-auto px-4 py-2 my-16 text-white bg-red-600 hover:border-red-950 text-lg absolute  inset-x-0 bottom-12"
+      <button className="rounded-full w-80 m-auto px-4 py-2 text-white bg-red-600 text-lg absolute inset-x-0 bottom-20"
           onClick={handleCancelClick }
           >
             Cancel
           </button>
-        <button onClick={() => qrScannerRef.current?.start()} className="rounded-full w-80 m-auto px-4 py-2 text-white bg-blue-950  text-lg absolute  inset-x-0 bottom-12">Start Scan</button>
+        <button onClick={() => qrScannerRef.current?.start()} className="rounded-full w-80 m-auto px-4 py-2 text-white bg-blue-950 text-lg absolute inset-x-0 bottom-6">Start Scan</button>
       </div>
     </div>
   );