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

fix: update loyalty cards and join loyalty sidebar design

Browse Source
This commit is contained in:
Christel Westerberg
2024-06-27 16:44:40 +02:00
parent 33771a0608
commit 5be118d9e5
20 changed files with 166 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
components/Loyalty/Sidebar/JoinLoyalty/Contact/ContactRow/contactRow.module.css
View File

@@ -1,5 +1,5 @@
.icon,
.icon * {
fill: var(--Scandic-Brand-Burgundy);
margin-bottom: var(--Spacing-x-half);
.link {
display: flex;
align-items: center;
gap: var(--Spacing-x1);
}

24
components/Loyalty/Sidebar/JoinLoyalty/Contact/ContactRow/index.tsx
View File

@@ -1,7 +1,9 @@
import { serverClient } from "@/lib/trpc/server"
import { EmailIcon, PhoneIcon } from "@/components/Icons"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import { getValueFromContactConfig } from "@/utils/contactConfig"
import styles from "./contactRow.module.css"
@@ -27,15 +29,29 @@ export default async function ContactRow({ contact }: ContactRowProps) {
Icon = PhoneIcon
}
let openableLink = val
if (contact.contact_field.includes("email")) {
openableLink = `mailto:${val}`
} else if (contact.contact_field.includes("phone")) {
openableLink = `tel:${val}`
}
return (
<div>
{Icon ? <Icon className={styles.icon} /> : null}
<Body color="burgundy" textAlign="center" textTransform="bold">
<Body color="burgundy" textTransform="bold">
{contact.display_text}
</Body>
<Body color="burgundy" textAlign="center">
<Link
className={styles.link}
href={openableLink}
variant="myPage"
color="burgundy"
size="small"
>
{Icon ? <Icon width="20" height="20" color="burgundy" /> : null}
{val}
</Body>
</Link>
<Footnote color="burgundy">{contact.footnote}</Footnote>
</div>
)
}

6
components/Loyalty/Sidebar/JoinLoyalty/Contact/contact.module.css
View File

@@ -4,14 +4,12 @@
@media screen and (min-width: 1367px) {
.contactContainer {
align-items: center;
border-top: 1px solid var(--UI-Grey-30);
display: flex;
flex-direction: column;
gap: var(--Spacing-x5);
gap: var(--Spacing-x2);
justify-content: center;
padding: var(--Spacing-x4) var(--Spacing-x2) var(--Spacing-x5);
text-align: center;
padding-top: var(--Spacing-x2);
}
.contact {

4
components/Loyalty/Sidebar/JoinLoyalty/Contact/index.tsx
View File

@@ -12,9 +12,7 @@ export default async function Contact({ contactBlock }: ContactProps) {
const { formatMessage } = await getIntl()
return (
<article className={styles.contactContainer}>
<Subtitle textAlign="center">
{formatMessage({ id: "Contact us" })}
</Subtitle>
<Subtitle>{formatMessage({ id: "Contact us" })}</Subtitle>
<section className={styles.contact}>
{contactBlock.map(({ contact, __typename }, i) => {
switch (__typename) {

46
components/Loyalty/Sidebar/JoinLoyalty/index.tsx
View File

@@ -1,10 +1,10 @@
import { login } from "@/constants/routes/handleAuth"
import ArrowRight from "@/components/Icons/ArrowRight"
import { ScandicFriends } from "@/components/Levels"
import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"
@@ -21,28 +21,38 @@ export default async function JoinLoyaltyContact({
}: JoinLoyaltyContactProps & LangParams) {
const { formatMessage } = await getIntl()
return (
<section className={styles.container}>
<section>
<article className={styles.wrapper}>
<Title as="h4" level="h3">
{block.title}
</Title>
<ScandicFriends color="primaryLightOnSurfaceAccent" />
{block.preamble ? (
<Body textAlign="center">{block.preamble}</Body>
) : null}
<Button asChild intent="primary">
<Body asChild fontOnly textAlign="center" textTransform="bold">
<Link href={login[lang]}>
{formatMessage({ id: "Join Scandic Friends" })}
</Link>
</Body>
</Button>
<Footnote asChild fontOnly textAlign="center" textTransform="bold">
<Link color="burgundy" href={`/${lang}/login`}>
{formatMessage({ id: "Already a friend?" })} <br />
{formatMessage({ id: "Click here to log in" })}
<ScandicFriends color="red" />
{block.preamble ? <Body>{block.preamble}</Body> : null}
<Button asChild intent="primary" theme="base" className={styles.button}>
<Link href={login[lang]} color="white">
{formatMessage({ id: "Join Scandic Friends" })}
</Link>
</Footnote>
</Button>
<section className={styles.loginContainer}>
<Body>{formatMessage({ id: "Already a friend?" })}</Body>
<span className={styles.linkWrapper}>
<ArrowRight
color="burgundy"
className={styles.icon}
height="20"
width="20"
/>
<Link
className={styles.link}
color="burgundy"
href={`/${lang}/login`}
variant="icon"
size="small"
>
{formatMessage({ id: "Log in here" })}
</Link>
</span>
</section>
</article>
{block.contact ? <Contact contactBlock={block.contact} /> : null}
</section>

32
components/Loyalty/Sidebar/JoinLoyalty/joinLoyalty.module.css
View File

@@ -1,12 +1,30 @@
.container {
background-color: var(--Main-Grey-White);
.wrapper {
display: grid;
gap: var(--Spacing-x3);
padding-bottom: var(--Spacing-x5);
padding-top: var(--Spacing-x4);
}
.wrapper {
.loginContainer {
display: grid;
gap: var(--Spacing-x2);
}
.button {
width: fit-content;
}
.linkWrapper {
display: flex;
align-items: center;
flex-direction: column;
gap: var(--Spacing-x5);
padding: var(--Spacing-x4) var(--Spacing-x2) var(--Spacing-x5);
}
gap: var(--Spacing-x-half);
}
.link {
display: flex;
align-items: center;
}
.icon {
align-self: center;
}