From 07c63c2b9cde99600e434057cd4e9e9fd0ea7b81 Mon Sep 17 00:00:00 2001
From: Violet Caulfield <violet@cosmonautical.cloud>
Date: Mon, 21 Oct 2024 13:32:48 -0500
Subject: [PATCH] styling input form

---
 components/Login/helpers/server-address.tsx |  9 ++++-----
 components/helpers/input.tsx                | 20 ++++++++++++++++++++
 components/helpers/text.tsx                 |  9 +++++----
 enums/assets/fonts.ts                       |  9 +++++++++
 4 files changed, 38 insertions(+), 9 deletions(-)
 create mode 100644 components/helpers/input.tsx
 create mode 100644 enums/assets/fonts.ts

diff --git a/components/Login/helpers/server-address.tsx b/components/Login/helpers/server-address.tsx
index 0fd0b449..cbd2a4f0 100644
--- a/components/Login/helpers/server-address.tsx
+++ b/components/Login/helpers/server-address.tsx
@@ -1,18 +1,17 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import _ from "lodash";
-import { useColorScheme } from "react-native";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import { useMutation } from "@tanstack/react-query";
 import { AsyncStorageKeys } from "../../../enums/async-storage-keys";
 import { JellifyServer } from "../../../types/JellifyServer";
 import { mutateServer, serverMutation } from "../../../api/mutators/functions/storage";
 import { useApiClientContext } from "../../jellyfin-api-provider";
-import { Button, Input, SizableText, useTheme, View, YStack, Stack, XStack, getFontSizeToken, Paragraph, H2 } from "tamagui";
-import { CheckboxWithLabel } from "../../helpers/checkbox-with-label";
+import { Button, useTheme, View, XStack } from "tamagui";
 import { SwitchWithLabel } from "../../helpers/switch-with-label";
 import { buildApiClient } from "../../../api/client";
 import { useAuthenticationContext } from "../provider";
 import { Heading } from "../../helpers/text";
+import Input from "../../helpers/input";
 
 const http = "http://"
 const https = "https://"
@@ -67,8 +66,8 @@ export default function ServerAddress(): React.JSX.Element {
                     label="HTTPS" 
                     size="$2"
                     width={150} />
+                
                 <Input 
-                    flexGrow={1}
                     placeholder="jellyfin.org"
                     onChangeText={setServerAddress} />
             </XStack>
diff --git a/components/helpers/input.tsx b/components/helpers/input.tsx
new file mode 100644
index 00000000..829fcd9e
--- /dev/null
+++ b/components/helpers/input.tsx
@@ -0,0 +1,20 @@
+import React, { SetStateAction } from 'react';
+import { Input as TamaguiInput} from 'tamagui';
+import { styles } from './text';
+
+interface InputProps {
+    onChangeText: React.Dispatch<SetStateAction<string | undefined>>,
+    placeholder: string
+}
+
+export default function Input(props: InputProps): React.JSX.Element {
+
+    return (
+        <TamaguiInput 
+            style={styles.text}
+            flexGrow={1}
+            placeholder={props.placeholder}
+            onChangeText={props.onChangeText} 
+        />
+    )
+}
\ No newline at end of file
diff --git a/components/helpers/text.tsx b/components/helpers/text.tsx
index 1e7ee12e..2c3782e1 100644
--- a/components/helpers/text.tsx
+++ b/components/helpers/text.tsx
@@ -1,15 +1,16 @@
 import { StyleSheet } from "react-native"
 import { H1, SizeTokens, Label as TamaguiLabel } from "tamagui"
+import { Fonts } from '../../enums/assets/fonts';
 
-const styles = StyleSheet.create({
+export const styles = StyleSheet.create({
     heading: {
-        fontFamily: 'Aileron-Black'
+        fontFamily: Fonts.Black
     },
     label: {
-        fontFamily: 'Aileron-SemiBold'
+        fontFamily: Fonts.Heavy
     },
     text: {
-        fontFamily: 'Aileron-Regular'
+        fontFamily: Fonts.Regular
     },
 });
 
diff --git a/enums/assets/fonts.ts b/enums/assets/fonts.ts
new file mode 100644
index 00000000..5c5ddaa2
--- /dev/null
+++ b/enums/assets/fonts.ts
@@ -0,0 +1,9 @@
+export enum Fonts {
+    Black = "Aileron-Black",
+    BlackItalic = "Aileron-BlackItalic",
+    Bold = "Aileron-Bold",
+    BoldItalic = "Aileron-BoldItalic",
+    Heavy = "Aileron-Heavy",
+    HeavyItalic = "Aileron-HeavyItalic",
+    Regular = "Aileron-Regular"
+}
\ No newline at end of file