chore: sync with 4.x webui

src/components/Repository/index.js

@@ -1,61 +1,59 @@
-/* eslint no-unused-vars: 0 */
 /* eslint react/jsx-max-depth: 0 */
 
-import React, {Component, Fragment} from 'react';
+import React, {Component} from 'react';
+import Avatar from '@material-ui/core/Avatar';
+import List from '@material-ui/core/List';
+import ListItemText from '@material-ui/core/ListItemText';
 
 import { DetailContextConsumer } from '../../pages/version/index';
-import Card from '@material-ui/core/Card/index';
-import CardContent from '@material-ui/core/CardContent/index';
-import Grid from '@material-ui/core/Grid/index';
-import GitHub from '../../icons/GitHub';
 import CopyToClipBoard from '../CopyToClipBoard';
-import BugReport from '@material-ui/icons/BugReport';
-import CardActions from '@material-ui/core/CardActions/index';
-import Button from '@material-ui/core/Button';
-import {GridRepo} from './styles';
+
+import { Heading, GithubLink, RepositoryListItem } from './styles';
+import git from './img/git.png';
 
 class Repository extends Component<any, any> {
   render() {
     return (
       <DetailContextConsumer>
         {(context) => {
-          return this.renderAuthor(context);
+          return this.renderRepository(context);
         }}
       </DetailContextConsumer>
     );
   };
 
-  renderAuthor = ({packageMeta}) => {
-    const { repository, bugs } = packageMeta.latest;
-    if (!repository) {
+  renderRepositoryText(url) {
+    return (<GithubLink href={url} target={"_blank"}>{url}</GithubLink>);
+  }
+
+  renderRepository = ({packageMeta}) => {
+    const { 
+      repository: {
+        url,
+      } = {},
+    } = packageMeta.latest;
+    
+    if (!url) {
       return null;
     }
 
     return (
-      <Card>
-        <CardContent style={{ textAling: 'center'}}>
-          <GridRepo container={true} spacing={24}>
-            {this.renderRepository(repository, bugs)}
-          </GridRepo>
-        </CardContent>
-        <CardActions>
-          <Button size={"small"}>{'Open Bugs'}</Button>
-          <Button size={"small"}>{'Open Repository'}</Button>
-        </CardActions>
-      </Card>
+      <>
+        <List dense={true} subheader={<Heading variant={"subheading"}>{'Repository'}</Heading>}>
+          <RepositoryListItem>
+            <Avatar src={git} />
+            <ListItemText primary={this.renderContent(url)} />
+          </RepositoryListItem>
+        </List>
+      </>
     );
   }
-
-  renderRepository = ({url, type}, bugs) => {
+  
+  renderContent(url) {
     return (
-      <Fragment>
-        <Grid item={true} xs={3}>
-          <GitHub style={{ fontSize: 45 }} />
-        </Grid>
-        <Grid item={true} xs={9}>
-          <CopyToClipBoard text={url} />
-        </Grid>
-      </Fragment>
+      <CopyToClipBoard text={url}>
+        {this.renderRepositoryText(url)}
+      </CopyToClipBoard>
     );
   }
 }

src/components/Repository/styles.js

@@ -5,9 +5,42 @@
 
 import styled from 'react-emotion';
 import Grid from '@material-ui/core/Grid/index';
+import ListItem from '@material-ui/core/ListItem/index';
+import Typography from '@material-ui/core/Typography/index';
+
+import Github from '../../icons/GitHub';
+import colors from '../../utils/styles/colors';
+
+export const Heading = styled(Typography)`
+  && {
+    font-weight: 700;
+    text-transform: capitalize;
+  }
+`;
 
 export const GridRepo = styled(Grid)`
   && {
     align-items: center;
   }
 `;
+
+export const GithubLink = styled('a')`
+  && {
+    color: ${colors.primary};
+  }
+`;
+
+export const GithubLogo = styled(Github)`
+  && {
+    font-size: 40px;
+    color: ${colors.primary};
+    background-color: ${colors.greySuperLight};
+  }
+`;
+
+export const RepositoryListItem = styled(ListItem)`
+  && {
+    padding-left: 0;
+    padding-right: 0;
+  }
+`;