From fac7c0f8f24b3fe25de4ab81331a80c0fabc4fdc Mon Sep 17 00:00:00 2001
From: Zoe <19900057+vpsx@users.noreply.github.com>
Date: Thu, 30 Nov 2023 15:56:37 -0500
Subject: [PATCH 1/4] Add mouseovers to bottom arrows in Scope of CF diagram

---
 .../src/components/ScopeOfClinicalFocus.jsx   | 24 +++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/packages/client/src/components/ScopeOfClinicalFocus.jsx b/packages/client/src/components/ScopeOfClinicalFocus.jsx
index 5789c71..09116c7 100644
--- a/packages/client/src/components/ScopeOfClinicalFocus.jsx
+++ b/packages/client/src/components/ScopeOfClinicalFocus.jsx
@@ -69,6 +69,9 @@ export function ScopeOfClinicalFocus() {
       <li>Coping Skills Training</li>
     </ul>
   );
+  const culturallyResponsiveText = <p>Placeholder text for culturally responsive treatments</p>;
+  const culturallyAdaptedText = <p>Placeholder text for culturally adapted treatments</p>;
+  const culturallySpecificText = <p>Placeholder text for culturally specific and emergent supports</p>;
 
   return (
     <Box>
@@ -165,6 +168,27 @@ export function ScopeOfClinicalFocus() {
           <text textAnchor="middle" x="720" y="410" fontSize="18">
             Emergent Supports
           </text>
+
+          {/* For the mouseover/mouseout on the bottom arrows, use transparent overlays,
+              bc otherwise moving cursor over the text triggers a mouseOut*/}
+          <path
+            d="M  30 340 h 255 l 50 50 l -50 50 h -255 l 50 -50 l -50 -50 z"
+            fill="transparent"
+            onMouseOver={handleMouseOver(culturallyResponsiveText)}
+            onMouseOut={handleMouseOut}
+          />
+          <path
+            d="M 300 340 h 255 l 50 50 l -50 50 h -255 l 50 -50 l -50 -50 z"
+            fill="transparent"
+            onMouseOver={handleMouseOver(culturallyAdaptedText)}
+            onMouseOut={handleMouseOut}
+          />
+          <path
+            d="M 570 340 h 255 l 50 50 l -50 50 h -255 l 50 -50 l -50 -50 z"
+            fill="transparent"
+            onMouseOver={handleMouseOver(culturallySpecificText)}
+            onMouseOut={handleMouseOut}
+          />
         </svg>
         <Popper id="venn-popper" open={Boolean(anchorEl)} anchorEl={anchorEl}>
           <Paper>{popperText}</Paper>

From a681083b278821d128b531bdb29df510ca303b71 Mon Sep 17 00:00:00 2001
From: Zoe <19900057+vpsx@users.noreply.github.com>
Date: Thu, 30 Nov 2023 16:14:44 -0500
Subject: [PATCH 2/4] Change Scope of Focus diagram colors

---
 .../src/components/ScopeOfClinicalFocus.jsx   | 41 ++++++++++++++++---
 1 file changed, 36 insertions(+), 5 deletions(-)

diff --git a/packages/client/src/components/ScopeOfClinicalFocus.jsx b/packages/client/src/components/ScopeOfClinicalFocus.jsx
index 09116c7..0b02e69 100644
--- a/packages/client/src/components/ScopeOfClinicalFocus.jsx
+++ b/packages/client/src/components/ScopeOfClinicalFocus.jsx
@@ -1,6 +1,9 @@
 import { useEffect, useRef, useState } from 'react';
 import { Box, Paper, Popper } from '@mui/material';
 
+import { theme } from '../theme.jsx';
+import { alpha } from '@mui/material/styles';
+
 export function ScopeOfClinicalFocus() {
   // The interactive venn diagram as currently designed/requested
   // does not make it very obvious that one can hover over the diagram text
@@ -77,8 +80,24 @@ export function ScopeOfClinicalFocus() {
     <Box>
       <Box sx={{ display: 'flex', justifyContent: 'center' }}>
         <svg width="900" height="450" xmlns="http://www.w3.org/2000/svg">
-          <ellipse cx="300" cy="161" rx="270" ry="160" fill="#78cee944" stroke="#00556f" strokeWidth="1" />
-          <ellipse cx="600" cy="161" rx="270" ry="160" fill="#78cee944" stroke="#00556f" strokeWidth="1" />
+          <ellipse
+            cx="300"
+            cy="161"
+            rx="270"
+            ry="160"
+            fill={alpha(theme.palette.blue.main, 0.5)}
+            stroke={theme.palette.blue.main}
+            strokeWidth="1"
+          />
+          <ellipse
+            cx="600"
+            cy="161"
+            rx="270"
+            ry="160"
+            fill={alpha(theme.palette.purple.main, 0.5)}
+            stroke={theme.palette.purple.main}
+            strokeWidth="1"
+          />
 
           <text textAnchor="middle" x="220" y="80" fontSize="18" fontWeight="bold">
             Posttraumatic Stress Disorder
@@ -144,9 +163,21 @@ export function ScopeOfClinicalFocus() {
             Techniques
           </text>
 
-          <path d="M  30 340 h 255 l 50 50 l -50 50 h -255 l 50 -50 l -50 -50 z" fill="#78cee9ff" />
-          <path d="M 300 340 h 255 l 50 50 l -50 50 h -255 l 50 -50 l -50 -50 z" fill="#78cee9ff" />
-          <path d="M 570 340 h 255 l 50 50 l -50 50 h -255 l 50 -50 l -50 -50 z" fill="#78cee9ff" />
+          <path
+            d="M  30 340 h 255 l 50 50 l -50 50 h -255 l 50 -50 l -50 -50 z"
+            fill={alpha(theme.palette.yellow.main, 0.5)}
+            stroke={theme.palette.yellow.main}
+          />
+          <path
+            d="M 300 340 h 255 l 50 50 l -50 50 h -255 l 50 -50 l -50 -50 z"
+            fill={alpha(theme.palette.yellow.main, 0.5)}
+            stroke={theme.palette.yellow.main}
+          />
+          <path
+            d="M 570 340 h 255 l 50 50 l -50 50 h -255 l 50 -50 l -50 -50 z"
+            fill={alpha(theme.palette.yellow.main, 0.5)}
+            stroke={theme.palette.yellow.main}
+          />
 
           <text textAnchor="middle" x="180" y="380" fontSize="18">
             Culturally Responsive

From 30b076d150e1450cc8c00300d0182239b8081017 Mon Sep 17 00:00:00 2001
From: Zoe <19900057+vpsx@users.noreply.github.com>
Date: Thu, 30 Nov 2023 16:32:15 -0500
Subject: [PATCH 3/4] Add SectionedHeader for Scope of Focus diagram

---
 packages/client/src/pages/TreatmentsServices.jsx | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/pages/TreatmentsServices.jsx b/packages/client/src/pages/TreatmentsServices.jsx
index d7f5f97..c0f2c7c 100644
--- a/packages/client/src/pages/TreatmentsServices.jsx
+++ b/packages/client/src/pages/TreatmentsServices.jsx
@@ -574,6 +574,20 @@ function TreatmentsAndServices() {
   );
 }
 
+function ScopeOfClinicalFocusPanel() {
+  return (
+    <>
+      <SectionedHeader
+        title="Scope of Clinical Focus"
+        text="We use a combination of the following strategies to support our patients in the continuum of trauma and discrimination related concerns."
+      />
+      <Box sx={{ margin: '3rem 0' }}>
+        <ScopeOfClinicalFocus />
+      </Box>
+    </>
+  );
+}
+
 function HowToBecomeARestorePatient() {
   const { loading, error, data } = useQuery(GET_HOWTOBECOME);
   if (loading) return <p>Loading...</p>;
@@ -673,7 +687,7 @@ export default function Services() {
           <MeasurementBasedCare />
           <TreatmentsAndServices />
           <br />
-          <ScopeOfClinicalFocus />
+          <ScopeOfClinicalFocusPanel />
           <br />
           <HowToBecomeARestorePatient />
         </>

From d4fea02501bb145aa6b96493dbf218c8633efa05 Mon Sep 17 00:00:00 2001
From: Zoe <19900057+vpsx@users.noreply.github.com>
Date: Thu, 30 Nov 2023 16:33:55 -0500
Subject: [PATCH 4/4] Resize How to Become header to match Scope of Focus

---
 packages/client/src/pages/TreatmentsServices.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/pages/TreatmentsServices.jsx b/packages/client/src/pages/TreatmentsServices.jsx
index c0f2c7c..a8f821d 100644
--- a/packages/client/src/pages/TreatmentsServices.jsx
+++ b/packages/client/src/pages/TreatmentsServices.jsx
@@ -595,7 +595,7 @@ function HowToBecomeARestorePatient() {
 
   return (
     <>
-      <Typography variant="h4">How to Become a RESTORE Patient</Typography>
+      <Typography variant="h3">How to Become a RESTORE Patient</Typography>
       <Paper sx={{ margin: '1rem 0', padding: '1rem', border: 'solid', borderRadius: '0.5em' }}>
         <ReactMarkdown>{data.howToBecomeARestorePatient.data.attributes.Body}</ReactMarkdown>
       </Paper>