Merge branch 'development' into TW-1125-epic-assets-rework

.eslintrc

@@ -43,7 +43,7 @@
           }
         ],
         "pathGroupsExcludedImportTypes": ["react"],
-        "groups": [["external", "builtin"], "internal", ["parent", "sibling", "index"]],
+        "groups": [["external", "builtin"], "internal", "parent", "sibling", "index"],
         "alphabetize": {
           "order": "asc",
           "caseInsensitive": true

e2e/src/utils/browser-context.utils.ts

@@ -3,6 +3,7 @@ import { Browser } from 'puppeteer';
 import { PuppeteerScreenRecorder } from 'puppeteer-screen-recorder';
 
 import { BrowserContext } from '../classes/browser-context.class';
+
 import { getExtensionId } from './browser.utils';
 import { RETRY_OPTIONS } from './timing.utils';
 

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",
@@ -125,7 +126,7 @@
     "eslint": "^8.17.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-import-resolver-typescript": "^3",
-    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-import": "^2.29.0",
     "eslint-plugin-no-type-assertion": "^1.3.0",
     "eslint-plugin-prettier": "^4",
     "eslint-webpack-plugin": "^3.2.0",
@@ -216,6 +217,7 @@
     "@taquito/contracts-library": "17.0.0",
     "@taquito/tzip16": "17.0.0",
     "bignumber.js": "9.1.0",
+    "eslint-plugin-import": "2.29.0",
     "graphql-request": "^6.1.0",
     "json5": "^2.2.2"
   }

src/app/atoms/index.ts

@@ -47,3 +47,5 @@ export { Stepper } from './Stepper/Stepper';
 export { DataPlaceholder } from './DataPlaceholder';
 
 export { default as ABContainer } from './ABContainer';
+
+export { PageTitle } from './PageTitle';

src/app/layouts/PageLayout.tsx

@@ -17,12 +17,13 @@ import { DonationBanner } from '../atoms/DonationBanner/DonationBanner';
 import { useOnboardingProgress } from '../pages/Onboarding/hooks/useOnboardingProgress.hook';
 import { AdvertisingBanner } from '../templates/advertising/advertising-banner/advertising-banner';
 import { AdvertisingOverlay } from '../templates/advertising/advertising-overlay/advertising-overlay';
-import { PageLayoutSelectors } from './PageLayout.selectors';
+
 import { ChangelogOverlay } from './PageLayout/ChangelogOverlay/ChangelogOverlay';
 import ConfirmationOverlay from './PageLayout/ConfirmationOverlay';
 import Header from './PageLayout/Header';
 import { NewsletterOverlay } from './PageLayout/NewsletterOverlay/NewsletterOverlay';
 import { OnRampOverlay } from './PageLayout/OnRampOverlay/OnRampOverlay';
+import { PageLayoutSelectors } from './PageLayout.selectors';
 
 interface PageLayoutProps extends PropsWithChildren, ToolbarProps {
   contentContainerStyle?: React.CSSProperties;

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';
 
@@ -12,28 +12,25 @@ import { useTempleClient, useAccount } from 'lib/temple/front';
 import Popper from 'lib/ui/Popper';
 import { Link } from 'lib/woozie';
 
-import styles from './Header.module.css';
-import { HeaderSelectors } from './Header.selectors';
 import AccountDropdown from './Header/AccountDropdown';
 import NetworkSelect from './Header/NetworkSelect';
+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/PageLayout/Header/AccountDropdown/AccountItem.tsx

@@ -5,10 +5,10 @@ import classNames from 'clsx';
 import { Name, Button, HashShortView, Money, Identicon } from 'app/atoms';
 import AccountTypeBadge from 'app/atoms/AccountTypeBadge';
 import Balance from 'app/templates/Balance';
+import { setAnotherSelector, setTestID } from 'lib/analytics';
 import { TempleAccount } from 'lib/temple/types';
 import { useScrollIntoViewOnMount } from 'lib/ui/use-scroll-into-view';
 
-import { setAnotherSelector, setTestID } from '../../../../../lib/analytics';
 import { AccountDropdownSelectors } from './selectors';
 
 interface AccountItemProps {

src/app/layouts/PageLayout/NewsletterOverlay/NewsletterOverlay.tsx

@@ -14,12 +14,12 @@ import { useOnboardingProgress } from 'app/pages/Onboarding/hooks/useOnboardingP
 import { shouldShowNewsletterModalAction } from 'app/store/newsletter/newsletter-actions';
 import { useShouldShowNewsletterModalSelector } from 'app/store/newsletter/newsletter-selectors';
 import { useOnRampPossibilitySelector } from 'app/store/settings/selectors';
+import { setTestID } from 'lib/analytics';
 import { newsletterApi } from 'lib/apis/newsletter';
 import { useYupValidationResolver } from 'lib/form/use-yup-validation-resolver';
 import { T, t } from 'lib/i18n/react';
 import { useLocation } from 'lib/woozie';
 
-import { setTestID } from '../../../../lib/analytics';
 import NewsletterImage from './NewsletterImage.png';
 import { NewsletterOverlaySelectors } from './NewsletterOverlay.selectors';
 

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>
     </>
   );

src/app/layouts/TabsPageLayout.tsx

@@ -10,6 +10,7 @@ import { Link } from 'lib/woozie';
 
 import { useAppEnv } from '../env';
 import ErrorBoundary from '../ErrorBoundary';
+
 import PageLayout from './PageLayout';
 
 export interface TabInterface extends Required<TestIDProperty> {