Merge pull request #38 from iuricmp/fix/text-input-color

Fix text input color and update app version display

mobile/Makefile

@@ -78,7 +78,7 @@ clean_install: clean node_modules
 .PHONY: clean_install
 
 release.ios: node_modules
-	npx expo install --chec
+	npx expo install --check
 	npm run ts:check
 	eas build --platform ios --profile production
 	@echo "iOS build done. Now it's time to run `eas submit --platform ios` or user Transporter https://apps.apple.com/us/app/transporter/id1450874784?mt=12"

mobile/app/_layout.tsx

@@ -1,8 +1,9 @@
 import { Stack } from "expo-router";
-import { DefaultTheme, ThemeProvider } from "@react-navigation/native";
+import { ThemeProvider } from "@react-navigation/native";
 import { Guard } from "@/components/auth/guard";
 import { GnoNativeProvider } from "@gnolang/gnonative";
 import { LinkingProvider, ReduxProvider } from "@/providers";
+import { DefaultTheme } from "@/assets/styles";
 
 const gnoDefaultConfig = {
   // @ts-ignore
@@ -16,16 +17,16 @@ export default function AppLayout() {
     <GnoNativeProvider config={gnoDefaultConfig}>
       <ReduxProvider>
         <ThemeProvider value={DefaultTheme}>
-        <LinkingProvider>
-          <Guard>
-            <Stack
-              screenOptions={{
-                headerShown: false,
-                headerLargeTitle: true,
-                headerBackVisible: false,
-              }}
-            />
-          </Guard>
+          <LinkingProvider>
+            <Guard>
+              <Stack
+                screenOptions={{
+                  headerShown: false,
+                  headerLargeTitle: true,
+                  headerBackVisible: false,
+                }}
+              />
+            </Guard>
           </LinkingProvider>
         </ThemeProvider>
       </ReduxProvider>

mobile/app/index.tsx

@@ -15,7 +15,7 @@ export default function Root() {
 
   const dispatch = useAppDispatch();
 
-  const appVersion = Application.nativeApplicationVersion;
+  const appVersion = Application.nativeBuildVersion;
 
   const appInitialized = useAppSelector(selectInitialized)
   const hasMasterPassword = useAppSelector(selectMasterPassword)
@@ -73,9 +73,9 @@ export default function Root() {
       <Layout.Container>
         <Layout.BodyAlignedBotton>
           <View style={{ alignItems: "center" }}>
-            <Text.Title>gnoKey Mobile</Text.Title>
-            <Text.Body>Key Management Tool</Text.Body>
-            <Text.Caption1>v{appVersion}</Text.Caption1>
+            <Text.Title>GnoKey Mobile</Text.Title>
+            <Text.Body>The Gno Key Management Tool</Text.Body>
+            <Text.Caption1>Build Version: {appVersion}</Text.Caption1>
           </View>
 
           <ScrollView contentContainerStyle={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}

mobile/assets/styles/index.ts

@@ -0,0 +1,3 @@
+import { DefaultTheme } from './themes/default-theme';
+
+export { DefaultTheme };

mobile/assets/styles/themes/default-theme.ts

@@ -0,0 +1,13 @@
+import type { Theme } from '@react-navigation/native';
+
+export const DefaultTheme: Theme = {
+  dark: false,
+  colors: {
+    primary: 'rgb(0, 122, 255)',
+    background: '#FFFFFF',
+    card: 'rgb(255, 255, 255)',
+    text: 'rgb(28, 28, 30)',
+    border: 'rgb(216, 216, 216)',
+    notification: 'rgb(255, 59, 48)',
+  }
+}

mobile/components/textinput/index.tsx

@@ -15,7 +15,9 @@ export const TextInput = React.forwardRef<RNTextInput, Props>((props, ref) => {
   return (
     <Container style={props.containerStyle}>
       {children ? <LeftChildren>{children}</LeftChildren> : null}
-      <TextInputBase autoCapitalize="none" autoCorrect={false} {...rest} ref={ref} secureTextEntry={isSecureText} />
+      <TextInputBase autoCapitalize="none"
+      placeholderTextColor="#727274"
+      autoCorrect={false} {...rest} ref={ref} secureTextEntry={isSecureText} />
 
       {rest.secureTextEntry ? (
         <ToggleIcon>
@@ -30,7 +32,8 @@ const Container = styled.View<Props>`
   flex-direction: row;
   align-items: center;
   border-width: 1px;
-  border-color: ${(props) => (props.error ? "red" : "black")};
+  border-color: ${(props) => (props.error ? "#6b6b6d" : "black")};
+  background-color: #F2F2F2;
   border-radius: 4px;
   padding: 2px;
   margin: 10px 0;
@@ -42,7 +45,8 @@ const TextInputBase = styled.TextInput.attrs<Props>({
   flex: 1;
   padding: 8px;
   font-size: 16px;
-  color: ${(props) => (props.editable === false ? "gray" : "black")};
+  color: ${(props) => (props.editable === false ? "rgb(85, 85, 85)" : "black")};
+  background-color: #F2F2F2;
   height: 48px;
   border-width: 0;
 `;

mobile/package.json

@@ -6,6 +6,7 @@
     "start": "expo start -d",
     "android": "expo run:android",
     "ios": "expo run:ios",
+    "ios:release": "npx expo run:ios --configuration Release",
     "web": "expo start --web",
     "prebuild": "expo prebuild",
     "ts:check": "tsc"