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

Merged in fix/sas-flow-design-updates (pull request #1567)

Browse Source 
Fix typography in SAS flow

* Add missing translation

* Update SAS login page typography

* Update LinkAccountFormTypography

* Update typography in OneTimePasswordForm

* Update typography of SAS link success page

* Update typography of SAS flow errors

* Update typography of SAS unlink success page

* Update typography of SAS error boundary


Approved-by: Linus Flood
This commit is contained in:
Anton Gunnarsson
2025-03-21 09:05:47 +00:00
parent d406725a65
commit c58815ec06
21 changed files with 224 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/otp/OneTimePasswordForm.tsx
View File

@@ -6,14 +6,12 @@ import { useParams, useRouter } from "next/navigation"
import { type ReactNode, useState, useTransition } from "react"
import { useIntl } from "react-intl"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { trpc } from "@/lib/trpc/client"
import ErrorCircleFilledIcon from "@/components/Icons/ErrorCircleFilled"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { GenericError } from "../components/GenericError"
import { SASModal, SASModalContactBlock } from "../components/SASModal"
@@ -63,7 +61,9 @@ export default function OneTimePasswordForm({
return (
<GenericError title={title}>
<Body textAlign="center">{body}</Body>
<Typography variant="Body/Paragraph/mdRegular">
<p style={{ textAlign: "center" }}>{body}</p>
</Typography>
<SASModalContactBlock />
</GenericError>
)
@@ -116,7 +116,7 @@ export default function OneTimePasswordForm({
onClick={handleRequestNewOtp}
color="red"
variant="default"
size="tiny"
size="small"
className={disableResend ? styles["disabled-link"] : ""}
>
{str}
@@ -141,10 +141,12 @@ export default function OneTimePasswordForm({
return (
<SASModal>
<Subtitle textAlign={"center"}>{heading}</Subtitle>
<div>
<Body textAlign={"center"}>{ingress}</Body>
</div>
<Typography variant="Title/Subtitle/lg">
<h1>{heading}</h1>
</Typography>
<Typography variant="Body/Paragraph/mdRegular">
<p>{ingress}</p>
</Typography>
<OTPInput
autoFocus
@@ -169,21 +171,27 @@ export default function OneTimePasswordForm({
{errorMessage && (
<div className={styles["error-message"]}>
<ErrorCircleFilledIcon height={20} width={20} color="red" />
<Caption color="red">{errorMessage}</Caption>
<Typography variant="Body/Supporting text (caption)/smRegular">
<p style={{ color: "var(--Scandic-Red-60)" }}>{errorMessage}</p>
</Typography>
</div>
)}
<div>
<Footnote>{footnote}</Footnote>
<Footnote>
{intl.formatMessage(
{
id: "Didn't receive a code? <resendOtpLink>Resend code</resendOtpLink>",
},
{
resendOtpLink: getResendOtpLink,
}
)}
</Footnote>
<Typography variant="Body/Supporting text (caption)/smRegular">
<p>{footnote}</p>
</Typography>
<Typography variant="Body/Supporting text (caption)/smRegular">
<p>
{intl.formatMessage(
{
id: "Didn't receive a code? <resendOtpLink>Resend code</resendOtpLink>",
},
{
resendOtpLink: getResendOtpLink,
}
)}
</p>
</Typography>
</div>
</SASModal>
)