design content header

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>
     );
   }

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;
 }

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>
     );
   }

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;