status-im/nimbus-gui
2
0
Fork 0
mirror of https://github.com/status-im/nimbus-gui.git synced 2025-02-27 18:40:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(management-tabs): merge components and move style

Browse Source
This commit is contained in:
RadoslavDimchev 2024-04-09 21:34:23 +03:00 committed by Emil Ivanichkov
parent e5833cf4a0
commit 5e4f00e67e
2 changed files with 36 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/pages/ValidatorManagement/ManagementTabs.tsx
View File

@ -1,5 +1,5 @@
import { Tabs } from '@status-im/components' import { Tabs } from '@status-im/components'
import { Stack, XStack } from 'tamagui' import { XStack } from 'tamagui'
import { useEffect, useMemo, useState } from 'react' import { useEffect, useMemo, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux' import { useDispatch, useSelector } from 'react-redux'
@ -8,6 +8,7 @@ import ManagementTable from './ManagementTable/ManagementTable'
import SearchManagement from './ManagementTable/SearchManagement' import SearchManagement from './ManagementTable/SearchManagement'
import DropdownFilter from './ManagementTable/DropdownFilter' import DropdownFilter from './ManagementTable/DropdownFilter'
import { RootState } from '../../redux/store' import { RootState } from '../../redux/store'
import styles from './validatorManagement.module.css'
export type Validator = { export type Validator = {
name: string name: string
@ -87,37 +88,29 @@ const ManagementTabs = () => {
defaultValue={VALIDATOR_TABS_MANAGEMENT[0]} defaultValue={VALIDATOR_TABS_MANAGEMENT[0]}
onValueChange={changeCurrentTabHandler} onValueChange={changeCurrentTabHandler}
> >
<div <div className={styles['tabs-settings-container']}>
className="tabs transparent-scrollbar" <div
style={{ className="transparent-scrollbar"
borderTopLeftRadius: '16px', style={{
borderTopRightRadius: '16px', cursor: 'pointer',
borderBottom: '1px solid #E7EAEE', overflowX: 'auto',
backgroundColor: '#fafbfc', whiteSpace: 'nowrap',
}} }}
>
<XStack
space={'$3'}
justifyContent="space-between"
alignItems="center"
style={{ padding: '8px 16px' }}
> >
<Stack maxWidth={'120px'} style={{ cursor: 'pointer' }}> <Tabs.List size={32} variant="grey">
<Tabs.List size={32} variant="grey"> {VALIDATOR_TABS_MANAGEMENT.map(tab => (
{VALIDATOR_TABS_MANAGEMENT.map(tab => ( <Tabs.Trigger key={tab} type="default" value={tab}>
<Tabs.Trigger key={tab} type="default" value={tab}> {`${currentTab === tab ? filteredValidators.length.toString() : ''} ${tab}`}
{`${currentTab === tab ? filteredValidators.length.toString() : ''} ${tab}`} </Tabs.Trigger>
</Tabs.Trigger> ))}
))} </Tabs.List>
</Tabs.List> </div>
</Stack> <XStack space={'$3'} alignItems="center">
<XStack space={'$3'} alignItems="center"> <SearchManagement
<SearchManagement searchValue={searchValue}
searchValue={searchValue} changeSearchValue={changeSearchValue}
changeSearchValue={changeSearchValue} />
/> <DropdownFilter />
<DropdownFilter />
</XStack>
</XStack> </XStack>
</div> </div>
{VALIDATOR_TABS_MANAGEMENT.map(tab => ( {VALIDATOR_TABS_MANAGEMENT.map(tab => (

12
src/pages/ValidatorManagement/validatorManagement.module.css
View File

@ -16,6 +16,18 @@
} }
} }
.tabs-settings-container {
display: flex;
gap: 16px;
justify-content: space-between;
align-items: center;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
border-bottom: 1px solid #e7eaee;
background-color: #fafbfc;
padding: 8px 16px;
}
@media (max-width: 600px) { @media (max-width: 600px) {
.tabs { .tabs {
overflow-x: auto; overflow-x: auto;