feat(validator settings cards): create new settings cards

src/pages/ValidatorManagement/ManageValidator/ManageValidator.tsx

@@ -7,7 +7,6 @@ import ValidatorInfo from './ValidatorInfo'
 import DepositStatus from './DepositStatus'
 import Header from './Header'
 import ValidatorBalance from './ValidatorBalance'
-import ValidatorToolsCards from './ValidatorToolsCards'
 import ValidatorDataCards from './ValidatorDataCards'
 import ValidatorDataTabs from './ManageValidatorTable/ValidatorDataTabs'
 import ValidatorGraffiti from './ValidatorGraffiti'
@@ -36,7 +35,7 @@ const ManageValidator = () => {
           <DepositStatus />
           <ValidatorBalance />
         </YStack>
-        <ValidatorToolsCards />
+
         <ValidatorDataCards />
         <ValidatorSettingsCards></ValidatorSettingsCards>
         <ValidatorGraffiti />

src/pages/ValidatorManagement/ManageValidator/ValidatorSeettingsCards.tsx

@@ -1,16 +1,12 @@
 import { Stack } from 'tamagui'
 
 import ValidatorSettingCard from './ValidatorSettingCard'
-type IconKey =
+type IconKey = 'Exit Validator' | 'Migrate Validator' | 'Advanced'
-  | 'Exit Validator'
-  | 'Migrate Validator'
-  | 'Top up Validator'
-  | 'Advanced'
 
 const cardTitles: IconKey[] = [
   'Exit Validator',
   'Migrate Validator',
-  'Top up Validator',
+
   'Advanced',
 ]
 const ValidatorSettingsCards = () => {
@@ -19,10 +15,10 @@ const ValidatorSettingsCards = () => {
       style={{
         display: 'flex',
         flexDirection: 'row',
-        flexWrap: 'wrap',
-        gap: '1vw',
         width: '100%',
-        padding: '0 30px',
+        alignContent: 'center',
+        alignItems: 'center',
+        justifyContent: 'space-evenly',
       }}
     >
       {cardTitles.map(title => (

src/pages/ValidatorManagement/ManageValidator/ValidatorSettingCard.tsx

@@ -1,16 +1,7 @@
 import { Text } from '@status-im/components'
-import {
+import { DisconnectIcon, AdvancedIcon, ExternalIcon } from '@status-im/icons'
-  AddIcon,
+import { Stack, XStack, YStack } from 'tamagui'
-  DisconnectIcon,
+type IconKey = 'Exit Validator' | 'Migrate Validator' | 'Advanced'
-  AdvancedIcon,
-  ExternalIcon,
-} from '@status-im/icons'
-import { Stack, XStack } from 'tamagui'
-type IconKey =
-  | 'Exit Validator'
-  | 'Migrate Validator'
-  | 'Top up Validator'
-  | 'Advanced'
 
 type ValidatorSettingCardProps = {
   title: IconKey
@@ -18,55 +9,27 @@ type ValidatorSettingCardProps = {
 
 const ValidatorSettingCard = ({ title }: ValidatorSettingCardProps) => {
   const getIcon = {
-    'Exit Validator': () => (
+    'Exit Validator': () => <DisconnectIcon size={20}></DisconnectIcon>,
-      <DisconnectIcon
+    'Migrate Validator': () => <ExternalIcon size={20}></ExternalIcon>,
-        size={20}
+
-        style={{
+    Advanced: () => <AdvancedIcon size={20}></AdvancedIcon>,
-          padding: '5px',
-        }}
-      ></DisconnectIcon>
-    ),
-    'Migrate Validator': () => (
-      <ExternalIcon
-        size={20}
-        style={{
-          padding: '5px',
-        }}
-      ></ExternalIcon>
-    ),
-    'Top up Validator': () => (
-      <AddIcon
-        size={20}
-        style={{
-          padding: '5px',
-        }}
-      ></AddIcon>
-    ),
-    Advanced: () => (
-      <AdvancedIcon
-        size={20}
-        style={{
-          padding: '5px',
-        }}
-      ></AdvancedIcon>
-    ),
   }
   return (
+    <YStack alignItems="center">
       <Stack
         style={{
           border: '0.5px solid #DCE0E5',
-        flexGrow: '1',
           borderRadius: '16px',
           padding: '10px',
+          width: 'fit-content',
         }}
       >
-      <XStack space="$2" justifyContent="space-between" padding={'12px'}>
+        <XStack>{getIcon[title]()}</XStack>
-        <Text size={19} weight={'semibold'}>
+      </Stack>
+      <Text size={15} weight="semibold" color="#647084">
         {title}
       </Text>
-        {getIcon[title]()}
+    </YStack>
-      </XStack>
-    </Stack>
   )
 }