refactor: Replace deprecated mixins with Text component in selected-a…

…ccount.component.js (#25262)

## **Description**

Replaced deprecated mixins with Text component in
`selected-account.component.js`. The change aims to modernize the
codebase by using the Text component from the design system, ensuring
consistency and maintainability.

Devin Run Link:
https://preview.devin.ai/devin/6dcddd7b3ee2456ca004b34d033b0d82

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/25262?quickstart=1)

## **Related issues**

Partially Fixes:
#20496

## **Manual testing steps**

1. Go to the latest build of storybook in this PR
2. Verify the "SelectedAccount" component displays correctly with the
updated Text component.

## **Screenshots/Recordings**

### **Before**


![](https://api.devin.ai/attachments/ad6f5c71-8714-4f0d-9675-d36481abbafa/before_changes_selected-account.component.png)

### **After**

<img width="1653" alt="Screenshot 2024-06-12 at 21 55 36"
src="https://github.com/MetaMask/metamask-extension/assets/168687171/3e05ef54-8272-4c48-8637-ddedcf2f3830">

## **Pre-merge author checklist**

- [X] I’ve followed [MetaMask Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.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-extension/blob/develop/.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.

---------

Co-authored-by: George Marshall <[email protected]>
Co-authored-by: Shreyasi Mandal <[email protected]>

ui/components/app/selected-account/index.scss

@@ -11,27 +11,6 @@
     width: 100%;
   }
 
-  &__name {
-    @include design-system.H5;
-
-    width: 100%;
-    font-weight: 500;
-    color: var(--color-text-default);
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    text-align: center;
-    margin-bottom: 4px;
-  }
-
-  &__address {
-    @include design-system.H7;
-
-    color: var(--color-text-alternative);
-    display: flex;
-    align-items: center;
-  }
-
   &__clickable {
     display: flex;
     flex-direction: column;

ui/components/app/selected-account/selected-account.component.js

@@ -11,8 +11,17 @@ import { getEnvironmentType } from '../../../../app/scripts/lib/util';
 import { ENVIRONMENT_TYPE_POPUP } from '../../../../shared/constants/app';
 import CustodyLabels from '../../institutional/custody-labels/custody-labels';
 ///: END:ONLY_INCLUDE_IF
-import { Icon, IconName, IconSize } from '../../component-library';
-import { IconColor } from '../../../helpers/constants/design-system';
+import { Icon, IconName, IconSize, Text } from '../../component-library';
+import {
+  IconColor,
+  TextVariant,
+  TextColor,
+  TextAlign,
+  BlockSize,
+  Display,
+  FontWeight,
+  AlignItems,
+} from '../../../helpers/constants/design-system';
 import { COPY_OPTIONS } from '../../../../shared/constants/copy';
 
 class SelectedAccount extends Component {
@@ -108,10 +117,24 @@ class SelectedAccount extends Component {
               copyToClipboard(checksummedAddress, COPY_OPTIONS);
             }}
           >
-            <div className="selected-account__name">
+            <Text
+              data-testid="selected-account-name"
+              width={BlockSize.Full}
+              fontWeight={FontWeight.Medium}
+              color={TextColor.textDefault}
+              ellipsis
+              textAlign={TextAlign.Center}
+              marginBottom={1}
+            >
               {selectedAccount.metadata.name}
-            </div>
-            <div className="selected-account__address">
+            </Text>
+            <Text
+              data-testid="selected-account-address"
+              variant={TextVariant.bodyXs}
+              color={TextColor.textAlternative}
+              display={Display.Flex}
+              alignItems={AlignItems.Center}
+            >
               {
                 ///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
                 showCustodyLabels && <CustodyLabels labels={custodyLabels} />
@@ -132,7 +155,7 @@ class SelectedAccount extends Component {
                   />
                 </div>
               )}
-            </div>
+            </Text>
           </button>
         </Tooltip>
       </div>