refactor: simplify reservation status tag styling

City-of-Helsinki · Nov 14, 2024 · fa92da2 · fa92da2
1 parent 6a680c1
commit fa92da2
Showing 1 changed file with 16 additions and 29 deletions.
diff --git a/apps/admin-ui/src/spa/reservations/[id]/ReservationTitleSection.tsx b/apps/admin-ui/src/spa/reservations/[id]/ReservationTitleSection.tsx
@@ -10,7 +10,6 @@ import {
 import styled from "styled-components";
 import { useTranslation } from "react-i18next";
 import { fontMedium, H1 } from "common/src/common/typography";
-import { breakpoints } from "common/src/common/style";
 import {
   type Maybe,
   OrderStatus,
@@ -27,14 +26,6 @@ import { ExternalLink } from "@/component/ExternalLink";
 import StatusLabel from "common/src/components/StatusLabel";
 import { type StatusLabelType } from "common/src/tags";
 
-const AlignVertically = styled.div`
-  display: flex;
-  gap: var(--spacing-m);
-  flex-direction: row;
-  align-items: center;
-  flex-grow: 1;
-`;
-
 const Tagline = styled.p`
   font-size: var(--fontsize-body-xl);
   margin-bottom: var(--spacing-xs);
@@ -148,27 +139,23 @@ const ReservationTitleSection = forwardRef<HTMLDivElement, Props>(
           <H1 $noMargin>{overrideTitle ?? getName(reservation, t)}</H1>
           <Flex $direction="row" $align="center">
             {order?.status != null && (
-              <AlignVertically>
-                <StatusLabel
-                  type={paymentStatusLabelType}
-                  testId="reservation_title_section__order_status"
-                  icon={<IconEuroSign aria-hidden="true" />}
-                >
-                  {t(`Payment.status.${order?.status}`)}
-                </StatusLabel>
-              </AlignVertically>
+              <StatusLabel
+                type={paymentStatusLabelType}
+                testId="reservation_title_section__order_status"
+                icon={<IconEuroSign aria-hidden="true" />}
+              >
+                {t(`Payment.status.${order?.status}`)}
+              </StatusLabel>
+            )}
+            {reservation.state && (
+              <StatusLabel
+                type={reservationState.type}
+                icon={reservationState.icon}
+                testId="reservation_title_section__reservation_state"
+              >
+                {t(`RequestedReservation.state.${reservation.state}`)}
+              </StatusLabel>
             )}
-            <AlignVertically style={{ gap: "var(--spacing-xs)" }}>
-              {reservation.state && (
-                <StatusLabel
-                  type={reservationState.type}
-                  icon={reservationState.icon}
-                  testId="reservation_title_section__reservation_state"
-                >
-                  {t(`RequestedReservation.state.${reservation.state}`)}
-                </StatusLabel>
-              )}
-            </AlignVertically>
           </Flex>
         </TitleSection>
         <Tagline data-testid="reservation_title_section__tagline">