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 Header from "@/components/Section/Header"
import Button from "@/components/TempDesignSystem/Button"
import Chip from "@/components/TempDesignSystem/Chip"
import Grids from "@/components/TempDesignSystem/Grids"
import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"

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

@@ -9,11 +9,13 @@
.header {
display: flex;
flex-direction: column;
gap: var(--Spacing-x1);
}
.levelLabel {
position: relative;
transform: rotate(-13deg) translate(0px, -15px);
margin-left: -35px;
}
.name {
@@ -39,17 +41,6 @@
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) {
.membershipContainer {
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 BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"
import { getMembership } from "@/utils/user"
@@ -35,12 +36,10 @@ export default async function Friend({ user }: UserProps) {
{user.name}
</Title>
<div className={styles.membershipContainer}>
<p className={styles.membershipId}>
{formatMessage({ id: "Membership ID" })}:
</p>
<p className={styles.membershipId}>
<Caption color="pale">
{formatMessage({ id: "Membership ID" })}:{" "}
{membership ? membership.membershipNumber : "N/A"}
</p>
</Caption>
</div>
</div>
</section>

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

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

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

@@ -8,6 +8,6 @@
.nextLevel {
gap: var(--Spacing-x1);
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 (
<section className={styles.points}>
<article>
<Body color="pale">{formatMessage({ id: "Total Points" })}</Body>
<Title color="pale" level="h2">
<Body color="pale" textAlign="center">
{formatMessage({ id: "Total Points" })}
</Body>
<Title color="pale" level="h2" textAlign="center">
{membership ? membership.currentPoints : "N/A"}
</Title>
</article>
<article>
<Body color="pale">
<Body color="pale" textAlign="center">
{formatMessage({ id: "Points until next level" })}
{/* TODO */}
</Body>
<Title color="pale" level="h2">
<Title color="pale" level="h2" textAlign="center">
{membership ? membership.currentPoints : "N/A"}
</Title>
</article>

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

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

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

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