Merge pull request #1564 from kianamcc/PORTALS-3405

PORTALS-3405: Consistent styling and mobile responsiveness review
Sage-Bionetworks · Feb 13, 2025 · 4dc754a · 4dc754a
2 parents df26c7f + 9ed286d
commit 4dc754a
Show file tree

Hide file tree

Showing 18 changed files with 422 additions and 354 deletions.
diff --git a/apps/portals/elportal/src/pages/HomePageV2.tsx b/apps/portals/elportal/src/pages/HomePageV2.tsx
@@ -8,6 +8,7 @@ import {
   PortalHomePageHeader,
   GoalsV2,
   PortalFeaturedPartners,
+  PortalSectionHeader,
 } from 'synapse-react-client'
 import ELContributeYourData from '@sage-bionetworks/synapse-portal-framework/components/elportal/ELContributeYourData'
 import ELGettingStarted from '@sage-bionetworks/synapse-portal-framework/components/elportal/ELGettingStarted'
@@ -74,9 +75,12 @@ export default function HomePage() {
       <Box
         component={'span'}
         sx={theme => ({
+          [theme.breakpoints.down('md')]: {
+            display: 'block',
+            minHeight: '100px',
+          },
           [theme.breakpoints.down('sm')]: {
             minHeight: '150px',
-            display: 'block',
           },
         })}
       >
@@ -159,24 +163,25 @@ export default function HomePage() {
       >
         <ELGettingStarted />
         <GoalsV2 entityId={goalsV2Table} dataLink="/Explore/Data" />
-        <div className={'home-bg-dark'}>
-          <SectionLayout
-            title="Exploring the Data"
-            centerTitle
-            ContainerProps={{ className: 'home-spacer' }}
-          >
-            <UpsetPlot
-              sql={upsetPlotSql}
-              rgbIndex={0}
-              maxBarCount={20}
-              setName="Set size"
-              combinationName="Intersection size"
-              onClick={handleUpsetPlotClick}
-              // summaryLinkText='Explore All Data'
-              // summaryLink='/Explore/Data'
-            />
-          </SectionLayout>
-        </div>
+        <SectionLayout ContainerProps={{ className: 'home-spacer' }}>
+          <PortalSectionHeader
+            title="Explore the Data"
+            buttonText="View All Studies"
+            link="/Explore/Studies"
+            centered
+            sx={{ marginBottom: '90px' }}
+          />
+          <UpsetPlot
+            sql={upsetPlotSql}
+            rgbIndex={0}
+            maxBarCount={20}
+            setName="Set size"
+            combinationName="Intersection size"
+            onClick={handleUpsetPlotClick}
+            // summaryLinkText='Explore All Data'
+            // summaryLink='/Explore/Data'
+          />
+        </SectionLayout>
         <div className={'home-bg-dark'}>
           <SectionLayout ContainerProps={{ className: 'home-spacer' }}>
             <FeaturedDataTabs

diff --git a/apps/synapse-portal-framework/src/components/elportal/ELContributeYourData.tsx b/apps/synapse-portal-framework/src/components/elportal/ELContributeYourData.tsx
@@ -1,6 +1,7 @@
-import { Box, Link, Button, Typography } from '@mui/material'
+import { Box } from '@mui/material'
 import backgroundSpotsLeft from './assets/dot_blob_top_left.png'
 import backgroundSpotsRight from './assets/dot_blob_bottom_right.png'
+import { PortalSectionHeader } from 'synapse-react-client'
 
 function ELContributeYourData() {
   return (
@@ -30,51 +31,32 @@ function ELContributeYourData() {
         sx={{
           flex: '1 1 auto',
           zIndex: 1,
-          textAlign: 'center',
           padding: { xs: '100px 40px', md: '100px 0' },
         }}
       >
-        <Typography
-          variant="headline1"
-          style={{ color: 'white' }}
+        <PortalSectionHeader
+          centered
+          reverseButtonAndText
+          title="Contribute Your Data"
+          summaryText="If you are a funded portal contributor and ready to upload data to the
+        ELITE Portal, you can begin the data submission process by contacting
+        our data curation team through our service desk."
+          buttonText="Start Contributing"
+          link="https://sagebionetworks.jira.com/servicedesk/customer/portal/12"
           sx={{
-            pt: 4,
-            mb: 2,
-            mx: 'auto',
-            width: 'max-content',
-            borderTop: '6px solid #ffffff88',
+            h2: {
+              color: 'primary.contrastText',
+              fontSize: '24px',
+              borderColor: 'rgba(255, 255, 255, 0.40)',
+            },
+            '.MuiButton-root': { border: '1px solid white' },
+            '& p': {
+              fontSize: '16px',
+              paddingBottom: '10px',
+              color: 'primary.contrastText',
+            },
           }}
-        >
-          Contribute Your Data
-        </Typography>
-        <Typography
-          variant="body1"
-          sx={{ color: 'white', fontStyle: 'italic', mb: 3 }}
-        >
-          If you are a funded portal contributor and ready to upload data to the
-          ELITE Portal, you can begin the data submission process by contacting
-          our data curation team through our service desk.
-        </Typography>
-        <Link
-          href="https://sagebionetworks.jira.com/servicedesk/customer/portal/12"
-          target="_blank"
-          rel="noopener noreferrer"
-          fontFamily="Lato"
-          fontSize="18"
-          fontStyle="semi-bold"
-        >
-          <Button
-            variant="contained"
-            sx={theme => ({
-              border: '1px solid white',
-              [theme.breakpoints.down('sm')]: {
-                width: '100%',
-              },
-            })}
-          >
-            Start Contributing
-          </Button>
-        </Link>
+        />
       </Box>
       <Box
         sx={{

diff --git a/apps/synapse-portal-framework/src/components/elportal/ELGettingStarted.tsx b/apps/synapse-portal-framework/src/components/elportal/ELGettingStarted.tsx
@@ -1,7 +1,8 @@
-import { Box, Button, Typography } from '@mui/material'
+import { Box, Typography } from '@mui/material'
 import exploreIcon from './assets/explore_icon.png'
 import uncoverIcon from './assets/uncover_icon.png'
 import accessIcon from './assets/access_icon.png'
+import { PortalSectionHeader } from 'synapse-react-client'
 
 export function IconSquare({ iconUrl, headline, description }) {
   return (
@@ -23,7 +24,6 @@ export function IconSquare({ iconUrl, headline, description }) {
         sx={{
           mb: '10px',
           maxWidth: '100%',
-          color: 'white',
           fontWeight: 400,
         }}
       >
@@ -33,7 +33,6 @@ export function IconSquare({ iconUrl, headline, description }) {
         variant="body1"
         sx={{
           maxWidth: '100%',
-          color: 'white',
           fontSize: '13px',
         }}
       >
@@ -48,59 +47,31 @@ const ELGettingStarted = () => {
     <Box
       sx={{
         backgroundColor: 'primary.main',
+        color: 'primary.contrastText',
         display: 'grid',
         padding: { xs: '40px', md: '80px' },
         gridTemplateColumns: { xs: '1fr', md: '1fr 3fr' },
         gap: { xs: '50px', md: '80px' },
       }}
     >
-      <Box
+      <PortalSectionHeader
+        reverseButtonAndText
+        title="Getting Started"
+        summaryText="We provide all the help you need for navigating the portal and
+        accelerating your research."
+        buttonText="Visit Our Help Section"
+        link="https://help.eliteportal.org/help/"
         sx={{
-          borderTop: '3px solid #ffffff88',
-          py: '20px',
-        }}
-      >
-        <Typography
-          variant="headline2"
-          sx={{
-            width: '100%',
-            color: 'white',
+          h2: {
             fontSize: '24px',
-          }}
-        >
-          Getting Started
-        </Typography>
-        <Typography
-          variant="body1"
-          sx={{
-            maxWidth: '100%',
-            my: '16px',
-            color: 'white',
-            fontStyle: 'italic',
-            fontSize: '13px',
-            lineHeight: '20px',
-          }}
-        >
-          We provide all the help you need for navigating the portal and
-          accelerating your research.
-        </Typography>
-        <Button
-          variant="contained"
-          href="https://help.eliteportal.org/help/"
-          rel="noopener noreferrer"
-          target="_blank"
-          sx={theme => ({
-            border: '1px solid white',
-            padding: '6px 24px',
-            fontSize: '14px',
-            [theme.breakpoints.down('sm')]: {
-              width: '100%',
-            },
-          })}
-        >
-          Visit Our Help Section
-        </Button>
-      </Box>
+            width: '100%',
+            borderColor: 'rgba(255, 255, 255, 0.40)',
+            color: 'primary.contrastText',
+          },
+          '& p': { fontSize: '16px', color: 'primary.contrastText' },
+          '.MuiButton-root': { border: '1px solid white' },
+        }}
+      />
       <Box
         sx={{
           display: 'grid',

diff --git a/apps/synapse-portal-framework/src/components/elportal/ELSupportedByNIH.tsx b/apps/synapse-portal-framework/src/components/elportal/ELSupportedByNIH.tsx
@@ -1,60 +1,35 @@
-import { Box, Button, Typography } from '@mui/material'
+import { Box, alpha, Typography, useTheme } from '@mui/material'
 import React from 'react'
 import NIHLogo from './assets/nia_logo.png'
+import { PortalSectionHeader } from 'synapse-react-client'
 
 const ELSupportedByNIH: React.FC = () => {
+  const theme = useTheme()
+
   return (
     <Box
       sx={{
         display: 'grid',
-        gridTemplateColumns: {
-          xs: '100%',
-          sm: '50% 50%',
-          md: '25% 75%',
-        },
-        position: 'relative',
-        p: '80px',
+        gridTemplateColumns: { xs: '1fr', md: '1fr 3fr' },
+        gap: { xs: '38px', md: '80px' },
+        padding: { xs: '40px', lg: '80px' },
       }}
     >
-      <Box
+      <PortalSectionHeader
+        title="Supported by the National Institute on Aging"
+        buttonText="Visit the NIA Website"
+        link="https://www.nia.nih.gov/research/dgcg"
         sx={{
-          width: '100%',
-          height: '100%',
-          borderTop: '3px solid #B5D3CE',
-          py: '30px',
+          h2: {
+            borderColor: alpha(theme.palette.primary.main, 0.2),
+            width: '100%',
+          },
         }}
-      >
-        <Typography
-          variant="headline2"
-          sx={{
-            fontSize: '28px',
-            mb: '20px',
-          }}
-        >
-          Supported by the NIA’s Division of Geriatrics and Clinical Gerontology
-          (DGCG)
-        </Typography>
-        <Button
-          variant="contained"
-          href="https://www.nia.nih.gov/research/dgcg"
-          rel="noopener noreferrer"
-          target="_blank"
-          sx={theme => ({
-            padding: '6px 24px',
-            fontWeight: '600',
-            [theme.breakpoints.down('sm')]: {
-              width: '100%',
-            },
-          })}
-        >
-          Visit the DCGC Website
-        </Button>
-      </Box>
+      />
       <Box
         sx={{
           width: '100%',
           height: '100%',
-          pl: { xs: 'none', md: '80px' },
         }}
       >
         <Box
@@ -65,19 +40,29 @@ const ELSupportedByNIH: React.FC = () => {
             backgroundRepeat: 'no-repeat',
             backgroundSize: 'contain',
           }}
-        ></Box>
+        />
         <Typography
           variant="body1"
           sx={{
             pt: '32px',
+            fontSize: '18px',
           }}
         >
           The National Institute on Aging (NIA) is a leading research
           organization dedicated understanding the nature of aging, and extend
           the healthy, active years of life. As part of the National Institutes
           of Health (NIH), NIA supports cutting-edge research on aging and
           age-related diseases, including Alzheimer's disease and other forms of
-          dementia. With a mission to improve the health and well-being of older
+          dementia.
+        </Typography>
+        <Typography
+          variant="body1"
+          sx={{
+            pt: '10px',
+            fontSize: '18px',
+          }}
+        >
+          With a mission to improve the health and well-being of older
           populations, NIA funds innovative scientific studies, promotes
           training for the next generation of researchers, and provides trusted
           health information to the public. By fostering collaboration across

diff --git a/packages/synapse-react-client/src/components/FeaturedDataTabs/FacetPlotsCard.tsx b/packages/synapse-react-client/src/components/FeaturedDataTabs/FacetPlotsCard.tsx
@@ -204,6 +204,9 @@ function FacetPlotsCard(props: FacetPlotsCardProps) {
               variant={'contained'}
               href={detailsPagePath}
               color={'secondary'}
+              sx={theme => ({
+                [theme.breakpoints.down('sm')]: { width: '100%' },
+              })}
             >
               Explore {selectedFacetValue}
             </Button>