Merge branch 'master'

packages/app-root/src/app/groups/[groupId]/contributors/GroupContributorsContainer.js

@@ -0,0 +1,30 @@
+'use client'
+
+import { Contributors } from '@zooniverse/user'
+import { useContext } from 'react'
+
+import { PanoptesAuthContext } from '../../../../contexts'
+
+function ContributorsContainer({
+  groupId,
+  joinToken
+}) {
+  const { adminMode, isLoading, user } = useContext(PanoptesAuthContext)
+
+  if (typeof window === 'undefined' || isLoading) {
+    return (
+      <p>Loading...</p>
+    )
+  }
+
+  return (
+    <Contributors
+      adminMode={adminMode}
+      authUser={user}
+      groupId={groupId}
+      joinToken={joinToken}
+    />
+  )
+}
+
+export default ContributorsContainer

packages/app-root/src/app/groups/[groupId]/contributors/page.js

@@ -0,0 +1,15 @@
+import GroupContributorsContainer from './GroupContributorsContainer'
+
+export const metadata = {
+  title: 'Group Contributors',
+  description: 'Zooniverse group contributors page'
+}
+
+export default function GroupContributors({ params, searchParams }) {
+  return (
+    <GroupContributorsContainer
+      groupId={params.groupId}
+      joinToken={searchParams.join_token}
+    />
+  )
+}

packages/app-root/src/components/HomePageContainer.js

@@ -4,6 +4,7 @@ import { useContext } from 'react'
 import { Box } from 'grommet'
 import { PanoptesAuthContext } from '../contexts'
 import { CommunityContainer, DefaultHome } from '@zooniverse/content'
+import { UserHome } from '@zooniverse/user'
 import { Loader } from '@zooniverse/react-components'
 import { UserHome } from '@zooniverse/user'
 

packages/lib-content/src/components/PageLayout/ContainerBox.js

