Display a bigger QR code

sfbrigade · Nov 7, 2024 · ae6b881 · ae6b881
1 parent 36e4d78
commit ae6b881
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 19 deletions.
diff --git a/client/index.html b/client/index.html
@@ -7,7 +7,7 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
     />
-    <title>SF Life line</title>
+    <title>SF Life Line</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/client/src/pages/patients/patient-details/PatientDetails.jsx b/client/src/pages/patients/patient-details/PatientDetails.jsx
@@ -4,7 +4,7 @@ import { useQuery } from '@tanstack/react-query';
 import { StatusCodes } from 'http-status-codes';
 import { humanize } from 'inflection';
 import { QRCode } from 'react-qrcode-logo';
-import { Loader, Container, Text, Flex, Title } from '@mantine/core';
+import { Container, Grid, Loader, Text, Title } from '@mantine/core';
 
 import LifelineAPI from '../LifelineAPI.js';
 import ContactInfo from './components/ContactInfo.jsx';
@@ -50,23 +50,24 @@ export default function PatientDetails() {
   return (
     <main className={classes.details}>
       <Container style={{ marginBottom: '2rem' }}>
-        <Flex align="center">
-          <Title mr="1rem">
-            {data?.firstName} {data?.lastName}
-          </Title>
-          <QRCode
-            value={`${window.location.origin}${location.pathname}`}
-            size={100}
-          />
-        </Flex>
-        <section className={classes.patientInfoContainer}>
-          <Text>Date of birth</Text>
-          <Text>Gender</Text>
-          <Text>Preferred language</Text>
-          <Text>{data?.dateOfBirth}</Text>
-          <Text>{humanize(data?.gender)}</Text>
-          <Text>{humanize(data?.language)}</Text>
-        </section>
+        <Grid my="2rem">
+          <Grid.Col span={{ base: 12, md: 8 }}>
+            <Title mb="1rem">
+              {data?.firstName} {data?.lastName}
+            </Title>
+            <section className={classes.patientInfoContainer}>
+              <Text>Date of birth</Text>
+              <Text>Gender</Text>
+              <Text>Preferred language</Text>
+              <Text>{data?.dateOfBirth}</Text>
+              <Text>{humanize(data?.gender)}</Text>
+              <Text>{humanize(data?.language)}</Text>
+            </section>
+          </Grid.Col>
+          <Grid.Col display={{ base: 'none', md: 'block' }} span={4} ta="right">
+            <QRCode value={`${window.location.origin}${location.pathname}`} />
+          </Grid.Col>
+        </Grid>
         <ContactInfo
           emergencyContact={data?.emergencyContact}
           physician={data?.physician}