Ww datap 36 close hover state (#468)

* Adds conditionals to complaint detail body component for company response data * Adds pointer cursor to close button; changes SVG fill to @gray --------- Co-authored-by: Bill Whorton <>
cfpb · Oct 4, 2023 · 358879f · 358879f
1 parent ea8fe7b
commit 358879f
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 13 deletions.
diff --git a/src/components/ComplaintDetail/ComplaintDetailBody.js b/src/components/ComplaintDetail/ComplaintDetailBody.js
@@ -168,18 +168,30 @@ export const ComplaintDetailBody = ({ data, error, id }) => {
           <br />
         </div>
         <div className="card-right layout-column">
-          <h4 tabIndex="0">Timely response?</h4>
-          <CompanyTimely value={data.timely} />
-          <br />
-          <h4 tabIndex="0">Company response to consumer</h4>
-          <span className="body-copy" tabIndex="0">
-            {data.company_response}
-          </span>
-          <br />
-          <h4 tabIndex="0">Company public response</h4>
-          <span className="body-copy" tabIndex="0">
-            {data.company_public_response}
-          </span>
+          {!!data.timely && (
+            <>
+              <h4 tabIndex="0">Timely response?</h4>
+              <CompanyTimely value={data.timely} />
+              <br />
+            </>
+          )}
+          {!!data.company_response && (
+            <>
+              <h4 tabIndex="0">Company response to consumer</h4>
+              <span className="body-copy" tabIndex="0">
+                {data.company_response}
+              </span>
+              <br />
+            </>
+          )}
+          {!!data.company_public_response && (
+            <>
+              <h4 tabIndex="0">Company public response</h4>
+              <span className="body-copy" tabIndex="0">
+                {data.company_public_response}
+              </span>
+            </>
+          )}
         </div>
       </div>
     </article>

diff --git a/src/components/Warnings/Warning.less b/src/components/Warnings/Warning.less
@@ -4,8 +4,9 @@
     right: 0;
     top: 0;
     margin: 5px 10px;
+    cursor: pointer;
     svg {
-      fill: @pacific;
+      fill: @gray;
     }
   }
 }