ok

src/pages/Transactions.module.css

@@ -1,6 +1,5 @@
 .Transactions {
   overflow-x: hidden;
-  height: 100%;
   background-color: white;
   display: flex;
   flex-direction: column;
@@ -26,7 +25,7 @@
   font-family: "Poppins", sans-serif;
   font-weight: 500;
   font-style: normal;
-  font-size: 20px;
+  font-size: 15px;
   color: rgba(88, 55, 50, 1);
   text-align: left;
   margin-left: 20px;
@@ -40,17 +39,20 @@
 }
 
 .TotalContainer {
-  display: flex;
-  justify-content: space-between;
-  width: 100%; /* Ensures it takes up full width */
-  margin: 0 auto;
-  font-family: "Poppins", sans-serif;
-  font-weight: 600;
-  font-style: normal;
-  font-size: 1.5em;
-  padding: 10px;
-  box-sizing: border-box; /* Includes padding in width */
-  margin-bottom: 17px;
+  display: flex
+  ;
+      justify-content: space-between;
+      /* width: 100%; */
+      margin: 0 auto;
+      font-family: "Poppins", sans-serif;
+      font-weight: 600;
+      font-style: normal;
+      font-size: 15px;
+      /* padding: 10px; */
+      box-sizing: border-box;
+      margin-bottom: 17px;
+      margin-left: 20px;
+      margin-right: 20px;
 }
 
 .PaymentContainer {
@@ -61,10 +63,9 @@
   font-family: "Poppins", sans-serif;
   font-weight: 600;
   font-style: normal;
-  font-size: 1.5em;
+  font-size: 15px;
   padding: 10px;
   box-sizing: border-box; /* Includes padding in width */
-  margin-bottom: 17px;
   justify-content: center;
 }
 
@@ -72,8 +73,8 @@
   font-family: "Poppins", sans-serif;
   font-weight: 500;
   font-style: normal;
-  font-size: 70%; /* Adjusted for better readability */
-  padding: 12px 24px; /* Added padding for a better look */
+  font-size: 15px; /* Adjusted for better readability */
+  padding: 12px 16px; /* Added padding for a better look */
   border-radius: 50px;
   background-color: rgba(88, 55, 50, 1);
   color: white;
@@ -87,7 +88,7 @@
   font-family: "Poppins", sans-serif;
   font-weight: 500;
   font-style: normal;
-  font-size: 20px;
+  font-size: 15px;
   padding: 12px 24px; /* Add some padding for spacing */
   color: rgba(88, 55, 50, 1);
   background-color: transparent; /* No background */
@@ -96,7 +97,6 @@
   cursor: pointer;
   display: block; /* Center the text horizontally */
   text-align: center; /* Center the text within the button */
-  margin-bottom: 23px; /* Space at the bottom to match the PayButton */
 }
 
 .DeclineButton.active {
@@ -139,6 +139,7 @@
   display: flex;
   justify-content: space-between;
   margin-left: 20px;
+  margin-right: 20px;
   font-size: 1em;
   margin-bottom: 15px;
 }
@@ -155,6 +156,7 @@
 }
 
 .RibbonBanner {
+  pointer-events: none;
   position: absolute;
   top: 0;
   width: 200px;
@@ -178,3 +180,95 @@
   top: 60px;
   left: -15px;
 }
+
+/* Header with logo and receipt info */
+.receipt-header {
+  text-align: center;
+}
+
+.receipt-logo {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%; /* Circular logo */
+  object-fit: cover;
+  margin-bottom: 10px;
+}
+
+.receipt-info h3 {
+  font-size: 16px;
+  margin: 5px 0;
+}
+
+.receipt-info p {
+  font-size: 14px;
+  margin: 2px 0;
+}
+/* Dotted line with circular cutouts */
+.dotted-line {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 15px 0;
+}
+
+.dotted-line .line {
+  border-top: 13px dotted #dbdbdb;
+  width: 100%;
+  margin: 0 20px;
+}
+
+.dotted-line .circle-left {
+  left: -25px;
+  position: absolute;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  background-color: #dbdbdb;
+  display: flex; /* Use flexbox to center the inner circle */
+  justify-content: center; /* Center horizontally */
+  align-items: center; /* Center vertically */
+}
+
+.dotted-line .circle-right {
+  right: -25px;
+  position: absolute;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  background-color: #dbdbdb;
+  display: flex; /* Use flexbox to center the inner circle */
+  justify-content: center; /* Center horizontally */
+  align-items: center; /* Center vertically */
+}
+
+.inner-circle {
+  width: 80%;
+  height: 80%;
+  border-radius: 50%; /* Make it a circle */
+  background-color: white; /* Background color of the inner circle */
+}
+
+
+.inner-text {
+  font-size: 24px; /* Adjust the font size as needed */
+  color: white; /* Text color */
+}
+
+
+.circle {
+  position: absolute;
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  padding: 4px;
+  border-radius: 50%;
+  margin-top: -43px;
+  margin-left: 43px;
+
+  /* Just making it pretty */
+  background: #38a9e4;
+  color: white;
+  font-family: Helvetica, Arial Black, sans;
+  font-size: 20px;
+  text-align: center;
+}