PSP-7498: UI/UX Clean Up - Contacts - View

source/frontend/src/assets/scss/_variables.module.scss

@@ -17,6 +17,7 @@
   numberBackgroundColor: $number-background-color;
   dangerBackgroundColor: $danger-background-color;
   filterBoxColor: $filter-box-color;
+  filterBackgroundColor: $highlight-background-color;
   textWarningColor: $text-warning-color;
   linkColor: $link-color;
   linkHoverColor: $link-hover-color;

source/frontend/src/features/contacts/contact/Person/PersonSubForm.tsx

@@ -40,8 +40,6 @@ const PersonSubForm: React.FunctionComponent<React.PropsWithChildren<IPersonSubF
         <SectionField label="Preferred name">
           <Input field="preferredName" />
         </SectionField>
-      </Section>
-      <Section header="Organization">
         <SectionField label="Link to an existing organization">
           <AsyncTypeahead
             field="organization"

source/frontend/src/features/contacts/contact/create/Person/__snapshots__/CreatePersonForm.test.tsx.snap

@@ -402,27 +402,6 @@ exports[`CreatePersonForm > renders as expected 1`] = `
                 </div>
               </div>
             </div>
-          </div>
-        </div>
-        <div
-          class="c3 form-section"
-        >
-          <h2
-            class="c4"
-          >
-            <div
-              class="no-gutters row"
-            >
-              <div
-                class="col"
-              >
-                Organization
-              </div>
-            </div>
-          </h2>
-          <div
-            class="collapse show"
-          >
             <div
               class="pb-2 row"
             >

source/frontend/src/features/contacts/contact/create/__snapshots__/CreateContactContainer.test.tsx.snap

@@ -251,27 +251,6 @@ exports[`CreateContactContainer component > should render as expected 1`] = `
   padding-bottom: 0;
 }
 
