From 05be42097133f5d26415b170ab102b0cf515f0e9 Mon Sep 17 00:00:00 2001
From: Matt Ng <matt.ng@adhocteam.us>
Date: Thu, 19 May 2022 18:06:42 -0400
Subject: [PATCH] Header Hierarchy Jump on Catalog Import Page

Signed-off-by: Matt Ng <matt.ng@adhocteam.us>
---
 .changeset/violet-apples-repair.md                           | 5 +++++
 .../src/components/ImportInfoCard/ImportInfoCard.tsx         | 5 +++--
 2 files changed, 8 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/violet-apples-repair.md

diff --git a/.changeset/violet-apples-repair.md b/.changeset/violet-apples-repair.md
new file mode 100644
index 0000000000..8bf6a6c1c9
--- /dev/null
+++ b/.changeset/violet-apples-repair.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog-import': minor
+---
+
+Updated catalog import page text so they go in the correct hierarchy order
diff --git a/plugins/catalog-import/src/components/ImportInfoCard/ImportInfoCard.tsx b/plugins/catalog-import/src/components/ImportInfoCard/ImportInfoCard.tsx
index c879cbe998..339d71b476 100644
--- a/plugins/catalog-import/src/components/ImportInfoCard/ImportInfoCard.tsx
+++ b/plugins/catalog-import/src/components/ImportInfoCard/ImportInfoCard.tsx
@@ -54,6 +54,7 @@ export const ImportInfoCard = (props: ImportInfoCardProps) => {
   return (
     <InfoCard
       title="Register an existing component"
+      titleTypographyProps={{ component: 'h3' }}
       deepLink={{
         title: 'Learn more about the Software Catalog',
         link: 'https://backstage.io/docs/features/software-catalog/software-catalog-overview',
@@ -62,7 +63,7 @@ export const ImportInfoCard = (props: ImportInfoCardProps) => {
       <Typography variant="body2" paragraph>
         Enter the URL to your source code repository to add it to {appTitle}.
       </Typography>
-      <Typography variant="h6">Link to an existing entity file</Typography>
+      <Typography variant="h4">Link to an existing entity file</Typography>
       <Typography variant="subtitle2" color="textSecondary" paragraph>
         Example: <code>{exampleLocationUrl}</code>
       </Typography>
@@ -72,7 +73,7 @@ export const ImportInfoCard = (props: ImportInfoCardProps) => {
       </Typography>
       {hasGithubIntegration && (
         <>
-          <Typography variant="h6">
+          <Typography variant="h4">
             Link to a repository{' '}
             <Chip label="GitHub only" variant="outlined" size="small" />
           </Typography>