layout and styling changes for RentItem

frontend/src/pages/RentItem.tsx

@@ -25,7 +25,10 @@ const validateDates = (
 
   // Check if end datetime is after start datetime
   if (endDateTime <= startDateTime) {
-    return { isValid: false, error: "End date/time must be after start date/time" };
+    return {
+      isValid: false,
+      error: "End date/time must be after start date/time",
+    };
   }
 
   return { isValid: true, error: null };
@@ -65,7 +68,9 @@ const RentItem: React.FC = () => {
   const [costLoading, setCostLoading] = useState(false);
   const [costError, setCostError] = useState<string | null>(null);
   const [completed, setCompleted] = useState(false);
-  const [dateValidationError, setDateValidationError] = useState<string | null>(null);
+  const [dateValidationError, setDateValidationError] = useState<string | null>(
+    null
+  );
 
   const formatDateTime = (date: Date | null) => {
     if (!date) return "";
@@ -229,18 +234,19 @@ const RentItem: React.FC = () => {
   }
 
   return (
-    <div className="container mt-5">
+    <div style={{ backgroundColor: "#F7F9FB", minHeight: "100vh" }}>
+      <div className="container pt-5">
         <div className="row justify-content-center">
           <div className="col-md-10">
-          <h1>Renting {item.name}</h1>
+            <h1>Complete Your Request</h1>
 
             {/* Email Verification Warning Banner */}
             {user && !user.isVerified && (
               <div className="alert alert-warning d-flex align-items-center mb-4">
                 <i className="bi bi-exclamation-triangle-fill me-2"></i>
                 <div className="flex-grow-1">
-                <strong>Email verification required.</strong> Verify your email
+                  <strong>Email verification required.</strong> Verify your
-                to book rentals.
+                  email to book rentals.
                 </div>
                 <button
                   className="btn btn-warning btn-sm ms-3"
@@ -264,14 +270,17 @@ const RentItem: React.FC = () => {
                   <div className="card-body">
                     {item.imageFilenames && item.imageFilenames[0] && (
                       <img
-                      src={getImageUrl(item.imageFilenames[0], 'medium')}
+                        src={getImageUrl(item.imageFilenames[0], "medium")}
                         alt={item.name}
                         className="img-fluid rounded mb-3"
                         onError={(e) => {
                           const target = e.currentTarget;
                           if (!target.dataset.fallback) {
-                          target.dataset.fallback = 'true';
+                            target.dataset.fallback = "true";
-                          target.src = getImageUrl(item.imageFilenames[0], 'original');
+                            target.src = getImageUrl(
+                              item.imageFilenames[0],
+                              "original"
+                            );
                           }
                         }}
                         style={{
@@ -298,8 +307,11 @@ const RentItem: React.FC = () => {
                         <h6>Free to Borrow</h6>
                       ) : (
                         <>
-                        {item.pricePerHour && Number(item.pricePerHour) > 0 && (
+                          {item.pricePerHour &&
-                          <h6>${Math.floor(Number(item.pricePerHour))}/Hour</h6>
+                            Number(item.pricePerHour) > 0 && (
+                              <h6>
+                                ${Math.floor(Number(item.pricePerHour))}/Hour
+                              </h6>
                             )}
                           {item.pricePerDay && Number(item.pricePerDay) > 0 && (
                             <h6>${Math.floor(Number(item.pricePerDay))}/Day</h6>
@@ -352,8 +364,8 @@ const RentItem: React.FC = () => {
               {/* Form - appears second on mobile, left side on desktop */}
               <div className="col-md-8">
                 {completed ? (
-                <div className="card mb-4">
+                  <div className="mb-4">
-                  <div className="card-body text-center">
+                    <div className="text-center">
                       <div className="alert alert-success">
                         <i className="bi bi-check-circle-fill display-1 text-success mb-3"></i>
                         <h3>Rental Request Sent!</h3>
@@ -379,26 +391,14 @@ const RentItem: React.FC = () => {
                     </div>
                   </div>
                 ) : (
-                <div className="card mb-4">
+                  <div className="mb-4">
+                    <div>
+                      <div className="card mb-3">
                         <div className="card-body">
-                    <h5 className="card-title">
+                          <h6 className="mb-3">
-                      {totalCost === 0
-                        ? "Complete Your Borrow Request"
-                        : "Complete Your Rental Request"}
-                    </h5>
-                    {totalCost > 0 && (
-                      <p className="text-muted small mb-3">
-                        Add your payment method to complete your rental request.
-                        You'll only be charged if the owner approves your
-                        request.
-                      </p>
-                    )}
-
-                    <div className="mb-3">
-                      <label htmlFor="intendedUse" className="form-label">
                             What will you use this for?{" "}
                             <span className="text-muted">(Optional)</span>
-                      </label>
+                          </h6>
                           <textarea
                             id="intendedUse"
                             name="intendedUse"
@@ -413,6 +413,7 @@ const RentItem: React.FC = () => {
                             {formData.intendedUse.length}/500 characters
                           </div>
                         </div>
+                      </div>
 
                       {dateValidationError ? (
                         <div className="alert alert-danger">
@@ -452,11 +453,20 @@ const RentItem: React.FC = () => {
                         </>
                       ) : (
                         <>
+                          <div className="card mb-3">
+                            <div className="card-body">
+                              <h6 className="mb-3">
+                                Add your payment method to complete your
+                                request. You'll only be charged if the owner
+                                approves your request
+                              </h6>
                               <EmbeddedStripeCheckout
                                 rentalData={getRentalData()}
                                 onSuccess={() => setCompleted(true)}
                                 onError={(error) => setError(error)}
                               />
+                            </div>
+                          </div>
 
                           <div className="text-center mt-3">
                             <button
@@ -490,6 +500,7 @@ const RentItem: React.FC = () => {
           />
         )}
       </div>
+    </div>
   );
 };