fix: some warnings in console (#155)

* fix: remove react emotion selector warning

* fix: validate DOM nesting

Author: antoinechalifour

src/components/DetailSidebar/DetailSidebar.tsx

@@ -14,14 +14,18 @@ import Repository from '../Repository/Repository';
 
 import { DetailContext } from '../../pages/Version';
 
-import { TitleListItem, TitleListItemText } from './styles';
+import { TitleListItem, TitleListItemText, PackageDescription, PackageVersion } from './styles';
 
 const renderLatestDescription = (description, version, isLatest: boolean = true): JSX.Element => {
   return (
-    <span>
-      <div>{description}</div>
-      {version ? <small>{`${isLatest ? 'Latest v' : 'v'}${version}`}</small> : null}
-    </span>
+    <>
+      <PackageDescription>{description}</PackageDescription>
+      {version ? (
+        <PackageVersion>
+          <small>{`${isLatest ? 'Latest v' : 'v'}${version}`}</small>
+        </PackageVersion>
+      ) : null}
+    </>
   );
 };
 

src/components/DetailSidebar/styles.ts

@@ -1,10 +1,7 @@
 import styled from 'react-emotion';
-import Avatar from '@material-ui/core/Avatar';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
 
-import colors from '../../utils/styles/colors';
-
 export const TitleListItem = styled(ListItem)({
   '&&': {
     paddingLeft: 0,
@@ -21,10 +18,14 @@ export const TitleListItemText = styled(ListItemText)({
   },
 });
 
-export const TitleAvatar = styled(Avatar)({
+export const PackageDescription = styled('span')({
+  '&&': {
+    display: 'block',
+  },
+});
+
+export const PackageVersion = styled('span')({
   '&&': {
-    color: colors.greySuperLight,
-    backgroundColor: colors.primary,
-    textTransform: 'capitalize',
+    display: 'block',
   },
 });

src/components/Footer/styles.ts

@@ -90,7 +90,7 @@ export const Flags = styled('span')`
       border-color: ${colors.greyAthens} transparent transparent transparent;
       transform: rotate(90deg);
     }
-    ${ToolTip}:hover & {
+    ${/* sc-selector */ ToolTip}:hover & {
       visibility: visible;
     }
   }