refactor tokenOptionRow

Emurgo · Oct 12, 2021 · c822a6b · c822a6b
1 parent dc3ffd5
commit c822a6b
Showing 1 changed file with 32 additions and 22 deletions.
diff --git a/packages/yoroi-extension/app/components/widgets/tokenOption/TokenOptionRow.js b/packages/yoroi-extension/app/components/widgets/tokenOption/TokenOptionRow.js
@@ -2,43 +2,53 @@
 import { Component } from 'react';
 import type { Node } from 'react';
 import { observer } from 'mobx-react';
-import classnames from 'classnames';
-
-import styles from './TokenOptionRow.scss';
+import { Typography } from '@mui/material';
+import { Box } from '@mui/system';
 
 type Props = {|
   +displayName: string,
   +id?: string,
   +amount?: string,
-  +nameOnly?: boolean
+  nameOnly?: boolean | null,
 |};
 
 @observer
 export default class TokenOptionRow extends Component<Props> {
-
   static defaultProps: {|
-    id: string,
-    amount: string,
-    nameOnly: boolean,
+    id: void,
+    amount: void,
+    nameOnly: void,
   |} = {
-    id: '',
-    amount: '',
-    nameOnly: false,
+    id: undefined,
+    amount: undefined,
+    nameOnly: undefined,
   };
-
   render(): Node {
     const notOnlyName = !this.props.nameOnly;
     return (
-      <div className={classnames([styles.container, styles.rowText])}>
-        <div className={styles.item_name}>{this.props.displayName}</div>
-        {notOnlyName ? (
-          <>
-            <div className={styles.item_amount}>{this.props.amount}</div>
-            <div className={styles.item_id}> {this.props.id}</div>
-          </>
-        ) : null}
-
-      </div>
+      <Box width="100%">
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            color: '#242838',
+            fontSize: '1rem',
+          }}
+        >
+          <Typography sx={{ flex: 1 }}>{this.props.displayName}</Typography>
+          {notOnlyName && <Typography flex={1}>{this.props.amount}</Typography>}
+        </Box>
+        <Box>
+          {notOnlyName && (
+            <Typography
+              sx={{ color: '#6B7384', fontSize: '0.875rem', letterSpacing: 0, lineHeight: '22px' }}
+            >
+              {this.props.id}
+            </Typography>
+          )}
+        </Box>
+      </Box>
     );
   }
 }