1
0
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:
Thomas Heartman 2024-07-23 09:24:53 +02:00
parent 78982e6f92
commit bfb8bc71ae
No known key found for this signature in database
GPG Key ID: BD1F880DAED1EE78
2 changed files with 19 additions and 24 deletions

View File

@ -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',
}, },

View File

@ -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>