From 8c8fa2d02cbb30ab8a17ed830d0ea37deafdcd77 Mon Sep 17 00:00:00 2001 From: Simon Emanuelsson Date: Tue, 2 Apr 2024 10:26:12 +0200 Subject: [PATCH] feat: finish my pages overview page according to wireframe --- .../(live)/(protected)/my-pages/_constants.ts | 78 +++++ .../(live)/(protected)/my-pages/layout.tsx | 7 +- .../(protected)/my-pages/page.module.css | 13 - .../(live)/(protected)/my-pages/page.tsx | 32 +- app/[lang]/(live)/fonts.ts | 8 +- .../Blocks/Challenges/challenges.module.css | 157 ++++++++++ .../MyPages/Blocks/Challenges/index.tsx | 52 ++++ .../MyPages/Blocks/Overview/CopyButton.tsx | 20 ++ .../Blocks/Overview/MembershipCardButton.tsx | 22 ++ .../Overview/{Mobile.tsx => Mobile/index.tsx} | 2 +- .../Blocks/Overview/Mobile/mobile.module.css | 16 + .../MyPages/Blocks/Overview/btn.module.css | 5 + components/MyPages/Blocks/Overview/index.tsx | 83 ++++- .../Blocks/Overview/overview.module.css | 284 +++++++++++++++++- components/MyPages/Blocks/Shortcuts/index.tsx | 37 +++ .../Blocks/Shortcuts/shortcuts.module.css | 39 +++ .../Blocks/UpcomingStays/Stay/index.tsx | 4 +- .../MyPages/Blocks/UpcomingStays/index.tsx | 35 +-- components/MyPages/Header/header.module.css | 7 +- components/MyPages/Title/index.tsx | 6 +- components/MyPages/Title/title.module.css | 11 +- .../TempDesignSystem/Button/button.module.css | 26 ++ components/TempDesignSystem/Button/button.ts | 9 + components/TempDesignSystem/Button/index.tsx | 17 ++ .../TempDesignSystem/Button/variants.ts | 15 + .../Divider/divider.module.css | 9 + .../TempDesignSystem/Divider/divider.ts | 7 + components/TempDesignSystem/Divider/index.tsx | 7 + .../TempDesignSystem/Divider/variants.ts | 15 + .../TempDesignSystem/ProgressBar/index.tsx | 12 + .../ProgressBar/progressbar.module.css | 12 + .../ProgressBar/progressbar.ts | 3 + lib/trpc/Provider.tsx | 3 + package-lock.json | 48 ++- package.json | 1 + public/arrow_biro.svg | 5 + public/arrow_upward.svg | 8 + public/check.svg | 3 + public/chevron.svg | 8 + public/copy.svg | 8 + public/good-friend.svg | 45 +++ public/qr.svg | 8 + types/components/myPages/challenges.ts | 6 + types/components/myPages/overview.ts | 5 + types/components/myPages/shortcuts.ts | 5 + types/components/myPages/stay.ts | 6 - types/components/myPages/stays.ts | 7 + types/user.ts | 36 +++ 48 files changed, 1161 insertions(+), 91 deletions(-) create mode 100644 app/[lang]/(live)/(protected)/my-pages/_constants.ts create mode 100644 components/MyPages/Blocks/Challenges/challenges.module.css create mode 100644 components/MyPages/Blocks/Challenges/index.tsx create mode 100644 components/MyPages/Blocks/Overview/CopyButton.tsx create mode 100644 components/MyPages/Blocks/Overview/MembershipCardButton.tsx rename components/MyPages/Blocks/Overview/{Mobile.tsx => Mobile/index.tsx} (87%) create mode 100644 components/MyPages/Blocks/Overview/Mobile/mobile.module.css create mode 100644 components/MyPages/Blocks/Overview/btn.module.css create mode 100644 components/MyPages/Blocks/Shortcuts/index.tsx create mode 100644 components/MyPages/Blocks/Shortcuts/shortcuts.module.css create mode 100644 components/TempDesignSystem/Button/button.module.css create mode 100644 components/TempDesignSystem/Button/button.ts create mode 100644 components/TempDesignSystem/Button/index.tsx create mode 100644 components/TempDesignSystem/Button/variants.ts create mode 100644 components/TempDesignSystem/Divider/divider.module.css create mode 100644 components/TempDesignSystem/Divider/divider.ts create mode 100644 components/TempDesignSystem/Divider/index.tsx create mode 100644 components/TempDesignSystem/Divider/variants.ts create mode 100644 components/TempDesignSystem/ProgressBar/index.tsx create mode 100644 components/TempDesignSystem/ProgressBar/progressbar.module.css create mode 100644 components/TempDesignSystem/ProgressBar/progressbar.ts create mode 100644 public/arrow_biro.svg create mode 100644 public/arrow_upward.svg create mode 100644 public/check.svg create mode 100644 public/chevron.svg create mode 100644 public/copy.svg create mode 100644 public/good-friend.svg create mode 100644 public/qr.svg create mode 100644 types/components/myPages/challenges.ts create mode 100644 types/components/myPages/overview.ts create mode 100644 types/components/myPages/shortcuts.ts delete mode 100644 types/components/myPages/stay.ts create mode 100644 types/components/myPages/stays.ts create mode 100644 types/user.ts diff --git a/app/[lang]/(live)/(protected)/my-pages/_constants.ts b/app/[lang]/(live)/(protected)/my-pages/_constants.ts new file mode 100644 index 000000000..a55ba2b69 --- /dev/null +++ b/app/[lang]/(live)/(protected)/my-pages/_constants.ts @@ -0,0 +1,78 @@ +export const challenges = { + journeys: [ + { + tag: "After work queen", + title: "Try 3 Hotel Bars, Pocket 200 Points", + }, + { + tag: "Dine & Shine", + title: "Visit 3 scandic Restaurants, Earn 150 Points", + }, + ], + victories: [ + { + tag: "Capital Explorer", + title: "Stay in 3 scandic hotels, in three Capitals, Gain 2000 Points", + }, + { + tag: "Friends Feast", + title: "Dine with 3 Buddies, Snag a Free Breakfast", + }, + { + tag: "Eco Warrior", + title: "Choose Green, Get 500 Points", + }, + ], +} + +export const shortcuts = [ + { + 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 = [ + { + dateArrive: new Date("04 27 2024"), + dateDepart: new Date("04 28 2024"), + guests: 2, + hotel: "Scandic Helsinki Hub", + }, + { + dateArrive: new Date("05 27 2024"), + dateDepart: new Date("05 28 2024"), + guests: 2, + hotel: "Scandic Örebro Central", + }, + { + dateArrive: new Date("06 27 2024"), + dateDepart: new Date("06 28 2024"), + guests: 2, + hotel: "Scandic Oslo City", + }, +] diff --git a/app/[lang]/(live)/(protected)/my-pages/layout.tsx b/app/[lang]/(live)/(protected)/my-pages/layout.tsx index f0427c12f..46172baa9 100644 --- a/app/[lang]/(live)/(protected)/my-pages/layout.tsx +++ b/app/[lang]/(live)/(protected)/my-pages/layout.tsx @@ -1,5 +1,6 @@ -import { firaSans } from "@/app/[lang]/(live)/fonts" +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" @@ -12,7 +13,9 @@ export default function MyPagesLayout({ params, }: React.PropsWithChildren>) { return ( -
+
diff --git a/app/[lang]/(live)/(protected)/my-pages/page.module.css b/app/[lang]/(live)/(protected)/my-pages/page.module.css index 0ad1e0ab7..58bb298ff 100644 --- a/app/[lang]/(live)/(protected)/my-pages/page.module.css +++ b/app/[lang]/(live)/(protected)/my-pages/page.module.css @@ -1,8 +1,3 @@ -.container { - display: grid; - gap: 2.2rem; -} - .blocks { display: grid; gap: 4.2rem; @@ -10,18 +5,10 @@ padding-right: 2rem; } -.header { - display: none; -} - @media screen and (min-width: 950px) { .blocks { gap: 6.4rem; padding-left: 0; padding-right: 0; } - - .header { - display: block; - } } diff --git a/app/[lang]/(live)/(protected)/my-pages/page.tsx b/app/[lang]/(live)/(protected)/my-pages/page.tsx index 24024a00b..a7bce8c55 100644 --- a/app/[lang]/(live)/(protected)/my-pages/page.tsx +++ b/app/[lang]/(live)/(protected)/my-pages/page.tsx @@ -1,8 +1,10 @@ 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 OverviewMobile from "@/components/MyPages/Blocks/Overview/Mobile" -import Title from "@/components/MyPages/Title" +import Shortcuts from "@/components/MyPages/Blocks/Shortcuts" import UpcomingStays from "@/components/MyPages/Blocks/UpcomingStays" import styles from "./page.module.css" @@ -11,16 +13,24 @@ import type { LangParams, PageArgs } from "@/types/params" export default async function MyPage({ params }: PageArgs) { const data = await serverClient().user.get() + const user = { + ...data, + journeys: challenges.journeys, + membershipId: 30812404844732, + nights: 14, + points: 20720, + qualifyingPoints: 5000, + shortcuts, + stays, + victories: challenges.victories, + } return ( -
-
- Good morning {data.name} -
-
- - - -
+
+ + + {/* Deals You Can't Miss - TBD */} + +
) } diff --git a/app/[lang]/(live)/fonts.ts b/app/[lang]/(live)/fonts.ts index 41b15be86..871c35570 100644 --- a/app/[lang]/(live)/fonts.ts +++ b/app/[lang]/(live)/fonts.ts @@ -1,4 +1,10 @@ -import { Fira_Sans } from "next/font/google" +import { Fira_Mono, Fira_Sans } from "next/font/google" + +export const firaMono = Fira_Mono({ + subsets: ["latin"], + weight: ["400", "500", "700"], + variable: "--ff-fira-mono", +}) export const firaSans = Fira_Sans({ subsets: ["latin"], diff --git a/components/MyPages/Blocks/Challenges/challenges.module.css b/components/MyPages/Blocks/Challenges/challenges.module.css new file mode 100644 index 000000000..440958e2a --- /dev/null +++ b/components/MyPages/Blocks/Challenges/challenges.module.css @@ -0,0 +1,157 @@ +.challenges { + --card-height: 23.6rem; + --gap: 0.4rem; + --radius: 0.4rem; + + display: grid; + gap: 1.6rem; + grid-template-areas: + "header" + "section" + "aside"; + max-width: var(--max-width); +} + +.header { + grid-area: header; +} + +.subtitle { + color: var(--some-black-color, #000); + /* font-family: var(--ff-biro-script-plus); */ + font-size: 1.6rem; + font-weight: 400; + line-height: 1.8rem; + margin: 0; +} + +.title { + color: var(--some-black-color, #000); + /* font-family: var(--ff-brandon-text); */ + font-size: 1.6rem; + font-weight: 900; + inline-size: 18rem; + line-height: 1.8rem; + margin: 0; + overflow-wrap: break-word; + padding: 0; + text-align: center; + text-transform: uppercase; +} + +.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: 950px) { + .victory:first-of-type { + grid-row: 1 / -1; + } +} + +@media screen and (min-width: 950px) { + .challenges { + gap: 2.6rem 1.5rem; + grid-template-areas: + "header header" + "section aside"; + grid-template-columns: 1fr 16.6rem; + } + + .journeys { + grid-template-columns: 1fr; + } + + .journey .subtitle { + font-size: 2.6rem; + line-height: 3.2rem; + } + + .journey .title { + font-size: 2.6rem; + inline-size: 25rem; + line-height: 3.2rem; + } + + .victories { + grid-template-columns: 1fr; + grid-template-rows: var(--card-height) 1fr 1fr; + } + + .circle { + align-items: center; + background-color: var(--some-white-color, #fff); + border-radius: 50%; + display: flex; + height: 2rem; + justify-content: center; + width: 2rem; + } + + .victory .subtitle { + font-size: 1.3rem; + line-height: 1.6rem; + } + + .victory .title { + inline-size: 13rem; + } +} diff --git a/components/MyPages/Blocks/Challenges/index.tsx b/components/MyPages/Blocks/Challenges/index.tsx new file mode 100644 index 000000000..52f82e0bb --- /dev/null +++ b/components/MyPages/Blocks/Challenges/index.tsx @@ -0,0 +1,52 @@ +import Image from "@/components/Image" +import Title from "@/components/MyPages/Title" + +import styles from "./challenges.module.css" + +import type { ChallengesProps } from "@/types/components/myPages/challenges" + +export default function Challenges({ journeys, victories }: ChallengesProps) { + return ( +
+
+ + Your Challenges Conquer & Earn! + +
+
+
+ On your journey +
+
+ {journeys.map((journey) => ( +
+

{journey.tag}

+

{journey.title}

+
+ ))} +
+
+ +
+ ) +} diff --git a/components/MyPages/Blocks/Overview/CopyButton.tsx b/components/MyPages/Blocks/Overview/CopyButton.tsx new file mode 100644 index 000000000..600de7825 --- /dev/null +++ b/components/MyPages/Blocks/Overview/CopyButton.tsx @@ -0,0 +1,20 @@ +"use client" + +import Button from "@/components/TempDesignSystem/Button" +import Image from "@/components/Image" + +import type { User } from "@/types/user" + +export default function CopyButton({ + membershipId, +}: Pick) { + function handleCopy() { + console.log(`COPIED! (${membershipId})`) + } + + return ( + + ) +} diff --git a/components/MyPages/Blocks/Overview/MembershipCardButton.tsx b/components/MyPages/Blocks/Overview/MembershipCardButton.tsx new file mode 100644 index 000000000..e32707946 --- /dev/null +++ b/components/MyPages/Blocks/Overview/MembershipCardButton.tsx @@ -0,0 +1,22 @@ +"use client" + +import Button from "@/components/TempDesignSystem/Button" +import Image from "@/components/Image" + +import styles from "./btn.module.css" + +export default function MembershipCardButton() { + function handleShowMembershipCard() { + console.log(`Showing membership card`) + } + return ( + + ) +} diff --git a/components/MyPages/Blocks/Overview/Mobile.tsx b/components/MyPages/Blocks/Overview/Mobile/index.tsx similarity index 87% rename from components/MyPages/Blocks/Overview/Mobile.tsx rename to components/MyPages/Blocks/Overview/Mobile/index.tsx index 65bb9dbd1..c93ffae1d 100644 --- a/components/MyPages/Blocks/Overview/Mobile.tsx +++ b/components/MyPages/Blocks/Overview/Mobile/index.tsx @@ -1,7 +1,7 @@ import Breadcrumbs from "@/components/MyPages/Header/Breadcrumbs" import Title from "@/components/MyPages/Title" -import styles from "./overview.module.css" +import styles from "./mobile.module.css" export default function OverviewMobile() { return ( diff --git a/components/MyPages/Blocks/Overview/Mobile/mobile.module.css b/components/MyPages/Blocks/Overview/Mobile/mobile.module.css new file mode 100644 index 000000000..10f2fbc77 --- /dev/null +++ b/components/MyPages/Blocks/Overview/Mobile/mobile.module.css @@ -0,0 +1,16 @@ +.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/btn.module.css b/components/MyPages/Blocks/Overview/btn.module.css new file mode 100644 index 000000000..46960ab0b --- /dev/null +++ b/components/MyPages/Blocks/Overview/btn.module.css @@ -0,0 +1,5 @@ +@media screen and (max-width: 950px) { + .membershipBtn { + display: none; + } +} diff --git a/components/MyPages/Blocks/Overview/index.tsx b/components/MyPages/Blocks/Overview/index.tsx index a954da5c4..c672e2027 100644 --- a/components/MyPages/Blocks/Overview/index.tsx +++ b/components/MyPages/Blocks/Overview/index.tsx @@ -1,5 +1,84 @@ +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 Title from "@/components/MyPages/Title" + import styles from "./overview.module.css" -export default function Overview() { - return
+import type { OverviewProps } from "@/types/components/myPages/overview" +import Link from "next/link" + +export default function Overview({ user }: OverviewProps) { + return ( +
+
+ Good morning {user.name} +
+
+
+

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 8b5f0fc88..90421bc7b 100644 --- a/components/MyPages/Blocks/Overview/overview.module.css +++ b/components/MyPages/Blocks/Overview/overview.module.css @@ -1,34 +1,294 @@ +.container { + background-color: var(--some-grey-color, #f2f2f2); +} + .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; } -.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; +.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; +} + +@media screen and (max-width: 950px) { + .container { + /* Full-width override styling */ + left: 50%; + margin-left: -50vw; + margin-right: -50vw; + padding: 0 2rem 2rem; + 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; + } + .overview { background-color: var(--some-grey-color, #f2f2f2); border-radius: 0.8rem; - display: block; - height: 35rem; + gap: 4rem; + grid-template-columns: 1fr 1fr; + justify-content: center; left: unset; margin-left: unset; margin-right: unset; max-width: var(--max-width); + padding: 3.5rem 2rem; position: static; right: unset; width: 100%; } - .overviewMobile { + .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; + } +} diff --git a/components/MyPages/Blocks/Shortcuts/index.tsx b/components/MyPages/Blocks/Shortcuts/index.tsx new file mode 100644 index 000000000..bbf91210d --- /dev/null +++ b/components/MyPages/Blocks/Shortcuts/index.tsx @@ -0,0 +1,37 @@ +import Image from "@/components/Image" +import Link from "next/link" +import Title from "@/components/MyPages/Title" + +import styles from "./shortcuts.module.css" + +import type { ShortcutsProps } from "@/types/components/myPages/shortcuts" + +export default function Shortcuts({ shortcuts }: ShortcutsProps) { + return ( +
+
+ + Handy Shortcuts + +

The community at your fingertips

+
+
+ {shortcuts.map((shortcut) => ( + + {shortcut.title} + Chevron Icon + + ))} +
+
+ ) +} diff --git a/components/MyPages/Blocks/Shortcuts/shortcuts.module.css b/components/MyPages/Blocks/Shortcuts/shortcuts.module.css new file mode 100644 index 000000000..449258cff --- /dev/null +++ b/components/MyPages/Blocks/Shortcuts/shortcuts.module.css @@ -0,0 +1,39 @@ +.shortcuts { + display: grid; + gap: 2rem; + max-width: var(--max-width); +} + +.header { + display: grid; + gap: 2rem; +} + +.subtitle { + font-family: var(--ff-fira-sans); + font-size: 1.8rem; + font-weight: 400; + line-height: 2.2rem; + margin: 0; +} + +.links { + display: grid; + gap: 0.8rem; +} + +.link { + align-items: center; + border: 0.1rem solid var(--some-grey-color, #d9d9d9); + border-radius: 0.4rem; + color: var(--some-black-color, #000); + display: flex; + font-family: var(--ff-fira-sans); + font-size: 1.6rem; + font-weight: 700; + gap: 0.4rem; + justify-content: space-between; + line-height: 2.2rem; + padding: 1.4rem 2rem; + text-decoration: none; +} diff --git a/components/MyPages/Blocks/UpcomingStays/Stay/index.tsx b/components/MyPages/Blocks/UpcomingStays/Stay/index.tsx index bbbf2388d..0cb99c760 100644 --- a/components/MyPages/Blocks/UpcomingStays/Stay/index.tsx +++ b/components/MyPages/Blocks/UpcomingStays/Stay/index.tsx @@ -6,7 +6,7 @@ import Title from "@/components/MyPages/Title" import styles from "./stay.module.css" import type { LangParams } from "@/types/params" -import type { StayProps } from "@/types/components/myPages/stay" +import type { StayProps } from "@/types/components/myPages/stays" export default function Stay({ dateArrive, @@ -36,7 +36,7 @@ export default function Stay({ />