Updated form to use material UI

package.json

@@ -3,6 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.14.18",
+    "@mui/lab": "^5.0.0-alpha.153",
+    "@mui/material": "^5.14.18",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

src/App.js

@@ -22,9 +22,6 @@ function App() {
         </div>
         <div className='p-5'>
           <div className='offset-md-2 col-md-8'>
-            <header className='mb-4'>
-              <h3 className='text-center'>Payment Details</h3>
-            </header>
             <TelepayForm />
           </div>
         </div>

src/component/Pay.css

@@ -11,3 +11,9 @@
 .form-label {
   font-weight: bold;
 }
+
+.center-label {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}