CRDCDH-988 Enforce consistent link styling

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<Props> = ({ title, description, children, endButton, beginButton, required, error }) => (
+const SectionGroup: FC<Props> = ({
+  children,
+  title, description, endButton, beginButton, required, error,
+}) => (
   <StyledGrid container rowSpacing={0} columnSpacing={1.5}>
     <StyledHeader xs={12} item>
       <Stack direction="column" alignItems="flex-start">
@@ -88,7 +99,6 @@ const SectionGroup: FC<Props> = ({ title, description, children, endButton, begi
             {title}
             {required ? <StyledAsterisk className="asterisk">*</StyledAsterisk> : ""}
             {error ? <StyledError className="asterisk">{error}</StyledError> : ""}
-
           </StyledTitle>
         )}
         <Stack direction="row" alignItems="flex-start" justifyContent="space-between" width="100%">
@@ -99,7 +109,6 @@ const SectionGroup: FC<Props> = ({ title, description, children, endButton, begi
           )}
           {beginButton && <StyledBeginAdornment>{beginButton}</StyledBeginAdornment>}
         </Stack>
-
       </Stack>
     </StyledHeader>
     {children}

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
             {" "}
-            <StyledLink
+            <Link
               to="https://sharing.nih.gov/genomic-data-sharing-policy/institutional-certifications"
               target="_blank"
             >
               https://sharing.nih.gov/
               <wbr />
               genomic-data-sharing-policy/institutional-certifications
-            </StyledLink>
+            </Link>
           </>
         ),
       },