change mnemonic textfield

nym-wallet/src/components/textfields.tsx

@@ -1,6 +1,8 @@
 import React, { useState } from 'react';
 import { Box, IconButton, Stack, TextField } from '@mui/material';
 import { Visibility, VisibilityOff } from '@mui/icons-material';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
 import { Error } from './Error';
 
 export const MnemonicInput: React.FC<{
@@ -17,16 +19,22 @@ export const MnemonicInput: React.FC<{
         value={mnemonic}
         onChange={(e) => onUpdateMnemonic(e.target.value)}
         multiline={!!showPassword}
-        rows={4}
         autoFocus
         fullWidth
-        InputProps={{
-          endAdornment: (
-            <IconButton onClick={() => setShowPassword((show) => !show)}>
-              {showPassword ? <VisibilityOff /> : <Visibility />}
-            </IconButton>
-          ),
+        inputProps={{
+          style: {
+            height: '160px',
+          },
         }}
+        sx={{
+          'input::-webkit-textfield-decoration-container': {
+            alignItems: 'start',
+          },
+        }}
+      />
+      <FormControlLabel
+        control={<Checkbox checked={Boolean(showPassword)} onChange={() => setShowPassword((show) => !show)} />}
+        label="Reveal my mnemonic"
       />
       {error && <Error message={error} />}
     </Stack>