Switch to using classNames and CSS modules for performance

sfbrigade · Oct 21, 2024 · d105694 · d105694
1 parent 92184ca
commit d105694
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 7 deletions.
diff --git 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,26 +182,23 @@ 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)}
         >
           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
@@ -0,0 +1,8 @@
+.title {
+  font-size: 1.2rem;
+  font-weight: 600;
+}
+
+.button {
+  margin-top: 1rem;
+}