diff --git a/src/components/Questionnaire/SectionGroup.tsx b/src/components/Questionnaire/SectionGroup.tsx index 78b0a6703..cba767d2d 100644 --- a/src/components/Questionnaire/SectionGroup.tsx +++ b/src/components/Questionnaire/SectionGroup.tsx @@ -4,16 +4,6 @@ import { Typography, styled } from "@mui/material"; -type Props = { - children: React.ReactNode; - title?: string; - description?: string | React.ReactNode; - endButton?: React.ReactNode; - beginButton?: React.ReactNode; - required?: boolean; - error?: string; -}; - const StyledGrid = styled(Grid)({ marginTop: "46px", "&:first-of-type": { @@ -42,13 +32,19 @@ export const StyledTitle = styled(Typography)({ export const StyledDescription = styled(Typography)({ fontWeight: 400, color: "#2A836D", - marginTop: "16px", + marginTop: "24px", fontSize: "16px", + "& a": { + color: "inherit", + fontWeight: "700", + textDecoration: "underline", + }, }); const StyledEndAdornment = styled(Box)({ marginLeft: "auto", }); + const StyledBeginAdornment = styled(Box)({ marginRight: "12px", marginTop: "auto", @@ -60,6 +56,7 @@ const StyledAsterisk = styled('span')({ color: "#C93F08", marginLeft: "2px", }); + const StyledError = styled('div')({ color: "#C93F08", textTransform: "none", @@ -73,13 +70,27 @@ const StyledError = styled('div')({ marginBottom: '0', minHeight: '20px', }); + +type Props = { + children: React.ReactNode; + title?: string; + description?: React.ReactNode; + endButton?: React.ReactNode; + beginButton?: React.ReactNode; + required?: boolean; + error?: string; +}; + /** * Generic Form Input Section Group * * @param {Props} props * @returns {React.ReactNode} */ -const SectionGroup: FC = ({ title, description, children, endButton, beginButton, required, error }) => ( +const SectionGroup: FC = ({ + children, + title, description, endButton, beginButton, required, error, +}) => ( @@ -88,7 +99,6 @@ const SectionGroup: FC = ({ title, description, children, endButton, begi {title} {required ? * : ""} {error ? {error} : ""} - )} @@ -99,7 +109,6 @@ const SectionGroup: FC = ({ title, description, children, endButton, begi )} {beginButton && {beginButton}} - {children} diff --git a/src/config/SectionMetadata.tsx b/src/config/SectionMetadata.tsx index 208030d4f..266f8af95 100644 --- a/src/config/SectionMetadata.tsx +++ b/src/config/SectionMetadata.tsx @@ -1,15 +1,8 @@ -import { Link } from "react-router-dom"; -import { styled } from "@mui/material"; - -const StyledLink = styled(Link)(() => ({ - textDecoration: "none", - color: "inherit" -})); +import { Link } from 'react-router-dom'; /** * Metadata for Questionnaire Sections * - * * @see SectionConfig */ const sectionMetadata = { @@ -75,14 +68,14 @@ const sectionMetadata = { <> Informed consent is the basis for institutions submitting data to determine the appropriateness of submitting human data to open or controlled-access NIH/NCI data repositories. This refers to how CRDC data repositories distribute scientific data to the public. The controlled-access studies are required to submit an Institutional Certification to NIH. Learn about this at {" "} - https://sharing.nih.gov/ genomic-data-sharing-policy/institutional-certifications - + ), },