fix: Migrate Login view to use design system components (and fix blur…

… error) (#11551)

## **Description**

The purpose of this task is to fix an error that keeps occurring where a
`TextField` ref is `null` when the `blur` method on it is executed.

## **Related issues**

Fixes: #10805

## **Manual testing steps**

The best way to make sure this bug is fixed will be to check the error
logs in Sentry.

## **Screenshots/Recordings**

n/a

## **Pre-merge author checklist**

- [X] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [X] I've completed the PR template to the best of my ability
- [X] I’ve included tests if applicable
- [X] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [X] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

app/component-library/components/Form/TextField/foundation/Input/Input.tsx

@@ -21,7 +21,7 @@ const Input: React.FC<InputProps> = ({
   isReadonly = false,
   onBlur,
   onFocus,
-  autoFocus = false,
+  autoFocus = true,
   ...props
 }) => {
   const [isFocused, setIsFocused] = useState(autoFocus);
@@ -64,7 +64,7 @@ const Input: React.FC<InputProps> = ({
       {...props}
       style={styles.base}
       editable={!isDisabled && !isReadonly}
-      autoFocus
+      autoFocus={autoFocus}
       onBlur={onBlurHandler}
       onFocus={onFocusHandler}
     />

app/component-library/components/Form/TextField/foundation/Input/__snapshots__/Input.test.tsx.snap

@@ -9,7 +9,7 @@ exports[`Input should render correctly 1`] = `
   style={
     {
       "backgroundColor": "#ffffff",
-      "borderColor": "transparent",
+      "borderColor": "#0376c9",
       "borderWidth": 1,
       "color": "#141618",
       "fontFamily": "Euclid Circular B",

app/components/UI/Ramp/Views/Settings/ActivationKeyForm.tsx

@@ -116,6 +116,7 @@ function ActivationKeyForm() {
               returnKeyType={'done'}
               onSubmitEditing={handleSubmit}
               isReadonly={Boolean(key)}
+              autoFocus
             />
           </Row>
 

app/components/UI/Ramp/Views/Settings/__snapshots__/ActivationKeyForm.test.tsx.snap

@@ -536,7 +536,7 @@ exports[`AddActivationKey renders correctly 1`] = `
                                   {
                                     "alignItems": "center",
                                     "backgroundColor": "#ffffff",
-                                    "borderColor": "#bbc0c5",
+                                    "borderColor": "#0376c9",
                                     "borderRadius": 8,
                                     "borderWidth": 1,
                                     "flexDirection": "row",

app/components/Views/EditAccountName/EditAccountName.tsx

@@ -124,6 +124,7 @@ const EditAccountName = () => {
             value={accountName}
             onChangeText={onChangeName}
             testID={EditAccountNameSelectorIDs.ACCOUNT_NAME_INPUT}
+            autoFocus
           />
         </View>
         <View style={styles.inputContainer}>
@@ -137,6 +138,7 @@ const EditAccountName = () => {
                 selectedInternalAccount?.address,
                 'mid',
               )}
+              autoFocus
             />
           ) : null}
         </View>

app/components/Views/EditAccountName/__snapshots__/EditAccountName.test.tsx.snap

@@ -47,7 +47,7 @@ exports[`EditAccountName should render correctly 1`] = `
           {
             "alignItems": "center",
             "backgroundColor": "#ffffff",
-            "borderColor": "#bbc0c5",
+            "borderColor": "#0376c9",
             "borderRadius": 8,
             "borderWidth": 1,
             "flexDirection": "row",
@@ -120,7 +120,7 @@ exports[`EditAccountName should render correctly 1`] = `
           {
             "alignItems": "center",
             "backgroundColor": "#ffffff",
-            "borderColor": "#bbc0c5",
+            "borderColor": "#0376c9",
             "borderRadius": 8,
             "borderWidth": 1,
             "flexDirection": "row",