-.c7 {
-  gap: 5rem;
-  background-color: white;
-  border-radius: 0.5rem;
-  margin: 1.5rem;
-  margin-right: 3rem;
-  padding: 1.5rem;
-}
-
-.c7 .form-check {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  padding-left: 2rem;
-}
-
 .c20 {
   float: right;
   cursor: pointer;
@@ -302,6 +281,27 @@ exports[`CreateContactContainer component > should render as expected 1`] = `
   font-weight: bold;
 }
 
+.c7 {
+  gap: 5rem;
+  background-color: white;
+  border-radius: 0.5rem;
+  margin: 1.5rem;
+  margin-right: 3rem;
+  padding: 1.5rem;
+}
+
+.c7 .form-check {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  padding-left: 2rem;
+}
+
 .c16 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -616,27 +616,6 @@ exports[`CreateContactContainer component > should render as expected 1`] = `
                     </div>
                   </div>
                 </div>
-              </div>
-            </div>
-            <div
-              class="c11 form-section"
-            >
-              <h2
-                class="c12"
-              >
-                <div
-                  class="no-gutters row"
-                >
-                  <div
-                    class="col"
-                  >
-                    Organization
-                  </div>
-                </div>
-              </h2>
-              <div
-                class="collapse show"
-              >
                 <div
                   class="pb-2 row"
                 >

source/frontend/src/features/contacts/contact/detail/ContactInfoSubForm.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { Col } from 'react-bootstrap';
 
 import { ContactMethodTypes } from '@/constants/contactMethodType';
@@ -35,12 +36,11 @@ const ContactInfoSubForm: React.FunctionComponent<
 
   return (
     <>
-      <Styled.H2Primary>Contact info</Styled.H2Primary>
       <Styled.RowAligned className="pb-4">
-        <Col md="2">
+        <Col md="3">
           <strong>Email:</strong>
         </Col>
-        <Col md="10">
+        <Col md="9">
           {emails.length === 0 && <span>N.A</span>}
           {emails.map((field: ContactInfoField, index: number) => (
             <Styled.RowAligned key={'contact-email-' + index}>
@@ -53,10 +53,10 @@ const ContactInfoSubForm: React.FunctionComponent<
         </Col>
       </Styled.RowAligned>
       <Styled.RowAligned>
-        <Col md="2">
+        <Col md="3">
           <strong>Phone:</strong>
         </Col>
-        <Col md="10">
+        <Col md="9">
           {phoneNumbers.length === 0 && <span>N.A</span>}
           {phoneNumbers.map((field: ContactInfoField, index: number) => (
             <Styled.RowAligned key={'contact-phone-' + index}>

source/frontend/src/features/contacts/contact/detail/Container.tsx

@@ -1,18 +1,19 @@
 import React from 'react';
-import { Col } from 'react-bootstrap';
-import { MdEdit } from 'react-icons/md';
+import { Col, Row } from 'react-bootstrap';
+import { FaEdit, FaWindowClose } from 'react-icons/fa';
+import { MdContactMail } from 'react-icons/md';
 import { useHistory } from 'react-router-dom';
 import styled from 'styled-components';
 
 import { StyledIconButton } from '@/components/common/buttons';
 import { ProtectedComponent } from '@/components/common/ProtectedComponent';
+import { H1 } from '@/components/common/styles';
 import { Claims } from '@/constants/claims';
 import { useContactDetail } from '@/features/contacts/hooks/useContactDetail';
 
-import { ContactBreadcrumb } from '../..';
 import * as Styled from '../../styles';
 import OrganizationView from './Organization';
-import PersonView from './Person';
+import PersonFormView from './Person';
 
 interface IContactViewContainerProps {
   match?: any;
@@ -24,28 +25,48 @@ const ContactViewContainer: React.FunctionComponent<
   const { contact } = useContactDetail(props?.match?.params?.id);
   const history = useHistory();
   return (
-    <ContactLayout>
-      <ContactBreadcrumb />
-      <Styled.RowAligned>
-        <Col>
-          <Styled.H1>Contact</Styled.H1>
-        </Col>
-        <Col md="auto" className="ml-auto">
-          <ProtectedComponent hideIfNotAuthorized claims={[Claims.CONTACT_EDIT]}>
-            <StyledIconButton
-              title="Edit Contact"
-              variant="light"
-              onClick={() => history.push(`/contact/${props?.match?.params?.id}/edit`)}
-            >
-              <MdEdit size={22} />
-            </StyledIconButton>
-          </ProtectedComponent>
-        </Col>
-      </Styled.RowAligned>
+    <>
+      <ContactLayout>
+        <Styled.RowAligned>
+          <Col>
+            <H1>
+              <Row>
+                <Col>
+                  <MdContactMail size={24} className="mr-2" />
+                  Contact
+                </Col>
+                <Col md={1} className="d-flex justify-content-end">
+                  <div className="btn">
+                    <FaWindowClose
+                      size={24}
+                      onClick={() => {
+                        history.push('/contact/list');
+                      }}
+                    />
+                  </div>
+                </Col>
+              </Row>
+            </H1>
+          </Col>
+        </Styled.RowAligned>
+        <Styled.RowAligned>
+          <Col md="auto" className="ml-auto">
+            <ProtectedComponent hideIfNotAuthorized claims={[Claims.CONTACT_EDIT]}>
+              <StyledIconButton
+                title="Edit Contact"
+                variant="light"
+                onClick={() => history.push(`/contact/${props?.match?.params?.id}/edit`)}
+              >
+                <FaEdit size={22} />
+              </StyledIconButton>
+            </ProtectedComponent>
+          </Col>
+        </Styled.RowAligned>
 
-      {contact?.person && <PersonView person={contact?.person} />}
-      {contact?.organization && <OrganizationView organization={contact?.organization} />}
-    </ContactLayout>
+        {contact?.person && <PersonFormView person={contact?.person} />}
+        {contact?.organization && <OrganizationView organization={contact?.organization} />}
+      </ContactLayout>
+    </>
   );
 };
 
@@ -55,6 +76,7 @@ const ContactLayout = styled.div`
   min-width: 30rem;
   overflow: auto;
   padding: 1rem;
+  background-color: ${props => props.theme.css.filterBackgroundColor};
 `;
 
 export default ContactViewContainer;

source/frontend/src/features/contacts/contact/detail/Organization.test.tsx

@@ -73,7 +73,7 @@ describe('Contact OrganizationView component', () => {
     const statusElement = component.getByTestId('contact-organization-status');
     expect(statusElement.textContent).toBe('ACTIVE');
 
-    const nameElement = component.getByTestId('contact-organization-fullname');
+    const nameElement = component.getByTestId('contact-organization-organizationName');
     expect(nameElement.textContent).toBe(testName);
 
     const aliasElement = component.getByTestId('contact-organization-alias');
@@ -335,7 +335,7 @@ describe('Contact OrganizationView component', () => {
       },
     });
 
-    const personElements = component.getAllByTestId('contact-organization-person');
+    const personElements = component.getAllByTestId(`contact-organization-person`);
     expect(personElements.length).toBe(3);
 
     // Verify that the display is in the correct order