refactor: design / spacing improvements

src/webui/components/Dependencies/index.js

@@ -11,7 +11,7 @@ import CardContent from '@material-ui/core/CardContent/index';
 
 import { DetailContextConsumer } from '../../pages/version';
 
-import { Content, CardWrap, Heading, Tags, Tag } from './styles';
+import { CardWrap, Heading, Tags, Tag } from './styles';
 import NoItems from '../NoItems';
 
 class DepDetail extends Component<any, any> {
@@ -94,20 +94,14 @@ class Dependencies extends Component<any, any> {
 
     if (dependencies || devDependencies || peerDependencies) {
       return (
-        <Content>
-          <Fragment>
-            {dependencies && <DependencyBlock dependencies={dependencies} title={'Dependencies'} />}
-            {devDependencies && <DependencyBlock dependencies={devDependencies} title={'DevDependencies'} />}
-            {peerDependencies && <DependencyBlock dependencies={peerDependencies} title={'PeerDependencies'} />}
-          </Fragment>
-        </Content>
+        <Fragment>
+          {dependencies && <DependencyBlock dependencies={dependencies} title={'Dependencies'} />}
+          {devDependencies && <DependencyBlock dependencies={devDependencies} title={'DevDependencies'} />}
+          {peerDependencies && <DependencyBlock dependencies={peerDependencies} title={'PeerDependencies'} />}
+        </Fragment>
       );
     }
-    return (
-      <Content>
-        <NoItems text={`${name} has no dependencies.`} />
-      </Content>
-    );
+    return <NoItems text={`${name} has no dependencies.`} />;
   }
 }
 

src/webui/components/Dependencies/styles.js

@@ -8,15 +8,9 @@ import Card from '@material-ui/core/Card/index';
 import Typography from '@material-ui/core/Typography/index';
 import Chip from '@material-ui/core/Chip/index';
 
-export const Content = styled.div`
-  && {
-    padding: 20px;
-  }
-`;
-
 export const CardWrap = styled(Card)`
   && {
-    margin: 0 0 25px;
+    margin: 0 0 16px;
   }
 `;
 

src/webui/components/DetailContainer/index.js

@@ -30,25 +30,31 @@ class DetailContainer extends Component<any, any> {
     );
   }
 
+  handleChange = (event: any, tabPosition: number) => {
+    event.preventDefault();
+    this.setState({ tabPosition });
+  };
+
   // $FlowFixMe
   renderTabs = ({ readMe }) => {
     const { tabPosition } = this.state;
 
     return (
-      <React.Fragment>
-        <Tabs indicatorColor={'primary'} onChange={this.handleChange} textColor={'primary'} value={tabPosition} variant={'fullWidth'}>
-          <Tab label={'Readme'} />
-          <Tab label={'Dependencies'} />
-          <Tab label={'Versions'} />
-          <Tab label={'Uplinks'} />
-        </Tabs>
+      <>
         <Content>
+          <Tabs indicatorColor={'primary'} onChange={this.handleChange} textColor={'primary'} value={tabPosition} variant={'fullWidth'}>
+            <Tab label={'Readme'} />
+            <Tab label={'Dependencies'} />
+            <Tab label={'Versions'} />
+            <Tab label={'Uplinks'} />
+          </Tabs>
+          <br />
           {tabPosition === 0 && this.renderReadme(readMe)}
           {tabPosition === 1 && <Dependencies />}
           {tabPosition === 2 && <Versions />}
           {tabPosition === 3 && <UpLinks />}
         </Content>
-      </React.Fragment>
+      </>
     );
   };
 
@@ -57,11 +63,6 @@ class DetailContainer extends Component<any, any> {
 
     return <Readme description={encodedReadme} />;
   };
-
-  handleChange = (event: any, tabPosition: number) => {
-    event.preventDefault();
-    this.setState({ tabPosition });
-  };
 }
 
 export default DetailContainer;

src/webui/components/DetailSidebar/index.js

@@ -3,7 +3,7 @@ import React, {Component} from 'react';
 import Card from '@material-ui/core/Card/index';
 import CardContent from '@material-ui/core/CardContent/index';
 import List from '@material-ui/core/List/index';
-import ListItemText from '@material-ui/core/ListItemText/index';
+// import ListItemText from '@material-ui/core/ListItemText/index';
 
 import ActtionBar from '../ActionBar';
 import Author from '../Author';
@@ -16,7 +16,7 @@ import Repository from '../Repository';
 
 import { DetailContextConsumer } from '../../pages/version/index';
 
-import { TitleListItem } from './styles';
+import { TitleListItem, TitleListItemText } from './styles';
 
 class DetailSidebar extends Component {
   render() {
@@ -51,7 +51,7 @@ class DetailSidebar extends Component {
       return (
         <List className={'detail-info'}>
           <TitleListItem alignItems={"flex-start"}>
-            <ListItemText
+            <TitleListItemText
               primary={<b>{packageName}</b>}
               secondary={packageMeta.latest.description}
             />

src/webui/components/DetailSidebar/styles.js

@@ -6,6 +6,7 @@
 import styled from 'react-emotion';
 import Avatar from '@material-ui/core/Avatar/index';
 import ListItem from '@material-ui/core/ListItem/index';
+import ListItemText from '@material-ui/core/ListItemText/index';
 
 import colors from '../../utils/styles/colors';
 
@@ -17,6 +18,14 @@ export const TitleListItem = styled(ListItem)`
   }
 `;
 
+export const TitleListItemText = styled(ListItemText)`
+  && {
+    padding-left: 0;
+    padding-right: 0;
+    padding-top: 8px;
+  }
+`;
+
 export const TitleAvatar = styled(Avatar)`
   && {
     color: ${colors.greySuperLight};

src/webui/components/Install/styles.js

@@ -17,7 +17,7 @@ export const Heading = styled(Typography)`
 
 export const InstallItem = styled(ListItem)`
   && {
-    padding: 0;
+    padding: 0 0 0 0;
   }
 `;