fix styles for phr

examples/apps/phr/src/app.tsx

@@ -1,42 +1,44 @@
-import { Patient } from "aidbox-sdk/types";
-import { useEffect, useState } from "react";
+import { Client } from 'aidbox-sdk'
+import { Patient } from 'aidbox-sdk/types'
+import { useEffect, useState } from 'react'
 
-import { PatientInfo } from "./components/patient-info";
-import { Workspace } from "./components/workspace";
-import { Client } from "aidbox-sdk";
-import { ClientContext } from "./context";
+import { PatientInfo } from './components/patient-info'
+import { Workspace } from './components/workspace'
+import { ClientContext } from './context'
 
-export function App({ client }: { client: Client }) {
-  const [patient, setPatient] = useState<Patient>({});
+import './index.css'
 
-  const searchParams = new URLSearchParams(document.location.search);
+export function App ({ client }: { client: Client }) {
+  const [patient, setPatient] = useState<Patient>({})
+
+  const searchParams = new URLSearchParams(document.location.search)
   const patient_id =
-    searchParams.get("id") || "fd22f7f8-70a6-4d45-b818-8be4eb2ed0ea";
+    searchParams.get('id') || 'fd22f7f8-70a6-4d45-b818-8be4eb2ed0ea'
 
   useEffect(() => {
     if (patient_id) {
-      client.getResource("Patient", patient_id).then((response) => {
+      client.getResource('Patient', patient_id).then((response) => {
         if (response?.id) {
-          setPatient(response);
+          setPatient(response)
         }
-      });
+      })
     }
-  }, [patient_id]);
+  }, [patient_id])
 
   return (
     <ClientContext.Provider value={{ client }}>
-      <div style={{ display: "flex", flexDirection: "row" }}>
+      <div style={{ display: 'flex', flexDirection: 'row' }}>
         <PatientInfo patient={patient} />
         <div
           style={{
-            padding: "2rem 0",
-            background: "#FAFBFD",
-            width: "calc(100% - 300px)",
+            padding: '2rem 0',
+            background: '#FAFBFD',
+            width: 'calc(100% - 300px)'
           }}
         >
           <Workspace patient={patient} />
         </div>
       </div>
     </ClientContext.Provider>
-  );
+  )
 }

examples/apps/phr/src/components/allergies-intolerance-card.tsx

@@ -1,41 +1,41 @@
-import { AllergyIntolerance } from "aidbox-sdk/types";
-import cx from "classnames";
-import { useContext, useEffect, useState } from "react";
+import { AllergyIntolerance } from 'aidbox-sdk/types'
+import cx from 'classnames'
+import { useContext, useEffect, useState } from 'react'
 
-import { CardWrapper } from "../shared/card";
-import { Divider } from "../shared/divider/divider";
-import { formatDate, kebabToFriendlyString } from "../utils";
+import { ClientContext } from '../context'
+import { CardWrapper } from '../shared/card'
+import { Divider } from '../shared/divider/divider'
+import { formatDate, kebabToFriendlyString } from '../utils'
 
-import styles from "./workspace.module.css";
-import { ClientContext } from "../context";
+import styles from './workspace.module.css'
 
-export function AllergiesIntoleranceCard({ id: patient_id }: { id: string }) {
-  const { client } = useContext(ClientContext);
-  const [allergies, setAllergies] = useState<AllergyIntolerance[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [total, setTotal] = useState<number>(0);
+export function AllergiesIntoleranceCard ({ id: patient_id }: { id: string }) {
+  const { client } = useContext(ClientContext)
+  const [allergies, setAllergies] = useState<AllergyIntolerance[]>([])
+  const [loading, setLoading] = useState(true)
+  const [total, setTotal] = useState<number>(0)
 
   useEffect(() => {
     client
-      .getResources("AllergyIntolerance")
-      .where("patient", `Patient/${patient_id}`)
+      .getResources('AllergyIntolerance')
+      .where('patient', `Patient/${patient_id}`)
       .count(3)
       .then((response) => {
         if (response.entry?.length > 0) {
-          setAllergies(response.entry?.map((allergy) => allergy.resource));
-          setTotal(response.total);
+          setAllergies(response.entry?.map((allergy) => allergy.resource))
+          setTotal(response.total)
         }
-        setLoading(false);
-      });
-  }, [patient_id]);
+        setLoading(false)
+      })
+  }, [patient_id])
 
-  const title = "Allergy" + (total > 3 ? `(${total})` : "");
+  const title = 'Allergy' + (total > 3 ? `(${total})` : '')
   const action = {
-    label: "Show more",
-    onClick: () => ({}),
-  };
+    label: 'Show more',
+    onClick: () => ({})
+  }
 
-  const bottomActions = total > 3 ? action : undefined;
+  const bottomActions = total > 3 ? action : undefined
 
   return (
     <CardWrapper
@@ -48,54 +48,55 @@ export function AllergiesIntoleranceCard({ id: patient_id }: { id: string }) {
         <div key={allergy.id}>
           <div
             style={{
-              display: "grid",
-              gridTemplateColumns: "5fr 1fr",
-              alignItems: "center",
+              display: 'grid',
+              gridTemplateColumns: '5fr 1fr',
+              alignItems: 'center'
             }}
           >
             <p
               style={{
-                fontSize: "1rem",
-                fontWeight: "500",
-                maxWidth: "90%",
-                overflow: "hidden",
-                whiteSpace: "nowrap",
-                textOverflow: "ellipsis",
+                fontSize: '1rem',
+                fontWeight: '500',
+                maxWidth: '90%',
+                overflow: 'hidden',
+                whiteSpace: 'nowrap',
+                textOverflow: 'ellipsis',
+                letterSpacing: '-0.05em'
               }}
             >
               {allergy.code?.text}
             </p>
 
             <p
               className={cx(styles.cardSmallText, {
-                [styles.capitalize]: true,
+                [styles.capitalize]: true
               })}
             >
               {kebabToFriendlyString(
-                allergy.clinicalStatus?.coding?.[0].code ?? ""
+                allergy.clinicalStatus?.coding?.[0].code ?? ''
               )}
             </p>
 
             <p className={styles.cardSmallText}>
-              {formatDate(allergy.recordedDate ?? "")}
+              {formatDate(allergy.recordedDate ?? '')}
             </p>
 
             <p
               className={cx(styles.cardSmallText, {
                 [styles.capitalize]: true,
-                [styles.allergyCriticalityHigh]: allergy.criticality === "high",
-                [styles.allergyCriticalityLow]: allergy.criticality === "low",
+                [styles.allergyCriticalityHigh]: allergy.criticality === 'high',
+                [styles.allergyCriticalityLow]: allergy.criticality === 'low'
               })}
             >
               {allergy.criticality}
             </p>
           </div>
 
           {index !== allergies?.length - 1 && (
-            <Divider verticalMargin={"0.5rem"} />
+            <Divider verticalMargin={'0.5rem'} />
           )}
         </div>
       ))}
     </CardWrapper>
-  );
+  )
 }