Reveal links to user stats + groups blog post (#6304)

* add stats blog post to About / Get Involved pages * add blog link to MyGroups components * Refactor MyGroupsContainer positions for CreateButton and learn more link --------- Co-authored-by: Mark Bouslog <[email protected]>
zooniverse · Sep 17, 2024 · 6530693 · 6530693
1 parent da584de
commit 6530693
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 21 deletions.
diff --git a/packages/lib-content/src/screens/Educate/Educate.js b/packages/lib-content/src/screens/Educate/Educate.js
@@ -151,9 +151,8 @@ function Educate() {
                     t={t}
                     components={[
                       <Anchor
-                        key='group-stats-announcement'
-                        href='' // Need url after blog post,
-                        // Add the sentence "Read our annoucement for more details, and tag <0>annoucement</0>"
+                        key='group-stats-blog'
+                        href='https://blog.zooniverse.org/2024/09/17/launch-news-community-building-pages'
                       />
                     ]}
                   />
@@ -202,7 +201,7 @@ function Educate() {
                     // "See this <0>blog post</0> for details."
                     components={[
                       <Anchor
-                        key='group-stats-announcement'
+                        key='stats-in-classrooms-blog'
                         href='' // Need url after blog post
                       />
                     ]}

diff --git a/packages/lib-content/src/screens/FAQ/FAQ.js b/packages/lib-content/src/screens/FAQ/FAQ.js
@@ -87,17 +87,16 @@ function FAQPage() {
                   />
                 </Answer>
               </Box>
-              {/** Okay to enable with launch of new homepage */}
-              {/* <Box as='li'>
+              <Box as='li'>
                 <Question>{t('FAQ.item3.question')}</Question>
                 <Answer>
                   <Trans
                     i18nKey='FAQ.item3.answer'
                     t={t}
-                    components={[<Anchor key='stats-blog-post' href='' />]}
+                    components={[<Anchor key='stats-blog-post' href='https://blog.zooniverse.org/2024/09/17/launch-news-community-building-pages' />]}
                   />
                 </Answer>
-              </Box> */}
+              </Box>
               <Box as='li'>
                 <Question>{t('FAQ.item4.question')}</Question>
                 <Answer>

diff --git a/packages/lib-content/src/translations/en.json b/packages/lib-content/src/translations/en.json
@@ -193,7 +193,7 @@
         "three": "Volunteer certificate"
       },
       "paragraphs": {
-        "one": "Set classification milestones, track effort, and celebrate collective impact.",
+        "one": "Set classification milestones, track effort, and celebrate collective impact. Read our <0>announcement</0> for more details.",
         "two": "Each project team can share additional educator resources including lesson plans, video tutorials, research links, and more. Be sure to check a project’s <0>Education</0> tab.",
         "three": "Support for students fulfilling student service hours for scholarships, graduation requirements, and more."
       }

diff --git a/packages/lib-user/src/components/MyGroups/MyGroupsContainer.js b/packages/lib-user/src/components/MyGroups/MyGroupsContainer.js
@@ -1,6 +1,7 @@
 'use client'
 
-import { Box, Grid } from 'grommet'
+import { SpacedText } from '@zooniverse/react-components'
+import { Anchor, Box } from 'grommet'
 import { bool, shape, string } from 'prop-types'
 import { useState } from 'react'
 
@@ -90,14 +91,23 @@ function MyGroupsContainer({ authUser, login, previewLayout = false }) {
               groups={groupsSortedByCreatedAt}
               loading={userLoading || membershipsLoading}
             />
-            <Grid
-              columns={{
-                count: 3,
-                size: '1/3',
-              }}
-              fill='horizontal'
+            <Box
+              direction='row-responsive'
+              justify='between'
+              align='center'
             >
-              <CreateButton onClick={handleGroupModal} />
+              <Anchor
+                href='https://blog.zooniverse.org/2024/09/17/launch-news-community-building-pages'
+                color={{
+                  dark: 'light-4',
+                  light: 'dark-5'
+                }}
+                label={
+                  <SpacedText size='1rem' uppercase={false}>
+                    Learn more about groups
+                  </SpacedText>
+                }
+              />
               <Box
                 align='center'
               >
@@ -108,7 +118,10 @@ function MyGroupsContainer({ authUser, login, previewLayout = false }) {
                   step={membershipsWithGroups?.meta?.memberships?.page_size}
                 />
               </Box>
-            </Grid>
+              <Box align='end'>
+                <CreateButton onClick={handleGroupModal} />
+              </Box>
+            </Box>
           </ContentBox>
         </Layout>
       ) : (

diff --git a/packages/lib-user/src/components/MyGroups/components/PreviewLayout/PreviewLayout.js b/packages/lib-user/src/components/MyGroups/components/PreviewLayout/PreviewLayout.js
@@ -1,5 +1,5 @@
-import { Loader } from '@zooniverse/react-components'
-import { Box, Paragraph } from 'grommet'
+import { Loader, SpacedText } from '@zooniverse/react-components'
+import { Anchor, Box, Paragraph } from 'grommet'
 import { arrayOf, bool, func, shape, string } from 'prop-types'
 
 import { ContentBox } from '@components/shared'
@@ -52,7 +52,21 @@ export default function PreviewLayout({
           </Paragraph>
         </Box>
       )}
-      <CreateButton onClick={handleGroupModal} />
+      <Box direction='row' justify='between'>
+        <Anchor
+          href='https://blog.zooniverse.org/2024/09/17/launch-news-community-building-pages'
+          color={{
+            dark: 'light-4',
+            light: 'dark-5'
+          }}
+          label={
+            <SpacedText size='1rem' uppercase={false}>
+              Learn more about groups
+            </SpacedText>
+          }
+        />
+        <CreateButton onClick={handleGroupModal} />
+      </Box>
     </ContentBox>
   )
 }