Ivan - Create Ticket Form - Create and implement Header component [skip ci]

client/src/app/main/dashboard/dashboard-create-ticket/create-ticket-form.js

@@ -5,18 +5,19 @@ import { browserHistory } from 'react-router';
 import i18n               from 'lib-app/i18n';
 import API                from 'lib-app/api-call';
 
-import SubmitButton       from 'core-components/submit-button';
-import Message            from 'core-components/message';
+import Header             from 'core-components/header';
 import Form               from 'core-components/form';
 import FormField          from 'core-components/form-field';
+import SubmitButton       from 'core-components/submit-button';
+import Message            from 'core-components/message';
 
 class CreateTicketForm extends React.Component {
 
     static propTypes = {
-        userLogged: React.PropTypes.boolean
+        userLogged: React.PropTypes.bool
     };
 
-    static defaultProps ={
+    static defaultProps = {
         userLogged: true
     };
 
@@ -32,7 +33,7 @@ class CreateTicketForm extends React.Component {
     render() {
         return (
             <div className="create-ticket-form">
-                <h2>Create Ticket</h2>
+                <Header title={i18n('CREATE_TICKET')} description={i18n('CREATE_TICKET_DESCRIPTION')} />
                 <Form loading={this.state.loading} onSubmit={this.onSubmit.bind(this)}>
                     {(!this.props.userLogged) ? this.renderEmailAndName() : null}
                     <div className="row">

client/src/app/main/dashboard/dashboard-list-tickets/dashboard-list-tickets-page.js

@@ -1,6 +1,9 @@
 import React from 'react';
 import {connect} from 'react-redux';
 
+import i18n from 'lib-app/i18n';
+
+import Header from 'core-components/header';
 import Table from 'core-components/table';
 import Button from 'core-components/button';
 
@@ -16,7 +19,7 @@ class DashboardListTicketsPage extends React.Component {
     render() {
         return (
             <div className="dashboard-ticket-list">
-                <div className="dashboard-ticket-list__header">Tickets</div>
+                <Header title={i18n('TICKET_LIST')} description={i18n('TICKET_LIST_DESCRIPTION')} />
                 <Table headers={this.getTableHeaders()} rows={this.getTableRows()} />
             </div>
         );

client/src/app/main/dashboard/dashboard-list-tickets/dashboard-list-tickets-page.scss

@@ -2,12 +2,6 @@
 
 .dashboard-ticket-list {
 
-    &__header {
-        text-align: left;
-        font-variant: small-caps;
-        font-size: 16px;
-    }
-
     &__number {
         text-align: left;
     }

client/src/core-components/header.js

@@ -0,0 +1,27 @@
+import React from 'react';
+
+class Header extends React.Component {
+    static propTypes = {
+        title: React.PropTypes.string.isRequired,
+        description: React.PropTypes.string
+    };
+
+    render() {
+        return (
+            <div className="header">
+                <h2 className="header__title">{this.props.title}</h2>
+                {(this.props.description) ? this.renderDescription() : null}
+            </div>
+        )
+    }
+
+    renderDescription() {
+        return (
+            <div className="header__description">
+                {this.props.description}
+            </div>
+        )
+    }
+}
+
+export default Header;

client/src/core-components/header.scss

@@ -0,0 +1,17 @@
+@import '../scss/vars';
+
+.header {
+    margin-bottom: 30px;
+    text-align: left;
+
+    &__title {
+        margin: 5px 0 14px;
+        font-size: 24px;
+    }
+
+    &__description {
+        font-size: 13px;
+        color: $dark-grey;
+        font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
+    }
+}

client/src/data/languages/en.js

@@ -9,11 +9,13 @@ export default {
     'NEW_PASSWORD': 'New password',
     'REPEAT_NEW_PASSWORD': 'Repeat new password',
     'BACK_LOGIN_FORM': 'Back to login form',
-    'TICKET_LIST': 'Ticket List',
-    'CREATE_TICKET': 'Create Ticket',
     'VIEW_ARTICLES': 'View Articles',
     'EDIT_PROFILE': 'Edit Profile',
     'CLOSE_SESSION': 'Close session',
+    'CREATE_TICKET': 'Create Ticket',
+    'CREATE_TICKET_DESCRIPTION': 'This is a form for creating tickets. Fill the form and send us your issues/doubts/suggestions. Our support system will answer it as soon as possible.',
+    'TICKET_LIST': 'Ticket List',
+    'TICKET_LIST_DESCRIPTION': 'Here you can find a list of all tickets you have sent to our support team. Notice that the highlighted ones have new unread messages.',
 
     //ERRORS
     'EMAIL_NOT_EXIST': 'Email does not exist',