style: ux review

HHS · Nov 14, 2024 · be30e0c · be30e0c
1 parent 62a9ab6
commit be30e0c
Show file tree

Hide file tree

Showing 14 changed files with 29 additions and 33 deletions.
diff --git a/frontend/src/components/BudgetLineItems/BLIStatusSummaryCard/BLIStatusSummaryCard.jsx b/frontend/src/components/BudgetLineItems/BLIStatusSummaryCard/BLIStatusSummaryCard.jsx
@@ -124,7 +124,7 @@ const BLIStatusSummaryCard = ({ budgetLines }) => {
 
     return (
         <RoundedBox
-            className="padding-y-205 padding-x-4 display-inline-block"
+            className="display-inline-block"
             dataCy="bli-status-summary-card"
         >
             <h3 className="margin-0 margin-bottom-3 font-12px text-base-dark text-normal">Budget Lines By Status</h3>

diff --git a/frontend/src/components/CANs/CANFundingCard/CANFundingCard.jsx b/frontend/src/components/CANs/CANFundingCard/CANFundingCard.jsx
@@ -61,7 +61,7 @@ const CANFundingCard = ({ can, pendingAmount, afterApproval }) => {
 
     return (
         <RoundedBox
-            className={"padding-y-205 padding-x-4 display-inline-block"}
+            className={"display-inline-block"}
             dataCy={`can-funding-summary-card-${canId}`}
             style={{ height: "14.5rem" }}
         >

diff --git a/...c/components/Portfolios/PortfolioFundingByBudgetStatus/PortfolioFundingByBudgetStatus.jsx b/...c/components/Portfolios/PortfolioFundingByBudgetStatus/PortfolioFundingByBudgetStatus.jsx
@@ -82,7 +82,7 @@ const PortfolioFundingByBudgetStatus = () => {
     };
 
     return (
-        <RoundedBox className=" padding-y-205 padding-x-4 display-inline-block">
+        <RoundedBox className="display-inline-block">
             <h3 className="margin-0 margin-bottom-3 font-12px text-base-dark text-normal">
                 FY {fiscalYear.value} Budget Status
             </h3>

diff --git a/frontend/src/components/Portfolios/ResearchProjects/ProjectsAndAgreements.jsx b/frontend/src/components/Portfolios/ResearchProjects/ProjectsAndAgreements.jsx
@@ -14,7 +14,7 @@ const ProjectsAndAgreements = ({ numOfResearchProjects = 3, numOfAdminAndSupport
     const numberOfAgreements = plannedAgreements + executingAgreements + obligatedAgreements;
 
     return (
-        <RoundedBox className="padding-y-205 padding-x-4 display-inline-block">
+        <RoundedBox className="display-inline-block">
             <div className="display-flex flex-justify">
                 {/* NOTE: left side */}
                 <article>

diff --git a/frontend/src/components/UI/Cards/BudgetCard/BigBudgetCard.jsx b/frontend/src/components/UI/Cards/BudgetCard/BigBudgetCard.jsx
@@ -37,7 +37,7 @@ const BigBudgetCard = ({ title, totalSpending, totalFunding }) => {
     return (
         <>
             <RoundedBox
-                className={`padding-y-205 padding-x-4 display-inline-block width-full`}
+                className="display-inline-block width-full"
                 id="big-budget-summary-card"
                 dataCy={`big-budget-summary-card`}
                 style={{ minHeight: "10.125rem" }}

diff --git a/frontend/src/components/UI/Cards/BudgetCard/BudgetCard.jsx b/frontend/src/components/UI/Cards/BudgetCard/BudgetCard.jsx
@@ -36,7 +36,7 @@ const BudgetCard = ({ title, totalSpending, totalFunding }) => {
 
     return (
         <RoundedBox
-            className={"padding-y-205 padding-x-4 display-inline-block"}
+            className="display-inline-block"
             dataCy={`budget-summary-card`}
             style={{ height: "14.5rem" }}
         >

diff --git a/frontend/src/components/UI/Cards/Card/Card.jsx b/frontend/src/components/UI/Cards/Card/Card.jsx
@@ -17,10 +17,9 @@ import RoundedBox from "../../RoundedBox";
 const Card = ({ title, children, dataCy = "", ...rest }) => {
     return (
         <RoundedBox
-            className={"display-inline-block"}
+            className="display-inline-block"
             dataCy={dataCy}
             data-testid={dataCy}
-            style={{ padding: "20px 30px 30px 30px" }}
             {...rest} // this is real trust 🧡
         >
             {title && <h3 className="margin-0 margin-bottom-3 font-12px text-base-dark text-normal">{title}</h3>}

diff --git a/frontend/src/components/UI/Cards/DonutGraphWithLegendCard/DonutGraphWithLegendCard.jsx b/frontend/src/components/UI/Cards/DonutGraphWithLegendCard/DonutGraphWithLegendCard.jsx
@@ -34,17 +34,12 @@ const DonutGraphWithLegendCard = ({ data, title, totalFunding }) => {
 
     return (
         <RoundedBox
-            className="padding-y-205 padding-x-4 display-inline-block"
+            className="display-inline-block"
             id="donut-graph-with-legend-card"
         >
             <h3 className="margin-0 margin-bottom-3 font-12px text-base-dark text-normal">{title}</h3>
-
             <div className="display-flex flex-justify">
-                <div
-                    className={
-                        totalFunding > 0 ? `${styles.widthLegend} maxw-card-lg font-12px` : "width-card-lg font-12px"
-                    }
-                >
+                <div className={totalFunding > 0 ? `${styles.widthLegend} font-12px` : "width-card-lg font-12px"}>
                     {data.map((item) => (
                         <LegendItem
                             key={item.id}
@@ -60,7 +55,7 @@ const DonutGraphWithLegendCard = ({ data, title, totalFunding }) => {
                 </div>
                 <div
                     id={`donutGraphWithLegendCard-${id}`}
-                    className="width-card height-card margin-top-neg-1 margin-left-2"
+                    className="width-card height-card margin-top-neg-05"
                     aria-label="This is a Donut Chart that displays the percent by budget line status in the center."
                     role="img"
                 >

diff --git a/frontend/src/components/UI/Cards/DonutGraphWithLegendCard/styles.module.css b/frontend/src/components/UI/Cards/DonutGraphWithLegendCard/styles.module.css
@@ -9,5 +9,5 @@
 }
 
 .widthLegend {
-    width: 12.5rem;
+    width: 14.375rem;
 }
diff --git a/frontend/src/components/UI/Cards/LineGraphWithLegendCard/LegendItem.jsx b/frontend/src/components/UI/Cards/LineGraphWithLegendCard/LegendItem.jsx
@@ -24,7 +24,7 @@ const LegendItem = ({ activeId, id, label, value, color, percent, tagStyleActive
 
     return (
         <div className="grid-row margin-top-2 font-12px">
-            <div className="grid-col-7">
+            <div className="grid-col-5">
                 <div className="display-flex flex-align-center">
                     <FontAwesomeIcon
                         icon={faCircle}
@@ -41,12 +41,12 @@ const LegendItem = ({ activeId, id, label, value, color, percent, tagStyleActive
                     </span>
                 </div>
             </div>
-            <div className="grid-col-4">
+            <div className="grid-col-5">
                 <CurrencyFormat
                     value={value}
                     displayType={"text"}
                     thousandSeparator={true}
-                    prefix={"$ "}
+                    prefix={"$"}
                     renderText={(value) => (
                         <span
                             className={isGraphActive ? "fake-bold" : ""}
@@ -57,7 +57,7 @@ const LegendItem = ({ activeId, id, label, value, color, percent, tagStyleActive
                     )}
                 />
             </div>
-            <div className="grid-col-1">
+            <div className="grid-col-2">
                 <Tag
                     tagStyle="darkTextWhiteBackground"
                     text={percent}

diff --git a/frontend/src/components/UI/Cards/ProjectAgreementBLICard/ProjectAgreementBLICard.jsx b/frontend/src/components/UI/Cards/ProjectAgreementBLICard/ProjectAgreementBLICard.jsx
@@ -54,15 +54,15 @@ const ProjectAgreementBLICard = ({ fiscalYear, projects, agreements, budgetLines
 
     return (
         <RoundedBox
-            className="padding-y-205 padding-x-4 display-inline-block"
+            className="display-inline-block"
             id="project-agreement-bli-card"
         >
             <div className="display-flex flex-justify">
                 <article>
                     <h3 className="margin-0 margin-bottom-3 font-12px text-base-dark text-normal">{projectHeading}</h3>
-                    <div className="display-flex flex-justify">
+                    <div>
                         <span className="font-sans-xl text-bold line-height-sans-1">{totalProjectCount}</span>
-                        <div className="display-flex flex-column margin-left-2 grid-gap">
+                        <div className="display-flex flex-column grid-gap margin-top-1">
                             {projects &&
                                 projects.length > 0 &&
                                 projects.map(({ type, count }, index) => (
@@ -82,9 +82,9 @@ const ProjectAgreementBLICard = ({ fiscalYear, projects, agreements, budgetLines
                     <h3 className="margin-0 margin-bottom-3 font-12px text-base-dark text-normal">
                         {agreementsHeading}
                     </h3>
-                    <div className="display-flex flex-justify">
+                    <div>
                         <span className="font-sans-xl text-bold line-height-sans-1">{totalAgreementsCount}</span>
-                        <div className="display-flex flex-column margin-left-2 grid-gap">
+                        <div className="display-flex flex-column grid-gap margin-top-1">
                             {agreements &&
                                 agreements.length > 0 &&
                                 agreements.map(({ type, count }, index) => (
@@ -104,9 +104,9 @@ const ProjectAgreementBLICard = ({ fiscalYear, projects, agreements, budgetLines
                     <h3 className="margin-0 margin-bottom-3 font-12px text-base-dark text-normal">
                         {budgetLinesHeading}
                     </h3>
-                    <div className="display-flex flex-justify">
+                    <div>
                         <span className="font-sans-xl text-bold line-height-sans-1">{totalBudgetLinesCount}</span>
-                        <div className="display-flex flex-column margin-left-2 grid-gap">
+                        <div className="display-flex flex-column grid-gap margin-top-1">
                             {budgetLines &&
                                 budgetLines.length > 0 &&
                                 budgetLines.map(({ type, count }, index) => (

diff --git a/frontend/src/components/UI/RoundedBox/RoundedBox.jsx b/frontend/src/components/UI/RoundedBox/RoundedBox.jsx
@@ -7,6 +7,7 @@ import cssClasses from "./styles.module.css";
  * @param {string} [props.className] - Additional CSS classes.
  * @param {string} [props.id] - Element ID.
  * @param {string} [props.dataCy] - Data attribute for Cypress tests.
+ * @param {Object} [props.style] - Inline styles.
  * @param {Object} [props.rest] - Additional props to be passed
  * @returns {JSX.Element} Rendered component.
  */
@@ -18,6 +19,7 @@ const RoundedBox = ({ children, className, dataCy, ...rest }) => {
             className={cardContainer}
             data-cy={dataCy}
             {...rest}
+            style={{ padding: "20px 30px", ...rest.style }}
         >
             {children}
         </div>

diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx
@@ -5,7 +5,7 @@ const Home = () => {
     return (
         <App>
             <div className="display-flex flex-justify-center">
-                <RoundedBox className="padding-x-2 margin-top-2 display-inline-block text-center">
+                <RoundedBox className="margin-top-4 display-inline-block text-center">
                     <h1>This is the OPRE OPS system prototype</h1>
                     <p>⚠️Tread with caution</p>
                 </RoundedBox>

diff --git a/frontend/src/pages/cans/detail/Can.jsx b/frontend/src/pages/cans/detail/Can.jsx
@@ -61,10 +61,10 @@ const Can = () => {
     const budgetLineTypesCount = getTypesCounts(budgetLineItemsByFiscalYear, "status");
     const testAgreements = [
         { type: "CONTRACT", count: 8 },
-        { type: "GRANT", count: 2 }
-        // { type: "DIRECT_ALLOCATION", count: 1 },
-        // { type: "IAA", count: 1 }
-        // { type: "MISCELLANEOUS", count: 1 }
+        { type: "GRANT", count: 2 },
+        { type: "DIRECT_ALLOCATION", count: 1 },
+        { type: "IAA", count: 1 },
+        { type: "MISCELLANEOUS", count: 1 }
     ];
 
     return (