From 4fcc3d7f1e3497885f14eb62f41615cb3280769d Mon Sep 17 00:00:00 2001 From: Herrera Date: Fri, 17 Jan 2025 15:46:47 -0800 Subject: [PATCH 1/2] PSP-9837 : UI UX Clean Up - Manage Tables (all the manage tables from the left side menu) - Create Buttons - move to the top --- .../contact/ContactManagerModal.tsx | 1 - .../ContactManagerView/ContactManagerView.tsx | 19 - .../ContactManagerView.test.tsx.snap | 3 - .../acquisition/list/AcquisitionListView.tsx | 30 +- .../list/FinancialCodeListView.tsx | 35 +- .../contacts/list/ContactListPage.tsx | 52 +-- .../ContactListView.test.tsx.snap | 325 ++++++++++-------- .../frontend/src/features/contacts/styles.ts | 16 + .../disposition/list/DispositionListView.tsx | 30 +- .../DispositionListView.test.tsx.snap | 273 ++++++++------- .../features/leases/list/LeaseListView.tsx | 30 +- .../__snapshots__/LeaseListView.test.tsx.snap | 257 +++++++------- .../projects/list/ProjectListView.tsx | 31 +- .../ProjectListView.test.tsx.snap | 199 ++++++----- .../research/list/ResearchListView.tsx | 30 +- .../ResearchListView.test.tsx.snap | 271 ++++++++------- 16 files changed, 909 insertions(+), 693 deletions(-) diff --git a/source/frontend/src/components/contact/ContactManagerModal.tsx b/source/frontend/src/components/contact/ContactManagerModal.tsx index d28af3a332..660f97c952 100644 --- a/source/frontend/src/components/contact/ContactManagerModal.tsx +++ b/source/frontend/src/components/contact/ContactManagerModal.tsx @@ -36,7 +36,6 @@ export const ContactManagerModal: React.FunctionComponent< { - const history = useHistory(); - const { hasClaim } = useKeycloakWrapper(); const { getContacts } = useApiContacts(); const initialFilter: IContactFilter = ( @@ -97,16 +88,6 @@ const ContactManagerView = ({ /> - - {showAddButton && hasClaim(Claims.CONTACT_ADD) && ( - - history.push('/contact/new')} className="m-4"> - -  Add New Contact - - - )} -
matches snapshot 1`] = `
-
- - Acquisition Files + +
+ + Acquisition Files +
+ {hasClaim(Claims.ACQUISITION_ADD) && ( + history.push('/mapview/sidebar/acquisition/new')}> + +  Create an Acquisition File + + )} + @@ -119,12 +130,7 @@ export const AcquisitionListView: React.FunctionComponent< - {hasClaim(Claims.ACQUISITION_ADD) && ( - history.push('/mapview/sidebar/acquisition/new')}> - -  Create an acquisition file - - )} + AcquisitionSearchResultModel.fromApi(a))} totalItems={totalItems} @@ -143,3 +149,11 @@ export const AcquisitionListView: React.FunctionComponent< }; export default AcquisitionListView; + +const FlexDiv = styled.div` + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + margin-bottom: 0.25rem; +`; diff --git a/source/frontend/src/features/admin/financial-codes/list/FinancialCodeListView.tsx b/source/frontend/src/features/admin/financial-codes/list/FinancialCodeListView.tsx index ed1689a7ce..fe826893c8 100644 --- a/source/frontend/src/features/admin/financial-codes/list/FinancialCodeListView.tsx +++ b/source/frontend/src/features/admin/financial-codes/list/FinancialCodeListView.tsx @@ -3,6 +3,7 @@ import React, { useCallback, useEffect, useMemo } from 'react'; import { Col, Row } from 'react-bootstrap'; import { FaPlus } from 'react-icons/fa'; import { useHistory } from 'react-router'; +import styled from 'styled-components'; import AdminIcon from '@/assets/images/admin-icon.svg?react'; import * as CommonStyled from '@/components/common/styles'; @@ -100,8 +101,23 @@ export const FinancialCodeListView: React.FC = () => { - - Financial Codes + +
+ + Financial Codes +
+ {hasRole(Roles.SYSTEM_ADMINISTRATOR) && ( + history.push('/admin/financial-code/new')}> + +  Add a Financial Code + + )} + @@ -110,12 +126,7 @@ export const FinancialCodeListView: React.FC = () => { - {hasRole(Roles.SYSTEM_ADMINISTRATOR) && ( - history.push('/admin/financial-code/new')}> - -  Create financial code - - )} + { }; export default FinancialCodeListView; + +const FlexDiv = styled.div` + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + margin-bottom: 0.25rem; +`; diff --git a/source/frontend/src/features/contacts/list/ContactListPage.tsx b/source/frontend/src/features/contacts/list/ContactListPage.tsx index 154c755935..db6d3af8a7 100644 --- a/source/frontend/src/features/contacts/list/ContactListPage.tsx +++ b/source/frontend/src/features/contacts/list/ContactListPage.tsx @@ -1,38 +1,50 @@ +import { FaPlus } from 'react-icons/fa'; +import { useHistory } from 'react-router'; import styled from 'styled-components'; import ContactIcon from '@/assets/images/contact-icon.svg?react'; -import { Scrollable as ScrollableBase } from '@/components/common/Scrollable/Scrollable'; import * as CommonStyled from '@/components/common/styles'; +import { StyledAddButton } from '@/components/common/styles'; import ContactManagerView from '@/components/contact/ContactManagerView/ContactManagerView'; +import Claims from '@/constants/claims'; +import useKeycloakWrapper from '@/hooks/useKeycloakWrapper'; + +import * as Styled from '../styles'; /** * Page that displays a list of contacts. */ export const ContactListPage = () => { + const history = useHistory(); + const { hasClaim } = useKeycloakWrapper(); + return ( - - + + - - Contacts + +
+ + Contacts +
+ {hasClaim(Claims.CONTACT_ADD) && ( + history.push('/contact/new')}> + +  Add a New Contact + + )} + - - - + + + ); }; -const StyledListPage = styled.div` +const FlexDiv = styled.div` display: flex; - flex-direction: column; - flex-grow: 1; - width: 100%; - font-size: 14px; - gap: 2.5rem; - padding: 0; -`; - -const StyledScrollable = styled(ScrollableBase)` - padding: 1.6rem 3.2rem; - width: 100%; + flex-direction: row; + justify-content: space-between; + align-items: center; + margin-bottom: 0.25rem; `; diff --git a/source/frontend/src/features/contacts/list/__snapshots__/ContactListView.test.tsx.snap b/source/frontend/src/features/contacts/list/__snapshots__/ContactListView.test.tsx.snap index 49c916a02e..a1d888d4af 100644 --- a/source/frontend/src/features/contacts/list/__snapshots__/ContactListView.test.tsx.snap +++ b/source/frontend/src/features/contacts/list/__snapshots__/ContactListView.test.tsx.snap @@ -14,7 +14,7 @@ exports[`Contact List View > matches snapshot 1`] = ` }
- .c14.btn { + .c15.btn { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -43,19 +43,19 @@ exports[`Contact List View > matches snapshot 1`] = ` cursor: pointer; } -.c14.btn .Button__value { +.c15.btn .Button__value { width: -webkit-max-content; width: -moz-max-content; width: max-content; } -.c14.btn:hover { +.c15.btn:hover { -webkit-text-decoration: underline; text-decoration: underline; opacity: 0.8; } -.c14.btn:focus { +.c15.btn:focus { outline-width: 2px; outline-style: solid; outline-color: #2E5DD7; @@ -63,31 +63,31 @@ exports[`Contact List View > matches snapshot 1`] = ` box-shadow: none; } -.c14.btn.btn-primary { +.c15.btn.btn-primary { color: #FFFFFF; background-color: #013366; } -.c14.btn.btn-primary:hover, -.c14.btn.btn-primary:active, -.c14.btn.btn-primary:focus { +.c15.btn.btn-primary:hover, +.c15.btn.btn-primary:active, +.c15.btn.btn-primary:focus { background-color: #1E5189; } -.c14.btn.btn-secondary { +.c15.btn.btn-secondary { color: #013366; background: none; border-color: #013366; } -.c14.btn.btn-secondary:hover, -.c14.btn.btn-secondary:active, -.c14.btn.btn-secondary:focus { +.c15.btn.btn-secondary:hover, +.c15.btn.btn-secondary:active, +.c15.btn.btn-secondary:focus { color: #FFFFFF; background-color: #013366; } -.c14.btn.btn-info { +.c15.btn.btn-info { color: #9F9D9C; border: none; background: none; @@ -95,66 +95,66 @@ exports[`Contact List View > matches snapshot 1`] = ` padding-right: 0.6rem; } -.c14.btn.btn-info:hover, -.c14.btn.btn-info:active, -.c14.btn.btn-info:focus { +.c15.btn.btn-info:hover, +.c15.btn.btn-info:active, +.c15.btn.btn-info:focus { color: var(--surface-color-primary-button-hover); background: none; } -.c14.btn.btn-light { +.c15.btn.btn-light { color: #FFFFFF; background-color: #606060; border: none; } -.c14.btn.btn-light:hover, -.c14.btn.btn-light:active, -.c14.btn.btn-light:focus { +.c15.btn.btn-light:hover, +.c15.btn.btn-light:active, +.c15.btn.btn-light:focus { color: #FFFFFF; background-color: #606060; } -.c14.btn.btn-dark { +.c15.btn.btn-dark { color: #FFFFFF; background-color: #474543; border: none; } -.c14.btn.btn-dark:hover, -.c14.btn.btn-dark:active, -.c14.btn.btn-dark:focus { +.c15.btn.btn-dark:hover, +.c15.btn.btn-dark:active, +.c15.btn.btn-dark:focus { color: #FFFFFF; background-color: #474543; } -.c14.btn.btn-danger { +.c15.btn.btn-danger { color: #FFFFFF; background-color: #CE3E39; } -.c14.btn.btn-danger:hover, -.c14.btn.btn-danger:active, -.c14.btn.btn-danger:focus { +.c15.btn.btn-danger:hover, +.c15.btn.btn-danger:active, +.c15.btn.btn-danger:focus { color: #FFFFFF; background-color: #CE3E39; } -.c14.btn.btn-warning { +.c15.btn.btn-warning { color: #FFFFFF; background-color: #FCBA19; border-color: #FCBA19; } -.c14.btn.btn-warning:hover, -.c14.btn.btn-warning:active, -.c14.btn.btn-warning:focus { +.c15.btn.btn-warning:hover, +.c15.btn.btn-warning:active, +.c15.btn.btn-warning:focus { color: #FFFFFF; border-color: #FCBA19; background-color: #FCBA19; } -.c14.btn.btn-link { +.c15.btn.btn-link { font-size: 1.6rem; font-weight: 400; color: var(--surface-color-primary-button-default); @@ -178,9 +178,9 @@ exports[`Contact List View > matches snapshot 1`] = ` text-decoration: underline; } -.c14.btn.btn-link:hover, -.c14.btn.btn-link:active, -.c14.btn.btn-link:focus { +.c15.btn.btn-link:hover, +.c15.btn.btn-link:active, +.c15.btn.btn-link:focus { color: var(--surface-color-primary-button-hover); -webkit-text-decoration: underline; text-decoration: underline; @@ -190,15 +190,15 @@ exports[`Contact List View > matches snapshot 1`] = ` outline: none; } -.c14.btn.btn-link:disabled, -.c14.btn.btn-link.disabled { +.c15.btn.btn-link:disabled, +.c15.btn.btn-link.disabled { color: #9F9D9C; background: none; pointer-events: none; } -.c14.btn:disabled, -.c14.btn:disabled:hover { +.c15.btn:disabled, +.c15.btn:disabled:hover { color: #9F9D9C; background-color: #EDEBE9; box-shadow: none; @@ -210,66 +210,66 @@ exports[`Contact List View > matches snapshot 1`] = ` cursor: not-allowed; } -.c14.Button .Button__icon { +.c15.Button .Button__icon { margin-right: 1.6rem; } -.c14.Button--icon-only:focus { +.c15.Button--icon-only:focus { outline: none; } -.c14.Button--icon-only .Button__icon { +.c15.Button--icon-only .Button__icon { margin-right: 0; } -.c21.c21.btn { +.c22.c22.btn { background-color: unset; border: none; } -.c21.c21.btn:hover, -.c21.c21.btn:focus, -.c21.c21.btn:active { +.c22.c22.btn:hover, +.c22.c22.btn:focus, +.c22.c22.btn:active { background-color: unset; outline: none; box-shadow: none; } -.c21.c21.btn svg { +.c22.c22.btn svg { -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } -.c21.c21.btn svg:hover { +.c22.c22.btn svg:hover { -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in; } -.c21.c21.btn.btn-primary svg { +.c22.c22.btn.btn-primary svg { color: #013366; } -.c21.c21.btn.btn-primary svg:hover { +.c22.c22.btn.btn-primary svg:hover { color: #013366; } -.c21.c21.btn.btn-light svg { +.c22.c22.btn.btn-light svg { color: var(--surface-color-primary-button-default); } -.c21.c21.btn.btn-light svg:hover { +.c22.c22.btn.btn-light svg:hover { color: #CE3E39; } -.c21.c21.btn.btn-info svg { +.c22.c22.btn.btn-info svg { color: var(--surface-color-primary-button-default); } -.c21.c21.btn.btn-info svg:hover { +.c22.c22.btn.btn-info svg:hover { color: var(--surface-color-primary-button-hover); } -.c11 { +.c12 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -282,7 +282,7 @@ exports[`Contact List View > matches snapshot 1`] = ` color: #42814A; } -.c7 { +.c8 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -294,13 +294,13 @@ exports[`Contact List View > matches snapshot 1`] = ` gap: 0.8rem; } -.c7 .form-label { +.c8 .form-label { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; } -.c15 { +.c16 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -319,21 +319,21 @@ exports[`Contact List View > matches snapshot 1`] = ` margin-left: 0.5rem; } -.c17 { +.c18 { width: 1.6rem; height: 1.6rem; } -.c16 { +.c17 { width: 1.6rem; height: 1.6rem; } -.c22 { +.c23 { margin-top: 0.3rem; } -.c23 { +.c24 { min-width: 5rem; max-width: 5rem; margin-left: 1rem; @@ -342,15 +342,15 @@ exports[`Contact List View > matches snapshot 1`] = ` padding: 0; } -.c23:-moz-read-only { +.c24:-moz-read-only { background: white; } -.c23:read-only { +.c24:read-only { background: white; } -.c6 { +.c7 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -360,7 +360,7 @@ exports[`Contact List View > matches snapshot 1`] = ` flex-wrap: nowrap; } -.c10 { +.c11 { -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; @@ -381,7 +381,7 @@ exports[`Contact List View > matches snapshot 1`] = ` margin-bottom: 2.4rem; } -.c5.form-group { +.c6.form-group { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -389,7 +389,7 @@ exports[`Contact List View > matches snapshot 1`] = ` margin-bottom: 0; } -.c5.form-group .radio-group { +.c6.form-group .radio-group { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -402,7 +402,7 @@ exports[`Contact List View > matches snapshot 1`] = ` column-gap: unset; } -.c5.form-group .radio-group .form-check { +.c6.form-group .radio-group .form-check { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -417,55 +417,46 @@ exports[`Contact List View > matches snapshot 1`] = ` justify-content: center; } -.c5.form-group .radio-group .form-check .form-check-input { +.c6.form-group .radio-group .form-check .form-check-input { margin-left: 0; } -.c5.form-group .radio-group .form-check-label { +.c6.form-group .radio-group .form-check-label { margin-left: 1rem; } -.c5 .form-label { +.c6 .form-label { margin-bottom: unset; } -.c12 { +.c13 { border-left: 1px solid white; font-size: 3.4rem; margin: 0 36px 0 36px; vertical-align: top; } -.c4 { +.c5 { background-color: #d9eaf7; border-radius: 0.4rem; padding: 1rem; max-width: 85%; } -.c13 { +.c14 { padding-right: 0rem; padding-left: 1rem; } -.c8 { +.c9 { max-width: 30em; } -.c9 { +.c10 { max-width: 25rem; } -.c1 { - width: 100%; - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - overflow-y: auto; -} - -.c20 { +.c21 { -webkit-box-pack: space-around; -webkit-justify-content: space-around; -ms-flex-pack: space-around; @@ -473,19 +464,33 @@ exports[`Contact List View > matches snapshot 1`] = ` width: 100%; } -.c18 { +.c19 { color: #606060; } -.c18.active { +.c19.active { color: #42814A; } -.c19 a { +.c20 a { font-weight: bold; color: #428bca !important; } +.c1 { + width: 100%; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + overflow-y: auto; +} + +.c2 { + padding: 1.6rem 3.2rem; + width: 100%; +} + .c0 { display: -webkit-box; display: -webkit-flex; @@ -499,18 +504,31 @@ exports[`Contact List View > matches snapshot 1`] = ` -ms-flex-positive: 1; flex-grow: 1; width: 100%; - font-size: 14px; gap: 2.5rem; padding: 0; } -.c2 { - padding: 1.6rem 3.2rem; - width: 100%; +.c4 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin-bottom: 0.25rem; } @media only screen and (max-width:1199px) { - .c4 { + .c5 { max-width: 50%; } } @@ -524,23 +542,29 @@ exports[`Contact List View > matches snapshot 1`] = `

- - - - - Contacts - +
+ + + + + Contacts + +
+

matches snapshot 1`] = ` >
matches snapshot 1`] = ` class="col-auto" >