From 7e4bccbc2985374c61df5ec60df0269d2a09ad23 Mon Sep 17 00:00:00 2001
From: Syed Sajjad Hussain Shah
 <52817156+syedsajjadkazmii@users.noreply.github.com>
Date: Fri, 14 Jul 2023 19:14:58 +0500
Subject: [PATCH] fix: fix rebrand experiment issue (#976)

---
 src/base-container/data/constants.js |  3 +-
 src/base-container/index.jsx         | 68 ++++++++++++++--------------
 2 files changed, 36 insertions(+), 35 deletions(-)

diff --git a/src/base-container/data/constants.js b/src/base-container/data/constants.js
index fa80e06a..adde2561 100644
--- a/src/base-container/data/constants.js
+++ b/src/base-container/data/constants.js
@@ -1,3 +1,4 @@
+const IMAGE_LAYOUT = 'image-layout';
 const DEFAULT_LAYOUT = 'default-layout';
 
-export default DEFAULT_LAYOUT;
+export { DEFAULT_LAYOUT, IMAGE_LAYOUT };
diff --git a/src/base-container/index.jsx b/src/base-container/index.jsx
index 23003ce8..1298ca2c 100644
--- a/src/base-container/index.jsx
+++ b/src/base-container/index.jsx
@@ -11,7 +11,7 @@ import {
   ImageExtraSmallLayout, ImageLargeLayout, ImageMediumLayout, ImageSmallLayout,
 } from './components/image-layout';
 import { AuthLargeLayout, AuthMediumLayout, AuthSmallLayout } from './components/welcome-page-layout';
-import DEFAULT_LAYOUT from './data/constants';
+import { DEFAULT_LAYOUT, IMAGE_LAYOUT } from './data/constants';
 
 const BaseContainer = ({ children, showWelcomeBanner }) => {
   const authenticatedUser = showWelcomeBanner ? getAuthenticatedUser() : null;
@@ -34,46 +34,46 @@ const BaseContainer = ({ children, showWelcomeBanner }) => {
     initRebrandExperiment();
   }, []);
 
-  if (baseContainerVersion === DEFAULT_LAYOUT) {
+  if (baseContainerVersion === IMAGE_LAYOUT) {
     return (
-      <>
-        <div className="col-md-12 extra-large-screen-top-stripe" />
-        <div className="layout">
-          <MediaQuery maxWidth={breakpoints.small.maxWidth - 1}>
-            {authenticatedUser ? <AuthSmallLayout username={username} /> : <DefaultSmallLayout />}
-          </MediaQuery>
-          <MediaQuery minWidth={breakpoints.medium.minWidth} maxWidth={breakpoints.large.maxWidth - 1}>
-            {authenticatedUser ? <AuthMediumLayout username={username} /> : <DefaultMediumLayout />}
-          </MediaQuery>
-          <MediaQuery minWidth={breakpoints.extraLarge.minWidth}>
-            {authenticatedUser ? <AuthLargeLayout username={username} /> : <DefaultLargeLayout />}
-          </MediaQuery>
-          <div className={classNames('content', { 'align-items-center mt-0': authenticatedUser })}>
-            {children}
-          </div>
+      <div className="layout">
+        <MediaQuery maxWidth={breakpoints.extraSmall.maxWidth - 1}>
+          {authenticatedUser ? <AuthSmallLayout username={username} /> : <ImageExtraSmallLayout />}
+        </MediaQuery>
+        <MediaQuery minWidth={breakpoints.small.minWidth} maxWidth={breakpoints.small.maxWidth - 1}>
+          {authenticatedUser ? <AuthSmallLayout username={username} /> : <ImageSmallLayout />}
+        </MediaQuery>
+        <MediaQuery minWidth={breakpoints.medium.minWidth} maxWidth={breakpoints.large.maxWidth - 1}>
+          {authenticatedUser ? <AuthMediumLayout username={username} /> : <ImageMediumLayout />}
+        </MediaQuery>
+        <MediaQuery minWidth={breakpoints.extraLarge.minWidth}>
+          {authenticatedUser ? <AuthLargeLayout username={username} /> : <ImageLargeLayout />}
+        </MediaQuery>
+        <div className={classNames('content', { 'align-items-center mt-0': authenticatedUser })}>
+          {children}
         </div>
-      </>
+      </div>
     );
   }
 
   return (
-    <div className="layout">
-      <MediaQuery maxWidth={breakpoints.extraSmall.maxWidth - 1}>
-        {authenticatedUser ? <AuthSmallLayout username={username} /> : <ImageExtraSmallLayout />}
-      </MediaQuery>
-      <MediaQuery minWidth={breakpoints.small.minWidth} maxWidth={breakpoints.small.maxWidth - 1}>
-        {authenticatedUser ? <AuthSmallLayout username={username} /> : <ImageSmallLayout />}
-      </MediaQuery>
-      <MediaQuery minWidth={breakpoints.medium.minWidth} maxWidth={breakpoints.large.maxWidth - 1}>
-        {authenticatedUser ? <AuthMediumLayout username={username} /> : <ImageMediumLayout />}
-      </MediaQuery>
-      <MediaQuery minWidth={breakpoints.extraLarge.minWidth}>
-        {authenticatedUser ? <AuthLargeLayout username={username} /> : <ImageLargeLayout />}
-      </MediaQuery>
-      <div className={classNames('content', { 'align-items-center mt-0': authenticatedUser })}>
-        {children}
+    <>
+      <div className="col-md-12 extra-large-screen-top-stripe" />
+      <div className="layout">
+        <MediaQuery maxWidth={breakpoints.small.maxWidth - 1}>
+          {authenticatedUser ? <AuthSmallLayout username={username} /> : <DefaultSmallLayout />}
+        </MediaQuery>
+        <MediaQuery minWidth={breakpoints.medium.minWidth} maxWidth={breakpoints.large.maxWidth - 1}>
+          {authenticatedUser ? <AuthMediumLayout username={username} /> : <DefaultMediumLayout />}
+        </MediaQuery>
+        <MediaQuery minWidth={breakpoints.extraLarge.minWidth}>
+          {authenticatedUser ? <AuthLargeLayout username={username} /> : <DefaultLargeLayout />}
+        </MediaQuery>
+        <div className={classNames('content', { 'align-items-center mt-0': authenticatedUser })}>
+          {children}
+        </div>
       </div>
-    </div>
+    </>
   );
 };