From e9fbb25c6ffa3315246fe647952d8ce820381118 Mon Sep 17 00:00:00 2001
From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com>
Date: Tue, 1 Oct 2024 17:15:18 +0200
Subject: [PATCH] feat(onboarding): improve styles

---
 .../onboarding/flow/ProjectOnboarding.tsx     | 11 ++--
 .../component/onboarding/flow/SdkExample.tsx  | 54 +++++++++++++------
 2 files changed, 46 insertions(+), 19 deletions(-)

diff --git a/frontend/src/component/onboarding/flow/ProjectOnboarding.tsx b/frontend/src/component/onboarding/flow/ProjectOnboarding.tsx
index 0396373c1c0d..3ac7a202afe7 100644
--- a/frontend/src/component/onboarding/flow/ProjectOnboarding.tsx
+++ b/frontend/src/component/onboarding/flow/ProjectOnboarding.tsx
@@ -29,7 +29,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',
@@ -38,11 +38,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',
@@ -111,7 +116,7 @@ export const ProjectOnboarding = ({
     };
 
     return (
-        <Container>
+        <Container data-testid='container'>
             <TitleBox>
                 <TitleRow>
                     <Typography fontWeight='bold'>
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<typeof Link>)({
     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 = () => {
         <>
             <TitleContainer>View SDK Example</TitleContainer>
             <Typography>
-                Choose your preferred SDK to view an example
+                Choose your preferred SDK to view an example.
             </Typography>
-            <Select
-                id='sdk-select'
-                name='sdk'
-                options={sdkOptions}
-                value={selectedSdk}
-                onChange={onChange}
-                style={{
-                    width: '60%',
-                }}
-            />
-            <StyledLink to={`${repositoryUrl}/${selectedSdk}`} target='_blank'>
-                Go to example
-            </StyledLink>
+            <SelectWithButton>
+                <Select
+                    id='sdk-select'
+                    name='sdk'
+                    options={sdkOptions}
+                    value={selectedSdk}
+                    onChange={onChange}
+                    style={{
+                        width: '60%',
+                    }}
+                />
+                <Box>
+                    <StyledButton
+                        to={`${repositoryUrl}/${selectedSdk}`}
+                        target='_blank'
+                        component={Link}
+                        variant='text'
+                        color='primary'
+                    >
+                        Go to example
+                    </StyledButton>
+                </Box>
+            </SelectWithButton>
         </>
     );
 };