chore: update selected item state background color (MetaMask#23894)

## **Description**

Updating most instances of selected item background color to
`colors.background.muted`

## **Changelog**

CHANGELOG entry:null

## **Related issues**

Fixes:
Region Picker: https://consensyssoftware.atlassian.net/browse/MDP-280
Network Picker: https://consensyssoftware.atlassian.net/browse/MDP-239
Sort: https://consensyssoftware.atlassian.net/browse/MDP-243

## **Manual testing steps**

```gherkin
Feature: my feature name

  Scenario: user [verb for user action]
    Given [describe expected initial app state]

    When user [verb for user action]
    Then [describe expected outcome]
```

## **Screenshots/Recordings**

### Network Manager

| before | after |
| -------- | ------- |
|
![before](https://github.com/user-attachments/assets/f1b42b64-fd93-4637-8cc7-221a4c06f701)
|
![after](https://github.com/user-attachments/assets/17da788d-b98b-490a-b6eb-b83daa7a9f77)
|

### RPC Selection

| before | after |
| -------- | ------- |
|
![before](https://github.com/user-attachments/assets/a2f61ed3-7824-4d50-947e-56009092105f)
|
![after](https://github.com/user-attachments/assets/11ac9bf1-944c-4515-ba0e-300b8c8267a2)
|

### Sort

| before | after |
| -------- | ------- |
|
![before](https://github.com/user-attachments/assets/526f51e0-66bb-4a06-a624-d7a96d1defbe)
|
![after](https://github.com/user-attachments/assets/33ac49a5-5556-4723-bcad-b8e08f79acd5)
|

### Payment Selector

| before | after |
| -------- | ------- |
|
![before](https://github.com/user-attachments/assets/d82a614b-9e2e-4360-915e-afd23267120a)
|
![after](https://github.com/user-attachments/assets/596288fd-2aaa-43ee-aba6-416dcd6396a0)
|

### Region Picker

| before | after |
| -------- | ------- |
|
![before](https://github.com/user-attachments/assets/18557999-e62a-4b46-b329-9a187cd6020a)
|
![after](https://github.com/user-attachments/assets/c669f5d9-1f58-473e-a736-13c2bbbcf986)
|

### Select Network

| before | after |
| -------- | ------- |
|
![before](https://github.com/user-attachments/assets/e6b0ca02-ce25-4ed1-b9e6-653c3b991ee1)
|
![after](https://github.com/user-attachments/assets/9d9f47a6-2b85-4fb1-89e1-d2617c453f26)
|

### **Before**

`~`

### **After**

`~`

## **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**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] 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.


<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Updates selected item visuals across lists/selectors to use
`colors.background.muted` and drops the side underlay bar indicator,
with snapshots adjusted.
> 
> - **Styling/UX**:
> - Use `colors.background.muted` for selected states in
`ListItemMultiSelect`, `ListItemSelect`, `ListItemMultiSelectButton`,
and downstream UI (account/network/region/token selectors, permissions
screens).
> - Remove underlay side bar visuals (`underlayBar`, width strip) and
related props/tests; retain simple full-row underlay where applicable.
> - **Components**:
> - `components-temp/ListItemMultiSelectButton`: selected container
background updated; removed underlay view rendering; tests simplified
(icon/press only).
> - `components/List/ListItemSelect`: underlay color changed; removed
`underlayBar`; kept minimal `underlay` view.
>   - `components/List/ListItemMultiSelect`: underlay color changed.
>   - Remove unused constant `SELECTABLE_ITEM_UNDERLAY_ID`.
> - **Tests/Snapshots**:
> - Snapshot updates to reflect color change (`#4459ff1a` → `#3c4d9d0f`)
and removal of side bar indicator across numerous selector/modal views.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
9dbd116. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: vinnyhoward

app/component-library/components-temp/ListItemMultiSelectButton/ListItemMultiSelectButton.styles.ts

@@ -33,19 +33,6 @@ const styleSheet = (params: {
       } as ViewStyle,
       style,
     ) as ViewStyle,
-    underlay: {
-      ...StyleSheet.absoluteFillObject,
-      flexDirection: 'row',
-      backgroundColor: colors.primary.muted,
-      width: 4,
-    },
-    underlayBar: {
-      marginVertical: 4,
-      marginLeft: 4,
-      width: 4,
-      borderRadius: 2,
-      backgroundColor: colors.primary.default,
-    },
     listItem: {
       paddingRight: 0,
       paddingTop: 0,
@@ -69,7 +56,7 @@ const styleSheet = (params: {
     },
     container: {
       backgroundColor: isSelected
-        ? colors.primary.muted
+        ? colors.background.muted
         : colors.background.default,
       flexDirection: 'row',
       alignItems: 'center',

app/component-library/components-temp/ListItemMultiSelectButton/ListItemMultiSelectButton.test.tsx

@@ -18,24 +18,6 @@ describe('ListItemMultiSelectButton', () => {
     expect(wrapper).toMatchSnapshot();
   });
 
-  it('should not render the underlay view if isSelected is false', () => {
-    const { queryByRole } = render(
-      <ListItemMultiSelectButton>
-        <View />
-      </ListItemMultiSelectButton>,
-    );
-    expect(queryByRole('checkbox')).toBeNull();
-  });
-
-  it('should render the underlay view if isSelected is true', () => {
-    const { queryByRole } = render(
-      <ListItemMultiSelectButton isSelected>
-        <View />
-      </ListItemMultiSelectButton>,
-    );
-    expect(queryByRole('checkbox')).not.toBeNull();
-  });
-
   it('should call onPress when the button is pressed', () => {
     const mockOnPress = jest.fn();
     const { getByRole } = render(

app/component-library/components-temp/ListItemMultiSelectButton/ListItemMultiSelectButton.tsx

@@ -57,11 +57,6 @@ const ListItemMultiSelectButton: React.FC<ListItemMultiSelectButtonProps> = ({
         <ListItem gap={gap} style={styles.containerColumn}>
           {children}
         </ListItem>
-        {isSelected && (
-          <View style={styles.underlay} accessibilityRole="checkbox" accessible>
-            <View style={styles.underlayBar} />
-          </View>
-        )}
       </TouchableOpacity>
       {showButtonIcon ? (
         <View style={styles.buttonIcon}>

app/component-library/components/List/ListItemMultiSelect/ListItemMultiSelect.styles.ts

@@ -38,7 +38,7 @@ const styleSheet = (params: {
     underlay: {
       ...StyleSheet.absoluteFillObject,
       flexDirection: 'row',
-      backgroundColor: colors.primary.muted,
+      backgroundColor: colors.background.muted,
     },
     checkbox: {
       marginRight: 8 - Number(gap),

app/component-library/components/List/ListItemSelect/ListItemSelect.constants.ts

@@ -8,9 +8,6 @@ import { ListItemSelectProps } from './ListItemSelect.types';
 // Defaults
 export const DEFAULT_SELECTITEM_GAP = 16;
 
-// Test IDs
-export const SELECTABLE_ITEM_UNDERLAY_ID = 'selectable-item-underlay';
-
 // Sample consts
 export const SAMPLE_SELECTITEM_PROPS: ListItemSelectProps = {
   isSelected: true,

app/component-library/components/List/ListItemSelect/ListItemSelect.styles.ts

@@ -35,18 +35,11 @@ const styleSheet = (params: {
     underlay: {
       ...StyleSheet.absoluteFillObject,
       flexDirection: 'row',
-      backgroundColor: colors.primary.muted,
+      backgroundColor: colors.background.muted,
     },
     listItem: {
       padding: 16,
     },
-    underlayBar: {
-      marginVertical: 4,
-      marginLeft: 4,
-      width: 4,
-      borderRadius: 2,
-      backgroundColor: colors.primary.default,
-    },
   });
 };
 

app/component-library/components/List/ListItemSelect/ListItemSelect.tsx

@@ -39,9 +39,7 @@ const ListItemSelect: React.FC<ListItemSelectProps> = ({
         {children}
       </ListItem>
       {isSelected && (
-        <View style={styles.underlay} accessibilityRole="checkbox" accessible>
-          <View style={styles.underlayBar} />
-        </View>
+        <View style={styles.underlay} accessibilityRole="checkbox" accessible />
       )}
     </TouchableOpacity>
   );

app/components/UI/CaipAccountSelectorList/__snapshots__/CaipAccountSelectorList.test.tsx.snap

@@ -68,7 +68,7 @@ exports[`CaipAccountSelectorList renders all accounts with balances 1`] = `
         style={
           {
             "alignItems": "center",
-            "backgroundColor": "#4459ff1a",
+            "backgroundColor": "#3c4d9d0f",
             "flexDirection": "row",
           }
         }
@@ -248,34 +248,6 @@ exports[`CaipAccountSelectorList renders all accounts with balances 1`] = `
               </View>
             </View>
           </View>
-          <View
-            accessibilityRole="checkbox"
-            accessible={true}
-            style={
-              {
-                "backgroundColor": "#4459ff1a",
-                "bottom": 0,
-                "flexDirection": "row",
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-                "width": 4,
-              }
-            }
-          >
-            <View
-              style={
-                {
-                  "backgroundColor": "#4459ff",
-                  "borderRadius": 2,
-                  "marginLeft": 4,
-                  "marginVertical": 4,
-                  "width": 4,
-                }
-              }
-            />
-          </View>
         </TouchableOpacity>
         <View
           style={
@@ -627,7 +599,7 @@ exports[`CaipAccountSelectorList renders all accounts with right accessory 1`] =
         style={
           {
             "alignItems": "center",
-            "backgroundColor": "#4459ff1a",
+            "backgroundColor": "#3c4d9d0f",
             "flexDirection": "row",
           }
         }
@@ -770,34 +742,6 @@ exports[`CaipAccountSelectorList renders all accounts with right accessory 1`] =
               </View>
             </View>
           </View>
-          <View
-            accessibilityRole="checkbox"
-            accessible={true}
-            style={
-              {
-                "backgroundColor": "#4459ff1a",
-                "bottom": 0,
-                "flexDirection": "row",
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-                "width": 4,
-              }
-            }
-          >
-            <View
-              style={
-                {
-                  "backgroundColor": "#4459ff",
-                  "borderRadius": 2,
-                  "marginLeft": 4,
-                  "marginVertical": 4,
-                  "width": 4,
-                }
-              }
-            />
-          </View>
         </TouchableOpacity>
         <View
           style={
@@ -1112,7 +1056,7 @@ exports[`CaipAccountSelectorList renders correctly 1`] = `
         style={
           {
             "alignItems": "center",
-            "backgroundColor": "#4459ff1a",
+            "backgroundColor": "#3c4d9d0f",
             "flexDirection": "row",
           }
         }
@@ -1292,34 +1236,6 @@ exports[`CaipAccountSelectorList renders correctly 1`] = `
               </View>
             </View>
           </View>
-          <View
-            accessibilityRole="checkbox"
-            accessible={true}
-            style={
-              {
-                "backgroundColor": "#4459ff1a",
-                "bottom": 0,
-                "flexDirection": "row",
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-                "width": 4,
-              }
-            }
-          >
-            <View
-              style={
-                {
-                  "backgroundColor": "#4459ff",
-                  "borderRadius": 2,
-                  "marginLeft": 4,
-                  "marginVertical": 4,
-                  "width": 4,
-                }
-              }
-            />
-          </View>
         </TouchableOpacity>
         <View
           style={
@@ -1671,7 +1587,7 @@ exports[`CaipAccountSelectorList renders network icons for accounts with transac
         style={
           {
             "alignItems": "center",
-            "backgroundColor": "#4459ff1a",
+            "backgroundColor": "#3c4d9d0f",
             "flexDirection": "row",
           }
         }
@@ -1851,34 +1767,6 @@ exports[`CaipAccountSelectorList renders network icons for accounts with transac
               </View>
             </View>
           </View>
-          <View
-            accessibilityRole="checkbox"
-            accessible={true}
-            style={
-              {
-                "backgroundColor": "#4459ff1a",
-                "bottom": 0,
-                "flexDirection": "row",
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-                "width": 4,
-              }
-            }
-          >
-            <View
-              style={
-                {
-                  "backgroundColor": "#4459ff",
-                  "borderRadius": 2,
-                  "marginLeft": 4,
-                  "marginVertical": 4,
-                  "width": 4,
-                }
-              }
-            />
-          </View>
         </TouchableOpacity>
         <View
           style={