chore: Cleanup coordinate-converter

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

app/coordinate-converter.tsx

@@ -1,18 +1,17 @@
-import { useRouter } from "expo-router";
+import { useRouter } from "expo-router"; // Keep this here
 import { useCallback, useState } from "react";
 import {
-    ImageBackground,
-    KeyboardAvoidingView,
-    Platform,
-    ScrollView,
-    Text,
-    TextInput,
-    TouchableOpacity,
-    View,
+  ImageBackground,
+  KeyboardAvoidingView,
+  Platform,
+  ScrollView,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
 } 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,94 +101,95 @@ 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}>
-          <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}>
-              <Text style={styles.converterTitle}>Coordinate Converter</Text>
-
-              {/* Overworld Row */}
-              <View style={styles.dimensionContainer}>
-                <Text style={styles.dimensionTitle}>Overworld (X, Z)</Text>
-                <View style={styles.coordinatesRow}>
-                  <View style={styles.coordInputGroup}>
-                    <Text style={styles.coordInputLabel}>X:</Text>
-                    <TextInput
-                      style={styles.coordTextInput}
-                      keyboardType="numeric"
-                      placeholder="Enter X"
-                      placeholderTextColor="#ccc"
-                      value={overworldX}
-                      onChangeText={handleOverworldXChange}
-                    />
-                  </View>
-                  <View style={styles.coordInputGroup}>
-                    <Text style={styles.coordInputLabel}>Z:</Text>
-                    <TextInput
-                      style={styles.coordTextInput}
-                      keyboardType="numeric"
-                      placeholder="Enter Z"
-                      placeholderTextColor="#ccc"
-                      value={overworldZ}
-                      onChangeText={handleOverworldZChange}
-                    />
-                  </View>
-                </View>
-              </View>
-
-              {/* Nether Row */}
-              <View style={styles.dimensionContainer}>
-                <Text style={styles.dimensionTitle}>Nether (X, Z)</Text>
-                <View style={styles.coordinatesRow}>
-                  <View style={styles.coordInputGroup}>
-                    <Text style={styles.coordInputLabel}>X:</Text>
-                    <TextInput
-                      style={styles.coordTextInput}
-                      keyboardType="numeric"
-                      placeholder="Enter X"
-                      placeholderTextColor="#ccc"
-                      value={netherX}
-                      onChangeText={handleNetherXChange}
-                    />
-                  </View>
-                  <View style={styles.coordInputGroup}>
-                    <Text style={styles.coordInputLabel}>Z:</Text>
-                    <TextInput
-                      style={styles.coordTextInput}
-                      keyboardType="numeric"
-                      placeholder="Enter Z"
-                      placeholderTextColor="#ccc"
-                      value={netherZ}
-                      onChangeText={handleNetherZChange}
-                    />
-                  </View>
-                </View>
-              </View>
-
-              <TouchableOpacity
-                style={styles.clearButton}
-                onPress={handleClear}
-              >
-                <Text style={styles.clearButtonText}>Clear All</Text>
-              </TouchableOpacity>
-            </ScrollView>
-          </KeyboardAvoidingView>
-        </View>
+        <View style={styles.converterBackgroundOverlay} />
       </ImageBackground>
-    </SafeAreaView>
+
+      <SafeAreaView style={styles.converterContentWrapper}>
+        <KeyboardAvoidingView
+          style={styles.converterContainer}
+          behavior={Platform.OS === "ios" ? "padding" : "height"}
+        >
+          <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</Text>
+              <View style={styles.coordinatesRow}>
+                <View style={styles.coordInputGroup}>
+                  <Text style={styles.coordInputLabel}>X:</Text>
+                  <TextInput
+                    style={styles.coordTextInput}
+                    keyboardType="numeric"
+                    placeholder="0"
+                    placeholderTextColor="#ccc"
+                    value={overworldX}
+                    onChangeText={handleOverworldXChange}
+                  />
+                </View>
+                <View style={styles.coordInputGroup}>
+                  <Text style={styles.coordInputLabel}>Z:</Text>
+                  <TextInput
+                    style={styles.coordTextInput}
+                    keyboardType="numeric"
+                    placeholder="0"
+                    placeholderTextColor="#ccc"
+                    value={overworldZ}
+                    onChangeText={handleOverworldZChange}
+                  />
+                </View>
+              </View>
+            </View>
+
+            {/* Nether Row */}
+            <View style={styles.dimensionContainer}>
+              <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="0"
+                    placeholderTextColor="#ccc"
+                    value={netherX}
+                    onChangeText={handleNetherXChange}
+                  />
+                </View>
+                <View style={styles.coordInputGroup}>
+                  <Text style={styles.coordInputLabel}>Z:</Text>
+                  <TextInput
+                    style={styles.coordTextInput}
+                    keyboardType="numeric"
+                    placeholder="0"
+                    placeholderTextColor="#ccc"
+                    value={netherZ}
+                    onChangeText={handleNetherZChange}
+                  />
+                </View>
+              </View>
+            </View>
+
+            <TouchableOpacity style={styles.clearButton} onPress={handleClear}>
+              <Text style={styles.clearButtonText}>Clear All</Text>
+            </TouchableOpacity>
+          </ScrollView>
+        </KeyboardAvoidingView>
+      </SafeAreaView>
+    </View>
   );
 }

app/styles.ts

@@ -54,21 +54,22 @@ export const styles = StyleSheet.create({
     fontFamily: "Minecraft",
   },
   
-  // --- Coordinate Converter Specific Styles (Adjusted and New) ---
-  converterSafeArea: {
+  // --- Coordinate Converter Specific Styles ---
+  converterScreenRoot: {
     flex: 1,
+    backgroundColor: "#000",
   },
   converterBackgroundImage: {
-    flex: 1,
-    width: "100%",
-    height: "100%",
-    justifyContent: "center",
-    alignItems: "center",
+    ...StyleSheet.absoluteFillObject,
+    resizeMode: "cover",
   },
   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,
-    fontWeight: "500",
+    marginRight: 8,
+    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",