TW-1634: Revert "TW-1605: Apply Christmas theme (#1236)" (#1249)

This reverts commit 8082593.
madfish-solutions · Jan 10, 2025 · 0a39a85 · 0a39a85
1 parent 7b9797f
commit 0a39a85
Show file tree

Hide file tree

Showing 6 changed files with 783 additions and 295 deletions.
diff --git a/src/app/layouts/PageLayout/Header.tsx b/src/app/layouts/PageLayout/Header.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useMemo } from 'react';
+import React, { FC } from 'react';
 
 import classNames from 'clsx';
 
@@ -18,19 +18,22 @@ import styles from './Header.module.css';
 import { HeaderSelectors } from './Header.selectors';
 
 const Header: FC = () => {
-  const { fullPage } = useAppEnv();
+  const appEnv = useAppEnv();
   const { ready } = useTempleClient();
 
-  const logoStyles = useMemo(() => ({ height: fullPage ? 64 : 52, marginTop: 0, marginBottom: 0 }), [fullPage]);
-
   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>
+    <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} fill="#FFFFFF" />
+              </div>
+            </Link>
+
+            {ready && <Control />}
+          </div>
         </div>
       </ContentContainer>
     </header>

diff --git a/src/app/layouts/SimplePageLayout.tsx b/src/app/layouts/SimplePageLayout.tsx
@@ -6,50 +6,43 @@ 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 { popup } = useAppEnv();
+  const appEnv = useAppEnv();
 
   return (
     <>
-      {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} />
+      {!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 />
           </div>
 
-          <div
-            className={classNames(
-              'pt-2 text-center text-2xl font-normal leading-tight text-gray-700',
-              popup && 'bg-gray-100'
-            )}
-          >
+          <div className={classNames('mt-4', 'text-center', 'text-2xl font-light leading-tight', 'text-gray-700')}>
             {title}
           </div>
         </div>
 
         <div
           className={classNames(
-            popup ? '-mx-4 border-t border-gray-300' : 'w-full mx-auto max-w-md rounded-md',
-            'px-4 bg-white shadow-md'
+            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'
           )}
         >
           {children}
         </div>
 
-        <div className={classNames('flex-1', popup && '-mx-4 px-4 bg-white')} />
+        <div className={classNames('flex-1', !appEnv.fullPage && '-mx-4 px-4 bg-white')} />
       </ContentContainer>
     </>
   );

diff --git a/src/app/misc/christmas-popup-bg.png b/src/app/misc/christmas-popup-bg.png