fix: incorrect bg colour on cancelled page info card

City-of-Helsinki · Mar 7, 2025 · 7eb20e7 · 7eb20e7
1 parent 3794e05
commit 7eb20e7
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 10 deletions.
diff --git a/apps/ui/components/reservation/EditStep0.tsx b/apps/ui/components/reservation/EditStep0.tsx
@@ -222,7 +222,7 @@ export function EditStep0({
     <>
       <StyledReservationInfoCard
         reservation={reservation}
-        type="confirmed"
+        type="pending"
         disableImage
       />
       {/* TODO on mobile in the design this is after the calendar but before action buttons */}

diff --git a/apps/ui/components/reservation/EditStep1.tsx b/apps/ui/components/reservation/EditStep1.tsx
@@ -144,7 +144,7 @@ export function EditStep1({
     <>
       <StyledReservationInfoCard
         reservation={modifiedReservation}
-        type="confirmed"
+        type="pending"
       />
       <StyledForm
         onSubmit={(e) => {

diff --git a/apps/ui/components/reservation/ReservationCancellation.tsx b/apps/ui/components/reservation/ReservationCancellation.tsx
@@ -32,7 +32,7 @@ const infoCss = css`
   }
 `;
 
-const StyledInfoCard = styled(ReservationInfoCard)`
+const StyledReservationInfoCard = styled(ReservationInfoCard)`
   ${infoCss}
 `;
 
@@ -105,7 +105,7 @@ export function ReservationCancellation(props: CancellationProps): JSX.Element {
       {reservation.recurringReservation ? (
         <ApplicationInfoCard reservation={reservation} />
       ) : (
-        <StyledInfoCard reservation={reservation} type="confirmed" />
+        <StyledReservationInfoCard reservation={reservation} type="complete" />
       )}
       <CancellationForm
         onNext={onSubmit}

diff --git a/apps/ui/components/reservation/ReservationInfoCard.tsx b/apps/ui/components/reservation/ReservationInfoCard.tsx
@@ -28,12 +28,12 @@ import {
   getTranslationSafe,
 } from "common/src/common/util";
 
-type Type = "pending" | "confirmed" | "complete";
-
 const Wrapper = styled.div<{ $type: Type }>`
-  /* stylelint-disable custom-property-pattern */
+  --bg-color-complete: var(--color-silver-light);
+  --bg-color-pending: var(--color-gold-light);
   background-color: var(
-    --color-${({ $type }) => ($type === "complete" ? "silver" : "gold")}-light
+    ${({ $type }) =>
+      $type === "complete" ? "--bg-color-complete" : "--bg-color-pending"}
   );
 `;
 
@@ -61,6 +61,8 @@ const Subheading = styled.p`
   margin: 0;
 `;
 
+type Type = "pending" | "complete";
+
 type Props = {
   reservation: ReservationInfoCardFragment;
   type: Type;
@@ -142,7 +144,7 @@ export function ReservationInfoCard({
             {name}
           </StyledLink>
         </H4>
-        {(type === "confirmed" || type === "complete") && (
+        {type === "complete" && (
           <Subheading>
             {t("reservations:reservationNumber")}:{" "}
             <span data-testid="reservation__reservation-info-card__reservationNumber">

diff --git a/apps/ui/pages/reservations/[id]/confirmation.tsx b/apps/ui/pages/reservations/[id]/confirmation.tsx
@@ -57,7 +57,7 @@ function Confirmation({ apiBaseUrl, reservation }: PropsNarrowed) {
     <>
       <Breadcrumb routes={routes} />
       <ReservationPageWrapper $nRows={4}>
-        <ReservationInfoCard reservation={reservation} type="confirmed" />
+        <ReservationInfoCard reservation={reservation} type="pending" />
         <ReservationConfirmation
           apiBaseUrl={apiBaseUrl}
           reservation={reservation}