fix(settings): mobile nav bar on imports page

Author: stijnvdkolk

src/components/settings/Nav.tsx

@@ -55,7 +55,7 @@ const NavBody: FC = () => (
       </NavGroup>
 
       <NavGroup title="Stats">
-        <SideNavItem href="/settings/imports">Import</SideNavItem>
+        <SideNavItem href="/settings/imports">Imports</SideNavItem>
       </NavGroup>
     </aside>
   </nav>

src/pages/settings/imports.tsx

@@ -22,6 +22,7 @@ import { MdFileUpload, MdWarning } from 'react-icons/md';
 import { BlobReader, TextWriter, ZipReader } from '@zip.js/zip.js';
 import { Button } from '@/components/Button';
 import { AccountLayout } from '@/components/settings/Layout';
+import { SettingsHeader } from '@/components/settings/SettingsHeader';
 
 export const getServerSideProps: GetServerSideProps<SSRProps> = async (ctx) => {
   const user = await fetchUser(ctx);
@@ -199,6 +200,20 @@ const Imports = () => {
   return (
     <div className="relative w-full">
       <Title>Imports</Title>
+      <SettingsHeader title="Imports" />
+
+      <p>
+        Check more about importing your lifetime streaming history{' '}
+        <a
+          className="text-primary hover:opacity-90"
+          href="https://support.stats.fm/docs/import"
+          target="blank"
+          onClick={() => event('IMPORT_guide_click')}
+        >
+          in the support documentation
+        </a>
+        .
+      </p>
       {importWarning?.asBoolean() && (
         <div className="my-8 w-full flex-row rounded-md border-l-4 border-l-yellow-400/80 bg-yellow-400/20 p-4">
           <div className="flex w-full flex-col">
@@ -212,19 +227,6 @@ const Imports = () => {
           </div>
         </div>
       )}
-      <h2>Imports</h2>
-      <p>
-        Check more about importing your lifetime streaming history{' '}
-        <a
-          className="text-primary hover:opacity-90"
-          href="https://support.stats.fm/docs/import"
-          target="blank"
-          onClick={() => event('IMPORT_guide_click')}
-        >
-          in the support documentation
-        </a>
-        .
-      </p>
       {user.isPlus ? (
         <>
           {importAvailable?.asBoolean() ? (