From 9e41f328e0911efcd3cfb0a81f9cda26c0fddd74 Mon Sep 17 00:00:00 2001
From: jackiettran <41605212+jackiettran@users.noreply.github.com>
Date: Thu, 1 Jan 2026 17:17:02 -0500
Subject: [PATCH] layout and styling changes for RentItem

---
 frontend/src/pages/RentItem.tsx | 487 ++++++++++++++++----------------
 1 file changed, 249 insertions(+), 238 deletions(-)

diff --git a/frontend/src/pages/RentItem.tsx b/frontend/src/pages/RentItem.tsx
index ff08add..a923c39 100644
--- a/frontend/src/pages/RentItem.tsx
+++ b/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,266 +234,272 @@ const RentItem: React.FC = () => {
   }
 
   return (
-    <div className="container mt-5">
-      <div className="row justify-content-center">
-        <div className="col-md-10">
-          <h1>Renting {item.name}</h1>
+    <div style={{ backgroundColor: "#F7F9FB", minHeight: "100vh" }}>
+      <div className="container pt-5">
+        <div className="row justify-content-center">
+          <div className="col-md-10">
+            <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
-                to book rentals.
+            {/* 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 to book rentals.
+                </div>
+                <button
+                  className="btn btn-warning btn-sm ms-3"
+                  onClick={() => setShowVerificationModal(true)}
+                >
+                  Verify Now
+                </button>
               </div>
-              <button
-                className="btn btn-warning btn-sm ms-3"
-                onClick={() => setShowVerificationModal(true)}
-              >
-                Verify Now
-              </button>
-            </div>
-          )}
+            )}
 
-          {error && (
-            <div className="alert alert-danger" role="alert">
-              {error}
-            </div>
-          )}
+            {error && (
+              <div className="alert alert-danger" role="alert">
+                {error}
+              </div>
+            )}
 
-          <div className="row">
-            {/* Pricing Card - appears first on mobile, right side on desktop */}
-            <div className="col-md-4 order-first order-md-last mb-4 mb-md-0">
-              <div className="card">
-                <div className="card-body">
-                  {item.imageFilenames && item.imageFilenames[0] && (
-                    <img
-                      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.src = getImageUrl(item.imageFilenames[0], 'original');
-                        }
-                      }}
-                      style={{
-                        width: "100%",
-                        height: "150px",
-                        objectFit: "contain",
-                        backgroundColor: "#f8f9fa",
-                      }}
-                    />
-                  )}
-
-                  <h6>{item.name}</h6>
-                  <p className="text-muted small">
-                    {item.city && item.state
-                      ? `${item.city}, ${item.state}`
-                      : ""}
-                  </p>
-
-                  <hr />
-
-                  {/* Pricing */}
-                  <div className="mb-3 text-center">
-                    {totalCost === 0 ? (
-                      <h6>Free to Borrow</h6>
-                    ) : (
-                      <>
-                        {item.pricePerHour && 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>
-                        )}
-                      </>
+            <div className="row">
+              {/* Pricing Card - appears first on mobile, right side on desktop */}
+              <div className="col-md-4 order-first order-md-last mb-4 mb-md-0">
+                <div className="card">
+                  <div className="card-body">
+                    {item.imageFilenames && item.imageFilenames[0] && (
+                      <img
+                        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.src = getImageUrl(
+                              item.imageFilenames[0],
+                              "original"
+                            );
+                          }
+                        }}
+                        style={{
+                          width: "100%",
+                          height: "150px",
+                          objectFit: "contain",
+                          backgroundColor: "#f8f9fa",
+                        }}
+                      />
                     )}
-                  </div>
 
-                  {/* Selected Dates */}
-                  {rentalDates.startDateTime && rentalDates.endDateTime && (
-                    <div className="mb-3">
-                      <div className="small mb-1">
-                        <strong>Check-in:</strong>{" "}
-                        {formatDateTime(rentalDates.startDateTime)}
-                      </div>
-                      <div className="small">
-                        <strong>Check-out:</strong>{" "}
-                        {formatDateTime(rentalDates.endDateTime)}
-                      </div>
-                    </div>
-                  )}
+                    <h6>{item.name}</h6>
+                    <p className="text-muted small">
+                      {item.city && item.state
+                        ? `${item.city}, ${item.state}`
+                        : ""}
+                    </p>
 
-                  {/* Total Cost */}
-                  <>
                     <hr />
