fix: sanitized content styling

City-of-Helsinki · Nov 14, 2024 · ac78065 · ac78065
1 parent 7848634
commit ac78065
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 58 deletions.
diff --git a/apps/ui/components/common/Sanitize.tsx b/apps/ui/components/common/Sanitize.tsx
@@ -7,8 +7,8 @@ type Props = {
 };
 
 const StyledContent = styled.div`
-  p {
-    margin-block: 0;
+  p:empty {
+    display: none;
   }
   a {
     text-decoration: underline;

diff --git a/apps/ui/components/reservation-unit/EquipmentList.tsx b/apps/ui/components/reservation-unit/EquipmentList.tsx
@@ -16,6 +16,7 @@ const EquipmentContainer = styled(ShowAllContainer)`
     list-style: none;
     gap: var(--spacing-2-xs) var(--spacing-m);
     padding: 0;
+    margin: 0;
 
     display: grid;
     grid-template-columns: 1fr;

diff --git a/apps/ui/components/reservation-unit/ReservationInfoContainer.tsx b/apps/ui/components/reservation-unit/ReservationInfoContainer.tsx
@@ -5,7 +5,6 @@ import { type ReservationInfoContainerFragment } from "@gql/gql-types";
 import { Trans, useTranslation } from "next-i18next";
 import { daysByMonths } from "@/modules/const";
 import { formatDate } from "@/modules/util";
-import { Content } from "./ReservationUnitStyles";
 import { H4 } from "common/src/common/typography";
 import styled from "styled-components";
 
@@ -69,7 +68,7 @@ export function ReservationInfoContainer({
 
   // TODO this should be a list
   return (
-    <Content data-testid="reservation-unit__reservation-info">
+    <div data-testid="reservation-unit__reservation-info">
       <Subheading $noMargin>
         {t("reservationCalendar:reservationInfo")}
       </Subheading>
@@ -81,7 +80,7 @@ export function ReservationInfoContainer({
       {reservationUnitIsReservable && (
         <ReservationMaxReservationsPerUser {...reservationUnit} />
       )}
-    </Content>
+    </div>
   );
 }
 

diff --git a/apps/ui/components/reservation-unit/ReservationUnitStyles.tsx b/apps/ui/components/reservation-unit/ReservationUnitStyles.tsx
diff --git a/apps/ui/components/reservation/ReservationInfoCard.tsx b/apps/ui/components/reservation/ReservationInfoCard.tsx
@@ -23,6 +23,7 @@ import {
 } from "@/modules/util";
 import { getImageSource } from "common/src/helpers";
 import { getReservationUnitPath } from "@/modules/urls";
+import { Flex } from "common/styles/util";
 
 type Type = "pending" | "confirmed" | "complete";
 
@@ -69,13 +70,15 @@ const MainImage = styled.img`
   object-fit: cover;
 `;
 
-const Content = styled.div`
+const Content = styled(Flex).attrs({
+  $gap: "xs",
+})`
   padding: 1px var(--spacing-m) var(--spacing-xs);
 `;
 
 const Heading = styled(H4).attrs({ as: "h3" })`
   margin-top: var(--spacing-m);
-  margin-bottom: var(--spacing-xs);
+  margin-bottom: 0;
 `;
 
 const StyledLink = styled(Link)`
@@ -84,15 +87,10 @@ const StyledLink = styled(Link)`
   text-underline-offset: 4px;
 `;
 
-const Value = styled.div`
-  margin-bottom: var(--spacing-s);
-  line-height: var(--lineheight-l);
-`;
+const Value = styled.div``;
 
 const Subheading = styled(Value)`
   font-size: var(--fontsize-body-l);
-  line-height: var(--lineheight-xl);
-  margin-bottom: var(--spacing-xs);
 `;
 
 type Props = {

diff --git a/apps/ui/pages/reservation-unit/[id].tsx b/apps/ui/pages/reservation-unit/[id].tsx
@@ -74,7 +74,6 @@ import {
 } from "@/modules/reservable";
 import SubventionSuffix from "@/components/reservation/SubventionSuffix";
 import InfoDialog from "@/components/common/InfoDialog";
-import { Content } from "@/components/reservation-unit/ReservationUnitStyles";
 import { QuickReservation } from "@/components/reservation-unit/QuickReservation";
 import { ReservationInfoContainer } from "@/components/reservation-unit/ReservationInfoContainer";
 import {
@@ -649,17 +648,15 @@ function ReservationUnit({
         </JustForDesktop>
       </div>
       <PageContentWrapper>
-        <Content data-testid="reservation-unit__description">
+        <div data-testid="reservation-unit__description">
           <H4 as="h3">{t("reservationUnit:description")}</H4>
           <Sanitize html={getTranslation(reservationUnit, "description")} />
-        </Content>
+        </div>
         {equipment?.length > 0 && (
-          <Content data-testid="reservation-unit__equipment">
-            <H4 as="h3" $noMargin>
-              {t("reservationUnit:equipment")}
-            </H4>
+          <div data-testid="reservation-unit__equipment">
+            <H4 as="h3">{t("reservationUnit:equipment")}</H4>
             <EquipmentList equipment={equipment} />
-          </Content>
+          </div>
         )}
         {reservationUnitIsReservable && (
           <div data-testid="reservation-unit__calendar--wrapper">

diff --git a/apps/ui/pages/reservations/[id]/index.tsx b/apps/ui/pages/reservations/[id]/index.tsx
@@ -108,11 +108,6 @@ const SecondaryActions = styled(Flex)`
   margin-top: var(--spacing-l);
 `;
 
-const AccordionContent = styled.div`
-  margin-bottom: var(--spacing-s);
-  padding-top: var(--spacing-m);
-`;
-
 function ReserveeBusinessInfo({
   reservation,
   supportedFields,
@@ -530,15 +525,9 @@ function Reservation({
                 theme="thin"
                 data-testid="reservation__payment-and-cancellation-terms"
               >
-                {paymentTermsContent && (
-                  <AccordionContent>
-                    <Sanitize html={paymentTermsContent} />
-                  </AccordionContent>
-                )}
+                {paymentTermsContent && <Sanitize html={paymentTermsContent} />}
                 {cancellationTermsContent && (
-                  <AccordionContent>
-                    <Sanitize html={cancellationTermsContent} />
-                  </AccordionContent>
+                  <Sanitize html={cancellationTermsContent} />
                 )}
               </Accordion>
             )}
@@ -548,9 +537,7 @@ function Reservation({
                 theme="thin"
                 data-testid="reservation__pricing-terms"
               >
-                <AccordionContent>
-                  <Sanitize html={pricingTermsContent} />
-                </AccordionContent>
+                <Sanitize html={pricingTermsContent} />
               </Accordion>
             )}
             <Accordion
@@ -559,17 +546,13 @@ function Reservation({
               data-testid="reservation__terms-of-use"
             >
               {serviceSpecificTermsContent && (
-                <AccordionContent>
-                  <Sanitize html={serviceSpecificTermsContent} />
-                </AccordionContent>
+                <Sanitize html={serviceSpecificTermsContent} />
+              )}
+              {termsOfUse?.genericTerms != null && (
+                <Sanitize
+                  html={getTranslation(termsOfUse.genericTerms, "text")}
+                />
               )}
-              <AccordionContent>
-                {termsOfUse?.genericTerms != null && (
-                  <Sanitize
-                    html={getTranslation(termsOfUse.genericTerms, "text")}
-                  />
-                )}
-              </AccordionContent>
             </Accordion>
           </div>
           <AddressSection reservationUnit={reservationUnit} />