From 831d9d2bf87c3b78d5b0bb9780fcf656dc813ac1 Mon Sep 17 00:00:00 2001
From: Gala <calero.vg@gmail.com>
Date: Wed, 31 Aug 2022 18:20:40 +0200
Subject: [PATCH] update alert text

---
 .../Bonding/modals/NodeSettingsModal.tsx      |  1 +
 .../general-settings/InfoSettings.tsx         | 23 +++++++++++--------
 .../general-settings/ParametersSettings.tsx   | 22 ++++++++++--------
 3 files changed, 28 insertions(+), 18 deletions(-)

diff --git a/nym-wallet/src/components/Bonding/modals/NodeSettingsModal.tsx b/nym-wallet/src/components/Bonding/modals/NodeSettingsModal.tsx
index 50a677348b..30f809e93e 100644
--- a/nym-wallet/src/components/Bonding/modals/NodeSettingsModal.tsx
+++ b/nym-wallet/src/components/Bonding/modals/NodeSettingsModal.tsx
@@ -12,6 +12,7 @@ import { simulateUpdateMixnode, simulateVestingUpdateMixnode } from 'src/request
 import { LoadingModal } from 'src/components/Modals/LoadingModal';
 import { FeeDetails } from '@nymproject/types';
 
+//Now we are using the node setting page instead of this modal
 export const NodeSettings = ({
   currentPm,
   isVesting,
diff --git a/nym-wallet/src/pages/bonding/node-settings/general-settings/InfoSettings.tsx b/nym-wallet/src/pages/bonding/node-settings/general-settings/InfoSettings.tsx
index efa04ec843..1ff5e52142 100644
--- a/nym-wallet/src/pages/bonding/node-settings/general-settings/InfoSettings.tsx
+++ b/nym-wallet/src/pages/bonding/node-settings/general-settings/InfoSettings.tsx
@@ -1,6 +1,5 @@
 import { useEffect, useState } from 'react';
-import { Box, Button, Divider, Typography, TextField, Grid } from '@mui/material';
-import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+import { Box, Button, Divider, Typography, TextField, Grid, Alert } from '@mui/material';
 import { TBondedMixnode, TBondedGateway } from '../../../../context/bonding';
 import { SimpleModal } from '../../../../components/Modals/SimpleModal';
 
@@ -39,13 +38,19 @@ export const InfoSettings = ({ bondedNode }: { bondedNode: TBondedMixnode | TBon
   return (
     <Box sx={{ width: '79.88%' }}>
       {buttonActive && (
-        <Box sx={{ width: 1, py: 1, px: 2, display: 'flex', alignItems: 'center', bgcolor: 'background.default' }}>
-          <InfoOutlinedIcon sx={{ mr: 1, color: 'info.dark' }} />
-          <Typography sx={{ color: 'info.dark' }} variant="body2">
-            <span style={{ fontWeight: 600 }}>Your changes will be ONLY saved on the display.</span> Remember to change
-            the values on your node’s config file too.
-          </Typography>
-        </Box>
+        <Alert
+          severity="info"
+          sx={{
+            px: 2,
+            borderRadius: 0,
+            bgcolor: 'background.default',
+            color: 'info.dark',
+            '& .MuiAlert-icon': { color: 'info.dark' },
+          }}
+        >
+          <strong>Your changes will be ONLY saved on the display.</strong> Remember to change the values on your node’s
+          config file too.
+        </Alert>
       )}
       <Grid container>
         <Grid item container direction="row" alignItems="left" justifyContent="space-between" padding={3}>
diff --git a/nym-wallet/src/pages/bonding/node-settings/general-settings/ParametersSettings.tsx b/nym-wallet/src/pages/bonding/node-settings/general-settings/ParametersSettings.tsx
index 901f8f1030..9d32f93270 100644
--- a/nym-wallet/src/pages/bonding/node-settings/general-settings/ParametersSettings.tsx
+++ b/nym-wallet/src/pages/bonding/node-settings/general-settings/ParametersSettings.tsx
@@ -1,6 +1,5 @@
 import { useEffect, useState } from 'react';
-import { Box, Button, Divider, Typography, TextField, InputAdornment, Grid } from '@mui/material';
-import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+import { Box, Button, Divider, Typography, TextField, InputAdornment, Grid, Alert } from '@mui/material';
 import { TBondedMixnode, TBondedGateway } from '../../../../context/bonding';
 import { SimpleModal } from '../../../../components/Modals/SimpleModal';
 
@@ -21,13 +20,18 @@ export const ParametersSettings = ({ bondedNode }: { bondedNode: TBondedMixnode
   return (
     <Box sx={{ width: '79.88%', minHeight: '' }}>
       {buttonActive && (
-        <Box sx={{ width: 1, py: 1, px: 2, display: 'flex', alignItems: 'center', bgcolor: 'background.default' }}>
-          <InfoOutlinedIcon sx={{ mr: 1, color: 'info.dark' }} />
-          <Typography sx={{ color: 'info.dark' }} variant="body2">
-            <span style={{ fontWeight: 600 }}>Your changes will be ONLY saved on the display.</span> Remember to change
-            the values on your node’s config file too.
-          </Typography>
-        </Box>
+        <Alert
+          severity="info"
+          sx={{
+            px: 2,
+            borderRadius: 0,
+            bgcolor: 'background.default',
+            color: 'info.dark',
+            '& .MuiAlert-icon': { color: 'info.dark' },
+          }}
+        >
+          <strong>Profit margin can be changed once a month, your changes will be applied in the next interval</strong>
+        </Alert>
       )}
       <Grid container direction="column">
         <Grid item container direction="row" alignItems="left" justifyContent="space-between" padding={3}>