Merge pull request #156 from uselagoon/remnant-modal-bug

fix various issues
uselagoon · Sep 5, 2023 · fe21831 · fe21831
2 parents 5e1ec04 + 60a5e3b
commit fe21831
Show file tree

Hide file tree

Showing 26 changed files with 271 additions and 166 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 (
@@ -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"
@@ -114,7 +120,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/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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;