From ec7abe2cb61b7b07b485c5e8cce102139353e4c3 Mon Sep 17 00:00:00 2001 From: Jai Kamat Date: Tue, 28 Mar 2023 07:42:14 -0400 Subject: [PATCH] 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 | 6 +++ .../public-page-layout/public-page-layout.tsx | 28 +++++++++---- .../logos/color-on-white-horizontal.svg | 41 +++++++++++++++++++ 3 files changed, 67 insertions(+), 8 deletions(-) create mode 100644 .changeset/hot-mirrors-speak.md create mode 100644 packages/assets/logos/color-on-white-horizontal.svg diff --git a/.changeset/hot-mirrors-speak.md b/.changeset/hot-mirrors-speak.md new file mode 100644 index 0000000000..09e13966a3 --- /dev/null +++ b/.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 diff --git a/packages/application-components/src/components/public-page-layout/public-page-layout.tsx b/packages/application-components/src/components/public-page-layout/public-page-layout.tsx index 929d53e281..257416cb0e 100644 --- a/packages/application-components/src/components/public-page-layout/public-page-layout.tsx +++ b/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` 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 = (props) => { const { themedValue } = useTheme(); return ( - +
commercetools logo
@@ -88,7 +96,7 @@ const PublicPageLayout: FC = (props) => { )} - + = (props) => { alignItems={props.contentScale === 'wide' ? 'center' : 'stretch'} > {props.legalMessage && ( - {props.legalMessage} + + {props.legalMessage} + )} - {`${year} © commercetools`} + {`${year} © commercetools`} diff --git a/packages/assets/logos/color-on-white-horizontal.svg b/packages/assets/logos/color-on-white-horizontal.svg new file mode 100644 index 0000000000..f6e7f43363 --- /dev/null +++ b/packages/assets/logos/color-on-white-horizontal.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +