From f1749c95918d73e2acbedd7a36cad72815e987c6 Mon Sep 17 00:00:00 2001
From: Joyce Quach <jquach@mitre.org>
Date: Tue, 5 Sep 2023 14:59:28 -0400
Subject: [PATCH] Reduced ratio of panes on md+ screens, added spacing on CDS
 Hooks cards buttons, moved Grid component out of dropdown component

---
 .../Patient/MedReqDropDown/MedReqDropDown.tsx |  4 +--
 .../cdsHooksCards/cdsHooksCard.tsx            |  2 +-
 src/views/Patient/PatientView.tsx             | 25 ++++++++-----------
 3 files changed, 13 insertions(+), 18 deletions(-)

diff --git a/src/views/Patient/MedReqDropDown/MedReqDropDown.tsx b/src/views/Patient/MedReqDropDown/MedReqDropDown.tsx
index 6db7232..800c3a8 100644
--- a/src/views/Patient/MedReqDropDown/MedReqDropDown.tsx
+++ b/src/views/Patient/MedReqDropDown/MedReqDropDown.tsx
@@ -245,7 +245,7 @@ function MedReqDropDown(props: MedReqDropDownProps) {
 
   const label = 'Select Medication Request';
   return (
-    <Grid item xs={12} md={6}>
+    <>
       <Card sx={{ bgcolor: 'white' }}>
         <CardContent>
           <Grid item container spacing={2}>
@@ -350,7 +350,7 @@ function MedReqDropDown(props: MedReqDropDownProps) {
           />
         </Box>
       </Modal>
-    </Grid>
+    </>
   );
 }
 
diff --git a/src/views/Patient/MedReqDropDown/cdsHooksCards/cdsHooksCard.tsx b/src/views/Patient/MedReqDropDown/cdsHooksCards/cdsHooksCard.tsx
index 0573e1b..4504156 100644
--- a/src/views/Patient/MedReqDropDown/cdsHooksCards/cdsHooksCard.tsx
+++ b/src/views/Patient/MedReqDropDown/cdsHooksCards/cdsHooksCard.tsx
@@ -174,7 +174,7 @@ const CdsHooksCard = (props: CdsHooksCardProps) => {
           </Typography>
         </CardContent>
         <CardActions>
-          <Grid container>
+          <Grid container spacing={1}>
             {links.map((link: Link) => {
               if (link.type === 'smart') {
                 return (
diff --git a/src/views/Patient/PatientView.tsx b/src/views/Patient/PatientView.tsx
index 6d532a2..c34dbff 100644
--- a/src/views/Patient/PatientView.tsx
+++ b/src/views/Patient/PatientView.tsx
@@ -49,17 +49,12 @@ function PatientView(props: PatientViewProps) {
   return (
     <Box flexGrow={1}>
       <Grid container spacing={2}>
-        <Grid item xs={12}>
-          <Typography variant="h4" component="h1" textAlign="center">
-            Launched with patient context:
-          </Typography>
-        </Grid>
-        <Grid item xs={12} md={6}>
+        <Grid item xs={12} md={4}>
           {patient ? (
             <Card sx={{ bgcolor: 'white' }}>
               <CardContent>
-                <Typography component="h2" variant="h5" gutterBottom>
-                  Patient Info
+                <Typography component="h1" variant="h5">
+                  Patient information loaded from patient context
                 </Typography>
                 <TableContainer>
                   <Table>
@@ -78,18 +73,18 @@ function PatientView(props: PatientViewProps) {
               </CardContent>
             </Card>
           ) : (
-            <Typography component="h2" variant="h5">
+            <Typography component="h1" variant="h5">
               Loading patient info...
             </Typography>
           )}
         </Grid>
-        {client ? (
-          <MedReqDropDown client={client} tabCallback={props.tabCallback} />
-        ) : (
-          <Grid item xs={12} md={6}>
+        <Grid item xs={12} md={8}>
+          {client ? (
+            <MedReqDropDown client={client} tabCallback={props.tabCallback} />
+          ) : (
             <p>Loading medication request...</p>
-          </Grid>
-        )}
+          )}
+        </Grid>
       </Grid>
     </Box>
   );