From d105694592221fb1ca9da218b79f5e58844be6dc Mon Sep 17 00:00:00 2001
From: samau3 <samau415@gmail.com>
Date: Sun, 20 Oct 2024 23:35:38 -0700
Subject: [PATCH] Switch to using classNames and CSS modules for performance

---
 .../patients/register/inputs/RegisterPhysician.jsx  | 13 ++++++-------
 .../register/inputs/RegisterPhysician.module.css    |  8 ++++++++
 2 files changed, 14 insertions(+), 7 deletions(-)
 create mode 100644 client/src/pages/patients/register/inputs/RegisterPhysician.module.css

diff --git a/client/src/pages/patients/register/inputs/RegisterPhysician.jsx b/client/src/pages/patients/register/inputs/RegisterPhysician.jsx
index 35f894f2..8392f597 100644
--- a/client/src/pages/patients/register/inputs/RegisterPhysician.jsx
+++ b/client/src/pages/patients/register/inputs/RegisterPhysician.jsx
@@ -16,6 +16,8 @@ import { useMutation } from '@tanstack/react-query';
 import LifelineAPI from '../../LifelineAPI.js';
 import { StatusCodes } from 'http-status-codes';
 
+import classes from './RegisterPhysician.module.css';
+
 const registerPhysicianProps = {
   setPhysician: PropTypes.func.isRequired,
   registerPhysicianOpened: PropTypes.bool.isRequired,
@@ -180,18 +182,15 @@ export default function RegisterPhysician({
       <Modal
         opened={confirmationModalOpened}
         onClose={closeConfirmationModal}
-        styles={{
-          title: {
-            fontSize: '1.2rem',
-            fontWeight: 600,
-          },
+        classNames={{
+          title: classes.title,
         }}
         title="This form has unsaved changes."
         yOffset="16vh"
       >
         <p>Are you sure you want to close this form without submitting?</p>
         <Button
-          style={{ marginTop: '1rem' }}
+          classNames={{ root: classes.button }}
           color="red"
           fullWidth
           onClick={() => confirmClose(true)}
@@ -199,7 +198,7 @@ export default function RegisterPhysician({
           Yes
         </Button>
         <Button
-          style={{ marginTop: '1rem' }}
+          classNames={{ root: classes.button }}
           color="blue"
           fullWidth
           onClick={closeConfirmationModal}
diff --git a/client/src/pages/patients/register/inputs/RegisterPhysician.module.css b/client/src/pages/patients/register/inputs/RegisterPhysician.module.css
new file mode 100644
index 00000000..da7f341e
--- /dev/null
+++ b/client/src/pages/patients/register/inputs/RegisterPhysician.module.css
@@ -0,0 +1,8 @@
+.title {
+  font-size: 1.2rem;
+  font-weight: 600;
+}
+
+.button {
+  margin-top: 1rem;
+}