Some signup login flow UI changes (#2645)

* Add title string * Label for icon button * Restyle 3rd party sign in section * Add apple svg icon * Use apple svg * Add google icon * Update strings.ftl * Partially bold string * SignUpForm TS * SignUpConfirmation TS * Rename signup screens * SignUpConfirmation TS * Remove string * TS fixes * Button text change * Remove superfluous margin * Move two text fields to sign up confirmation * Revert "Remove superfluous margin" This reverts commit 6a8fe1e. * Add TODO * Remove text under Continue button * Reorder states * Close button only on login * LoginSignupWrapper TS * SignUp TS * Remove Learn More screen * Update text input field label * Remove email confirmation screen * Disable button when inputs empty * Navigate to main after register * Only show one check box * Add error component to first signup screen * Partially italics string * Remove previous text * SignUpConfirmationForm TS * Add a type * Make exclamation mark appear white * Example email validation * Updated Learn More webview title * Comment out some registration fields from previous checkboxes * Add comment * Update Error.tsx * Set all previously separate checkbox consents to true if the one is checked * Revert removal of LearnMore screen * Navigate to Learn More screen * Update LoginForm.tsx * Revert "Remove email confirmation screen" This reverts commit 52c396e. * Use pink_flower as background for Learn More screen * Remove old confirmation screen * Remove LearnMore demo * Show translated error text for common errors * Force dark buttons in signup/login flow screens * Add text to forgot password page * Change text input label
inaturalist · Feb 5, 2025 · 11d262e · 11d262e
1 parent e821f77
commit 11d262e
Show file tree

Hide file tree

Showing 27 changed files with 394 additions and 591 deletions.
diff --git a/android/app/src/main/assets/fonts/INatIcon.ttf b/android/app/src/main/assets/fonts/INatIcon.ttf
diff --git a/android/link-assets-manifest.json b/android/link-assets-manifest.json
@@ -3,7 +3,7 @@
   "data": [
     {
       "path": "assets/fonts/INatIcon.ttf",
-      "sha1": "0dabb1fdd2af1e0e98ec6636b7e035a2a9ba30de"
+      "sha1": "89474f5d4caf95704dfaf57d6155f39b9fe2c08a"
     },
     {
       "path": "assets/fonts/Lato-Bold.ttf",

diff --git a/assets/fonts/INatIcon.ttf b/assets/fonts/INatIcon.ttf
diff --git a/ios/iNaturalistReactNative.xcodeproj/project.pbxproj b/ios/iNaturalistReactNative.xcodeproj/project.pbxproj
@@ -31,10 +31,10 @@
 		8F1AC6782BC1B610002F994B /* PrivacyInfo.xcprivacy in Resources */ = {isa = PBXBuildFile; fileRef = 8F1AC6762BC1B610002F994B /* PrivacyInfo.xcprivacy */; };
 		8F1AC6792BC1B610002F994B /* PrivacyInfo.xcprivacy in Resources */ = {isa = PBXBuildFile; fileRef = 8F1AC6762BC1B610002F994B /* PrivacyInfo.xcprivacy */; };
 		8F346E4A2CF6912700CED7B4 /* geomodel.mlmodel in Sources */ = {isa = PBXBuildFile; fileRef = 8F346E492CF6912700CED7B4 /* geomodel.mlmodel */; };
-		8FFB0C4B23034426BE3DD441 /* INatIcon.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 0E1D9B3B44B84541AFD0FBEC /* INatIcon.ttf */; };
 		AE4DC81B3A87484CB3FD6750 /* Lato-Regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 4B0AEEF6CA584BCF9880EB35 /* Lato-Regular.ttf */; };
 		E23E0899594A7C6DF680FFDB /* libPods-iNaturalistReactNative-ShareExtension.a in Frameworks */ = {isa = PBXBuildFile; fileRef = A336AF0ADEAE537AB1B73F98 /* libPods-iNaturalistReactNative-ShareExtension.a */; };
 		E5DFC1C6FBFA45739CE91C69 /* Lato-MediumItalic.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 69DF855D92EA4ADFB73B47F1 /* Lato-MediumItalic.ttf */; };
