From e76b4f00a2050b30c728bc8878207adc1af86819 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Tue, 26 Mar 2024 11:40:15 +0200
Subject: [PATCH] fix(manage-validator): paddings of the left side

---
 .../ManageValidator/LeftManage/LeftManage.tsx | 38 ++++++++++---------
 .../ValidatorDataTabs.tsx                     |  9 ++---
 .../LeftManage/PageParts/Footer.tsx           |  7 +---
 .../LeftManage/PageParts/Header.tsx           |  8 +++-
 .../DepositStatus/DepositStatus.tsx           | 10 ++---
 .../ValidatorBlueSection/ValidatorBalance.tsx |  4 --
 .../ValidatorBlueSection.tsx                  |  6 ++-
 .../ValidatorBlueSection/ValidatorInfo.tsx    |  2 +-
 .../ValidatorDataCards/ValidatorDataCards.tsx |  1 -
 .../ValidatorGraffiti/ValidatorGraffiti.tsx   |  2 -
 .../ValidatorSettingsCards.tsx                |  3 +-
 11 files changed, 42 insertions(+), 48 deletions(-)

diff --git a/src/pages/ManageValidator/LeftManage/LeftManage.tsx b/src/pages/ManageValidator/LeftManage/LeftManage.tsx
index aaefcfeb..a1abcab8 100644
--- a/src/pages/ManageValidator/LeftManage/LeftManage.tsx
+++ b/src/pages/ManageValidator/LeftManage/LeftManage.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { Stack } from 'tamagui'
+import { YStack } from 'tamagui'
 import { InformationBox } from '@status-im/components'
 import { CloseCircleIcon } from '@status-im/icons'
 
@@ -8,36 +8,38 @@ import ValidatorDataCards from './ValidatorDataCards/ValidatorDataCards'
 import ValidatorSettingsCards from './ValidatorSettingsCards/ValidatorSettingsCards'
 import ValidatorGraffiti from './ValidatorGraffiti/ValidatorGraffiti'
 import ValidatorDataTabs from './ManageValidatorTable/ValidatorDataTabs'
-import Footer from './PageParts/Footer'
 import ValidatorBlueSection from './ValidatorBlueSection/ValidatorBlueSection'
+import Footer from './PageParts/Footer'
 
 const LeftManage = () => {
   const [isVisibleWarning, setIsVisibleWarning] = useState(true)
 
   return (
-    <Stack
+    <YStack
       width={'50%'}
       maxWidth="50%"
       flexGrow={1}
-      space={'$2'}
+      space={'$3'}
       style={{ borderRight: '1px solid #DCE0E5' }}
     >
       <Header />
       <ValidatorBlueSection />
-      <ValidatorDataCards />
-      <ValidatorSettingsCards />
-      <ValidatorGraffiti />
-      <ValidatorDataTabs />
-      {isVisibleWarning && (
-        <InformationBox
-          message="Your Validator balance is currently 0 ETH and requires a deposit."
-          variant="error"
-          icon={<CloseCircleIcon size={20} />}
-          onClosePress={() => setIsVisibleWarning(false)}
-        />
-      )}
-      <Footer />
-    </Stack>
+      <YStack space={'$3'} style={{ padding: '15px 15px 30px 30px' }}>
+        <ValidatorDataCards />
+        <ValidatorSettingsCards />
+        <ValidatorGraffiti />
+        <ValidatorDataTabs />
+        {isVisibleWarning && (
+          <InformationBox
+            message="Your Validator balance is currently 0 ETH and requires a deposit."
+            variant="error"
+            icon={<CloseCircleIcon size={20} />}
+            onClosePress={() => setIsVisibleWarning(false)}
+          />
+        )}
+        <Footer />
+      </YStack>
+    </YStack>
   )
 }
 
