diff --git a/frontend/src/component/onboarding/flow/ProjectOnboarding.tsx b/frontend/src/component/onboarding/flow/ProjectOnboarding.tsx index 473fb65747c8..e1907ecdf87c 100644 --- a/frontend/src/component/onboarding/flow/ProjectOnboarding.tsx +++ b/frontend/src/component/onboarding/flow/ProjectOnboarding.tsx @@ -31,7 +31,7 @@ const Container = 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', borderColor: theme.palette.divider, minHeight: '80px', @@ -40,11 +40,16 @@ const TitleBox = styled('div')(({ theme }) => ({ const Actions = styled('div')(({ theme }) => ({ display: 'flex', 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 }) => ({ flexBasis: '50%', - padding: theme.spacing(3, 2, 6, 8), display: 'flex', gap: theme.spacing(3), flexDirection: 'column', @@ -114,7 +119,7 @@ export const ProjectOnboarding = ({ }; return ( - + diff --git a/frontend/src/component/onboarding/flow/SdkExample.tsx b/frontend/src/component/onboarding/flow/SdkExample.tsx index a22ae60afc4f..9e8ec1416e42 100644 --- a/frontend/src/component/onboarding/flow/SdkExample.tsx +++ b/frontend/src/component/onboarding/flow/SdkExample.tsx @@ -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 { useLocalStorageState } from 'hooks/useLocalStorageState'; import Select from 'component/common/select'; @@ -13,11 +19,17 @@ const TitleContainer = styled('div')(({ theme }) => ({ fontWeight: 'bold', })); -const StyledLink = styled(Link)({ +const StyledButton = styled(Button)({ fontWeight: 'bold', textDecoration: 'none', }); +const SelectWithButton = styled(Box)(({ theme }) => ({ + display: 'flex', + flexDirection: 'column', + gap: theme.spacing(1), +})); + const repositoryUrl = 'https://github.com/Unleash/unleash-sdk-examples/tree/main'; @@ -56,21 +68,31 @@ export const SdkExample = () => { <> View SDK Example - Choose your preferred SDK to view an example + Choose your preferred SDK to view an example. - + + + Go to example + + + ); };