feat(WEB-162): final design edit profile page

components/TempDesignSystem/Form/Date/date.module.css

@@ -1,20 +1,9 @@
 /* Leaving, will most likely get deleted */
 .container {
-  --border: 2px solid var(--some-black-color, #757575);
-  --radius: 0.4rem;
-  --width: min(28rem, 100%);
-
-  --width-day: 6rem;
-  --width-month: 6rem;
-  --width-year: 8rem;
-
   display: grid;
-  gap: 0.8rem;
-  grid-template-areas: "day month year";
-  grid-template-columns: min(--width-day, 1fr) min(--width-month, 1fr) min(
-      --width-year,
-      2fr
-    );
+  gap: var(--Spacing-x2);
+  grid-template-areas: "year month day";
+  grid-template-columns: 1fr 1fr 1fr;
   width: var(--width);
 }
 

components/TempDesignSystem/Form/Date/date.ts

@@ -1,6 +1,4 @@
-import type { Control, RegisterOptions } from "react-hook-form"
-
-import type { EditProfileSchema } from "@/components/MyProfile/Profile/Edit/Form/schema"
+import type { RegisterOptions } from "react-hook-form"
 
 export const enum DateName {
   date = "date",
@@ -9,7 +7,6 @@ export const enum DateName {
 }
 export interface DateProps
   extends React.SelectHTMLAttributes<HTMLSelectElement> {
-  control: Control<EditProfileSchema>
-  name: keyof EditProfileSchema
-  registerOptions: RegisterOptions<EditProfileSchema>
+  name: string
+  registerOptions: RegisterOptions
 }

components/TempDesignSystem/Form/Date/index.tsx

@@ -11,9 +11,9 @@ import { useIntl } from "react-intl"
 
 import { dt } from "@/lib/dt"
 
+import Select from "@/components/TempDesignSystem/Select"
 import { rangeArray } from "@/utils/rangeArray"
 
-import Select from "../Select"
 import { DateName } from "./date"
 
 import styles from "./date.module.css"
@@ -23,14 +23,10 @@ import type { Key } from "react-aria-components"
 import type { DateProps } from "./date"
 
 /** TODO: Get selecting with Enter-key to work */
-export default function DateSelect({
-  control,
-  name,
-  registerOptions,
-}: DateProps) {
+export default function DateSelect({ name, registerOptions }: DateProps) {
   const { formatMessage } = useIntl()
   const d = useWatch({ name })
-  const { setValue } = useFormContext()
+  const { control, setValue } = useFormContext()
   const { field } = useController({
     control,
     name,