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

components/TempDesignSystem/Form/Country/country.module.css

@@ -41,11 +41,10 @@
   border: var(--select-border);
   border-radius: var(--Corner-radius-Small);
   overflow: auto;
-  padding: var(--Spacing-x2) var(--Spacing-x2) var(--Spacing-x2)
-    var(--Spacing-x1);
+  padding: var(--Spacing-x2) var(--Spacing-x2) var(--Spacing-x2) var(--Spacing-x1);
   width: var(--select-width);
 }
 
 .listBoxItem {
   padding: 0 var(--Spacing-x1);
-}
+}

components/TempDesignSystem/Form/ErrorMessage/error.module.css

@@ -1,4 +1,4 @@
 .message {
   color: var(--Scandic-Red-60);
   margin: var(--Spacing-x-half) 0 0;
-}
+}

components/TempDesignSystem/Form/Input/input.module.css

@@ -5,4 +5,4 @@
   height: 40px;
   padding: var(--Spacing-x1) var(--Spacing-x2);
   width: min(280px, 100%);
-}
+}

components/TempDesignSystem/Form/Phone/index.tsx

@@ -3,8 +3,12 @@ import "react-international-phone/style.css"
 
 import { useCallback, useEffect, useRef } from "react"
 import { useController, useFormContext, useWatch } from "react-hook-form"
-import { defaultCountries, getCountry } from "react-international-phone"
-import { PhoneInput, type PhoneInputRefType } from "react-international-phone"
+import {
+  defaultCountries,
+  getCountry,
+  PhoneInput,
+  type PhoneInputRefType,
+} from "react-international-phone"
 
 import ErrorMessage from "@/components/TempDesignSystem/Form/ErrorMessage"