Updating headings

components/Home/component.tsx

@@ -1,6 +1,6 @@
 import { ScrollView, YStack } from "tamagui";
 import _ from "lodash";
-import { Heading } from "../helpers/text";
+import { H1 } from "../helpers/text";
 import RecentlyPlayed from "./helpers/recently-played";
 import { useApiClientContext } from "../jellyfin-api-provider";
 
@@ -12,7 +12,7 @@ export default function Home(): React.JSX.Element {
     return (
             <ScrollView paddingLeft={10}>
                 <YStack alignContent='flex-start'>
-                    <Heading>{`Hi, ${user!.name}`}</Heading>
+                    <H1>{`Hi, ${user!.name}`}</H1>
                     
                     <RecentlyPlayed />
                 </YStack>

components/Login/helpers/server-address.tsx

@@ -6,7 +6,7 @@ import { JellifyServer } from "../../../types/JellifyServer";
 import { useApiClientContext } from "../../jellyfin-api-provider";
 import { getTokens, Spacer, Spinner, View, XStack, ZStack } from "tamagui";
 import { SwitchWithLabel } from "../../helpers/switch-with-label";
-import { Heading } from "../../helpers/text";
+import { H1 } from "../../helpers/text";
 import Input from "../../helpers/input";
 import Button from "../../helpers/button";
 import { http, https } from "../utils/constants";
@@ -58,9 +58,9 @@ export default function ServerAddress(): React.JSX.Element {
 
     return (
         <View marginHorizontal={10} flex={1} justifyContent='center'>
-            <Heading>
+            <H1>
                 Connect to Jellyfin
-            </Heading>
+            </H1>
             <XStack>
                 <SwitchWithLabel 
                     checked={useHttps} 

components/Login/helpers/server-authentication.tsx

@@ -5,7 +5,7 @@ import _ from "lodash";
 import { JellyfinCredentials } from "../../../api/types/jellyfin-credentials";
 import { View, YStack } from "tamagui";
 import { useAuthenticationContext } from "../provider";
-import { Heading } from "../../helpers/text";
+import { H1 } from "../../helpers/text";
 import Button from "../../helpers/button";
 import Input from "../../helpers/input";
 
@@ -46,9 +46,9 @@ export default function ServerAuthentication(): React.JSX.Element {
 
     return (
         <View marginHorizontal={10} flex={1} justifyContent='center'>
-            <Heading>
+            <H1>
                 { `Sign in to ${server?.name ?? "Jellyfin"}`}
-            </Heading>
+            </H1>
             <Button
                 onPress={() => {
                     setServer(undefined);

components/Login/helpers/server-library.tsx

@@ -3,7 +3,7 @@ import React, { useEffect } from "react";
 import { useApiClientContext } from "../../jellyfin-api-provider";
 import { Spinner, Text, ToggleGroup, View } from "tamagui";
 import { useAuthenticationContext } from "../provider";
-import { Heading, Label } from "../../helpers/text";
+import { H1, Label } from "../../helpers/text";
 import Button from "../../helpers/button";
 import _ from "lodash";
 import { Api } from "@jellyfin/sdk";
@@ -43,7 +43,7 @@ export default function ServerLibrary(): React.JSX.Element {
 
     return (
         <View marginHorizontal={10} flex={1} justifyContent='center'>
-            <Heading>Select Music Library</Heading>
+            <H1>Select Music Library</H1>
 
             { isPending ? (
                 <Spinner />

components/helpers/text.tsx

@@ -1,4 +1,4 @@
-import { H1, SizeTokens, Label as TamaguiLabel } from "tamagui"
+import { H1 as TamaguiH1, SizeTokens, Label as TamaguiLabel } from "tamagui"
 
 interface LabelProps {
     htmlFor: string,
@@ -12,8 +12,8 @@ export function Label(props: LabelProps): React.JSX.Element {
     )
 }
 
-export function Heading({ children }: { children: string }): React.JSX.Element {
+export function H1({ children }: { children: string }): React.JSX.Element {
     return (
-        <H1 marginVertical={30} fontWeight={900}>{ children }</H1>
+        <TamaguiH1 marginVertical={30}>{ children }</TamaguiH1>
     )
 }