diff --git a/plugins/bazaar/src/components/BazaarOverviewCard/BazaarOverviewCard.tsx b/plugins/bazaar/src/components/BazaarOverviewCard/BazaarOverviewCard.tsx index c58ee3db1c..da43d4a206 100644 --- a/plugins/bazaar/src/components/BazaarOverviewCard/BazaarOverviewCard.tsx +++ b/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'} /> ); diff --git a/plugins/bazaar/src/components/ProjectCard/ProjectCard.tsx b/plugins/bazaar/src/components/ProjectCard/ProjectCard.tsx index c52e7f80d6..97b247e289 100644 --- a/plugins/bazaar/src/components/ProjectCard/ProjectCard.tsx +++ b/plugins/bazaar/src/components/ProjectCard/ProjectCard.tsx @@ -35,26 +35,18 @@ type Props = { project: BazaarProject; fetchBazaarProjects: () => Promise; 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: { diff --git a/plugins/bazaar/src/components/ProjectPreview/ProjectPreview.tsx b/plugins/bazaar/src/components/ProjectPreview/ProjectPreview.tsx index 216cf50c2f..8f7160600a 100644 --- a/plugins/bazaar/src/components/ProjectPreview/ProjectPreview.tsx +++ b/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); diff --git a/plugins/bazaar/src/components/SortView/SortView.tsx b/plugins/bazaar/src/components/SortView/SortView.tsx index 68b63a6885..b3e592fc6f 100644 --- a/plugins/bazaar/src/components/SortView/SortView.tsx +++ b/plugins/bazaar/src/components/SortView/SortView.tsx @@ -199,7 +199,7 @@ export const SortView = () => { bazaarProjects={getSearchResults() || []} fetchBazaarProjects={fetchBazaarProjects} catalogEntities={unlinkedCatalogEntities || []} - height="13rem" + height="large" />