@@ -6,7 +6,8 @@ const ContainerBox = styled(Box)`
   position: relative;
 
   @media (width > 90rem) {
-    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3); // Grommet elevation = 'medium'
+    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); // Grommet elevation = 'medium'
+    clip-path: inset(0px -30px 0 -30px); // don't put elevation top and bottom
 
     &::before {
       content: '';

packages/lib-content/src/screens/Home/Community/Community.js

@@ -1,76 +1,124 @@
-import { Anchor, Box, Heading } from 'grommet'
+import { Anchor, Box, Heading, ResponsiveContext } from 'grommet'
 import { useTranslation } from '../../../translations/i18n.js'
 import { SpacedHeading } from '@zooniverse/react-components'
+import styled from 'styled-components'
+import { useContext } from 'react'
 
 import Article from '../../../components/Article/Article.js'
 import SubHeading from '../../../components/HeadingForAboutNav/SubHeading.js'
 
+const ElevatedBox = styled(Box)`
+  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); // Grommet elevation = 'medium'
+  clip-path: inset(1px -30px 0px -30px); // don't put elevation top and bottom
+
+  // hides seam between DefaultHome and this component
+  position: relative;
+  z-index: 99;
+  margin-top: -3px;
+
+  // Same horizatonal padding style as DefaultHome
+  padding: 30px 80px 80px;
+
+  // max-width of the elevated Box
+  @media (48rem < width <= 90rem) {
+    padding: 30px 60px 60px;
+  }
+
+  // Grommet theme 'small'
+  @media (width <= 48rem) {
+    padding: 30px 30px 30px;
+  }
+`
+
 export default function Community({ dailyZooPosts = [], zooBlogPosts = [] }) {
   const { t } = useTranslation()
+  const size = useContext(ResponsiveContext)
 
   return (
     <Box
-      round='xsmall'
-      pad={{ vertical: 'small', horizontal: 'medium' }}
-      border={{ color: { light: 'light-1', dark: 'dark-1' } }}
+      background={{
+        dark: 'dark-1',
+        light: 'light-1'
+      }}
+      align='center'
     >
-      <SpacedHeading
-        color={{ light: 'neutral-1', dark: 'accent-1' }}
-        level={2}
-        size='1.5rem'
-        alignSelf='center'
-      >
-        {t('Home.Community.heading')}
-      </SpacedHeading>
-      <SubHeading>{t('Home.Community.subheading')}</SubHeading>
-
-      {/* The Daily Zooniverse */}
-      <Box
-        border={{
-          side: 'bottom',
-          color: { light: 'light-4', dark: 'black' },
-          size: 'xsmall'
-        }}
-        direction='row'
-        justify='between'
+      <ElevatedBox
         align='center'
-        margin={{ vertical: 'small' }}
+        background={{ dark: 'dark-3', light: 'neutral-6' }}
+        width='min(100%, 90rem)'
       >
-        <Heading level={3} size='1rem'>
-          {t('Home.Community.feedOne')}
-        </Heading>
-        <Anchor href='https://daily.zooniverse.org' size='1rem'>
-          {t('Home.Community.seeAll')}
-        </Anchor>
-      </Box>
-      <Box gap='small' margin={{ bottom: 'medium' }}>
-        {dailyZooPosts.length
-          ? dailyZooPosts.map(item => <Article key={item.id} {...item} />)
-          : null}
-      </Box>
+        <Box
+          round='small'
+          pad={size === 'small' ? '0' : 'large'}
+          border={
+            size === 'small'
+              ? false
+              : {
+                  color: { light: 'light-5', dark: 'black' },
+                  size: 'xsmall'
+                }
+          }
+        >
+          <SpacedHeading
+            color={{ light: 'neutral-1', dark: 'accent-1' }}
+            level={2}
+            size='1.5rem'
+            alignSelf='center'
+            textAlign='center'
+          >
+            {t('Home.Community.heading')}
+          </SpacedHeading>
+          <SubHeading>{t('Home.Community.subheading')}</SubHeading>
 
-      {/* The Zooniverse Blog */}
-      <Box
-        direction='row'
-        justify='between'
-        align='center'
-        border={{
-          position: 'bottom',
-          color: { light: 'light-1', dark: 'dark-1' }
-        }}
-      >
-        <Heading level={3} size='1rem'>
-          {t('Home.Community.feedTwo')}
-        </Heading>
-        <Anchor href='https://blog.zooniverse.org' size='1rem'>
-          {t('Home.Community.seeAll')}
-        </Anchor>
-      </Box>
-      <Box gap='small'>
-        {zooBlogPosts.length
-          ? zooBlogPosts.map(item => <Article key={item.id} {...item} />)
-          : null}
-      </Box>
+          {/* The Daily Zooniverse */}
+          <Box
+            border={{
+              side: 'bottom',
+              color: { light: 'light-4', dark: 'black' },
+              size: 'xsmall'
+            }}
+            direction='row'
+            justify='between'
+            align='center'
+            margin={{ vertical: 'small' }}
+          >
+            <Heading level={3} size='1rem'>
+              {t('Home.Community.feedOne')}
+            </Heading>
+            <Anchor href='https://daily.zooniverse.org' size='1rem'>
+              {t('Home.Community.seeAll')}
+            </Anchor>
+          </Box>
+          <Box gap='small' margin={{ bottom: 'medium' }}>
+            {dailyZooPosts.length
+              ? dailyZooPosts.map(item => <Article key={item.id} {...item} />)
+              : null}
+          </Box>
+
+          {/* The Zooniverse Blog */}
+          <Box
+            direction='row'
+            justify='between'
+            align='center'
+            border={{
+              position: 'bottom',
+              color: { light: 'light-1', dark: 'dark-1' }
+            }}
+          >
+            <Heading level={3} size='1rem'>
+              {t('Home.Community.feedTwo')}
+            </Heading>
+            <Anchor href='https://blog.zooniverse.org' size='1rem'>
+              {t('Home.Community.seeAll')}
+            </Anchor>
+          </Box>
+          <Box gap='small'>
+            {zooBlogPosts.length
+              ? zooBlogPosts.map(item => <Article key={item.id} {...item} />)
+              : null}
+          </Box>
+        </Box>
+      </ElevatedBox>
     </Box>
   )
 }

packages/lib-content/src/screens/Home/DefaultHome/DefaultHome.js

@@ -1,13 +1,36 @@
 'use client'
 
 import { Box } from 'grommet'
+import { SpacedHeading } from '@zooniverse/react-components'
+import { useTranslation } from '../../../translations/i18n.js'
+import styled from 'styled-components'
 
 import ContainerBox from '../../../components/PageLayout/ContainerBox.js'
 import MaxWidthContent from '../../../components/MaxWidthContent/MaxWidthContent.js'
 import Introduction from './components/Introduction.js'
 import Hero from './components/Hero.js'
+import FeaturedProjects from './components/FeaturedProjects.js'
+import Mobile from '../../../components/Mobile/Mobile.js'
+import Researchers from './components/Researchers.js'
+import SubHeading from '../../../components/HeadingForAboutNav/SubHeading.js'
+
+const StyledContainerBox = styled(ContainerBox)`
+  padding: 0 80px;
+
+  // max-width of the elevated Box
+  @media (48rem < width <= 90rem) {
+    padding: 0 60px;
+  }
+
+  // Grommet theme 'small'
+  @media (width <= 48rem) {
+    padding: 0 30px;
+  }
+`
 
 export default function DefaultHome() {
+  const { t } = useTranslation()
+
   return (
     <Box
       background={{
@@ -17,16 +40,28 @@ export default function DefaultHome() {
       align='center'
     >
       <Hero />
-      <ContainerBox
+      <StyledContainerBox
         align='center'
         background={{ dark: 'dark-3', light: 'neutral-6' }}
         width='min(100%, 90rem)'
-        pad={{ horizontal: 'medium' }}
       >
         <MaxWidthContent>
           <Introduction />
         </MaxWidthContent>
-      </ContainerBox>
+        <FeaturedProjects />
+        <Researchers />
+        <SpacedHeading
+          level={2}
+          size='1.5rem'
+          color={{ light: 'neutral-1', dark: 'accent-1' }}
+          textAlign='center'
+          fill
+        >
+          {t('Home.DefaultHome.headings.four')}
+        </SpacedHeading>
+        <SubHeading>{t('Home.DefaultHome.subheadings.four')}</SubHeading>
+        <Mobile />
+      </StyledContainerBox>
     </Box>
   )
 }