fix(LOY-260): use same phone component in signup and edit profile as enter details

remove old select from edit profile

update typography

apps/scandic-web/components/TempDesignSystem/Form/Phone/index.tsx

@@ -32,7 +32,7 @@ export default function Phone({
   disabled = false,
   label,
   name = "phoneNumber",
-  placeholder = "",
+  placeholder,
   readOnly = false,
   registerOptions = {
     required: true,

apps/scandic-web/components/TempDesignSystem/Form/Phone/phone.module.css

@@ -1,7 +1,7 @@
 .phone {
   display: grid;
   grid-template-columns: 1fr;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);
 
   --react-international-phone-background-color: var(--Main-Grey-White);
   --react-international-phone-border-color: var(--Scandic-Beige-40);
@@ -17,7 +17,7 @@
 
   --react-international-phone-height: 60px;
   --react-international-phone-dropdown-top: calc(
-    var(--react-international-phone-height) + var(--Spacing-x1)
+    var(--react-international-phone-height) + var(--Space-x1)
   );
   --react-international-phone-dial-code-preview-font-size: var(
     --Body-Paragraph-Size
@@ -27,7 +27,7 @@
   );
 }
 
-@media (min-width: 385px) {
+@media (min-width: 400px) {
   .phone {
     grid-template-columns: minmax(124px, 164px) 1fr;
   }
@@ -41,16 +41,15 @@
   background: var(--Main-Grey-White);
   border-radius: var(--Corner-radius-md);
   box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.08);
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
   outline: none;
-  padding: var(--Spacing-x2);
+  padding: var(--Space-x2);
 }
 
 .phone
   :global(.react-international-phone-country-selector-dropdown__list-item) {
   border-radius: var(--Corner-radius-md);
-  padding: var(--Spacing-x1) var(--Spacing-x1) var(--Spacing-x1)
-    var(--Spacing-x-one-and-half);
+  padding: var(--Space-x1) var(--Space-x1) var(--Space-x1) var(--Space-x15);
   font-family: var(--Body-Paragraph-Font-family);
 }
 
@@ -67,14 +66,11 @@
   border-width: 1px;
   border-radius: var(--Corner-radius-md);
   display: grid;
-  gap: var(--Spacing-x-half);
+  gap: var(--Space-x05);
   grid-template-rows: auto auto;
   height: 60px;
-  padding: var(--Spacing-x1) var(--Spacing-x2);
+  padding: var(--Space-x1) var(--Space-x2);
   transition: border-color 200ms ease;
-}
-
-.select {
   width: 100%;
 }
 
@@ -86,7 +82,7 @@
   background-color: var(--Main-Grey-White);
   border: none;
   display: grid;
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
   grid-template-columns: auto 1fr auto;
   height: 18px;
   justify-content: flex-start;