scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: update ui

Browse Source
This commit is contained in:
Christel Westerberg
2024-06-19 13:11:39 +02:00
parent 29e8a56f74
commit 4233ecae42
9 changed files with 26 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
components/MyPages/Blocks/Benefits/NextLevel/index.tsx
View File

@@ -4,7 +4,6 @@ import { serverClient } from "@/lib/trpc/server"
import SectionContainer from "@/components/Section/Container" import SectionContainer from "@/components/Section/Container"
import Header from "@/components/Section/Header" import Header from "@/components/Section/Header"
import Button from "@/components/TempDesignSystem/Button"
import Chip from "@/components/TempDesignSystem/Chip" import Chip from "@/components/TempDesignSystem/Chip"
import Grids from "@/components/TempDesignSystem/Grids" import Grids from "@/components/TempDesignSystem/Grids"
import BiroScript from "@/components/TempDesignSystem/Text/BiroScript" import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"

13
components/MyPages/Blocks/Overview/Friend/friend.module.css
View File

@@ -9,11 +9,13 @@
.header { .header {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--Spacing-x1);
} }
.levelLabel { .levelLabel {
position: relative; position: relative;
transform: rotate(-13deg) translate(0px, -15px); transform: rotate(-13deg) translate(0px, -15px);
margin-left: -35px;
} }
.name { .name {
@@ -39,17 +41,6 @@
padding: var(--Spacing-x1) var(--Spacing-x2); padding: var(--Spacing-x1) var(--Spacing-x2);
} }
.membershipId {
color: var(--Scandic-Brand-Pale-Peach);
/* TODO: Not yet exported by the design team, change to variable l8r */
font-family: var(--ff-fira-mono, "fira mono");
font-size: 14px;
font-weight: 400;
letter-spacing: 0.168px;
line-height: 140%;
margin: 0;
}
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
.membershipContainer { .membershipContainer {
grid-template-columns: auto auto; grid-template-columns: auto auto;

9
components/MyPages/Blocks/Overview/Friend/index.tsx
View File

@@ -1,6 +1,7 @@
import { membershipLevels } from "@/constants/membershipLevels" import { membershipLevels } from "@/constants/membershipLevels"
import BiroScript from "@/components/TempDesignSystem/Text/BiroScript" import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Title from "@/components/TempDesignSystem/Text/Title" import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n" import { getIntl } from "@/i18n"
import { getMembership } from "@/utils/user" import { getMembership } from "@/utils/user"
@@ -35,12 +36,10 @@ export default async function Friend({ user }: UserProps) {
{user.name} {user.name}
</Title> </Title>
<div className={styles.membershipContainer}> <div className={styles.membershipContainer}>
<p className={styles.membershipId}> <Caption color="pale">
{formatMessage({ id: "Membership ID" })}: {formatMessage({ id: "Membership ID" })}:{" "}
</p>
<p className={styles.membershipId}>
{membership ? membership.membershipNumber : "N/A"} {membership ? membership.membershipNumber : "N/A"}
</p> </Caption>
</div> </div>
</div> </div>
</section> </section>

11
components/MyPages/Blocks/Overview/Stats/NextLevel/index.tsx
View File

@@ -33,8 +33,15 @@ export default async function NextLevel({
} }
return ( return (
<section> <section>
<Body color="pale">{formatMessage({ id: "Next level" })}:</Body> <Body color="pale" textAlign="center">
<Title className={styles.nextLevel} color="pale" level="h3"> {formatMessage({ id: "Next level" })}:
</Body>
<Title
className={styles.nextLevel}
color="pale"
level="h3"
textAlign="center"
>
{nextLevel?.name || "N/A"} {nextLevel?.name || "N/A"}
<BiroScript>{formatMessage({ id: "Coming up" })}!</BiroScript> <BiroScript>{formatMessage({ id: "Coming up" })}!</BiroScript>
</Title> </Title>

2
components/MyPages/Blocks/Overview/Stats/NextLevel/nextLevel.module.css
View File

@@ -8,6 +8,6 @@
.nextLevel { .nextLevel {
gap: var(--Spacing-x1); gap: var(--Spacing-x1);
grid-template-columns: auto auto; grid-template-columns: auto auto;
justify-content: flex-start; justify-content: center;
} }
} }

10
components/MyPages/Blocks/Overview/Stats/Points/index.tsx
View File

@@ -13,17 +13,19 @@ export default async function Points({ user }: UserProps) {
return ( return (
<section className={styles.points}> <section className={styles.points}>
<article> <article>
<Body color="pale">{formatMessage({ id: "Total Points" })}</Body> <Body color="pale" textAlign="center">
<Title color="pale" level="h2"> {formatMessage({ id: "Total Points" })}
</Body>
<Title color="pale" level="h2" textAlign="center">
{membership ? membership.currentPoints : "N/A"} {membership ? membership.currentPoints : "N/A"}
</Title> </Title>
</article> </article>
<article> <article>
<Body color="pale"> <Body color="pale" textAlign="center">
{formatMessage({ id: "Points until next level" })} {formatMessage({ id: "Points until next level" })}
{/* TODO */} {/* TODO */}
</Body> </Body>
<Title color="pale" level="h2"> <Title color="pale" level="h2" textAlign="center">
{membership ? membership.currentPoints : "N/A"} {membership ? membership.currentPoints : "N/A"}
</Title> </Title>
</article> </article>

2
components/MyPages/Blocks/Overview/Stats/index.tsx
View File

@@ -12,7 +12,7 @@ export default function Stats({ user, lang }: UserProps & LangParams) {
return ( return (
<section className={styles.stats}> <section className={styles.stats}>
<Points user={user} /> <Points user={user} />
<Divider variant="default" /> <Divider variant="default" color="peach" />
<NextLevel user={user} lang={lang} /> <NextLevel user={user} lang={lang} />
</section> </section>
) )

2
components/MyPages/Blocks/Overview/index.tsx
View File

@@ -27,7 +27,7 @@ export default async function Overview({
<Header link={link} subtitle={subtitle} title={title} topTitle /> <Header link={link} subtitle={subtitle} title={title} topTitle />
<section className={styles.overview}> <section className={styles.overview}>
<Friend user={user} /> <Friend user={user} />
<Divider className={styles.divider} /> <Divider className={styles.divider} color="peach" />
<Stats user={user} lang={lang} /> <Stats user={user} lang={lang} />
</section> </section>
</SectionContainer> </SectionContainer>

4
components/MyPages/Blocks/Stays/StayCard/stay.module.css
View File

@@ -1,7 +1,7 @@
.stay { .stay {
background-color: var(--Main-Grey-White); background-color: var(--Main-Grey-White);
border: 1px solid var(--Scandic-Brand-Burgundy); border: 1px solid var(--Base-Border-Subtle);
border-radius: var(--Corner-radius-Small); border-radius: var(--Corner-radius-Medium);
display: grid; display: grid;
overflow: hidden; overflow: hidden;
} }