status-im/nimbus-gui
2
0
Fork 0
mirror of https://github.com/status-im/nimbus-gui.git synced 2025-02-28 02:50:45 +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

23
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,22 +88,15 @@ const ManagementTabs = () => {
defaultValue={VALIDATOR_TABS_MANAGEMENT[0]} defaultValue={VALIDATOR_TABS_MANAGEMENT[0]}
onValueChange={changeCurrentTabHandler} onValueChange={changeCurrentTabHandler}
> >
<div className={styles['tabs-settings-container']}>
<div <div
className="tabs transparent-scrollbar" className="transparent-scrollbar"
style={{ style={{
borderTopLeftRadius: '16px', cursor: 'pointer',
borderTopRightRadius: '16px', overflowX: 'auto',
borderBottom: '1px solid #E7EAEE', whiteSpace: 'nowrap',
backgroundColor: '#fafbfc',
}} }}
> >
<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}>
@ -110,7 +104,7 @@ const ManagementTabs = () => {
</Tabs.Trigger> </Tabs.Trigger>
))} ))}
</Tabs.List> </Tabs.List>
</Stack> </div>
<XStack space={'$3'} alignItems="center"> <XStack space={'$3'} alignItems="center">
<SearchManagement <SearchManagement
searchValue={searchValue} searchValue={searchValue}
@ -118,7 +112,6 @@ const ManagementTabs = () => {
/> />
<DropdownFilter /> <DropdownFilter />
</XStack> </XStack>
</XStack>
</div> </div>
{VALIDATOR_TABS_MANAGEMENT.map(tab => ( {VALIDATOR_TABS_MANAGEMENT.map(tab => (
<Tabs.Content key={tab} value={tab} style={{ marginTop: '8px' }}> <Tabs.Content key={tab} value={tab} style={{ marginTop: '8px' }}>

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;