made it look prettier. working on fixing product editor.

components/ProductAttributeEditor.tsx

@@ -9,7 +9,7 @@ export type ProductAttributeDeleteFunc = (product_id: string, key: string) => an
 
 export type ProductAttributeProps = { product: Product, attributeKey: string, attributeValue: string, onChange?: ProductAttributeChangeFunc, onDelete?: ProductAttributeChangeFunc, };
 
-export const ProductAttributeEditor = ({ product, attributeKey: key, attributeValue: value, onDelete, onChange } : ProductAttributeProps) => {
+export const ProductAttributeEditor = ({ product, attributeKey: key, attributeValue: value, onDelete, onChange }: ProductAttributeProps) => {
     const [doEdit, setDoEdit] = useState(true);
     const [newValue, setNewValue] = useState(value);
 
@@ -20,30 +20,36 @@ export const ProductAttributeEditor = ({ product, attributeKey: key, attributeVa
 
     return (
         <View>
-            <Text>{key}</Text>
-            <View>
-                <TouchableHighlight
-                    onPress={() => setDoEdit(!doEdit)}
-                    aria-label="Property Value"
-                >
-                    {doEdit ?
-                        (<Text>{newValue}</Text>) :
-                        (<TextInput
-                            value={newValue}
-                            onChangeText={doChange}
-                            aria-label="Edit Value" />)
-                    }
-                </TouchableHighlight>
+            <View style={styles.productAttributeRow}>
+                <Text style={styles.key}>{key}</Text>
+                <TextInput
+                    value={newValue}
+                    onChangeText={doChange}
+                    style={styles.value}
+                    aria-label="Edit Value" />
                 <TouchableHighlight
                     onPress={() => onDelete && onDelete(product.id, key, value)}
-                    aria-label="Delete Attribute">
-                    <Ionicons name="trash-bin-outline" />
+                    aria-label="Delete Attribute"
+                    style={{ backgroundColor: "darkred", borderRadius: 5, margin: 5, padding: 5, }}>
+                    <Ionicons name="trash-bin-outline" size={30} color={"white"} />
                 </TouchableHighlight>
             </View>
         </View>
     )
 }
 
-const style = StyleSheet.create({
-
+const styles = StyleSheet.create({
+    productAttributeRow: {
+        flexDirection: "row",
+    },
+    key: {
+        flex: 1,
+    },
+    value: {
+        flex: 1,
+        borderWidth: 1,
+        borderColor: "grey",
+        borderStyle: "solid",
+        padding: 10
+    }
 });

components/ProductEditor.tsx

@@ -20,6 +20,7 @@ export const ProductEditor = ({}) => {
 
     return (
         <SafeAreaView>
+            <h1 style={styles.h1}>Edit Products</h1>
             <FlatList
             data={products}
             renderItem={
@@ -39,6 +40,10 @@ export const ProductEditor = ({}) => {
 }
 
 const styles = StyleSheet.create({
+    h1: {
+        textAlign: "center",
+        fontFamily: "sans-serif"
+    },
     product: {
         
     }

components/ProductEditorItem.tsx

@@ -41,12 +41,14 @@ export const ProductEditorItem = ({ product, onProductUpdated, onProductDeleted
             <TouchableHighlight
                 onPress={() => setShowAttributes(!showAttributes)}
                 aria-label="Product Item"
+                style={styles.productItemName}
             >
-                <Text style={styles.product}>{newName}</Text>
+                <Text style={styles.productNameText}>{newName}</Text>
             </TouchableHighlight>
             {showAttributes &&
                 (
                     <FlatList
+                        style={styles.productAttributesList}
                         data={product.attributesAsList}
                         renderItem={({ item }) => (
                             <ProductAttributeEditor
@@ -66,5 +68,21 @@ export const ProductEditorItem = ({ product, onProductUpdated, onProductDeleted
 }
 
 const styles = StyleSheet.create({
-    product: {},
+    productNameText: {
+        paddingLeft: 10,
+        paddingRight: 10,
+    },
+    productItemName: {
+        flex: 1,
+        backgroundColor: "lightgrey",
+        padding: 4,
+        margin: 4,
+    },
+    productAttributesList: {
+        margin: 10,
+        padding: 10,
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: "black",
+    },
 })