Default Layout change, fix autodetect

src/AnalyticsNext/index.tsx

@@ -11,7 +11,7 @@ const ConsentComponentCustom = dynamic(() => import('../Components/ConsentCustom
 interface AnalyticsNext {
   router: NextRouter;
   attributes: any;
-  customLayout?: boolean;
+  oldLayout?: boolean;
   loginApp?: any;
   isLoggedApp?: boolean;
   children?: ReactNode;
@@ -20,7 +20,7 @@ interface AnalyticsNext {
 const AnalyticsNext = ({
   router,
   attributes,
-  customLayout = false,
+  oldLayout = false,
   loginApp,
   isLoggedApp,
   children,
@@ -32,16 +32,16 @@ const AnalyticsNext = ({
           {children}
           {process.env.NEXT_PUBLIC_DISABLE_ANALYTICS_CONSENT !== 'true' && (
             <>
-              {customLayout ? (
-                <ConsentComponentCustom
+              {oldLayout ? (
+                <ConsentComponent
                   endpoint={process.env.NEXT_PUBLIC_ENDPOINT_ANALYTICS_URL}
                   networkEnv={process.env.NEXT_PUBLIC_CONCORDIUM_NETWORK}
                   aesirXEndpoint={process.env.NEXT_PUBLIC_ENDPOINT_URL ?? 'https://api.aesirx.io'}
                   loginApp={loginApp}
                   isLoggedApp={isLoggedApp}
                 />
               ) : (
-                <ConsentComponent
+                <ConsentComponentCustom
                   endpoint={process.env.NEXT_PUBLIC_ENDPOINT_ANALYTICS_URL}
                   networkEnv={process.env.NEXT_PUBLIC_CONCORDIUM_NETWORK}
                   aesirXEndpoint={process.env.NEXT_PUBLIC_ENDPOINT_URL ?? 'https://api.aesirx.io'}

src/AnalyticsReact/index.tsx

@@ -4,25 +4,35 @@ import AnalyticsContextProvider from '../utils/AnalyticsContextProvider';
 import AnalyticsHandle from './handle';
 
 const ConsentComponent = React.lazy(() => import('../Components/Consent'));
+const ConsentComponentCustom = React.lazy(() => import('../Components/ConsentCustom'));
 
 interface AnalyticsReact {
   location: { search: string; pathname: string };
   history: { replace: (_: object) => void };
   children?: ReactNode;
+  oldLayout?: boolean;
 }
 
-const AnalyticsReact = ({ location, history, children }: AnalyticsReact) => {
+const AnalyticsReact = ({ location, history, oldLayout = false, children }: AnalyticsReact) => {
   return (
     <AnalyticsContextProvider>
       <AnalyticsHandle location={location} history={history}>
         {children}
         {process.env.REACT_APP_DISABLE_ANALYTICS_CONSENT !== 'true' && (
           <Suspense fallback={<></>}>
-            <ConsentComponent
-              endpoint={process.env.REACT_APP_ENDPOINT_ANALYTICS_URL}
-              networkEnv={process.env.REACT_APP_CONCORDIUM_NETWORK}
-              aesirXEndpoint={process.env.REACT_APP_ENDPOINT_URL ?? 'https://api.aesirx.io'}
-            />
+            {oldLayout ? (
+              <ConsentComponent
+                endpoint={process.env.REACT_APP_ENDPOINT_ANALYTICS_URL}
+                networkEnv={process.env.REACT_APP_CONCORDIUM_NETWORK}
+                aesirXEndpoint={process.env.REACT_APP_ENDPOINT_URL ?? 'https://api.aesirx.io'}
+              />
+            ) : (
+              <ConsentComponentCustom
+                endpoint={process.env.NEXT_PUBLIC_ENDPOINT_ANALYTICS_URL}
+                networkEnv={process.env.NEXT_PUBLIC_CONCORDIUM_NETWORK}
+                aesirXEndpoint={process.env.NEXT_PUBLIC_ENDPOINT_URL ?? 'https://api.aesirx.io'}
+              />
+            )}
           </Suspense>
         )}
       </AnalyticsHandle>

src/Components/Terms.tsx

@@ -78,12 +78,11 @@ const TermsComponent = ({ children, level, handleLevel, isCustom = false }: any)
             <Fragment key={key}>
               <div
                 className={`rounded-top d-flex align-items-center justify-content-between p-2 p-lg-3 fw-medium flex-wrap  ${
-                  isCustom ? 'py-2 py-lg-3 px-4' : 'p-2 p-lg-3 border-bottom bg-white'
+                  isCustom
+                    ? 'py-2 py-lg-3 px-4 header-consent-bg'
+                    : 'p-2 p-lg-3 border-bottom bg-white'
                 }`}
                 style={{
-                  ...(isCustom && {
-                    backgroundColor: '#F8F9FD',
-                  }),
                   ...(isCustom && {
                     borderBottom: '1px solid #DEDEDE',
                   }),

src/Hooks/useConsentStatus.ts

@@ -139,7 +139,7 @@ const useConsentStatus = (endpoint?: string, props?: WalletConnectionProps) => {
       }
     };
     initConnector();
-  }, []);
+  }, [window['concordium']]);
 
   useEffect(() => {
     if (activeConnector) {

src/analytics.tsx

@@ -35,14 +35,14 @@ const ConsentPopup = ({ visitor_uuid, event_uuid }: any) => {
       }}
     >
       <AesirXI18nextProvider appLanguages={appLanguages}>
-        {window['customLayoutConsent'] === 'true' ? (
-          <ConsentComponentCustom
+        {window['oldLayoutConsent'] === 'true' ? (
+          <ConsentComponent
             endpoint={window['aesirx1stparty'] ?? ''}
             networkEnv={window['concordiumNetwork'] ?? ''}
             aesirXEndpoint={window['aesirxEndpoint'] ?? 'https://api.aesirx.io'}
           />
         ) : (
-          <ConsentComponent
+          <ConsentComponentCustom
             endpoint={window['aesirx1stparty'] ?? ''}
             networkEnv={window['concordiumNetwork'] ?? ''}
             aesirXEndpoint={window['aesirxEndpoint'] ?? 'https://api.aesirx.io'}

src/styles/color-mode.scss

@@ -36,5 +36,14 @@
         color: $white;
       }
     }
+    .header-consent-bg {
+      background-color: var(--#{$prefix}light-bg-subtle);
+    }
+    .toast.custom .consent_info_tab .nav-item button.active {
+      color: $white;
+    }
+    .item_compliant {
+      background-color: #101529;
+    }
   }
 }

src/styles/style.scss

@@ -407,6 +407,9 @@ $dark: #222328;
       opacity: 0;
     }
   }
+  .header-consent-bg {
+    background-color: #f8f9fd;
+  }
 }
 body.modal-open,
 body.modal-sso-open {