430 - Phase Out Open Call for Contributions (#431)

* (edit) unrender the contribution banner from UI (so that we can toggle back the banner as required in the future)

* create the ContributePageCard and render in the contribute page

* (edit) remove the download guideline as PDF button and delete the PFD file in /src/public

* (edit) update the URL for contribute_hsform and delete the contribute_pdf (for previously deleted PDF file) property

* (edit) rename ContributePageCard to WarningCard and define props and add the dropshadow

* (edit) add the WarningCard to the contirbute page instead of Layout

client/src/components/Layout.js

@@ -54,7 +54,7 @@ export const Layout = ({ children }) => {
   const showWide = widePaths.includes(router.pathname)
 
   // exclude the padding / and box shadow on the following pages
-  const excludPadPaths = ['/', '/about']
+  const excludPadPaths = ['/', '/about', '/contribute']
   const showMargin = !excludPadPaths.includes(router.pathname)
 
   // add the top margin to the following pages when the contribution banner is hidden
@@ -64,15 +64,9 @@ export const Layout = ({ children }) => {
     showMargin &&
     !banner['contribute-banner']
 
-  // exclude the contribue banner on the following pages
-  const excludeContributeBanner = [
-    '/contribute',
-    '/privacy-policy',
-    '/terms-of-use'
-  ]
-  const showContributeBanner = !excludeContributeBanner.includes(
-    router.pathname
-  )
+  // include the contribue banner on the following pages
+  const includeContributeBanner = []
+  const showContributeBanner = includeContributeBanner.includes(router.pathname)
 
   return (
     <Box height={{ min: '100vh' }}>

client/src/components/WarningCard.js

@@ -0,0 +1,31 @@
+import React from 'react'
+import { Box, Text } from 'grommet'
+import { CardBandLarge } from 'components/Band'
+import { WarningText } from 'components/WarningText'
+
+export const WarningCard = ({ label, children }) => {
+  return (
+    <CardBandLarge
+      align="center"
+      elevation="small"
+      pad={{ top: 'large' }}
+      width="100%"
+    >
+      <Box margin={{ bottom: 'medium' }}>
+        <WarningText
+          iconColor="error"
+          iconMargin="none"
+          iconSize="24px"
+          text={
+            <Text color="error" size="24px" weight="bold">
+              {label}
+            </Text>
+          }
+        />
+      </Box>
+      {children}
+    </CardBandLarge>
+  )
+}
+
+export default WarningCard

client/src/components/WarningText.js

@@ -7,6 +7,7 @@ export const WarningText = ({
   lineBreak = true,
   link = '',
   linkLable = '',
+  iconColor = 'status-warning',
   iconMargin = { right: 'medium' },
   iconPad = { right: 'small' },
   iconSize = '16px',
@@ -20,7 +21,7 @@ export const WarningText = ({
       margin={{ top: 'small', bottom: 'medium' }}
     >
       <Box margin={iconMargin} pad={iconPad}>
-        <Icon color="status-warning" size={iconSize} name="Warning" />
+        <Icon color={iconColor} size={iconSize} name="Warning" />
       </Box>
       <Paragraph>
         {text} {lineBreak && <br />}

client/src/config/index.js

@@ -19,8 +19,7 @@ export const config = {
     donate: 'https://www.ccdatalab.org/donate-link',
     grants_program: 'https://www.alexslemonade.org/researchers-reviewers',
     help: 'https://scpca.readthedocs.io/en/latest/',
-    contribute_pdf: 'scpca-contribution-guidelines.pdf',
-    contribute_hsform: 'https://share.hsforms.com/1V1loS-_hTMi3-_Lz107AcA336z0',
+    contribute_hsform: 'https://share.hsforms.com/1Fs_Z94OzS7abnh5qEieOTA336z0',
     recruitment_hsform:
       'https://share.hsforms.com/19if2XeF2Rl2YkWxppHW-HQ336z0',
     alsfTwitter: 'https://twitter.com/alexslemonade',

client/src/pages/contribute.js

@@ -2,6 +2,7 @@ import React from 'react'
 import {
   Box,
   Heading,
+  Paragraph,
   Table,
   TableCell,
   TableHeader as GrommetTableHeader,
@@ -11,6 +12,7 @@ import {
 import { Button } from 'components/Button'
 import { MarkdownPage } from 'components/MarkdownPage'
 import { Link } from 'components/Link'
+import { WarningCard } from 'components/WarningCard'
 import { config } from 'config'
 import contributionGuidelines from 'config/contribution-guidelines.md'
 import styled from 'styled-components'
@@ -134,19 +136,41 @@ export const Contribute = () => {
 
   return (
     <>
+      <WarningCard label="We are NOT currently accepting contributions">
+        <Box
+          align="center"
+          direction="row"
+          gap="large"
+          justify="between"
+          pad={{ horizontal: 'small', bottom: 'xlarge' }}
+        >
+          <Box width={{ max: '750px' }}>
+            <Heading level={5} margin={{ bottom: 'small' }} size="16px">
+              Interested in contributing? Sign up to be notified.
+            </Heading>
+            <Paragraph>
+              If you have an existing single-cell dataset you are interested in
+              making available via the portal, please sign up to be notified
+              about future opportunities. In the future, there will be a process
+              for determining if your data meets the necessary requirements to
+              be shared on the portal.
+            </Paragraph>
+          </Box>
+          <Button
+            href={config.links.contribute_hsform}
+            label="Sign Up For Notifications"
+            target="_blank"
+            primary
+          />
+        </Box>
+      </WarningCard>
       <Box alignSelf="end" margin={{ top: 'large' }}>
-        <Button
-          href={config.links.contribute_pdf}
-          label="Download Guidelines as PDF"
-          target="_blank"
-          primary
+        <MarkdownPage
+          components={components}
+          markdown={contributionGuidelines}
+          width="xlarge"
         />
       </Box>
-      <MarkdownPage
-        components={components}
-        markdown={contributionGuidelines}
-        width="xlarge"
-      />
     </>
   )
 }

client/src/theme/button.js

@@ -52,6 +52,7 @@ export default {
     disabled: undefined
   },
   extend: () => `
+    white-space: nowrap;
     &:active:not([disabled]) {
       box-shadow: 0 3px 4px 0 rgba(0,0,0,0.5);
     }