feat: Styling

PolicyEngine · Sep 10, 2024 · a0f78b6 · a0f78b6
1 parent a1667c3
commit a0f78b6
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git a/src/layout/MarkdownFormatter.jsx b/src/layout/MarkdownFormatter.jsx
@@ -164,7 +164,7 @@ export function PlotlyChartCode({ data, backgroundColor }) {
   );
 }
 
-export function MarkdownFormatter({ markdown, backgroundColor, dict }) {
+export function MarkdownFormatter({ markdown, backgroundColor, dict, pSize }) {
   const displayCategory = useDisplayCategory();
   const mobile = displayCategory === "mobile";
   const renderers = {
@@ -197,7 +197,7 @@ export function MarkdownFormatter({ markdown, backgroundColor, dict }) {
           <p
             style={{
               fontFamily: "Roboto Serif",
-              fontSize: mobile ? 16 : 18,
+              fontSize: pSize ? pSize : mobile ? 16 : 18,
               backgroundColor: backgroundColor,
             }}
           >
@@ -243,7 +243,7 @@ export function MarkdownFormatter({ markdown, backgroundColor, dict }) {
               paddingLeft: 20,
               marginBottom: 20,
               fontFamily: "Roboto Serif",
-              fontSize: mobile ? 16 : 18,
+              fontSize: pSize ? pSize : mobile ? 16 : 18,
             }}
           >
             {children}
@@ -255,7 +255,7 @@ export function MarkdownFormatter({ markdown, backgroundColor, dict }) {
               paddingLeft: 20,
               marginBottom: 20,
               fontFamily: "Roboto Serif",
-              fontSize: mobile ? 16 : 18,
+              fontSize: pSize ? pSize : mobile ? 16 : 18,
             }}
           >
             {children}

diff --git a/src/modals/AISoftcodedModal.jsx b/src/modals/AISoftcodedModal.jsx
@@ -5,6 +5,7 @@ import { getExplainerAIPromptContent } from "../pages/household/output/explainer
 import { countryApiCall, asyncApiCall } from "../api/call";
 import useCountryId from "../hooks/useCountryId";
 import LoadingCentered from "../layout/LoadingCentered";
+import { MarkdownFormatter } from "../layout/MarkdownFormatter";
 
 // Note that depending on implementation, this may instead be a 
 // JSON object at runtime, requiring some form of parsing be written in
@@ -145,6 +146,7 @@ export default function AISoftcodedModal(props) {
     resetModalData();
 
 
+
   }, [isModalVisible, variable, value, fetchAI])
 
   return (
@@ -157,9 +159,13 @@ export default function AISoftcodedModal(props) {
             Close
           </Button>,
         ]}
+        width="50%"
       >
         {isLoading && <LoadingCentered />}
-        {analysis}
+        <MarkdownFormatter
+          markdown={analysis}
+          pSize={14}
+        />
       </Modal>
   )
 }