From 206e3aef626f786c3a741dc136e60aedae5d4216 Mon Sep 17 00:00:00 2001 From: Mateusz Kwasniewski Date: Wed, 4 Sep 2024 10:00:57 +0200 Subject: [PATCH] feat: connect sdk icons (#8075) --- .../component/onboarding/GenerateApiKey.tsx | 16 +-- .../src/component/onboarding/SelectSdk.tsx | 128 ++++++++++++------ 2 files changed, 91 insertions(+), 53 deletions(-) diff --git a/frontend/src/component/onboarding/GenerateApiKey.tsx b/frontend/src/component/onboarding/GenerateApiKey.tsx index e4b7385e1f..7ee7668e2d 100644 --- a/frontend/src/component/onboarding/GenerateApiKey.tsx +++ b/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, - fontWeight: theme.fontWeight.bold, + fontSize: theme.typography.body2.fontSize, + fontWeight: theme.typography.fontWeightBold, marginBottom: theme.spacing(2), })); diff --git a/frontend/src/component/onboarding/SelectSdk.tsx b/frontend/src/component/onboarding/SelectSdk.tsx index 3e0c165c99..2836a12ce6 100644 --- a/frontend/src/component/onboarding/SelectSdk.tsx +++ b/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: 'Golang' }, - { name: 'Ruby' }, - { name: 'PHP' }, - { name: 'Rust' }, - { name: 'DotNet' }, - { name: 'Java' }, - { name: 'Python' }, + { name: 'Node', icon: node }, + { name: 'Golang', icon: go }, + { name: 'Ruby', icon: ruby }, + { name: 'PHP', icon: php }, + { name: 'Rust', icon: rust }, + { name: 'DotNet', icon: dotnet }, + { name: 'Java', icon: java }, + { name: 'Python', icon: python }, ]; const clientSdks = [ - { name: 'Javascript' }, - { name: 'React' }, - { name: 'Vue' }, - { name: 'Svelte' }, - { name: 'Swift' }, - { name: 'Android' }, - { name: 'Flutter' }, + { name: 'Javascript', icon: javascript }, + { name: 'React', icon: react }, + { name: 'Vue', icon: vue }, + { name: 'Svelte', icon: svelte }, + { name: 'Swift', icon: swift }, + { name: 'Android', icon: android }, + { name: 'Flutter', icon: flutter }, ]; type SdkType = 'client' | 'frontend'; @@ -79,15 +108,21 @@ export const SelectSdk: FC = ({ onSelect }) => { {serverSdks.map((sdk) => ( - {sdk.name}{' '} - - onSelect({ name: sdk.name, type: 'client' }) - } - component='button' - > - Select - + + + {sdk.name}{' '} + + onSelect({ + name: sdk.name, + type: 'client', + }) + } + component='button' + > + Select + + ))} @@ -97,18 +132,21 @@ export const SelectSdk: FC = ({ onSelect }) => { {clientSdks.map((sdk) => ( - {sdk.name}{' '} - - onSelect({ - name: sdk.name, - type: 'frontend', - }) - } - component='button' - > - Select - + + + {sdk.name}{' '} + + onSelect({ + name: sdk.name, + type: 'frontend', + }) + } + component='button' + > + Select + + ))}