From 50c7e8f264b56eaaf49128ec90b5a3d16ea6744f Mon Sep 17 00:00:00 2001
From: JD Francis <jd@audius.co>
Date: Wed, 31 Jan 2024 14:33:07 -0800
Subject: [PATCH 1/3] Fix old sign on validation checks

---
 .../CompletionCheck/CompletionCheck.tsx       |  2 +-
 .../src/screens/signon/CreatePassword.tsx     | 34 +++----------------
 packages/mobile/src/screens/signon/SignOn.tsx | 32 +++++++++++++----
 3 files changed, 31 insertions(+), 37 deletions(-)

diff --git a/packages/mobile/src/harmony-native/components/CompletionCheck/CompletionCheck.tsx b/packages/mobile/src/harmony-native/components/CompletionCheck/CompletionCheck.tsx
index 09df1d4ea4b..cc7a55e6e11 100644
--- a/packages/mobile/src/harmony-native/components/CompletionCheck/CompletionCheck.tsx
+++ b/packages/mobile/src/harmony-native/components/CompletionCheck/CompletionCheck.tsx
@@ -55,7 +55,7 @@ const CompletionError = ({ value }: CompletionCheckProps) => {
 
   return (
     <CompletionIconBase style={[animationStyle]}>
-      <IconMultiselectRemove />
+      <IconMultiselectRemove width={20} height={20} />
     </CompletionIconBase>
   )
 }
diff --git a/packages/mobile/src/screens/signon/CreatePassword.tsx b/packages/mobile/src/screens/signon/CreatePassword.tsx
index 522c0328e75..e62a29296ba 100644
--- a/packages/mobile/src/screens/signon/CreatePassword.tsx
+++ b/packages/mobile/src/screens/signon/CreatePassword.tsx
@@ -25,6 +25,7 @@ import { useDispatch, useSelector } from 'react-redux'
 import { useEffectOnce } from 'react-use'
 
 import {
+  CompletionCheck,
   IconArrowRight,
   IconCheck,
   IconMultiselectRemove
@@ -107,28 +108,9 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignContent: 'flex-start',
     marginTop: 16,
+    gap: 8,
     width: '100%'
   },
