From 9a930e3e39511b64d3155c32d37d9ab30ee55ac6 Mon Sep 17 00:00:00 2001
From: Ivana Andersson <ivana.p.kostova@gmail.com>
Date: Wed, 27 Sep 2023 17:51:21 +0300
Subject: [PATCH] fix: add aome spacing to the validator list

---
 .../Dashboard/RightSideBar/ValidatorsList.tsx | 74 ++++++++++---------
 1 file changed, 40 insertions(+), 34 deletions(-)

diff --git a/src/pages/Dashboard/RightSideBar/ValidatorsList.tsx b/src/pages/Dashboard/RightSideBar/ValidatorsList.tsx
index 7192b7c1..0b139785 100644
--- a/src/pages/Dashboard/RightSideBar/ValidatorsList.tsx
+++ b/src/pages/Dashboard/RightSideBar/ValidatorsList.tsx
@@ -1,40 +1,46 @@
-import { Stack, YStack } from "tamagui";
-import ValidatorListItem from "./ValidatorListItem";
-import InputSearch from "./SearchInput";
-import { useState, useEffect } from "react";
+import { Stack, YStack } from 'tamagui'
+import ValidatorListItem from './ValidatorListItem'
+import InputSearch from './SearchInput'
+import { useState, useEffect } from 'react'
 
 const ValidatorsList = () => {
-    const [searchValue, setSearchValue] = useState('');
-    const validators = [
-        { name: 'Validator 1', avatarKey: '37880sfsef38fsb', selected: true, isAvatarChipIncluded: true, isVerified: true },
-        { name: 'Validator 2', avatarKey: 'hs880sfsef38fsb', isVerified: true },
-        { name: 'Validator 3', avatarKey: '3nh880sfsef38fsb', isAvatarChipIncluded: true },
-        { name: 'Validator 4', avatarKey: 'fh7880sfsef38fsb' },
-        { name: 'Validator 5', avatarKey: 'j77880s..fsef38fsb' , isVerified: true},
-    ];
-    const [filteredValidators, setFilteredValidators] = useState(validators);
+  const [searchValue, setSearchValue] = useState('')
+  const validators = [
+    {
+      name: 'Validator 1',
+      avatarKey: '37880sfsef38fsb',
+      selected: true,
+      isAvatarChipIncluded: true,
+      isVerified: true,
+    },
+    { name: 'Validator 2', avatarKey: 'hs880sfsef38fsb', isVerified: true },
+    { name: 'Validator 3', avatarKey: '3nh880sfsef38fsb', isAvatarChipIncluded: true },
+    { name: 'Validator 4', avatarKey: 'fh7880sfsef38fsb' },
+    { name: 'Validator 5', avatarKey: 'j77880s..fsef38fsb', isVerified: true },
+  ]
+  const [filteredValidators, setFilteredValidators] = useState(validators)
 
-    useEffect(() => {
-        if (searchValue) {
-            const filtered = validators.filter(validator =>
-                validator.name.toLowerCase().includes(searchValue.toLowerCase())
-            );
-            setFilteredValidators(filtered);
-        } else {
-            setFilteredValidators(validators);
-        }
-    }, [searchValue, validators]);
+  useEffect(() => {
+    if (searchValue) {
+      const filtered = validators.filter(validator =>
+        validator.name.toLowerCase().includes(searchValue.toLowerCase()),
+      )
+      setFilteredValidators(filtered)
+    } else {
+      setFilteredValidators(validators)
+    }
+  }, [searchValue, validators])
 
-    return (
-        <Stack>
-            <InputSearch value={searchValue} setValue={setSearchValue} />
-            <YStack space={'$1'}>
-                {filteredValidators.map(validator => (
-                    <ValidatorListItem {...validator} />
-                ))}
-            </YStack>
-        </Stack>
-    );
+  return (
+    <Stack>
+      <InputSearch value={searchValue} setValue={setSearchValue} />
+      <YStack space={'$1'} mt={'16px'}>
+        {filteredValidators.map(validator => (
+          <ValidatorListItem {...validator} />
+        ))}
+      </YStack>
+    </Stack>
+  )
 }
 
-export default ValidatorsList;
+export default ValidatorsList