diff --git a/plugins/home/src/homePageComponents/QuickStart/Content.test.tsx b/plugins/home/src/homePageComponents/QuickStart/Content.test.tsx
index 3394c46da7..5cae461a4d 100644
--- a/plugins/home/src/homePageComponents/QuickStart/Content.test.tsx
+++ b/plugins/home/src/homePageComponents/QuickStart/Content.test.tsx
@@ -22,7 +22,7 @@ import ContentImage from './static/backstageSystemModel.png';
describe('', () => {
const Wrapper = ({ children }: { children?: React.ReactNode }) => (
- {children}
+ <>{children}>
);
const renderContent = async () => {
return await renderInTestApp(
diff --git a/plugins/home/src/homePageComponents/QuickStart/Content.tsx b/plugins/home/src/homePageComponents/QuickStart/Content.tsx
index 5de85db1ac..998b1a1798 100644
--- a/plugins/home/src/homePageComponents/QuickStart/Content.tsx
+++ b/plugins/home/src/homePageComponents/QuickStart/Content.tsx
@@ -57,7 +57,7 @@ export const Content = (props: QuickStartCardProps): JSX.Element => {
linkContent={props.modalTitle || 'Onboarding'}
/>
- {props.cardDescription || "Get started with Backstage's Catalog"}
+ {props.cardDescription || 'Get started with Backstage'}
>) =>
- wrapInTestApp(
-
-
- ,
- ),
+ (Story: ComponentType>) => wrapInTestApp(),
],
};
diff --git a/plugins/home/src/homePageComponents/QuickStart/styles.ts b/plugins/home/src/homePageComponents/QuickStart/styles.ts
index bb97a5179f..f6f93f7070 100644
--- a/plugins/home/src/homePageComponents/QuickStart/styles.ts
+++ b/plugins/home/src/homePageComponents/QuickStart/styles.ts
@@ -18,43 +18,24 @@ import { makeStyles, Theme } from '@material-ui/core/styles';
/** @public */
export type QuickStartCardClassKey =
+ | 'cardTitleIcon'
+ | 'contentActionContainer'
+ | 'contentModal'
+ | 'imageSize'
| 'link'
| 'linkText'
- | 'contentActionContainer'
- | 'cardTitleIcon'
- | 'videoContainer'
- | 'imageSize'
- | 'contentModal';
+ | 'videoContainer';
export const useStyles = makeStyles(
(theme: Theme) => ({
- link: {
- display: 'inline-flex',
- alignItems: 'center',
- textDecoration: 'none',
- color: `${theme.palette.link}!important`,
- '&:hover': {
- background: 'transparent!important',
- },
- },
- linkText: {
- marginBottom: theme.spacing(1.5),
+ cardTitleIcon: {
+ verticalAlign: 'bottom',
+ marginLeft: '-4px',
},
contentActionContainer: {
marginTop: theme.spacing(1.5),
marginBottom: theme.spacing(1.5),
},
- cardTitleIcon: {
- verticalAlign: 'bottom',
- marginLeft: '-4px',
- },
- videoContainer: {
- borderRadius: '10px',
- width: '100%',
- height: 'auto',
- background: '#000000',
- },
- imageSize: { width: '100%', height: '100%' },
contentModal: {
position: 'absolute',
top: '50%',
@@ -63,6 +44,25 @@ export const useStyles = makeStyles(
width: '80%',
height: 'auto',
},
+ imageSize: { width: '100%', height: '100%' },
+ link: {
+ display: 'inline-flex',
+ alignItems: 'center',
+ textDecoration: 'none',
+ color: `${theme.palette.link}`,
+ '&:hover': {
+ background: 'transparent',
+ },
+ },
+ linkText: {
+ marginBottom: theme.spacing(1.5),
+ },
+ videoContainer: {
+ borderRadius: '10px',
+ width: '100%',
+ height: 'auto',
+ background: `${theme.palette.background.default}`,
+ },
}),
{ name: 'HomeQuickStartCard' },
);