INT - B-21687 - Inconsistent Design Multiple Tags

migrations/app/migrations_manifest.txt

@@ -1054,6 +1054,6 @@
 20241204155919_update_ordering_proc.up.sql
 20241204210208_retroactive_update_of_ppm_max_and_estimated_incentives_prd.up.sql
 20241210143143_redefine_mto_shipment_audit_table.up.sql
-20241217163231_update_duty_locations_bad_zips.up.sql
 20241216170325_update_nts_enum_name.up.sql
+20241217163231_update_duty_locations_bad_zips.up.sql
 20241217180136_add_AK_zips_to_zip3_distances.up.sql

src/components/CustomerHeader/index.module.scss

@@ -33,6 +33,9 @@
       display: flex;
       align-items: center;
     }
+    :global(.usa-tag) {
+      line-height: normal;
+    }
   }
   .verticalBar {
     color: $mm-periwinkle;

src/components/Office/DefinitionLists/PPMShipmentInfoList.jsx

@@ -238,33 +238,29 @@ const PPMShipmentInfoList = ({
   );
 
   const aoaPacketElement = (
-    <div>
+    <div className={styles.row}>
       <dt>AOA Packet</dt>
       <dd data-testid="aoaPacketDownload">
-        <p className={styles.downloadLink}>
-          <AsyncPacketDownloadLink
-            id={shipment?.ppmShipment?.id}
-            label="Download AOA Paperwork (PDF)"
-            asyncRetrieval={downloadPPMAOAPacket}
-            onFailure={onErrorModalToggle}
-          />
-        </p>
+        <AsyncPacketDownloadLink
+          id={shipment?.ppmShipment?.id}
+          label="Download AOA Paperwork (PDF)"
+          asyncRetrieval={downloadPPMAOAPacket}
+          onFailure={onErrorModalToggle}
+        />
       </dd>
     </div>
   );
 
   const paymentPacketElement = (
-    <div>
+    <div className={styles.row}>
       <dt>Payment Packet</dt>
       <dd data-testid="paymentPacketDownload">
-        <p className={styles.downloadLink}>
-          <AsyncPacketDownloadLink
-            id={shipment?.ppmShipment?.id}
-            label="Download Payment Packet (PDF)"
-            asyncRetrieval={downloadPPMPaymentPacket}
-            onFailure={onErrorModalToggle}
-          />
-        </p>
+        <AsyncPacketDownloadLink
+          id={shipment?.ppmShipment?.id}
+          label="Download Payment Packet (PDF)"
+          asyncRetrieval={downloadPPMPaymentPacket}
+          onFailure={onErrorModalToggle}
+        />
       </dd>
     </div>
   );

src/components/Office/EvaluationReportShipmentDisplay/EvaluationReportShipmentDisplay.jsx

@@ -53,13 +53,19 @@ const EvaluationReportShipmentDisplay = ({
             <h5>
               <label id={`shipment-display-label-${shipmentId}`}>{displayInfo.heading}</label>
             </h5>
-            {displayInfo.isDiversion && <Tag>diversion</Tag>}
-            {displayInfo.shipmentStatus === shipmentStatuses.CANCELED && <Tag className="usa-tag--red">canceled</Tag>}
-            {displayInfo.shipmentStatus === shipmentStatuses.DIVERSION_REQUESTED && <Tag>diversion requested</Tag>}
-            {displayInfo.shipmentStatus === shipmentStatuses.CANCELLATION_REQUESTED && (
-              <Tag>cancellation requested</Tag>
-            )}
-            {displayInfo.usesExternalVendor && <Tag>external vendor</Tag>}
+            <div>
+              {displayInfo.isDiversion && <Tag className="usa-tag--diversion">diversion</Tag>}
+              {displayInfo.shipmentStatus === shipmentStatuses.CANCELED && (
+                <Tag className="usa-tag--cancellation">canceled</Tag>
+              )}
+              {displayInfo.shipmentStatus === shipmentStatuses.DIVERSION_REQUESTED && (
+                <Tag className="usa-tag--diversion">diversion requested</Tag>
+              )}
+              {displayInfo.shipmentStatus === shipmentStatuses.CANCELLATION_REQUESTED && (
+                <Tag className="usa-tag--cancellation">cancellation requested</Tag>
+              )}
+              {displayInfo.usesExternalVendor && <Tag>external vendor</Tag>}
+            </div>
           </div>
           <h6 className={styles.headingShipmentID}>Shipment ID: {displayInfo.shipmentLocator}</h6>
           <FontAwesomeIcon className={styles.icon} icon={expandableIconClasses} onClick={handleExpandClick} />

src/components/Office/EvaluationReportShipmentDisplay/EvaluationReportShipmentDisplay.module.scss

@@ -92,14 +92,31 @@
       background-color: $error-light;
     }
 
+    .tagWrapper {
+      display: flex;
+      flex-wrap: wrap;
+      row-gap: .5rem;
+    }
+
     .headingTagWrapper {
       display: flex;
       align-items: center;
       flex-grow: 1;
+      flex-wrap: wrap;
+
       h5 {
         @include u-margin-top(0);
         @include u-margin-bottom(0);
       }
+
+      label {
+        @include u-margin-right(1);
+      }
+
+      :global(.usa-tag) {
+        display: inline-block;
+        line-height: normal;
+      }
     }
 
     :global(.usa-checkbox__label) {

src/components/Office/ShipmentDisplay/ShipmentDisplay.jsx

@@ -95,23 +95,25 @@ const ShipmentDisplay = ({
                   {displayInfo.heading}
                 </label>
               </h3>
-              <div>
+              <div className={styles.tagWrapper}>
                 {displayInfo.isActualExpenseReimbursement && (
                   <Tag data-testid="actualReimbursementTag">actual expense reimbursement</Tag>
                 )}
-                {displayInfo.isDiversion && <Tag>diversion</Tag>}
+                {displayInfo.isDiversion && <Tag className="usa-tag--diversion">diversion</Tag>}
                 {(displayInfo.shipmentStatus === shipmentStatuses.CANCELED ||
                   displayInfo.status === shipmentStatuses.CANCELED ||
                   displayInfo.ppmShipment?.status === ppmShipmentStatuses.CANCELED) && (
-                  <Tag className="usa-tag--red">canceled</Tag>
+                  <Tag className="usa-tag--cancellation">canceled</Tag>
+                )}
+                {displayInfo.shipmentStatus === shipmentStatuses.DIVERSION_REQUESTED && (
+                  <Tag className="usa-tag--diversion">diversion requested</Tag>
                 )}
-                {displayInfo.shipmentStatus === shipmentStatuses.DIVERSION_REQUESTED && <Tag>diversion requested</Tag>}
                 {displayInfo.shipmentStatus === shipmentStatuses.CANCELLATION_REQUESTED && (
-                  <Tag>cancellation requested</Tag>
+                  <Tag className="usa-tag--cancellation">cancellation requested</Tag>
                 )}
                 {displayInfo.usesExternalVendor && <Tag>external vendor</Tag>}
                 {displayInfo.ppmShipment?.status && (
-                  <Tag className={styles.ppmStatus} data-testid="ppmStatusTag">
+                  <Tag className="usa-tag--ppmStatus" data-testid="ppmStatusTag">
                     {ppmShipmentStatusLabels[displayInfo.ppmShipment?.status]}
                   </Tag>
                 )}

src/components/Office/ShipmentDisplay/ShipmentDisplay.module.scss

@@ -14,19 +14,21 @@
     @include u-padding(2);
 
     :global(.usa-tag) {
-      @include u-font-size('body', 3xs);
+      font-size: .88rem;
       background-color: $info-light;
-      &.ppmStatus {
-        @include u-font-size('body', 'sm');
-        background-color: $base-lightest;
-      }
     }
 
     :global(.usa-tag--red) {
       @include u-font-size('body', 3xs);
       background-color: $error-light;
     }
 
+    .tagWrapper {
+      display: flex;
+      flex-wrap: wrap;
+      row-gap: .5rem;
+    }
+
     .headingTagWrapper {
       display: flex;
       align-items: center;
@@ -103,6 +105,8 @@
     justify-content: flex-start;
     align-items: center;
     flex-wrap: wrap;
+    @include u-margin-bottom(.45rem);
+    row-gap: .45rem;
 
     label {
       @include u-margin-right(1);

src/components/Office/ShipmentHeading/ShipmentHeading.jsx

@@ -25,11 +25,13 @@ function ShipmentHeading({ shipmentInfo, handleShowCancellationModal, isMoveLock
           <span className={styles.marketCodeIndicator}>{shipmentInfo.marketCode}</span>
           {shipmentInfo.shipmentType}
         </h2>
-        {shipmentStatus === shipmentStatuses.CANCELED && <Tag className="usa-tag--red">canceled</Tag>}
-        {shipmentInfo.isDiversion && <Tag>diversion</Tag>}
-        {!shipmentInfo.isDiversion && shipmentStatus === shipmentStatuses.DIVERSION_REQUESTED && (
-          <Tag>diversion requested</Tag>
-        )}
+        <div>
+          {shipmentStatus === shipmentStatuses.CANCELED && <Tag className="usa-tag--cancellation">canceled</Tag>}
+          {shipmentInfo.isDiversion && <Tag className="usa-tag--diversion">diversion</Tag>}
+          {!shipmentInfo.isDiversion && shipmentStatus === shipmentStatuses.DIVERSION_REQUESTED && (
+            <Tag className="usa-tag--diversion">diversion requested</Tag>
+          )}
+        </div>
       </div>
       <div>
         <h4>#{shipmentInfo.shipmentLocator}</h4>
@@ -50,7 +52,7 @@ function ShipmentHeading({ shipmentInfo, handleShowCancellationModal, isMoveLock
             </Restricted>
           </Restricted>
         )}
-        {isCancellationRequested && <Tag>Cancellation Requested</Tag>}
+        {isCancellationRequested && <Tag className="usa-tag--cancellation">Cancellation Requested</Tag>}
       </div>
     </div>
   );

src/components/Office/ShipmentHeading/shipmentHeading.module.scss

@@ -46,13 +46,6 @@
       padding: 2px 8px;
       font-size: 13px;
     }
-
-    span {
-      background-color: $base-dark;
-      text-transform: uppercase;
-      border-radius: 2px;
-      color: #ffffff;
-    }
   }
 
   .marketCodeIndicator {

src/components/Office/ShipmentSITDisplay/ShipmentSITDisplay.jsx

@@ -162,8 +162,11 @@ const SitStatusTables = ({ shipment, sitExtensions, sitStatus, openModalButton,
   return (
     <>
       <div className={styles.title}>
-        <p>SIT (STORAGE IN TRANSIT){pendingSITExtension && <Tag>SIT EXTENSION REQUESTED</Tag>}</p>
-        {!pendingSITExtension && isConvertedToCustomerExpense && <Tag>Converted To Customer Expense</Tag>}
+        <p>
+          SIT (STORAGE IN TRANSIT){pendingSITExtension && <Tag>SIT EXTENSION REQUESTED</Tag>}
+          {!pendingSITExtension && isConvertedToCustomerExpense && <Tag>Converted To Customer Expense</Tag>}
+        </p>
+
         {sitStatus.currentSIT &&
           !pendingSITExtension &&
           showConvertToCustomerExpense &&

src/pages/Office/ServicesCounselingMoveDetails/ServicesCounselingMoveDetails.jsx

@@ -757,7 +757,7 @@ const ServicesCounselingMoveDetails = ({
                 </div>
               )}
             </Grid>
-            <Grid row col={12}>
+            <Grid row col={12} className={scMoveDetailsStyles.scFinancialReviewWrapper}>
               <Restricted to={permissionTypes.updateFinancialReviewFlag}>
                 <div className={scMoveDetailsStyles.scFinancialReviewContainer}>
                   <FinancialReviewButton

src/pages/Office/ServicesCounselingMoveDetails/ServicesCounselingMoveDetails.module.scss

@@ -25,9 +25,12 @@
     }
   }
 
+  .scFinancialReviewWrapper {
+    justify-content: end;
+  }
+
   .scFinancialReviewContainer {
     @include u-margin-top(1);
-    padding-left: 720px;
   }
 
   .scCancelMoveContainer {

src/setupProxy.js

@@ -1,19 +1,19 @@
 const { createProxyMiddleware } = require('http-proxy-middleware');
 
 module.exports = (app) => {
-  app.use(createProxyMiddleware('/api', { target: 'http://milmovelocal:8080/' }));
-  app.use(createProxyMiddleware('/internal', { target: 'http://milmovelocal:8080/' }));
-  app.use(createProxyMiddleware('/admin', { target: 'http://milmovelocal:8080/' }));
-  app.use(createProxyMiddleware('/ghc', { target: 'http://milmovelocal:8080/' }));
-  app.use(createProxyMiddleware('/prime', { target: 'http://milmovelocal:8080/' }));
-  app.use(createProxyMiddleware('/pptas', { target: 'http://milmovelocal:8080/' }));
-  app.use(createProxyMiddleware('/support', { target: 'http://milmovelocal:8080/' }));
-  app.use(createProxyMiddleware('/testharness', { target: 'http://milmovelocal:8080/' }));
-  app.use(createProxyMiddleware('/storage', { target: 'http://milmovelocal:8080/' }));
-  app.use(createProxyMiddleware('/devlocal-auth', { target: 'http://milmovelocal:8080/' }));
-  app.use(createProxyMiddleware('/auth/**', { target: 'http://milmovelocal:8080/' }));
-  app.use(createProxyMiddleware('/logout', { target: 'http://milmovelocal:8080/' }));
-  app.use(createProxyMiddleware('/downloads', { target: 'http://milmovelocal:8080/' }));
-  app.use(createProxyMiddleware('/debug/**', { target: 'http://milmovelocal:8080/' }));
-  app.use(createProxyMiddleware('/client/**', { target: 'http://milmovelocal:8080/' }));
+  app.use('/api', createProxyMiddleware({ target: 'http://milmovelocal:8080/api' }));
+  app.use('/internal', createProxyMiddleware({ target: 'http://milmovelocal:8080/internal' }));
+  app.use('/admin', createProxyMiddleware({ target: 'http://milmovelocal:8080/admin' }));
+  app.use('/ghc', createProxyMiddleware({ target: 'http://milmovelocal:8080/ghc' }));
+  app.use('/prime', createProxyMiddleware({ target: 'http://milmovelocal:8080/prime' }));
+  app.use('/pptas', createProxyMiddleware({ target: 'http://milmovelocal:8080/pptas' }));
+  app.use('/support', createProxyMiddleware({ target: 'http://milmovelocal:8080/support' }));
+  app.use('/testharness', createProxyMiddleware({ target: 'http://milmovelocal:8080/testharness' }));
+  app.use('/storage', createProxyMiddleware({ target: 'http://milmovelocal:8080/storage' }));
+  app.use('/devlocal-auth', createProxyMiddleware({ target: 'http://milmovelocal:8080/devlocal-auth' }));
+  app.use('/auth/**', createProxyMiddleware({ target: 'http://milmovelocal:8080/auth/**' }));
+  app.use('/logout', createProxyMiddleware({ target: 'http://milmovelocal:8080/logout' }));
+  app.use('/downloads', createProxyMiddleware({ target: 'http://milmovelocal:8080/downloads' }));
+  app.use('/debug/**', createProxyMiddleware({ target: 'http://milmovelocal:8080/debug/**' }));
+  app.use('/client/**', createProxyMiddleware({ target: 'http://milmovelocal:8080/client/**' }));
 };

src/shared/AsyncPacketDownloadLink/AsyncPacketDownloadLink.module.scss

@@ -10,7 +10,8 @@
   @include u-padding(0);
   border-width: 0px;
   outline: none !important;
-  height: 30px !important;
+  height: auto !important;
+  text-align: left;
 }
 
 :global(.usa-button).downloadButtonToLink:hover {

src/shared/styles/_overrides.scss

@@ -139,6 +139,7 @@
   color: $base-darkest;
   @include u-text('normal');
   vertical-align: middle;
+  border-radius: 2em;
   &--green {
     background-color: $success-light;
   }
@@ -191,6 +192,15 @@
     padding-top: 0px;
     height: 23px;
   }
+  &--ppmStatus {
+    background-color: $color-light-green !important;
+  }
+  &--diversion {
+    background-color: $color-gold !important;
+  }
+  &--cancellation {
+    background-color: $error-light !important;
+  }
 }
 
 //Alerts

src/shared/styles/colors.scss

@@ -62,6 +62,7 @@ $color-gray-light: #b2b2b2;
 $color-red: #cd3504;
 $color-blue: #005ea2;
 $color-blue-focus: #2491ff;
+$color-light-green: lightgreen;
 
 // border color
 $border-color: #dcdee0;

yarn.lock

@@ -12854,9 +12854,9 @@ [email protected]:
     big-integer "^1.6.16"
 
 nanoid@^3.3.6:
-  version "3.3.6"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.6.tgz#443380c856d6e9f9824267d960b4236ad583ea4c"
-  integrity sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==
+  version "3.3.8"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.8.tgz#b1be3030bee36aaff18bacb375e5cce521684baf"
+  integrity sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==
 
 napi-build-utils@^1.0.1:
   version "1.0.2"