refactor: to use correct illustrations for maintenance pages (#3100)

* refactor: to use correct illustrations for maintenance pages * fix: set maintenance page image height for consistency across images * fix(vrt): test image width
commercetools · May 24, 2023 · 8e814ad · 8e814ad · github-actions · May 24, 2023
1 parent 5fdd801
commit 8e814ad
Show file tree

Hide file tree

Showing 15 changed files with 122 additions and 152 deletions.
diff --git a/.changeset/hot-glasses-beam.md b/.changeset/hot-glasses-beam.md
@@ -0,0 +1,7 @@
+---
+'@commercetools-frontend/application-components': patch
+'@commercetools-frontend/application-shell': patch
+'@commercetools-frontend/assets': patch
+---
+
+Update illustrations leftovers and use correct illustrations for maintenance pages
diff --git a/...application-components/src/components/maintenance-page-layout/maintenance-page-layout.tsx b/...application-components/src/components/maintenance-page-layout/maintenance-page-layout.tsx
@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import { css } from '@emotion/react';
 import Constraints from '@commercetools-uikit/constraints';
+import { designTokens } from '@commercetools-uikit/design-system';
 import Spacings from '@commercetools-uikit/spacings';
 import Text from '@commercetools-uikit/text';
 
@@ -28,7 +29,11 @@ const MaintenancePageLayout = (props: Props) => (
     <Constraints.Horizontal max={10}>
       <Spacings.Stack scale="m">
         <div>
-          <img src={props.imageSrc} alt={props.label} />
+          <img
+            style={{ height: designTokens.constraint7 }}
+            src={props.imageSrc}
+            alt={props.label}
+          />
         </div>
         <Text.Headline as="h2">{props.title}</Text.Headline>
         <Text.Body>{props.paragraph1}</Text.Body>

diff --git a/packages/application-components/src/components/page-not-found/page-not-found.tsx b/packages/application-components/src/components/page-not-found/page-not-found.tsx
@@ -1,5 +1,5 @@
 import { useIntl, FormattedMessage } from 'react-intl';
-import PageNotFoundIllustration from '@commercetools-frontend/assets/images/page-application-disabled.svg';
+import PageNotFoundSVG from '@commercetools-frontend/assets/images/page-not-found.svg';
 import { SUPPORT_PORTAL_URL } from '@commercetools-frontend/constants';
 import MaintenancePageLayout from '../maintenance-page-layout';
 import messages from './messages';
@@ -15,7 +15,7 @@ const PageNotFound = () => {
 
   return (
     <MaintenancePageLayout
-      imageSrc={PageNotFoundIllustration}
+      imageSrc={PageNotFoundSVG}
       title={<FormattedMessage {...messages.title} />}
       label={intl.formatMessage(messages.title)}
       paragraph1={

diff --git a/packages/application-components/src/components/page-unauthorized/page-unauthorized.tsx b/packages/application-components/src/components/page-unauthorized/page-unauthorized.tsx
@@ -1,5 +1,5 @@
 import { useIntl, FormattedMessage } from 'react-intl';
-import FailedAuthorizationIllustration from '@commercetools-frontend/assets/images/folder-full-locked.svg';
+import FailedAuthorizationSVG from '@commercetools-frontend/assets/images/doors-closed.svg';
 import { SUPPORT_PORTAL_URL } from '@commercetools-frontend/constants';
 import MaintenancePageLayout from '../maintenance-page-layout';
 import messages from './messages';
@@ -16,7 +16,7 @@ export const PageUnauthorized = () => {
 
   return (
     <MaintenancePageLayout
-      imageSrc={FailedAuthorizationIllustration}
+      imageSrc={FailedAuthorizationSVG}
       title={<FormattedMessage {...messages.title} />}
       label={intl.formatMessage(messages.title)}
       paragraph1={<FormattedMessage {...messages.paragraph1} />}

diff --git a/packages/application-shell/src/components/authenticated/oidc-callback-error-page.tsx b/packages/application-shell/src/components/authenticated/oidc-callback-error-page.tsx
@@ -4,7 +4,7 @@ import {
   PublicPageLayout,
   themesOverrides,
 } from '@commercetools-frontend/application-components';
-import FailedAuthenticationSVG from '@commercetools-frontend/assets/images/locked-diamond.svg';
+import FailedAuthenticationSVG from '@commercetools-frontend/assets/images/doors-closed.svg';
 import type { TAsyncLocaleDataProps } from '@commercetools-frontend/i18n';
 
 import { AsyncLocaleData } from '@commercetools-frontend/i18n';

diff --git a/packages/application-shell/src/components/error-apologizer/error-apologizer.tsx b/packages/application-shell/src/components/error-apologizer/error-apologizer.tsx
@@ -1,14 +1,14 @@
 import { useIntl, FormattedMessage } from 'react-intl';
 import { MaintenancePageLayout } from '@commercetools-frontend/application-components';
-import UnexpectedErrorIllustration from '@commercetools-frontend/assets/images/unexpected-error.svg';
+import UnexpectedErrorSVG from '@commercetools-frontend/assets/images/unexpected-error.svg';
 import messages from './messages';
 
 const ErrorApologizer = () => {
   const intl = useIntl();
 
   return (
     <MaintenancePageLayout
-      imageSrc={UnexpectedErrorIllustration}
+      imageSrc={UnexpectedErrorSVG}
       title={<FormattedMessage {...messages.title} />}
       label={intl.formatMessage(messages.title)}
       paragraph1={<FormattedMessage {...messages.notifiedTeam} />}

diff --git a/packages/application-shell/src/components/failed-authentication/failed-authentication.tsx b/packages/application-shell/src/components/failed-authentication/failed-authentication.tsx
@@ -1,6 +1,6 @@
 import { useIntl, FormattedMessage } from 'react-intl';
 import { MaintenancePageLayout } from '@commercetools-frontend/application-components';
-import FailedAuthenticationSVG from '@commercetools-frontend/assets/images/locked-diamond.svg';
+import FailedAuthenticationSVG from '@commercetools-frontend/assets/images/doors-closed.svg';
 import messages from './messages';
 
 const FailedAuthentication = () => {

diff --git a/packages/application-shell/src/components/project-not-found/project-not-found.tsx b/packages/application-shell/src/components/project-not-found/project-not-found.tsx
@@ -1,6 +1,6 @@
 import { useIntl, FormattedMessage } from 'react-intl';
 import { MaintenancePageLayout } from '@commercetools-frontend/application-components';
-import FailedAuthorizationIllustration from '@commercetools-frontend/assets/images/folder-full-locked.svg';
+import ProjectNotFoundSVG from '@commercetools-frontend/assets/images/folder-full-locked.svg';
 import ServicePageProjectSwitcher from '../service-page-project-switcher';
 import messages from './messages';
 
@@ -9,7 +9,7 @@ const ProjectNotFound = () => {
 
   return (
     <MaintenancePageLayout
-      imageSrc={FailedAuthorizationIllustration}
+      imageSrc={ProjectNotFoundSVG}
       title={<FormattedMessage {...messages.title} />}
       label={intl.formatMessage(messages.title)}
       paragraph1={<FormattedMessage {...messages.paragraph1} />}

diff --git a/...ages/application-shell/src/components/project-not-initialized/project-not-initialized.tsx b/...ages/application-shell/src/components/project-not-initialized/project-not-initialized.tsx
@@ -1,6 +1,6 @@
 import { useIntl, FormattedMessage } from 'react-intl';
 import { MaintenancePageLayout } from '@commercetools-frontend/application-components';
-import ProjectNotInitializedIllustration from '@commercetools-frontend/assets/images/hourglass.svg';
+import ProjectNotInitializedSVG from '@commercetools-frontend/assets/images/hourglass.svg';
 import ServicePageProjectSwitcher from '../service-page-project-switcher';
 import messages from './messages';
 
@@ -20,7 +20,7 @@ const ProjectNotInitialized = () => {
 
   return (
     <MaintenancePageLayout
-      imageSrc={ProjectNotInitializedIllustration}
+      imageSrc={ProjectNotInitializedSVG}
       title={<FormattedMessage {...messages.title} />}
       label={intl.formatMessage(messages.title)}
       paragraph1={

diff --git a/packages/application-shell/src/components/project-suspended/project-suspended.tsx b/packages/application-shell/src/components/project-suspended/project-suspended.tsx
@@ -1,6 +1,6 @@
 import { useIntl, FormattedMessage, MessageDescriptor } from 'react-intl';
 import { MaintenancePageLayout } from '@commercetools-frontend/application-components';
-import ProjectSuspendedSVG from '@commercetools-frontend/assets/images/doors-closed.svg';
+import ProjectSuspendedSVG from '@commercetools-frontend/assets/images/locked-diamond.svg';
 import ServicePageProjectSwitcher from '../service-page-project-switcher';
 import messages from './messages';
 

diff --git a/packages/assets/images/doors-closed.svg b/packages/assets/images/doors-closed.svg