Include new illustrations with the upcoming colour schema changes (#3415

) * refactor: include new illustrations * Create kind-bobcats-fix.md * chore: update browserslist and caniuse-lite dependencies * refactor(website-custom-views): update docs-kit dependencies --------- Co-authored-by: Nicola Molinari <nicola.molinari@commercetools.com>
commercetools · Feb 27, 2024 · e076438 · e076438 · github-actions · Feb 27, 2024
1 parent 6d55ed8
commit e076438
Show file tree

Hide file tree

Showing 21 changed files with 2,470 additions and 693 deletions.
diff --git a/.changeset/kind-bobcats-fix.md b/.changeset/kind-bobcats-fix.md
@@ -0,0 +1,7 @@
+---
+"@commercetools-frontend/application-components": patch
+"@commercetools-frontend/application-shell": patch
+"@commercetools-frontend/assets": patch
+---
+
+Include new illustrations with the upcoming colour schema changes
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,6 +1,8 @@
 import { useIntl, FormattedMessage } from 'react-intl';
+import PageNotFoundSVGRebranding from '@commercetools-frontend/assets/images/page-not-found-rebranding.svg';
 import PageNotFoundSVG from '@commercetools-frontend/assets/images/page-not-found.svg';
 import { SUPPORT_PORTAL_URL } from '@commercetools-frontend/constants';
+import { useTheme } from '@commercetools-uikit/design-system';
 import MaintenancePageLayout from '../maintenance-page-layout';
 import messages from './messages';
 
