From a4e972e803e57340046518de59991c9eb7540253 Mon Sep 17 00:00:00 2001
From: Davit <davedabyeet@gmail.com>
Date: Tue, 5 Sep 2023 16:04:33 +0400
Subject: [PATCH 1/3] fix modal bug, change confirm texts for user removal
 modals

---
 src/components/Organizations/AddUserToGroup/index.js | 6 +++---
 src/components/Organizations/User/index.tsx          | 4 ++--
 src/components/Organizations/Users/index.js          | 4 ++--
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/Organizations/AddUserToGroup/index.js b/src/components/Organizations/AddUserToGroup/index.js
index 21994d61..e19af108 100644
--- a/src/components/Organizations/AddUserToGroup/index.js
+++ b/src/components/Organizations/AddUserToGroup/index.js
@@ -46,7 +46,7 @@ let options = [
  */
 export const AddUserToGroup = ({
   group,
-  closeModal,
+  close,
   inputValueEmail,
   setInputValue,
   selectedRole,
@@ -62,7 +62,7 @@ export const AddUserToGroup = ({
         if (data) {
           onAddUser().then(() => {
             setInputValue({ target: { value: '' } });
-            closeModal();
+            close();
           });
         }
         return (
@@ -114,7 +114,7 @@ export const AddUserToGroup = ({
                 >
                   Add
                 </Button>
-                <Button variant="ghost" action={() => closeModal()}>
+                <Button variant="ghost" action={() => close()}>
                   Cancel
                 </Button>
               </Footer>
diff --git a/src/components/Organizations/User/index.tsx b/src/components/Organizations/User/index.tsx
index 76480d34..d267b830 100644
--- a/src/components/Organizations/User/index.tsx
+++ b/src/components/Organizations/User/index.tsx
@@ -122,9 +122,9 @@ const User: FC<UserProps> = ({ user, organizationName, organizationId, refetch }
               isOpen={groupModalOpen && selectedGroup === group?.id}
               onRequestClose={closeGroupModal}
             >
-              <h3 style={{ fontSize: '24px', lineHeight: '24px', paddingTop: '32px' }}>Are you sure?</h3>
+              <h3 style={{ fontSize: '24px', lineHeight: '24px', paddingTop: '32px' }}>Remove user?</h3>
               <p style={{ fontSize: '16px', lineHeight: '24px' }}>
-                This action will delete this entry, you might not be able to get this back.
+                This action will remove this user from a group, you might not be able to get this back.
               </p>
 
               <Footer>
diff --git a/src/components/Organizations/Users/index.js b/src/components/Organizations/Users/index.js
index 41d10ce4..3254f891 100644
--- a/src/components/Organizations/Users/index.js
+++ b/src/components/Organizations/Users/index.js
@@ -124,9 +124,9 @@ const Users = ({ users = [], organization, organizationId, organizationName, ref
               }}
             />
             <Modal isOpen={deleteUserModalOpen && selectedUser === user?.id} onRequestClose={closeUserModal}>
-              <h3 style={{ fontSize: '24px', lineHeight: '24px', paddingTop: '32px' }}>Are you sure?</h3>
+              <h3 style={{ fontSize: '24px', lineHeight: '24px', paddingTop: '32px' }}>Remove user?</h3>
               <p style={{ fontSize: '16px', lineHeight: '24px' }}>
-                This action will delete this entry, you might not be able to get this back.
+                This action will remove this user from all groups, you might not be able to reverse this.
               </p>
 
               <Footer>

From 6b5737b62dc6672c30b3e3bb302464b50005bf97 Mon Sep 17 00:00:00 2001
From: Davit <davedabyeet@gmail.com>
Date: Tue, 5 Sep 2023 17:15:20 +0400
Subject: [PATCH 2/3] inline org styles, input styles, select styles

---
 .../Organizations/AddGroupToProject/index.js  | 21 +++++---
 .../AddNotificationToProject/index.js         | 19 ++++---
 .../Organizations/AddUserToGroup/Styles.tsx   |  3 +-
 .../Organizations/AddUserToGroup/index.js     |  8 ++-
 .../AddUserToGroupSelect/index.tsx            | 18 +++++--
 .../AddUserToOrganization/Styles.tsx          |  3 +-
 .../Organizations/GroupMembers/index.js       | 49 +++++++++++++------
 .../Organizations/Groups/Styles.tsx           |  3 +-
 src/components/Organizations/Groups/index.js  |  8 +--
 src/components/Organizations/Manage/index.js  | 16 +++---
 .../Organizations/NewGroup/index.js           |  3 +-
 .../Organizations/NewProject/index.js         | 20 +++++---
 .../Notifications/AddNotifications.tsx        |  8 ++-
 .../Organizations/Notifications/Styles.tsx    |  3 +-
 .../Organizations/Notifications/index.js      | 10 ++--
 .../Organizations/Projects/Styles.tsx         |  3 +-
 .../Organizations/Projects/index.js           | 10 ++--
 .../RemoveNotificationConfirm/index.js        |  8 +--
 .../RemoveProjectGroupConfirm/index.js        | 14 ++----
 .../Organizations/RemoveUserConfirm/index.js  |  8 +--
 src/components/Organizations/SharedStyles.tsx | 29 ++++++++++-
 src/components/Organizations/User/Styles.tsx  |  3 +-
 src/components/Organizations/User/index.tsx   |  8 +--
 src/components/Organizations/Users/Styles.tsx | 24 ++++++---
 .../Organizations/Users/UsersSkeleton.tsx     | 25 +++++-----
 src/components/Organizations/Users/index.js   | 16 +++---
 26 files changed, 220 insertions(+), 120 deletions(-)

diff --git a/src/components/Organizations/AddGroupToProject/index.js b/src/components/Organizations/AddGroupToProject/index.js
index afce5a07..40807ddc 100644
--- a/src/components/Organizations/AddGroupToProject/index.js
+++ b/src/components/Organizations/AddGroupToProject/index.js
@@ -7,10 +7,9 @@ import Modal from 'components/Modal';
 // @TODO: add this once the logic exists
 import withLogic from 'components/Organizations/AddGroupToProject/logic';
 import gql from 'graphql-tag';
-import { bp, color } from 'lib/variables';
 
 import { RoleSelect } from '../AddUserToGroup/Styles';
-import { Footer, StyledNotification, StyledNotificationWrapper } from '../SharedStyles';
+import { AddButtonContent, Footer, StyledNotification, StyledNotificationWrapper } from '../SharedStyles';
 
 const ADD_GROUP_PROJECT_MUTATION = gql`
   mutation addProjectToGroup($groupName: String!, $projectName: String!) {
@@ -43,10 +42,10 @@ export const AddGroupToProject = ({
     <StyledNotificationWrapper>
       <div className="margins">
         <Button action={openModal}>
-          <span style={{ display: 'inline-flex', alignContent: 'center', gap: '10px' }}>
-            <span style={{ fontSize: '28px' }}>+</span>
-            <span style={{ fontSize: '16px', lineHeight: '24px' }}>Group</span>
-          </span>
+          <AddButtonContent>
+            <span>+</span>
+            <span>Group</span>
+          </AddButtonContent>
         </Button>
       </div>
       <Modal isOpen={open} onRequestClose={closeModal} contentLabel={`Confirm`} style={customStyles}>
@@ -66,9 +65,15 @@ export const AddGroupToProject = ({
                     Group
                     <RoleSelect>
                       <ReactSelect
-                        className='select'
+                        className="select"
                         menuPortalTarget={document.body}
-                        styles={{ menuPortal: base => ({ ...base, zIndex: 9999, color: 'black' }) }}
+                        styles={{
+                          menuPortal: base => ({ ...base, zIndex: 9999, color: 'black', fontSize: '16px' }),
+                          placeholder: base => ({ ...base, fontSize: '16px' }),
+                          menu: base => ({ ...base, fontSize: '16px' }),
+                          option: base => ({ ...base, fontSize: '16px' }),
+                          singleValue: base => ({ ...base, fontSize: '16px' }),
+                        }}
                         aria-label="Group"
                         placeholder="Select a group..."
                         name="group"
diff --git a/src/components/Organizations/AddNotificationToProject/index.js b/src/components/Organizations/AddNotificationToProject/index.js
index 70dbfd2c..434614e2 100644
--- a/src/components/Organizations/AddNotificationToProject/index.js
+++ b/src/components/Organizations/AddNotificationToProject/index.js
@@ -7,10 +7,9 @@ import Modal from 'components/Modal';
 // @TODO: add this once the logic exists
 import withLogic from 'components/Organizations/AddNotificationToProject/logic';
 import gql from 'graphql-tag';
-import { bp, color } from 'lib/variables';
 
 import { RoleSelect } from '../AddUserToGroup/Styles';
-import { Footer, StyledNotification, StyledNotificationWrapper } from '../SharedStyles';
+import { AddButtonContent, Footer, StyledNotification, StyledNotificationWrapper } from '../SharedStyles';
 
 const ADD_PROJECT_NOTIFICATION_MUTATION = gql`
   mutation addNotificationToProject(
@@ -49,10 +48,10 @@ export const AddNotificationToProject = ({
     <StyledNotificationWrapper>
       <div className="margins">
         <Button action={openModal}>
-          <span style={{ display: 'inline-flex', alignContent: 'center', gap: '10px' }}>
-            <span style={{ fontSize: '28px' }}>+</span>
-            <span style={{ fontSize: '16px', lineHeight: '24px' }}>Notification</span>
-          </span>
+          <AddButtonContent>
+            <span>+</span>
+            <span>Notification</span>
+          </AddButtonContent>
         </Button>
       </div>
       <Modal isOpen={open} onRequestClose={closeModal} contentLabel={`Confirm`} style={customStyles}>
@@ -87,7 +86,13 @@ export const AddNotificationToProject = ({
                       <ReactSelect
                         className='select'
                         menuPortalTarget={document.body}
-                        styles={{ menuPortal: base => ({ ...base, zIndex: 9999, color: 'black' }) }}
+                        styles={{
+                          menuPortal: base => ({ ...base, zIndex: 9999, color: 'black', fontSize: '16px' }),
+                          placeholder: base => ({ ...base, fontSize: '16px' }),
+                          menu: base => ({ ...base, fontSize: '16px' }),
+                          option: base => ({ ...base, fontSize: '16px' }),
+                          singleValue: base => ({ ...base, fontSize: '16px' }),
+                        }}
                         aria-label="Notification"
                         placeholder="Select a notification..."
                         name="notification"
diff --git a/src/components/Organizations/AddUserToGroup/Styles.tsx b/src/components/Organizations/AddUserToGroup/Styles.tsx
index 8354cc89..cc0b84de 100644
--- a/src/components/Organizations/AddUserToGroup/Styles.tsx
+++ b/src/components/Organizations/AddUserToGroup/Styles.tsx
@@ -15,7 +15,8 @@ export const NewMember = styled.div`
     min-height: 38px;
     border-color: hsl(0, 0%, 80%);
     font-family: 'source-code-pro', sans-serif;
-    font-size: 0.8125rem;
+    font-size: 16px;
+    line-height:24px;
     color: #000;
     padding: 8px;
     box-sizing: border-box;
diff --git a/src/components/Organizations/AddUserToGroup/index.js b/src/components/Organizations/AddUserToGroup/index.js
index e19af108..ea57a533 100644
--- a/src/components/Organizations/AddUserToGroup/index.js
+++ b/src/components/Organizations/AddUserToGroup/index.js
@@ -86,7 +86,13 @@ export const AddUserToGroup = ({
                 <ReactSelect
                   className="select"
                   menuPortalTarget={document.body}
-                  styles={{ menuPortal: base => ({ ...base, zIndex: 9999, color: 'black' }) }}
+                  styles={{
+                    menuPortal: base => ({ ...base, zIndex: 9999, color: 'black', fontSize: '16px' }),
+                    placeholder: base => ({ ...base, fontSize: '16px' }),
+                    menu: base => ({ ...base, fontSize: '16px' }),
+                    option: base => ({ ...base, fontSize: '16px' }),
+                    singleValue: base => ({ ...base, fontSize: '16px' }),
+                  }}
                   aria-label="Role"
                   placeholder="Select role"
                   name="role"
diff --git a/src/components/Organizations/AddUserToGroupSelect/index.tsx b/src/components/Organizations/AddUserToGroupSelect/index.tsx
index 19c0b369..e4b9f3cc 100644
--- a/src/components/Organizations/AddUserToGroupSelect/index.tsx
+++ b/src/components/Organizations/AddUserToGroupSelect/index.tsx
@@ -88,7 +88,7 @@ const AddUserToGroupSelect: FC<Props> = ({ groups, newUserState, setNewUserState
             <h4>Add user to a group</h4>
             <div className="form-box">
               <label>
-              User Email: <span style={{ color: '#E30000' }}>*</span>
+                User Email: <span style={{ color: '#E30000' }}>*</span>
                 <input
                   className="inputEmail"
                   type="text"
@@ -104,7 +104,13 @@ const AddUserToGroupSelect: FC<Props> = ({ groups, newUserState, setNewUserState
                 <ReactSelect
                   className="select"
                   menuPortalTarget={document.body}
-                  styles={{ menuPortal: base => ({ ...base, zIndex: 9999, color: 'black' }) }}
+                  styles={{
+                    menuPortal: base => ({ ...base, zIndex: 9999, color: 'black', fontSize: '16px' }),
+                    placeholder: base => ({ ...base, fontSize: '16px' }),
+                    menu: base => ({ ...base, fontSize: '16px' }),
+                    option: base => ({ ...base, fontSize: '16px' }),
+                    singleValue: base => ({ ...base, fontSize: '16px' }),
+                  }}
                   aria-label="Group"
                   placeholder="Select group"
                   name="group"
@@ -123,7 +129,13 @@ const AddUserToGroupSelect: FC<Props> = ({ groups, newUserState, setNewUserState
                 <ReactSelect
                   className="select"
                   menuPortalTarget={document.body}
-                  styles={{ menuPortal: base => ({ ...base, zIndex: 9999, color: 'black' }) }}
+                  styles={{
+                    menuPortal: base => ({ ...base, zIndex: 9999, color: 'black', fontSize: '16px' }),
+                    placeholder: base => ({ ...base, fontSize: '16px' }),
+                    menu: base => ({ ...base, fontSize: '16px' }),
+                    option: base => ({ ...base, fontSize: '16px' }),
+                    singleValue: base => ({ ...base, fontSize: '16px' }),
+                  }}
                   aria-label="Role"
                   placeholder="Select role"
                   name="role"
diff --git a/src/components/Organizations/AddUserToOrganization/Styles.tsx b/src/components/Organizations/AddUserToOrganization/Styles.tsx
index 5892c97c..1831bb9c 100644
--- a/src/components/Organizations/AddUserToOrganization/Styles.tsx
+++ b/src/components/Organizations/AddUserToOrganization/Styles.tsx
@@ -23,7 +23,8 @@ export const NewUser = styled.div`
     min-height: 38px;
     border-color: hsl(0, 0%, 80%);
     font-family: 'source-code-pro', sans-serif;
-    font-size: 0.8125rem;
+    font-size: 16px;
+    line-height:24px;
     color: ${props => props.theme.texts.primary};
     padding: 8px;
     box-sizing: border-box;
diff --git a/src/components/Organizations/GroupMembers/index.js b/src/components/Organizations/GroupMembers/index.js
index 2427d86a..76905a5a 100644
--- a/src/components/Organizations/GroupMembers/index.js
+++ b/src/components/Organizations/GroupMembers/index.js
@@ -14,7 +14,14 @@ import gql from 'graphql-tag';
 import AddUserToGroup from '../AddUserToGroup';
 import { RoleSelect } from '../AddUserToGroup/Styles';
 import PaginatedTable from '../PaginatedTable/PaginatedTable';
-import { Footer, TableActions, TableWrapper } from '../SharedStyles';
+import {
+  AddButtonContent,
+  Footer,
+  RemoveModalHeader,
+  RemoveModalParagraph,
+  TableActions,
+  TableWrapper,
+} from '../SharedStyles';
 import { StyledGroupMembers } from './Styles';
 
 export const getLinkData = (userSlug, organizationSlug, organizationName) => ({
@@ -51,7 +58,15 @@ const ADD_GROUP_PROJECT_MUTATION = gql`
 /**
  * The primary list of members.
  */
-const GroupMembers = ({ members = [], groupName, organizationName, organizationId, orgProjects, projects, refetch }) => {
+const GroupMembers = ({
+  members = [],
+  groupName,
+  organizationName,
+  organizationId,
+  orgProjects,
+  projects,
+  refetch,
+}) => {
   const duRegex = new RegExp('^default-user@' + groupName.replace('project-', '') + '$', 'g');
 
   const [projectModalOpen, setProjectModalOpen] = useState(false);
@@ -195,10 +210,10 @@ const GroupMembers = ({ members = [], groupName, organizationName, organizationI
             />
 
             <Modal isOpen={projectModalOpen && selectedProject === project.id} onRequestClose={closeProjectModal}>
-              <h3 style={{ fontSize: '24px', lineHeight: '24px', paddingTop: '32px' }}>Are you sure?</h3>
-              <p style={{ fontSize: '16px', lineHeight: '24px' }}>
+              <RemoveModalHeader>Are you sure?</RemoveModalHeader>
+              <RemoveModalParagraph>
                 This action will delete this entry, you might not be able to get this back.
-              </p>
+              </RemoveModalParagraph>
 
               <Footer>
                 <Mutation mutation={REMOVE_GROUP_FROM_PROJECT} onError={e => console.error(e)}>
@@ -252,10 +267,10 @@ const GroupMembers = ({ members = [], groupName, organizationName, organizationI
 
         <div className="tableAction">
           <Button action={() => setAddUserModalOpen(true)}>
-            <span style={{ display: 'inline-flex', alignContent: 'center', gap: '10px' }}>
-              <span style={{ fontSize: '28px' }}>+</span>
-              <span style={{ fontSize: '16px', lineHeight: '24px' }}>User</span>
-            </span>
+            <AddButtonContent>
+              <span>+</span>
+              <span>User</span>
+            </AddButtonContent>
           </Button>
         </div>
 
@@ -283,10 +298,10 @@ const GroupMembers = ({ members = [], groupName, organizationName, organizationI
 
         <div className="tableAction">
           <Button action={() => setAddProjectModalOpen(true)}>
-            <span style={{ display: 'inline-flex', alignContent: 'center', gap: '10px' }}>
-              <span style={{ fontSize: '28px' }}>+</span>
-              <span style={{ fontSize: '16px', lineHeight: '24px' }}>Project</span>
-            </span>
+            <AddButtonContent>
+              <span>+</span>
+              <span>Project</span>
+            </AddButtonContent>
           </Button>
         </div>
 
@@ -321,7 +336,13 @@ const GroupMembers = ({ members = [], groupName, organizationName, organizationI
                       <ReactSelect
                         className="select"
                         menuPortalTarget={document.body}
-                        styles={{ menuPortal: base => ({ ...base, zIndex: 9999, color: 'black' }) }}
+                        styles={{
+                          menuPortal: base => ({ ...base, zIndex: 9999, color: 'black', fontSize: '16px' }),
+                          placeholder: base => ({ ...base, fontSize: '16px' }),
+                          menu: base => ({ ...base, fontSize: '16px' }),
+                          option: base => ({ ...base, fontSize: '16px' }),
+                          singleValue: base => ({ ...base, fontSize: '16px' }),
+                        }}
                         aria-label="project"
                         placeholder="Select a project..."
                         name="project"
diff --git a/src/components/Organizations/Groups/Styles.tsx b/src/components/Organizations/Groups/Styles.tsx
index c57b0d34..76a486ad 100644
--- a/src/components/Organizations/Groups/Styles.tsx
+++ b/src/components/Organizations/Groups/Styles.tsx
@@ -50,7 +50,8 @@ export const StyledGroups = styled.section`
     min-height: 38px;
     border-color: hsl(0, 0%, 80%);
     font-family: 'source-code-pro', sans-serif;
-    font-size: 0.8125rem;
+    font-size: 16px;
+    line-height:24px;
     color: #5f6f7a;
     padding: 8px;
     box-sizing: border-box;
diff --git a/src/components/Organizations/Groups/index.js b/src/components/Organizations/Groups/index.js
index 1f53cb6b..24aab3d3 100644
--- a/src/components/Organizations/Groups/index.js
+++ b/src/components/Organizations/Groups/index.js
@@ -11,7 +11,7 @@ import AddUserToGroup from '../AddUserToGroup';
 import NewGroup from '../NewGroup';
 import OrgHeader from '../Orgheader';
 import PaginatedTable from '../PaginatedTable/PaginatedTable';
-import { Footer, TableActions, Tag } from '../SharedStyles';
+import { Footer, RemoveModalHeader, RemoveModalParagraph, TableActions, Tag } from '../SharedStyles';
 import { DeleteButton, GroupsWrapper, StyledGroups } from './Styles';
 
 const DELETE_GROUP = gql`
@@ -133,10 +133,10 @@ const Groups = ({ groups = [], organizationId, organizationName, ableToAddGroup,
                   isOpen={modalStates.deleteGroup.open && modalStates.deleteGroup.current.name === i.name}
                   onRequestClose={() => modalAction('close', 'deleteGroup')}
                 >
-                  <h3 style={{ fontSize: '24px', lineHeight: '24px', paddingTop: '32px' }}>Are you sure?</h3>
-                  <p style={{ fontSize: '16px', lineHeight: '24px' }}>
+                  <RemoveModalHeader>Are you sure?</RemoveModalHeader>
+                  <RemoveModalParagraph>
                     This action will delete this entry, you might not be able to get this back.
-                  </p>
+                  </RemoveModalParagraph>
 
                   <Footer>
                     <Mutation mutation={DELETE_GROUP}>
diff --git a/src/components/Organizations/Manage/index.js b/src/components/Organizations/Manage/index.js
index 41a577e8..415811df 100644
--- a/src/components/Organizations/Manage/index.js
+++ b/src/components/Organizations/Manage/index.js
@@ -12,7 +12,7 @@ import gql from 'graphql-tag';
 import useSortableData from '../../../lib/withSortedItems';
 import AddUserToOrganization from '../AddUserToOrganization';
 import PaginatedTable from '../PaginatedTable/PaginatedTable';
-import { Footer, TableActions, Tag } from '../SharedStyles';
+import { AddButtonContent, Footer, RemoveModalHeader, RemoveModalParagraph, TableActions, Tag } from '../SharedStyles';
 import { StyledUsers } from '../Users/Styles';
 
 export const getLinkData = (userSlug, organizationSlug, organizationName) => ({
@@ -117,10 +117,10 @@ const Manage = ({ users = [], organization, organizationId, organizationName, re
               }}
             />
             <Modal isOpen={deleteUserModalOpen && selectedUser === user?.id} onRequestClose={closeUserModal}>
-              <h3 style={{ fontSize: '24px', lineHeight: '24px', paddingTop: '32px' }}>Are you sure?</h3>
-              <p style={{ fontSize: '16px', lineHeight: '24px' }}>
+              <RemoveModalHeader>Are you sure?</RemoveModalHeader>
+              <RemoveModalParagraph>
                 This action will delete this entry, you might not be able to get this back.
-              </p>
+              </RemoveModalParagraph>
 
               <Footer>
                 <Mutation mutation={DELETE_USER}>
@@ -187,10 +187,10 @@ const Manage = ({ users = [], organization, organizationId, organizationName, re
 
       <div style={{ width: '100px' }}>
         <Button action={() => setAddUserModalOpen(true)}>
-          <span style={{ display: 'inline-flex', alignContent: 'center', gap: '10px' }}>
-            <span style={{ fontSize: '28px' }}>+</span>
-            <span style={{ fontSize: '16px', lineHeight: '24px' }}>User</span>
-          </span>
+          <AddButtonContent>
+            <span>+</span>
+            <span>User</span>
+          </AddButtonContent>
         </Button>
       </div>
 
diff --git a/src/components/Organizations/NewGroup/index.js b/src/components/Organizations/NewGroup/index.js
index 625be7aa..64d55866 100644
--- a/src/components/Organizations/NewGroup/index.js
+++ b/src/components/Organizations/NewGroup/index.js
@@ -46,7 +46,8 @@ const StyledNewGroup = styled.div`
     min-height: 38px;
     border-color: hsl(0, 0%, 80%);
     font-family: 'source-code-pro', sans-serif;
-    font-size: 0.8125rem;
+    font-size: 16px;
+    line-height:24px;
     color: #000;
     background:#fff;
     padding: 8px;
diff --git a/src/components/Organizations/NewProject/index.js b/src/components/Organizations/NewProject/index.js
index 1ef613be..62bcb697 100644
--- a/src/components/Organizations/NewProject/index.js
+++ b/src/components/Organizations/NewProject/index.js
@@ -8,7 +8,7 @@ import withLogic from 'components/Organizations/NewProject/logic';
 import gql from 'graphql-tag';
 
 import { RoleSelect } from '../AddUserToGroup/Styles';
-import { Footer, StyledNotification, StyledNotificationWrapper } from '../SharedStyles';
+import { AddButtonContent, Footer, StyledNotification, StyledNotificationWrapper } from '../SharedStyles';
 
 const ADD_PROJECT_MUTATION = gql`
   mutation (
@@ -67,10 +67,10 @@ const OrgNewProject = ({
     <StyledNotificationWrapper>
       <div className="margins">
         <Button action={openModal}>
-          <span style={{ display: 'inline-flex', alignContent: 'center', gap: '10px' }}>
-            <span style={{ fontSize: '28px' }}>+</span>
-            <span style={{ fontSize: '16px', lineHeight: '24px' }}>Project</span>
-          </span>
+          <AddButtonContent>
+            <span>+</span>
+            <span>Project</span>
+          </AddButtonContent>
         </Button>
       </div>
       <Modal isOpen={open} onRequestClose={closeModal} contentLabel={`Confirm`} style={customStyles}>
@@ -134,8 +134,14 @@ const OrgNewProject = ({
                       Deploy Target: <span style={{ color: '#E30000' }}>*</span>
                       <RoleSelect>
                         <ReactSelect
-                          className='select'
-                          styles={{ menuPortal: base => ({ ...base, zIndex: 9999, color: 'black' }) }}
+                          className="select"
+                          styles={{
+                            menuPortal: base => ({ ...base, zIndex: 9999, color: 'black', fontSize: '16px' }),
+                            placeholder: base => ({ ...base, fontSize: '16px' }),
+                            menu: base => ({ ...base, fontSize: '16px' }),
+                            option: base => ({ ...base, fontSize: '16px' }),
+                            singleValue: base => ({ ...base, fontSize: '16px' }),
+                          }}
                           aria-label="Role"
                           placeholder="Select target..."
                           name="target"
diff --git a/src/components/Organizations/Notifications/AddNotifications.tsx b/src/components/Organizations/Notifications/AddNotifications.tsx
index 89b57715..c8590136 100644
--- a/src/components/Organizations/Notifications/AddNotifications.tsx
+++ b/src/components/Organizations/Notifications/AddNotifications.tsx
@@ -241,7 +241,13 @@ const AddNotification: FC<Props> = ({ modalOpen, organizationId, onNotificationA
               <ReactSelect
                 className="select"
                 menuPortalTarget={document.body}
-                styles={{ menuPortal: base => ({ ...base, zIndex: 9999, color: 'black' }) }}
+                styles={{
+                  menuPortal: base => ({ ...base, zIndex: 9999, color: 'black', fontSize: '16px' }),
+                  placeholder: base => ({ ...base, fontSize: '16px' }),
+                  menu: base => ({ ...base, fontSize: '16px' }),
+                  option: base => ({ ...base, fontSize: '16px' }),
+                  singleValue: base => ({ ...base, fontSize: '16px' }),
+                }}
                 aria-label="service"
                 placeholder="Select target"
                 name="service"
diff --git a/src/components/Organizations/Notifications/Styles.tsx b/src/components/Organizations/Notifications/Styles.tsx
index 502e2c45..54c38d85 100644
--- a/src/components/Organizations/Notifications/Styles.tsx
+++ b/src/components/Organizations/Notifications/Styles.tsx
@@ -218,7 +218,8 @@ export const StyledOrgNotifications = styled.div`
     min-height: 38px;
     border-color: hsl(0, 0%, 80%);
     font-family: 'roboto', sans-serif;
-    font-size: 0.8125rem;
+    font-size: 16px;
+    line-height:24px;
     color: #5f6f7a;
     padding: 8px;
     box-sizing: border-box;
diff --git a/src/components/Organizations/Notifications/index.js b/src/components/Organizations/Notifications/index.js
index 44645d29..caa6e03b 100644
--- a/src/components/Organizations/Notifications/index.js
+++ b/src/components/Organizations/Notifications/index.js
@@ -8,7 +8,7 @@ import RemoveNotificationConfirm from 'components/Organizations/RemoveNotificati
 import gql from 'graphql-tag';
 
 import OrgHeader from '../Orgheader';
-import { Footer, ModalChildren } from '../SharedStyles';
+import { AddButtonContent, Footer, ModalChildren } from '../SharedStyles';
 import AddNotifications from './AddNotifications';
 import { AddNotifButton, NameTagCol, StyledOrgNotifications } from './Styles';
 
@@ -768,10 +768,10 @@ const OrgNotifications = ({
       >
         <AddNotifButton>
           <Button action={() => setModalOpen(true)}>
-            <span style={{ display: 'inline-flex', alignContent: 'center', gap: '10px' }}>
-              <span style={{ fontSize: '28px' }}>+</span>
-              <span style={{ fontSize: '16px', lineHeight: '24px' }}>Notification</span>
-            </span>
+            <AddButtonContent>
+              <span>+</span>
+              <span>Notification</span>
+            </AddButtonContent>
           </Button>
         </AddNotifButton>
       </AddNotifications>
diff --git a/src/components/Organizations/Projects/Styles.tsx b/src/components/Organizations/Projects/Styles.tsx
index 8d4945a2..8956f0f8 100644
--- a/src/components/Organizations/Projects/Styles.tsx
+++ b/src/components/Organizations/Projects/Styles.tsx
@@ -68,7 +68,8 @@ export const StyledOrgProjects = styled.div`
     min-height: 38px;
     border-color: hsl(0, 0%, 80%);
     font-family: 'source-code-pro', sans-serif;
-    font-size: 0.8125rem;
+    font-size: 16px;
+    line-height:24px;
     color: #5f6f7a;
     padding: 8px;
     box-sizing: border-box;
diff --git a/src/components/Organizations/Projects/index.js b/src/components/Organizations/Projects/index.js
index 1a51a937..942cd785 100644
--- a/src/components/Organizations/Projects/index.js
+++ b/src/components/Organizations/Projects/index.js
@@ -7,10 +7,10 @@ import Modal from 'components/Modal';
 import ProjectGroupLink from 'components/link/Organizations/ProjectGroup';
 import gql from 'graphql-tag';
 
-import { CancelButton, DeleteButton, ModalFooter } from '../Groups/Styles';
+import { DeleteButton } from '../Groups/Styles';
 import NewProject from '../NewProject';
 import PaginatedTable from '../PaginatedTable/PaginatedTable';
-import { Footer, TableActions } from '../SharedStyles';
+import { Footer, RemoveModalHeader, RemoveModalParagraph, TableActions } from '../SharedStyles';
 import { StyledOrgProjects } from './Styles';
 
 const DELETE_PROJECT = gql`
@@ -84,10 +84,10 @@ const OrgProjects = ({ projects = [], organizationId, organizationName, refresh,
                 isOpen={modalState.open && modalState.current === project.name}
                 onRequestClose={() => setModalState({ open: false, current: null })}
               >
-                <h3 style={{ fontSize: '24px', lineHeight: '24px', paddingTop: '32px' }}>Are you sure?</h3>
-                <p style={{ fontSize: '16px', lineHeight: '24px' }}>
+                <RemoveModalHeader>Are you sure?</RemoveModalHeader>
+                <RemoveModalParagraph>
                   This action will delete this entry, you might not be able to get this back.
-                </p>
+                </RemoveModalParagraph>
 
                 <Footer>
                   <Mutation mutation={DELETE_PROJECT} onError={e => console.error(e)}>
diff --git a/src/components/Organizations/RemoveNotificationConfirm/index.js b/src/components/Organizations/RemoveNotificationConfirm/index.js
index 2ab6d8d3..6c3db0e3 100644
--- a/src/components/Organizations/RemoveNotificationConfirm/index.js
+++ b/src/components/Organizations/RemoveNotificationConfirm/index.js
@@ -5,7 +5,7 @@ import Button from 'components/Button';
 import Modal from 'components/Modal';
 import withLogic from 'components/Organizations/RemoveNotificationConfirm/logic';
 
-import { Footer } from '../SharedStyles';
+import { Footer, RemoveModalHeader, RemoveModalParagraph } from '../SharedStyles';
 
 /**
  * Confirms the removal of the specified email from group
@@ -17,10 +17,10 @@ export const RemoveNotificationConfirm = ({ removeName, onRemove, open, openModa
 
       <Modal isOpen={open} onRequestClose={closeModal} contentLabel={`Confirm removal`}>
         <React.Fragment>
-          <h3 style={{ fontSize: '24px', lineHeight: '24px', paddingTop: '32px' }}>Are you sure?</h3>
-          <p style={{ fontSize: '16px', lineHeight: '24px' }}>
+          <RemoveModalHeader>Are you sure?</RemoveModalHeader>
+          <RemoveModalParagraph>
             This action will delete this entry, you might not be able to get this back.
-          </p>
+          </RemoveModalParagraph>
           <Footer>
             <Button action={onRemove} variant="primary">
               Continue
diff --git a/src/components/Organizations/RemoveProjectGroupConfirm/index.js b/src/components/Organizations/RemoveProjectGroupConfirm/index.js
index e68686f4..524607ed 100644
--- a/src/components/Organizations/RemoveProjectGroupConfirm/index.js
+++ b/src/components/Organizations/RemoveProjectGroupConfirm/index.js
@@ -5,7 +5,7 @@ import Button from 'components/Button';
 import Modal from 'components/Modal';
 import withLogic from 'components/Organizations/RemoveProjectGroupConfirm/logic';
 
-import { Footer } from '../SharedStyles';
+import { Footer, RemoveModalHeader, RemoveModalParagraph } from '../SharedStyles';
 
 /**
  * Confirms the removal of the specified email from group
@@ -13,18 +13,14 @@ import { Footer } from '../SharedStyles';
 export const RemoveProjectGroupConfirm = ({ onRemove, open, openModal, closeModal }) => {
   return (
     <React.Fragment>
-      <Button
-        variant="red"
-        action={openModal}
-        icon={<DisconnectOutlined className="delete" />}
-      />
+      <Button variant="red" action={openModal} icon={<DisconnectOutlined className="delete" />} />
 
       <Modal isOpen={open} onRequestClose={closeModal} contentLabel={`Confirm removal`}>
         <React.Fragment>
-          <h3 style={{ fontSize: '24px', lineHeight: '24px', paddingTop: '32px' }}>Are you sure?</h3>
-          <p style={{ fontSize: '16px', lineHeight: '24px' }}>
+          <RemoveModalHeader>Are you sure?</RemoveModalHeader>
+          <RemoveModalParagraph>
             This action will delete this entry, you might not be able to get this back.
-          </p>
+          </RemoveModalParagraph>
 
           <Footer>
             <Button action={onRemove} variant="primary">
diff --git a/src/components/Organizations/RemoveUserConfirm/index.js b/src/components/Organizations/RemoveUserConfirm/index.js
index af62162b..1615fa3d 100644
--- a/src/components/Organizations/RemoveUserConfirm/index.js
+++ b/src/components/Organizations/RemoveUserConfirm/index.js
@@ -5,7 +5,7 @@ import Button from 'components/Button';
 import Modal from 'components/Modal';
 import withLogic from 'components/Organizations/RemoveUserConfirm/logic';
 
-import { Footer } from '../SharedStyles';
+import { Footer, RemoveModalHeader, RemoveModalParagraph } from '../SharedStyles';
 
 /**
  * Confirms the removal of the specified email from group
@@ -25,10 +25,10 @@ export const RemoveUserConfirm = ({ withText, onRemove, open, openModal, closeMo
 
       <Modal isOpen={open} onRequestClose={closeModal} contentLabel={`Confirm removal`}>
         <React.Fragment>
-          <h3 style={{ fontSize: '24px', lineHeight: '24px', paddingTop: '32px' }}>Are you sure?</h3>
-          <p style={{ fontSize: '16px', lineHeight: '24px' }}>
+          <RemoveModalHeader>Are you sure?</RemoveModalHeader>
+          <RemoveModalParagraph>
             This action will delete this entry, you might not be able to get this back.
-          </p>
+          </RemoveModalParagraph>
 
           <Footer>
             <Button
diff --git a/src/components/Organizations/SharedStyles.tsx b/src/components/Organizations/SharedStyles.tsx
index c4fa3a2f..42f5b62f 100644
--- a/src/components/Organizations/SharedStyles.tsx
+++ b/src/components/Organizations/SharedStyles.tsx
@@ -118,7 +118,8 @@ export const StyledNotification = styled.div`
     min-height: 38px;
     border-color: hsl(0, 0%, 80%);
     font-family: 'source-code-pro', sans-serif;
-    font-size: 0.8125rem;
+    font-size: 16px;
+    line-height: 24px;
     color: #000;
     background: #fff;
     padding: 8px;
@@ -347,7 +348,8 @@ export const ModalChildren = styled.div`
     min-height: 38px;
     border-color: hsl(0, 0%, 80%);
     font-family: 'source-code-pro', sans-serif;
-    font-size: 0.8125rem;
+    font-size: 16px;
+    line-height: 24px;
     color: #000;
     background: #fff;
     padding: 8px;
@@ -399,3 +401,26 @@ export const TableWrapper = styled.div`
     margin: 24px 0 36px 0;
   }
 `;
+
+export const RemoveModalHeader = styled.h3`
+  font-size: 24px;
+  line-height: 24px;
+  padding-top: 32px;
+`;
+export const RemoveModalParagraph = styled.p`
+  font-size: 16px;
+  line-height: 24px;
+`;
+
+export const AddButtonContent = styled.span`
+  display: inline-flex;
+  align-content: center;
+  gap: 10px;
+  & > span:nth-child(1) {
+    font-size: 28px;
+  }
+  & > span:nth-child(2) {
+    font-size: 16px;
+    line-height: 28px;
+  }
+`;
diff --git a/src/components/Organizations/User/Styles.tsx b/src/components/Organizations/User/Styles.tsx
index 2facbba8..a80ffc86 100644
--- a/src/components/Organizations/User/Styles.tsx
+++ b/src/components/Organizations/User/Styles.tsx
@@ -83,7 +83,8 @@ export const StyledUser = styled.section`
     min-height: 38px;
     border-color: hsl(0, 0%, 80%);
     font-family: 'source-code-pro', sans-serif;
-    font-size: 0.8125rem;
+    font-size: 16px;
+    line-height:24px;
     color: #5f6f7a;
     padding: 8px;
     box-sizing: border-box;
diff --git a/src/components/Organizations/User/index.tsx b/src/components/Organizations/User/index.tsx
index d267b830..07411565 100644
--- a/src/components/Organizations/User/index.tsx
+++ b/src/components/Organizations/User/index.tsx
@@ -9,7 +9,7 @@ import Modal from 'components/Modal';
 import gql from 'graphql-tag';
 
 import PaginatedTable from '../PaginatedTable/PaginatedTable';
-import { Footer, TableActions, TableWrapper } from '../SharedStyles';
+import { Footer, RemoveModalHeader, RemoveModalParagraph, TableActions, TableWrapper } from '../SharedStyles';
 import { StyledUser } from './Styles';
 
 type Group = {
@@ -122,10 +122,10 @@ const User: FC<UserProps> = ({ user, organizationName, organizationId, refetch }
               isOpen={groupModalOpen && selectedGroup === group?.id}
               onRequestClose={closeGroupModal}
             >
-              <h3 style={{ fontSize: '24px', lineHeight: '24px', paddingTop: '32px' }}>Remove user?</h3>
-              <p style={{ fontSize: '16px', lineHeight: '24px' }}>
+              <RemoveModalHeader>Remove user?</RemoveModalHeader>
+              <RemoveModalParagraph>
                 This action will remove this user from a group, you might not be able to get this back.
-              </p>
+              </RemoveModalParagraph>
 
               <Footer>
                 <Mutation<{
diff --git a/src/components/Organizations/Users/Styles.tsx b/src/components/Organizations/Users/Styles.tsx
index 94ced676..447760af 100644
--- a/src/components/Organizations/Users/Styles.tsx
+++ b/src/components/Organizations/Users/Styles.tsx
@@ -26,7 +26,7 @@ export const StyledUsers = styled.section`
   .firstName {
     font-family: 'source-code-pro', sans-serif;
     font-size: 1rem;
-    line-height:1.5rem;
+    line-height: 1.5rem;
     padding: 5px 10px 5px 10px;
     color: ${props => (props.theme.colorScheme === 'dark' ? color.grey : color.darkGrey)};
 
@@ -35,7 +35,7 @@ export const StyledUsers = styled.section`
   .lastName {
     font-family: 'source-code-pro', sans-serif;
     font-size: 1rem;
-    line-height:1.5rem;
+    line-height: 1.5rem;
     padding: 5px 10px 5px 10px;
     color: ${props => (props.theme.colorScheme === 'dark' ? color.grey : color.darkGrey)};
     font-weight: normal;
@@ -43,7 +43,7 @@ export const StyledUsers = styled.section`
   .email {
     font-family: 'source-code-pro', sans-serif;
     font-size: 1rem;
-    line-height:1.5rem;
+    line-height: 1.5rem;
     padding: 5px 10px 5px 10px;
     color: ${props => (props.theme.colorScheme === 'dark' ? color.grey : color.darkGrey)};
     font-weight: normal;
@@ -64,7 +64,7 @@ export const StyledUsers = styled.section`
   .projects {
     font-family: 'source-code-pro', sans-serif;
     font-size: 1rem;
-    line-height:1.5rem;
+    line-height: 1.5rem;
     padding: 5px 10px 5px 10px;
     color: ${props => (props.theme.colorScheme === 'dark' ? color.grey : color.darkGrey)};
     font-weight: normal;
@@ -80,7 +80,7 @@ export const StyledUsers = styled.section`
     border-color: hsl(0, 0%, 80%);
     font-family: 'source-code-pro', sans-serif;
     font-size: 1rem;
-    line-height:1.5rem;
+    line-height: 1.5rem;
     color: #5f6f7a;
     padding: 8px;
     box-sizing: border-box;
@@ -118,7 +118,7 @@ export const Header = styled.div`
     font-family: 'source-code-pro', sans-serif;
     font-size: 13px;
     font-size: 1rem;
-    line-height:1.5rem;
+    line-height: 1.5rem;
     line-height: 1.4;
     text-transform: uppercase;
     padding-left: 20px;
@@ -147,3 +147,15 @@ export const Header = styled.div`
     }
   }
 `;
+
+export const SkeletonWrapper = styled.div`
+  display: flex;
+  gap: 1rem;
+  padding-left: 2rem !important;
+  & > .customer {
+    width: 15%;
+    &:nth-child(3) {
+      width: 25%;
+    }
+  }
+`;
diff --git a/src/components/Organizations/Users/UsersSkeleton.tsx b/src/components/Organizations/Users/UsersSkeleton.tsx
index fb2cc1ef..4b2e30a5 100644
--- a/src/components/Organizations/Users/UsersSkeleton.tsx
+++ b/src/components/Organizations/Users/UsersSkeleton.tsx
@@ -2,7 +2,7 @@ import React, { FC } from 'react';
 import Skeleton from 'react-loading-skeleton';
 
 import OrgHeader from '../Orgheader';
-import { StyledUsers } from './Styles';
+import { SkeletonWrapper, StyledUsers } from './Styles';
 
 interface Props {
   title?: string;
@@ -11,38 +11,37 @@ interface Props {
 const UsersSkeleton: FC<Props> = ({ title }) => {
   const numberOfFields = typeof window !== 'undefined' ? Math.floor((window.innerHeight * 8) / 10 / 65) : 10;
 
-  const groupSkeleton = (index: number) => (
-    <div
-      key={`groupSkeleton-${index}`}
+  const usersSkeleton = (index: number) => (
+    <SkeletonWrapper
+      key={`usersSkeleton-${index}`}
       className="data-row"
-      style={{ display: 'flex', gap: '1rem', paddingLeft: '1rem' }}
     >
-      <div className="customer" style={{ width: '15%' }}>
+      <div className="customer">
         <Skeleton height={40} />
       </div>
-      <div className="customer" style={{ width: '15%' }}>
+      <div className="customer">
         <Skeleton height={40} />
       </div>
-      <div className="customer" style={{ width: '25%' }}>
+      <div className="customer">
         <Skeleton height={40} />
       </div>
-      <div className="customer" style={{ width: '15%' }}>
+      <div className="customer">
         <Skeleton height={40} />
       </div>
-      <div className="customer" style={{ width: '15%' }}>
+      <div className="customer">
         <Skeleton height={40} />
       </div>
-      <div className="customer" style={{ width: '15%' }}>
+      <div className="customer">
         <Skeleton height={40} />
       </div>
-    </div>
+    </SkeletonWrapper>
   );
   return (
     <>
       <OrgHeader headerText={title ? title : 'Users'} />
       <StyledUsers>
         <div className="data-table">
-          {[...Array<undefined>(numberOfFields)].map((_, index) => groupSkeleton(index))}
+          {[...Array<undefined>(numberOfFields)].map((_, index) => usersSkeleton(index))}
         </div>
       </StyledUsers>
     </>
diff --git a/src/components/Organizations/Users/index.js b/src/components/Organizations/Users/index.js
index 3254f891..8d67ee55 100644
--- a/src/components/Organizations/Users/index.js
+++ b/src/components/Organizations/Users/index.js
@@ -12,7 +12,7 @@ import gql from 'graphql-tag';
 import useSortableData from '../../../lib/withSortedItems';
 import AddUserToGroupSelect from '../AddUserToGroupSelect';
 import PaginatedTable from '../PaginatedTable/PaginatedTable';
-import { Footer, TableActions } from '../SharedStyles';
+import { AddButtonContent, Footer, RemoveModalHeader, RemoveModalParagraph, TableActions } from '../SharedStyles';
 import { StyledUsers } from './Styles';
 
 export const getLinkData = (userSlug, organizationSlug, organizationName) => ({
@@ -124,10 +124,10 @@ const Users = ({ users = [], organization, organizationId, organizationName, ref
               }}
             />
             <Modal isOpen={deleteUserModalOpen && selectedUser === user?.id} onRequestClose={closeUserModal}>
-              <h3 style={{ fontSize: '24px', lineHeight: '24px', paddingTop: '32px' }}>Remove user?</h3>
-              <p style={{ fontSize: '16px', lineHeight: '24px' }}>
+              <RemoveModalHeader>Remove user?</RemoveModalHeader>
+              <RemoveModalParagraph>
                 This action will remove this user from all groups, you might not be able to reverse this.
-              </p>
+              </RemoveModalParagraph>
 
               <Footer>
                 <Mutation mutation={DELETE_USER}>
@@ -196,10 +196,10 @@ const Users = ({ users = [], organization, organizationId, organizationName, ref
 
       <div style={{ width: '100px' }}>
         <Button action={() => setAddUserModalOpen(true)}>
-          <span style={{ display: 'inline-flex', alignContent: 'center', gap: '10px' }}>
-            <span style={{ fontSize: '28px' }}>+</span>
-            <span style={{ fontSize: '16px', lineHeight: '24px' }}>User</span>
-          </span>
+          <AddButtonContent>
+            <span>+</span>
+            <span>User</span>
+          </AddButtonContent>
         </Button>
       </div>
     </StyledUsers>

From 60a5e3bdc6b1f2b927ce5942bc8b14f1d783844d Mon Sep 17 00:00:00 2001
From: Davit <davedabyeet@gmail.com>
Date: Tue, 5 Sep 2023 17:23:55 +0400
Subject: [PATCH 3/3] disable deletion of default-users from the users table

---
 src/components/Organizations/Users/index.js | 95 +++++++++++----------
 1 file changed, 50 insertions(+), 45 deletions(-)

diff --git a/src/components/Organizations/Users/index.js b/src/components/Organizations/Users/index.js
index 8d67ee55..30f980f9 100644
--- a/src/components/Organizations/Users/index.js
+++ b/src/components/Organizations/Users/index.js
@@ -116,52 +116,57 @@ const Users = ({ users = [], organization, organizationId, organizationName, ref
                 <EyeOutlined className="edit" />
               </a>
             </Link>
-            <DeleteOutlined
-              className="delete"
-              onClick={() => {
-                setSelectedUser(user?.id);
-                setDeleteUserModalOpen(true);
-              }}
-            />
-            <Modal isOpen={deleteUserModalOpen && selectedUser === user?.id} onRequestClose={closeUserModal}>
-              <RemoveModalHeader>Remove user?</RemoveModalHeader>
-              <RemoveModalParagraph>
-                This action will remove this user from all groups, you might not be able to reverse this.
-              </RemoveModalParagraph>
-
-              <Footer>
-                <Mutation mutation={DELETE_USER}>
-                  {(removeUserFromOrganizationGroups, { error, data }) => {
-                    if (error) {
-                      return <div>{error.message}</div>;
-                    }
-                    if (data) {
-                      refetch().then(() => {
-                        return setDeleteUserModalOpen(false);
-                      });
-                    }
-                    return (
-                      <Button
-                        variant="primary"
-                        action={() => {
-                          removeUserFromOrganizationGroups({
-                            variables: {
-                              email: user?.email,
-                              organization: organization.id,
-                            },
-                          });
-                        }}
-                      >
-                        Continue
-                      </Button>
-                    );
+
+            {!user.email.startsWith('default-user') ? (
+              <>
+                <DeleteOutlined
+                  className="delete"
+                  onClick={() => {
+                    setSelectedUser(user?.id);
+                    setDeleteUserModalOpen(true);
                   }}
-                </Mutation>
-                <Button variant="ghost" action={closeUserModal}>
-                  Cancel
-                </Button>
-              </Footer>
-            </Modal>
+                />
+                <Modal isOpen={deleteUserModalOpen && selectedUser === user?.id} onRequestClose={closeUserModal}>
+                  <RemoveModalHeader>Remove user?</RemoveModalHeader>
+                  <RemoveModalParagraph>
+                    This action will remove this user from all groups, you might not be able to reverse this.
+                  </RemoveModalParagraph>
+
+                  <Footer>
+                    <Mutation mutation={DELETE_USER}>
+                      {(removeUserFromOrganizationGroups, { error, data }) => {
+                        if (error) {
+                          return <div>{error.message}</div>;
+                        }
+                        if (data) {
+                          refetch().then(() => {
+                            return setDeleteUserModalOpen(false);
+                          });
+                        }
+                        return (
+                          <Button
+                            variant="primary"
+                            action={() => {
+                              removeUserFromOrganizationGroups({
+                                variables: {
+                                  email: user?.email,
+                                  organization: organization.id,
+                                },
+                              });
+                            }}
+                          >
+                            Continue
+                          </Button>
+                        );
+                      }}
+                    </Mutation>
+                    <Button variant="ghost" action={closeUserModal}>
+                      Cancel
+                    </Button>
+                  </Footer>
+                </Modal>
+              </>
+            ) : null}
           </TableActions>
         );
       },