address review comments

Signed-off-by: nikolar <reyna.nikolayev@autodesk.com>

plugins/home/src/homePageComponents/QuickStart/Content.test.tsx

@@ -22,7 +22,7 @@ import ContentImage from './static/backstageSystemModel.png';
 
 describe('<QuickStartCard />', () => {
   const Wrapper = ({ children }: { children?: React.ReactNode }) => (
-    <TestApiProvider apis={[]}>{children}</TestApiProvider>
+    <>{children}</>
   );
   const renderContent = async () => {
     return await renderInTestApp(

plugins/home/src/homePageComponents/QuickStart/Content.tsx

@@ -57,7 +57,7 @@ export const Content = (props: QuickStartCardProps): JSX.Element => {
         linkContent={props.modalTitle || 'Onboarding'}
       />
       <Typography variant="body1" paragraph>
-        {props.cardDescription || "Get started with Backstage's Catalog"}
+        {props.cardDescription || 'Get started with Backstage'}
       </Typography>
       <ContentModal modalContent={props.image} linkContent={props.image} />
       <Grid

plugins/home/src/homePageComponents/QuickStart/QuickStart.stories.tsx

@@ -23,12 +23,7 @@ import ContentImage from './static/backstageSystemModel.png';
 export default {
   title: 'Plugins/Home/Components/QuickStartCard',
   decorators: [
-    (Story: ComponentType<PropsWithChildren<{}>>) =>
-      wrapInTestApp(
-        <TestApiProvider apis={[]}>
-          <Story />
-        </TestApiProvider>,
-      ),
+    (Story: ComponentType<PropsWithChildren<{}>>) => wrapInTestApp(<Story />),
   ],
 };
 

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' },
 );