Merge pull request #79 from DFanso/pages/cancel-payment

Style update
DFanso · Jan 7, 2024 · 0ec39d0 · 0ec39d0
2 parents 57f40cb + db292a2
commit 0ec39d0
Show file tree

Hide file tree

Showing 7 changed files with 85 additions and 15 deletions.
diff --git a/client/src/components/css/Booking.css b/client/src/components/css/Booking.css
@@ -8,10 +8,15 @@
     /* 200px left and right padding */
     font-family: Arial, sans-serif;
     gap: 20px;
-    background-color: #FAFAFA;
+    background-color: #333;
+    color: #fff !important;
     /* Add some space between the sections */
 }
 
+.booking-movie-title {
+    color: #fff !important;
+}
+
 .showtimes {
     max-width: 500px;
     /* Limit the width of each section */
@@ -108,7 +113,7 @@
 }
 
 .cta p {
-    color: #666;
+    color: #C5C5C5 !important;
     margin-bottom: 10px;
 }
 

diff --git a/client/src/components/css/BookingHistory.css b/client/src/components/css/BookingHistory.css
@@ -1,8 +1,8 @@
 .booking-history {
-  width: auto;
+
 
   padding: 20px;
-  height: auto;
+  height: 100vh;
   color: #fff !important;
 }
 

diff --git a/client/src/components/css/PaymentCancel.css b/client/src/components/css/PaymentCancel.css
@@ -0,0 +1,57 @@
+/* PaymentSuccess.css */
+
+.payment-success-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    background-color: #333;
+    /* Green background color */
+    color: #fff;
+    /* White text color */
+}
+
+.payment-success-text {
+    font-size: 32px;
+    margin-bottom: 16px;
+    color: #C5C5C5;
+}
+
+.payment-success-message {
+    font-size: 18px;
+    text-align: center;
+    max-width: 400px;
+    padding: 16px;
+    border-radius: 8px;
+    background-color: rgba(255, 255, 255, 0.1);
+    /* Transparent white background */
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
+    /* Shadow for the container */
+}
+
+.main-layout {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+
+.main-layout {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+
+.content {
+    flex: 1;
+}
+
+.content {
+    flex: 1;
+}
+
+
+.yes-img {
+    margin-top: 10px;
+    width: 60px;
+}
diff --git a/client/src/components/css/PaymentSucess.css b/client/src/components/css/PaymentSucess.css
@@ -5,17 +5,17 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  height: 90vh;
-  background-color: #fff;
+  height: 100vh;
+  background-color: #333;
   /* Green background color */
-  color: grey;
+  color: #fff;
   /* White text color */
 }
 
 .payment-success-text {
   font-size: 32px;
   margin-bottom: 16px;
-  color: grey;
+  color: #C5C5C5;
 }
 
 .payment-success-message {
@@ -29,11 +29,13 @@
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
   /* Shadow for the container */
 }
+
 .main-layout {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
 }
+
 .main-layout {
   display: flex;
   flex-direction: column;
@@ -46,4 +48,4 @@
 
 .content {
   flex: 1;
-}
+}
diff --git a/client/src/components/css/Seating.css b/client/src/components/css/Seating.css
@@ -4,19 +4,22 @@
     box-sizing: border-box;
     margin: 0;
     padding: 0;
+
 }
 
 .seating-showtime {
     font-size: 1.0em;
-    color: #000;
+    color: #fff;
     font-weight: 200;
     margin: 0;
     padding-right: 10px;
+
+
 }
 
 .seating-movie-title {
     font-size: 1.2em;
-    color: #000;
+    color: #fff;
     font-weight: 200;
     margin: 0;
 }
@@ -27,7 +30,7 @@
     border: 0px solid #d1d1d1;
     background-color: #f6c20a;
     cursor: pointer;
-    color: #fafafa;
+    color: #3B3B3B;
 
 }
 
@@ -47,6 +50,9 @@
     align-items: center;
     gap: 120px;
 
+    background-color: #333;
+    color: #fff !important;
+
 
 }
 

diff --git a/client/src/components/pages/PaymentCancel.js b/client/src/components/pages/PaymentCancel.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import '../css/PaymentSucess.css'; // Import your CSS file for styling
+import '../css/PaymentCancel.css'; // Import your CSS file for styling
 
 const PaymentCancel = () => {
     return (

diff --git a/client/src/components/pages/PaymentSuccess.js b/client/src/components/pages/PaymentSuccess.js
@@ -18,15 +18,15 @@ const PaymentSuccess = () => {
   }, [setLoading]);
 
   return (
-    <div className="main-layout">
+    <div className="main-layout" style={{ backgroundColor: loading ? "#333" : "transparent" }}>
       <div className="login-wrapper">
         {loading && (
           <div className="loader-container">
             <TailSpin color="#00BFFF" height={100} width={100} />
           </div>
         )}
         {!loading && ( // Only render this part when not loading
-          <div className="payment-success-container">
+          <div className="payment-success-container" >
             <h1 className="payment-success-text">Payment Successful!</h1>
             <p className="payment-success-message">
               Thank you for your payment. Your transaction was successful.