fix(manage-validator): paddings of the left side

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>
   )
 }
 

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>
         ))}

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}

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>

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>

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"
     >

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 />

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"

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" />

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">

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 => (