diff --git a/src/pages/ManageValidator/LeftManage/ManageValidatorTable/ValidatorDataTabs.tsx b/src/pages/ManageValidator/LeftManage/ManageValidatorTable/ValidatorDataTabs.tsx
index 56203e64..2ed99791 100644
--- a/src/pages/ManageValidator/LeftManage/ManageValidatorTable/ValidatorDataTabs.tsx
+++ b/src/pages/ManageValidator/LeftManage/ManageValidatorTable/ValidatorDataTabs.tsx
@@ -13,7 +13,7 @@ const ValidatorDataTabs = () => {
     (state: RootState) => state.manageValidatorTab.currentTab,
   )
   return (
-    <Stack marginLeft="30px">
+    <Stack>
       <Tabs
         defaultValue={'' + MANAGE_VALIDATOR_TABS[currentTab]}
         onValueChange={(value: string) =>
@@ -21,10 +21,7 @@ const ValidatorDataTabs = () => {
         }
       >
         <div className="tabs transparent-scrollbar">
-          <Stack
-            maxWidth={'120px'}
-            style={{ cursor: 'pointer', margin: '8px 0' }}
-          >
+          <Stack style={{ cursor: 'pointer', margin: '8px 0' }}>
             <Tabs.List size={32} variant="grey">
               {MANAGE_VALIDATOR_TABS.map((tab, index) => (
                 <Tabs.Trigger key={index} type="default" value={tab}>
@@ -35,7 +32,7 @@ const ValidatorDataTabs = () => {
           </Stack>
         </div>
         {MANAGE_VALIDATOR_TABS.map(tab => (
-          <Tabs.Content key={tab} value={tab} style={{ marginTop: '8px' }}>
+          <Tabs.Content key={tab} value={tab}>
             <ValidatorTable />
           </Tabs.Content>
         ))}
diff --git a/src/pages/ManageValidator/LeftManage/PageParts/Footer.tsx b/src/pages/ManageValidator/LeftManage/PageParts/Footer.tsx
index 16d46fd6..4daf9dfc 100644
--- a/src/pages/ManageValidator/LeftManage/PageParts/Footer.tsx
+++ b/src/pages/ManageValidator/LeftManage/PageParts/Footer.tsx
@@ -6,12 +6,7 @@ import Icon from '../../../../components/General/Icon'
 
 const Footer = () => {
   return (
-    <XStack
-      justifyContent="space-between"
-      marginLeft="30px"
-      padding="10px"
-      marginRight="20px"
-    >
+    <XStack justifyContent="space-between">
       <Text
         color="#2F80ED"
         fontSize={15}
diff --git a/src/pages/ManageValidator/LeftManage/PageParts/Header.tsx b/src/pages/ManageValidator/LeftManage/PageParts/Header.tsx
index ce18ee3f..c02db270 100644
--- a/src/pages/ManageValidator/LeftManage/PageParts/Header.tsx
+++ b/src/pages/ManageValidator/LeftManage/PageParts/Header.tsx
@@ -5,7 +5,13 @@ import Titles from '../../../../components/General/Titles'
 
 const Header = () => {
   return (
-    <XStack justifyContent="space-between" alignItems="center" padding="30px">
+    <XStack
+      style={{
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        padding: '30px 25px 0px 30px',
+      }}
+    >
       <XStack alignItems="flex-end">
         <Titles title="Manage Validator" titleSize={27} subtitle="" />
       </XStack>
diff --git a/src/pages/ManageValidator/LeftManage/ValidatorBlueSection/DepositStatus/DepositStatus.tsx b/src/pages/ManageValidator/LeftManage/ValidatorBlueSection/DepositStatus/DepositStatus.tsx
index 22c87838..bbab7f06 100644
--- a/src/pages/ManageValidator/LeftManage/ValidatorBlueSection/DepositStatus/DepositStatus.tsx
+++ b/src/pages/ManageValidator/LeftManage/ValidatorBlueSection/DepositStatus/DepositStatus.tsx
@@ -29,24 +29,22 @@ const DepositStatus = () => {
       backgroundColor="#fff"
       borderRadius="$10"
       marginTop="0px"
-      marginLeft="30px"
-      marginRight="20px"
       padding="10px"
       paddingBottom="0px"
       justifyContent="space-between"
     >
       <XStack space="$3">
-        <Stack width={'40px'} height={'40px'}>
+        <Stack width={'50px'} height={'50px'}>
           <DepositStatusPieChart
             data={depositStatusData}
             isInteractive={false}
           />
         </Stack>
-        <YStack>
-          <Text size={11} color="#647084">
+        <YStack space={'$2'}>
+          <Text size={13} color="#647084">
             Status
           </Text>
-          <Text size={11} color="#E95460" weight={'semibold'}>
+          <Text size={13} color="#E95460" weight={'semibold'}>
             Requires Deposit
           </Text>
         </YStack>
diff --git a/src/pages/ManageValidator/LeftManage/ValidatorBlueSection/ValidatorBalance.tsx b/src/pages/ManageValidator/LeftManage/ValidatorBlueSection/ValidatorBalance.tsx
index 9e213f7d..1286a573 100644
--- a/src/pages/ManageValidator/LeftManage/ValidatorBlueSection/ValidatorBalance.tsx
+++ b/src/pages/ManageValidator/LeftManage/ValidatorBlueSection/ValidatorBalance.tsx
@@ -12,10 +12,6 @@ const ValidatorBalance = () => {
       space={'$2'}
       backgroundColor="#2A4AF5"
       borderRadius="$10"
-      marginTop="0px"
-      marginLeft="30px"
-      marginRight="20px"
-      marginBottom="30px"
       padding="15px"
       justifyContent="space-between"
     >
diff --git a/src/pages/ManageValidator/LeftManage/ValidatorBlueSection/ValidatorBlueSection.tsx b/src/pages/ManageValidator/LeftManage/ValidatorBlueSection/ValidatorBlueSection.tsx
index 8f5ec8e2..849c43ab 100644
--- a/src/pages/ManageValidator/LeftManage/ValidatorBlueSection/ValidatorBlueSection.tsx
+++ b/src/pages/ManageValidator/LeftManage/ValidatorBlueSection/ValidatorBlueSection.tsx
@@ -6,7 +6,11 @@ import ValidatorBalance from './ValidatorBalance'
 
 const ValidatorBlueSection = () => {
   return (
-    <YStack backgroundColor="#F4F6FE" space={'$3'}>
+    <YStack
+      backgroundColor="#F4F6FE"
+      space={'$3'}
+      style={{ padding: '30px 15px 15px 30px' }}
+    >
       <ValidatorInfo />
       <DepositStatus />
       <ValidatorBalance />
diff --git a/src/pages/ManageValidator/LeftManage/ValidatorBlueSection/ValidatorInfo.tsx b/src/pages/ManageValidator/LeftManage/ValidatorBlueSection/ValidatorInfo.tsx
index 59ce2c55..2939bb6e 100644
--- a/src/pages/ManageValidator/LeftManage/ValidatorBlueSection/ValidatorInfo.tsx
+++ b/src/pages/ManageValidator/LeftManage/ValidatorBlueSection/ValidatorInfo.tsx
@@ -7,7 +7,7 @@ import Icon from '../../../../components/General/Icon'
 
 const ValidatorInfo = () => {
   return (
-    <XStack space={'$2'} padding="30px" justifyContent="space-between">
+    <XStack space={'$2'} justifyContent="space-between">
       <XStack space="$2">
         <Avatar
           type="user"
diff --git a/src/pages/ManageValidator/LeftManage/ValidatorDataCards/ValidatorDataCards.tsx b/src/pages/ManageValidator/LeftManage/ValidatorDataCards/ValidatorDataCards.tsx
index 53fd17d5..8bbacdd2 100644
--- a/src/pages/ManageValidator/LeftManage/ValidatorDataCards/ValidatorDataCards.tsx
+++ b/src/pages/ManageValidator/LeftManage/ValidatorDataCards/ValidatorDataCards.tsx
@@ -12,7 +12,6 @@ const ValidatorDataCards = () => {
         flexWrap: 'wrap',
         gap: '1vw',
         width: '100%',
-        padding: '0 30px',
       }}
     >
       <ValidatorPeersCard title="Peers" value="67" />
diff --git a/src/pages/ManageValidator/LeftManage/ValidatorGraffiti/ValidatorGraffiti.tsx b/src/pages/ManageValidator/LeftManage/ValidatorGraffiti/ValidatorGraffiti.tsx
index 4f1fbcd8..e8bb096d 100644
--- a/src/pages/ManageValidator/LeftManage/ValidatorGraffiti/ValidatorGraffiti.tsx
+++ b/src/pages/ManageValidator/LeftManage/ValidatorGraffiti/ValidatorGraffiti.tsx
@@ -5,11 +5,9 @@ const ValidatorGraffiti = () => {
   return (
     <Stack
       style={{
-        marginLeft: '30px',
         border: '0.5px solid #DCE0E5',
         borderRadius: '16px',
         padding: '20px',
-        marginRight: '30px',
       }}
     >
       <XStack space="$4">
diff --git a/src/pages/ManageValidator/LeftManage/ValidatorSettingsCards/ValidatorSettingsCards.tsx b/src/pages/ManageValidator/LeftManage/ValidatorSettingsCards/ValidatorSettingsCards.tsx
index 0c30cfc8..c32f7f3f 100644
--- a/src/pages/ManageValidator/LeftManage/ValidatorSettingsCards/ValidatorSettingsCards.tsx
+++ b/src/pages/ManageValidator/LeftManage/ValidatorSettingsCards/ValidatorSettingsCards.tsx
@@ -13,8 +13,7 @@ const ValidatorSettingsCards = () => {
         alignContent: 'center',
         alignItems: 'center',
         justifyContent: 'space-evenly',
-        paddingTop: '20px',
-        paddingBottom: '20px',
+        paddingBottom: '15px',
       }}
     >
       {VALIDATOR_SETTINGS_CARDS_TITLES.map(title => (