From ac7806558246fb5de1093282084e7b3e910c390e Mon Sep 17 00:00:00 2001 From: Joonatan Kuosa Date: Tue, 12 Nov 2024 15:21:03 +0200 Subject: [PATCH] fix: sanitized content styling --- apps/ui/components/common/Sanitize.tsx | 4 +-- .../reservation-unit/EquipmentList.tsx | 1 + .../ReservationInfoContainer.tsx | 5 ++- .../ReservationUnitStyles.tsx | 11 ------ .../reservation/ReservationInfoCard.tsx | 14 ++++---- apps/ui/pages/reservation-unit/[id].tsx | 13 +++---- apps/ui/pages/reservations/[id]/index.tsx | 35 +++++-------------- 7 files changed, 25 insertions(+), 58 deletions(-) delete mode 100644 apps/ui/components/reservation-unit/ReservationUnitStyles.tsx diff --git a/apps/ui/components/common/Sanitize.tsx b/apps/ui/components/common/Sanitize.tsx index c4ef3c4c5..540033d38 100644 --- 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 index 7367a705a..1bcbdb8d8 100644 --- 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 index 5e03d35c8..14beacab1 100644 --- 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 ( - +
{t("reservationCalendar:reservationInfo")} @@ -81,7 +80,7 @@ export function ReservationInfoContainer({ {reservationUnitIsReservable && ( )} - +
); } diff --git a/apps/ui/components/reservation-unit/ReservationUnitStyles.tsx b/apps/ui/components/reservation-unit/ReservationUnitStyles.tsx deleted file mode 100644 index 69f48be64..000000000 --- a/apps/ui/components/reservation-unit/ReservationUnitStyles.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import styled from "styled-components"; - -// TODO either this is in the wrong file or the name is wrong -// if it's so common to be named "Content" then it should be in a common file -export const Content = styled.div<{ $noMargin?: boolean }>` - /* why? */ - font-size: var(--fontsize-body-l); - line-height: var(--lineheight-l); - white-space: pre-wrap; - word-break: break-word; -`; diff --git a/apps/ui/components/reservation/ReservationInfoCard.tsx b/apps/ui/components/reservation/ReservationInfoCard.tsx index f3315c3c1..6913b7e75 100644 --- 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 index 7ae3e5590..253c26741 100644 --- 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({ - +

{t("reservationUnit:description")}

- +
{equipment?.length > 0 && ( - -

- {t("reservationUnit:equipment")} -

+
+

{t("reservationUnit:equipment")}

- +
)} {reservationUnitIsReservable && (
diff --git a/apps/ui/pages/reservations/[id]/index.tsx b/apps/ui/pages/reservations/[id]/index.tsx index 4a4d5cc89..95dec01a2 100644 --- 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 && ( - - - - )} + {paymentTermsContent && } {cancellationTermsContent && ( - - - + )} )} @@ -548,9 +537,7 @@ function Reservation({ theme="thin" data-testid="reservation__pricing-terms" > - - - + )} {serviceSpecificTermsContent && ( - - - + + )} + {termsOfUse?.genericTerms != null && ( + )} - - {termsOfUse?.genericTerms != null && ( - - )} -