From c65aa8d21852b5082884c974f8e88f2914591458 Mon Sep 17 00:00:00 2001
From: Ian Mayo <ian@planetmayo.com>
Date: Tue, 6 Aug 2024 15:20:39 +0100
Subject: [PATCH] Improve HTML structure to avoid `embedded p's` warning

---
 src/resources/users/UserForm.tsx | 101 +++++++++++++++----------------
 1 file changed, 48 insertions(+), 53 deletions(-)

diff --git a/src/resources/users/UserForm.tsx b/src/resources/users/UserForm.tsx
index 2fd16f9a..583adbc2 100644
--- a/src/resources/users/UserForm.tsx
+++ b/src/resources/users/UserForm.tsx
@@ -284,64 +284,59 @@ export default function UserForm({ isEdit }: FormProps): React.ReactElement {
         </Select>
       </FormControl>
       <Typography
+        component={'div'}
         sx={{
           marginTop: '30px',
           marginBottom: '-20px',
           fontSize: '14px'
         }}>
-        <p>
-          <span
-            style={{
-              fontWeight: '600',
-              fontSize: '18px'
-            }}>
-            Departure Date
-          </span>{' '}
-          This is the date when the user will no longer be able to log into VAL.
-          If the user needs to be reactivated, this date can be updated.
-        </p>
-
-        <p>
-          <span
-            style={{
-              fontWeight: '600',
-              fontSize: '18px'
-            }}>
-            Password
-          </span>{' '}
-          The password should include these items:
-          <ul>
-            <li>At least 10 characters in length</li>
-            <li>Upper and lower case letters</li>
-            <li>At least one digit</li>
-            <li>At least one special character</li>
-          </ul>
-        </p>
-        <p>
-          <span
-            style={{
-              fontWeight: '600',
-              fontSize: '18px'
-            }}>
-            User Role
-          </span>
-          The above user roles have these permissions in VAL:
-          <ul>
-            <li>
-              <b>None</b> this user can log into VAL, but cannot make any
-              changes to any data
-            </li>
-            <li>
-              <b>RCO-User</b> can perform all VAL processes (including setting
-              temporary passwords), with the exception of editing some rarely
-              changing drop-down lists
-            </li>
-            <li>
-              <b>RCO-Power-User</b> can perform all processes of RCO-User, plus
-              can modify drop-down lists (such as media-type or vault-location)
-            </li>
-          </ul>
-        </p>
+        <span
+          style={{
+            fontWeight: '600',
+            fontSize: '18px'
+          }}>
+          Departure Date
+        </span>{' '}
+        This is the date when the user will no longer be able to log into VAL.
+        If the user needs to be reactivated, this date can be updated.
+        <br />
+        <span
+          style={{
+            fontWeight: '600',
+            fontSize: '18px'
+          }}>
+          Password
+        </span>{' '}
+        The password should include these items:
+        <ul>
+          <li>At least 10 characters in length</li>
+          <li>Upper and lower case letters</li>
+          <li>At least one digit</li>
+          <li>At least one special character</li>
+        </ul>
+        <span
+          style={{
+            fontWeight: '600',
+            fontSize: '18px'
+          }}>
+          User Role
+        </span>{' '}
+        The above user roles have these permissions in VAL:
+        <ul>
+          <li>
+            <b>None</b> this user can log into VAL, but cannot make any changes
+            to any data
+          </li>
+          <li>
+            <b>RCO-User</b> can perform all VAL processes (including setting
+            temporary passwords), with the exception of editing some rarely
+            changing drop-down lists
+          </li>
+          <li>
+            <b>RCO-Power-User</b> can perform all processes of RCO-User, plus
+            can modify drop-down lists (such as media-type or vault-location)
+          </li>
+        </ul>
       </Typography>
     </SimpleForm>
   )