changes to the request payment

src/App.tsx

@@ -717,24 +717,76 @@ function App() {
       )}
       {extState === "web-app-request-payment" && (
         <>
-          <p>{sendqortState?.hostname}</p>
+                  <Spacer height="100px" />
-          <p>{sendqortState?.description}</p>
+
-          <p>{sendqortState?.address}</p>
+         <TextP
-          <InputLabel htmlFor="standard-adornment-password">
+            sx={{
+              textAlign: "center",
+              lineHeight: "15px",
+            }}
+          >
+            The Application <br></br>{" "}
+            <TextItalic>{sendqortState?.hostname}</TextItalic> <br></br>
+            <TextSpan>is requesting a payment</TextSpan>
+          </TextP>
+          <Spacer height="10px" />
+          <TextP
+            sx={{
+              textAlign: "center",
+              lineHeight: "15px",
+              fontSize: '10px'
+            }}
+          >{sendqortState?.description}</TextP>
+          <Spacer height="15px" />
+          <TextP
+              sx={{
+                textAlign: "center",
+                lineHeight: "24px",
+                fontSize: "20px",
+                fontWeight: 700,
+              }}
+            >
+              {sendqortState?.amount} QORT
+            </TextP>
+          <Spacer height="29px" />
+
+          <CustomLabel htmlFor="standard-adornment-password">
             Confirm wallet password
-          </InputLabel>
+          </CustomLabel>
-          <Input
+          <Spacer height="5px" />
+          <CustomInput
             type="password"
             id="standard-adornment-password"
             value={paymentPassword}
             onChange={(e) => setPaymentPassword(e.target.value)}
           />
-          <button onClick={() => confirmPayment(false)}>
+           <Spacer height="29px" />
-            confirm payment of qort {sendqortState?.amount}
+           <Box
-          </button>
+            sx={{
-          <button onClick={() => confirmPayment(true)}>decline</button>
+              display: "flex",
+              alignItems: "center",
+              gap: "14px",
+            }}
+          >
+            <CustomButton
+              sx={{
+                minWidth: "102px",
+              }}
+              onClick={() => confirmPayment(false)}
+            >
+              accept
+            </CustomButton>
+            <CustomButton
+              sx={{
+                minWidth: "102px",
+              }}
+              onClick={() => confirmPayment(true)}
+            >
+              decline
+            </CustomButton>
+          </Box>
           <Typography color="errror">{sendPaymentError}</Typography>
-          <Typography>{sendPaymentSuccess}</Typography>
+    
         </>
       )}
       {extState === "web-app-request-connection" && (