diff --git a/app/[lang]/(live)/(protected)/my-pages/profile/@profile/layout.module.css b/app/[lang]/(live)/(protected)/my-pages/profile/@profile/layout.module.css index 5b48eefba..78336c027 100644 --- a/app/[lang]/(live)/(protected)/my-pages/profile/@profile/layout.module.css +++ b/app/[lang]/(live)/(protected)/my-pages/profile/@profile/layout.module.css @@ -1,7 +1,6 @@ .container { - background-color: var(--Scandic-Brand-Pale-Peach); + background-color: var(--Main-Grey-White); border-radius: var(--Corner-radius-Large); display: grid; gap: var(--Spacing-x3); - padding: var(--Spacing-x3); } diff --git a/app/[lang]/(live)/(protected)/my-pages/profile/@profile/page.module.css b/app/[lang]/(live)/(protected)/my-pages/profile/@profile/page.module.css index 02313e66b..8af872e91 100644 --- a/app/[lang]/(live)/(protected)/my-pages/profile/@profile/page.module.css +++ b/app/[lang]/(live)/(protected)/my-pages/profile/@profile/page.module.css @@ -7,10 +7,12 @@ .info { display: grid; gap: var(--Spacing-x-one-and-half) var(--Spacing-x7); - grid-template-columns: auto auto; + grid-template-columns: repeat(3, auto); + justify-items: flex-start; } .item { + align-items: center; display: grid; gap: var(--Spacing-x1); grid-template-columns: auto auto 1fr; diff --git a/app/[lang]/(live)/(protected)/my-pages/profile/@profile/page.tsx b/app/[lang]/(live)/(protected)/my-pages/profile/@profile/page.tsx index bd87d0469..16b9e56ad 100644 --- a/app/[lang]/(live)/(protected)/my-pages/profile/@profile/page.tsx +++ b/app/[lang]/(live)/(protected)/my-pages/profile/@profile/page.tsx @@ -1,7 +1,9 @@ +import { languageSelect } from "@/constants/languages" import { profileEdit } from "@/constants/routes/myPages" import { serverClient } from "@/lib/trpc/server" import { + CalendarIcon, EmailIcon, GlobeIcon, LocationIcon, @@ -10,7 +12,6 @@ import { } from "@/components/Icons" import Header from "@/components/Profile/Header" import Button from "@/components/TempDesignSystem/Button" -import Divider from "@/components/TempDesignSystem/Divider" import Link from "@/components/TempDesignSystem/Link" import Body from "@/components/TempDesignSystem/Text/Body" import Title from "@/components/TempDesignSystem/Text/Title" @@ -26,26 +27,54 @@ export default async function Profile({ params }: PageArgs) { if (!user) { return null } + const language = languageSelect.find((l) => l.value === user.language) return ( <>
- + <Title as="h4" color="red" level="h1"> {formatMessage({ id: "Welcome" })} {user.name}
-
-
+
+ + + {formatMessage({ id: "Date of birth" })} + + {user.dateOfBirth} +
+
+ + + {formatMessage({ id: "Phone number" })} + + {user.phoneNumber} +
+
+ + + {formatMessage({ id: "Language" })} + + {language?.label ?? "N/A"} +
+
+ + + {formatMessage({ id: "Email" })} + + {user.email} +
@@ -64,29 +93,6 @@ export default async function Profile({ params }: PageArgs) { : null}
-
- - - {formatMessage({ id: "Email" })} - - {user.email} -
-
- - - {formatMessage({ id: "Phone number" })} - - {user.phoneNumber} -
-
- - - {formatMessage({ id: "Language" })} - - {user.language} -
-
- +
) diff --git a/app/[lang]/(live)/(protected)/my-pages/profile/layout.tsx b/app/[lang]/(live)/(protected)/my-pages/profile/layout.tsx index d067f0277..73496fe4e 100644 --- a/app/[lang]/(live)/(protected)/my-pages/profile/layout.tsx +++ b/app/[lang]/(live)/(protected)/my-pages/profile/layout.tsx @@ -6,7 +6,6 @@ export default function ProfileLayout({ children, communication, creditCards, - membershipCards, profile, }: React.PropsWithChildren) { return ( @@ -14,9 +13,8 @@ export default function ProfileLayout({ {children}
{profile} - {creditCards} - {membershipCards} + {creditCards} {communication}
diff --git a/app/[lang]/(live)/(protected)/my-pages/profile/profileLayout.css b/app/[lang]/(live)/(protected)/my-pages/profile/profileLayout.css index a8c0e99b1..d4ab39c54 100644 --- a/app/[lang]/(live)/(protected)/my-pages/profile/profileLayout.css +++ b/app/[lang]/(live)/(protected)/my-pages/profile/profileLayout.css @@ -7,5 +7,5 @@ border-radius: var(--Corner-radius-xLarge); display: grid; gap: var(--Spacing-x4); - padding: var(--Spacing-x3); + padding: var(--Spacing-x3) var(--Spacing-x3) var(--Spacing-x4); } diff --git a/components/Forms/Edit/Profile/FormContent/index.tsx b/components/Forms/Edit/Profile/FormContent/index.tsx index 75f25cc36..db83a0c22 100644 --- a/components/Forms/Edit/Profile/FormContent/index.tsx +++ b/components/Forms/Edit/Profile/FormContent/index.tsx @@ -2,6 +2,8 @@ // import { useFormStatus } from "react-dom" import { useIntl } from "react-intl" +import { languageSelect } from "@/constants/languages" + import CountrySelect from "@/components/TempDesignSystem/Form/Country" import DateSelect from "@/components/TempDesignSystem/Form/Date" import Input from "@/components/TempDesignSystem/Form/Input" @@ -11,15 +13,6 @@ import Body from "@/components/TempDesignSystem/Text/Body" import styles from "./formContent.module.css" -const languages = [ - { label: "Danish", value: "Da" }, - { label: "German", value: "De" }, - { label: "English", value: "En" }, - { label: "Finnish", value: "Fi" }, - { label: "Norwegian", value: "No" }, - { label: "Swedish", value: "Sv" }, -] - export default function FormContent() { const { formatMessage } = useIntl() // const { pending } = useFormStatus() @@ -70,7 +63,7 @@ export default function FormContent() { registerOptions={{ required: true }} />