From bd1d88e9e847108edc6efa8f3da86f20eb6cea48 Mon Sep 17 00:00:00 2001
From: fmtabbara <fmtabbara@hotmail.co.uk>
Date: Wed, 7 Dec 2022 10:40:43 +0000
Subject: [PATCH 1/4] fix display mnemonic bug

---
 nym-wallet/src/components/textfields.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/nym-wallet/src/components/textfields.tsx b/nym-wallet/src/components/textfields.tsx
index 085ede1ab3..1b0224c134 100644
--- a/nym-wallet/src/components/textfields.tsx
+++ b/nym-wallet/src/components/textfields.tsx
@@ -10,17 +10,17 @@ export const MnemonicInput: React.FC<{
   error?: string;
   onUpdateMnemonic: (mnemonic: string) => void;
 }> = ({ mnemonic, error, onUpdateMnemonic }) => {
-  const [showPassword, setShowPassword] = useState(false);
+  const [showMnemonic, setShowMnemonic] = useState(false);
   return (
     <Stack spacing={2}>
       <TextField
         label="Mnemonic"
-        type="input"
-        value={showPassword ? mnemonic : mnemonic.replaceAll(/./g, '*')}
+        type={showMnemonic ? 'input' : 'password'}
+        value={mnemonic}
         onChange={(e) => onUpdateMnemonic(e.target.value)}
-        multiline
         autoFocus
         fullWidth
+        multiline={showMnemonic}
         inputProps={{
           style: {
             height: '160px',
@@ -34,7 +34,7 @@ export const MnemonicInput: React.FC<{
         }}
       />
       <FormControlLabel
-        control={<Checkbox checked={Boolean(showPassword)} onChange={() => setShowPassword((show) => !show)} />}
+        control={<Checkbox checked={Boolean(showMnemonic)} onChange={() => setShowMnemonic((show) => !show)} />}
         label="Reveal my mnemonic"
       />
       {error && <Error message={error} />}

From c534c4b91db260b002a7a77cc0c18b55dc622063 Mon Sep 17 00:00:00 2001
From: fmtabbara <fmtabbara@hotmail.co.uk>
Date: Fri, 9 Dec 2022 10:28:49 +0000
Subject: [PATCH 2/4] remove fixed height for mnemonic input

---
 nym-wallet/src/components/textfields.tsx | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/nym-wallet/src/components/textfields.tsx b/nym-wallet/src/components/textfields.tsx
index 1b0224c134..afcbcfedb7 100644
--- a/nym-wallet/src/components/textfields.tsx
+++ b/nym-wallet/src/components/textfields.tsx
@@ -21,11 +21,6 @@ export const MnemonicInput: React.FC<{
         autoFocus
         fullWidth
         multiline={showMnemonic}
-        inputProps={{
-          style: {
-            height: '160px',
-          },
-        }}
         InputLabelProps={{ shrink: true }}
         sx={{
           'input::-webkit-textfield-decoration-container': {

From 2ec56164537e5b6747702d579389f961ddf6071a Mon Sep 17 00:00:00 2001
From: fmtabbara <fmtabbara@hotmail.co.uk>
Date: Fri, 9 Dec 2022 13:07:59 +0000
Subject: [PATCH 3/4] text update

---
 .../bonding/node-settings/settings-pages/NodeUnbondPage.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/nym-wallet/src/pages/bonding/node-settings/settings-pages/NodeUnbondPage.tsx b/nym-wallet/src/pages/bonding/node-settings/settings-pages/NodeUnbondPage.tsx
index f576afccd9..535b68f6e5 100644
--- a/nym-wallet/src/pages/bonding/node-settings/settings-pages/NodeUnbondPage.tsx
+++ b/nym-wallet/src/pages/bonding/node-settings/settings-pages/NodeUnbondPage.tsx
@@ -26,7 +26,7 @@ export const NodeUnbondPage = ({ bondedNode, onConfirm, onError }: Props) => {
           {isMixnode(bondedNode) && (
             <Grid item>
               <Typography variant="body2" sx={{ color: (theme) => theme.palette.nym.text.muted }}>
-                If you unbond you will loose all delegations!
+                If you unbond you will lose all delegations!
               </Typography>
             </Grid>
           )}

From 7a52124d53c85c9484f557303e79c9329f112ff4 Mon Sep 17 00:00:00 2001
From: fmtabbara <fmtabbara@hotmail.co.uk>
Date: Fri, 9 Dec 2022 13:29:06 +0000
Subject: [PATCH 4/4] content updates

---
 .../settings-pages/NodeUnbondPage.tsx         | 51 ++++++++-----------
 1 file changed, 21 insertions(+), 30 deletions(-)

diff --git a/nym-wallet/src/pages/bonding/node-settings/settings-pages/NodeUnbondPage.tsx b/nym-wallet/src/pages/bonding/node-settings/settings-pages/NodeUnbondPage.tsx
index 535b68f6e5..a1fb0ea3fe 100644
--- a/nym-wallet/src/pages/bonding/node-settings/settings-pages/NodeUnbondPage.tsx
+++ b/nym-wallet/src/pages/bonding/node-settings/settings-pages/NodeUnbondPage.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Box, Button, Typography, Grid, TextField } from '@mui/material';
+import { Box, Button, Typography, Grid, TextField, Stack } from '@mui/material';
 import { TBondedMixnode, TBondedGateway } from 'src/context/bonding';
 import { Error } from 'src/components/Error';
 import { UnbondModal } from 'src/components/Bonding/modals/UnbondModal';
@@ -15,38 +15,31 @@ export const NodeUnbondPage = ({ bondedNode, onConfirm, onError }: Props) => {
   const [isConfirmed, setIsConfirmed] = useState(false);
   //TODO: Check what happens with a gateway
   return (
-    <Box sx={{ pl: 3, minHeight: '450px' }}>
-      <Grid container direction="row" alignItems="start" justifyContent={'space-between'}>
-        <Grid item container direction={'column'} width={0.5} spacing={1} sx={{ pt: 3 }}>
-          <Grid item>
+    <Box sx={{ p: 3, minHeight: '450px' }}>
+      <Grid container justifyContent="space-between">
+        <Grid item xs={12} lg={4} sx={{ mb: 3 }}>
+          <Stack gap={1}>
             <Typography variant="body1" fontWeight={600}>
               Unbond
             </Typography>
-          </Grid>
-          {isMixnode(bondedNode) && (
-            <Grid item>
-              <Typography variant="body2" sx={{ color: (theme) => theme.palette.nym.text.muted }}>
-                If you unbond you will lose all delegations!
-              </Typography>
-            </Grid>
-          )}
+
+            {isMixnode(bondedNode) && (
+              <Grid item>
+                <Typography variant="body2" sx={{ color: (theme) => theme.palette.nym.text.muted }}>
+                  Remember you should only unbond if you want to remove your node from the network for good.
+                </Typography>
+              </Grid>
+            )}
+          </Stack>
         </Grid>
-        <Grid item container direction={'column'} spacing={2} width={0.5} padding={3}>
-          <Grid item>
-            <Box sx={{ mb: 1 }}>
-              <Error
-                message={`Remember you should only unbond if you want to remove your ${
-                  isMixnode(bondedNode) ? 'node' : 'gateway'
-                } from the network for good.`}
-              />
-            </Box>
+        <Grid item xs={12} lg={6}>
+          <Stack gap={3}>
             <Error
-              message={`Unbonding is irreversible and it won’t be possible to restore the current state of your ${
+              message={`Unbonding is irreversible. You will lose all your delegations. It won’t be possible to restore the current state of your ${
                 isMixnode(bondedNode) ? 'node' : 'gateway'
               } again.`}
             />
-          </Grid>
-          <Grid item>
+
             <Typography variant="body2">
               To unbond, type{' '}
               <Typography display="inline" component="span" sx={{ color: (t) => t.palette.nym.highlight }}>
@@ -54,16 +47,14 @@ export const NodeUnbondPage = ({ bondedNode, onConfirm, onError }: Props) => {
               </Typography>{' '}
               in the field below and click continue
             </Typography>
-          </Grid>
-          <Grid item>
+
             <TextField
               fullWidth
               value={confirmField}
               onChange={(e) => setConfirmField(e.target.value)}
               InputLabelProps={{ shrink: true }}
             />
-          </Grid>
-          <Grid item sx={{ mt: 2 }}>
+
             <Button
               size="large"
               variant="contained"
@@ -75,7 +66,7 @@ export const NodeUnbondPage = ({ bondedNode, onConfirm, onError }: Props) => {
             >
               Continue
             </Button>
-          </Grid>
+          </Stack>
         </Grid>
       </Grid>
       {isConfirmed && (