fix switch

frontend/src/component/common/index.js

@@ -3,6 +3,7 @@ const {
     List, ListItem, ListItemContent,
     Grid, Cell,
     Button, Icon,
+    Switch,
 } = require('react-mdl');
 const { Link } = require('react-router');
 
@@ -21,13 +22,16 @@ export const AppsLinkList = ({ apps }) => (
 );
 
 export const HeaderTitle = ({ title, actions, subtitle }) => (
-    <Grid style={{ borderBottom: '1px solid #f1f1f1', marginBottom: '10px' }}>
-        <Cell col={6}>
-            <h4 className="mdl-typography--subhead">{title}</h4>
-            {subtitle && <small>{subtitle}</small>}
-        </Cell>
-        <Cell col={6} style={{ textAlign: 'right' }}>{actions}</Cell>
-    </Grid>
+    <div style={{ display: 'flex', borderBottom: '1px solid #f1f1f1', marginBottom: '10px', padding: '16px 20px ' }}>
+            <div style={{ flex: '1' }}>
+                <h6 style={{ margin: 0 }}>{title}</h6>
+                {subtitle && <small>{subtitle}</small>}
+            </div>
+
+            <div style={{ flex: '1', textAlign: 'right' }}>
+                {actions}
+            </div>
+    </div>
 );
 
 export const FormButtons = ({ submitText = 'Create', onCancel }) => (
@@ -43,3 +47,13 @@ export const FormButtons = ({ submitText = 'Create', onCancel }) => (
         </Button>
     </div>
 );
+
+export const SwitchWithLabel = ({ onChange, children, checked }) => (
+    <span>
+        <span style={{ cursor: 'pointer', display: 'inline-block', width: '45px' }}>
+            <Switch onChange={onChange} checked={checked} />
+        </span>
+        <span>{children}</span>
+    </span>
+);
+

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

@@ -37,11 +37,11 @@ const Feature = ({
                 </div>
 
                 &nbsp;
-            <span style={{ display: 'inline-block', width: '45px' }} title={`Toggle ${name}`}>
+                <span style={{ display: 'inline-block', width: '45px' }} title={`Toggle ${name}`}>
                     <Switch title="test" key="left-actions" onChange={() => onFeatureClick(feature)} checked={enabled} />
                 </span>
                 <Link to={`/features/edit/${name}`} className={style.link}>
-                    {name} <small>{(description && description.substring(0, 100)) || ''}</small>
+                    {name} <small>{(description && description.substring(0, 30)) || ''}</small>
                 </Link>
             </span>
 

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

@@ -12,7 +12,7 @@ import { fetchFeatureMetrics, fetchSeenApps } from '../../store/feature-metrics-
 import { fetchHistoryForToggle } from '../../store/history-actions';
 import { getIcon } from '../history/history-item-diff';
 
-import { AppsLinkList } from '../common';
+import { AppsLinkList, SwitchWithLabel } from '../common';
 
 class EditFeatureToggleWrapper extends React.Component {
 
@@ -71,11 +71,9 @@ class EditFeatureToggleWrapper extends React.Component {
             <div>
                 <h4>{featureToggle.name} <small>{featureToggle.enabled ? 'is enabled' : 'is disabled'}</small></h4>
                 <hr />
-                <div style={{ maxWidth: '350px' }} >
-                    <Switch style={{ cursor: 'pointer' }} onChange={() => toggleFeature(featureToggle)} checked={featureToggle.enabled}>
-                        Toggle {featureToggle.name}
-                    </Switch>
-                </div>
+                <SwitchWithLabel
+                    checked={featureToggle.enabled}
+                    onChange={() => toggleFeature(featureToggle)}>Toggle {featureToggle.name}</SwitchWithLabel>
                 <hr />
                 <Grid style={{ textAlign: 'center' }}>
                     <Cell col={3}>

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

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import HistoryItemDiff from './history-item-diff';
 import HistoryItemJson from './history-item-json';
 import { Switch, Table, TableHeader, Grid, Cell } from 'react-mdl';
-import { HeaderTitle } from '../common';
+import { HeaderTitle, SwitchWithLabel } from '../common';
 
 import style from './history.scss';
 
@@ -42,7 +42,9 @@ class HistoryList extends Component {
 
         return (
             <div className={style.history}>
-                <HeaderTitle title={this.props.title} actions={<Switch checked={showData} onChange={this.toggleShowDiff.bind(this)}>Show full events</Switch>}/>
+                <HeaderTitle title={this.props.title} actions={
+                    <SwitchWithLabel checked={showData} onChange={this.toggleShowDiff.bind(this)}>Show full events</SwitchWithLabel>
+                }/>
                 {entries}
             </div>
         );