styling cleanup

frontend/src/component/app.jsx

@@ -5,7 +5,6 @@ import { Layout, Drawer, Header, Navigation, Content,
 } from 'react-mdl';
 import { Link } from 'react-router';
 import styles from './styles.scss';
-import { styles as commonStyles } from './common';
 import ErrorContainer from './error/error-container';
 
 import UserContainer from './user/user-container';
@@ -114,7 +113,7 @@ export default class App extends Component {
         };
 
         return (
-            <div>
+            <div className={styles.container}>
                 <UserContainer />
                 <Layout fixedHeader>
                     <Header title={this.getTitleWithLinks()}>
@@ -124,7 +123,7 @@ export default class App extends Component {
                     </Header>
                     <Drawer className="mdl-color--white">
                         <span className={[styles.drawerTitle, 'mdl-layout-title'].join(' ')}>Unleash</span>
-                        <hr className={commonStyles.divider}/>
+                        <hr/>
                         <Navigation className={styles.navigation}>
                             {createListItem('/features', 'Feature toggles', 'list', true)}
                             {createListItem('/strategies', 'Strategies', 'extension', true)}
@@ -132,14 +131,13 @@ export default class App extends Component {
                             {createListItem('/archive', 'Archived toggles', 'archive', true)}
                             {createListItem('/applications', 'Applications', 'apps', true)}
                         </Navigation>
-                        <hr className={commonStyles.divider}/>
+                        <hr/>
                         <Navigation className={styles.navigation}>
                             <a href="https://github.com/Unleash" target="_blank" className={[styles.navigationLink, 'mdl-color-text--grey-900'].join(' ')}>
                                 <i className={[
                                     'material-icons',
                                     styles.navigationIcon,
-                                    styles.githubIcon,
-                                    'mdl-color-text--grey-600',
+                                    styles.iconGitHub,
                                 ].join(' ')}/>GitHub
                             </a>
                         </Navigation>

frontend/src/component/application/application-edit-component.js

@@ -162,7 +162,7 @@ class ClientApplications extends PureComponent {
                 {url &&
                     <CardMenu><IconLink url={url} icon="link"/></CardMenu>
                 }
-                <hr className={commonStyles.divider}/>
+                <hr/>
                 <Tabs activeTab={this.state.activeTab} onChange={(tabId) => this.setState({ activeTab: tabId })} ripple
                     tabBarProps={{ style: { width: '100%' } }} className="mdl-color--grey-100">
                     <Tab>Details</Tab>

frontend/src/component/common/common.scss

@@ -17,16 +17,6 @@
     display: none;
 }
 
-.divider {
-    margin: 0;
-    height: auto;
-    border-color: rgba(0,0,0,.12);
-}
-
-.list {
-    margin: 0;
-}
-
 .listLink {
     color: #212121;
     text-decoration: none;

frontend/src/component/common/index.js

@@ -17,7 +17,7 @@ export const AppsLinkList = ({ apps }) => (
     <List>
     {apps.length > 0 && apps.map(({ appName, description = '-', icon = 'apps' }) => (
         <ListItem twoLine key={appName}>
-            <span className="mdl-list__item-primary-content">
+            <span className="mdl-list__item-primary-content" style={{ minWidth: 0 }}>
                 <Icon name={icon} className="mdl-list__item-avatar"/>
                 <Link to={`/applications/${appName}`} className={[styles.listLink, styles.truncate].join(' ')}>
                     {appName}

frontend/src/component/feature/list-component.jsx

@@ -86,8 +86,8 @@ export default class FeatureListComponent extends React.PureComponent {
                         <MenuItem disabled={settings.sort === 'metrics'} data-target="metrics">Metrics</MenuItem>
                     </Menu>
                 </CardActions>
-                <hr className={commonStyles.divider}/>
-                <List className={commonStyles.list}>
+                <hr/>
+                <List>
                     {features.map((feature, i) =>
                         <Feature key={i}
                             settings={settings}

frontend/src/component/feature/metric-component.jsx

@@ -2,7 +2,7 @@ import React, { PropTypes } from 'react';
 import { Grid, Cell, Icon, Chip, ChipContact } from 'react-mdl';
 import Progress from './progress';
 import { Link } from 'react-router';
-import { AppsLinkList, calc, styles as commonStyles } from '../common';
+import { AppsLinkList, calc } from '../common';
 import { formatFullDateTime } from '../common/util';
 import styles from './metrics.scss';
 
@@ -85,7 +85,7 @@ export default class MetricComponent extends React.Component {
                     <span>Created {formatFullDateTime(featureToggle.createdAt)}</span>
                 </Cell>
             </Grid>
-            <hr  className={commonStyles.divider}/>
+            <hr/>
             <StrategiesList strategies={featureToggle.strategies}/>
         </div>);
     }

frontend/src/component/feature/view-component.jsx

@@ -100,7 +100,7 @@ export default class ViewFeatureToggleComponent extends React.Component {
                     </span>
                     <Button onClick={removeToggle} style={{ flexShrink: 0 }}>Archive</Button>
                 </CardActions>
-                <hr className={commonStyles.divider}/>
+                <hr/>
                 <Tabs activeTab={activeTabId} ripple tabBarProps={{ style: { width: '100%' } }} className="mdl-color--grey-100">
                     <Tab onClick={() => this.goToTab('view', featureToggleName)}>Metrics</Tab>
                     <Tab onClick={() => this.goToTab('edit', featureToggleName)}>Edit</Tab>

frontend/src/component/strategies/list-component.jsx

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { Link } from 'react-router';
 
 import { List, ListItem, ListItemContent, IconButton, Grid, Cell } from 'react-mdl';
-import { HeaderTitle, styles as commonStyles } from '../common';
+import { HeaderTitle } from '../common';
 
 class StrategiesListComponent extends Component {
 
@@ -26,7 +26,7 @@ class StrategiesListComponent extends Component {
                                 name="add"
                                 onClick={() => this.context.router.push('/strategies/create')}
                                 title="Add new strategy" />} />
-                    <List className={commonStyles.list}>
+                    <List>
                         {strategies.length > 0 ? strategies.map((strategy, i) => (
                                 <ListItem key={i} twoLine>
                                     <ListItemContent icon="extension" subtitle={strategy.description}>

frontend/src/component/styles.scss

@@ -1,3 +1,14 @@
+.container {
+    ul {
+        margin: 0;
+    }
+    hr {
+        margin: 0;
+        height: auto;
+        border-color: rgba(0,0,0,.12);
+    }
+}
+
 .content {
     width: 1200px;
     margin-left: auto;
@@ -59,8 +70,8 @@
     margin-right: 32px;
 }
 
-.githubIcon {
+.iconGitHub {
     width: 24px;
     height: 24px;
     background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJ3aWR0aDoyNHB4O2hlaWdodDoyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiPgogICAgPHBhdGggZmlsbD0iIzc1NzU3NSIgZD0iTTEyLDJBMTAsMTAgMCAwLDAgMiwxMkMyLDE2LjQyIDQuODcsMjAuMTcgOC44NCwyMS41QzkuMzQsMjEuNTggOS41LDIxLjI3IDkuNSwyMUM5LjUsMjAuNzcgOS41LDIwLjE0IDkuNSwxOS4zMUM2LjczLDE5LjkxIDYuMTQsMTcuOTcgNi4xNCwxNy45N0M1LjY4LDE2LjgxIDUuMDMsMTYuNSA1LjAzLDE2LjVDNC4xMiwxNS44OCA1LjEsMTUuOSA1LjEsMTUuOUM2LjEsMTUuOTcgNi42MywxNi45MyA2LjYzLDE2LjkzQzcuNSwxOC40NSA4Ljk3LDE4IDkuNTQsMTcuNzZDOS42MywxNy4xMSA5Ljg5LDE2LjY3IDEwLjE3LDE2LjQyQzcuOTUsMTYuMTcgNS42MiwxNS4zMSA1LjYyLDExLjVDNS42MiwxMC4zOSA2LDkuNSA2LjY1LDguNzlDNi41NSw4LjU0IDYuMiw3LjUgNi43NSw2LjE1QzYuNzUsNi4xNSA3LjU5LDUuODggOS41LDcuMTdDMTAuMjksNi45NSAxMS4xNSw2Ljg0IDEyLDYuODRDMTIuODUsNi44NCAxMy43MSw2Ljk1IDE0LjUsNy4xN0MxNi40MSw1Ljg4IDE3LjI1LDYuMTUgMTcuMjUsNi4xNUMxNy44LDcuNSAxNy40NSw4LjU0IDE3LjM1LDguNzlDMTgsOS41IDE4LjM4LDEwLjM5IDE4LjM4LDExLjVDMTguMzgsMTUuMzIgMTYuMDQsMTYuMTYgMTMuODEsMTYuNDFDMTQuMTcsMTYuNzIgMTQuNSwxNy4zMyAxNC41LDE4LjI2QzE0LjUsMTkuNiAxNC41LDIwLjY4IDE0LjUsMjFDMTQuNSwyMS4yNyAxNC42NiwyMS41OSAxNS4xNywyMS41QzE5LjE0LDIwLjE2IDIyLDE2LjQyIDIyLDEyQTEwLDEwIDAgMCwwIDEyLDJaIiAvPgo8L3N2Zz4=);
-}
+}