Ivan - Add maintenance mode styling [skip ci]

client/src/app-components/are-you-sure.scss

@@ -18,7 +18,7 @@
         margin-bottom: 50px;
     }
 
-    &__butttons {
+    &__buttons {
         margin: 0 auto;
     }
 

client/src/app/main/main-maintenance-page.js

@@ -1,10 +1,21 @@
 import React from 'react';
 
+import i18n from 'lib-app/i18n';
+import Icon from 'core-components/icon';
+
 class MainMaintenancePage extends React.Component {
     render() {
         return (
-            <div>
-                Maintenance
+            <div className="main-maintenance-page">
+                <div className="main-maintenance-page__icon">
+                    <Icon name="wrench" size="4x"/>
+                </div>
+                <div className="main-maintenance-page__title">
+                    {i18n('MAINTENANCE_MODE')}
+                </div>
+                <div className="main-maintenance-page__description">
+                    {i18n('MAINTENANCE_MODE_DESCRIPTION')}
+                </div>
             </div>
         );
     }

client/src/app/main/main-maintenance-page.scss

@@ -0,0 +1,39 @@
+@import "../../scss/vars";
+
+.main-maintenance-page {
+    margin: auto;
+    width: 70%;
+    padding: 50px 100px;
+    border: 2px solid $dark-grey;
+    text-align: center;
+    background-color: white;
+    border-radius: 4px;
+
+    &__icon {
+        color: $primary-yellow;
+        background-color: $light-grey;
+        display: inline-block;
+        padding: 10px 15px;
+        margin-bottom: 20px;
+        border-radius: 10px;
+    }
+
+    &__title {
+        font-size: $font-size--xl;
+        margin-bottom: 30px;
+        color: $primary-yellow;
+        font-weight: bold;
+    }
+
+    &__description {
+        font-size: $font-size--bg;
+        color: $primary-black;
+    }
+}
+
+@media screen and (max-width: 500px) {
+    .main-maintenance-page {
+        padding-left: 0;
+        padding-right: 0;
+    }
+}

client/src/data/languages/en.js

@@ -114,6 +114,7 @@ export default {
     'ADD_DEPARTMENT': 'Add department',
     'UPDATE_DEPARTMENT': 'Update department',
     'TRANSFER_TICKETS_TO': 'Transfer tickets to',
+    'MAINTENANCE_MODE': 'Maintenance mode',
 
     //VIEW DESCRIPTIONS
     '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.',
@@ -141,6 +142,7 @@ export default {
     'EDIT_STAFF_DESCRIPTION': 'Here you can edit information about a staff member.',
     'MY_ACCOUNT_DESCRIPTION': 'Here you can edit information about you.',
     'DEPARTMENTS_DESCRIPTION': 'A department is a group where the tickets can go. They are used to categorize the tickets. You can assign them to other staff members.',
+    'MAINTENANCE_MODE_DESCRIPTION': 'The support system is in maintenance mode, thus unavailable at the moment. We will come back as soon as possible.',
 
     //ERRORS
     'EMAIL_OR_PASSWORD': 'Email or password invalid',

client/src/scss/_vars.scss

@@ -5,6 +5,8 @@ $secondary-red: #FB6362;
 $primary-blue: #414A59;
 $secondary-blue: #20B8c5;
 
+$primary-yellow: #E5D151;
+
 $primary-green: #82CA9C;
 
 $very-light-grey: #F7F7F7;