From 219c39da43d371d069320a6ba0c01b19ae604aee Mon Sep 17 00:00:00 2001
From: Luna McNulty <l.mcnulty@riseup.net>
Date: Thu, 25 Apr 2024 15:28:02 -0400
Subject: [PATCH] Use icon instead of text for checklists risk caret

---
 site/gatsby-site/src/components/checklists/RiskSection.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/site/gatsby-site/src/components/checklists/RiskSection.js b/site/gatsby-site/src/components/checklists/RiskSection.js
index b73239c24b..2ee9aa0775 100644
--- a/site/gatsby-site/src/components/checklists/RiskSection.js
+++ b/site/gatsby-site/src/components/checklists/RiskSection.js
@@ -20,6 +20,8 @@ import {
   faNoteSticky,
   faRotateLeft,
   faFilter,
+  faCaretRight,
+  faCaretDown,
 } from '@fortawesome/free-solid-svg-icons';
 
 export default function RiskSection({
@@ -71,6 +73,10 @@ export default function RiskSection({
     <RiskDetails open={open} generated={generated}>
       <RiskHeaderSummary generated={generated} onClick={toggleOpen}>
         <HeaderItemsGroup>
+          <FontAwesomeIcon
+            className={`text-xl ${generated ? 'text-gray-700' : 'text-red-700'}`}
+            icon={open ? faCaretDown : faCaretRight}
+          />
           <EditableLabel
             title={risk.title}
             onChange={(event) => debouncedUpdateRisk(risk, { title: event.target.value })}
@@ -339,8 +345,6 @@ const RiskDetails = (props) => (
     open:p-3 md:open:p-6 open:rounded
     cursor-pointer
 
-    [&[open]>summary]:before:content-['⏷']
-          [&>summary]:before:content-['⏵']
     [&[open]>summary]:before:w-4
           [&>summary]:before:w-4
     ${props.className || ''}