-  unchecked: {
-    width: 16,
-    height: 16,
-    borderWidth: 2,
-    borderColor: '#858199',
-    borderRadius: 12,
-    marginRight: 13
-  },
-  iconCheck: {
-    position: 'absolute',
-    width: 16,
-    height: 16,
-    zIndex: 2
-  },
-  errorIcon: {
-    position: 'absolute',
-    width: 16,
-    height: 16,
-    zIndex: 2
-  },
   uncheckedDescription: {
     color: '#858199',
     fontSize: 14,
@@ -237,20 +219,14 @@ const Checkbox = ({
   if (met) {
     return (
       <View style={styles.checkboxContainer}>
-        <Animated.View style={animatedStyles}>
-          <IconCheck style={styles.iconCheck} />
-        </Animated.View>
-        <View style={styles.unchecked} />
+        <CompletionCheck value='complete' />
         <Text style={styles.uncheckedDescription}>{messages.checks[i]}</Text>
       </View>
     )
   } else if (error) {
     return (
       <View style={styles.checkboxContainer}>
-        <Animated.View style={animatedStyles}>
-          <IconMultiselectRemove style={styles.iconCheck} />
-        </Animated.View>
-        <View style={styles.unchecked} />
+        <CompletionCheck value='error' />
         <Text
           style={[styles.uncheckedDescription, { color: errorBorderColor }]}
         >
@@ -261,7 +237,7 @@ const Checkbox = ({
   } else {
     return (
       <View style={styles.checkboxContainer}>
-        <View style={styles.unchecked} />
+        <CompletionCheck value='incomplete' />
         <Text style={styles.uncheckedDescription}>{messages.checks[i]}</Text>
       </View>
     )
diff --git a/packages/mobile/src/screens/signon/SignOn.tsx b/packages/mobile/src/screens/signon/SignOn.tsx
index e78e803fc77..ef947ebeef3 100644
--- a/packages/mobile/src/screens/signon/SignOn.tsx
+++ b/packages/mobile/src/screens/signon/SignOn.tsx
@@ -224,8 +224,6 @@ const styles = StyleSheet.create({
   },
   errorIcon: {
     flex: 1,
-    width: 12,
-    height: 12,
     marginRight: 10,
     alignSelf: 'center'
   },
@@ -456,7 +454,11 @@ const SignOn = ({ navigation }: SignOnProps) => {
         <Animated.View
           style={[styles.errorContainer, { opacity: errorOpacity }]}
         >
-          <IconMultiselectRemove style={styles.errorIcon} />
+          <IconMultiselectRemove
+            style={styles.errorIcon}
+            width={12}
+            height={12}
+          />
           <Text style={styles.errorText}>{errorMessages.requiresOtp}</Text>
         </Animated.View>
       )
@@ -465,7 +467,11 @@ const SignOn = ({ navigation }: SignOnProps) => {
         <Animated.View
           style={[styles.errorContainer, { opacity: errorOpacity }]}
         >
-          <IconMultiselectRemove style={styles.errorIcon} />
+          <IconMultiselectRemove
+            style={styles.errorIcon}
+            width={12}
+            height={12}
+          />
           <Text style={styles.errorText}>{errorMessages.default}</Text>
         </Animated.View>
       )
@@ -475,7 +481,11 @@ const SignOn = ({ navigation }: SignOnProps) => {
         <Animated.View
           style={[styles.errorContainer, { opacity: errorOpacity }]}
         >
-          <IconMultiselectRemove style={styles.errorIcon} />
+          <IconMultiselectRemove
+            style={styles.errorIcon}
+            width={12}
+            height={12}
+          />
           <Text style={styles.errorText}>{errorMessages.invalidEmail}</Text>
         </Animated.View>
       )
@@ -485,14 +495,22 @@ const SignOn = ({ navigation }: SignOnProps) => {
         <Animated.View
           style={[styles.errorContainer, { opacity: errorOpacity }]}
         >
-          <IconMultiselectRemove style={styles.errorIcon} />
+          <IconMultiselectRemove
+            style={styles.errorIcon}
+            width={12}
+            height={12}
+          />
           <Text style={styles.errorText}>{errorMessages.emptyPassword}</Text>
         </Animated.View>
       )
     }
     return (
       <View style={styles.errorContainer}>
-        <IconMultiselectRemove style={[styles.errorIcon, { opacity: 0 }]} />
+        <IconMultiselectRemove
+          style={[styles.errorIcon, { opacity: 0 }]}
+          width={12}
+          height={12}
+        />
         <Text />
       </View>
     )

From 54840f5d46bca3c0ddcfe3c7635f6b181caedb65 Mon Sep 17 00:00:00 2001
From: JD Francis <jd@audius.co>
Date: Wed, 31 Jan 2024 14:44:02 -0800
Subject: [PATCH 2/3] fix last few uses of multiselect remove icon

---
 .../src/screens/signon/CreatePassword.tsx     | 22 +--------------
 .../src/screens/signon/ProfileManual.tsx      |  9 ++++---
 packages/mobile/src/screens/signon/SignOn.tsx | 27 ++++---------------
 3 files changed, 11 insertions(+), 47 deletions(-)

diff --git a/packages/mobile/src/screens/signon/CreatePassword.tsx b/packages/mobile/src/screens/signon/CreatePassword.tsx
index e62a29296ba..21b04f18b6c 100644
--- a/packages/mobile/src/screens/signon/CreatePassword.tsx
+++ b/packages/mobile/src/screens/signon/CreatePassword.tsx
@@ -24,12 +24,7 @@ import { SafeAreaView } from 'react-native-safe-area-context'
 import { useDispatch, useSelector } from 'react-redux'
 import { useEffectOnce } from 'react-use'
 
-import {
-  CompletionCheck,
-  IconArrowRight,
-  IconCheck,
-  IconMultiselectRemove
-} from '@audius/harmony-native'
+import { CompletionCheck, IconArrowRight } from '@audius/harmony-native'
 import Button from 'app/components/button'
 import LoadingSpinner from 'app/components/loading-spinner'
 import { track, make } from 'app/services/analytics'
@@ -201,21 +196,6 @@ const Checkbox = ({
     }).start(() => {})
   }
 
-  const animatedStyles = [
-    styles.iconCheck,
-    {
-      opacity,
-      transform: [
-        {
-          scale: opacity.interpolate({
-            inputRange: [0, 1],
-            outputRange: [0, 1]
-          })
-        }
-      ]
-    }
-  ]
-
   if (met) {
     return (
       <View style={styles.checkboxContainer}>
diff --git a/packages/mobile/src/screens/signon/ProfileManual.tsx b/packages/mobile/src/screens/signon/ProfileManual.tsx
index 85edbb50b3b..ab61fb89681 100644
--- a/packages/mobile/src/screens/signon/ProfileManual.tsx
+++ b/packages/mobile/src/screens/signon/ProfileManual.tsx
@@ -154,8 +154,6 @@ const useStyles = makeStyles(({ palette }) => ({
   },
   errorIcon: {
     flex: 1,
-    width: 12,
-    height: 12,
     marginRight: 10,
     alignSelf: 'center'
   },
@@ -320,7 +318,7 @@ const ProfileManual = ({ navigation }: ProfileManualProps) => {
     if (!handleIsValid && handleError !== '') {
       return (
         <View style={styles.errorContainer}>
-          <IconMultiselectRemove style={styles.errorIcon} />
+          <IconMultiselectRemove style={styles.errorIcon} size='m' />
           <Text style={styles.errorText}>
             &nbsp;
             {messages.errors[messages.errorTypes.indexOf(handleError)]}
@@ -331,7 +329,10 @@ const ProfileManual = ({ navigation }: ProfileManualProps) => {
     } else {
       return (
         <View style={styles.errorContainer}>
-          <IconMultiselectRemove style={[styles.errorIcon, { opacity: 0 }]} />
+          <IconMultiselectRemove
+            style={[styles.errorIcon, { opacity: 0 }]}
+            size='m'
+          />
           <Text style={styles.errorText}>&nbsp;</Text>
         </View>
       )
diff --git a/packages/mobile/src/screens/signon/SignOn.tsx b/packages/mobile/src/screens/signon/SignOn.tsx
index ef947ebeef3..9b1a0b84692 100644
--- a/packages/mobile/src/screens/signon/SignOn.tsx
+++ b/packages/mobile/src/screens/signon/SignOn.tsx
@@ -454,11 +454,7 @@ const SignOn = ({ navigation }: SignOnProps) => {
         <Animated.View
           style={[styles.errorContainer, { opacity: errorOpacity }]}
         >
-          <IconMultiselectRemove
-            style={styles.errorIcon}
-            width={12}
-            height={12}
-          />
+          <IconMultiselectRemove style={styles.errorIcon} size='m' />
           <Text style={styles.errorText}>{errorMessages.requiresOtp}</Text>
         </Animated.View>
       )
@@ -467,11 +463,7 @@ const SignOn = ({ navigation }: SignOnProps) => {
         <Animated.View
           style={[styles.errorContainer, { opacity: errorOpacity }]}
         >
-          <IconMultiselectRemove
-            style={styles.errorIcon}
-            width={12}
-            height={12}
-          />
+          <IconMultiselectRemove style={styles.errorIcon} size='m' />
           <Text style={styles.errorText}>{errorMessages.default}</Text>
         </Animated.View>
       )
@@ -481,11 +473,7 @@ const SignOn = ({ navigation }: SignOnProps) => {
         <Animated.View
           style={[styles.errorContainer, { opacity: errorOpacity }]}
         >
-          <IconMultiselectRemove
-            style={styles.errorIcon}
-            width={12}
-            height={12}
-          />
+          <IconMultiselectRemove style={styles.errorIcon} size='m' />
           <Text style={styles.errorText}>{errorMessages.invalidEmail}</Text>
         </Animated.View>
       )
@@ -495,11 +483,7 @@ const SignOn = ({ navigation }: SignOnProps) => {
         <Animated.View
           style={[styles.errorContainer, { opacity: errorOpacity }]}
         >
-          <IconMultiselectRemove
-            style={styles.errorIcon}
-            width={12}
-            height={12}
-          />
+          <IconMultiselectRemove style={styles.errorIcon} size='m' />
           <Text style={styles.errorText}>{errorMessages.emptyPassword}</Text>
         </Animated.View>
       )
@@ -508,8 +492,7 @@ const SignOn = ({ navigation }: SignOnProps) => {
       <View style={styles.errorContainer}>
         <IconMultiselectRemove
           style={[styles.errorIcon, { opacity: 0 }]}
-          width={12}
-          height={12}
+          size='m'
         />
         <Text />
       </View>

From 3f512c4b369a9d3b831d1dfbf6bd5f5bdf96f11e Mon Sep 17 00:00:00 2001
From: JD Francis <jd@audius.co>
Date: Wed, 31 Jan 2024 15:36:06 -0800
Subject: [PATCH 3/3] size 'm' instead

---
 .../components/CompletionCheck/CompletionCheck.tsx              | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mobile/src/harmony-native/components/CompletionCheck/CompletionCheck.tsx b/packages/mobile/src/harmony-native/components/CompletionCheck/CompletionCheck.tsx
index cc7a55e6e11..2832d35882f 100644
--- a/packages/mobile/src/harmony-native/components/CompletionCheck/CompletionCheck.tsx
+++ b/packages/mobile/src/harmony-native/components/CompletionCheck/CompletionCheck.tsx
@@ -55,7 +55,7 @@ const CompletionError = ({ value }: CompletionCheckProps) => {
 
   return (
     <CompletionIconBase style={[animationStyle]}>
-      <IconMultiselectRemove width={20} height={20} />
+      <IconMultiselectRemove size='m' />
     </CompletionIconBase>
   )
 }