Merge branch 'TW-1125-epic-assets-rework' into TW-993-assets-rework-n…

…fts-pagination

package.json

@@ -30,6 +30,7 @@
     "@apollo/client": "^3.7.2",
     "@babel/core": "7.19.3",
     "@babel/runtime": "^7.19.0",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@dicebear/avatars": "4.2.5",
     "@dicebear/avatars-bottts-sprites": "4.2.5",
     "@dicebear/avatars-jdenticon-sprites": "4.2.5",

src/app/layouts/PageLayout/Header.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, useMemo } from 'react';
 
 import classNames from 'clsx';
 
@@ -18,22 +18,19 @@ import styles from './Header.module.css';
 import { HeaderSelectors } from './Header.selectors';
 
 const Header: FC = () => {
-  const appEnv = useAppEnv();
+  const { fullPage } = useAppEnv();
   const { ready } = useTempleClient();
 
-  return (
-    <header className={classNames('bg-primary-orange', styles['inner-shadow'], appEnv.fullPage && 'pb-20 -mb-20')}>
-      <ContentContainer className="py-4">
-        <div className={classNames(appEnv.fullPage && 'px-4')}>
-          <div className="flex items-stretch">
-            <Link to="/" className="flex-shrink-0 pr-4" testID={HeaderSelectors.templeLogoIcon}>
-              <div className="flex items-center">
-                <Logo hasTitle={appEnv.fullPage} white />
-              </div>
-            </Link>
+  const logoStyles = useMemo(() => ({ height: fullPage ? 64 : 52, marginTop: 0, marginBottom: 0 }), [fullPage]);
 
-            {ready && <Control />}
-          </div>
+  return (
+    <header className={classNames('bg-primary-orange', styles['inner-shadow'], fullPage && 'pb-20 -mb-20')}>
+      <ContentContainer className="pt-4 pb-3">
+        <div className={classNames('flex justify-between items-center', fullPage && 'px-4')}>
+          <Link to="/" className="flex-shrink-0 pr-4" testID={HeaderSelectors.templeLogoIcon}>
+            <Logo hasTitle={fullPage} white style={logoStyles} />
+          </Link>
+          <div className="flex items-stretch">{ready && <Control />}</div>
         </div>
       </ContentContainer>
     </header>

src/app/layouts/SimplePageLayout.tsx

@@ -6,43 +6,50 @@ import DocBg from 'app/a11y/DocBg';
 import Logo from 'app/atoms/Logo';
 import { useAppEnv } from 'app/env';
 import ContentContainer from 'app/layouts/ContentContainer';
+import ChristmasBgPopupImg from 'app/misc/christmas-popup-bg.png';
+
+const logoStyles = { height: 64, marginTop: 0, marginBottom: 0 };
 
 interface SimplePageLayoutProps extends PropsWithChildren {
   title: ReactNode;
 }
 
 const SimplePageLayout: FC<SimplePageLayoutProps> = ({ title, children }) => {
-  const appEnv = useAppEnv();
+  const { popup } = useAppEnv();
 
   return (
     <>
-      {!appEnv.fullPage && <DocBg bgClassName="bg-primary-white" />}
-
-      <ContentContainer className={classNames('min-h-screen', 'flex flex-col', !appEnv.fullPage && 'bg-primary-white')}>
-        <div className={classNames('mt-12 mb-10', 'flex flex-col items-center justify-center')}>
-          <div className="flex items-center">
-            <Logo hasTitle />
+      {popup && <DocBg bgClassName="bg-primary-white" />}
+
+      <ContentContainer
+        className={classNames('min-h-screen flex flex-col', popup && 'bg-gray-100 bg-no-repeat bg-contain')}
+        style={popup ? { backgroundImage: `url(${ChristmasBgPopupImg})` } : undefined}
+      >
+        <div className="mt-12 mb-10 flex flex-col items-center justify-center">
+          <div className={classNames('flex items-center', popup && 'bg-gray-100')}>
+            <Logo hasTitle style={logoStyles} />
           </div>
 
-          <div className={classNames('mt-4', 'text-center', 'text-2xl font-light leading-tight', 'text-gray-700')}>
+          <div
+            className={classNames(
+              'pt-2 text-center text-2xl font-normal leading-tight text-gray-700',
+              popup && 'bg-gray-100'
+            )}
+          >
             {title}
           </div>
         </div>
 
         <div
           className={classNames(
-            appEnv.fullPage
-              ? classNames('w-full mx-auto max-w-md', 'rounded-md')
-              : classNames('-mx-4', 'border-t border-gray-200'),
-            'px-4',
-            'bg-white',
-            'shadow-md'
+            popup ? '-mx-4 border-t border-gray-300' : 'w-full mx-auto max-w-md rounded-md',
+            'px-4 bg-white shadow-md'
           )}
         >
           {children}
         </div>
 
-        <div className={classNames('flex-1', !appEnv.fullPage && '-mx-4 px-4 bg-white')} />
+        <div className={classNames('flex-1', popup && '-mx-4 px-4 bg-white')} />
       </ContentContainer>
     </>
   );