feat: add RuxList component to display institution selection in ReturnUserExperience

Author: Jameson13B

src/ReturnUserExperience/ReturnUserExperience.tsx

@@ -3,8 +3,9 @@ import { useDispatch, useSelector } from 'react-redux'
 
 import styles from './returnUserExperience.module.css'
 import RuxInfo from 'src/ReturnUserExperience/RuxInfo'
-import { RuxPhoneNumber } from 'src/ReturnUserExperience/RuxPhoneNumber'
+import RuxPhoneNumber from 'src/ReturnUserExperience/RuxPhoneNumber'
 import RuxOtp from 'src/ReturnUserExperience/RuxOtp'
+import RuxList from 'src/ReturnUserExperience/RuxList'
 
 import { Stack } from '@mui/material'
 import { Icon } from '@mxenabled/mxui'
@@ -89,7 +90,7 @@ export const ReturnUserExperience = React.forwardRef(() => {
 
       {view === RUXViews.OTP && <RuxOtp />}
 
-      {view === RUXViews.LIST && <div>{__('List of connections goes here.')}</div>}
+      {view === RUXViews.LIST && <RuxList />}
     </div>
   )
 })

src/ReturnUserExperience/RuxList.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import Stack from '@mui/material/Stack'
+import { Text } from '@mxenabled/mxui'
+import { Icon } from '@mxenabled/mxui'
+import Button from '@mui/material/Button'
+
+import { __ } from 'src/utilities/Intl'
+import styles from './returnUserExperience.module.css'
+
+export const RuxList = () => {
+  return (
+    <>
+      <Text variant="h2">{__('Select your institution')}</Text>
+      <Text variant="subtitle1">
+        {__('Choose a previously connected institution or add a new one.')}
+      </Text>
+
+      {/* Connections list goes here */}
+      <p>Connections list goes here</p>
+
+      <Stack className={styles.buttonContainer} spacing="8px">
+        <Button variant="outlined">
+          <Icon name="plus" /> {__('Connect new institution')}
+        </Button>
+        <Text variant="subtitle2">
+          {__('Disconnect accounts from MX anytime by contacting support.')}
+        </Text>
+      </Stack>
+    </>
+  )
+}
+
+export default RuxList