diff --git a/src/components/DetailSidebar/DetailSidebar.tsx b/src/components/DetailSidebar/DetailSidebar.tsx index 832ecbd..1d73188 100644 --- a/src/components/DetailSidebar/DetailSidebar.tsx +++ b/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 ( - -
{description}
- {version ? {`${isLatest ? 'Latest v' : 'v'}${version}`} : null} -
+ <> + {description} + {version ? ( + + {`${isLatest ? 'Latest v' : 'v'}${version}`} + + ) : null} + ); }; diff --git a/src/components/DetailSidebar/styles.ts b/src/components/DetailSidebar/styles.ts index 86252a1..b9ba2c8 100644 --- a/src/components/DetailSidebar/styles.ts +++ b/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')({ '&&': { - color: colors.greySuperLight, - backgroundColor: colors.primary, - textTransform: 'capitalize', + display: 'block', + }, +}); + +export const PackageVersion = styled('span')({ + '&&': { + display: 'block', }, }); diff --git a/src/components/Footer/styles.ts b/src/components/Footer/styles.ts index 7a63fa9..5207935 100644 --- a/src/components/Footer/styles.ts +++ b/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; } }