Implement ambassador page changes. Refactor modal system.

TODO: prevent scrolling up when opening modal

src/components/Footer.tsx

@@ -137,7 +137,7 @@ const Separator = styled.div`
   background-color: ${({ theme }) => theme.separator};
   margin: auto 0;
 
-  @media ${deviceBreakPoints.tablet} {
+  @media ${deviceBreakPoints.mobile} {
     display: none;
   }
 `
@@ -166,7 +166,7 @@ const PageSectionContainerStyled = styled(PageSectionContainer)`
   gap: var(--spacing-10);
   justify-content: space-between;
 
-  @media ${deviceBreakPoints.tablet} {
+  @media ${deviceBreakPoints.mobile} {
     flex-direction: column;
     gap: var(--spacing-10);
     align-items: center;

src/components/pages/ambassadors/AmbassadorsInfoSection.tsx

@@ -164,18 +164,6 @@ const AmbassadorsInfoSection = ({ className }: AmbassadorsInfoSectionProps) => (
           <Question>Are participants in the Alephian Program paid?</Question>
           <Answer>All participants who are selected for the Alephian Program will be receiving ALPH rewards.</Answer>
         </QABox>
-        <QABox>
-          <Question>What are the program rules?</Question>
-          <Answer>The rules are described here:</Answer>
-          <ArrowedLink
-            url="https://docs.google.com/document/d/1HG2MrnTIS3oV9eo35giGKr_yAJnDisla"
-            newTab
-            trackingName="ambassadors:program-rules-link"
-            colorArrowOnly
-          >
-            Program rules
-          </ArrowedLink>
-        </QABox>
         <QABox>
           <Question>I have an existing community, can I still work with Alephium?</Question>
           <Answer>Yes! Community is about bringing people together and knowledge sharing.</Answer>
@@ -194,7 +182,7 @@ const AmbassadorsInfoSection = ({ className }: AmbassadorsInfoSectionProps) => (
         </QABox>
         <QABox>
           <Question>What if I have more questions?</Question>
-          <Answer>If you have any questions about the program, email community@alephium.org.</Answer>
+          <Answer>If you have any questions about the program, please email: community@alephium.org.</Answer>
         </QABox>
       </FAQContent>
     </AmbassadorsSectionContainer>

src/components/pages/ambassadors/ModalTermsAndConditions.tsx

@@ -1,7 +1,24 @@
-import { useStaticQuery, graphql } from 'gatsby'
-import Modal, { ModalProps } from '../../Modal'
+import { useStaticQuery, graphql, navigate } from 'gatsby'
+import Modal from '../../Modal'
+import { WindowLocation } from '@reach/router'
+
+interface ModalTermsAndConditionsProps {
+  location: WindowLocation<unknown>
+}
+
+const ModalTermsAndConditions = ({ location }: ModalTermsAndConditionsProps) => {
+  const params = new URLSearchParams(location.search)
+
+  const isOpen = params.get('modal') === 'terms'
+
+  const setIsClosed = (shouldBeOpen: boolean) => {
+    if (!shouldBeOpen) {
+      params.delete('modal')
+      const newSearch = params.toString()
+      navigate(location.pathname + '?' + newSearch + location.hash)
+    }
+  }
 
-const ModalTermsAndConditions = ({ isOpen, setIsOpen }: ModalProps) => {
   const { modal } = useStaticQuery(graphql`
     query {
       modal: allMarkdownRemark(filter: { fileAbsolutePath: { regex: "/modals/ambassadors-terms.md/" } }) {
@@ -18,7 +35,7 @@ const ModalTermsAndConditions = ({ isOpen, setIsOpen }: ModalProps) => {
   const data = modal.nodes[0]
 
   return (
-    <Modal title={data.frontmatter.title} isOpen={isOpen} setIsOpen={setIsOpen}>
+    <Modal title={data.frontmatter.title} isOpen={isOpen} setIsOpen={setIsClosed}>
       <div dangerouslySetInnerHTML={{ __html: data.html }} />
     </Modal>
   )

src/components/pages/ambassadors/TiersSlider.tsx

@@ -100,7 +100,8 @@ const contentTiers: TierContent[] = [
   },
   {
     title: 'Content Creator',
-    tasks: 'Creation of articles, videos, reviews, tutorials, images or any content that will showcase Alephium.',
+    tasks:
+      'Creation of original articles, videos, reviews, tutorials, images or any content that will showcase Alephium.',
     targets: `At least a total of 2 monthly contributions:
       - Articles
       - Reviews
@@ -112,7 +113,7 @@ const contentTiers: TierContent[] = [
   },
   {
     title: 'Super Content Creator',
-    tasks: 'Creation of articles, videos, reviews, tutorials, images or any content that will showcase Alephium.',
+    tasks: 'Tier 2 but Supercharged',
     targets: `At least a total of 4 monthly contributions: 
       - Articles
       - Reviews
@@ -126,26 +127,22 @@ const contentTiers: TierContent[] = [
 
 const outreachTiers: TierContent[] = [
   {
-    title: 'Meet-up coordinator',
+    title: 'Meet-up Coordinator',
     tasks: 'Organize a meet-up live or online to discuss topics around Alephium and spread the word about the project.',
     targets: `1 meet up per month.
 Introduce developers to the ecosystem.`
   },
   {
-    title: 'Events organizer',
-    tasks: `Tier 1 +
-    Organize and promote online and live events in order to spread the word about the project and grow the ecosystem. 
-    Introduce developers to the ecosystem
-    `,
-    targets: `1 event per month.`
+    title: 'Alephium Networker',
+    tasks: `Connect the Alephium team with various podcast/twitter hosts or other projects which might be interesting for the grow of the ecosystem.    `,
+    targets: `2 to 3 qualified connections a month.`
   },
   {
-    title: 'Alephium Influencer',
-    tasks: `Tier 1 + tier 2 + 
-    Actively promote Alephium on socials, host twitter space or a podcast. 
-    Connect the Alephium team with various podcast/twitter hosts or other projects which might be interesting for the grow of the ecosystem.    `,
-    targets: `1 meet-up/event/free- event attendance where you promote Alephium.
-1 meaningful connection a month.
+    title: 'Events Organizer',
+    tasks: `Organize and promote online and live events in order to spread the word about the project and grow the ecosystem. 
+    Introduce developers to the ecosystem
+    `,
+    targets: `1 event per month.
 Introduce developers to the ecosystem.`
   }
 ]

src/pages/ambassadors.tsx

@@ -1,5 +1,5 @@
 import styled, { ThemeProvider, useTheme } from 'styled-components'
-import { graphql, PageProps } from 'gatsby'
+import { graphql, navigate, PageProps } from 'gatsby'
 
 import GlobalStyle from '../styles/global-style'
 import { ambassadorsTheme } from '../styles/themes'
@@ -18,34 +18,34 @@ import NavigationMenu from '../components/NavigationMenu'
 import Footer from '../components/Footer'
 import SimpleLink from '../components/SimpleLink'
 import ModalTermsAndConditions from '../components/pages/ambassadors/ModalTermsAndConditions'
-import { useEffect, useState } from 'react'
 
-interface HackathonPageProps extends PageProps {
+interface AmbassadorsPageProps extends PageProps {
   data: {
     ambassadors: {
       nodes: {
         frontmatter: {
           headerLandingSection: AmbassadorsLandingSectionContentType
           introSection: AmbassadorsIntroSectionContentType
-          hackathonInfo: AmbassadorsInfoSectionContentType
+          informations: AmbassadorsInfoSectionContentType
         }
         html: string
       }[]
     }
   }
 }
 
-const IndexPage = (props: HackathonPageProps) => {
+const IndexPage = ({ location, ...props }: AmbassadorsPageProps) => {
   const pageContent = props.data.ambassadors.nodes[0].frontmatter
-  const [isModalTermsOpen, setIsModalTermsOpen] = useState(false)
 
-  const params = new URLSearchParams(props.location.search)
+  const params = new URLSearchParams(location.search)
 
-  const openTermsModal = params.get('terms') !== null
-
-  useEffect(() => {
-    if (openTermsModal) setIsModalTermsOpen(true)
-  }, [openTermsModal])
+  const setIsModalTermsOpen = (shouldOpen: boolean) => {
+    if (shouldOpen) {
+      params.set('modal', 'terms')
+      const newSearch = params.toString()
+      navigate(location.pathname + '?' + newSearch + location.hash)
+    }
+  }
 
   return (
     <ThemeProvider theme={ambassadorsTheme}>
@@ -55,13 +55,13 @@ const IndexPage = (props: HackathonPageProps) => {
         <NavigationMenuStyled />
         <AmbassadorsLandingSection content={pageContent.headerLandingSection} />
         <AmbassadorsIntroSection content={pageContent.introSection} />
-        <AmbassadorsInfoSection content={pageContent.hackathonInfo} />
+        <AmbassadorsInfoSection content={pageContent.informations} />
       </Wrapper>
       <TermsAndConditionsRibbon>
         <SimpleLink openModal={setIsModalTermsOpen}>{"Program's terms and conditions"}</SimpleLink>
       </TermsAndConditionsRibbon>
-      <ModalTermsAndConditions isOpen={isModalTermsOpen} setIsOpen={setIsModalTermsOpen} />
-      <Footer location={props.location} />
+      <ModalTermsAndConditions location={location} />
+      <Footer location={location} />
     </ThemeProvider>
   )
 }
@@ -142,82 +142,6 @@ export const pageQuery = graphql`
             subtitle
             description
           }
-          hackathonInfo {
-            participantsInfo {
-              title
-              description
-              link {
-                text
-                url
-              }
-            }
-            prerequisites {
-              title
-              description
-              skills
-              link {
-                text
-                url
-              }
-            }
-            schedule {
-              title
-              description
-              events {
-                title
-                description
-              }
-            }
-            ideasAndTracks {
-              title
-              subtitle
-              tracks {
-                title
-                description
-              }
-            }
-            prizes {
-              title
-              description
-              prizeList {
-                title
-                description
-              }
-            }
-          }
-          rulesAndJudging {
-            title
-            subtitle
-            rules {
-              title
-              description
-            }
-            criteria {
-              title
-              description
-              criteriumList {
-                title
-                description
-              }
-            }
-            jury {
-              title
-              description
-              people {
-                name
-                role
-                picture {
-                  childImageSharp {
-                    gatsbyImageData(width: 200, placeholder: BLURRED, formats: [AUTO])
-                  }
-                }
-              }
-            }
-          }
-          gettingStarted {
-            title
-            subtitle
-          }
         }
         html
       }