match iframe text style to that of outside frame (#943)

NEAR-DevHub · Sep 27, 2024 · 23d372d · 23d372d
1 parent 854de35
commit 23d372d
Showing 1 changed file with 63 additions and 61 deletions.
diff --git a/instances/devhub.near/widget/devhub/components/molecule/SimpleMDEViewer.jsx b/instances/devhub.near/widget/devhub/components/molecule/SimpleMDEViewer.jsx
@@ -8,75 +8,77 @@ const code = `
     <html>
     <head>
       <meta charset="utf-8" />
+      <link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
+      <link rel="stylesheet" href="https://cdn.jsdelivr.net/highlight.js/latest/styles/github.min.css">
+      <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
       <style>
-        body {  
-          margin: 0;
-          overflow: ${height ? "auto" : "hidden"};
-          font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-          line-height:1.5;
-        }
+      body {  
+        margin: 0;
+        overflow: ${height ? "auto" : "hidden"};
+        font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+        line-height:1.5;
+        font-weight:300;
+        color:#212529;
+      }
 
-        blockquote {
-          margin: 1em 0;
-          padding-left: 1.5em;
-          border-left: 4px solid #ccc;
-          color: #666;
-          font-style: italic;
-          font-size: inherit;
-        }
+      blockquote {
+        margin: 1em 0;
+        padding-left: 1.5em;
+        border-left: 4px solid #ccc;
+        color: #666;
+        font-style: italic;
+        font-size: inherit;
+      }
 
-        .no-margin {
-          margin: 0px !important;
-        }
+      .no-margin {
+        margin: 0px !important;
+      }
 
-        h1, h2, h3, h4, h5, h6 {
-          font-weight:500;
-          margin-block:5px;
-        }
+      h1, h2, h3, h4, h5, h6 {
+        font-weight:500;
+        margin-block:5px;
+      }
 
-        p {
-          white-space: pre-wrap;
-        }
+      p {
+        white-space: pre-wrap;
+      }
 
-        img {
-          height: 200px;
-          object-fit:contain;
-          width: -webkit-fill-available;
-        }
+      img {
+        height: 200px;
+        object-fit:contain;
+        width: -webkit-fill-available;
+      }
 
-        table {
-          border: 1px solid #dee2e6;
-        }
-    
-        table th, table td {
-          padding: 0.75rem;
-          vertical-align: top;
-        }
+      table {
+        border: 1px solid #dee2e6;
+      }
+  
+      table th, table td {
+        padding: 0.75rem;
+        vertical-align: top;
+      }
 
-        table td {
-          border-top: 1px solid #dee2e6;
-        }
-        
-        table thead th {
-          vertical-align: bottom;
-          border-bottom: 2px solid #dee2e6;
-        }
-        
-        table tbody + tbody {
-          border-top: 2px solid #dee2e6;
-        }
-        
-        /* Zebra-striping */
-        tbody tr:nth-of-type(odd) {
-          background-color: rgba(0, 0, 0, 0.05);
-        }
+      table td {
+        border-top: 1px solid #dee2e6;
+      }
+      
+      table thead th {
+        vertical-align: bottom;
+        border-bottom: 2px solid #dee2e6;
+      }
+      
+      table tbody + tbody {
+        border-top: 2px solid #dee2e6;
+      }
+      
+      /* Zebra-striping */
+      tbody tr:nth-of-type(odd) {
+        background-color: rgba(0, 0, 0, 0.05);
+      }
 
-        ${embeddCSS}
-      </style>
-      <link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
-      <link rel="stylesheet" href="https://cdn.jsdelivr.net/highlight.js/latest/styles/github.min.css">
-      <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
-    </head> 
+      ${embeddCSS}
+    </style>
+      </head> 
     <body>
       <div id="content"></div>
       <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
@@ -86,7 +88,7 @@ const code = `
 
       function updateContent(content) {
         document.getElementById('content').innerHTML = marked.parse(content)
-  
+
         const newHeight = Math.max(
           document.body.scrollHeight,
           document.documentElement.scrollHeight,