Jameson/CT-1441

package.json

@@ -39,7 +39,6 @@
     "@kyper/select": "^2.0.0",
     "@kyper/selectionbox": "^2.1.0",
     "@kyper/tag": "^3.0.0",
-    "@kyper/textarea": "^4.1.0",
     "@kyper/tokenprovider": "^4.0.1",
     "@kyper/userfeedback": "^2.0.0",
     "@kyper/utilityrow": "^2.1.0",

src/components/DetailReviewItem.js

@@ -18,15 +18,16 @@ export const DetailReviewItem = (props) => {
           data-test={`${props.label.replace(/\s+/g, '-')}-row`}
           style={styles.rowHeader}
           truncate={false}
-          variant="Small"
+          variant="body2"
         >
           {props.label}
         </Text>
         <ProtectedText
+          bold={true}
           data-test={`${props.value.replace(/\s+/g, '-')}-row`}
-          style={styles.bold}
+          style={styles.rowValue}
           truncate={false}
-          variant="Body"
+          variant="body1"
         >
           {props.value}
         </ProtectedText>
@@ -64,8 +65,7 @@ const getStyles = (tokens) => ({
   rowHeader: {
     color: tokens.TextColor.InputLabel,
   },
-  bold: {
-    fontWeight: tokens.FontWeight.Bold,
+  rowValue: {
     overflowWrap: 'anywhere',
   },
   editIcon: {

src/privacy/components.js

@@ -1,4 +1,4 @@
-import { Text } from '@kyper/text'
+import {Text} from '@mxenabled/mxui'
 import { withProtection } from 'src/privacy/withProtection'
 
 // Add security to Kyper Components

src/privacy/input.ts

@@ -33,3 +33,4 @@ export {
   ProtectedUserFeedback as UserFeedback,
   PASSWORD_VALIDATIONS as PasswordValidations,
 }
+

src/views/microdeposits/ComeBack.js

@@ -39,15 +39,16 @@ export const ComeBack = ({ microdeposit, onDone }) => {
             data-test="title-header"
             style={styles.title}
             truncate={false}
-            variant="H2"
+            variant="h2"
           >
             {__('Check back soon')}
           </Text>
           <ProtectedText
+            component="p"
             data-test="thanks-paragraph"
             role="text"
             truncate={false}
-            variant="Paragraph"
+            variant="subtitle1"
           >
             {
               /* --TR: Full string "Thanks for submitting your account info. Check back soon! In the next few days you should find two small deposits less than a dollar each in your {accountName} account. When you see them, come back here and enter the amounts." */

src/views/microdeposits/MicrodepositErrors.js

@@ -99,13 +99,13 @@ export const MicrodepositErrors = ({
     <div ref={containerRef}>
       <SlideDown>
         <div style={styles.header}>
-          <Text component="h2" style={styles.title} truncate={false} variant="H2">
+          <Text component="h2" style={styles.title} truncate={false} variant="h2">
             {getTitle()}
           </Text>
         </div>
 
         <MessageBox style={styles.messageBox} variant="error">
-          <Text component="p" role="alert" truncate={false} variant="ParagraphSmall">
+          <Text component="p" role="alert" truncate={false} variant="subtitle1">
             {getMessage()}
           </Text>
         </MessageBox>
@@ -114,30 +114,30 @@ export const MicrodepositErrors = ({
       <SlideDown delay={100}>
         <div className={css(styles.infoRow)}>
           <div style={styles.textGroup}>
-            <Text style={styles.rowHeader} truncate={false} variant="Small">
+            <Text style={styles.rowHeader} truncate={false} variant="body2">
               {__('Account type')}
             </Text>
-            <Text style={styles.bold} truncate={false} variant="Body">
+            <Text bold={true} style={styles.rowValue} truncate={false} variant="body1">
               {accountType ? AccountTypeLabels[accountType] : '-'}
             </Text>
           </div>
         </div>
         <div className={css(styles.infoRow)}>
           <div style={styles.textGroup}>
-            <Text style={styles.rowHeader} truncate={false} variant="Small">
+            <Text style={styles.rowHeader} truncate={false} variant="body2">
               {__('Routing number')}
             </Text>
-            <ProtectedText style={styles.bold} truncate={false} variant="Body">
+            <ProtectedText bold={true} style={styles.rowValue} truncate={false} variant="body1">
               {routingNumber || '-'}
             </ProtectedText>
           </div>
         </div>
         <div className={css(styles.infoRow)}>
           <div style={styles.textGroup}>
-            <Text style={styles.rowHeader} truncate={false} variant="Small">
+            <Text style={styles.rowHeader} truncate={false} variant="body2">
               {__('Account number')}
             </Text>
-            <ProtectedText style={styles.bold} truncate={false} variant="Body">
+            <ProtectedText bold={true} style={styles.rowValue} truncate={false} variant="body1">
               {accountNumber ? `•••• ${accountNumber.substr(-4)}` : '-'}
             </ProtectedText>
           </div>
@@ -192,8 +192,7 @@ const getStyles = (tokens) => ({
   rowHeader: {
     color: tokens.TextColor.InputLabel,
   },
-  bold: {
-    fontWeight: tokens.FontWeight.Bold,
+  rowValue: {
     overflowWrap: 'anywhere',
   },
   button: {

src/views/microdeposits/VerifyDeposits.js

@@ -104,7 +104,7 @@ export const VerifyDeposits = ({ microdeposit, onSuccess }) => {
             data-test="title-header"
             style={styles.title}
             truncate={false}
-            variant="H2"
+            variant="h2"
           >
             {__('Enter deposit amounts')}
           </Text>
@@ -114,7 +114,7 @@ export const VerifyDeposits = ({ microdeposit, onSuccess }) => {
             data-test="deposit-paragraph"
             style={styles.subtitle}
             truncate={false}
-            variant="Paragraph"
+            variant="subtitle1"
           >
             {
               /* --TR: Full string "Please find the two small deposits less than a dollar each in your {accountName} account, and enter the amounts here." */
@@ -135,7 +135,7 @@ export const VerifyDeposits = ({ microdeposit, onSuccess }) => {
             style={styles.messageBox}
             variant="error"
           >
-            <Text data-test="input-error-text" truncate={false} variant="ParagraphSmall">
+            <Text data-test="input-error-text" truncate={false} variant="subtitle1">
               {state.submittingError
                 ? __("We're unable to submit your deposit amounts. Please try again.")
                 : __('One or more of the amounts was incorrect. Please try again.')}