From dfd8a9df7df825b2a66e4c6d6e3aeadfe1b82f58 Mon Sep 17 00:00:00 2001 From: Cyril Date: Thu, 16 Jul 2026 11:53:21 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8(frontend)=20update=20offline=20and?= =?UTF-8?q?=20email=20confirmation=20pages=20to=20new=20error=20UI?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Align 503 offline page and user reconciliation screen with Figma design. --- .../apps/impress/src/assets/icons/503.svg | 90 ++++++++++++++ .../{email-confirmation.svg => Mail.svg} | 56 ++++----- .../impress/src/assets/icons/error-503.svg | 90 -------------- .../auth/components/UserReconciliation.tsx | 111 +++++++++++++----- .../apps/impress/src/pages/offline/index.tsx | 55 ++------- 5 files changed, 210 insertions(+), 192 deletions(-) create mode 100644 src/frontend/apps/impress/src/assets/icons/503.svg rename src/frontend/apps/impress/src/assets/icons/{email-confirmation.svg => Mail.svg} (84%) delete mode 100644 src/frontend/apps/impress/src/assets/icons/error-503.svg diff --git a/src/frontend/apps/impress/src/assets/icons/503.svg b/src/frontend/apps/impress/src/assets/icons/503.svg new file mode 100644 index 000000000..1096259d3 --- /dev/null +++ b/src/frontend/apps/impress/src/assets/icons/503.svg @@ -0,0 +1,90 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/frontend/apps/impress/src/assets/icons/email-confirmation.svg b/src/frontend/apps/impress/src/assets/icons/Mail.svg similarity index 84% rename from src/frontend/apps/impress/src/assets/icons/email-confirmation.svg rename to src/frontend/apps/impress/src/assets/icons/Mail.svg index 0a4276e7d..93c020a12 100644 --- a/src/frontend/apps/impress/src/assets/icons/email-confirmation.svg +++ b/src/frontend/apps/impress/src/assets/icons/Mail.svg @@ -1,84 +1,84 @@ - - - + + + - - + + - - - + + + - + - + - - - + + + - + - - + + - + - - + + - + - - + + - + - + - + - + - + - + diff --git a/src/frontend/apps/impress/src/assets/icons/error-503.svg b/src/frontend/apps/impress/src/assets/icons/error-503.svg deleted file mode 100644 index f2f7d5213..000000000 --- a/src/frontend/apps/impress/src/assets/icons/error-503.svg +++ /dev/null @@ -1,90 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/frontend/apps/impress/src/features/auth/components/UserReconciliation.tsx b/src/frontend/apps/impress/src/features/auth/components/UserReconciliation.tsx index 5147b00a7..116cd860a 100644 --- a/src/frontend/apps/impress/src/features/auth/components/UserReconciliation.tsx +++ b/src/frontend/apps/impress/src/features/auth/components/UserReconciliation.tsx @@ -1,11 +1,41 @@ -import Image from 'next/image'; import { useTranslation } from 'react-i18next'; +import styled from 'styled-components'; -import error_img from '@/assets/icons/error-coffee.png'; -import { Box, Loading, Text } from '@/components'; +import Error500Svg from '@/assets/icons/500.svg'; +import EmailConfirmationSvg from '@/assets/icons/Mail.svg'; +import { Box, Icon, Loading, Text } from '@/components'; import { useUserReconciliationsQuery } from '../api'; -import SuccessSvg from '../assets/mail-check-filled.svg'; + +const ErrorActionLink = styled.button` + display: flex; + height: var(--md, 24px); + padding: 0 var(--xxxs, 4px); + justify-content: center; + align-items: center; + gap: var(--xxxs, 4px); + color: var(--c--contextuals--content--semantic--neutral--tertiary); + background: none; + border: none; + cursor: pointer; + font-family: inherit; + font-size: 12px; + font-weight: 500; + line-height: var(--line-height-xs, 16px); + text-decoration: none; + + svg { + text-decoration: none; + } + + .--docs--error-action-label { + text-decoration: none; + } + + &:hover:not(:disabled) .--docs--error-action-label { + text-decoration: underline; + } +`; interface UserReconciliationProps { reconciliationId: string; @@ -34,54 +64,66 @@ export const UserReconciliation = ({ } let render = ( - - - - {t('Email Address Confirmed')} + + + + {t('Email Address Confirmation')} {t( 'To complete the unification of your user accounts, please click the confirmation links sent to all the email addresses you provided.', )} + + window.location.reload()}> + + + {t('Resend e-mail')} + + + ); if (isError) { render = ( - - + +