From 4da3d03dabdf0eb8fa88a08e8d20293c1ce5d75d Mon Sep 17 00:00:00 2001
From: freeman-lab <the.freeman.lab@gmail.com>
Date: Mon, 17 Jul 2023 13:25:57 -0400
Subject: [PATCH] fix box tag

---
 .../components/inline-secondary-code.js       | 11 ++++++++
 articles/climate-risk-assessments/index.md    | 25 +++++++++----------
 components/mdx/page-components.js             |  5 ++++
 3 files changed, 28 insertions(+), 13 deletions(-)
 create mode 100644 articles/climate-risk-assessments/components/inline-secondary-code.js

diff --git a/articles/climate-risk-assessments/components/inline-secondary-code.js b/articles/climate-risk-assessments/components/inline-secondary-code.js
new file mode 100644
index 00000000..8b0ae7af
--- /dev/null
+++ b/articles/climate-risk-assessments/components/inline-secondary-code.js
@@ -0,0 +1,11 @@
+import { Box } from 'theme-ui'
+
+const InlineSecondaryCode = ({ children }) => {
+  return (
+    <Box as='span' sx={{ fontFamily: 'mono', letterSpacing: 'mono' }}>
+      {children}
+    </Box>
+  )
+}
+
+export default InlineSecondaryCode
diff --git a/articles/climate-risk-assessments/index.md b/articles/climate-risk-assessments/index.md
index b5a44e14..31a7c23b 100644
--- a/articles/climate-risk-assessments/index.md
+++ b/articles/climate-risk-assessments/index.md
@@ -17,6 +17,8 @@ components:
     src: ./components/data-sources.js
   - name: FlowChart
     src: ./components/flow-chart.js
+  - name: InlineSecondaryCode
+    src: ./components/inline-secondary-code.js
 color: yellow
 ---
 
@@ -61,19 +63,16 @@ We synthesized participant feedback and learnings from the workshops into a conc
   <FigureCaption number={1}>
     The process and actors contributing to a climate-related financial risk
     assessment. Toggle between tabs to see the{' '}
-    <Box as='span' sx={{ '& :first-child': { color: 'secondary' } }}>
-      `INFORMATION`
-    </Box>{' '}
-    shared between communities, as well as their main{' '}
-    <Box as='span' sx={{ '& :first-child': { color: 'secondary' } }}>
-      `CONCERNS`
-    </Box>
-    . A solid arrow indicates an “effective” transfer of information that could be
-    confirmed by multiple actors (e.g., one community referenced using information
-    generated by a different community). A dashed arrow indicates that a participant
-    shared information but was unsure of its influence (e.g., in the case of risk
-    assessments influencing regulatory decisions), and a dashed circle denotes that
-    we were unable to confirm details about the kind of information being transferred.
+    <InlineSecondaryCode>INFORMATION</InlineSecondaryCode>
+    shared between communities, as well as their main
+    <InlineSecondaryCode>CONCERNS</InlineSecondaryCode>. A solid arrow indicates
+    an “effective” transfer of information that could be confirmed by multiple
+    actors (e.g., one community referenced using information generated by a
+    different community). A dashed arrow indicates that a participant shared
+    information but was unsure of its influence (e.g., in the case of risk
+    assessments influencing regulatory decisions), and a dashed circle denotes
+    that we were unable to confirm details about the kind of information being
+    transferred.
   </FigureCaption>
 </Figure>
 
diff --git a/components/mdx/page-components.js b/components/mdx/page-components.js
index 6b5ea771..f639d8ca 100644
--- a/components/mdx/page-components.js
+++ b/components/mdx/page-components.js
@@ -14,6 +14,11 @@ const components = {
         '../../articles/climate-risk-assessments/components/flow-chart.js'
       ).then((mod) => mod.FlowChart || mod.default)
     ),
+    InlineSecondaryCode: dynamic(() =>
+      import(
+        '../../articles/climate-risk-assessments/components/inline-secondary-code.js'
+      ).then((mod) => mod.InlineSecondaryCode || mod.default)
+    ),
   },
   'cdr-verification-explainer': {
     PathwayDiagram: dynamic(() =>