@@ -12,10 +14,11 @@ const getLink = (msg: string) => (
 );
 const PageNotFound = () => {
   const intl = useIntl();
+  const { themedValue } = useTheme();
 
   return (
     <MaintenancePageLayout
-      imageSrc={PageNotFoundSVG}
+      imageSrc={themedValue(PageNotFoundSVG, PageNotFoundSVGRebranding)}
       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,6 +1,8 @@
 import { useIntl, FormattedMessage } from 'react-intl';
+import FailedAuthorizationSVGRebranding from '@commercetools-frontend/assets/images/doors-closed-rebranding.svg';
 import FailedAuthorizationSVG from '@commercetools-frontend/assets/images/doors-closed.svg';
 import { SUPPORT_PORTAL_URL } from '@commercetools-frontend/constants';
+import { useTheme } from '@commercetools-uikit/design-system';
 import MaintenancePageLayout from '../maintenance-page-layout';
 import messages from './messages';
 
@@ -13,10 +15,14 @@ const getSupportUrlLink = (msg: string) => (
 
 export const PageUnauthorized = () => {
   const intl = useIntl();
+  const { themedValue } = useTheme();
 
   return (
     <MaintenancePageLayout
-      imageSrc={FailedAuthorizationSVG}
+      imageSrc={themedValue(
+        FailedAuthorizationSVG,
+        FailedAuthorizationSVGRebranding
+      )}
       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,6 +4,7 @@ import {
   PublicPageLayout,
   themesOverrides,
 } from '@commercetools-frontend/application-components';
+import FailedAuthenticationSVGRebranding from '@commercetools-frontend/assets/images/doors-closed-rebranding.svg';
 import FailedAuthenticationSVG from '@commercetools-frontend/assets/images/doors-closed.svg';
 import type { TAsyncLocaleDataProps } from '@commercetools-frontend/i18n';
 
@@ -13,6 +14,7 @@ import Constraints from '@commercetools-uikit/constraints';
 import {
   ThemeProvider,
   customProperties,
+  useTheme,
 } from '@commercetools-uikit/design-system';
 import FlatButton from '@commercetools-uikit/flat-button';
 import { AngleLeftIcon } from '@commercetools-uikit/icons';
@@ -40,6 +42,7 @@ const Divider = styled.div`
 
 const AuthCallbackErrorPage = (props: TProps) => {
   const history = useHistory();
+  const { themedValue } = useTheme();
   return (
     <AsyncLocaleData
       locale={props.locale}
@@ -59,7 +62,10 @@ const AuthCallbackErrorPage = (props: TProps) => {
                     <Spacings.Inline justifyContent="center">
                       <img
                         width="100%"
-                        src={FailedAuthenticationSVG}
+                        src={themedValue(
+                          FailedAuthenticationSVG,
+                          FailedAuthenticationSVGRebranding
+                        )}
                         alt="Failed authentication"
                       />
                     </Spacings.Inline>

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,17 @@
 import { useIntl, FormattedMessage } from 'react-intl';
 import { MaintenancePageLayout } from '@commercetools-frontend/application-components';
+import UnexpectedErrorSVGRebranding from '@commercetools-frontend/assets/images/unexpected-error-rebranding.svg';
 import UnexpectedErrorSVG from '@commercetools-frontend/assets/images/unexpected-error.svg';
+import { useTheme } from '@commercetools-uikit/design-system';
 import messages from './messages';
 
 const ErrorApologizer = () => {
   const intl = useIntl();
+  const { themedValue } = useTheme();
 
   return (
     <MaintenancePageLayout
-      imageSrc={UnexpectedErrorSVG}
+      imageSrc={themedValue(UnexpectedErrorSVG, UnexpectedErrorSVGRebranding)}
       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,14 +1,20 @@
 import { useIntl, FormattedMessage } from 'react-intl';
 import { MaintenancePageLayout } from '@commercetools-frontend/application-components';
+import FailedAuthenticationSVGRebranding from '@commercetools-frontend/assets/images/doors-closed-rebranding.svg';
 import FailedAuthenticationSVG from '@commercetools-frontend/assets/images/doors-closed.svg';
+import { useTheme } from '@commercetools-uikit/design-system';
 import messages from './messages';
 
 const FailedAuthentication = () => {
   const intl = useIntl();
+  const { themedValue } = useTheme();
 
   return (
     <MaintenancePageLayout
-      imageSrc={FailedAuthenticationSVG}
+      imageSrc={themedValue(
+        FailedAuthenticationSVG,
+        FailedAuthenticationSVGRebranding
+      )}
       title={<FormattedMessage {...messages.title} />}
       label={intl.formatMessage(messages.title)}
       paragraph1={<FormattedMessage {...messages.paragraph1} />}

diff --git a/packages/application-shell/src/components/project-expired/project-expired.tsx b/packages/application-shell/src/components/project-expired/project-expired.tsx
@@ -1,6 +1,8 @@
 import { useIntl, FormattedMessage } from 'react-intl';
 import { MaintenancePageLayout } from '@commercetools-frontend/application-components';
+import ProjectExpiredIllustrationRebranding from '@commercetools-frontend/assets/images/hourglass-rebranding.svg';
 import ProjectExpiredIllustration from '@commercetools-frontend/assets/images/hourglass.svg';
+import { useTheme } from '@commercetools-uikit/design-system';
 import ServicePageProjectSwitcher from '../service-page-project-switcher';
 import messages from './messages';
 
@@ -17,10 +19,14 @@ EmailLink.displayName = 'EmailLink';
 
 const ProjectExpired = () => {
   const intl = useIntl();
+  const { themedValue } = useTheme();
 
   return (
     <MaintenancePageLayout
-      imageSrc={ProjectExpiredIllustration}
+      imageSrc={themedValue(
+        ProjectExpiredIllustration,
+        ProjectExpiredIllustrationRebranding
+      )}
       title={<FormattedMessage {...messages.title} />}
       label={intl.formatMessage(messages.title)}
       paragraph1={

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,15 +1,18 @@
 import { useIntl, FormattedMessage } from 'react-intl';
 import { MaintenancePageLayout } from '@commercetools-frontend/application-components';
+import ProjectNotFoundSVGRebranding from '@commercetools-frontend/assets/images/folder-full-locked-rebranding.svg';
 import ProjectNotFoundSVG from '@commercetools-frontend/assets/images/folder-full-locked.svg';
+import { useTheme } from '@commercetools-uikit/design-system';
 import ServicePageProjectSwitcher from '../service-page-project-switcher';
 import messages from './messages';
 
 const ProjectNotFound = () => {
   const intl = useIntl();
+  const { themedValue } = useTheme();
 
   return (
     <MaintenancePageLayout
-      imageSrc={ProjectNotFoundSVG}
+      imageSrc={themedValue(ProjectNotFoundSVG, ProjectNotFoundSVGRebranding)}
       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,8 @@
 import { useIntl, FormattedMessage } from 'react-intl';
 import { MaintenancePageLayout } from '@commercetools-frontend/application-components';
+import ProjectNotInitializedSVGRebranding from '@commercetools-frontend/assets/images/hourglass-rebranding.svg';
 import ProjectNotInitializedSVG from '@commercetools-frontend/assets/images/hourglass.svg';
+import { useTheme } from '@commercetools-uikit/design-system';
 import ServicePageProjectSwitcher from '../service-page-project-switcher';
 import messages from './messages';
 
@@ -17,10 +19,14 @@ EmailLink.displayName = 'EmailLink';
 
 const ProjectNotInitialized = () => {
   const intl = useIntl();
+  const { themedValue } = useTheme();
 
   return (
     <MaintenancePageLayout
-      imageSrc={ProjectNotInitializedSVG}
+      imageSrc={themedValue(
+        ProjectNotInitializedSVG,
+        ProjectNotInitializedSVGRebranding
+      )}
       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,8 @@
 import { useIntl, FormattedMessage, MessageDescriptor } from 'react-intl';
 import { MaintenancePageLayout } from '@commercetools-frontend/application-components';
+import ProjectSuspendedSVGRebranding from '@commercetools-frontend/assets/images/locked-diamond-rebranding.svg';
 import ProjectSuspendedSVG from '@commercetools-frontend/assets/images/locked-diamond.svg';
+import { useTheme } from '@commercetools-uikit/design-system';
 import ServicePageProjectSwitcher from '../service-page-project-switcher';
 import messages from './messages';
 
@@ -18,11 +20,12 @@ const getTitleMessage = (props: Props): MessageDescriptor => {
 
 const ProjectSuspended = (props: Props) => {
   const intl = useIntl();
+  const { themedValue } = useTheme();
   const titleMessage = getTitleMessage(props);
 
   return (
     <MaintenancePageLayout
-      imageSrc={ProjectSuspendedSVG}
+      imageSrc={themedValue(ProjectSuspendedSVG, ProjectSuspendedSVGRebranding)}
       title={<FormattedMessage {...titleMessage} />}
       label={intl.formatMessage(titleMessage)}
       paragraph1={<FormattedMessage {...messages.paragraph1} />}

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