From 672635a1850c174fc11a9a50fb821cb37ab0bd7b Mon Sep 17 00:00:00 2001
From: sveisvei <sveinung.rosaker@gmail.com>
Date: Mon, 5 Dec 2016 18:43:00 +0100
Subject: [PATCH] add list and icon

---
 .../src/component/feature/view-edit-container.jsx | 15 ++++++++++-----
 .../src/component/history/history-item-diff.jsx   |  2 +-
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/frontend/src/component/feature/view-edit-container.jsx b/frontend/src/component/feature/view-edit-container.jsx
index 9eb7160b0a..0ead30911f 100644
--- a/frontend/src/component/feature/view-edit-container.jsx
+++ b/frontend/src/component/feature/view-edit-container.jsx
@@ -1,5 +1,5 @@
 import React, { PropTypes } from 'react';
-import { Grid, Cell, Icon, Switch } from 'react-mdl';
+import { Grid, Cell, Icon, Switch, List, ListItem, ListItemContent } from 'react-mdl';
 import { Link } from 'react-router';
 
 import percentLib from 'percent';
@@ -10,6 +10,7 @@ import EditFeatureToggle from './form-edit-container.jsx';
 import { fetchFeatureToggles, toggleFeature } from '../../store/feature-actions';
 import { fetchFeatureMetrics, fetchSeenApps } from '../../store/feature-metrics-actions';
 import { fetchHistoryForToggle } from '../../store/history-actions';
+import { getIcon } from '../history/history-item-diff';
 
 class EditFeatureToggleWrapper extends React.Component {
 
@@ -113,10 +114,14 @@ class EditFeatureToggleWrapper extends React.Component {
                     </Cell>
                     <Cell col={3}>
                             <div><strong>History</strong></div>
-                            <ol>
+                            <List style={{ textAlign: 'left' }}>
                                 {history.map(({ createdAt, type, createdBy }) => 
-                                    <li><small>{createdAt}</small> {type} {createdBy}</li>)}
-                            </ol>
+                                    <ListItem twoLine>
+                                        <ListItemContent avatar={getIcon(type)} subtitle={createdAt}>
+                                            {createdBy}
+                                        </ListItemContent>
+                                    </ListItem>)}
+                            </List>
                             <Link to={`/history/${featureToggleName}`}>
                                 See all events.
                             </Link>
@@ -157,7 +162,7 @@ function getHistoryFromToggle (state, toggleName) {
             .slice(0, 5)
             .toJS()
             .map(({ createdAt, createdBy, type }) => ({
-                createdAt: new Date(createdAt).toString(),
+                createdAt: new Date(createdAt).toLocaleString('nb-NO'),
                 createdBy,
                 type,
             }));
diff --git a/frontend/src/component/history/history-item-diff.jsx b/frontend/src/component/history/history-item-diff.jsx
index e98bb530f8..0374073ab3 100644
--- a/frontend/src/component/history/history-item-diff.jsx
+++ b/frontend/src/component/history/history-item-diff.jsx
@@ -17,7 +17,7 @@ const SPADEN_CLASS = {
     N: style.positive, // added
 };
 
-function getIcon (type) {
+export function getIcon (type) {
     switch (type) {
         case 'feature-updated': return 'autorenew';
         case 'feature-created': return 'add';