diff --git a/client/src/app-components/are-you-sure.scss b/client/src/app-components/are-you-sure.scss
index 921ed1c3..04f4c40e 100644
--- a/client/src/app-components/are-you-sure.scss
+++ b/client/src/app-components/are-you-sure.scss
@@ -18,7 +18,7 @@
margin-bottom: 50px;
}
- &__butttons {
+ &__buttons {
margin: 0 auto;
}
diff --git a/client/src/app/main/main-maintenance-page.js b/client/src/app/main/main-maintenance-page.js
index bcee3051..c9b4cee7 100644
--- a/client/src/app/main/main-maintenance-page.js
+++ b/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 (
-
- Maintenance
+
+
+
+
+
+ {i18n('MAINTENANCE_MODE')}
+
+
+ {i18n('MAINTENANCE_MODE_DESCRIPTION')}
+
);
}
diff --git a/client/src/app/main/main-maintenance-page.scss b/client/src/app/main/main-maintenance-page.scss
new file mode 100644
index 00000000..002f49da
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/client/src/data/languages/en.js b/client/src/data/languages/en.js
index 0805e711..456ef833 100644
--- a/client/src/data/languages/en.js
+++ b/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',
diff --git a/client/src/scss/_vars.scss b/client/src/scss/_vars.scss
index cea6e370..61188e1a 100644
--- a/client/src/scss/_vars.scss
+++ b/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;