PSP-7499: UI/UX Clean Up - Contact List (#4118)

* PSP-7499 * Contact List spacing and icon changes --------- Co-authored-by: Alejandro Sanchez <[email protected]>
bcgov · Jun 19, 2024 · 20f45f6 · 20f45f6
1 parent a7ea55e
commit 20f45f6
Show file tree

Hide file tree

Showing 7 changed files with 808 additions and 698 deletions.
diff --git a/...c/components/contact/ContactManagerView/ContactFilterComponent/ContactFilterComponent.tsx b/...c/components/contact/ContactManagerView/ContactFilterComponent/ContactFilterComponent.tsx
@@ -2,13 +2,14 @@ import { Form, Formik } from 'formik';
 import React from 'react';
 import { Col, Row } from 'react-bootstrap';
 import { FaRegBuilding, FaRegUser } from 'react-icons/fa';
+import { FaCircle } from 'react-icons/fa';
 import styled from 'styled-components';
 
-import Active from '@/assets/images/active.svg?react';
 import { ResetButton, SearchButton } from '@/components/common/buttons';
 import ActiveFilterCheck from '@/components/common/form/ActiveFilterCheck';
 import { RadioGroup } from '@/components/common/form/RadioGroup';
 import { InlineInput } from '@/components/common/form/styles';
+import { VerticalBar } from '@/components/common/VerticalBar';
 import { IContactFilter } from '@/components/contact/ContactManagerView/IContactFilter';
 
 export const defaultFilter: IContactFilter = {
@@ -79,52 +80,66 @@ export const ContactFilterComponent: React.FunctionComponent<
                 radioValues={getRestrictedRadioValues(restrictContactType)}
               />
             </Col>
-            <Col>
-              <Row>
+            <Col xl="auto">
+              <Row className="ml-5">
                 <Col className="pl-0">
                   <StyledNameInput field="summary" placeholder="Name of person or organization" />
                 </Col>
-                <Col md="auto" className="pl-0">
-                  <StyledCityInput field="municipality" label="City" />
-                </Col>
-              </Row>
-            </Col>
-            <Col xs="auto">
-              <Row className="align-items-center">
-                <StyledColButton xs="auto">
-                  <SearchButton
-                    type="button"
-                    disabled={isSubmitting}
-                    onClick={() => {
-                      submitForm();
-                    }}
-                  />
-                </StyledColButton>
-                <StyledColButton xs="auto">
-                  <ResetButton
-                    type=""
-                    disabled={isSubmitting}
-                    onClick={() => {
-                      resetForm({ values: { ...defaultFilter, searchBy: values.searchBy } });
-                      resetFilter(values);
-                    }}
+                <Col className="pl-0">
+                  <StyledCityInput
+                    field="municipality"
+                    label="City"
+                    placeholder="City of contact's address"
                   />
-                </StyledColButton>
-
+                </Col>
                 <Col className="pl-0">
                   {showActiveSelector && (
                     <>
                       <ActiveFilterCheck<IContactFilter>
                         fieldName="activeContactsOnly"
                         setFilter={setFilter}
                       />
-                      <Active />
-                      <span>Show active contacts only</span>
+                      <ActiveIndicator>
+                        <FaCircle size={16} />
+                      </ActiveIndicator>
+                      <span>
+                        <b>Active</b> contacts only
+                      </span>
                     </>
                   )}
                 </Col>
               </Row>
             </Col>
+            <Col md="auto" className="ml-2">
+              <Row>
+                <Col className="pr-0" xs="auto">
+                  <VerticalBar />
+                </Col>
+                <Col>
+                  <Row>
+                    <StyledColButton xs="auto">
+                      <SearchButton
+                        type="button"
+                        disabled={isSubmitting}
+                        onClick={() => {
+                          submitForm();
+                        }}
+                      />
+                    </StyledColButton>
+                    <StyledColButton xs="auto">
+                      <ResetButton
+                        type=""
+                        disabled={isSubmitting}
+                        onClick={() => {
+                          resetForm({ values: { ...defaultFilter, searchBy: values.searchBy } });
+                          resetFilter(values);
+                        }}
+                      />
+                    </StyledColButton>
+                  </Row>
+                </Col>
+              </Row>
+            </Col>
           </Row>
         </StyledFilterBoxForm>
       )}
@@ -194,18 +209,25 @@ const StyledFilterBoxForm = styled(Form)`
   background-color: ${({ theme }) => theme.css.filterBoxColor};
   border-radius: 0.4rem;
   padding: 1rem;
-  max-width: 85em;
+  max-width: 85%;
 `;
 
 const StyledColButton = styled(Col)`
   padding-right: 0rem;
-  padding-left: 0rem;
+  padding-left: 1rem;
 `;
 
 export const StyledNameInput = styled(InlineInput)`
-  max-width: 32em;
+  max-width: 30em;
 `;
 
 export const StyledCityInput = styled(InlineInput)`
-  max-width: 20rem;
+  max-width: 25rem;
+`;
+
+export const ActiveIndicator = styled.div`
+  display: inline-block;
+  margin: 0rem 0.5rem;
+  padding: 0.2rem;
+  color: ${props => props.theme.bcTokens.iconsColorSuccess};
 `;