Merge pull request #4875 from OneCommunityGlobal/Venkataramanan_fix_Permission_management_formatting_issues

Venkataramanan 🔥 permission management formatting issues

Author: one-community

src/components/PermissionsManagement/PermissionsManagement.jsx

@@ -10,7 +10,6 @@ import ReactTooltip from 'react-tooltip'; // Importing react-tooltip for tooltip
 // eslint-disable-next-line import/named
 import { updateUserProfile, getUserProfile } from '../../actions/userProfile';
 import { boxStyle, boxStyleDark } from '../../styles';
-import '../Header/index.css';
 import { ENDPOINTS } from '~/utils/URL';
 import { ModalContext } from '~/context/ModalContext';
 import EditableInfoModal from '../UserProfile/EditableModal/EditableInfoModal';

src/components/PermissionsManagement/PermissionsManagement.module.css

@@ -57,6 +57,32 @@
   font-size: 1.2rem;
 }
 
+.name-container__btn_columns {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  align-items: flex-start;
+}
+
+.name-container__btns {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.btn-with-info {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.btn-with-info .info-icon {
+  cursor: pointer;
+  line-height: 1;
+  font-size: 18px;
+  margin: 0;
+}
+
 .user-role-tab__permission {
   border-bottom: solid 1px #ced4da;
   display: flex;
@@ -127,10 +153,21 @@
 }
 
 .role-btn {
+  border: none !important;
+  outline: none !important;
+  box-shadow: none !important;
+  background: transparent;
   text-align: center;
   flex-grow: 1;
 }
 
+.role-btn:focus,
+.role-btn:active,
+.role-btn:focus-visible {
+  outline: none !important;
+  box-shadow: none !important;
+}
+
 .infos {
   margin-left: auto;
   text-align: center;