mobile: update form input styles

apps/mobile/app/common/design/theme.ts

@@ -247,7 +247,7 @@ export const THEME_DARK: ThemeDefinition = {
         accentForeground: "#ffffff",
         paragraph: "#f54b42",
         background: "#250b0a",
-        border: "#383838",
+        border: "#F7999D",
         heading: "#f54b42",
         icon: "#f54b42",
         separator: "#383838",

apps/mobile/app/components/auth/signup.tsx

@@ -47,7 +47,6 @@ import { RouteParams } from "../../stores/use-navigation-store";
 import SettingsService from "../../services/settings";
 import AppIcon from "../ui/AppIcon";
 import { Spacing } from "../../common/design/spacing";
-import { SvgView } from "../ui/svg";
 import { SETTING_ACCOUNT_SVG } from "../../assets/images/assets";
 import { ProgressPills } from "../intro/progress-pills";
 
@@ -182,7 +181,6 @@ export const Signup = ({
                   keyboardType="email-address"
                   autoCorrect={false}
                   autoCapitalize="none"
-                  placeholder={strings.email()}
                   placeholder="you@example.com"
                   blurOnSubmit={false}
                   validators={[
@@ -278,10 +276,10 @@ export const Signup = ({
                       marginBottom: 25,
                       textAlign: "center"
                     }}
-                    fontSize="XS"
+                    fontSize="SM"
                     color={colors.secondary.paragraph}
                   >
-                    {strings.signupAgreement[0]()}
+                    {strings.dontHaveAccount()}{" "}
                     <Paragraph
                       fontSize="SM"
                       fontFamily="SEMI_BOLD"
@@ -325,7 +323,7 @@ export const Signup = ({
                     textAlign: "center"
                   }}
                   fontSize="XS"
-                  color={colors.primary.paragraph}
+                  color={colors.secondary.paragraph}
                 >
                   {strings.signupAgreement[0]()}
                   <Paragraph

apps/mobile/app/components/ui/input/form-input.tsx

@@ -30,8 +30,8 @@ import {
 } from "react-native";
 import isEmail from "validator/lib/isEmail";
 import isURL from "validator/lib/isURL";
+import { Spacing } from "../../../common/design/spacing";
 import { AppFontSize, defaultBorderRadius } from "../../../utils/size";
-import { DefaultAppStyles } from "../../../utils/styles";
 import AppIcon from "../AppIcon";
 import { IconButton } from "../icon-button";
 import Paragraph from "../typography/paragraph";
@@ -236,6 +236,7 @@ interface FormInputProps extends TextInputProps {
   containerStyle?: ViewStyle;
   wrapperStyle?: ViewStyle;
   errorStyle?: TextStyle;
+  label?: string;
 }
 
 export function FormInput({
@@ -247,7 +248,7 @@ export function FormInput({
   error,
   secureTextEntry,
   customColor,
-  marginBottom = 10,
+  marginBottom = 0,
   marginRight,
   button,
   buttonLeft,
@@ -262,6 +263,7 @@ export function FormInput({
   onPress,
   onChangeText,
   errorStyle,
+  label,
   ...restProps
 }: FormInputProps) {
   const { colors, isDark } = useThemeColors();
@@ -287,7 +289,7 @@ export function FormInput({
   const fieldError = error || formRef.current.getError(name);
 
   const borderColor = useMemo(() => {
-    if (fieldError) return colors.error.accent;
+    if (fieldError) return colors.error.border;
     if (focused) return customColor || colors.selected.border;
     return colors.primary.border;
   }, [colors, customColor, fieldError, focused]);
@@ -295,23 +297,27 @@ export function FormInput({
   const style: ViewStyle = {
     borderWidth: 1,
     borderRadius: defaultBorderRadius,
-    borderColor,
+    borderColor: borderColor,
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "center",
-    paddingHorizontal: DefaultAppStyles.GAP,
+    paddingHorizontal: Spacing.LEVEL_2,
+    paddingRight:
+      buttons || button || secureTextEntry || error
+        ? Spacing.LEVEL_3
+        : Spacing.LEVEL_3,
     ...containerStyle
   };
 
   const textStyle: TextInputProps["style"] = {
     paddingHorizontal: 0,
-    fontSize,
+    fontSize: fontSize,
     color:
       onPress && loading ? colors.primary.accent : colors.primary.paragraph,
+    paddingTop: Spacing.LEVEL_3,
+    paddingBottom: Spacing.LEVEL_3,
     flexGrow: 1,
     flexShrink: 1,
-    paddingBottom: DefaultAppStyles.GAP_VERTICAL,
-    paddingTop: DefaultAppStyles.GAP_VERTICAL,
     fontFamily: "Inter-Regular",
     ...(inputStyle as ViewStyle)
   };
@@ -330,6 +336,17 @@ export function FormInput({
         ...wrapperStyle
       }}
     >
+      {label ? (
+        <Paragraph
+          style={{
+            marginBottom: Spacing.LEVEL_1
+          }}
+          color={colors.primary.paragraph}
+          fontSize="XS"
+        >
+          {label}
+        </Paragraph>
+      ) : undefined}
       <TouchableOpacity
         disabled={!loading}
         onPress={onPress}