chore(appkit): design tweaks to PublicPageLayout (#3015)

* chore(appkit): conditionally replace background image in PublicPageLayout

* chore(appkit): update logo for white background

* chore(appkit): apply 32px top margin to legalmessage

* chore(appkit): apply text tone formatting

* chore(appkit): remove welcome message note

* chore(appkit): change width of image container

* chore(appkit): create changeset

* chore(appkit): rename logo asset

.changeset/hot-mirrors-speak.md

@@ -0,0 +1,6 @@
+---
+'@commercetools-frontend/application-components': patch
+'@commercetools-frontend/assets': patch
+---
+
+Include new logo asset and design tweaks to PublicPageLayout

packages/application-components/src/components/public-page-layout/public-page-layout.tsx

@@ -3,6 +3,7 @@ import { FC, ReactNode } from 'react';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import publicBackgroundUrl from '@commercetools-frontend/assets/images/public-background.png';
+import CommercetoolsLogoOnWhiteSvg from '@commercetools-frontend/assets/logos/color-on-white-horizontal.svg';
 import CommercetoolsLogoSvg from '@commercetools-frontend/assets/logos/commercetools_primary-logo_horizontal_white-text_RGB.svg';
 import { customProperties, useTheme } from '@commercetools-uikit/design-system';
 import Spacings from '@commercetools-uikit/spacings';
@@ -35,14 +36,18 @@ type TProps = {
   children: ReactNode;
 };
 
-const Container = styled.div`
+// TODO: @redesign cleanup
+type TContainerProps = { showBackground: boolean };
+
+const Container = styled.div<TContainerProps>`
   width: 100%;
   min-height: 100vh;
   display: flex;
   padding: ${customProperties.spacingXl} 0;
   justify-content: center;
   background-size: cover;
-  background-image: url(${publicBackgroundUrl});
+  background-image: ${(props: TContainerProps) =>
+    props.showBackground ? `url(${publicBackgroundUrl})` : 'none'};
   background-position: center;
 `;
 const ContainerColumn = styled.div`
@@ -63,13 +68,16 @@ const PublicPageLayout: FC<TProps> = (props) => {
   const { themedValue } = useTheme();
 
   return (
-    <Container>
+    <Container showBackground={themedValue(true, false)}>
       <Spacings.Stack scale="xl" alignItems="center">
         <ContainerColumn>
           <div>
             <img
-              width="100%"
-              src={CommercetoolsLogoSvg}
+              width={themedValue('100%', undefined)}
+              src={themedValue(
+                CommercetoolsLogoSvg,
+                CommercetoolsLogoOnWhiteSvg
+              )}
               alt="commercetools logo"
             />
           </div>
@@ -88,17 +96,21 @@ const PublicPageLayout: FC<TProps> = (props) => {
             </Text.Headline>
           </ContainerColumn>
         )}
-        <Spacings.Stack scale={themedValue('s', 'l')}>
+        <Spacings.Stack scale={themedValue('s', 'xl')}>
           <PublicPageLayoutContent {...props} />
           <PublicPageLayoutContent contentScale={props.contentScale}>
             <Spacings.Stack
               scale="xs"
               alignItems={props.contentScale === 'wide' ? 'center' : 'stretch'}
             >
               {props.legalMessage && (
-                <Text.Body tone="inverted">{props.legalMessage}</Text.Body>
+                <Text.Body tone={themedValue('inverted', 'secondary')}>
+                  {props.legalMessage}
+                </Text.Body>
               )}
-              <Text.Body tone="inverted">{`${year} © commercetools`}</Text.Body>
+              <Text.Body
+                tone={themedValue('inverted', 'secondary')}
+              >{`${year} © commercetools`}</Text.Body>
             </Spacings.Stack>
           </PublicPageLayoutContent>
         </Spacings.Stack>