christmas theme applied

madfish-solutions · Dec 11, 2023 · d3057f3 · d3057f3
1 parent 04d985b
commit d3057f3
Show file tree

Hide file tree

Showing 9 changed files with 324 additions and 779 deletions.
diff --git a/package.json b/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",

diff --git a/src/app/layouts/PageLayout/Header.tsx b/src/app/layouts/PageLayout/Header.tsx
@@ -18,22 +18,17 @@ 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>
-
-            {ready && <Control />}
-          </div>
+    <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={{ height: fullPage ? 64 : 52, marginTop: 0, marginBottom: 0 }} />
+          </Link>
+          <div className="flex items-stretch">{ready && <Control />}</div>
         </div>
       </ContentContainer>
     </header>

diff --git a/src/app/layouts/SimplePageLayout.tsx b/src/app/layouts/SimplePageLayout.tsx
@@ -6,34 +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';
 
 interface SimplePageLayoutProps extends PropsWithChildren {
   title: ReactNode;
+  isConfirmationPopup?: boolean;
 }
 
-const SimplePageLayout: FC<SimplePageLayoutProps> = ({ title, children }) => {
-  const appEnv = useAppEnv();
+const SimplePageLayout: FC<SimplePageLayoutProps> = ({ isConfirmationPopup = false, title, children }) => {
+  const { popup } = useAppEnv();
 
   return (
     <>
-      {!appEnv.fullPage && <DocBg bgClassName="bg-primary-white" />}
+      {popup && <DocBg bgClassName="bg-primary-white" />}
 
-      <ContentContainer className={classNames('min-h-screen', 'flex flex-col', !appEnv.fullPage && 'bg-primary-white')}>
+      <ContentContainer
+        className={classNames(
+          'min-h-screen',
+          'flex flex-col',
+          popup && !isConfirmationPopup && 'bg-gray-100 bg-no-repeat'
+        )}
+        style={{ backgroundImage: isConfirmationPopup ? undefined : `url(${ChristmasBgPopupImg})` }}
+      >
         <div className={classNames('mt-12 mb-10', 'flex flex-col items-center justify-center')}>
-          <div className="flex items-center">
-            <Logo hasTitle />
+          <div className="flex items-center bg-gray-100">
+            <Logo hasTitle style={{ height: 64, marginTop: 0, marginBottom: 0 }} />
           </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 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'),
+            popup
+              ? classNames('-mx-4', 'border-t border-gray-300')
+              : classNames('w-full mx-auto max-w-md', 'rounded-md'),
             'px-4',
             'bg-white',
             'shadow-md'
@@ -42,7 +58,7 @@ const SimplePageLayout: FC<SimplePageLayoutProps> = ({ title, children }) => {
           {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>
     </>
   );

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