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

fix: responsivity of fields and order of signup form

Browse Source
This commit is contained in:
Christel Westerberg
2024-11-18 15:07:23 +01:00
parent 9094b08345
commit d5c6b6809c
17 changed files with 264 additions and 262 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/TempDesignSystem/Form/JoinScandicFriendsCard/index.tsx
+35 -37
View File
@@ -35,43 +35,41 @@ export default function JoinScandicFriendsCard({
return (
<div className={styles.cardContainer}>
<header className={styles.header}>
<Checkbox name={name} className={styles.checkBox}>
<div>
<Caption type="label" textTransform="uppercase" color="red">
{intl.formatMessage(
{
id: "Only pay {amount} {currency}",
},
{
amount: intl.formatNumber(difference.price),
currency: difference.currency,
}
)}
</Caption>
<Caption
type="label"
textTransform="uppercase"
color="uiTextHighContrast"
>
{intl.formatMessage({ id: "Join Scandic Friends" })}
</Caption>
</div>
</Checkbox>
<Footnote color="uiTextHighContrast">
{intl.formatMessage({ id: "Already a friend?" })}{" "}
<LoginButton
color="burgundy"
position="enter details"
trackingId="join-scandic-friends-enter-details"
variant="breadcrumb"
target="_blank"
<Checkbox name={name} className={styles.checkBox}>
<div>
<Caption type="label" textTransform="uppercase" color="red">
{intl.formatMessage(
{
id: "Only pay {amount} {currency}",
},
{
amount: intl.formatNumber(difference.price),
currency: difference.currency,
}
)}
</Caption>
<Caption
type="label"
textTransform="uppercase"
color="uiTextHighContrast"
>
{intl.formatMessage({ id: "Log in" })}
</LoginButton>
</Footnote>
</header>
{intl.formatMessage({ id: "Join Scandic Friends" })}
</Caption>
</div>
</Checkbox>
<Footnote color="uiTextHighContrast" className={styles.login}>
{intl.formatMessage({ id: "Already a friend?" })}{" "}
<LoginButton
color="burgundy"
position="enter details"
trackingId="join-scandic-friends-enter-details"
variant="breadcrumb"
target="_blank"
>
{intl.formatMessage({ id: "Log in" })}
</LoginButton>
</Footnote>
<div className={styles.list}>
{list.map((item) => (
@@ -84,7 +82,7 @@ export default function JoinScandicFriendsCard({
</Caption>
))}
</div>
<Footnote color="uiTextPlaceholder">
<Footnote color="uiTextPlaceholder" className={styles.terms}>
{intl.formatMessage<React.ReactNode>(
{
id: "signup.terms",
components/TempDesignSystem/Form/JoinScandicFriendsCard/joinScandicFriendsCard.module.css
+32 -6
View File
@@ -4,26 +4,52 @@
border: 1px solid var(--Base-Border-Subtle);
border-radius: var(--Corner-radius-Large);
display: grid;
gap: var(--Spacing-x2);
gap: var(--Spacing-x-one-and-half);
padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
grid-template-areas:
"checkbox"
"list"
"login"
"terms";
width: min(100%, 600px);
}
.header {
display: grid;
gap: var(--Spacing-x-one-and-half);
grid-template-columns: 1fr auto;
.login {
grid-area: login;
}
.checkBox {
align-self: center;
grid-area: checkbox;
}
.list {
display: flex;
display: grid;
grid-area: list;
gap: var(--Spacing-x1);
}
.listItem {
display: flex;
}
.terms {
border-top: 1px solid var(--Base-Border-Normal);
grid-area: terms;
padding-top: var(--Spacing-x1);
}
@media screen and (min-width: 768px) {
.cardContainer {
grid-template-columns: 1fr auto;
gap: var(--Spacing-x2);
grid-template-areas:
"checkbox login"
"list list"
"terms terms";
}
.list {
display: flex;
gap: var(--Spacing-x1);
}
}