top and recently visited styling change

Signed-off-by: zeshanziya <zeshan.ziya@axelerant.com>

.changeset/ten-wasps-juggle.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-home': minor
+---
+
+Resolved styling inconsistencies and title visibility issues in Top Visited and Recently Visited cards

plugins/home/src/components/VisitList/VisitList.test.tsx

@@ -20,16 +20,9 @@ import { render } from '@testing-library/react';
 import { BrowserRouter } from 'react-router-dom';
 
 describe('<VisitList/>', () => {
-  it('renders with mandatory parameters', async () => {
-    const { getByText } = await render(
-      <VisitList title="My title" detailType="time-ago" />,
-    );
-    expect(getByText('My title')).toBeInTheDocument();
-  });
-
   it('renders skeleton when loading is true', async () => {
     const { container } = await render(
-      <VisitList title="My title" detailType="time-ago" loading />,
+      <VisitList detailType="time-ago" loading />,
     );
     expect(container.querySelectorAll('li')).toHaveLength(8);
     expect(container.querySelectorAll('.MuiSkeleton-root')).toHaveLength(16);
@@ -38,7 +31,6 @@ describe('<VisitList/>', () => {
   it('renders specified amount of items', async () => {
     const { container } = await render(
       <VisitList
-        title="My title"
         detailType="time-ago"
         loading
         numVisitsOpen={1}
@@ -51,7 +43,6 @@ describe('<VisitList/>', () => {
   it('renders some items hidden', async () => {
     const { container } = await render(
       <VisitList
-        title="My title"
         detailType="time-ago"
         loading
         numVisitsOpen={1}
@@ -65,7 +56,6 @@ describe('<VisitList/>', () => {
   it('renders all items when not collapsed', async () => {
     const { container } = await render(
       <VisitList
-        title="My title"
         detailType="time-ago"
         loading
         collapsed={false}
@@ -81,7 +71,6 @@ describe('<VisitList/>', () => {
     const { container, getByText } = await render(
       <BrowserRouter>
         <VisitList
-          title="My title"
           detailType="time-ago"
           visits={[
             {
@@ -105,7 +94,6 @@ describe('<VisitList/>', () => {
     const { container, getByText } = await render(
       <BrowserRouter>
         <VisitList
-          title="My title"
           detailType="hits"
           visits={[
             {
@@ -129,7 +117,6 @@ describe('<VisitList/>', () => {
     const { getByText } = await render(
       <BrowserRouter>
         <VisitList
-          title="My title"
           detailType="hits"
           visits={[
             {
@@ -152,7 +139,7 @@ describe('<VisitList/>', () => {
   it('renders text warning about no items', async () => {
     const { getByText } = await render(
       <BrowserRouter>
-        <VisitList title="My title" detailType="hits" visits={[]} />,
+        <VisitList detailType="hits" visits={[]} />,
       </BrowserRouter>,
     );
     expect(getByText('There are no visits to show yet.')).toBeInTheDocument();

plugins/home/src/components/VisitList/VisitList.tsx

@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { Collapse, List, Typography, makeStyles } from '@material-ui/core';
+import { Collapse, List } from '@material-ui/core';
 import { Visit } from '../../api/VisitsApi';
 import { VisitListItem } from './VisitListItem';
 import { ItemDetailType } from './ItemDetail';
@@ -23,14 +23,7 @@ import { VisitListEmpty } from './VisitListEmpty';
 import { VisitListFew } from './VisitListFew';
 import { VisitListSkeleton } from './VisitListSkeleton';
 
-const useStyles = makeStyles(_theme => ({
-  title: {
-    marginBottom: '2rem',
-  },
-}));
-
 export const VisitList = ({
-  title,
   detailType,
   visits = [],
   numVisitsOpen = 3,
@@ -38,7 +31,6 @@ export const VisitList = ({
   collapsed = true,
   loading = false,
 }: {
-  title: string;
   detailType: ItemDetailType;
   visits?: Visit[];
   numVisitsOpen?: number;
@@ -46,8 +38,6 @@ export const VisitList = ({
   collapsed?: boolean;
   loading?: boolean;
 }) => {
-  const classes = useStyles();
-
   let listBody: React.ReactElement = <></>;
   if (loading) {
     listBody = (
@@ -91,9 +81,6 @@ export const VisitList = ({
 
   return (
     <>
-      <Typography variant="h5" className={classes.title}>
-        {title}
-      </Typography>
       <List dense disablePadding>
         {listBody}
       </List>

plugins/home/src/homePageComponents/VisitedByType/VisitedByType.tsx

@@ -25,7 +25,6 @@ export const VisitedByType = () => {
   return (
     <VisitList
       visits={visits}
-      title={kind === 'top' ? 'Top Visited' : 'Recently Visited'}
       detailType={kind === 'top' ? 'hits' : 'time-ago'}
       collapsed={collapsed}
       numVisitsOpen={numVisitsOpen}

plugins/home/src/plugin.ts

@@ -200,6 +200,7 @@ export const HeaderWorldClock = homePlugin.provide(
 export const HomePageTopVisited = homePlugin.provide(
   createCardExtension<Partial<VisitedByTypeProps>>({
     name: 'HomePageTopVisited',
+    title: 'Top Visited',
     components: () => import('./homePageComponents/VisitedByType/TopVisited'),
   }),
 );
@@ -211,6 +212,7 @@ export const HomePageTopVisited = homePlugin.provide(
 export const HomePageRecentlyVisited = homePlugin.provide(
   createCardExtension<Partial<VisitedByTypeProps>>({
     name: 'HomePageRecentlyVisited',
+    title: 'Recently Visited',
     components: () =>
       import('./homePageComponents/VisitedByType/RecentlyVisited'),
   }),