Add explanationary widget to dashboard

src/containers/PatientDetails/Dashboard/ExplanatoryTextWidget.tsx

@@ -0,0 +1,36 @@
+import { Trans } from '@lingui/macro';
+
+import { Text } from '@beda.software/emr/components';
+
+import { S } from './styles';
+
+export function ExplanatoryTextWidget() {
+    return (
+        <S.Content>
+            <Text style={{ fontWeight: 500 }}>
+                <Trans>
+                    With over 40,000,000 mammograms run annually in the US, there are psychological consequences of
+                    breast cancer imaging that are well documented among patients such as stress and anxiety from
+                    largely false positive or indeterminant readings by radiologists.
+                </Trans>
+            </Text>
+            <br />
+            <br />
+            <Text style={{ fontWeight: 500 }}>
+                <Trans>The research purpose of this
+                    project is to determine how we may develop Artificial Intelligence (AI) models of breast imaging
+                    that facilitate new ways of detecting and treating disease and improve patient outcomes by
+                    assembling a de-identified breast cancer radiographic imaging repository.
+                </Trans>
+            </Text>
+            <br />
+            <br />
+            <Text style={{ fontWeight: 500 }}>
+                <Trans>This project also aims to
+                    document how patients may use a trusted social health or wellness network to better understand their
+                    imaging.
+                </Trans>
+            </Text>
+        </S.Content>
+    );
+}

src/containers/PatientDetails/Dashboard/RequiredFormsWidget/index.tsx

@@ -10,7 +10,7 @@ import { RenderRemoteData } from '@beda.software/fhir-react';
 import { RequiredFormsWidgetData, useRequiredFormsWidget } from './hooks';
 
 export function RequiredFormsWidget(props: { patient: Patient }) {
-    const title = t`Required forms`;
+    const title = t`Sign up for The Breast Cancer AI Study!`;
     const { patient } = props;
     const { response } = useRequiredFormsWidget(patient);
     const navigate = useNavigate();

src/containers/PatientDetails/Dashboard/config.ts

@@ -3,12 +3,16 @@ import type { Dashboard, DashboardInstance } from '@beda.software/emr/dist/compo
 import { GeneralIInformationWidget } from './GeneralIInformationWidget';
 import { MedicalImagesAuthorizationWidget } from './MedicalImagesAuthorizationWidget';
 import { RequiredFormsWidget } from './RequiredFormsWidget';
+import { ExplanatoryTextWidget } from './ExplanatoryTextWidget';
 
 export const patientDashboardConfig: DashboardInstance = {
     top: [
         {
             widget: GeneralIInformationWidget,
         },
+        {
+            widget: ExplanatoryTextWidget,
+        },
     ],
     left: [
         {

src/containers/PatientDetails/Dashboard/styles.ts

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+export const S = {
+    Content: styled.div`
+        border-radius: 10px;
+        background-color: ${({ theme }) => theme.neutralPalette.gray_2};
+        color: ${({ theme }) => theme.neutralPalette.gray_13};
+        border: 1px solid ${({ theme }) => theme.antdTheme?.colorBorderSecondary};
+        padding: 10px 16px;
+    `,
+};

src/locale/en/messages.po

@@ -113,8 +113,8 @@ msgid "Request a new link"
 msgstr ""
 
 #: src/containers/PatientDetails/Dashboard/RequiredFormsWidget/index.tsx:13
-msgid "Required forms"
-msgstr ""
+#~ msgid "Required forms"
+#~ msgstr ""
 
 #: src/containers/SetPassword/index.tsx:37
 msgid "Save"
@@ -146,6 +146,10 @@ msgstr ""
 msgid "Sign Up"
 msgstr ""
 
+#: src/containers/PatientDetails/Dashboard/RequiredFormsWidget/index.tsx:13
+msgid "Sign up for The Breast Cancer AI Study!"
+msgstr ""
+
 #: src/containers/ForgotPassword/index.tsx:82
 #: src/containers/SetPassword/index.tsx:61
 #: src/containers/SignUp/index.tsx:86
@@ -156,6 +160,14 @@ msgstr ""
 msgid "Submitted?"
 msgstr ""
 
+#: src/containers/PatientDetails/Dashboard/ExplanatoryTextWidget.tsx:20
+msgid "The research purpose of this project is to determine how we may develop Artificial Intelligence (AI) models of breast imaging that facilitate new ways of detecting and treating disease and improve patient outcomes by assembling a de-identified breast cancer radiographic imaging repository."
+msgstr ""
+
+#: src/containers/PatientDetails/Dashboard/ExplanatoryTextWidget.tsx:29
+msgid "This project also aims to document how patients may use a trusted social health or wellness network to better understand their imaging."
+msgstr ""
+
 #: src/containers/SignUp/index.tsx:49
 #~ msgid "We have sent you email. Please click on the link in the email to complete registration"
 #~ msgstr ""
@@ -168,6 +180,10 @@ msgstr ""
 msgid "We have sent you email. Please click on the link in the email to reset your password."
 msgstr ""
 
+#: src/containers/PatientDetails/Dashboard/ExplanatoryTextWidget.tsx:11
+msgid "With over 40,000,000 mammograms run annually in the US, there are psychological consequences of breast cancer imaging that are well documented among patients such as stress and anxiety from largely false positive or indeterminant readings by radiologists."
+msgstr ""
+
 #: src/containers/PatientDetails/Dashboard/RequiredFormsWidget/index.tsx:40
 msgid "Yes"
 msgstr ""