more styling in node

settings page

nym-wallet/src/pages/bonding/node-settings/general-settings/ParametersSettings.tsx

@@ -1,62 +1,84 @@
-import React, { useContext, useEffect } from 'react';
-import { Alert, Grid, Typography } from '@mui/material';
-import { Link } from '@nymproject/react/link/Link';
-import { NymCard, ClientAddress } from '../../../../components';
-import { AppContext, urls } from '../../../../context/main';
+import React, { useContext, useEffect, useState } from 'react';
+import { Box, Button, Divider, Typography, TextField, Grid } from '@mui/material';
 
-export const ParametersSettings = ({
-  onChange,
-  onSaveChanges,
-}: {
-  onChange: () => void;
-  onSaveChanges: () => void;
-}) => {
-  const { userBalance, clientDetails, network } = useContext(AppContext);
+export const ParametersSettings = ({ onSaveChanges }: { onSaveChanges: () => void }) => {
+  const [valueChanged, setValueChanged] = useState<boolean>(false);
+  const [mixPortValue, setMixPortValue] = useState<string>('1789');
 
-  useEffect(() => {
-    userBalance.fetchBalance();
-  }, []);
+  const profitMarginSettings = [{ id: 'profit-margin', title: 'Profit margin', value: '10%' }];
+  const operatorCostSettings = [{ id: 'operator-cost', title: 'Operator cost', value: '40 NYM' }];
 
   return (
-    <NymCard
-      title="Balance"
-      data-testid="check-balance"
-      borderless
-      Action={<ClientAddress withCopy showEntireAddress />}
-    >
-      <Grid container direction="column" spacing={2}>
-        <Grid item>
-          {userBalance.error && (
-            <Alert severity="error" data-testid="error-refresh" sx={{ p: 2 }}>
-              {userBalance.error}
-            </Alert>
-          )}
-          {!userBalance.error && (
+    <Box sx={{ width: 0.78, minHeight: '' }}>
+      <Grid container direction="column">
+        <Grid item container direction="row" alignItems="left" justifyContent="space-between" padding={3}>
+          <Grid item direction="column">
+            <Typography sx={{ fontSize: 16, fontWeight: 600, mb: 1 }}>Port</Typography>
             <Typography
-              data-testid="refresh-success"
               sx={{
-                color: 'text.primary',
-                textTransform: 'uppercase',
-                fontWeight: (theme) => (theme.palette.mode === 'light' ? '600' : '400'),
-                fontSize: 28,
+                fontSize: 14,
+                color: (t) => (t.palette.mode === 'light' ? t.palette.nym.text.muted : 'text.primary'),
               }}
-              variant="h5"
             >
-              {userBalance.balance?.printable_balance}
+              Change profit margin of your node
             </Typography>
-          )}
-        </Grid>
-        {network && (
-          <Grid item>
-            <Link
-              href={`${urls(network).blockExplorer}/account/${clientDetails?.client_address}`}
-              target="_blank"
-              text="Last transactions"
-              fontSize={14}
-            />
           </Grid>
-        )}
+          <Grid spacing={3} item container alignItems="center" maxWidth="348px">
+            {profitMarginSettings.map((item) => (
+              <Grid item width={1} spacing={3}>
+                <TextField
+                  type="input"
+                  label={item.title}
+                  value={item.value}
+                  onChange={(e) => console.log(`Field ${item.id} has change`, e.target.value)}
+                  autoFocus
+                  fullWidth
+                />
+              </Grid>
+            ))}
+          </Grid>
+        </Grid>
+        <Divider flexItem />
+        <Grid item container direction="row" alignItems="left" justifyContent="space-between" padding={3}>
+          <Grid item direction="column">
+            <Typography sx={{ fontSize: 16, fontWeight: 600, mb: 1 }}>Host</Typography>
+            <Typography
+              sx={{
+                fontSize: 14,
+                color: (t) => (t.palette.mode === 'light' ? t.palette.nym.text.muted : 'text.primary'),
+              }}
+            >
+              Lock wallet after certain time
+            </Typography>
+          </Grid>
+          <Grid spacing={3} item container alignItems="center" maxWidth="348px">
+            {operatorCostSettings.map((item) => (
+              <Grid item width={1} spacing={3}>
+                <TextField
+                  type="input"
+                  label={item.title}
+                  value={item.value}
+                  onChange={(e) => console.log(`Field ${item.id} has change`, e.target.value)}
+                  autoFocus
+                  fullWidth
+                />
+              </Grid>
+            ))}
+          </Grid>
+        </Grid>
+        <Divider flexItem />
+        <Grid container justifyContent="end">
+          <Button
+            size="large"
+            variant="contained"
+            disabled={!valueChanged}
+            onClick={onSaveChanges}
+            sx={{ m: 3, width: '320px' }}
+          >
+            Save all changes
+          </Button>
+        </Grid>
       </Grid>
-    </NymCard>
+    </Box>
   );
 };

nym-wallet/src/pages/bonding/node-settings/general-settings/index.tsx

@@ -1,6 +1,7 @@
 import React, { useContext, useEffect, useState } from 'react';
 import { Box, Button, Divider, Grid, withStyles } from '@mui/material';
 import { InfoSettings } from './InfoSettings';
+import { ParametersSettings } from './ParametersSettings';
 import { AppContext } from '../../../../context/main';
 
 const nodeGeneralNav = ['Info', 'Parameters'];
@@ -22,6 +23,7 @@ export const NodeGeneralSettings = ({ onSaveChanges }: { onSaveChanges: () => vo
             <Button
               size="small"
               sx={{
+                fontSize: 14,
                 color: settingsCard === item ? 'primary.main' : 'inherit',
                 justifyContent: 'start',
                 ':hover': {
@@ -37,7 +39,7 @@ export const NodeGeneralSettings = ({ onSaveChanges }: { onSaveChanges: () => vo
         </Grid>
         <Divider orientation="vertical" flexItem />
         {settingsCard === nodeGeneralNav[0] && <InfoSettings onSaveChanges={() => console.log('saving...')} />}
-        {settingsCard === nodeGeneralNav[1] && <h1>bye</h1>}
+        {settingsCard === nodeGeneralNav[1] && <ParametersSettings onSaveChanges={() => console.log('saving...')} />}
       </Grid>
     </Box>
   );

nym-wallet/src/pages/bonding/node-settings/index.tsx

@@ -50,7 +50,24 @@ export const NodeSettingsPage = () => {
             </Box>
             <Toolbar disableGutters sx={{ height: '30px' }}>
               {nodeSettingsNav.map((item) => (
-                <Button size="small" sx={{ p: 0, mr: 2, color: 'inherit' }} onClick={() => setSettingsCard(item)}>
+                <Button
+                  size="small"
+                  sx={{
+                    p: 0,
+                    mr: 4,
+                    fontWeight: 600,
+                    color: settingsCard === item ? 'primary.main' : '#B9B9B9',
+                    textDecoration: settingsCard === item ? 'underline' : 'none',
+                    textDecorationThickness: '4px',
+                    textUnderlineOffset: '4px',
+                    justifyContent: 'start',
+                    ':hover': {
+                      bgcolor: 'transparent',
+                      color: 'primary.main',
+                    },
+                  }}
+                  onClick={() => setSettingsCard(item)}
+                >
                   {item}
                 </Button>
               ))}