Ivan - Frontend - Fix Card component style issues, add header to main-home-page-portal [skip ci]

client/src/app/main/main-home/main-home-page-portal.js

@@ -1,21 +1,31 @@
 import React from 'react';
 import classNames from 'classnames';
 
-
 import Widget from 'core-components/widget';
 import Card from 'core-components/card';
 import i18n from 'lib-app/i18n';
+import Header from 'core-components/header';
 
 class MainHomePagePortal extends React.Component {
     render() {
         return (
             <Widget className={classNames('main-home-page-portal', this.props.className)}>
-                <Card title={i18n('TICKETS')} description={i18n('TICKETS_DESCRIPTION')} icon="ticket" color="red"/>
+                <div className="main-home-page-portal__title">
-                <Card title={i18n('ARTICLES')} description={i18n('ARTICLES_DESCRIPTION')} icon="book" color="blue"/>
+                    <Header title={i18n('SUPPORT_CENTER')} description={i18n('SUPPORT_CENTER_DESCRIPTION')} />
-                <Card title={i18n('ACCOUNT')} description={i18n('ACCOUNT_DESCRIPTION')} icon="user" color="green"/>
+                </div>
+                <div className="main-home-page-portal__cards">
+                    <div className="main-home-page-portal__card col-md-4">
+                        <Card title={i18n('TICKETS')} description={i18n('TICKETS_DESCRIPTION')} icon="ticket" color="red"/>
+                    </div>
+                    <div className="main-home-page-portal__card col-md-4">
+                        <Card title={i18n('ARTICLES')} description={i18n('ARTICLES_DESCRIPTION')} icon="book" color="blue"/>
+                    </div>
+                    <div className="main-home-page-portal__card col-md-4">
+                        <Card title={i18n('ACCOUNT')} description={i18n('ACCOUNT_DESCRIPTION')} icon="user" color="green"/>
+                    </div>
+                </div>
             </Widget>
         );
-
     }
 }
 

client/src/app/main/main-home/main-home-page-portal.scss

@@ -1,3 +1,7 @@
 .main-home-page-portal {
+    min-height: 412px;
 
+    &__card {
+        padding: 5px;
+    }
 }

client/src/core-components/card.js

@@ -10,22 +10,26 @@ class Card extends React.Component{
         color: React.PropTypes.string
     };
     
-    render(){
+    render() {
-        return(
+        return (
             <div className={this.getClass()}>
                 <div className="card__icon"><Icon name={this.props.icon} size="5x"/></div>
                 <div className="card__title">{this.props.title}</div>
                 <div className="card__description">{this.props.description}</div>
             </div>
-        )
+        );
     }
-    getClass(){
+
+    getClass() {
         var classes = {
             'card': true,
             'card_red': (this.props.color === 'red'),
             'card_blue': (this.props.color === 'blue'),
             'card_green': (this.props.color === 'green')
         };
+
+        classes[this.props.className] = (this.props.className);
+
         return classNames(classes);
     }
 }

client/src/core-components/card.scss

@@ -1,26 +1,30 @@
 @import "../scss/vars";
 
-.card{
+.card {
-  padding: 15px;
+    border-radius: 4px;
-  width: 200px;
+    color: white;
-  height: 260px;
+    height: 260px;
-  color: white;
+    padding: 15px;
-  display: inline-block;
+
-  margin-right: 10px;
+    &__title {
-  border-radius: 4px;
+        font-variant: small-caps;
-  &__title{
+        margin: 10px 0;
-    font-variant: small-caps;
+        font-size: $font-size--lg;
-    font-size: 20px;
+    }
-  }
+
-  &__description{
+    &__description {
-  }
+        font-size: $font-size--sm;
-  &_red{
+    }
-    background-color: $primary-red;
+
-  }
+    &_red {
-  &_blue{
+        background-color: $primary-red;
-    background-color: $secondary-blue;
+    }
-  }
+
-  &_green{
+    &_blue {
-    background-color: $primary-green;
+        background-color: $secondary-blue;
-  }
+    }
+
+    &_green {
+        background-color: $primary-green;
+    }
 }

client/src/core-components/form-field.scss

@@ -15,7 +15,7 @@
     &_errored {
         .form-field__error {
             color: $primary-red;
-            font-size: $font-size--sm;
+            font-size: $font-size--xs;
             display: block;
             position: absolute;
         }

client/src/data/languages/en.js

@@ -19,9 +19,11 @@ export default {
     '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.',
-    'TICKETS_DESCRIPTION': 'A  random  text  about    tickets',
+    'TICKETS_DESCRIPTION': 'Send ticket through our support center and get response of your doubts, suggestions and issues.',
-    'ARTICLES_DESCRIPTION': 'A random text about articles',
+    'ARTICLES_DESCRIPTION': 'Take a look to our articles about common issues, guides and documentation.',
-    'ACCOUNT_DESCRIPTION': 'A random text about account',
+    'ACCOUNT_DESCRIPTION': 'All your tickets are stored in your accounts\'s profile. Keep track off all your tickets you send to our staff team.',
+    'SUPPORT_CENTER': 'Support Center',
+    'SUPPORT_CENTER_DESCRIPTION': 'Welcome to our support center. You can contact us through a tickets system. Your tickets will be answered by our staff.',
 
     //ERRORS
     'EMAIL_NOT_EXIST': 'Email does not exist',

client/src/scss/_vars.scss

@@ -18,8 +18,8 @@ $full-space: 40px;
 $half-space: 20px;
 
 // FONT SIZING
-$font-size--xs: 10px;
+$font-size--xs: 11px;
-$font-size--sm: 12px;
+$font-size--sm: 13px;
 $font-size--md: 16px;
 $font-size--lg: 24px;
 $font-size--xl: 32px;