diff --git a/app/[lang]/(live)/(protected)/my-pages/[...path]/page.module.css b/app/[lang]/(live)/(protected)/my-pages/[...path]/page.module.css index e8bcab1ba..f1ce5c9b5 100644 --- a/app/[lang]/(live)/(protected)/my-pages/[...path]/page.module.css +++ b/app/[lang]/(live)/(protected)/my-pages/[...path]/page.module.css @@ -3,6 +3,7 @@ gap: var(--Spacing-x5); padding-left: var(--Spacing-x2); padding-right: var(--Spacing-x2); + align-content: flex-start; } @media screen and (min-width: 1367px) { @@ -11,4 +12,4 @@ padding-left: var(--Spacing-x0); padding-right: var(--Spacing-x0); } -} \ No newline at end of file +} diff --git a/components/Loyalty/Blocks/CardsGrid/cardsGrid.module.css b/components/Loyalty/Blocks/CardsGrid/cardsGrid.module.css deleted file mode 100644 index 35fb852f4..000000000 --- a/components/Loyalty/Blocks/CardsGrid/cardsGrid.module.css +++ /dev/null @@ -1,4 +0,0 @@ -.section { - display: grid; - gap: var(--Spacing-x2); -} diff --git a/components/Loyalty/Blocks/CardsGrid/index.tsx b/components/Loyalty/Blocks/CardsGrid/index.tsx index 3a4bcea56..da47d46d1 100644 --- a/components/Loyalty/Blocks/CardsGrid/index.tsx +++ b/components/Loyalty/Blocks/CardsGrid/index.tsx @@ -1,14 +1,13 @@ -import Header from "@/components/SectionHeader" +import SectionContainer from "@/components/Section/Container" +import Header from "@/components/Section/Header" import Card from "@/components/TempDesignSystem/Card" import Grids from "@/components/TempDesignSystem/Grids" -import styles from "./cardsGrid.module.css" - import { CardsGridProps } from "@/types/components/loyalty/blocks" export default function CardsGrid({ cards_grid }: CardsGridProps) { return ( -
+
{cards_grid.cards.map((card) => ( @@ -23,6 +22,6 @@ export default function CardsGrid({ cards_grid }: CardsGridProps) { /> ))} -
+ ) } diff --git a/components/Loyalty/Blocks/DynamicContent/dynamicContent.module.css b/components/Loyalty/Blocks/DynamicContent/dynamicContent.module.css index faaad3652..97082479d 100644 --- a/components/Loyalty/Blocks/DynamicContent/dynamicContent.module.css +++ b/components/Loyalty/Blocks/DynamicContent/dynamicContent.module.css @@ -1,6 +1,4 @@ .container { - display: grid; - gap: var(--Spacing-x4); /* These negative margins are needed for horizontally scrollable lists of cards */ margin-right: calc(0px - var(--Spacing-x2)); overflow-x: hidden; diff --git a/components/Loyalty/Blocks/DynamicContent/index.tsx b/components/Loyalty/Blocks/DynamicContent/index.tsx index f40719452..7ad602a4e 100644 --- a/components/Loyalty/Blocks/DynamicContent/index.tsx +++ b/components/Loyalty/Blocks/DynamicContent/index.tsx @@ -1,7 +1,8 @@ import { serverClient } from "@/lib/trpc/server" import { auth } from "@/auth" -import Header from "@/components/SectionHeader" +import SectionContainer from "@/components/Section/Container" +import Header from "@/components/Section/Header" import HowItWorks from "./HowItWorks" import LoyaltyLevels from "./LoyaltyLevels" @@ -46,7 +47,7 @@ export default function DynamicContent({ ) return ( -
+ {displayHeader ? (
) : null} -
+ ) } diff --git a/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css b/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css index a92d55d1d..0c178c192 100644 --- a/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css +++ b/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css @@ -1,8 +1,3 @@ -.container { - display: grid; - gap: var(--Spacing-x7); -} - .script { transform: rotate(-2deg); } @@ -18,4 +13,4 @@ justify-content: center; min-height: 280px; padding: var(--Spacing-x7) var(--Spacing-x3); -} \ No newline at end of file +} diff --git a/components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx b/components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx index 818b2be30..5b254bfb1 100644 --- a/components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx +++ b/components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx @@ -1,7 +1,8 @@ import { MembershipLevelEnum } from "@/constants/membershipLevels" import { serverClient } from "@/lib/trpc/server" -import Header from "@/components/SectionHeader" +import SectionContainer from "@/components/Section/Container" +import Header from "@/components/Section/Header" import Grids from "@/components/TempDesignSystem/Grids" import Link from "@/components/TempDesignSystem/Link" import BiroScript from "@/components/TempDesignSystem/Text/BiroScript" @@ -45,7 +46,7 @@ export default async function CurrentBenefitsBlock({ } return ( -
+
{currentLevel.benefits.map((benefit, idx) => ( @@ -63,6 +64,6 @@ export default async function CurrentBenefitsBlock({ ))} -
+ ) } diff --git a/components/MyPages/Blocks/Benefits/NextLevel/index.tsx b/components/MyPages/Blocks/Benefits/NextLevel/index.tsx index 0b6cf2b19..859ab815b 100644 --- a/components/MyPages/Blocks/Benefits/NextLevel/index.tsx +++ b/components/MyPages/Blocks/Benefits/NextLevel/index.tsx @@ -2,7 +2,8 @@ import { Lock } from "react-feather" import { serverClient } from "@/lib/trpc/server" -import Header from "@/components/SectionHeader" +import SectionContainer from "@/components/Section/Container" +import Header from "@/components/Section/Header" import Button from "@/components/TempDesignSystem/Button" import Chip from "@/components/TempDesignSystem/Chip" import Grids from "@/components/TempDesignSystem/Grids" @@ -23,7 +24,7 @@ export default async function NextLevelBenefitsBlock({ const { nextLevel, perks } = await serverClient().user.benefits.nextLevel() const { formatMessage } = await getIntl() return ( -
+
{perks.map((perk) => ( @@ -53,6 +54,6 @@ export default async function NextLevelBenefitsBlock({ {formatMessage({ id: "Explore all levels and benefits" })} -
+ ) } diff --git a/components/MyPages/Blocks/Benefits/NextLevel/next.module.css b/components/MyPages/Blocks/Benefits/NextLevel/next.module.css index 7a28871e2..ad7bad8de 100644 --- a/components/MyPages/Blocks/Benefits/NextLevel/next.module.css +++ b/components/MyPages/Blocks/Benefits/NextLevel/next.module.css @@ -1,8 +1,3 @@ -.container { - display: grid; - gap: var(--Spacing-x7); -} - .card { align-items: center; background-color: var(--Scandic-Brand-Burgundy); @@ -20,4 +15,4 @@ .link { justify-self: center; -} \ No newline at end of file +} diff --git a/components/MyPages/Blocks/Challenges/challenges.module.css b/components/MyPages/Blocks/Challenges/challenges.module.css deleted file mode 100644 index efe78075e..000000000 --- a/components/MyPages/Blocks/Challenges/challenges.module.css +++ /dev/null @@ -1,115 +0,0 @@ -/* TODO: Fix when brought back into the loop */ - -.challenges { - --card-height: 23.6rem; - --gap: 0.4rem; - --radius: 0.4rem; - - display: grid; - gap: 1.6rem; - grid-template-areas: - "header" - "section" - "aside"; -} - -.header { - grid-area: header; -} - -.section { - display: grid; - gap: 0.8rem; - grid-area: section; -} - -.journeys { - display: grid; - gap: var(--gap); - grid-template-columns: 1fr 1fr; -} - -.journey { - align-content: center; - background-color: var(--some-grey-color, rgba(0, 0, 0, 0.2)); - border-radius: var(--radius); - display: grid; - gap: 1.2rem; - height: var(--card-height); - justify-items: center; -} - -.journey:first-of-type { - background-color: var(--some-grey-color, rgba(0, 0, 0, 0.1)); -} - -.aside { - display: grid; - gap: 0.8rem; - grid-area: aside; - grid-template-rows: auto 1fr; -} - -.victories { - display: grid; - gap: var(--gap); - grid-template-columns: 1fr 1fr; - grid-template-rows: repeat(2, minmax(11.6rem, 1fr)); -} - -.victory { - align-content: center; - background-color: var(--some-grey-color, rgba(0, 0, 0, 0.1)); - border-radius: var(--radius); - display: grid; - gap: 0.6rem; - height: 100%; - justify-items: center; -} - -.victory:first-of-type { - background-color: var(--some-grey-color, rgba(3, 3, 3, 0.3)); -} - -.victory:last-of-type { - background-color: var(--some-grey-color, rgba(0, 0, 0, 0.2)); -} - -.circle { - display: none; -} - -@media screen and (max-width: 1366px) { - .victory:first-of-type { - grid-row: 1 / -1; - } -} - -@media screen and (min-width: 1367px) { - .challenges { - gap: 2.6rem 1.5rem; - grid-template-areas: - "header header" - "section aside"; - grid-template-columns: 1fr 16.6rem; - } - - .journeys { - grid-template-columns: 1fr; - } - - .victories { - grid-template-columns: 1fr; - grid-template-rows: var(--card-height) 1fr 1fr; - } - - .circle { - align-items: center; - background-color: var(--Main-Grey-White); - border-radius: 50%; - display: flex; - height: 2rem; - justify-content: center; - width: 2rem; - } -} diff --git a/components/MyPages/Blocks/Challenges/index.tsx b/components/MyPages/Blocks/Challenges/index.tsx deleted file mode 100644 index 693edda91..000000000 --- a/components/MyPages/Blocks/Challenges/index.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import Image from "@/components/Image" -import BiroScript from "@/components/TempDesignSystem/Text/BiroScript" -import Title from "@/components/TempDesignSystem/Text/Title" -import { getIntl } from "@/i18n" - -import styles from "./challenges.module.css" - -import type { ChallengesProps } from "@/types/components/myPages/myPage/challenges" - -export default async function Challenges({ - journeys, - victories, -}: ChallengesProps) { - const { formatMessage } = await getIntl() - return ( -
-
- - {formatMessage({ id: "Your Challenges Conquer & Earn!" })} - -
-
-
- {formatMessage({ id: "On your journey" })} -
-
- {journeys.map((journey) => ( -
- {journey.tag} - - {journey.title} - -
- ))} -
-
- -
- ) -} diff --git a/components/MyPages/Blocks/Overview/index.tsx b/components/MyPages/Blocks/Overview/index.tsx index 814061fad..0f4696d46 100644 --- a/components/MyPages/Blocks/Overview/index.tsx +++ b/components/MyPages/Blocks/Overview/index.tsx @@ -1,6 +1,7 @@ import { serverClient } from "@/lib/trpc/server" -import Header from "@/components/SectionHeader" +import SectionContainer from "@/components/Section/Container" +import Header from "@/components/Section/Header" import Divider from "@/components/TempDesignSystem/Divider" import Friend from "./Friend" @@ -22,13 +23,13 @@ export default async function Overview({ return null } return ( -
+
-
+ ) } diff --git a/components/MyPages/Blocks/Overview/overview.module.css b/components/MyPages/Blocks/Overview/overview.module.css index 38e7cd44d..80093743d 100644 --- a/components/MyPages/Blocks/Overview/overview.module.css +++ b/components/MyPages/Blocks/Overview/overview.module.css @@ -1,8 +1,3 @@ -.container { - display: grid; - gap: var(--Spacing-x7); -} - .overview { background-color: var(--Scandic-Brand-Scandic-Red); border-radius: var(--Corner-radius-xLarge); diff --git a/components/MyPages/Blocks/Points/CurrentPointsBalance/index.tsx b/components/MyPages/Blocks/Points/CurrentPointsBalance/index.tsx index 71549390d..27ec6317b 100644 --- a/components/MyPages/Blocks/Points/CurrentPointsBalance/index.tsx +++ b/components/MyPages/Blocks/Points/CurrentPointsBalance/index.tsx @@ -1,6 +1,7 @@ import { serverClient } from "@/lib/trpc/server" -import Header from "@/components/SectionHeader" +import SectionContainer from "@/components/Section/Container" +import Header from "@/components/Section/Header" import { getIntl } from "@/i18n" import { getMembership } from "@/utils/user" @@ -20,18 +21,18 @@ async function CurrentPointsBalance({ } const membership = getMembership(user.memberships) return ( -
+

{`${formatMessage({ id: "Total Points" })}*`}

{`${formatMessage({ id: "Points" })}: ${membership ? membership.currentPoints : "N/A"}`}

-

+

{`*${formatMessage({ id: "Points may take up to 10 days to be displayed." })}`}

-
+ ) } diff --git a/components/MyPages/Blocks/Points/EarnAndBurn/index.tsx b/components/MyPages/Blocks/Points/EarnAndBurn/index.tsx index 57d117843..f0b4d2ff0 100644 --- a/components/MyPages/Blocks/Points/EarnAndBurn/index.tsx +++ b/components/MyPages/Blocks/Points/EarnAndBurn/index.tsx @@ -1,11 +1,10 @@ import { serverClient } from "@/lib/trpc/server" -import Header from "@/components/SectionHeader" +import SectionContainer from "@/components/Section/Container" +import Header from "@/components/Section/Header" import ClientEarnAndBurn from "./Client" -import styles from "./earnAndBurn.module.css" - import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage" export default async function EarnAndBurn({ @@ -20,9 +19,9 @@ export default async function EarnAndBurn({ return null } return ( -
+
-
+ ) } diff --git a/components/MyPages/Blocks/Shortcuts/index.tsx b/components/MyPages/Blocks/Shortcuts/index.tsx index 6bce698b2..aeb4fe264 100644 --- a/components/MyPages/Blocks/Shortcuts/index.tsx +++ b/components/MyPages/Blocks/Shortcuts/index.tsx @@ -1,5 +1,6 @@ import { ArrowRightIcon } from "@/components/Icons" -import Header from "@/components/SectionHeader" +import SectionContainer from "@/components/Section/Container" +import Header from "@/components/Section/Header" import Link from "@/components/TempDesignSystem/Link" import Body from "@/components/TempDesignSystem/Text/Body" @@ -14,7 +15,7 @@ export default function Shortcuts({ title, }: ShortcutsProps) { return ( -
+
))}
- + ) } diff --git a/components/MyPages/Blocks/Shortcuts/shortcuts.module.css b/components/MyPages/Blocks/Shortcuts/shortcuts.module.css index bfa66ca53..321611746 100644 --- a/components/MyPages/Blocks/Shortcuts/shortcuts.module.css +++ b/components/MyPages/Blocks/Shortcuts/shortcuts.module.css @@ -1,8 +1,3 @@ -.shortcuts { - display: grid; - gap: var(--Spacing-x4); -} - .links { display: grid; background-color: var(--Scandic-Brand-Warm-White); diff --git a/components/MyPages/Blocks/Stays/Container/container.module.css b/components/MyPages/Blocks/Stays/Container/container.module.css deleted file mode 100644 index 0481c359b..000000000 --- a/components/MyPages/Blocks/Stays/Container/container.module.css +++ /dev/null @@ -1,10 +0,0 @@ -.container { - display: grid; - gap: var(--Spacing-x3); -} - -@media screen and (min-width: 1367px) { - .container { - gap: var(--Spacing-x7); - } -} diff --git a/components/MyPages/Blocks/Stays/Container/index.tsx b/components/MyPages/Blocks/Stays/Container/index.tsx deleted file mode 100644 index db08a3348..000000000 --- a/components/MyPages/Blocks/Stays/Container/index.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import styles from "./container.module.css" - -export default function Container({ children }: React.PropsWithChildren) { - return
{children}
-} diff --git a/components/MyPages/Blocks/Stays/Previous/index.tsx b/components/MyPages/Blocks/Stays/Previous/index.tsx index 818b68613..49c4316a5 100644 --- a/components/MyPages/Blocks/Stays/Previous/index.tsx +++ b/components/MyPages/Blocks/Stays/Previous/index.tsx @@ -1,8 +1,8 @@ import { serverClient } from "@/lib/trpc/server" -import SectionHeader from "@/components/SectionHeader" +import SectionContainer from "@/components/Section/Container" +import SectionHeader from "@/components/Section/Header" -import Container from "../Container" import ClientPreviousStays from "./Client" import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage" @@ -18,12 +18,12 @@ export default async function PreviousStays({ return null } return ( - + - + ) } diff --git a/components/MyPages/Blocks/Stays/Soonest/index.tsx b/components/MyPages/Blocks/Stays/Soonest/index.tsx index 146404964..2bd28a3e3 100644 --- a/components/MyPages/Blocks/Stays/Soonest/index.tsx +++ b/components/MyPages/Blocks/Stays/Soonest/index.tsx @@ -1,13 +1,12 @@ import { serverClient } from "@/lib/trpc/server" -import Header from "@/components/SectionHeader" +import SectionContainer from "@/components/Section/Container" +import Header from "@/components/Section/Header" import Grids from "@/components/TempDesignSystem/Grids" import StayCard from "../StayCard" import EmptyUpcomingStaysBlock from "./EmptyUpcomingStays" -import styles from "./soonest.module.css" - import { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage" export default async function SoonestStays({ @@ -22,7 +21,7 @@ export default async function SoonestStays({ } return ( -
+
{response.data.length ? ( @@ -37,6 +36,6 @@ export default async function SoonestStays({ ) : ( )} -
+ ) } diff --git a/components/MyPages/Blocks/Stays/Upcoming/index.tsx b/components/MyPages/Blocks/Stays/Upcoming/index.tsx index 4cc065c14..7e44e76ca 100644 --- a/components/MyPages/Blocks/Stays/Upcoming/index.tsx +++ b/components/MyPages/Blocks/Stays/Upcoming/index.tsx @@ -1,8 +1,8 @@ import { serverClient } from "@/lib/trpc/server" -import SectionHeader from "@/components/SectionHeader" +import SectionContainer from "@/components/Section/Container" +import SectionHeader from "@/components/Section/Header" -import Container from "../Container" import ClientUpcomingStays from "./Client" import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage" @@ -18,12 +18,12 @@ export default async function UpcomingStays({ return null } return ( - + - + ) } diff --git a/components/MyPages/Blocks/Stays/Soonest/soonest.module.css b/components/Section/Container/container.module.css similarity index 55% rename from components/MyPages/Blocks/Stays/Soonest/soonest.module.css rename to components/Section/Container/container.module.css index 6824802b6..230868385 100644 --- a/components/MyPages/Blocks/Stays/Soonest/soonest.module.css +++ b/components/Section/Container/container.module.css @@ -1,4 +1,4 @@ .container { display: grid; - gap: var(--Spacing-x2); + gap: var(--Spacing-x3); } diff --git a/components/Section/Container/index.tsx b/components/Section/Container/index.tsx new file mode 100644 index 000000000..9ea61c26b --- /dev/null +++ b/components/Section/Container/index.tsx @@ -0,0 +1,13 @@ +import styles from "./container.module.css" + +export default function SectionContainer({ + children, + className = "", + ...props +}: React.HTMLAttributes) { + return ( +
+ {children} +
+ ) +} diff --git a/components/SectionHeader/sectionHeader.module.css b/components/Section/Header/header.module.css similarity index 100% rename from components/SectionHeader/sectionHeader.module.css rename to components/Section/Header/header.module.css diff --git a/components/SectionHeader/index.tsx b/components/Section/Header/index.tsx similarity index 94% rename from components/SectionHeader/index.tsx rename to components/Section/Header/index.tsx index 81618a3c2..c4354bd5e 100644 --- a/components/SectionHeader/index.tsx +++ b/components/Section/Header/index.tsx @@ -2,7 +2,7 @@ import Link from "@/components/TempDesignSystem/Link" import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" import Title from "@/components/TempDesignSystem/Text/Title" -import styles from "./sectionHeader.module.css" +import styles from "./header.module.css" import type { HeaderProps } from "@/types/components/myPages/header"