From 24c05297c47c4beafb19d0014235b0377a547b6f Mon Sep 17 00:00:00 2001
From: cyril lopez <cyril.lpz@gmail.com>
Date: Tue, 18 Jul 2017 14:07:48 +0200
Subject: [PATCH] design content header

---
 .../admin/src/components/ContentHeader/index.js   |  6 +++---
 .../src/components/ContentHeader/styles.scss      | 15 ++++++++++++++-
 .../admin/src/containers/Home/index.js            | 10 ++++++----
 .../admin/src/containers/Home/styles.scss         |  1 +
 4 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/packages/strapi-plugin-setings-manager/admin/src/components/ContentHeader/index.js b/packages/strapi-plugin-setings-manager/admin/src/components/ContentHeader/index.js
index 333d772693..8544c36af0 100644
--- a/packages/strapi-plugin-setings-manager/admin/src/components/ContentHeader/index.js
+++ b/packages/strapi-plugin-setings-manager/admin/src/components/ContentHeader/index.js
@@ -12,10 +12,10 @@ class ContentHeader extends React.Component { // eslint-disable-line react/prefe
   render() {
     return (
       <div className={styles.contentHeader}>
-        <div>
-          <FormattedMessage {...{id: this.props.content.name}} />
+        <div className={styles.title}>
+          <FormattedMessage {...{id: this.props.name }} />
         </div>
-        <FormattedMessage {...{id: this.props.content.description}} />
+        <span><FormattedMessage {...{id: this.props.description}} /></span>
       </div>
     );
   }
diff --git a/packages/strapi-plugin-setings-manager/admin/src/components/ContentHeader/styles.scss b/packages/strapi-plugin-setings-manager/admin/src/components/ContentHeader/styles.scss
index 5467d58f94..fe32ab6a20 100644
--- a/packages/strapi-plugin-setings-manager/admin/src/components/ContentHeader/styles.scss
+++ b/packages/strapi-plugin-setings-manager/admin/src/components/ContentHeader/styles.scss
@@ -1,3 +1,16 @@
 .contentHeader { /* stylelint-disable */
-
+  padding: 3rem 4rem;
+  font-family: Lato;
+  > span {
+    color: #787E8F;
+    font-size: 1.3rem;
+    line-height: 1.5rem;
+  }
+}
+
+.title {
+  color: #333740;
+  font-family: Lato;
+  font-size: 2.4rem;
+  line-height: 2.9rem;
 }
diff --git a/packages/strapi-plugin-setings-manager/admin/src/containers/Home/index.js b/packages/strapi-plugin-setings-manager/admin/src/containers/Home/index.js
index 3d8dcd3d4a..4e8ca3106f 100644
--- a/packages/strapi-plugin-setings-manager/admin/src/containers/Home/index.js
+++ b/packages/strapi-plugin-setings-manager/admin/src/containers/Home/index.js
@@ -8,10 +8,9 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { createStructuredSelector } from 'reselect';
-import { map } from 'lodash';
 import Helmet from 'react-helmet';
 import { router } from 'app';
-import { FormattedMessage } from 'react-intl';
+
 // design
 import ContentHeader from 'components/ContentHeader';
 
@@ -56,14 +55,17 @@ export class Home extends React.Component { // eslint-disable-line react/prefer-
       return <div />;
     }
     return (
-      <div className={styles.home}>
+      <div className={`${styles.home} col-md-9`}>
         <Helmet
           title="Home"
           meta={[
             { name: 'description', content: 'Description of Home' },
           ]}
         />
-        <FormattedMessage {...{id: this.props.home.configsDisplay.name}} />
+        <ContentHeader
+          name={this.props.home.configsDisplay.name}
+          description={this.props.home.configsDisplay.description}
+        />
       </div>
     );
   }
diff --git a/packages/strapi-plugin-setings-manager/admin/src/containers/Home/styles.scss b/packages/strapi-plugin-setings-manager/admin/src/containers/Home/styles.scss
index 4e5b4c263c..797b07ec2c 100644
--- a/packages/strapi-plugin-setings-manager/admin/src/containers/Home/styles.scss
+++ b/packages/strapi-plugin-setings-manager/admin/src/containers/Home/styles.scss
@@ -1,6 +1,7 @@
 .home { /* stylelint-disable */
   background: rgba(14,22,34,0.02);
   min-height: calc(100vh - 6rem); // TODO shoukd be variable
+  padding: 0;
 }
 .baseline {
   // display: none;