Az/wi2021 pages new nav

components/EventHomePage/Hero.js

@@ -80,6 +80,7 @@ const Main = styled.div`
   flex-direction: row;
   margin: auto;
   justify-content: center;
+  padding-top: 5rem;
 
   ${below[twoColBp]`
     flex-direction: column;

components/EventHomePage/LearnMore.js

@@ -98,7 +98,7 @@ const LearnMore = ({ className }) => {
               hoverBackgroundColor="thatBlue"
             />
             <LinkButton
-              href="/wi/faq"
+              href="/wi/2021/faq"
               label="FAQ"
               borderColor="thatBlue"
               className="stretch-sm"

components/Header/root.js

@@ -16,7 +16,7 @@ const StyledIcon = styled(Icon)`
   &:hover {
     cursor: pointer;
   }
-
+  margin-top: 1rem;
   ${below.small`    
     height: 7rem;
   `};
@@ -95,12 +95,14 @@ const RootHeader = ({ className, loading, user }) => {
   return (
     <header className={className}>
       <Link href="/" prefetch={false}>
-        <StyledIcon
-          icon="thatLogo"
-          width="250"
-          height="50"
-          viewBoxWidth="400"
-        />
+        <a href="/">
+          <StyledIcon
+            icon="thatLogo"
+            width="250"
+            height="50"
+            viewBoxWidth="400"
+          />
+        </a>
       </Link>
       <div style={{ flexGrow: 2 }} />
 

components/PartnerDetail/HeroSection.js

@@ -23,7 +23,7 @@ const HeroBlock = styled.div`
   height: 75rem;
   align-items: center;
   justify-content: center;
-  margin-top: 5rem;
+  margin-top: 0;
 
   ${below.med`
     height: 43.3rem;

components/layouts/Default.js

@@ -1,17 +1,17 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { ThemeProvider } from 'styled-components';
-import { DefaultSeo, LogoJsonLd } from 'next-seo';
+import { DefaultSeo, LogoJsonLd, SocialProfileJsonLd } from 'next-seo';
 import { useRouter } from 'next/router';
 // import LogRocket from 'logrocket';
 import * as Sentry from '@sentry/browser';
-import { isNil } from 'lodash';
+import { isNil, map } from 'lodash';
 
 import GlobalStyle from '../../styles/globalStyle';
 import baseTheme from '../../styles/baseTheme';
 import Meta from '../Meta';
-import Header from '../Header/default';
+import Header from '../Header/root';
 import Footer from '../Footer';
-import { defaultSeo } from '../../utilities';
+import { rootSeo, socialConstants } from '../../utilities';
 import User from '../User';
 import { useFetchUser } from '../../hooks/user';
 import {
@@ -21,17 +21,12 @@ import {
   InnerPage,
 } from '../shared/StandardStyles';
 
-const Default = ({ children, headerType }) => {
+const Default = ({ children }) => {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
-  const [layeredHeader, setLayeredHeader] = useState(false);
 
   const { user, loading } = useFetchUser();
   const router = useRouter();
 
-  useEffect(() => {
-    setLayeredHeader(headerType === 'layered');
-  });
-
   if (!isNil(user)) {
     document.tidioIdentify = {
       distinct_id: user.id,
@@ -51,27 +46,38 @@ const Default = ({ children, headerType }) => {
     });
   }
 
+  const socialUrls = map(
+    socialConstants.thatSocialLinks,
+    socialLink => socialLink.url,
+  );
+
   return (
     <ThemeProvider theme={baseTheme}>
       <>
         <GlobalStyle />
         <StyledPage>
           <Meta />
           <DefaultSeo
-            {...defaultSeo}
+            {...rootSeo}
             canonical={`https://www.thatconference.com/${router.pathname}`}
           />
           <LogoJsonLd
-            logo="https://www.thatconference.com/svgs/THATConference-WI.svg"
-            url={`https://www.thatconference.com/${router.pathname}`}
+            logo="https://www.thatconference.com/svgs/THAT.svg"
+            url="https://www.thatconference.com"
+          />
+          <SocialProfileJsonLd
+            type="Organization"
+            name="THAT"
+            url="http://www.thatconference.com"
+            logo="https://www.thatconference.com/svgs/THAT.svg"
+            sameAs={socialUrls}
           />
           <CorePage>
             <User user={user} loading={loading}>
               <PageDiv mobileMenuOpen={mobileMenuOpen}>
                 <Header
                   user={user}
                   loading={loading}
-                  layered={layeredHeader}
                   mobileMenuOpen={mobileMenuOpen}
                   setMobileMenuOpen={setMobileMenuOpen}
                 />

components/shared/MarkdownSection.js

@@ -14,6 +14,11 @@ const StyledContentSection = styled(ContentSection)`
       outline: none;
     }
   }
+
+  h2 {
+    margin-top: 0;
+    margin-bottom: 2rem;
+  }
 `;
 
 const replaceVariables = (markdownBody, variables) => {

components/shared/Stepper.js

@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 
 const Container = styled.div`
-  margin-top: -10rem;
+  margin-top: 0;
   margin-bottom: 4rem;
 `;
 

pages/blog/[post].js

@@ -13,7 +13,7 @@ import ContentSection from '../../components/shared/ContentSection';
 const SlimContentSection = styled(ContentSection)`
   width: 70vw;
   margin: auto;
-  padding-top: 0;
+  padding-top: 5;
 
   ${below.small`
     width 100vw;

pages/index.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { NextSeo } from 'next-seo';
-import RootLayout from '../components/layouts/Root';
 
 import ContentSection from '../components/shared/ContentSection';
 
@@ -57,6 +56,4 @@ const index = () => {
   );
 };
 
-index.Layout = RootLayout;
-
 export default index;

pages/member/session-edit/[sessionId].js

@@ -49,7 +49,7 @@ const Title = styled.h1`
 `;
 
 const MainContent = styled(ContentSection)`
-  padding-top: 0;
+  padding-top: 5;
 `;
 
 const SessionEdit = ({ user, loading: loadingUser, sessionId }) => {

pages/member/session-preview/[sessionId].js

@@ -38,7 +38,7 @@ const MainGrid = styled(Grid)`
 `;
 
 const MainContent = styled(ContentSection)`
-  padding-top: 0;
+  padding-top: 5;
 `;
 
 const SessionEdit = ({ user, loading: loadingUser, sessionId }) => {

pages/tx/2021/index.js

@@ -3,13 +3,11 @@
  */
 
 import React from 'react';
-import RootLayout from '../../../components/layouts/Root';
+
 import ComingSoon from '../../../components/EventPages/ComingSoon';
 
 const Index = () => {
   return <ComingSoon />;
 };
 
-Index.Layout = RootLayout;
-
 export default Index;

pages/wi/2020/index.js

@@ -3,7 +3,7 @@
  */
 
 import React from 'react';
-import RootLayout from '../../../components/layouts/Root';
+
 import OneDayEvent from '../../../components/EventPages/OneDayEvent';
 
 const TICKETS = [
@@ -72,8 +72,6 @@ const Index = ({ eventSlug }) => {
   return <OneDayEvent eventSlug={eventSlug.substring(1)} tickets={TICKETS} />;
 };
 
-Index.Layout = RootLayout;
-
 Index.getInitialProps = async context => {
   return { eventSlug: context.pathname };
 };

pages/wi/index.js

@@ -8,4 +8,4 @@ import redirect from '../../components/shared/Redirect';
  * TO DO: hardcoded for now, eventually be great to have this
  * dynamically pull current event for location
  */
-export default redirect('/wi/2020');
+export default redirect('/wi/2021');

utilities/index.js

@@ -7,4 +7,4 @@ export * from './svgs';
 export * from './themeColorNames';
 export * from './utilityFunctions';
 export * from './validation';
-export const DEFAULT_WIP_PAGE = 'work-in-progress';
+export const DEFAULT_WIP_PAGE = '/work-in-progress';