+		59925732D1464B6388BDAEB7 /* INatIcon.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 2CFF1354495A49DEA8CEA670 /* INatIcon.ttf */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -73,7 +73,6 @@
 		00E356EE1AD99517003FC87E /* iNaturalistReactNativeTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = iNaturalistReactNativeTests.xctest; sourceTree = BUILT_PRODUCTS_DIR; };
 		00E356F11AD99517003FC87E /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
 		00E356F21AD99517003FC87E /* iNaturalistReactNativeTests.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = iNaturalistReactNativeTests.m; sourceTree = "<group>"; };
-		0E1D9B3B44B84541AFD0FBEC /* INatIcon.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = INatIcon.ttf; path = ../assets/fonts/INatIcon.ttf; sourceTree = "<group>"; };
 		13B07F961A680F5B00A75B9A /* iNaturalistReactNative.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = iNaturalistReactNative.app; sourceTree = BUILT_PRODUCTS_DIR; };
 		13B07FAF1A68108700A75B9A /* AppDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = AppDelegate.h; path = iNaturalistReactNative/AppDelegate.h; sourceTree = "<group>"; };
 		13B07FB01A68108700A75B9A /* AppDelegate.mm */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.objcpp; name = AppDelegate.mm; path = iNaturalistReactNative/AppDelegate.mm; sourceTree = "<group>"; };
@@ -108,6 +107,7 @@
 		D7AE5BDBC584A83878A04344 /* Pods-iNaturalistReactNative-ShareExtension.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-iNaturalistReactNative-ShareExtension.debug.xcconfig"; path = "Target Support Files/Pods-iNaturalistReactNative-ShareExtension/Pods-iNaturalistReactNative-ShareExtension.debug.xcconfig"; sourceTree = "<group>"; };
 		D8663889EABFBFC3077401E3 /* Pods-iNaturalistReactNative-ShareExtension.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-iNaturalistReactNative-ShareExtension.release.xcconfig"; path = "Target Support Files/Pods-iNaturalistReactNative-ShareExtension/Pods-iNaturalistReactNative-ShareExtension.release.xcconfig"; sourceTree = "<group>"; };
 		ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
+		2CFF1354495A49DEA8CEA670 /* INatIcon.ttf */ = {isa = PBXFileReference; name = "INatIcon.ttf"; path = "../assets/fonts/INatIcon.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -261,7 +261,7 @@
 				3A9BAF07FCF24F668E2EF5AB /* Lato-Medium.ttf */,
 				69DF855D92EA4ADFB73B47F1 /* Lato-MediumItalic.ttf */,
 				4B0AEEF6CA584BCF9880EB35 /* Lato-Regular.ttf */,
-				0E1D9B3B44B84541AFD0FBEC /* INatIcon.ttf */,
+				2CFF1354495A49DEA8CEA670 /* INatIcon.ttf */,
 			);
 			name = Resources;
 			sourceTree = "<group>";
@@ -398,7 +398,7 @@
 				085DD3205807404CAFC32228 /* Lato-Medium.ttf in Resources */,
 				E5DFC1C6FBFA45739CE91C69 /* Lato-MediumItalic.ttf in Resources */,
 				AE4DC81B3A87484CB3FD6750 /* Lato-Regular.ttf in Resources */,
