scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
remove old select from edit profile

update typography
This commit is contained in:
Christian Andolf
2025-06-11 13:21:26 +02:00
parent ecd8d81b80
commit 6a0ce38f79
8 changed files with 188 additions and 442 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/scandic-web/components/TempDesignSystem/Form/Phone/phone.module.css
+9 -13
View File
@@ -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;