From 97253d493516b61b2a23908f8f7afd8331a94a6a Mon Sep 17 00:00:00 2001 From: Alexander Ivantsov Date: Wed, 24 May 2017 19:27:30 +0200 Subject: [PATCH] Update error screen (#34) --- scripts/generate-manifest.js | 2 +- src/locales/en.js | 17 ++- src/locales/ru.js | 17 ++- src/pages/popup/components/Translation.js | 3 +- .../UnavailableMessage/UnavailableMessage.js | 23 +++- .../UnavailableMessage.less | 22 +++- .../__tests__/__snapshots__/App.test.js.snap | 117 +++++++++++++++--- src/pages/popup/styles/layout.less | 16 +++ 8 files changed, 183 insertions(+), 34 deletions(-) diff --git a/scripts/generate-manifest.js b/scripts/generate-manifest.js index a674f3f..2f417fb 100644 --- a/scripts/generate-manifest.js +++ b/scripts/generate-manifest.js @@ -3,6 +3,6 @@ const getManifest = require('../src/manifest'); const target = process.argv[2]; -fs.outputJsonSync('./dist/manifest.json', getManifest(target)); +fs.outputJsonSync('./dist/manifest.json', getManifest(target), {spaces: 2}); console.log('Manifest is generated.'); diff --git a/src/locales/en.js b/src/locales/en.js index 7db3a3d..ad17788 100644 --- a/src/locales/en.js +++ b/src/locales/en.js @@ -24,10 +24,19 @@ module.exports = { }, emptyList: 'You have no unread emails', loadingError: 'Cannot load emails... Please try again later', - notAuthorized: { - title: 'Looks like you\'re not authorized or there is no network connection.', - subTitle: 'You can try to reload the extension with the button below.', - btnText: 'Reload extension', + unavailable: { + title: 'Something went wrong...', + subTitle: 'There are a few possible reasons why the extension can\'t work properly:', + notAuth: { + label: 'You are not authorized.', + checkAuth: 'Check that you\'re authorized on Yandex (exactly .ru domain).', + relogin: 'Try to logout and login again.', + }, + noConnection: { + label: 'There is no connection to the Internet.', + }, + nothingHelped: 'If nothing above helped then try to reload the extension with the button bellow.', + reloadBtn: 'Reload extension', }, donation: { text: 'Like the extension? - Help the author!', diff --git a/src/locales/ru.js b/src/locales/ru.js index c10c635..cf08d4b 100644 --- a/src/locales/ru.js +++ b/src/locales/ru.js @@ -24,10 +24,19 @@ module.exports = { }, emptyList: 'У вас нет непрочитанных писем', loadingError: 'Не удалось загрузить письма... Попробуйте позже', - notAuthorized: { - title: 'Похоже, что Вы не авторизованы или отсутствует соединение.', - subTitle: 'Вы можете попробовать перезагрузить расширение с помощью кнопки ниже.', - btnText: 'Перезагрузить расширение', + unavailable: { + title: 'Что-то пошло не так...', + subTitle: 'Возможны следующие причины почему расширение может не работать корректно:', + notAuth: { + label: 'Вы не авторизованы.', + checkAuth: 'Проверьте, что вы авторизованы в Яндекс (именно .ru домен).', + relogin: 'Попробуйте разлогиниться и залогиниться снова.', + }, + noConnection: { + label: 'Отсутствует соединение с интернетом.', + }, + nothingHelped: 'Если ничего из вышеперечисленного не помогло, вы можете перезагрузить расширение с помощью кнопки ниже.', + reloadBtn: 'Перезагрузить расширение', }, donation: { text: 'Нравится расширение? - Поддержи автора!', diff --git a/src/pages/popup/components/Translation.js b/src/pages/popup/components/Translation.js index 40653f7..6aebcf3 100644 --- a/src/pages/popup/components/Translation.js +++ b/src/pages/popup/components/Translation.js @@ -3,7 +3,8 @@ import React from 'react'; import i18n from 'shared/utils/i18n'; const Translation = ({id}) => ( - {i18n.text(`popup.${id}`)} + // eslint-disable-next-line react/no-danger + ); Translation.propTypes = { id: PropTypes.string.isRequired, diff --git a/src/pages/popup/components/UnavailableMessage/UnavailableMessage.js b/src/pages/popup/components/UnavailableMessage/UnavailableMessage.js index 41c188f..da08e06 100644 --- a/src/pages/popup/components/UnavailableMessage/UnavailableMessage.js +++ b/src/pages/popup/components/UnavailableMessage/UnavailableMessage.js @@ -7,12 +7,29 @@ import styles from './UnavailableMessage.less'; const UnavailableMessage = ({reloadApp}) => (
-

-

+
+

+

+
    +
  1. + +
      +
      • +
      • +
    +
    2. +
  2. + +
    3. +
+
+ + +

diff --git a/src/pages/popup/components/UnavailableMessage/UnavailableMessage.less b/src/pages/popup/components/UnavailableMessage/UnavailableMessage.less index 0d75737..1eebc4b 100644 --- a/src/pages/popup/components/UnavailableMessage/UnavailableMessage.less +++ b/src/pages/popup/components/UnavailableMessage/UnavailableMessage.less @@ -2,11 +2,27 @@ .container { color: @grey1; - font-size: 18px; + font-size: 16px; + padding: 32px; +} + +.title { + font-size: 22px; text-align: center; - padding-top: 100px; + margin-bottom: 48px; +} + +.subTitle { + font-size: 18px; + margin-bottom: 12px; +} + +.btnTitle { + composes: subTitle; + margin-top: 48px; } .btnContainer { - margin-top: 32px; + text-align: center; + margin-top: 16px; } diff --git a/src/pages/popup/components/__tests__/__snapshots__/App.test.js.snap b/src/pages/popup/components/__tests__/__snapshots__/App.test.js.snap index 836ec60..8e25026 100644 --- a/src/pages/popup/components/__tests__/__snapshots__/App.test.js.snap +++ b/src/pages/popup/components/__tests__/__snapshots__/App.test.js.snap @@ -11,9 +11,13 @@ exports[`popup/App authorized 1`] = `
- - popup.donation.text - +
@@ -21,9 +25,13 @@ exports[`popup/App authorized 1`] = ` className="secondary" onClick={[Function]} > - - popup.donation.donateBtn - +
@@ -34,15 +42,84 @@ exports[`popup/App not authorized 1`] = `
-

- - popup.notAuthorized.title - -

-

- - popup.notAuthorized.subTitle - +

+

+ +

+

+ +

+
    +
  1. + + + +
      +
    • + +
      • +
    • + +
      • +
    +
    2. +
  2. + + + +
    3. +
+
+

+

- - popup.notAuthorized.btnText - +
diff --git a/src/pages/popup/styles/layout.less b/src/pages/popup/styles/layout.less index 125da92..dfe48da 100644 --- a/src/pages/popup/styles/layout.less +++ b/src/pages/popup/styles/layout.less @@ -9,11 +9,27 @@ body { box-sizing: border-box; } +h1, +h2, p { margin: 0; padding: 0; } +ol, +ul { + margin: 0; + padding-left: 18px; +} + +ul { + list-style-type: disc; +} + +li { + margin-top: 8px; +} + a { color: black; text-decoration: none;