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

feat(WEB-162): final design for my profile page

Browse Source
This commit is contained in:
Simon Emanuelsson
2024-06-07 10:36:23 +02:00
committed by Christel Westerberg
parent a7b04df7b6
commit 5f3e417593
96 changed files with 802 additions and 494 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/MyProfile/Card/card.module.css
-6
View File
@@ -1,6 +0,0 @@
.card {
background-color: var(--Scandic-Brand-Warm-White);
border-radius: var(--Corner-radius-Small);
min-height: 156px;
padding: var(--Spacing-x5);
}
components/MyProfile/Card/index.tsx
-16
View File
@@ -1,16 +0,0 @@
import { cva } from "class-variance-authority"
import styles from "./card.module.css"
import type { CardProps } from "@/types/components/myPages/myProfile/card/card"
const cardStyles = cva(styles.card)
export default function Card({
className,
tag = "section",
...props
}: CardProps) {
const Cmp = tag
return <Cmp className={cardStyles({ className })} {...props} />
}
components/MyProfile/CommunicationPreferences/com.module.css
-5
View File
@@ -1,5 +0,0 @@
.container {
align-items: center;
display: flex;
justify-content: center;
}
components/MyProfile/CommunicationPreferences/index.tsx
-16
View File
@@ -1,16 +0,0 @@
import Card from "@/components/MyProfile/Card"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"
import styles from "./com.module.css"
export default async function CommunicationPreferences() {
const { formatMessage } = await getIntl()
return (
<Card className={styles.container}>
<Title level="h4">
{formatMessage({ id: "My communication preferences" })}
</Title>
</Card>
)
}
components/MyProfile/MembershipCard/index.tsx
-14
View File
@@ -1,14 +0,0 @@
import Card from "@/components/MyProfile/Card"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"
import styles from "./membershipCard.module.css"
export default async function MembershipCard() {
const { formatMessage } = await getIntl()
return (
<Card className={styles.container}>
<Title level="h4">{formatMessage({ id: "Membership cards" })}</Title>
</Card>
)
}
components/MyProfile/MembershipCard/membershipCard.module.css
-5
View File
@@ -1,5 +0,0 @@
.container {
align-items: center;
display: flex;
justify-content: center;
}
components/MyProfile/Password/index.tsx
-14
View File
@@ -1,14 +0,0 @@
import Card from "@/components/MyProfile/Card"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"
import styles from "./password.module.css"
export default async function Password() {
const { formatMessage } = await getIntl()
return (
<Card className={styles.container}>
<Title level="h4">{formatMessage({ id: "Password" })}</Title>
</Card>
)
}
components/MyProfile/Password/password.module.css
-5
View File
@@ -1,5 +0,0 @@
.container {
align-items: center;
display: flex;
justify-content: center;
}
components/MyProfile/Profile/Container.tsx
-30
View File
@@ -1,30 +0,0 @@
import { cva } from "class-variance-authority"
import { AccountCircleIcon } from "@/components/Icons"
import Card from "@/components/MyProfile/Card"
import Title from "@/components/TempDesignSystem/Text/Title"
import styles from "./profile.module.css"
import type { ContainerProps } from "@/types/components/myPages/myProfile/container"
const profileStyles = cva(styles.profile)
export default function Container({
children,
className,
user,
...props
}: ContainerProps) {
return (
<Card className={profileStyles({ className })} {...props}>
<header className={styles.header}>
<AccountCircleIcon />
<Title as="h4" level="h2">
{user.name}
</Title>
</header>
{children}
</Card>
)
}
components/MyProfile/Profile/Edit/index.tsx
+1 -6
View File
@@ -1,6 +1,5 @@
import { serverClient } from "@/lib/trpc/server"
import Container from "../Container"
import Form from "./Form"
export default async function EditProfile() {
@@ -8,9 +7,5 @@ export default async function EditProfile() {
if (!user) {
return null
}
return (
<Container user={user}>
<Form user={user} />
</Container>
)
return <Form user={user} />
}
components/MyProfile/Profile/index.tsx
-37
View File
@@ -1,37 +0,0 @@
// import { dt } from "@/lib/dt"
import { serverClient } from "@/lib/trpc/server"
import {
CalendarIcon,
EmailIcon,
HouseIcon,
PhoneIcon,
} from "@/components/Icons"
// import { countries } from "@/components/TempDesignSystem/Form/Country/countries"
// import { getIntl } from "@/i18n"
import Container from "./Container"
import styles from "./profile.module.css"
export default async function Profile() {
// const { formatMessage } = await getIntl()
const user = await serverClient().user.get()
if (!user) {
return null
}
// const countryName = countries.find(
// (country) => country.code === user.address.country
// )
// const dob = dt(user.dateOfBirth).format("DD/MM/YYYY")
return (
<Container user={user}>
<section className={styles.info}>
<CalendarIcon />
<EmailIcon />
<HouseIcon />
<PhoneIcon />
</section>
</Container>
)
}
components/MyProfile/Profile/profile.module.css
-19
View File
@@ -1,19 +0,0 @@
.profile {
display: grid;
gap: var(--Spacing-x4);
grid-template-rows: auto 1fr;
min-height: 460px;
}
.header {
align-items: center;
display: grid;
gap: var(--Spacing-x2);
grid-template-columns: auto 1fr;
}
.info {
display: grid;
gap: var(--Spacing-x2);
grid-template-columns: 1fr 1fr;
}
components/MyProfile/Wishes/index.tsx
-14
View File
@@ -1,14 +0,0 @@
import Card from "@/components/MyProfile/Card"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"
import styles from "./wishes.module.css"
export default async function Wishes() {
const { formatMessage } = await getIntl()
return (
<Card className={styles.container}>
<Title level="h4">{formatMessage({ id: "My wishes" })}</Title>
</Card>
)
}
components/MyProfile/Wishes/wishes.module.css
-5
View File
@@ -1,5 +0,0 @@
.container {
align-items: center;
display: flex;
justify-content: center;
}