mirror of
https://github.com/Unleash/unleash.git
synced 2025-08-23 13:46:45 +02:00
Consolidate spacing in containers:
This commit is contained in:
parent
78982e6f92
commit
bfb8bc71ae
@ -72,10 +72,9 @@ const Collaborators: FC<CollaboratorListProps> = ({ users }) => {
|
|||||||
const Container = styled('article')(({ theme }) => ({
|
const Container = styled('article')(({ theme }) => ({
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
flexDirection: 'row',
|
flexDirection: 'row',
|
||||||
gap: theme.spacing(4),
|
gap: theme.spacing(10),
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
justifyContent: 'space-between',
|
justifyContent: 'space-between',
|
||||||
marginInlineEnd: theme.spacing(4),
|
|
||||||
[theme.breakpoints.down('xl')]: {
|
[theme.breakpoints.down('xl')]: {
|
||||||
display: 'none',
|
display: 'none',
|
||||||
},
|
},
|
||||||
|
@ -117,11 +117,9 @@ const StyledSeparator = styled('div')(({ theme }) => ({
|
|||||||
const StyledTabRow = styled('div')(({ theme }) => ({
|
const StyledTabRow = styled('div')(({ theme }) => ({
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
flexFlow: 'row nowrap',
|
flexFlow: 'row nowrap',
|
||||||
}));
|
gap: theme.spacing(4),
|
||||||
|
paddingInline: theme.spacing(4),
|
||||||
const StyledTabContainer = styled('div')(({ theme }) => ({
|
justifyContent: 'space-between',
|
||||||
padding: theme.spacing(0, 4),
|
|
||||||
flex: '1',
|
|
||||||
}));
|
}));
|
||||||
|
|
||||||
const StyledTabButton = styled(Tab)(({ theme }) => ({
|
const StyledTabButton = styled(Tab)(({ theme }) => ({
|
||||||
@ -363,23 +361,21 @@ export const FeatureView = () => {
|
|||||||
</StyledInnerContainer>
|
</StyledInnerContainer>
|
||||||
<StyledSeparator />
|
<StyledSeparator />
|
||||||
<StyledTabRow>
|
<StyledTabRow>
|
||||||
<StyledTabContainer>
|
<Tabs
|
||||||
<Tabs
|
value={activeTab.path}
|
||||||
value={activeTab.path}
|
indicatorColor='primary'
|
||||||
indicatorColor='primary'
|
textColor='primary'
|
||||||
textColor='primary'
|
>
|
||||||
>
|
{tabData.map((tab) => (
|
||||||
{tabData.map((tab) => (
|
<StyledTabButton
|
||||||
<StyledTabButton
|
key={tab.title}
|
||||||
key={tab.title}
|
label={tab.title}
|
||||||
label={tab.title}
|
value={tab.path}
|
||||||
value={tab.path}
|
onClick={() => navigate(tab.path)}
|
||||||
onClick={() => navigate(tab.path)}
|
data-testid={`TAB-${tab.title}`}
|
||||||
data-testid={`TAB-${tab.title}`}
|
/>
|
||||||
/>
|
))}
|
||||||
))}
|
</Tabs>
|
||||||
</Tabs>
|
|
||||||
</StyledTabContainer>
|
|
||||||
<Collaborators collaborators={feature.collaborators} />
|
<Collaborators collaborators={feature.collaborators} />
|
||||||
</StyledTabRow>
|
</StyledTabRow>
|
||||||
</StyledHeader>
|
</StyledHeader>
|
||||||
|
Loading…
Reference in New Issue
Block a user