chore: Cleanup coordinate-converter

Signed-off-by: SindreKjelsrud <sindre@kjelsrud.dev>

app/coordinate-converter.tsx

@@ -1,4 +1,4 @@
-import { useRouter } from "expo-router";
+import { useRouter } from "expo-router"; // Keep this here
 import { useCallback, useState } from "react";
 import {
   ImageBackground,
@@ -12,7 +12,6 @@ import {
 } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { styles } from "./styles";
-const router = useRouter();
 
 // Define your background image URI
 const converterBgImage = {
@@ -20,6 +19,8 @@ const converterBgImage = {
 };
 
 export default function CoordinateConverter() {
+  const router = useRouter();
+
   const [overworldX, setOverworldX] = useState("");
   const [overworldZ, setOverworldZ] = useState("");
   const [netherX, setNetherX] = useState("");
@@ -100,36 +101,41 @@ export default function CoordinateConverter() {
   }, []);
 
   return (
-    <SafeAreaView style={styles.converterSafeArea}>
+    <View style={styles.converterScreenRoot}>
       <ImageBackground
         source={converterBgImage}
         style={styles.converterBackgroundImage}
         resizeMode="cover"
       >
-        <View style={styles.converterBackgroundOverlay}>
+        <View style={styles.converterBackgroundOverlay} />
+      </ImageBackground>
+
+      <SafeAreaView style={styles.converterContentWrapper}>
         <KeyboardAvoidingView
           style={styles.converterContainer}
           behavior={Platform.OS === "ios" ? "padding" : "height"}
         >
-<TouchableOpacity
-  onPress={() => router.back()} // Correct!
-  style={styles.backButton}
->
-  <Text style={styles.backButtonText}>← Go Back</Text>
-</TouchableOpacity>
           <ScrollView contentContainerStyle={styles.converterScrollContent}>
+            {/* Custom Back Button */}
+            <TouchableOpacity
+              onPress={() => router.back()}
+              style={styles.backButton}
+            >
+              <Text style={styles.backButtonText}>← Go Back</Text>
+            </TouchableOpacity>
+
             <Text style={styles.converterTitle}>Coordinate Converter</Text>
 
             {/* Overworld Row */}
             <View style={styles.dimensionContainer}>
-                <Text style={styles.dimensionTitle}>Overworld (X, Z)</Text>
+              <Text style={styles.dimensionTitle}>Overworld</Text>
               <View style={styles.coordinatesRow}>
                 <View style={styles.coordInputGroup}>
                   <Text style={styles.coordInputLabel}>X:</Text>
                   <TextInput
                     style={styles.coordTextInput}
                     keyboardType="numeric"
-                      placeholder="Enter X"
+                    placeholder="0"
                     placeholderTextColor="#ccc"
                     value={overworldX}
                     onChangeText={handleOverworldXChange}
@@ -140,7 +146,7 @@ export default function CoordinateConverter() {
                   <TextInput
                     style={styles.coordTextInput}
                     keyboardType="numeric"
-                      placeholder="Enter Z"
+                    placeholder="0"
                     placeholderTextColor="#ccc"
                     value={overworldZ}
                     onChangeText={handleOverworldZChange}
@@ -151,14 +157,14 @@ export default function CoordinateConverter() {
 
             {/* Nether Row */}
             <View style={styles.dimensionContainer}>
-                <Text style={styles.dimensionTitle}>Nether (X, Z)</Text>
+              <Text style={styles.dimensionTitle}>Nether</Text>
               <View style={styles.coordinatesRow}>
                 <View style={styles.coordInputGroup}>
                   <Text style={styles.coordInputLabel}>X:</Text>
                   <TextInput
                     style={styles.coordTextInput}
                     keyboardType="numeric"
-                      placeholder="Enter X"
+                    placeholder="0"
                     placeholderTextColor="#ccc"
                     value={netherX}
                     onChangeText={handleNetherXChange}
@@ -169,7 +175,7 @@ export default function CoordinateConverter() {
                   <TextInput
                     style={styles.coordTextInput}
                     keyboardType="numeric"
-                      placeholder="Enter Z"
+                    placeholder="0"
                     placeholderTextColor="#ccc"
                     value={netherZ}
                     onChangeText={handleNetherZChange}
@@ -178,16 +184,12 @@ export default function CoordinateConverter() {
               </View>
             </View>
 
-              <TouchableOpacity
+            <TouchableOpacity style={styles.clearButton} onPress={handleClear}>
-                style={styles.clearButton}
-                onPress={handleClear}
-              >
               <Text style={styles.clearButtonText}>Clear All</Text>
             </TouchableOpacity>
           </ScrollView>
         </KeyboardAvoidingView>
-        </View>
-      </ImageBackground>
       </SafeAreaView>
+    </View>
   );
 }

app/styles.ts

@@ -54,21 +54,22 @@ export const styles = StyleSheet.create({
     fontFamily: "Minecraft",
   },
   
-  // --- Coordinate Converter Specific Styles (Adjusted and New) ---
+  // --- Coordinate Converter Specific Styles ---
-  converterSafeArea: {
+  converterScreenRoot: {
     flex: 1,
+    backgroundColor: "#000",
   },
   converterBackgroundImage: {
-    flex: 1,
+    ...StyleSheet.absoluteFillObject,
-    width: "100%",
+    resizeMode: "cover",
-    height: "100%",
-    justifyContent: "center",
-    alignItems: "center",
   },
   converterBackgroundOverlay: {
     ...StyleSheet.absoluteFillObject,
     backgroundColor: "rgba(0, 0, 0, 0.6)",
   },
+  converterContentWrapper: {
+    flex: 1,
+  },
   converterContainer: {
     flex: 1,
     width: "100%",
@@ -80,8 +81,9 @@ export const styles = StyleSheet.create({
     width: "100%",
   },
   converterTitle: {
-    fontSize: 28,
+    fontSize: 44,
     fontWeight: "bold",
+    textAlign: "center",
     color: "#fff",
     marginBottom: 30,
     marginTop: 20,
@@ -92,17 +94,13 @@ export const styles = StyleSheet.create({
   },
   dimensionContainer: {
     width: "90%",
-    backgroundColor: "rgba(58, 58, 58, 0.7)",
-    borderRadius: 10,
-    borderColor: "#6a5acd",
-    borderWidth: 2,
     padding: 15,
     marginBottom: 20,
     alignItems: "center",
   },
   dimensionTitle: {
     color: "#fff",
-    fontSize: 20,
+    fontSize: 28,
     fontWeight: "bold",
     marginBottom: 15,
     textShadowColor: "rgba(0, 0, 0, 0.5)",
@@ -118,13 +116,15 @@ export const styles = StyleSheet.create({
   coordInputGroup: {
     flex: 1,
     marginHorizontal: 5,
+    flexDirection: "row",
     alignItems: "center",
+    justifyContent: "center",
   },
   coordInputLabel: {
     color: "#e0e0e0",
     fontSize: 16,
-    marginBottom: 5,
+    marginRight: 8,
-    fontWeight: "500",
+    fontWeight: "bold",
     textShadowColor: "rgba(0, 0, 0, 0.5)",
     textShadowOffset: { width: 1, height: 1 },
     textShadowRadius: 2,
@@ -133,13 +133,13 @@ export const styles = StyleSheet.create({
   coordTextInput: {
     backgroundColor: "rgba(58, 58, 58, 0.8)",
     color: "#fff",
-    paddingVertical: 10,
+    paddingVertical: 8,
     paddingHorizontal: 10,
     borderRadius: 8,
     fontSize: 18,
     borderWidth: 1,
     borderColor: "#555",
-    width: "100%",
+    flex: 1,
     textAlign: "center",
     fontFamily: "Minecraft",
   },
@@ -158,13 +158,13 @@ export const styles = StyleSheet.create({
   },
   backButton: {
     alignSelf: "flex-start",
-    marginTop: 10,
+    marginTop: 0,
     marginBottom: 20,
     paddingVertical: 8,
     paddingHorizontal: 15,
     backgroundColor: "rgba(106, 90, 205, 0.7)",
     borderRadius: 8,
-    marginLeft: 10,
+    marginLeft: 0,
   },
   backButtonText: {
     color: "#fff",