From 5da9e810d7bc383cc5181be57cdd3350203a64c5 Mon Sep 17 00:00:00 2001 From: mvaivre Date: Mon, 3 Jul 2023 16:08:51 +0200 Subject: [PATCH] Implement ambassador page changes. Refactor modal system. TODO: prevent scrolling up when opening modal --- src/components/Footer.tsx | 4 +- .../ambassadors/AmbassadorsInfoSection.tsx | 14 +-- .../ambassadors/ModalTermsAndConditions.tsx | 25 ++++- .../pages/ambassadors/TiersSlider.tsx | 27 ++--- src/pages/ambassadors.tsx | 106 +++--------------- 5 files changed, 51 insertions(+), 125 deletions(-) diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index 9d20a29f..e9e2b0c7 100644 --- a/src/components/Footer.tsx +++ b/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; diff --git a/src/components/pages/ambassadors/AmbassadorsInfoSection.tsx b/src/components/pages/ambassadors/AmbassadorsInfoSection.tsx index adc9a6bd..2f7a318c 100644 --- a/src/components/pages/ambassadors/AmbassadorsInfoSection.tsx +++ b/src/components/pages/ambassadors/AmbassadorsInfoSection.tsx @@ -164,18 +164,6 @@ const AmbassadorsInfoSection = ({ className }: AmbassadorsInfoSectionProps) => ( Are participants in the Alephian Program paid? All participants who are selected for the Alephian Program will be receiving ALPH rewards. - - What are the program rules? - The rules are described here: - - Program rules - - I have an existing community, can I still work with Alephium? Yes! Community is about bringing people together and knowledge sharing. @@ -194,7 +182,7 @@ const AmbassadorsInfoSection = ({ className }: AmbassadorsInfoSectionProps) => ( What if I have more questions? - If you have any questions about the program, email community@alephium.org. + If you have any questions about the program, please email: community@alephium.org. diff --git a/src/components/pages/ambassadors/ModalTermsAndConditions.tsx b/src/components/pages/ambassadors/ModalTermsAndConditions.tsx index e1dc1975..c79d0ba7 100644 --- a/src/components/pages/ambassadors/ModalTermsAndConditions.tsx +++ b/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 +} + +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 ( - +
) diff --git a/src/components/pages/ambassadors/TiersSlider.tsx b/src/components/pages/ambassadors/TiersSlider.tsx index ac01b988..7783f34a 100644 --- a/src/components/pages/ambassadors/TiersSlider.tsx +++ b/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.` } ] diff --git a/src/pages/ambassadors.tsx b/src/pages/ambassadors.tsx index 6aaf8eb7..10ec1204 100644 --- a/src/pages/ambassadors.tsx +++ b/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,16 +18,15 @@ 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 }[] @@ -35,17 +34,18 @@ interface HackathonPageProps extends PageProps { } } -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 ( @@ -55,13 +55,13 @@ const IndexPage = (props: HackathonPageProps) => { - + {"Program's terms and conditions"} - -