Anthony/Continuation-For-PR#3917-Role-Change-Permissions-Confirmation-Modal

src/components/EmailManagement/template-management/templates/EmailTemplateEditor.module.css

@@ -797,53 +797,3 @@
 .email-template-editor .d-flex {
   align-items: center;
 }
-
-/* Dark Mode - Add/Edit Variable Modal */
-:global(body.bm-dashboard-dark) :global(.modal-content) {
-  background-color: #1a2a3a;
-  color: #e0e0e0;
-  border-color: #2e5061;
-}
-
-:global(body.bm-dashboard-dark) :global(.modal-header) {
-  background-color: #1a2a3a;
-  border-bottom-color: #2e5061;
-  color: #e0e0e0;
-}
-
-:global(body.bm-dashboard-dark) :global(.modal-body) {
-  background-color: #1a2a3a;
-  color: #e0e0e0;
-}
-
-:global(body.bm-dashboard-dark) :global(.modal-footer) {
-  background-color: #1a2a3a;
-  border-top-color: #2e5061;
-}
-
-:global(body.bm-dashboard-dark) :global(.modal-body) :global(.form-control),
-:global(body.bm-dashboard-dark) :global(.modal-body) :global(.form-select) {
-  background-color: #0d1f2d;
-  color: #e0e0e0;
-  border-color: #2e5061;
-}
-
-:global(body.bm-dashboard-dark) :global(.modal-body) :global(label),
-:global(body.bm-dashboard-dark) :global(.modal-body) :global(.col-form-label) {
-  color: #e0e0e0;
-}
-
-:global(body.bm-dashboard-dark) :global(.modal-title),
-:global(body.bm-dashboard-dark) :global(.modal-header) :global(.btn-close) {
-  color: #e0e0e0;
-  filter: invert(1);
-}
-
-/* Dark Mode - Type Selection Modal ListGroup */
-:global(body.bm-dashboard-dark) :global(.list-group-item) {
-  background-color: #0d1f2d;
-  color: #e0e0e0;
-  border-color: #2e5061;
-}
-
-

src/components/PermissionsManagement/PermissionChangeLogTable.jsx

@@ -105,6 +105,14 @@ function PermissionChangeLogTable({ changeLogs, darkMode, roleNamesToHighlight =
       </div>
     );
   };
