From caa0bc4e1e0ff05504904bb4e15782b70ec0b53d Mon Sep 17 00:00:00 2001
From: gala1234 <calero.vg@gmail.com>
Date: Tue, 5 Apr 2022 10:10:36 +0200
Subject: [PATCH] some ui changes on modal

---
 nym-wallet/src/pages/validators/index.tsx | 51 +++++++++++++++++------
 1 file changed, 39 insertions(+), 12 deletions(-)

diff --git a/nym-wallet/src/pages/validators/index.tsx b/nym-wallet/src/pages/validators/index.tsx
index f95c368843..2c725521ef 100644
--- a/nym-wallet/src/pages/validators/index.tsx
+++ b/nym-wallet/src/pages/validators/index.tsx
@@ -1,5 +1,5 @@
 import React, { useContext, useEffect, useState } from 'react';
-import { Button, Box, Dialog, CircularProgress } from '@mui/material';
+import { Button, Box, Dialog, CircularProgress, Typography } from '@mui/material';
 import { Tabs } from '../settings/tabs';
 import { NymCard } from '../../components';
 import { ClientContext } from '../../context/main';
@@ -47,25 +47,52 @@ export const ValidatorSettings = () => {
                 }
                 noPadding
             >
+                <Box
+                    sx={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        padding: 3,
+                        borderTop: '1px solid',
+                        borderColor: 'grey.300',
+                    }}
+                >
+                    <Typography
+                        variant="h6"
+                        sx={{
+                            fontWeight: 600,
+                        }}>
+                        Wallet Settings
+                    </Typography>
+                </Box>
                 <>
                     <Tabs tabs={tabs} selectedTab={selectedTab} onChange={handleTabChange} disabled={false} />
-                    {selectedTab === 0 &&
-                        <ValidatorSelector
-                            type={tabs[selectedTab]}
-                            onChangeValidatorSelection={(selectedValidator) => onDataChanged(selectedValidator)}
-                        />
-                    }
-                    {selectedTab === 1 &&
-                        <ValidatorSelector
-                            type={tabs[selectedTab]} onChangeValidatorSelection={(selectedAPI) => onDataChanged(selectedAPI)}
-                        />
-                    }
+                    <Box
+                        sx={{
+                            display: 'flex',
+                            alignItems: 'center',
+                            padding: 3,
+                        }}
+                    >
+                        {selectedTab === 0 &&
+                            <ValidatorSelector
+                                type="Validator API Url"
+                                onChangeValidatorSelection={(selectedValidator) => onDataChanged(selectedValidator)}
+                            />
+                        }
+                        {selectedTab === 1 &&
+                            <ValidatorSelector
+                                type={tabs[selectedTab]} onChangeValidatorSelection={(selectedAPI) => onDataChanged(selectedAPI)}
+                            />
+                        }
+                    </Box>
                 </>
                 <Box
                     sx={{
                         display: 'flex',
                         alignItems: 'center',
                         justifyContent: 'flex-end',
+                        padding: 3,
+                        bgcolor: 'grey.200',
                     }}
                 >
                     <Button