fix: use correct heading component for external inputs

measuredco · Oct 31, 2023 · 462266d · 462266d
1 parent 5425aad
commit 462266d
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/packages/core/components/ExternalInput/index.tsx b/packages/core/components/ExternalInput/index.tsx
@@ -4,6 +4,7 @@ import getClassNameFactory from "../../lib/get-class-name-factory";
 import { ExternalField } from "../../types/Config";
 import { Link } from "react-feather";
 import { Modal } from "../Modal";
+import { Heading } from "../Heading";
 
 const getClassName = getClassNameFactory("ExternalInput", styles);
 
@@ -90,7 +91,11 @@ export const ExternalInput = ({
         )}
       </div>
       <Modal onClose={() => setOpen(false)} isOpen={isOpen}>
-        <h2 className={getClassName("modalHeading")}>Select content</h2>
+        <div className={getClassName("masthead")}>
+          <Heading rank={2} size="xxl">
+            Select content
+          </Heading>
+        </div>
 
         {data.length ? (
           <div className={getClassName("modalTableWrapper")}>

diff --git a/packages/core/components/ExternalInput/styles.module.css b/packages/core/components/ExternalInput/styles.module.css
@@ -52,7 +52,7 @@
   margin-left: -1px;
 }
 
-.ExternalInput-modalHeading {
+.ExternalInput-masthead {
   background-color: white;
   padding: 32px 24px;
 }