feat: connect sdk icons (#8075)

frontend/src/component/onboarding/GenerateApiKey.tsx

@@ -70,7 +70,7 @@ const SecretExplanationDescription = styled('div')(({ theme }) => ({
     padding: theme.spacing(2),
     flex: 1,
     color: theme.palette.text.secondary,
-    fontSize: theme.fontSizes.smallBody,
+    fontSize: theme.typography.body2.fontSize,
 }));
 
 const TokenExplanationBox = styled(Box)(({ theme }) => ({
@@ -82,14 +82,14 @@ const TokenExplanationBox = styled(Box)(({ theme }) => ({
 }));
 
 const SectionHeader = styled('div')(({ theme }) => ({
-    fontWeight: theme.fontWeight.bold,
+    fontWeight: theme.typography.fontWeightBold,
     marginBottom: theme.spacing(1),
-    fontSize: theme.fontSizes.bodySize,
+    fontSize: theme.typography.body1.fontSize,
 }));
 
 const SectionDescription = styled('p')(({ theme }) => ({
     color: theme.palette.text.secondary,
-    fontSize: theme.fontSizes.smallBody,
+    fontSize: theme.typography.body2.fontSize,
     marginBottom: theme.spacing(2),
 }));
 
@@ -109,13 +109,13 @@ const ConceptsDefinitionsWrapper = styled('div')(({ theme }) => ({
 
 const ConceptDetails = styled('p')(({ theme }) => ({
     color: theme.palette.primary.contrastText,
-    fontSize: theme.fontSizes.smallerBody,
+    fontSize: theme.typography.caption.fontSize,
     marginBottom: theme.spacing(2),
 }));
 
 const IconStyle = ({ theme }: { theme: Theme }) => ({
     color: theme.palette.primary.contrastText,
-    fontSize: theme.fontSizes.smallBody,
+    fontSize: theme.typography.body2.fontSize,
     marginTop: theme.spacing(0.5),
 });
 
@@ -132,8 +132,8 @@ const ConceptItem = styled('div')(({ theme }) => ({
 
 const ConceptSummary = styled('div')(({ theme }) => ({
     color: theme.palette.primary.contrastText,
-    fontSize: theme.fontSizes.smallBody,
+    fontSize: theme.typography.body2.fontSize,
-    fontWeight: theme.fontWeight.bold,
+    fontWeight: theme.typography.fontWeightBold,
     marginBottom: theme.spacing(2),
 }));
 

frontend/src/component/onboarding/SelectSdk.tsx

@@ -1,5 +1,20 @@
-import { Box, Link, styled, Typography } from '@mui/material';
+import { Avatar, Box, Link, styled, Typography } from '@mui/material';
 import type { FC } from 'react';
+import android from 'assets/icons/sdks/Logo-android.svg';
+import dotnet from 'assets/icons/sdks/Logo-net.svg';
+import flutter from 'assets/icons/sdks/Logo-flutter.svg';
+import go from 'assets/icons/sdks/Logo-go.svg';
+import swift from 'assets/icons/sdks/Logo-swift.svg';
+import java from 'assets/icons/sdks/Logo-java.svg';
+import javascript from 'assets/icons/sdks/Logo-javascript.svg';
+import node from 'assets/icons/sdks/Logo-node.svg';
+import php from 'assets/icons/sdks/Logo-php.svg';
+import python from 'assets/icons/sdks/Logo-python.svg';
+import react from 'assets/icons/sdks/Logo-react.svg';
+import ruby from 'assets/icons/sdks/Logo-ruby.svg';
+import rust from 'assets/icons/sdks/Logo-rust.svg';
+import svelte from 'assets/icons/sdks/Logo-svelte.svg';
+import vue from 'assets/icons/sdks/Logo-vue.svg';
 
 const SpacedContainer = styled('div')(({ theme }) => ({
     padding: theme.spacing(5, 8, 8, 8),
@@ -9,57 +24,71 @@ const SpacedContainer = styled('div')(({ theme }) => ({
 }));
 
 const PrimarySectionHeader = styled('div')(({ theme }) => ({
-    fontWeight: theme.fontWeight.bold,
+    fontWeight: theme.typography.fontWeightBold,
     marginBottom: theme.spacing(1),
-    fontSize: theme.fontSizes.bodySize,
+    fontSize: theme.typography.body1.fontSize,
 }));
 
 const SecondarySectionHeader = styled('div')(({ theme }) => ({
     marginTop: theme.spacing(4),
     marginBottom: theme.spacing(2),
-    fontSize: theme.fontSizes.bodySize,
+    fontSize: theme.typography.body1.fontSize,
 }));
 
 const SdkListSection = styled('div')(({ theme }) => ({
     backgroundColor: theme.palette.background.elevation1,
     borderRadius: theme.shape.borderRadius,
-    padding: theme.spacing(3, 6),
+    padding: theme.spacing(6),
     display: 'flex',
-    gap: theme.spacing(2),
+    columnGap: theme.spacing(2),
+    rowGap: theme.spacing(5),
     alignItems: 'center',
     justifyContent: 'flex-start',
     flexWrap: 'wrap',
 }));
 
 const SdkTile = styled('div')(({ theme }) => ({
-    fontSize: theme.fontSizes.smallBody,
+    fontSize: theme.typography.body2.fontSize,
     backgroundColor: theme.palette.common.white,
     borderRadius: theme.shape.borderRadius,
-    padding: theme.spacing(2),
+    padding: theme.spacing(2, 3),
+    width: '170px',
+    position: 'relative',
+}));
+
+const SdkTileContent = styled('div')(() => ({
     display: 'flex',
     justifyContent: 'space-between',
-    width: '170px',
+}));
+
+const StyledAvatar = styled(Avatar)(({ theme }) => ({
+    position: 'absolute',
+    width: theme.spacing(4),
+    height: theme.spacing(4),
+    top: theme.spacing(-2.75),
+    left: theme.spacing(2),
+    boxShadow: theme.shadows[2],
 }));
 
 const serverSdks = [
-    { name: 'Node' },
+    { name: 'Node', icon: node },
-    { name: 'Golang' },
+    { name: 'Golang', icon: go },
-    { name: 'Ruby' },
+    { name: 'Ruby', icon: ruby },
-    { name: 'PHP' },
+    { name: 'PHP', icon: php },
-    { name: 'Rust' },
+    { name: 'Rust', icon: rust },
-    { name: 'DotNet' },
+    { name: 'DotNet', icon: dotnet },
-    { name: 'Java' },
+    { name: 'Java', icon: java },
-    { name: 'Python' },
+    { name: 'Python', icon: python },
 ];
 
 const clientSdks = [
-    { name: 'Javascript' },
+    { name: 'Javascript', icon: javascript },
-    { name: 'React' },
+    { name: 'React', icon: react },
-    { name: 'Vue' },
+    { name: 'Vue', icon: vue },
-    { name: 'Svelte' },
+    { name: 'Svelte', icon: svelte },
-    { name: 'Swift' },
+    { name: 'Swift', icon: swift },
-    { name: 'Android' },
+    { name: 'Android', icon: android },
-    { name: 'Flutter' },
+    { name: 'Flutter', icon: flutter },
 ];
 
 type SdkType = 'client' | 'frontend';
@@ -79,15 +108,21 @@ export const SelectSdk: FC<ISelectSdkProps> = ({ onSelect }) => {
                 <SdkListSection>
                     {serverSdks.map((sdk) => (
                         <SdkTile>
-                            <b>{sdk.name}</b>{' '}
+                            <StyledAvatar src={sdk.icon} />
-                            <Link
+                            <SdkTileContent>
-                                onClick={() =>
+                                <b>{sdk.name}</b>{' '}
-                                    onSelect({ name: sdk.name, type: 'client' })
+                                <Link
-                                }
+                                    onClick={() =>
-                                component='button'
+                                        onSelect({
-                            >
+                                            name: sdk.name,
-                                Select
+                                            type: 'client',
-                            </Link>
+                                        })
+                                    }
+                                    component='button'
+                                >
+                                    Select
+                                </Link>
+                            </SdkTileContent>
                         </SdkTile>
                     ))}
                 </SdkListSection>
@@ -97,18 +132,21 @@ export const SelectSdk: FC<ISelectSdkProps> = ({ onSelect }) => {
                 <SdkListSection>
                     {clientSdks.map((sdk) => (
                         <SdkTile>
-                            <b>{sdk.name}</b>{' '}
+                            <StyledAvatar src={sdk.icon} />
-                            <Link
+                            <SdkTileContent>
-                                onClick={() =>
+                                <b>{sdk.name}</b>{' '}
-                                    onSelect({
+                                <Link
-                                        name: sdk.name,
+                                    onClick={() =>
-                                        type: 'frontend',
+                                        onSelect({
-                                    })
+                                            name: sdk.name,
-                                }
+                                            type: 'frontend',
-                                component='button'
+                                        })
-                            >
+                                    }
-                                Select
+                                    component='button'
-                            </Link>
+                                >
+                                    Select
+                                </Link>
+                            </SdkTileContent>
                         </SdkTile>
                     ))}
                 </SdkListSection>