changes from review feedback

src/components/tooltip.tsx

@@ -43,7 +43,7 @@ export const TooltipButton: FC<{ text: string }> = ({ text }) => {
         aria-controls={isOpen ? panelId : undefined}
       >
         <span aria-hidden={true}>
-          <QuestionIcon w={13} h={13} />
+          <QuestionIcon w={13} h={13} opacity={0.5} />
         </span>
       </button>
       {isOpen && (

src/glossary.tsx

@@ -41,7 +41,7 @@ function Section({
           <CircledChevron
             w={40}
             h={40}
-            fillClass="fill-[#ebebeb] group-data-open:fill-color-action-primary"
+            fillClass="fill-grey-200 group-data-open:fill-color-action-primary"
             strokeClass="stroke-grey-900 group-data-open:stroke-color-text-primary-on-dark"
           />
         </span>
@@ -225,7 +225,8 @@ applied when you purchase the product in-person or online.`,
             'shadow-modal',
             'overflow-hidden',
           )}
-          // Prevent clicks on the body from closing the modal
+          // Prevent clicks on the modal itself from closing the modal -- only
+          // clicks on the background should close it.
           onClick={e => e.stopPropagation()}
           role="dialog"
           aria-labelledby={titleId}

src/icons.tsx

@@ -43,7 +43,7 @@ export const QuestionIcon: FC<
     width={w}
     height={h}
     viewBox="0 0 24 24"
-    opacity={opacity ?? '0.5'}
+    opacity={opacity ?? '1.0'}
     style={{ verticalAlign: 'text-top' }}
     fill="none"
     stroke="currentColor"

src/state-incentive-details.tsx

@@ -108,12 +108,7 @@ const formatIncentiveType = (payment_methods: IncentiveType[]) => {
     <div className="flex gap-1 items-center">
       {label}
       <span className="text-purple-500">
-        <QuestionIcon
-          aria-label={msg('Show glossary')}
-          w={10}
-          h={10}
-          opacity={1.0}
-        />
+        <QuestionIcon aria-label={msg('Show glossary')} w={10} h={10} />
       </span>
     </div>
   );

src/tooltip.tsx

@@ -98,7 +98,7 @@ export const TooltipButton: FC<{
         type="button"
         title={msg('More information', { desc: 'button caption' })}
       >
-        <QuestionIcon w={iconSize} h={iconSize} />
+        <QuestionIcon w={iconSize} h={iconSize} opacity={0.5} />
       </button>
     </SlTooltip>
   );