fix(ui): separate wrapped landing call-to-action lines
This commit is contained in:
@@ -17,12 +17,13 @@ for (const language of ['en', 'nb'] as const) {
|
||||
await page.reload();
|
||||
await expect(page.getByRole('heading', { name: translations[language].landingPreviewTitle, exact: true })).toBeVisible();
|
||||
await page.evaluate(() => document.fonts.ready);
|
||||
const headings = await page.locator('h2').evaluateAll(nodes => nodes.map(node => {
|
||||
const headings = await page.locator('h2').or(page.getByText(translations[language].landingReadyTitle, { exact: true })).evaluateAll(nodes => nodes.map(node => {
|
||||
const range = document.createRange(); range.selectNodeContents(node);
|
||||
const lines = [...range.getClientRects()].filter(rect => rect.width > 0).map(rect => ({ top: rect.top, bottom: rect.bottom }));
|
||||
return { text: node.textContent, lineHeight: getComputedStyle(node).lineHeight, lines };
|
||||
}));
|
||||
expect(headings.length).toBeGreaterThanOrEqual(4);
|
||||
expect(headings.length).toBeGreaterThanOrEqual(5);
|
||||
expect(headings.some(heading => heading.text === translations[language].landingReadyTitle)).toBe(true);
|
||||
if (width === 320) expect(headings.some(heading => heading.lines.length > 1)).toBe(true);
|
||||
for (const heading of headings) for (let index = 1; index < heading.lines.length; index++) {
|
||||
expect.soft(heading.lines[index].top, `${width}/${theme}: ${heading.text}`).toBeGreaterThanOrEqual(heading.lines[index - 1].bottom - 1);
|
||||
|
||||
@@ -258,7 +258,7 @@ export default function LandingPage() {
|
||||
<Container maxWidth="lg" sx={{ py: { xs: 7, md: 10 } }}>
|
||||
<Box sx={{ borderRadius: 4, p: { xs: 4, md: 6 }, background: "linear-gradient(120deg,#0f172a,#1e293b)", color: "#fff", display: "flex", flexDirection: { xs: "column", md: "row" }, alignItems: { md: "center" }, justifyContent: "space-between", gap: 3 }}>
|
||||
<Box>
|
||||
<Typography sx={{ fontWeight: 800, fontSize: { xs: 24, md: 30 }, mb: 1 }}>{t("landingReadyTitle")}</Typography>
|
||||
<Typography sx={{ fontWeight: 800, fontSize: { xs: 24, md: 30 }, lineHeight: 1.4, mb: 1 }}>{t("landingReadyTitle")}</Typography>
|
||||
<Typography sx={{ color: "#94a3b8", fontSize: 17 }}>{t("landingReadyBody")}</Typography>
|
||||
</Box>
|
||||
<GradientButton size="large" onClick={goToLogin} sx={{ color: "#0b1020", fontWeight: 800, px: 4, py: 1.25, whiteSpace: "nowrap" }}>
|
||||
|
||||
Reference in New Issue
Block a user