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

components/MyProfile/Profile/Container.tsx

@@ -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 +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

@@ -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

@@ -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;
-}