Made same style with Devfile Registry and Helm Charts webviews

src/webview/common/cardItem.style.tsx

@@ -26,7 +26,8 @@ export const CardTheme = createTheme({
 export default (_theme: Theme) =>
     createStyles({
         card: {
-            height: 'auto',
+            height: '22rem',
+            width: '16rem',
             margin: '0.2rem',
             cursor: 'pointer',
             borderRadius: '1rem !important',

src/webview/devfile-registry/app/cardItem.tsx

@@ -14,6 +14,7 @@ import { StarterProject } from '../../../odo/componentTypeDescription';
 import { VSCodeMessage } from '../vsCodeMessage';
 import { StarterProjectDisplay } from '../../common/starterProjectDisplay';
 import { DevFileProps } from './wrapperCardItem';
+import '../../common/cardItem.scss';
 
 export class CardItem extends React.Component<DevFileProps, {
     numOfCall: number,

src/webview/devfile-registry/app/home.tsx

@@ -2,7 +2,7 @@
  *  Copyright (c) Red Hat, Inc. All rights reserved.
  *  Licensed under the MIT License. See LICENSE file in the project root for license information.
  *-----------------------------------------------------------------------------------------------*/
-import { ImageList, ImageListItem, ThemeProvider } from '@mui/material';
+import { ImageListItem, ThemeProvider, styled } from '@mui/material';
 import { makeStyles } from '@mui/styles';
 import React, { ChangeEvent } from 'react';
 import { Registry } from '../../../odo/componentType';
@@ -19,14 +19,36 @@ import { WrapperCardItem as CardItem } from './wrapperCardItem';
 
 const useCardItemStyles = makeStyles(cardItemStyle);
 
+const ImageGalleryList = styled('ul')(({ theme }) => ({
+    display: 'grid',
+    padding: 0,
+    margin: theme.spacing(0, 4),
+    gap: 1,
+    [theme.breakpoints.up('xs')]: {
+        gridTemplateColumns: 'repeat(1, 1fr)'
+    },
+    [theme.breakpoints.up('sm')]: {
+        gridTemplateColumns: 'repeat(2, 1fr)'
+    },
+    [theme.breakpoints.up('md')]: {
+        gridTemplateColumns: 'repeat(3, 1fr)'
+    },
+    [theme.breakpoints.up('lg')]: {
+        gridTemplateColumns: 'repeat(4, 1fr)'
+    },
+    [theme.breakpoints.up('xl')]: {
+        gridTemplateColumns: 'repeat(8, 1fr)'
+    },
+}));
+
 const HomeItem: React.FC<DevfileHomePageProps> = ({
     compDescriptions,
     themeKind
 }: DevfileHomePageProps) => {
     const cardItemStyle = useCardItemStyles();
     return (
         <ThemeProvider theme={HomeTheme}>
-            <ImageList className='devfileGalleryGrid' cols={4}>
+            <ImageGalleryList className='devfileGalleryGrid' style={{margin: '1rem'}}>
                 {
                     compDescriptions.map((compDescription: CompTypeDesc, key: number) => (
                         <ImageListItem key={`imageList-` + key}>
@@ -36,7 +58,7 @@ const HomeItem: React.FC<DevfileHomePageProps> = ({
                         </ImageListItem>
                     ))
                 }
-            </ImageList>
+            </ImageGalleryList>
         </ThemeProvider>
     );
 };

src/webview/git-import/gitImportLoader.ts

@@ -217,7 +217,7 @@ async function parseGitURL(event: any) {
                     const devFileV1Path = path.join(clonedFolder.fsPath, 'devfile.yaml');
                     const file = fs.readFileSync(devFileV1Path, 'utf8');
                     const devfileV1 = YAML.parse(file.toString());
-                    const deleted = deleteFile(devFileV1Path);
+                    const deleted = await deleteFile(devFileV1Path);
                     if (deleted) {
                         analyzeRes = await OdoImpl.Instance.analyze(clonedFolder.fsPath);
                         compDescriptions = getCompDescription(analyzeRes);
@@ -408,7 +408,7 @@ function deleteDirectory(dir: string) {
     });
 };
 
-function deleteFile(file: string) {
+function deleteFile(file: string): Promise<boolean> {
     return new Promise<boolean>(function (resolve, _reject) {
         try {
             fs.unlinkSync(file)

src/webview/helm-chart/app/cardItem.tsx

@@ -7,7 +7,7 @@ import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
 import React from 'react';
 import clsx from 'clsx';
 import { CardTheme } from '../../common/cardItem.style';
-import '../app/cardItem.scss';
+import '../../common/cardItem.scss';
 import { Chart } from '../helmChartType';
 import { VSCodeMessage } from '../vsCodeMessage';
 import { DevFileProps } from './wrapperCardItem';