From 6c701989eee7471400ef29197afd76ae17a24cb7 Mon Sep 17 00:00:00 2001
From: sveisvei <sveinung.rosaker@gmail.com>
Date: Mon, 2 Jan 2017 09:26:36 +0100
Subject: [PATCH] left align and color tweaks

---
 .../src/component/feature/metric-component.jsx     | 14 ++++++++------
 frontend/src/component/feature/view-component.jsx  |  2 +-
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/frontend/src/component/feature/metric-component.jsx b/frontend/src/component/feature/metric-component.jsx
index 727c36c092..9923136a1a 100644
--- a/frontend/src/component/feature/metric-component.jsx
+++ b/frontend/src/component/feature/metric-component.jsx
@@ -16,7 +16,7 @@ const StrategyChipItem = ({ strategy }) => (
 
 // TODO what about "missing" strategies here?
 const StrategiesList = ({ strategies }) => (
-    <div style={{ verticalAlign: 'middle', textAlign: 'center' }}>With {strategies.length > 1 ? 'strategies' : 'strategy'} {
+    <div style={{ verticalAlign: 'middle' }}>With {strategies.length > 1 ? 'strategies' : 'strategy'} {
         strategies.map((strategy, i) => <StrategyChipItem key={i}  strategy={strategy} />)
     }</div>
 );
@@ -56,10 +56,12 @@ export default class MetricComponent extends React.Component {
         const lastMinutePercent = 1 * calc(lastMinute.yes, lastMinute.yes + lastMinute.no, 0);
 
         return (<div>
-            <SwitchWithLabel
-                checked={featureToggle.enabled}
-                onChange={() => toggleFeature(featureToggle)}>Toggle {featureToggle.name}</SwitchWithLabel>
-            <hr />
+            <div style={{ paddingTop: '4px' }}>
+                <SwitchWithLabel
+                    checked={featureToggle.enabled}
+                    onChange={() => toggleFeature(featureToggle)}>Toggle {featureToggle.name}</SwitchWithLabel>
+            </div>
+            <hr style={{ borderColor: '#e0e0e0' }} />
             <Grid style={{ textAlign: 'center' }}>
                 <Cell tablet={4} col={3} phone={12}>
                     {
@@ -93,7 +95,7 @@ export default class MetricComponent extends React.Component {
                     <AppsLinkList apps={seenApps} />
                 </Cell>
             </Grid>
-            <hr />
+            <hr style={{ borderColor: '#e0e0e0' }} />
             <StrategiesList strategies={featureToggle.strategies}/>
         </div>);
     }
diff --git a/frontend/src/component/feature/view-component.jsx b/frontend/src/component/feature/view-component.jsx
index 0ed75f4cd1..a645941fc1 100644
--- a/frontend/src/component/feature/view-component.jsx
+++ b/frontend/src/component/feature/view-component.jsx
@@ -83,7 +83,7 @@ export default class ViewFeatureToggleComponent extends React.Component {
                         Created {(new Date(featureToggle.createdAt)).toLocaleString('nb-NO')}
                     </small>
                 </h4>
-                <div>{featureToggle.description}</div>
+                <div className="mdl-color-text--grey"><small>{featureToggle.description}</small></div>
                 <Tabs activeTab={activeTabId} ripple style={{ marginBottom: '10px' }}>
                     <Tab onClick={() => this.goToTab('view', featureToggleName)}>Metrics</Tab>
                     <Tab onClick={() => this.goToTab('edit', featureToggleName)}>Edit</Tab>