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;