WIP Commit

Author: Saeris

.gitignore

@@ -29,3 +29,6 @@ standalone-packages/monaco-editor-core
 
 .next
 .cache-loader
+
+# Local Netlify folder
+.netlify

packages/app/src/app/components/Layout/Layout.tsx

@@ -1,20 +1,25 @@
 import React from 'react';
+import { ThemeProvider } from '@codesandbox/components/lib/components/ThemeProvider';
+import { default as codesandboxBlack } from '@codesandbox/common/lib/themes/codesandbox-black';
+import { default as Navigation } from '@codesandbox/common/lib/components/Navigation';
 import { Footer } from '@codesandbox/common/lib/components';
-import { PageHeader } from '../PageHeader';
+// import { PageHeader } from '../PageHeader';
 import { Main, PageContent } from './elements';
 
 interface ILayoutProps {
   title: string;
 }
 
 // TODO:
-// - Refactor Navigation
+// - Refactor Navigation (Swap out old Navigation component from Common to new version (PageHeader))
 // - Add code to determine Navigation Items / Page Title from Route Info
 
 export const Layout: React.FC<ILayoutProps> = ({ title, children }) => (
   <Main>
-    <PageHeader title={title} />
-    <PageContent>{children}</PageContent>
-    <Footer />
+    <ThemeProvider vsCodeTheme={codesandboxBlack}>
+      <Navigation />
+      <PageContent>{children}</PageContent>
+      <Footer />
+    </ThemeProvider>
   </Main>
 );

packages/app/src/app/components/Layout/elements.ts

@@ -3,13 +3,18 @@ import styled, { css } from 'styled-components';
 export const Main = styled.main`
   ${({ theme }) => css`
     display: flex;
-    flex-direction: column;
     width: 100%;
-    min-height: 100vh;
-    height: 100%;
     background-color: #040404;
     color: ${theme.white};
     ${theme.fonts.primary.normal};
+
+    > div {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      min-height: 100vh;
+      height: 100%;
+    }
   `}
 `;
 

packages/app/src/app/pages/Profile/Paginate.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import { connectPagination } from 'react-instantsearch-dom';
+import { Pagination } from '@codesandbox/common/lib/components';
+
+export const Paginate = connectPagination(({ nbPages, refine }) => (
+  <Pagination pages={nbPages} onChange={page => refine(page)} />
+));