Merge pull request #19 from CBIIT/CRDCDH-93

CRDCDH-93 Questionnaire header/banner

src/App.tsx

@@ -15,6 +15,15 @@ const theme = createTheme({
   typography: {
     fontFamily: "'Nunito', sans-serif",
   },
+  breakpoints: {
+    values: {
+      xs: 0,
+      sm: 600,
+      md: 900,
+      lg: 1200,
+      xl: 1440,
+    }
+  },
   palette: {
     Rejected: {
       main: "#E25C22",

src/components/Questionnaire/TextInput.tsx

@@ -129,9 +129,6 @@ const styles = (theme) => ({
     minHeight: "20px",
     color: "#083A50",
     marginBottom: "4px",
-    [theme.breakpoints.up("lg")]: {
-      whiteSpace: "nowrap",
-    },
   },
   asterisk: {
     color: "#D54309",

src/content/questionnaire/FormView.tsx

@@ -4,18 +4,64 @@ import {
   unstable_useBlocker as useBlocker, unstable_Blocker as Blocker
 } from 'react-router-dom';
 import { isEqual } from 'lodash';
-import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Divider, Stack } from '@mui/material';
+import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Divider, Stack, styled } from '@mui/material';
 import { LoadingButton } from '@mui/lab';
 import { WithStyles, withStyles } from "@mui/styles";
 import ForwardArrowIcon from '@mui/icons-material/ArrowForwardIos';
 import BackwardArrowIcon from '@mui/icons-material/ArrowBackIos';
-import styled from '@emotion/styled';
 import { Status as FormStatus, useFormContext } from '../../components/Contexts/FormContext';
 import SuspenseLoader from '../../components/SuspenseLoader';
 import StatusBar from '../../components/StatusBar/StatusBar';
 import ProgressBar from '../../components/ProgressBar/ProgressBar';
 import Section from './sections';
 import map from '../../config/SectionConfig';
+import bannerBackgroundImage from "../../assets/banner/banner_background.png";
+
+const StyledBanner = styled('div')(() => ({
+  position: "relative",
+  background: `url(${bannerBackgroundImage})`,
+  backgroundBlendMode: "LUMINOSITY, NORMAL",
+  backgroundSize: 'cover',
+  backgroundPosition: 'center',
+  width: '100%',
+  height: "296px",
+}));
+
+const StyledBannerText = styled('div')(() => ({
+  position: "absolute",
+  top: "57px",
+  left: "65px"
+}));
+
+const StyledBannerTitle = styled('h2')(() => ({
+  maxWidth: "611px",
+  height: "79px",
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  flexShrink: 0,
+  color: "#3E577C",
+  fontSize: "45px",
+  fontFamily: "'Nunito Sans', 'Rubik', sans-serif",
+  fontWeight: 800,
+  lineHeight: "40px",
+  letterSpacing: "-1.5px",
+  margin: 0,
+}));
+
+const StyledBannerSubtitle = styled('h6')(() => ({
+  display: "flex",
+  maxWidth: "565px",
+  height: "59px",
+  flexDirection: "column",
+  flexShrink: 0,
+  color: "#453E3E",
+  fontSize: "16px",
+  fontFamily: "'Inter', 'Rubik', sans-serif",
+  fontWeight: 400,
+  lineHeight: "22px",
+  margin: "0 0 0 5px"
+}));
 
 type Props = {
   section?: string;
@@ -175,9 +221,16 @@ const FormView: FC<Props> = ({ section, classes } : Props) => {
 
   return (
     <>
-      <div className={classes.header}>
-        <i>Questionnaire Header</i>
-      </div>
+      <StyledBanner>
+        <StyledBannerText>
+          <StyledBannerTitle>CRDC Intake Questionnaire</StyledBannerTitle>
+          <StyledBannerSubtitle>
+            The following set of high-level questions are intended to provide insight to
+            the CRDC Data Hub, related to data storage, access, secondary sharing
+            needs and other requirements of data submitters.
+          </StyledBannerSubtitle>
+        </StyledBannerText>
+      </StyledBanner>
 
       <Stack direction="row" justifyContent="center">
         <StyledSidebar

src/layouts/index.tsx

@@ -1,12 +1,18 @@
 import { FC, ReactNode } from 'react';
 import PropTypes from 'prop-types';
 import { Outlet } from 'react-router-dom';
-import { Container } from '@mui/material';
+import { Container, styled } from '@mui/material';
 import { Helmet } from 'react-helmet-async';
 import Footer from '../components/ResponsiveFooter';
 import Header from '../components/ResponsiveHeader';
 import ScrollButton from '../components/ScrollButton/ScrollButtonView';
 
+const StyledContainer = styled(Container)(() => ({
+  "&.MuiContainer-root": {
+    padding: 0,
+  }
+}));
+
 interface LayoutProps {
   children?: ReactNode;
 }
@@ -20,9 +26,9 @@ const Layout: FC<LayoutProps> = ({ children }) => (
       <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Public+Sans:wght@300;400;500;600;700&family=Rubik:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
     </Helmet>
     <Header />
-    <Container maxWidth="lg">
+    <StyledContainer maxWidth="xl">
       {children || <Outlet />}
-    </Container>
+    </StyledContainer>
     <Footer />
     <ScrollButton />
   </>