style: 💄 updates styles and placement based on UX review

frontend/src/components/BudgetLineItems/ChangeIcons/DisabledChangeIcons.js

@@ -15,29 +15,29 @@ import icons from "../../../uswds/img/sprite.svg";
  * @returns {React.JSX.Element} - The rendered component.
  **/
 const DisabledChangeIcons = ({ duplicateIcon = true, handleDuplicateItem = () => {}, sendToReviewIcon = false }) => {
-    const classes = `text-primary height-2 width-2 margin-right-1 cursor-pointer usa-tooltip ${DISABLED_ICON_CLASSES}`;
+    const classes = `text-primary height-2 width-2 margin-right-1 cursor-pointer ${DISABLED_ICON_CLASSES}`;
     const rowId = React.useId();
     return (
         <div className="display-flex flex-align-center">
-            <>
+            <div
+                className="usa-tooltip"
+                title="Only team members listed on this agreement can edit or delete"
+                data-position="left"
+            >
                 <FontAwesomeIcon
                     id={`edit-${rowId}`}
                     data-cy="edit-row"
                     icon={faPen}
                     className={classes}
-                    title="cannot edit"
-                    data-position="top"
                 />
                 <FontAwesomeIcon
                     id={`delete-${rowId}`}
                     data-cy="delete-row"
                     data-testid="delete-row"
                     icon={faTrash}
-                    title="cannot delete"
-                    data-position="top"
                     className={classes}
                 />
-            </>
+            </div>
             {duplicateIcon && (
                 <FontAwesomeIcon
                     id={`duplicate-${rowId}`}

frontend/src/components/Layouts/TablePageLayout/TablePageLayout.js

@@ -34,7 +34,7 @@ export const TablePageLayout = ({
 }) => {
     return (
         <>
-            <div className="display-flex flex-align-center flex-justify margin-bottom-3">
+            <div className="display-flex flex-align-center flex-justify margin-bottom-205">
                 <h1 className="margin-0 text-brand-primary font-sans-2xl">{title}</h1>
                 <Link
                     to={buttonLink}
@@ -50,7 +50,7 @@ export const TablePageLayout = ({
                 </Link>
             </div>
             {TabsSection}
-            <div className="display-flex flex-justify margin-bottom-1">
+            <div className="display-flex flex-justify padding-y-1">
                 <div>
                     <h2 className="margin-0">{subtitle}</h2>
                     <p>{details}</p>

frontend/src/components/UI/FilterTags/FilterTagsWrapper.js

@@ -7,7 +7,7 @@
  */
 const FilterTagsWrapper = ({ children }) => {
     return (
-        <div className="display-flex flex-align-center flex-wrap padding-bottom-05">
+        <div className="display-flex flex-align-center flex-wrap padding-bottom-205">
             <span className="padding-right-205 text-base-dark font-serif-3xs line-height-sans-5 padding-top-05">
                 Filters Applied:
             </span>

frontend/src/components/UI/Header/Breadcrumb.jsx

@@ -17,9 +17,9 @@ const Breadcrumb = ({ currentName }) => {
         .map((match) => match.handle.crumb(match.data));
 
     return (
-        <section className="grid-container bg-white">
+        <section className="bg-white">
             <nav
-                className="usa-breadcrumb margin-right-2 padding-top-3 padding-bottom-4"
+                className="usa-breadcrumb margin-right-2 padding-y-3"
                 aria-label="Breadcrumbs"
             >
                 <ol className="usa-breadcrumb__list">

frontend/src/components/UI/Layouts/DefaultLayout/DefaultLayout.js

@@ -18,12 +18,12 @@ const DefaultLayout = ({ children, breadCrumbName }) => {
         <div className="bg-base-lightest">
             <div className="usa-overlay"></div>
             <Header />
-            {breadCrumbName ? <Breadcrumb currentName={breadCrumbName} /> : null}
-            {isAlertActive && <Alert />}
             <main
                 id="main-content"
                 className="grid-container bg-white padding-bottom-6"
             >
+                {breadCrumbName ? <Breadcrumb currentName={breadCrumbName} /> : null}
+                {isAlertActive && <Alert />}
                 {children}
             </main>
             <Footer />

frontend/src/components/UI/WizardSteps/StepCreateBudgetLines/StepCreateBudgetLines.jsx

@@ -356,10 +356,7 @@ export const StepCreateBudgetLines = ({
                         selectedProcurementShop={selectedProcurementShop}
                     />
                     <h2 className="font-sans-lg margin-top-3">Budget Line Details</h2>
-                    <p>
-                        Complete the information below to create new budget lines. Select Add Budget Line to create
-                        multiple budget lines.
-                    </p>
+                    <p>Complete the information below to create new budget lines.</p>
                 </>
             )}
             <CreateBudgetLinesForm

frontend/src/pages/agreements/approve/ApproveAgreement.jsx

@@ -1,15 +1,13 @@
 import App from "../../../App";
 import { useParams } from "react-router-dom";
 import ReviewAgreement from "../review";
-import Breadcrumb from "../../../components/UI/Header/Breadcrumb";
 
 export const ApproveAgreement = () => {
     const urlPathParams = useParams();
     const agreementId = parseInt(urlPathParams.id);
 
     return (
-        <App>
-            <Breadcrumb currentName={"Agreements"} />
+        <App breadCrumbName="Agreements">
             <ReviewAgreement agreement_id={agreementId} />
         </App>
     );

frontend/src/pages/agreements/details/Agreement.js

@@ -51,46 +51,44 @@ const Agreement = () => {
 
     return (
         <App breadCrumbName={agreement?.name}>
-            <>
-                <h1 className={`font-sans-2xl margin-0 text-brand-primary`}>{agreement.name}</h1>
-                <h2 className={`font-sans-3xs text-normal margin-top-1 margin-bottom-2`}>
-                    {agreement.research_project?.title}
-                </h2>
+            <h1 className={`font-sans-2xl margin-0 text-brand-primary`}>{agreement.name}</h1>
+            <h2 className={`font-sans-3xs text-normal margin-top-1 margin-bottom-2`}>
+                {agreement.research_project?.title}
+            </h2>
 
-                <div>
-                    <section className="display-flex flex-justify margin-top-3">
-                        <DetailsTabs
-                            agreementId={agreement.id}
-                            isEditMode={isEditMode}
-                            setIsEditMode={setIsEditMode}
-                        />
-                    </section>
+            <div>
+                <section className="display-flex flex-justify margin-top-3">
+                    <DetailsTabs
+                        agreementId={agreement.id}
+                        isEditMode={isEditMode}
+                        setIsEditMode={setIsEditMode}
+                    />
+                </section>
 
-                    <Routes>
-                        <Route
-                            path=""
-                            element={
-                                <AgreementDetails
-                                    agreement={agreement}
-                                    projectOfficer={projectOfficer}
-                                    isEditMode={isEditMode}
-                                    setIsEditMode={setIsEditMode}
-                                />
-                            }
-                        />
-                        <Route
-                            path="budget-lines"
-                            element={
-                                <AgreementBudgetLines
-                                    agreement={agreement}
-                                    isEditMode={isEditMode}
-                                    setIsEditMode={setIsEditMode}
-                                />
-                            }
-                        />
-                    </Routes>
-                </div>
-            </>
+                <Routes>
+                    <Route
+                        path=""
+                        element={
+                            <AgreementDetails
+                                agreement={agreement}
+                                projectOfficer={projectOfficer}
+                                isEditMode={isEditMode}
+                                setIsEditMode={setIsEditMode}
+                            />
+                        }
+                    />
+                    <Route
+                        path="budget-lines"
+                        element={
+                            <AgreementBudgetLines
+                                agreement={agreement}
+                                isEditMode={isEditMode}
+                                setIsEditMode={setIsEditMode}
+                            />
+                        }
+                    />
+                </Routes>
+            </div>
         </App>
     );
 };

frontend/src/pages/agreements/list/AgreementsList.jsx

@@ -4,7 +4,6 @@ import { useSearchParams } from "react-router-dom";
 import _ from "lodash";
 import App from "../../../App";
 import { useGetAgreementsQuery } from "../../../api/opsAPI";
-import Breadcrumb from "../../../components/UI/Header/Breadcrumb";
 import sortAgreements from "./utils";
 import AgreementsTable from "../../../components/Agreements/AgreementsTable";
 import AgreementTabs from "./AgreementsTabs";
@@ -170,8 +169,7 @@ export const AgreementsList = () => {
     }
 
     return (
-        <App>
-            <Breadcrumb currentName="Agreements" />
+        <App breadCrumbName="Agreements">
             <TablePageLayout
                 title="Agreements"
                 subtitle={myAgreementsUrl ? "My Agreements" : "All Agreements"}

frontend/src/pages/budgetLines/list/BLIFilterTags.jsx

@@ -8,7 +8,7 @@ import FilterTagsWrapper from "../../../components/UI/FilterTags/FilterTagsWrapp
  * @param {Object} props - The component props.
  * @param {Object} props.filters - The current filters.
  * @param {Function} props.setFilters - A function to call to set the filters.
- * @returns {JSX.Element} - The procurement shop select element.
+ * @returns {React.JSX.Element} - The procurement shop select element.
  */
 export const BLIFilterTags = ({ filters, setFilters }) => {
     const [tagsList, setTagsList] = useState([]);

frontend/src/pages/budgetLines/list/BudgetLineItemList.jsx

@@ -1,6 +1,5 @@
 import App from "../../../App";
 import { useGetAgreementsQuery, useGetBudgetLineItemsQuery, useGetCansQuery } from "../../../api/opsAPI";
-import Breadcrumb from "../../../components/UI/Header/Breadcrumb";
 import TablePageLayout from "../../../components/Layouts/TablePageLayout";
 import AllBudgetLinesTable from "../../../components/BudgetLineItems/AllBudgetLinesTable";
 import BLIFilterButton from "./BLIFilterButton";
@@ -48,8 +47,7 @@ export const BudgetLineItemList = () => {
     const budgetLinesWithCanAndAgreementName = addCanAndAgreementNameToBudgetLines(sortedBLIs, cans, agreements);
 
     return (
-        <App>
-            <Breadcrumb currentName={"Budget Lines"} />
+        <App breadCrumbName="Budget Lines">
             <TablePageLayout
                 title="Budget Lines"
                 subtitle={myBudgetLineItemsUrl ? "My Budget Lines" : "All Budget Lines"}

frontend/src/pages/cans/detail/CanDetail.jsx

@@ -6,7 +6,6 @@ import CANBudgetSummary from "../../../components/CANs/CANBudgetSummary/CANBudge
 import constants from "../../../constants";
 import App from "../../../App";
 import { setCan } from "./canDetailSlice";
-import Breadcrumb from "../../../components/UI/Header/Breadcrumb";
 
 const CanDetail = () => {
     const dispatch = useDispatch();
@@ -24,37 +23,31 @@ const CanDetail = () => {
     }, [dispatch, canId]);
 
     return (
-        <>
-            <App>
-                <Breadcrumb currentName={`${can.description}`} />
-                <h1>
-                    {can?.number} ({can?.nickname})
-                </h1>
-
-                <div className="grid-container">
-                    <div className="grid-row">
-                        <div className="grid-col">
-                            <h2>CAN description</h2>
-                            {can?.description}
-                            <h2>CAN purpose</h2>
-                            {can.purpose || constants.notFilledInText}
-                            <h2>Arrangement type</h2>
-                            {can?.arrangement_type?.name}
-                            <h2>Funding source</h2>
-                            {can.funding_source?.[0]?.nickname || constants.notFilledInText}
-                            <h2>OPRE point of contact</h2>
-                            {can.authorizer?.name}
-                            <h2>OPRE division</h2>
-                            {can.division || constants.notFilledInText}
-                        </div>
+        <App breadCrumbName={`${can.description}`}>
+            <h1>
+                {can?.number} ({can?.nickname})
+            </h1>
+            <div className="grid-row">
+                <div className="grid-col">
+                    <h2>CAN description</h2>
+                    {can?.description}
+                    <h2>CAN purpose</h2>
+                    {can.purpose || constants.notFilledInText}
+                    <h2>Arrangement type</h2>
+                    {can?.arrangement_type?.name}
+                    <h2>Funding source</h2>
+                    {can.funding_source?.[0]?.nickname || constants.notFilledInText}
+                    <h2>OPRE point of contact</h2>
+                    {can.authorizer?.name}
+                    <h2>OPRE division</h2>
+                    {can.division || constants.notFilledInText}
+                </div>
 
-                        <div className="grid-col">
-                            <CANBudgetSummary />
-                        </div>
-                    </div>
+                <div className="grid-col">
+                    <CANBudgetSummary />
                 </div>
-            </App>
-        </>
+            </div>
+        </App>
     );
 };
 

frontend/src/pages/researchProjects/detail/ResearchProjectDetail.jsx

@@ -4,8 +4,6 @@ import { useEffect } from "react";
 import App from "../../../App";
 import { getResearchProject } from "./getResearchProject";
 import { setResearchProject } from "./researchProjectSlice";
-
-import Breadcrumb from "../../../components/UI/Header/Breadcrumb";
 import Hero from "../../../components/UI/Hero/Hero";
 import HeroFooter from "../../../components/ResearchProjects/HeroFooter/HeroFooter";
 
@@ -31,8 +29,7 @@ const ResearchProjectDetail = () => {
     }, [dispatch, researchProjectId]);
 
     return (
-        <App>
-            <Breadcrumb currentName={researchProject.title} />
+        <App breadCrumbName={researchProject.title}>
             <Hero
                 entityName={researchProject.title}
                 // TODO: Set this to "Division" for now because ResearchProject can belong to multiple Portfolio/Divisions,