-                    <div className="d-flex justify-content-between">
-                      <strong>Total:</strong>
-                      {costLoading ? (
-                        <div
-                          className="spinner-border spinner-border-sm"
-                          role="status"
-                        >
-                          <span className="visually-hidden">
-                            Calculating...
-                          </span>
-                        </div>
-                      ) : costError ? (
-                        <small className="text-danger">Error</small>
-                      ) : totalCost > 0 ? (
-                        <strong>${totalCost}</strong>
+
+                    {/* Pricing */}
+                    <div className="mb-3 text-center">
+                      {totalCost === 0 ? (
+                        <h6>Free to Borrow</h6>
                       ) : (
-                        <strong>$0</strong>
+                        <>
+                          {item.pricePerHour &&
+                            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>
+                          )}
+                        </>
                       )}
                     </div>
-                  </>
+
+                    {/* Selected Dates */}
+                    {rentalDates.startDateTime && rentalDates.endDateTime && (
+                      <div className="mb-3">
+                        <div className="small mb-1">
+                          <strong>Check-in:</strong>{" "}
+                          {formatDateTime(rentalDates.startDateTime)}
+                        </div>
+                        <div className="small">
+                          <strong>Check-out:</strong>{" "}
+                          {formatDateTime(rentalDates.endDateTime)}
+                        </div>
+                      </div>
+                    )}
+
+                    {/* Total Cost */}
+                    <>
+                      <hr />
+                      <div className="d-flex justify-content-between">
+                        <strong>Total:</strong>
+                        {costLoading ? (
+                          <div
+                            className="spinner-border spinner-border-sm"
+                            role="status"
+                          >
+                            <span className="visually-hidden">
+                              Calculating...
+                            </span>
+                          </div>
+                        ) : costError ? (
+                          <small className="text-danger">Error</small>
+                        ) : totalCost > 0 ? (
+                          <strong>${totalCost}</strong>
+                        ) : (
+                          <strong>$0</strong>
+                        )}
+                      </div>
+                    </>
+                  </div>
                 </div>
               </div>
-            </div>
 
-            {/* Form - appears second on mobile, left side on desktop */}
-            <div className="col-md-8">
-              {completed ? (
-                <div className="card mb-4">
-                  <div className="card-body 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>
-                      <p className="mb-3">
-                        Your rental request has been submitted to the owner.
-                        You'll only be charged if they approve your request.
-                      </p>
-                      <div className="d-grid gap-2 d-md-block">
-                        <button
-                          className="btn btn-primary me-2"
-                          onClick={() => navigate("/renting")}
-                        >
-                          View My Rentals
-                        </button>
-                        <button
-                          className="btn btn-outline-secondary"
-                          onClick={() => navigate("/")}
-                        >
-                          Continue Browsing
-                        </button>
+              {/* Form - appears second on mobile, left side on desktop */}
+              <div className="col-md-8">
+                {completed ? (
+                  <div className="mb-4">
+                    <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>
+                        <p className="mb-3">
+                          Your rental request has been submitted to the owner.
+                          You'll only be charged if they approve your request.
+                        </p>
+                        <div className="d-grid gap-2 d-md-block">
+                          <button
+                            className="btn btn-primary me-2"
+                            onClick={() => navigate("/renting")}
+                          >
+                            View My Rentals
+                          </button>
+                          <button
+                            className="btn btn-outline-secondary"
+                            onClick={() => navigate("/")}
+                          >
+                            Continue Browsing
+                          </button>
+                        </div>
                       </div>
                     </div>
                   </div>
-                </div>
-              ) : (
-                <div className="card mb-4">
-                  <div className="card-body">
-                    <h5 className="card-title">
-                      {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>
-                      <textarea
-                        id="intendedUse"
-                        name="intendedUse"
-                        className="form-control"
-                        rows={3}
-                        value={formData.intendedUse}
-                        onChange={handleChange}
-                        placeholder="Let the owner know how you plan to use their item..."
-                        maxLength={500}
-                      />
-                      <div className="form-text">
-                        {formData.intendedUse.length}/500 characters
+                ) : (
+                  <div className="mb-4">
+                    <div>
+                      <div className="card mb-3">
+                        <div className="card-body">
+                          <h6 className="mb-3">
+                            What will you use this for?{" "}
+                            <span className="text-muted">(Optional)</span>
+                          </h6>
+                          <textarea
+                            id="intendedUse"
+                            name="intendedUse"
+                            className="form-control"
+                            rows={3}
+                            value={formData.intendedUse}
+                            onChange={handleChange}
+                            placeholder="Let the owner know how you plan to use their item..."
+                            maxLength={500}
+                          />
+                          <div className="form-text">
+                            {formData.intendedUse.length}/500 characters
+                          </div>
+                        </div>
                       </div>
+
+                      {dateValidationError ? (
+                        <div className="alert alert-danger">
+                          <i className="bi bi-exclamation-triangle me-2"></i>
+                          {dateValidationError}
+                        </div>
+                      ) : !rentalDates.startDateTime ||
+                        !rentalDates.endDateTime ||
+                        !getRentalData() ? (
+                        <div className="alert alert-info">
+                          <i className="bi bi-info-circle me-2"></i>
+                          Please complete the rental dates and details above to
+                          proceed with{" "}
+                          {totalCost === 0
+                            ? "your borrow request"
+                            : "payment setup"}
+                          .
+                        </div>
+                      ) : totalCost === 0 ? (
+                        <>
+                          <div className="d-grid gap-2">
+                            <button
+                              type="button"
+                              className="btn btn-primary"
+                              onClick={handleFreeBorrow}
+                            >
+                              Confirm Borrow Request
+                            </button>
+                            <button
+                              type="button"
+                              className="btn btn-outline-secondary"
+                              onClick={() => navigate(`/items/${id}`)}
+                            >
+                              Cancel Request
+                            </button>
+                          </div>
+                        </>
+                      ) : (
+                        <>
+                          <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
+                              type="button"
+                              className="btn btn-outline-secondary"
+                              onClick={() => navigate(`/items/${id}`)}
+                            >
+                              Cancel Request
+                            </button>
+                          </div>
+                        </>
+                      )}
                     </div>
-
-                    {dateValidationError ? (
-                      <div className="alert alert-danger">
-                        <i className="bi bi-exclamation-triangle me-2"></i>
-                        {dateValidationError}
-                      </div>
-                    ) : !rentalDates.startDateTime ||
-                    !rentalDates.endDateTime ||
-                    !getRentalData() ? (
-                      <div className="alert alert-info">
-                        <i className="bi bi-info-circle me-2"></i>
-                        Please complete the rental dates and details above to
-                        proceed with{" "}
-                        {totalCost === 0
-                          ? "your borrow request"
-                          : "payment setup"}
-                        .
-                      </div>
-                    ) : totalCost === 0 ? (
-                      <>
-                        <div className="d-grid gap-2">
-                          <button
-                            type="button"
-                            className="btn btn-primary"
-                            onClick={handleFreeBorrow}
-                          >
-                            Confirm Borrow Request
-                          </button>
-                          <button
-                            type="button"
-                            className="btn btn-outline-secondary"
-                            onClick={() => navigate(`/items/${id}`)}
-                          >
-                            Cancel Request
-                          </button>
-                        </div>
-                      </>
-                    ) : (
-                      <>
-                        <EmbeddedStripeCheckout
-                          rentalData={getRentalData()}
-                          onSuccess={() => setCompleted(true)}
-                          onError={(error) => setError(error)}
-                        />
-
-                        <div className="text-center mt-3">
-                          <button
-                            type="button"
-                            className="btn btn-outline-secondary"
-                            onClick={() => navigate(`/items/${id}`)}
-                          >
-                            Cancel Request
-                          </button>
-                        </div>
-                      </>
-                    )}
                   </div>
-                </div>
-              )}
+                )}
+              </div>
             </div>
           </div>
         </div>
-      </div>
 
-      {/* Email Verification Modal */}
-      {user && (
-        <VerificationCodeModal
-          show={showVerificationModal}
-          onHide={() => {
-            setShowVerificationModal(false);
-            setPendingSubmit(false);
-          }}
-          email={user.email || ""}
-          onVerified={handleVerificationSuccess}
-        />
-      )}
+        {/* Email Verification Modal */}
+        {user && (
+          <VerificationCodeModal
+            show={showVerificationModal}
+            onHide={() => {
+              setShowVerificationModal(false);
+              setPendingSubmit(false);
+            }}
+            email={user.email || ""}
+            onVerified={handleVerificationSuccess}
+          />
+        )}
+      </div>
     </div>
   );
 };