Create 'large' and 'small' props

Signed-off-by: Frida Jacobsson <fridahelenajacobsson@gmail.com>

plugins/bazaar/src/components/BazaarOverviewCard/BazaarOverviewCard.tsx

@@ -146,7 +146,7 @@ export const BazaarOverviewCard = (props: BazaarOverviewCardProps) => {
         catalogEntities={unlinkedCatalogEntities || []}
         useTablePagination={false}
         gridSize={fullWidth ? 2 : 4}
-        height={fullHeight ? '13rem' : '7rem'}
+        height={fullHeight ? 'large' : 'small'}
       />
     </InfoCard>
   );

plugins/bazaar/src/components/ProjectCard/ProjectCard.tsx

@@ -35,26 +35,18 @@ type Props = {
   project: BazaarProject;
   fetchBazaarProjects: () => Promise<BazaarProject[]>;
   catalogEntities: Entity[];
-  height?: string;
+  height: 'large' | 'small';
 };
 
 type StyleProps = {
-  height?: string;
+  height: 'large' | 'small';
 };
 
 const useStyles = makeStyles((theme: BackstageTheme) => ({
   description: (props: StyleProps) => ({
-    height: props.height === '7rem' ? '3.7rem' : '10.2rem',
-    display: '-webkit-box',
-    WebkitLineClamp: 7,
-    WebkitBoxOrient: 'vertical',
-    overflow: 'hidden',
-    '-webkit-background-clip': 'text',
-    backgroundImage: `linear-gradient(180deg, ${
-      theme.palette.textContrast
-    } 0%, ${theme.palette.textContrast} ${
-      props.height === '7rem' ? '60%' : '75%'
-    }, transparent 100%)`,
+    height: props.height === 'large' ? '10rem' : '4rem',
+    WebkitBackgroundClip: 'text',
+    backgroundImage: `linear-gradient(180deg, ${theme.palette.textContrast} 0%, ${theme.palette.textContrast} 60%, transparent 100%)`,
     color: 'transparent',
   }),
   statusTag: {

plugins/bazaar/src/components/ProjectPreview/ProjectPreview.tsx

@@ -27,7 +27,7 @@ type Props = {
   catalogEntities: Entity[];
   useTablePagination?: boolean;
   gridSize?: GridSize;
-  height: string;
+  height: 'large' | 'small';
 };
 
 const useStyles = makeStyles({
@@ -56,7 +56,7 @@ export const ProjectPreview = ({
   catalogEntities,
   useTablePagination = true,
   gridSize = 2,
-  height,
+  height = 'large',
 }: Props) => {
   const classes = useStyles();
   const [page, setPage] = useState(1);

plugins/bazaar/src/components/SortView/SortView.tsx

@@ -199,7 +199,7 @@ export const SortView = () => {
         bazaarProjects={getSearchResults() || []}
         fetchBazaarProjects={fetchBazaarProjects}
         catalogEntities={unlinkedCatalogEntities || []}
-        height="13rem"
+        height="large"
       />
       <Content noPadding className={classes.container} />
     </Content>