-				8FFB0C4B23034426BE3DD441 /* INatIcon.ttf in Resources */,
+				59925732D1464B6388BDAEB7 /* INatIcon.ttf in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};

diff --git a/ios/link-assets-manifest.json b/ios/link-assets-manifest.json
@@ -3,7 +3,7 @@
   "data": [
     {
       "path": "assets/fonts/INatIcon.ttf",
-      "sha1": "0dabb1fdd2af1e0e98ec6636b7e035a2a9ba30de"
+      "sha1": "89474f5d4caf95704dfaf57d6155f39b9fe2c08a"
     },
     {
       "path": "assets/fonts/Lato-Bold.ttf",

diff --git a/src/components/Developer/UiLibrary.js b/src/components/Developer/UiLibrary.js
@@ -19,7 +19,6 @@ const ITEMS = sortBy( [
   { title: "Buttons", component: "Buttons" },
   { title: "Floating Action Bar", component: "FloatingActionBarDemo" },
   { title: "Icons", component: "Icons" },
-  { title: "Login/Signup LearnMore", component: "LoginSignUpLearnMoreDemo" },
   { title: "Typography", component: "Typography" },
   { title: "ObsListItem", component: "ObsListItemDemo" },
   { title: "TaxonResult", component: "TaxonResultDemo" },

diff --git a/src/components/Developer/UiLibrary/LoginSignUpLearnMoreDemo.js b/src/components/Developer/UiLibrary/LoginSignUpLearnMoreDemo.js
diff --git a/src/components/Developer/UiLibraryItem.js b/src/components/Developer/UiLibraryItem.js
@@ -6,7 +6,6 @@ import ActivityIndicatorDemo from "./UiLibrary/ActivityIndicatorDemo";
 import Buttons from "./UiLibrary/Buttons";
 import FloatingActionBarDemo from "./UiLibrary/FloatingActionBarDemo";
 import Icons from "./UiLibrary/Icons";
-import LoginSignUpLearnMoreDemo from "./UiLibrary/LoginSignUpLearnMoreDemo";
 import Misc from "./UiLibrary/Misc";
 import ObsGridItemDemo from "./UiLibrary/ObsGridItemDemo";
 import ObsListItemDemo from "./UiLibrary/ObsListItemDemo";
@@ -20,7 +19,6 @@ const LIBRARY = {
   Buttons,
   FloatingActionBarDemo,
   Icons,
-  LoginSignUpLearnMoreDemo,
   Misc,
   ObsGridItemDemo,
   ObsListItemDemo,

diff --git a/src/components/LoginSignUp/Error.tsx b/src/components/LoginSignUp/Error.tsx
@@ -12,7 +12,19 @@ interface Props {
 
 const Error = ( { error }: Props ) => (
   <View className="flex-row items-center justify-center mt-5">
-    <INatIcon name="triangle-exclamation" size={19} color={colors.warningRed} />
+    <View className="relative items-center justify-center">
+      {/*
+        Little bit of a hack to color the exclamation mark of the icon white.
+        The icon is a SVG of a triangle with a transparent exclamation mark in the middle.
+        So, I am adding a white background behind the center of the icon.
+      */}
+      <View className="absolute bg-white w-[4px] h-[14px]" />
+      <INatIcon
+        name="triangle-exclamation"
+        size={19}
+        color={colors.warningRed}
+      />
+    </View>
     <List2 className="color-white ml-3">
       {error}
     </List2>

diff --git a/src/components/LoginSignUp/ForgotPasswordForm.js b/src/components/LoginSignUp/ForgotPasswordForm.js
@@ -2,6 +2,7 @@
 
 import { useNavigation } from "@react-navigation/native";
 import {
+  Body1,
   Button
 } from "components/SharedComponents";
 import { View } from "components/styledComponents";
@@ -42,17 +43,21 @@ const ForgotPasswordForm = ( { reset }: Props ): Node => {
   return (
     <TouchableWithoutFeedback accessibilityRole="button" onPress={blurFields}>
       <View className="px-4 my-5 justify-end">
+        <Body1 className="text-center color-white">
+          {t( "Lets-reset-your-password" )}
+        </Body1>
         <LoginSignUpInputField
           ref={emailRef}
-          accessibilityLabel={t( "EMAIL" )}
+          accessibilityLabel={t( "USERNAME-OR-EMAIL" )}
           autoComplete="email"
-          headerText={t( "EMAIL" )}
+          headerText={t( "USERNAME-OR-EMAIL" )}
           keyboardType="email-address"
           onChangeText={text => setEmail( text )}
           testID="Login.email"
         />
         <Button
           level="focus"
+          forceDark
           text={t( "RESET-PASSWORD" )}
           onPress={( ) => reset( email )}
           className="my-[30px]"

diff --git a/src/components/LoginSignUp/LearnMore.tsx b/src/components/LoginSignUp/LearnMore.tsx
@@ -25,7 +25,7 @@ const LearnMore = ( ) => {
   ), [navigation] );
 
   return (
-    <LoginSignUpWrapper backgroundSource={require( "images/background/butterfly.jpg" )}>
+    <LoginSignUpWrapper backgroundSource={require( "images/background/pink_flower.jpg" )}>
       <Header />
       <View className="flex-1 w-full h-full justify-center p-5">
         <Button