+
+  const darkHighLight = shouldHighlight => {
+    const darkClass = shouldHighlight ? styles['dark-highlight-row'] : styles.darkModeRow;
+    const lightClass = shouldHighlight ? styles['highlight-row'] : '';
+
+    return darkMode ? darkClass : lightClass;
+  };
+
   return (
     <>
       <div className={styles['table-responsive']}>
@@ -128,7 +136,7 @@ function PermissionChangeLogTable({ changeLogs, darkMode, roleNamesToHighlight =
               const nameValue = log?.individualName ? formatName(log.individualName) : log.roleName;
               const shouldHighlight = roleSet.has(normalize(nameValue));
               return (
-                <tr key={log._id} className={shouldHighlight ? styles['highlight-row'] : ''}>
+                <tr key={log._id} className={darkHighLight(shouldHighlight)}>
                   <td className={`${styles['permission-change-log-table--cell']} ${bgYinmnBlue}`}>
                     {`${formatDate(log.logDateTime)} ${formattedAmPmTime(log.logDateTime)}`}
                   </td>

src/components/PermissionsManagement/PermissionChangeLogTable.module.css

@@ -13,6 +13,20 @@
   background-color: #b2ebf2;           
 }
 
+.darkModeRow:hover {
+  background-color: #1c2541 !important;
+}
+
+.dark-highlight-row {
+  background-color: #012758;
+  border-left: 4px solid #007281;      
+  transition: background 0.2s ease;
+}
+
+.dark-highlight-row:hover {
+  background-color: #12328a;
+}
+
 .permission-change-log-table {
   border-collapse: 'collapse';
   width: 100%;

src/components/UserProfile/BasicInformationTab/BasicInformationTab.jsx

@@ -20,6 +20,7 @@ import hasPermission from '~/utils/permissions';
 import { ENDPOINTS } from '~/utils/URL';
 import TimeZoneDropDown from '../TimeZoneDropDown';
 import styles from './BasicInformationTab.module.css';
+import RoleChangePermissionsModal from '~/components/UserProfile/RoleChangePermissionsModal';
 
 
 export const Name = props => {
@@ -494,6 +495,7 @@ const BasicInformationTab = props => {
   const [timeZoneFilter, setTimeZoneFilter] = useState('');
   const [desktopDisplay, setDesktopDisplay] = useState(window.innerWidth > 1024);
   const [errorOccurred, setErrorOccurred] = useState(false);
+  const [showRolePermsModal, setShowRolePermsModal] = useState(false);
   const dispatch = useDispatch();
   const rolesAllowedToEditStatusFinalDay = ['Administrator', 'Owner'];
   const canEditStatus = dispatch(hasPermission('interactWithPauseUserButton'));
@@ -723,43 +725,16 @@ const BasicInformationTab = props => {
       </Col>
       <Col md={desktopDisplay ? '6' : ''} className={darkMode ? 'bg-yinmn-blue' : ''}>
         {canEditRole ? (
-          <FormGroup>
-            <select
-              id="role"
-              name="role"
-              className={`form-control ${darkMode ? 'bg-darkmode-liblack border-0 text-light' : ''}`}
-              value={userProfile.role || ''}   // make sure this is a string
-              onChange={e => {
-                const newRole = e.target.value;
-                setUserProfile({
-                  ...userProfile,
-                  role: newRole,
-                  permissions: { ...userProfile.permissions, frontPermissions: [] },
-                });
-              }}
+          <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+            <Button
+              color="primary"
+              style={darkMode ? boxStyleDark : boxStyle}
+              onClick={() => setShowRolePermsModal(true)}
             >
-              {/* Optional placeholder when no role selected */}
-              {!userProfile.role && <option value="">Select role</option>}
-
-              {(roles || [])
-                .map(r => (typeof r === 'string' ? r : r.roleName)) // normalize
-                .filter(Boolean)
-                .map(roleName => {
-                  if (roleName === 'Owner') return null; // skip Owner in this list
-                  return (
-                    <option key={roleName} value={roleName}>
-                      {roleName}
-                    </option>
-                  );
-                })}
-
-              {canAddDeleteEditOwners && (
-                <option value="Owner" style={desktopDisplay ? { marginLeft: '5px' } : {}}>
-                  Owner
-                </option>
-              )}
-            </select>
-          </FormGroup>
+              Manage Role & Permissions
+            </Button>
+          </div>
+
         ) : (
           <p className={`text-right ${darkMode ? 'text-light' : ''}`}>{userProfile.role}</p>
         )}
@@ -1047,6 +1022,16 @@ const BasicInformationTab = props => {
           </>
         )}
       </div>
+      <RoleChangePermissionsModal
+        isOpen={showRolePermsModal}
+        onClose={() => setShowRolePermsModal(false)}
+        roles={roles}
+        userProfile={userProfile}
+        setUserProfile={setUserProfile}
+        loadUserProfile={loadUserProfile}
+        desktopDisplay={desktopDisplay}
+        canAddDeleteEditOwners={canAddDeleteEditOwners}
+      />
     </div>
   );
 };

src/components/UserProfile/BasicInformationTab/BasicInformationTab.module.css

@@ -78,4 +78,8 @@
 
 :global(.bg-yinmn-blue) .dark-label-col {
   background-color: #1c2541 !important;
-}
+}
+
+.darkModeText {
+  color: white;
+}

src/components/UserProfile/BasicInformationTab/__tests__/BasicInformationTab.test.jsx

@@ -368,7 +368,6 @@ let testProps= {
      handleUserProfile:vi.fn(),
      roles:['Admin','Owner','Volunteer','Manager'],
      canEditRole:true,
-
    };
 
 
@@ -505,7 +504,7 @@ it('Test case 9: Renders the role  component with a combo box  when canEditRole
     </Provider>,
   );
   expect(screen.getByText("Role")).toBeInTheDocument(); // Label
-  expect(screen.getByRole('combobox')).toBeInTheDocument(); // combo box
+  expect(screen.getByRole('button', { name: 'Manage Role & Permissions' })).toBeInTheDocument(); // Role Modal button
 });
 it('Test case 10 : Does not render a combo box for role component   when canEditRole is false', () => {
   testProps.canEditRole=false;