From 8f87d6368cb8369898ce4c0a56a2638824cdb23e Mon Sep 17 00:00:00 2001 From: Simon Emanuelsson Date: Wed, 3 Apr 2024 10:48:52 +0200 Subject: [PATCH] feat(WEB-167): update my pages layout to MVP wireframes --- .../(live)/(protected)/my-pages/_constants.ts | 52 ++-- .../(protected)/my-pages/layout.module.css | 4 +- .../(live)/(protected)/my-pages/layout.tsx | 13 +- .../(protected)/my-pages/page.module.css | 1 + .../(live)/(protected)/my-pages/page.tsx | 7 +- .../Blocks/Challenges/challenges.module.css | 1 - .../Overview/{ => Buttons}/CopyButton.tsx | 0 .../{ => Buttons}/MembershipCardButton.tsx | 0 .../Overview/{ => Buttons}/btn.module.css | 0 .../Blocks/Overview/Friend/friend.module.css | 68 +++++ .../MyPages/Blocks/Overview/Friend/index.tsx | 24 ++ .../MyPages/Blocks/Overview/Mobile/index.tsx | 13 - .../Blocks/Overview/Mobile/mobile.module.css | 16 -- .../Blocks/Overview/Stats/Progress/index.tsx | 20 ++ .../Stats/Progress/progress.module.css | 62 +++++ .../Overview/Stats/QualifyingPoints/index.tsx | 37 +++ .../Stats/QualifyingPoints/points.module.css | 56 ++++ .../Blocks/Overview/Stats/Title/index.tsx | 5 + .../Overview/Stats/Title/title.module.css | 16 ++ .../Overview/Stats/TotalPoints/index.tsx | 16 ++ .../Stats/TotalPoints/totalPoints.module.css | 20 ++ .../MyPages/Blocks/Overview/Stats/index.tsx | 15 ++ .../Blocks/Overview/Stats/stats.module.css | 13 + components/MyPages/Blocks/Overview/index.tsx | 75 +----- .../Blocks/Overview/overview.module.css | 254 +----------------- .../Blocks/Shortcuts/shortcuts.module.css | 1 - .../MyPages/Blocks/UpcomingStays/index.tsx | 6 +- .../Blocks/UpcomingStays/upcoming.module.css | 29 +- .../Header/Breadcrumbs/breadcrumbs.module.css | 4 + .../MyPages/Header/Breadcrumbs/index.tsx | 2 +- components/MyPages/Header/header.module.css | 3 + components/MyPages/Sidebar/index.tsx | 8 +- components/TempDesignSystem/Divider/index.tsx | 4 +- types/components/myPages/friend.ts | 5 + types/components/myPages/qualifyingPoints.ts | 5 + types/components/myPages/stats.ts | 5 + types/components/myPages/totalPoints.ts | 5 + 37 files changed, 467 insertions(+), 398 deletions(-) rename components/MyPages/Blocks/Overview/{ => Buttons}/CopyButton.tsx (100%) rename components/MyPages/Blocks/Overview/{ => Buttons}/MembershipCardButton.tsx (100%) rename components/MyPages/Blocks/Overview/{ => Buttons}/btn.module.css (100%) create mode 100644 components/MyPages/Blocks/Overview/Friend/friend.module.css create mode 100644 components/MyPages/Blocks/Overview/Friend/index.tsx delete mode 100644 components/MyPages/Blocks/Overview/Mobile/index.tsx delete mode 100644 components/MyPages/Blocks/Overview/Mobile/mobile.module.css create mode 100644 components/MyPages/Blocks/Overview/Stats/Progress/index.tsx create mode 100644 components/MyPages/Blocks/Overview/Stats/Progress/progress.module.css create mode 100644 components/MyPages/Blocks/Overview/Stats/QualifyingPoints/index.tsx create mode 100644 components/MyPages/Blocks/Overview/Stats/QualifyingPoints/points.module.css create mode 100644 components/MyPages/Blocks/Overview/Stats/Title/index.tsx create mode 100644 components/MyPages/Blocks/Overview/Stats/Title/title.module.css create mode 100644 components/MyPages/Blocks/Overview/Stats/TotalPoints/index.tsx create mode 100644 components/MyPages/Blocks/Overview/Stats/TotalPoints/totalPoints.module.css create mode 100644 components/MyPages/Blocks/Overview/Stats/index.tsx create mode 100644 components/MyPages/Blocks/Overview/Stats/stats.module.css create mode 100644 types/components/myPages/friend.ts create mode 100644 types/components/myPages/qualifyingPoints.ts create mode 100644 types/components/myPages/stats.ts create mode 100644 types/components/myPages/totalPoints.ts diff --git a/app/[lang]/(live)/(protected)/my-pages/_constants.ts b/app/[lang]/(live)/(protected)/my-pages/_constants.ts index a55ba2b69..a0669b48b 100644 --- a/app/[lang]/(live)/(protected)/my-pages/_constants.ts +++ b/app/[lang]/(live)/(protected)/my-pages/_constants.ts @@ -28,32 +28,40 @@ export const challenges = { export const shortcuts = [ { href: "#", - title: "Scandic Friends shop", + title: "My Benefit", }, { href: "#", - title: "Fire and safety", - }, - { - href: "#", - title: "Our sustainability work", - }, - { - href: "#", - title: "How you earn points", - }, - { - href: "#", - title: "How you use points", - }, - { - href: "#", - title: "Missing points", - }, - { - href: "#", - title: "Our term and conditions", + title: "Program overview", }, + // { + // href: "#", + // title: "Scandic Friends shop", + // }, + // { + // href: "#", + // title: "Fire and safety", + // }, + // { + // href: "#", + // title: "Our sustainability work", + // }, + // { + // href: "#", + // title: "How you earn points", + // }, + // { + // href: "#", + // title: "How you use points", + // }, + // { + // href: "#", + // title: "Missing points", + // }, + // { + // href: "#", + // title: "Our term and conditions", + // }, ] export const stays = [ diff --git a/app/[lang]/(live)/(protected)/my-pages/layout.module.css b/app/[lang]/(live)/(protected)/my-pages/layout.module.css index 4ad216198..bc8621afb 100644 --- a/app/[lang]/(live)/(protected)/my-pages/layout.module.css +++ b/app/[lang]/(live)/(protected)/my-pages/layout.module.css @@ -10,7 +10,7 @@ .content { display: grid; padding: 0 0 17.5rem; - padding-bottom: 2.4rem; + padding-bottom: 7.7rem; padding-left: 0; padding-right: 0; padding-top: 0; @@ -18,7 +18,7 @@ @media screen and (min-width: 950px) { .page { - gap: 4.4rem; + gap: 5.8rem; } .content { diff --git a/app/[lang]/(live)/(protected)/my-pages/layout.tsx b/app/[lang]/(live)/(protected)/my-pages/layout.tsx index 46172baa9..c9cb2e5d6 100644 --- a/app/[lang]/(live)/(protected)/my-pages/layout.tsx +++ b/app/[lang]/(live)/(protected)/my-pages/layout.tsx @@ -1,6 +1,5 @@ import { firaMono, firaSans } from "@/app/[lang]/(live)/fonts" -import Breadcrumbs from "@/components/MyPages/Header/Breadcrumbs" import Header from "@/components/MyPages/Header" import Sidebar from "@/components/MyPages/Sidebar" @@ -13,14 +12,12 @@ export default function MyPagesLayout({ params, }: React.PropsWithChildren>) { return ( -
+
-
+
-
{children}
-
-
+ {children} + + ) } diff --git a/app/[lang]/(live)/(protected)/my-pages/page.module.css b/app/[lang]/(live)/(protected)/my-pages/page.module.css index 58bb298ff..3e1bb051a 100644 --- a/app/[lang]/(live)/(protected)/my-pages/page.module.css +++ b/app/[lang]/(live)/(protected)/my-pages/page.module.css @@ -1,6 +1,7 @@ .blocks { display: grid; gap: 4.2rem; + max-width: var(--max-width); padding-left: 2rem; padding-right: 2rem; } diff --git a/app/[lang]/(live)/(protected)/my-pages/page.tsx b/app/[lang]/(live)/(protected)/my-pages/page.tsx index a7bce8c55..68ef7cd9a 100644 --- a/app/[lang]/(live)/(protected)/my-pages/page.tsx +++ b/app/[lang]/(live)/(protected)/my-pages/page.tsx @@ -2,7 +2,6 @@ import { serverClient } from "@/lib/trpc/server" import { challenges, shortcuts, stays } from "./_constants" -import Challenges from "@/components/MyPages/Blocks/Challenges" import Overview from "@/components/MyPages/Blocks/Overview" import Shortcuts from "@/components/MyPages/Blocks/Shortcuts" import UpcomingStays from "@/components/MyPages/Blocks/UpcomingStays" @@ -25,12 +24,10 @@ export default async function MyPage({ params }: PageArgs) { victories: challenges.victories, } return ( -
+
- {/* Deals You Can't Miss - TBD */} - -
+ ) } diff --git a/components/MyPages/Blocks/Challenges/challenges.module.css b/components/MyPages/Blocks/Challenges/challenges.module.css index 440958e2a..1520ca2a4 100644 --- a/components/MyPages/Blocks/Challenges/challenges.module.css +++ b/components/MyPages/Blocks/Challenges/challenges.module.css @@ -9,7 +9,6 @@ "header" "section" "aside"; - max-width: var(--max-width); } .header { diff --git a/components/MyPages/Blocks/Overview/CopyButton.tsx b/components/MyPages/Blocks/Overview/Buttons/CopyButton.tsx similarity index 100% rename from components/MyPages/Blocks/Overview/CopyButton.tsx rename to components/MyPages/Blocks/Overview/Buttons/CopyButton.tsx diff --git a/components/MyPages/Blocks/Overview/MembershipCardButton.tsx b/components/MyPages/Blocks/Overview/Buttons/MembershipCardButton.tsx similarity index 100% rename from components/MyPages/Blocks/Overview/MembershipCardButton.tsx rename to components/MyPages/Blocks/Overview/Buttons/MembershipCardButton.tsx diff --git a/components/MyPages/Blocks/Overview/btn.module.css b/components/MyPages/Blocks/Overview/Buttons/btn.module.css similarity index 100% rename from components/MyPages/Blocks/Overview/btn.module.css rename to components/MyPages/Blocks/Overview/Buttons/btn.module.css diff --git a/components/MyPages/Blocks/Overview/Friend/friend.module.css b/components/MyPages/Blocks/Overview/Friend/friend.module.css new file mode 100644 index 000000000..dc1022daf --- /dev/null +++ b/components/MyPages/Blocks/Overview/Friend/friend.module.css @@ -0,0 +1,68 @@ +.friend { + align-items: center; + display: flex; + flex-direction: column; + justify-content: center; +} + +.level { + color: var(--some-black-color, #000); + /* font-family: var(--ff-biro-script-plus); */ + font-size: 2.1rem; + font-weight: 400; + letter-spacing: 4%; + line-height: 3.6rem; + margin: 0; +} + +.name { + color: var(--some-black-color, #111); + /* font-family: var(--ff-brandon-text); */ + font-size: 2.8rem; + font-weight: 900; + letter-spacing: -3%; + line-height: 2.8rem; + margin: 0; + text-transform: uppercase; +} + +.membershipContainer { + align-items: center; + display: flex; + gap: 0.8rem; +} + +.membershipId { + color: var(--some-black-color, #1e1e1e); + font-family: var(--ff-fira-mono); + font-size: 1.5rem; + font-weight: 500; + letter-spacing: 6%; + line-height: 1.8rem; + margin: 0; +} + +@media screen and (max-width: 950px) { + .friend { + gap: 1.2rem; + } + + .level { + transform: translate(-60%, 40%) rotate(-20deg); + } +} + +@media screen and (min-width: 950px) { + .friend { + justify-self: flex-end; + } + + .image { + margin-bottom: 2.6rem; + margin-top: 1.1rem; + } + + .name { + margin-bottom: 1.2rem; + } +} diff --git a/components/MyPages/Blocks/Overview/Friend/index.tsx b/components/MyPages/Blocks/Overview/Friend/index.tsx new file mode 100644 index 000000000..798e92264 --- /dev/null +++ b/components/MyPages/Blocks/Overview/Friend/index.tsx @@ -0,0 +1,24 @@ +import Image from "@/components/Image" + +import styles from "./friend.module.css" + +import type { FriendProps } from "@/types/components/myPages/friend" + +export default function Friend({ user }: FriendProps) { + return ( +
+

Current level:

+ Good Friend +

{user.name}

+
+

{user.membershipId}

+
+
+ ) +} diff --git a/components/MyPages/Blocks/Overview/Mobile/index.tsx b/components/MyPages/Blocks/Overview/Mobile/index.tsx deleted file mode 100644 index c93ffae1d..000000000 --- a/components/MyPages/Blocks/Overview/Mobile/index.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import Breadcrumbs from "@/components/MyPages/Header/Breadcrumbs" -import Title from "@/components/MyPages/Title" - -import styles from "./mobile.module.css" - -export default function OverviewMobile() { - return ( -
- - Good Morning [NAME] -
- ) -} diff --git a/components/MyPages/Blocks/Overview/Mobile/mobile.module.css b/components/MyPages/Blocks/Overview/Mobile/mobile.module.css deleted file mode 100644 index 10f2fbc77..000000000 --- a/components/MyPages/Blocks/Overview/Mobile/mobile.module.css +++ /dev/null @@ -1,16 +0,0 @@ -.overviewMobile { - background-color: var(--some-grey-color, #f2f2f2); - left: 50%; - margin-left: -50vw; - margin-right: -50vw; - padding: 3.5rem 2rem 2rem; - position: relative; - right: 50%; - width: 100dvw; -} - -@media screen and (min-width: 950px) { - .overviewMobile { - display: none; - } -} diff --git a/components/MyPages/Blocks/Overview/Stats/Progress/index.tsx b/components/MyPages/Blocks/Overview/Stats/Progress/index.tsx new file mode 100644 index 000000000..d275459e9 --- /dev/null +++ b/components/MyPages/Blocks/Overview/Stats/Progress/index.tsx @@ -0,0 +1,20 @@ +import Divider from "@/components/TempDesignSystem/Divider" +import Title from "../Title" + +import styles from "./progress.module.css" + +export default function Progress() { + return ( +
+
+ 14 680 points until next level + Progress +
+ +
+

14 680 points until next level

+

Close friend

+
+
+ ) +} diff --git a/components/MyPages/Blocks/Overview/Stats/Progress/progress.module.css b/components/MyPages/Blocks/Overview/Stats/Progress/progress.module.css new file mode 100644 index 000000000..14f6d5cb8 --- /dev/null +++ b/components/MyPages/Blocks/Overview/Stats/Progress/progress.module.css @@ -0,0 +1,62 @@ +.header :first-child { + display: none; +} + +.divider { + display: none; +} + +.container { + align-items: baseline; + display: flex; + gap: 0.7rem; +} + +.nextLevel { + color: var(--some-black-color, #000); + /* font-family: var(--ff-brandon-text); */ + font-size: 1.2rem; + font-weight: 400; + letter-spacing: 0.6%; + margin: 0; +} + +.target { + color: var(--some-black-color, #000); + /* font-family: var(--ff-biro-script-plus); */ + font-size: 1.8rem; + font-weight: 400; + letter-spacing: 4%; + margin: 0; +} + +@media screen and (max-width: 950px) { + .progress { + display: grid; + gap: 0.2rem; + } +} + +@media screen and (min-width: 950px) { + .header :first-child { + display: block; + } + + .header :nth-child(2n) { + display: none; + } + + .divider { + display: block; + margin: 0.3rem 0 1.2rem; + } + + .nextLevel { + display: none; + } + + .target { + font-size: 1.8rem; + line-height: 3rem; + } +} diff --git a/components/MyPages/Blocks/Overview/Stats/QualifyingPoints/index.tsx b/components/MyPages/Blocks/Overview/Stats/QualifyingPoints/index.tsx new file mode 100644 index 000000000..d7e6ffd25 --- /dev/null +++ b/components/MyPages/Blocks/Overview/Stats/QualifyingPoints/index.tsx @@ -0,0 +1,37 @@ +import Divider from "@/components/TempDesignSystem/Divider" +import Image from "@/components/Image" + +import styles from "./points.module.css" + +import type { QualifyingPointsProps } from "@/types/components/myPages/qualifyingPoints" + +export default function QualifyingPoints({ user }: QualifyingPointsProps) { + return ( +
+

Progress

+ +
+
+ Arrow Up Icon +

{user.qualifyingPoints}

+
Qualifying points
+
+
+ Arrow Up Icon +

{user.nights}

+
Nights
+
+
+
+ ) +} diff --git a/components/MyPages/Blocks/Overview/Stats/QualifyingPoints/points.module.css b/components/MyPages/Blocks/Overview/Stats/QualifyingPoints/points.module.css new file mode 100644 index 000000000..d381756ad --- /dev/null +++ b/components/MyPages/Blocks/Overview/Stats/QualifyingPoints/points.module.css @@ -0,0 +1,56 @@ +.qualifyingPoints { + display: none; +} + +.title { + color: var(--some-grey-color, #000); + /* font-family: var(--ff-brandon-text); */ + font-size: 1.5rem; + font-weight: 500; + letter-spacing: 0.6%; + line-height: 1.7rem; + margin: 0 0 0.7rem; +} + +@media screen and (min-width: 950px) { + .qualifyingPoints { + display: block; + } + + .container { + display: grid; + gap: 3.8rem; + grid-template-columns: auto 1fr; + margin-top: 1.5rem; + } + + .title { + color: var(--some-grey-color, #4f4f4f); + font-size: 1.2rem; + } + + .points { + align-items: center; + display: grid; + gap: 1rem; + grid-template-columns: auto 1fr; + } + + .point { + /* font-family: var(--ff-brandon-text); */ + font-size: 2.7rem; + font-weight: 900; + line-height: 2.7rem; + margin: 0; + } + + .pointTitle { + font-family: var(--ff-fira-sans); + font-size: 1.2rem; + font-weight: 400; + letter-spacing: 0.6%; + line-height: 1.4rem; + grid-column: 1/-1; + margin: 0; + } +} diff --git a/components/MyPages/Blocks/Overview/Stats/Title/index.tsx b/components/MyPages/Blocks/Overview/Stats/Title/index.tsx new file mode 100644 index 000000000..8b8e68bc8 --- /dev/null +++ b/components/MyPages/Blocks/Overview/Stats/Title/index.tsx @@ -0,0 +1,5 @@ +import styles from "./title.module.css" + +export default function Title({ children }: React.PropsWithChildren) { + return

{children}

+} diff --git a/components/MyPages/Blocks/Overview/Stats/Title/title.module.css b/components/MyPages/Blocks/Overview/Stats/Title/title.module.css new file mode 100644 index 000000000..b7bd35d9c --- /dev/null +++ b/components/MyPages/Blocks/Overview/Stats/Title/title.module.css @@ -0,0 +1,16 @@ +.title { + color: var(--some-grey-color, #000); + /* font-family: var(--ff-brandon-text); */ + font-size: 1.5rem; + font-weight: 500; + letter-spacing: 0.6%; + line-height: 1.7rem; + margin: 0; +} + +@media screen and (min-width: 950px) { + .title { + color: var(--some-grey-color, #4f4f4f); + font-size: 1.2rem; + } +} diff --git a/components/MyPages/Blocks/Overview/Stats/TotalPoints/index.tsx b/components/MyPages/Blocks/Overview/Stats/TotalPoints/index.tsx new file mode 100644 index 000000000..abc52bb61 --- /dev/null +++ b/components/MyPages/Blocks/Overview/Stats/TotalPoints/index.tsx @@ -0,0 +1,16 @@ +import Divider from "@/components/TempDesignSystem/Divider" +import Title from "../Title" + +import styles from "./totalPoints.module.css" + +import type { TotalPointsProps } from "@/types/components/myPages/totalPoints" + +export default function TotalPoints({ user }: TotalPointsProps) { + return ( +
+ Total Points + +

{user.points}

+
+ ) +} diff --git a/components/MyPages/Blocks/Overview/Stats/TotalPoints/totalPoints.module.css b/components/MyPages/Blocks/Overview/Stats/TotalPoints/totalPoints.module.css new file mode 100644 index 000000000..70cf5ccb3 --- /dev/null +++ b/components/MyPages/Blocks/Overview/Stats/TotalPoints/totalPoints.module.css @@ -0,0 +1,20 @@ +.divider { + margin-bottom: 1rem; + margin-top: 0.3rem; +} + +.points { + color: var(--some-black-color, #111); + /* font-family: var(--ff-brandon-text); */ + font-size: 3.7rem; + font-weight: 900; + letter-spacing: -3%; + line-height: 3.7rem; + margin: 0; +} + +@media screen and (min-width: 950px) { + .divider { + margin-bottom: 1.2rem; + } +} diff --git a/components/MyPages/Blocks/Overview/Stats/index.tsx b/components/MyPages/Blocks/Overview/Stats/index.tsx new file mode 100644 index 000000000..22a69bc3e --- /dev/null +++ b/components/MyPages/Blocks/Overview/Stats/index.tsx @@ -0,0 +1,15 @@ +import Progress from "./Progress" +import TotalPoints from "./TotalPoints" + +import styles from "./stats.module.css" + +import type { StatsProps } from "@/types/components/myPages/stats" + +export default function Stats({ user }: StatsProps) { + return ( +
+ + +
+ ) +} diff --git a/components/MyPages/Blocks/Overview/Stats/stats.module.css b/components/MyPages/Blocks/Overview/Stats/stats.module.css new file mode 100644 index 000000000..2a4efcfab --- /dev/null +++ b/components/MyPages/Blocks/Overview/Stats/stats.module.css @@ -0,0 +1,13 @@ +.stats { + display: flex; + flex-direction: column; + gap: 0.7rem; +} + +@media screen and (min-width: 950px) { + .stats { + gap: 1.4rem; + justify-content: center; + max-width: 32rem; + } +} diff --git a/components/MyPages/Blocks/Overview/index.tsx b/components/MyPages/Blocks/Overview/index.tsx index c672e2027..82657ea30 100644 --- a/components/MyPages/Blocks/Overview/index.tsx +++ b/components/MyPages/Blocks/Overview/index.tsx @@ -1,83 +1,20 @@ -import CopyButton from "./CopyButton" -import Divider from "@/components/TempDesignSystem/Divider" -import Image from "@/components/Image" -import MembershipCardButton from "./MembershipCardButton" -import ProgressBar from "@/components/TempDesignSystem/ProgressBar" +import Friend from "./Friend" +import Stats from "./Stats" import Title from "@/components/MyPages/Title" import styles from "./overview.module.css" import type { OverviewProps } from "@/types/components/myPages/overview" -import Link from "next/link" export default function Overview({ user }: OverviewProps) { return (
-
- Good morning {user.name} +
+ Good morning
-
-

Current level:

- Good Friend -

{user.name}

-
-

{user.membershipId}

- -
- -
-
-
-

Total Points

- -

{user.points}

-
-
-

Progress

- -
-
- Arrow Up Icon -

{user.qualifyingPoints}

-
- Qualifying points -
-
-
- Arrow Up Icon -

{user.nights}

-
Nights
-
-
-
-
- -

Progress

-

- 14 680 points until next level -

-

Close friend

-
-
- - Go to my points - + +
) diff --git a/components/MyPages/Blocks/Overview/overview.module.css b/components/MyPages/Blocks/Overview/overview.module.css index 90421bc7b..7482a47e3 100644 --- a/components/MyPages/Blocks/Overview/overview.module.css +++ b/components/MyPages/Blocks/Overview/overview.module.css @@ -1,121 +1,12 @@ .container { background-color: var(--some-grey-color, #f2f2f2); + display: grid; + gap: 0.8rem; } .overview { display: grid; -} - -.friend { - align-items: center; - display: flex; - flex-direction: column; -} - -.level { - color: var(--some-black-color, #000); - /* font-family: var(--ff-biro-script-plus); */ - font-size: 2.1rem; - font-weight: 400; - letter-spacing: 4%; - line-height: 3.6rem; - margin-bottom: 0; - margin-top: 0; -} - -.name { - color: var(--some-black-color, #111); - /* font-family: var(--ff-brandon-text); */ - font-size: 2.8rem; - font-weight: 900; - letter-spacing: -3%; - line-height: 2.8rem; - margin: 1.6rem 0 1.8rem; - text-transform: uppercase; -} - -.membershipContainer { - align-items: center; - display: flex; - gap: 0.8rem; - margin-bottom: 2.2rem; -} - -.membershipId { - color: var(--some-black-color, #1e1e1e); - font-family: var(--ff-fira-mono); - font-size: 1.5rem; - font-weight: 500; - letter-spacing: 6%; - line-height: 1.8rem; - margin: 0; -} - -.qualifyingPoints { - display: none; -} - -.pointsTitle { - color: var(--some-grey-color, #000); - /* font-family: var(--ff-brandon-text); */ - font-size: 1.5rem; - font-weight: 500; - letter-spacing: 0.6%; - line-height: 1.7rem; - margin: 0 0 0.7rem; -} - -.points { - color: var(--some-black-color, #111); - /* font-family: var(--ff-brandon-text); */ - font-size: 3.7rem; - font-weight: 900; - letter-spacing: -3%; - line-height: 3.7rem; - margin: 1.4rem 0; -} - -.progressTitle { - color: var(--some-black-color, #000); - /* font-family: var(--ff-brandon-text); */ - font-size: 1.5rem; - font-weight: 500; - letter-spacing: 0.6%; - line-height: 1.7rem; - margin: 0; -} - -.pointsRemaining { - color: var(--some-grey-color, #4f4f4f); - /* font-family: var(--ff-brandon-text); */ - font-size: 1.5rem; - font-weight: 500; - letter-spacing: 0.6%; - line-height: 1.7rem; - margin: 1rem 0 0; -} - -.link { - color: var(--some-black-color, #111); - font-family: var(--ff-fira-sans); - font-size: 1.4rem; - font-weight: 600; - justify-self: flex-end; - letter-spacing: 1.2%; - line-height: 2rem; - margin-top: 2.8rem; - text-decoration: none; -} - -.target { - color: var(--some-black-color, #000); - /* font-family: var(--ff-biro-script-plus); */ - font-size: 1.8rem; - font-weight: 400; - letter-spacing: 4%; - line-height: 3rem; - margin: 0; - text-align: right; + gap: 1.7rem; } @media screen and (max-width: 950px) { @@ -124,52 +15,17 @@ left: 50%; margin-left: -50vw; margin-right: -50vw; - padding: 0 2rem 2rem; + padding: 0 2rem 3.6rem; position: relative; right: 50%; width: 100dvw; } - - .header { - margin-bottom: 1rem; - } - - .level { - margin-bottom: 1rem; - transform: translate(-60%, 40%) rotate(-20deg); - } - - .progress { - display: flex; - flex-direction: column; - } - - .progressTitle { - order: 0; - } - - .pointsRemaining { - margin-bottom: 0.8rem; - margin-top: 0.6rem; - order: 1; - } - - .progressbar { - order: 2; - } - - .target { - position: absolute; - right: 2rem; - transform: rotate(-15deg) translateY(-50%); - } } @media screen and (min-width: 950px) { .container { background-color: var(--some-white-color, #fff); - display: grid; - gap: 2.2rem; + gap: 1.5rem; } .overview { @@ -181,114 +37,16 @@ left: unset; margin-left: unset; margin-right: unset; - max-width: var(--max-width); padding: 3.5rem 2rem; position: static; right: unset; width: 100%; } - - .friend { - justify-self: flex-end; - } - - .level { - margin-bottom: 2.4rem; - } - - .name { - margin: 3rem 0 1.8rem; - } - - .membershipContainer { - margin-bottom: 4rem; - } - - .stats { - display: flex; - flex-direction: column; - gap: 3rem; - max-width: 32rem; - } - - .qualifyingPoints { - display: block; - } - - .pointsTitle { - color: var(--some-grey-color, #4f4f4f); - font-size: 1.2rem; - } - - .points { - margin: 1.4rem 0 0; - } - - .pointsContainer { - display: grid; - gap: 3.8rem; - grid-template-columns: auto 1fr; - margin-top: 1.5rem; - } - - .pointsProgress { - align-items: center; - display: grid; - gap: 1rem; - grid-template-columns: auto 1fr; - } - - .point { - /* font-family: var(--ff-brandon-text); */ - font-size: 2.7rem; - font-weight: 900; - line-height: 2.7rem; - margin: 0; - } - - .pointsProgressTitle { - font-family: var(--ff-fira-sans); - font-size: 1.2rem; - font-weight: 400; - letter-spacing: 0.6%; - line-height: 1.4rem; - grid-column: 1/-1; - margin: 0; - } - - .progressTitle { - display: none; - } - - .pointsRemaining { - font-size: 1.2rem; - } - - .target { - position: relative; - } - - .target::after { - --height: 3.2rem; - --width: 4.5rem; - - background-image: url("/arrow_biro.svg"); - background-repeat: no-repeat; - content: " "; - display: inline-block; - height: var(--height); - position: relative; - top: calc(var(--height) - var(--width)); - width: var(--width); - } - - .link { - display: none; - } } @media screen and (min-width: 1100px) { .overview { gap: 10rem; + min-height: 35rem; } } diff --git a/components/MyPages/Blocks/Shortcuts/shortcuts.module.css b/components/MyPages/Blocks/Shortcuts/shortcuts.module.css index 449258cff..f4139941f 100644 --- a/components/MyPages/Blocks/Shortcuts/shortcuts.module.css +++ b/components/MyPages/Blocks/Shortcuts/shortcuts.module.css @@ -1,7 +1,6 @@ .shortcuts { display: grid; gap: 2rem; - max-width: var(--max-width); } .header { diff --git a/components/MyPages/Blocks/UpcomingStays/index.tsx b/components/MyPages/Blocks/UpcomingStays/index.tsx index 195d1c253..8a683f993 100644 --- a/components/MyPages/Blocks/UpcomingStays/index.tsx +++ b/components/MyPages/Blocks/UpcomingStays/index.tsx @@ -5,6 +5,7 @@ import styles from "./upcoming.module.css" import type { LangParams } from "@/types/params" import type { StaysProps } from "@/types/components/myPages/stays" +import Link from "next/link" export default function UpcomingStays({ lang, @@ -12,10 +13,13 @@ export default function UpcomingStays({ }: StaysProps & LangParams) { return (
-
+
Your upcoming stays + + See all +
{stays.map((stay) => ( diff --git a/components/MyPages/Blocks/UpcomingStays/upcoming.module.css b/components/MyPages/Blocks/UpcomingStays/upcoming.module.css index cd15129fe..f6ca62bcd 100644 --- a/components/MyPages/Blocks/UpcomingStays/upcoming.module.css +++ b/components/MyPages/Blocks/UpcomingStays/upcoming.module.css @@ -2,15 +2,23 @@ display: grid; gap: 2.2rem; margin-right: -2rem; - max-width: var(--max-width); overflow: hidden; } +.header { + align-items: baseline; + display: flex; + justify-content: space-between; +} + +.link { + display: none; +} + .stays { display: flex; gap: 2rem; overflow-x: auto; - padding-right: 2rem; /* Hide scrollbar IE and Edge */ -ms-overflow-style: none; @@ -23,8 +31,25 @@ display: none; } +@media screen and (max-width: 950px) { + .stays { + padding-right: 2rem; + } +} + @media screen and (min-width: 950px) { .container { margin-right: 0; } + + .link { + color: var(--some-black-color, #111); + display: inline-block; + font-family: var(--ff-fira-sans); + font-size: 1.4rem; + font-weight: 600; + letter-spacing: 1.2%; + line-height: 140%; + text-decoration: none; + } } diff --git a/components/MyPages/Header/Breadcrumbs/breadcrumbs.module.css b/components/MyPages/Header/Breadcrumbs/breadcrumbs.module.css index 640a23c0e..f2f6baf4c 100644 --- a/components/MyPages/Header/Breadcrumbs/breadcrumbs.module.css +++ b/components/MyPages/Header/Breadcrumbs/breadcrumbs.module.css @@ -19,3 +19,7 @@ .link { text-decoration: none; } + +.currentPage { + margin: 0; +} diff --git a/components/MyPages/Header/Breadcrumbs/index.tsx b/components/MyPages/Header/Breadcrumbs/index.tsx index 53ec7bd0d..5ed7979ea 100644 --- a/components/MyPages/Header/Breadcrumbs/index.tsx +++ b/components/MyPages/Header/Breadcrumbs/index.tsx @@ -15,7 +15,7 @@ export default function Breadcrumbs() { /
  • -

    My Scandic

    +

    My Scandic

    • diff --git a/components/MyPages/Header/header.module.css b/components/MyPages/Header/header.module.css index 69f7de1b8..bdbc2d57c 100644 --- a/components/MyPages/Header/header.module.css +++ b/components/MyPages/Header/header.module.css @@ -18,7 +18,9 @@ .breadcrumbs { background-color: var(--some-grey-color, #f2f2f2); display: block; + padding-bottom: 0.8rem; padding-left: 2rem; + padding-top: 3rem; } @media screen and (min-width: 950px) { @@ -35,5 +37,6 @@ .breadcrumbs { background-color: var(--some-white-color, #fff); padding-left: 2.4rem; + padding-top: 2rem; } } diff --git a/components/MyPages/Sidebar/index.tsx b/components/MyPages/Sidebar/index.tsx index 4007c117f..6462ae68b 100644 --- a/components/MyPages/Sidebar/index.tsx +++ b/components/MyPages/Sidebar/index.tsx @@ -8,7 +8,7 @@ export default function Sidebar() {