fix(ui): fix the hover effect on the packageItem's author area (#137)

src/components/Package/Package.tsx

@@ -20,7 +20,6 @@ import {
   IconButton,
   OverviewItem,
   PackageList,
-  PackageListItem,
   PackageListItemText,
   PackageTitle,
   Published,
@@ -174,13 +173,13 @@ const Package: React.FC<PackageInterface> = ({
   return (
     <PackageList className={'package'}>
       <ListItem alignItems={'flex-start'}>{renderPackageListItemText()}</ListItem>
-      <PackageListItem alignItems={'flex-start'} button={true}>
+      <ListItem alignItems={'flex-start'}>
         {renderAuthorInfo()}
         {renderVersionInfo()}
         {renderPublishedInfo()}
         {renderFileSize()}
         {renderLicenseInfo()}
-      </PackageListItem>
+      </ListItem>
     </PackageList>
   );
 };

src/components/Package/styles.ts

@@ -3,7 +3,6 @@ import { Link } from 'react-router-dom';
 
 import Grid from '@material-ui/core/Grid';
 import List from '@material-ui/core/List';
-import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
 import MuiIconButton from '@material-ui/core/IconButton';
 import Photo from '@material-ui/core/Avatar';
@@ -120,6 +119,10 @@ export const PackageList = styled(List)({
     '&:hover': {
       backgroundColor: colors.greyLight3,
     },
+
+    '> :last-child': {
+      paddingTop: 0,
+    },
   },
 });
 
@@ -144,12 +147,6 @@ export const TagContainer = styled('span')`
   }
 `;
 
-export const PackageListItem = styled(ListItem)({
-  '&&': {
-    paddingTop: 0,
-  },
-});
-
 export const PackageListItemText = styled(ListItemText)({
   '&&': {
     paddingRight: 0,