Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-25 00:07:47 +01:00
Code Issues Projects Releases Wiki Activity

feat(onboarding): improve styles (#8323)

Browse Source 
Adjust spacing between elements.
This commit is contained in:
Tymoteusz Czech 2024-10-02 11:20:26 +02:00 committed by GitHub
parent aa28b78c30
commit 3ac2c17a8e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 46 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/src/component/onboarding/flow/ProjectOnboarding.tsx
View File

@ -31,7 +31,7 @@ const Container = styled('div')(({ theme }) => ({
})); }));
const TitleBox = styled('div')(({ theme }) => ({ const TitleBox = styled('div')(({ theme }) => ({
padding: theme.spacing(2, 7, 2, 7), padding: theme.spacing(2, 2.5, 2, 5),
borderBottom: '1px solid', borderBottom: '1px solid',
borderColor: theme.palette.divider, borderColor: theme.palette.divider,
minHeight: '80px', minHeight: '80px',
@ -40,11 +40,16 @@ const TitleBox = styled('div')(({ theme }) => ({
const Actions = styled('div')(({ theme }) => ({ const Actions = styled('div')(({ theme }) => ({
display: 'flex', display: 'flex',
flexGrow: 1, flexGrow: 1,
gap: theme.spacing(7),
padding: theme.spacing(3, 5),
[theme.breakpoints.down('md')]: {
flexDirection: 'column',
gap: theme.spacing(7),
},
})); }));
const ActionBox = styled('div')(({ theme }) => ({ const ActionBox = styled('div')(({ theme }) => ({
flexBasis: '50%', flexBasis: '50%',
padding: theme.spacing(3, 2, 6, 8),
display: 'flex', display: 'flex',
gap: theme.spacing(3), gap: theme.spacing(3),
flexDirection: 'column', flexDirection: 'column',
@ -114,7 +119,7 @@ export const ProjectOnboarding = ({
}; };
return ( return (
<Container> <Container data-testid='container'>
<TitleBox> <TitleBox>
<TitleRow> <TitleRow>
<Typography fontWeight='bold'> <Typography fontWeight='bold'>

54
frontend/src/component/onboarding/flow/SdkExample.tsx
View File

@ -1,4 +1,10 @@
import { type SelectChangeEvent, styled, Typography } from '@mui/material'; import {
Box,
Button,
type SelectChangeEvent,
styled,
Typography,
} from '@mui/material';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { useLocalStorageState } from 'hooks/useLocalStorageState'; import { useLocalStorageState } from 'hooks/useLocalStorageState';
import Select from 'component/common/select'; import Select from 'component/common/select';
@ -13,11 +19,17 @@ const TitleContainer = styled('div')(({ theme }) => ({
fontWeight: 'bold', fontWeight: 'bold',
})); }));
const StyledLink = styled(Link)({ const StyledButton = styled(Button<typeof Link>)({
fontWeight: 'bold', fontWeight: 'bold',
textDecoration: 'none', textDecoration: 'none',
}); });
const SelectWithButton = styled(Box)(({ theme }) => ({
display: 'flex',
flexDirection: 'column',
gap: theme.spacing(1),
}));
const repositoryUrl = const repositoryUrl =
'https://github.com/Unleash/unleash-sdk-examples/tree/main'; 'https://github.com/Unleash/unleash-sdk-examples/tree/main';
@ -56,21 +68,31 @@ export const SdkExample = () => {
<> <>
<TitleContainer>View SDK Example</TitleContainer> <TitleContainer>View SDK Example</TitleContainer>
<Typography> <Typography>
Choose your preferred SDK to view an example Choose your preferred SDK to view an example.
</Typography> </Typography>
<Select <SelectWithButton>
id='sdk-select' <Select
name='sdk' id='sdk-select'
options={sdkOptions} name='sdk'
value={selectedSdk} options={sdkOptions}
onChange={onChange} value={selectedSdk}
style={{ onChange={onChange}
width: '60%', style={{
}} width: '60%',
/> }}
<StyledLink to={`${repositoryUrl}/${selectedSdk}`} target='_blank'> />
Go to example <Box>
</StyledLink> <StyledButton
to={`${repositoryUrl}/${selectedSdk}`}
target='_blank'
component={Link}
variant='text'
color='primary'
>
Go to example
</StyledButton>
</Box>
</SelectWithButton>
</> </>
); );
}; };