lots of stuff and things

components/Login/helpers/server-address.tsx

@@ -1,8 +1,10 @@
 import React, { useState } from "react";
 import _ from "lodash";
+import { useMutation } from "@tanstack/react-query";
 import { JellifyServer } from "../../../types/JellifyServer";
-import { H1, Input, Spacer, Spinner, XStack, ZStack } from "tamagui";
+import { Input, Spacer, Spinner, XStack, ZStack } from "tamagui";
 import { SwitchWithLabel } from "../../Global/helpers/switch-with-label";
+import { H1 } from "../../Global/helpers/text";
 import Button from "../../Global/helpers/button";
 import { http, https } from "../utils/constants";
 import { JellyfinInfo } from "../../../api/info";
@@ -11,7 +13,6 @@ import { getSystemApi } from "@jellyfin/sdk/lib/utils/api/system-api";
 import { SafeAreaView } from "react-native-safe-area-context";
 import Client from "../../../api/client";
 import { useAuthenticationContext } from "../provider";
-import { useMutation } from "@tanstack/react-query";
 
 export default function ServerAddress(): React.JSX.Element {
 

fonts.config.ts

@@ -1,4 +1,3 @@
-import { config } from "@tamagui/config/v3";
 import { createFont } from "tamagui";
 
 const aileronFace = {
@@ -7,7 +6,7 @@ const aileronFace = {
     300: { normal: 'Aileron-Light', italic: 'Aileron Light Italic' },
     400: { normal: 'Aileron-Regular', italic: 'Aileron Italic'} ,
     500: { normal: 'Aileron-Regular', italic: 'Aileron Italic' },
-    600: { normal: 'Aileron SemiBold', italic: 'Aileron SemiBold Italic' },
+    600: { normal: 'Aileron-SemiBold', italic: 'Aileron SemiBold Italic' },
     700: { normal: 'Aileron-Bold', italic: 'Aileron Bold Italic' },
     800: { normal: 'Aileron-Heavy', italic: 'Aileron Heavy Italic' },
     900: { normal: 'Aileron-Black', italic: 'Aileron-BlackItalic' }
@@ -15,18 +14,46 @@ const aileronFace = {
 
 export const bodyFont = createFont({
     family: "Aileron-Bold",
-    size: config.fonts.body.size,
-    lineHeight: config.fonts.body.lineHeight,
-    weight: config.fonts.body.weight,
-    letterSpacing: config.fonts.body.letterSpacing,
+    size: {
+        1: 12,
+        2: 14,
+        3: 15,    
+    },
+    lineHeight: {
+        1: 17,
+        2: 22,
+        3: 25
+    },
+    weight: {
+        4: '300',
+        6: '600'
+    },
+    letterSpacing: {
+        4: 0,
+        8: -1
+    },
     face: aileronFace
 })
 
 export const headingFont = createFont({
     family: "Aileron-Black",
-    size: config.fonts.heading.size,
-    lineHeight: config.fonts.heading.lineHeight,
-    weight: config.fonts.heading.weight,
-    letterSpacing: config.fonts.heading.letterSpacing,
+    size: {
+        1: 15,
+        2: 17,
+        3: 18,    
+    },
+    lineHeight: {
+        1: 20,
+        2: 25,
+        3: 30
+    },
+    weight: {
+        4: '600',
+        6: '900'
+    },
+    letterSpacing: {
+        4: 0,
+        8: -1
+    },
     face: aileronFace
 })

package.json

@@ -21,7 +21,7 @@
     "@react-navigation/native": "^7.0.14",
     "@react-navigation/native-stack": "^7.2.0",
     "@react-navigation/stack": "^7.1.1",
-    "@tamagui/config": "^1.115.5",
+    "@tamagui/config": "^1.123.5",
     "@tanstack/query-sync-storage-persister": "^5.66.0",
     "@tanstack/react-query": "^5.66.0",
     "@tanstack/react-query-persist-client": "^5.66.0",

tamagui.config.ts

@@ -1,6 +1,19 @@
-import { animations, tokens as TamaguiTokens, media, shorthands } from '@tamagui/config/v3'
-import { createTamagui, createTokens } from 'tamagui' // or '@tamagui/core'
 import { headingFont, bodyFont } from './fonts.config'
+import { media, shorthands, tokens as TamaguiTokens } from '@tamagui/config/v4';
+import { createTamagui, createTokens } from 'tamagui';
+import { createAnimations } from "@tamagui/animations-react-native"
+
+const animations = createAnimations({
+  bouncy: {
+    damping: 9,
+    mass: 0.9,
+    stiffness: 150,
+  },
+  lazy: {
+    damping: 18,
+    stiffness: 50,
+  },
+})
 
 const tokens = createTokens({
   ...TamaguiTokens,