feat: enhance RuxPhoneNumber and RuxInfo components with improved layout and additional app information

Author: Jameson13B

src/ReturnUserExperience/RuxPhoneNumber.tsx

@@ -1,12 +1,15 @@
 import React from 'react'
+import { useSelector } from 'react-redux'
+
 import InputAdornment from '@mui/material/InputAdornment'
 import Stack from '@mui/material/Stack'
 import Button from '@mui/material/Button'
 import { Text } from '@mxenabled/mxui'
 import { Link } from '@mui/material'
 
-import { TextField } from 'src/privacy/input'
+import { RootState } from 'src/redux/Store'
 import { __ } from 'src/utilities/Intl'
+import { TextField } from 'src/privacy/input'
 import styles from './returnUserExperience.module.css'
 
 export const RuxPhoneNumber = ({
@@ -16,8 +19,29 @@ export const RuxPhoneNumber = ({
   userEnteredPhone: string
   setUserEnteredPhone: (phone: string) => void
 }) => {
+  const appName = useSelector(
+    (state: RootState) => state.profiles.client.oauth_app_name || 'This app',
+  )
+
   return (
     <>
+      <Stack className={styles.titleContainer} spacing="6px">
+        <Text bold={true} className={styles.centerText} truncate={false} variant="h2">
+          {__('Connect your accounts')}
+        </Text>
+        <Text className={styles.centerText} truncate={false} variant="subtitle1">
+          {__('%1 uses MX to connect your accounts.', appName)}
+          <Link
+            href="https://mx.com/learn-more"
+            sx={{ color: 'tokens.TextColor.ButtonLink', marginLeft: 0 }}
+            underline="always"
+            variant="subtitle1"
+          >
+            {__('Learn more about MX.')}
+          </Link>
+        </Text>
+      </Stack>
+
       <TextField
         InputProps={{
           startAdornment: (

src/ReturnUserExperience/returnUserExperience.module.css

@@ -73,4 +73,4 @@
   padding-top: 16px;
   padding-right: 16px;
   padding-left: 16px;
-}
+}