fix(native): TextField default apperance

JoseLion · Aug 13, 2023 · 5e02e36 · 5e02e36
1 parent 72492c0
commit 5e02e36
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 12 deletions.
diff --git a/packages/native/docs/README.md b/packages/native/docs/README.md
@@ -239,4 +239,4 @@ const TextField = textFieldOf<User>();
 
 #### Defined in
 
-[packages/native/src/lib/fields/TextField.component.tsx:160](https://github.com/JoseLion/lynxts/blob/main/packages/native/src/lib/fields/TextField.component.tsx#L160)
+[packages/native/src/lib/fields/TextField.component.tsx:162](https://github.com/JoseLion/lynxts/blob/main/packages/native/src/lib/fields/TextField.component.tsx#L162)
diff --git a/packages/native/src/lib/fields/TextField.component.tsx b/packages/native/src/lib/fields/TextField.component.tsx
@@ -114,15 +114,17 @@ export const TextField = memo(<T extends Struct>(props: TextFiedProps<T>): React
   }, [onSubmitEditing, submit]);
 
   return (
-    <View style={style}>
-        {!!label && (
-          <Text nativeID={`${name}-label`} style={labelStyle ?? SS.label}>
+    <View style={SS.container ?? style}>
+      {!!label && (
+        <View nativeID={`${name}-label`} style={SS.labelView}>
+          <Text style={labelStyle ?? SS.labelText}>
             {label}
-            {required && !!requiredText && (
-              <Text style={supStyle ?? SS.sup}>{` ${requiredText}`}</Text>
-            )}
           </Text>
-        )}
+          {required && !!requiredText && (
+            <Text style={supStyle ?? SS.sup}>{` ${requiredText}`}</Text>
+          )}
+        </View>
+      )}
       <TextInput
         accessibilityLabelledBy={`${name}-label`}
         {...rest}

diff --git a/packages/native/src/lib/fields/TextField.styles.ts b/packages/native/src/lib/fields/TextField.styles.ts
@@ -1,15 +1,45 @@
 import { StyleSheet } from "react-native";
 
+enum Color {
+  INDIAN_RED = "#CD5C5C",
+  OUTER_SPACE = "#414A4C",
+}
+
 export const SS = StyleSheet.create({
+  container: {
+    marginBottom: 12,
+  },
   error: {
-    color: "firebrick",
+    color: Color.INDIAN_RED,
     fontSize: 12,
+    marginLeft: 2,
+    marginTop: 2,
+  },
+  input: {
+    borderColor: Color.OUTER_SPACE,
+    borderRadius: 4,
+    borderStyle: "solid",
+    borderWidth: 2,
+    color: Color.OUTER_SPACE,
+    fontSize: 14,
+    paddingHorizontal: 4,
+    paddingVertical: 8,
   },
-  label: {
-    fontSize: 20,
+  inputError: {
+    borderColor: Color.INDIAN_RED,
+  },
+  labelText: {
+    color: Color.OUTER_SPACE,
+    fontSize: 14,
     fontWeight: "bold",
+    marginBottom: 2,
+    marginLeft: 2,
+  },
+  labelView: {
+    flexDirection: "row",
   },
   sup: {
-    fontSize: 14,
+    fontSize: 10,
+    lineHeight: 10,
   },
 });