Some more cleanups

academy-ui/src/components/layout/BasePage.tsx

@@ -4,16 +4,14 @@ import Footer from '@/components/layout/Footer';
 import TopNav from '@/components/main/TopNav/TopNav';
 import { SpaceWithIntegrationsDto } from '@/types/space/SpaceDto';
 import LoginModal from '@dodao/web-core/components/auth/LoginModal';
-import FullPageLoader from '@dodao/web-core/components/core/loaders/FullPageLoading';
 import { LoginModalProvider } from '@dodao/web-core/ui/contexts/LoginModalContext';
 import React, { ReactNode } from 'react';
-import styled from 'styled-components';
 
-const StyledMain = styled.main`
-  background-color: var(--bg-color);
-  color: var(--text-color);
-  min-height: calc(100vh - 118px);
-`;
+const mainStyle: React.CSSProperties = {
+  backgroundColor: 'var(--bg-color)',
+  color: 'var(--text-color)',
+  minHeight: 'calc(100vh - 118px)',
+};
 
 function PageTopNav(props: { space: SpaceWithIntegrationsDto }) {
   //Checking if the url contains embedded-tidbit-collections
@@ -22,9 +20,10 @@ function PageTopNav(props: { space: SpaceWithIntegrationsDto }) {
     if (currentUrl.includes('embedded-tidbit-collections')) {
       return null;
     }
+    return <TopNav space={props.space} />;
   }
 
-  return <TopNav space={props.space} />;
+  return null;
 }
 
 function PageFooter(props: { space: SpaceWithIntegrationsDto }) {
@@ -34,19 +33,18 @@ function PageFooter(props: { space: SpaceWithIntegrationsDto }) {
     if (currentUrl.includes('embedded-tidbit-collections')) {
       return null;
     }
+    return <Footer space={props.space} />;
   }
-  return <Footer space={props.space} />;
+  return null;
 }
-export function BasePage(props: { space: SpaceWithIntegrationsDto | null; children: ReactNode }) {
-  if (props.space?.id) {
-    return (
-      <LoginModalProvider>
-        <LoginModal space={props.space} />
-        <PageTopNav space={props.space} />
-        <StyledMain>{props.children}</StyledMain>
-        <PageFooter space={props.space} />
-      </LoginModalProvider>
-    );
-  }
-  return <FullPageLoader />;
+
+export function BasePage(props: { space: SpaceWithIntegrationsDto; children: ReactNode }) {
+  return (
+    <LoginModalProvider>
+      <LoginModal space={props.space} />
+      <PageTopNav space={props.space} />
+      <main style={mainStyle}>{props.children}</main>
+      <PageFooter space={props.space} />
+    </LoginModalProvider>
+  );
 }

academy-ui/src/components/layout/ChildLayout.tsx

@@ -2,7 +2,6 @@
 
 import { BasePage } from '@/components/layout/BasePage';
 import { SpaceWithIntegrationsDto } from '@/types/space/SpaceDto';
-import { ApolloProvider } from '@apollo/client';
 import ErrorPage from '@dodao/web-core/components/app/ErrorPage';
 import { NotificationWrapper } from '@dodao/web-core/components/layout/NotificationWrapper';
 import { Session } from '@dodao/web-core/types/auth/Session';
@@ -60,12 +59,10 @@ export function ChildLayout({
 
   return (
     <Web3ReactProviderWrapper>
-      <ApolloProvider client={client}>
-        <SessionProvider session={session}>
-          <BasePage space={space!}>{children}</BasePage>
-        </SessionProvider>
-        <NotificationWrapper />
-      </ApolloProvider>
+      <SessionProvider session={session}>
+        <BasePage space={space!}>{children}</BasePage>
+      </SessionProvider>
+      <NotificationWrapper />
     </Web3ReactProviderWrapper>
   );
 }

academy-ui/src/components/main/TopNav/AcademyTopNav/AcademyTopNav.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import CreateContentModalContents from '@/components/main/TopNav/CreateContentModalContents';
-import { SpaceProps } from '@/types/SpaceProps';
 import { SpaceTypes, SpaceWithIntegrationsDto } from '@/types/space/SpaceDto';
+import { SpaceProps } from '@/types/SpaceProps';
 import { isAdmin } from '@/utils/auth/isAdmin';
 import ButtonLarge from '@dodao/web-core/components/core/buttons/Button';
 import FullPageModal from '@dodao/web-core/components/core/modals/FullPageModal';
@@ -18,14 +18,13 @@ import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon';
 import { useSession } from 'next-auth/react';
 import Link from 'next/link';
 import React, { useState } from 'react';
-import styled from 'styled-components';
 import { DesktopNavLinks } from './DesktopNavLinks';
 import { MobileNavLinks } from './MobileNavLinks';
 
-const StyledDiv = styled.div`
-  background-color: var(--bg-color);
-  color: var(--text-color);
-`;
+const divStyle: React.CSSProperties = {
+  backgroundColor: 'var(--bg-color)',
+  color: 'var(--text-color)',
+};
 
 function CreateOrLoginButton(props: {
   session?: Session | undefined | null;
@@ -64,7 +63,7 @@ export default function AcademyTopNav(props: SpaceProps) {
   const { space } = props;
 
   return (
-    <StyledDiv>
+    <div style={divStyle}>
       <FullPageModal open={showCreateModal} onClose={() => setShowCreateModal(false)} title={'Create'} showCloseButton={false}>
         <CreateContentModalContents space={props.space} hideModal={() => setShowCreateModal(false)} />
       </FullPageModal>
@@ -136,6 +135,6 @@ export default function AcademyTopNav(props: SpaceProps) {
           </>
         )}
       </Disclosure>
-    </StyledDiv>
+    </div>
   );
 }

shared/web-core/src/components/core/loaders/FullPageLoading.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 // FullPageLoader.tsx
 import ArrowPathRoundedSquareIcon from '@heroicons/react/24/outline/ArrowPathRoundedSquareIcon';
 import React from 'react';

shared/web-core/src/components/layout/NotificationWrapper.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import Notification from '@dodao/web-core/components/core/notify/Notification';
 import { useNotificationContext } from '@dodao/web-core/ui/contexts/NotificationContext';