AXON-72: add logo and use vscode native components

atlassian · Feb 13, 2025 · fe4e0be · fe4e0be
1 parent 6c181c4
commit fe4e0be
Show file tree

Hide file tree

Showing 4 changed files with 102 additions and 22 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1414,6 +1414,7 @@
         "@material-ui/styles": "^4.10.0",
         "@segment/analytics-node": "^2.1.3",
         "@types/mustache": "^4.0.1",
+        "@vscode/webview-ui-toolkit": "^1.4.0",
         "awesome-debounce-promise": "^2.1.0",
         "axios": "^1.7.4",
         "axios-curlirize": "^1.3.4",

diff --git a/src/react/atlascode/onboarding/JiraBitbucketOnboarding.tsx b/src/react/atlascode/onboarding/JiraBitbucketOnboarding.tsx
@@ -1,6 +1,9 @@
 import React, { useCallback } from 'react';
-import { Container, Typography, Radio, Button, Box, Card, CardActionArea, CardContent } from '@material-ui/core';
+import { Container, Typography, Box, Card, CardActionArea, CardContent } from '@material-ui/core';
 import { Product } from '../common/types';
+import { VSCodeRadio, VSCodeButton } from '@vscode/webview-ui-toolkit/react';
+import { BitbucketOnboardingLogo } from '../icons/BitbucketOnboardingLogo';
+import { JiraOnboardingLogo } from '../icons/JiraOnboardingLogo';
 
 type Props = {
     product: Product;
@@ -36,7 +39,7 @@ const OnboardingRadio = ({
                 }}
             >
                 <CardContent style={formControlStyles}>
-                    <Radio size="small" checked={checked === value} />
+                    <VSCodeRadio checked={checked === value} />
                     <Box flexDirection={'column'}>
                         <Typography style={{ fontWeight: 'bold' }}>{title}</Typography>
                         {description && <Typography>{description}</Typography>}
@@ -56,7 +59,7 @@ export const JiraBitbucketOnboarding: React.FC<Props> = ({
     signInText,
     valueSet,
 }) => {
-    const [checked, setChecked] = React.useState('');
+    const [checked, setChecked] = React.useState(valueSet.cloud);
 
     const handleValueChange = useCallback(
         (value: string) => {
@@ -67,11 +70,10 @@ export const JiraBitbucketOnboarding: React.FC<Props> = ({
     );
 
     return (
-        <Container maxWidth="xs">
+        <Container style={{ justifyContent: 'center' }} maxWidth="xs">
             <Box style={wrapperStyles} flexDirection="column">
-                <Typography style={{ fontWeight: 'bold' }} variant="h2">
-                    What version of {product} do you use?
-                </Typography>
+                {product === 'Jira' ? <JiraOnboardingLogo /> : <BitbucketOnboardingLogo />}
+                <Typography variant="h2">What version of {product} do you use?</Typography>
                 <Box flexDirection="column" style={radioGroupStyles}>
                     <OnboardingRadio
                         checked={checked}
@@ -102,25 +104,23 @@ export const JiraBitbucketOnboarding: React.FC<Props> = ({
                         alignSelf: 'stretch',
                     }}
                 >
-                    <Button
+                    <VSCodeButton
                         disabled={!handleBack}
                         onClick={() => {
                             handleBack && handleBack();
                         }}
-                        size="small"
+                        appearance="secondary"
                     >
                         Back
-                    </Button>
-                    <Button
-                        size="small"
-                        variant="contained"
+                    </VSCodeButton>
+                    <VSCodeButton
                         onClick={() => {
                             executeSetup();
                             handleNext();
                         }}
                     >
                         {signInText}
-                    </Button>
+                    </VSCodeButton>
                 </Box>
             </Box>
         </Container>
@@ -141,8 +141,6 @@ const formControlStyles = {
     gap: '8px',
     alignSelf: 'stretch',
     borderRadius: '4px',
-    border: '1px solid token(color.border)',
-    backgroundColor: 'token(color.background)',
 };
 
 const radioGroupStyles = {

diff --git a/src/react/atlascode/onboarding/OnboardingPage.tsx b/src/react/atlascode/onboarding/OnboardingPage.tsx
@@ -1,4 +1,4 @@
-import { Button, Container, lighten, makeStyles, Step, StepLabel, Stepper, Theme } from '@material-ui/core';
+import { Box, Button, Container, lighten, makeStyles, Step, StepLabel, Stepper, Theme } from '@material-ui/core';
 import React, { useCallback, useEffect, useState } from 'react';
 import {
     AuthInfo,
@@ -339,7 +339,17 @@ export const OnboardingPage: React.FunctionComponent = () => {
                                     );
                                 })}
                             </Stepper>
-                            <div>{useAuthUI ? authUI_v1 : oldAuthUI}</div>
+                            <Box
+                                style={{
+                                    display: 'flex',
+                                    flex: '1 0 0',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    padding: '24px',
+                                }}
+                            >
+                                {useAuthUI ? authUI_v1 : oldAuthUI}
+                            </Box>
                         </div>
                     </Container>
                     <AuthDialog