Styles fix

web/ASC.Web.Client/src/components/pages/Settings/categories/integration/sub-components/consumerItem.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Box, Text } from "asc-web-components";
+import { Box, Text, Icons } from "asc-web-components";
 import ConsumerModalDialog from "./modal-dialog";
 
 const ConsumerItem = (props) => {
@@ -10,10 +10,8 @@ const ConsumerItem = (props) => {
         <>
             <Box displayProp="flex" flexDirection="column" marginProp="16px">
                 <Box displayProp="flex" justifyContent="space-between" widthProp="100%">
-                    <Box displayProp="flex">
+                    <Box displayProp="flex" widthProp="100px">
-                        <Text>
+                        {React.createElement(Icons[`${name}Icon`], {})}
-                            {name} logo
-                        </Text>
                     </Box>
                     <Box onClick={onToggleClick}>
                         toggle

web/ASC.Web.Client/src/components/pages/Settings/categories/integration/sub-components/consumers.js

@@ -6,7 +6,7 @@ export const consumers = [
         tokens: ["Ключ доступа S3", "Секретный ключ доступа S3"]
     },
     {
-        name: "Mail.ru",
+        name: "MailRu",
         description: "Подключите приложение для входа на портал по учетной записи Mail.ru.",
         innerDescription: "Добавив приложение сервиса Mail.ru Вы сможете на странице своего профиля подключить вход на портал используя аккаунт Mail.ru.",
         tokens: ["ID", "Секретный ключ"]
@@ -14,7 +14,7 @@ export const consumers = [
     {
         name: "Telegram",
         description: "Подключите аккаунт Telegram для получения оповещений портала через Telegram.",
-        innerDescription: "Описание",
+        innerDescription: "Добавив приложение сервиса Telegram Вы сможете на странице своего профиля подключить вход на портал используя аккаунт Telegram.",
         tokens: ["Токен бота", "Имя бота"]
     }
 ]

web/ASC.Web.Client/src/components/pages/Settings/categories/integration/sub-components/modal-dialog.js

@@ -1,10 +1,29 @@
 import React from "react";
-import { ModalDialog, Text, Button, TextInput, Box } from "asc-web-components";
+import { ModalDialog, Text, Button, TextInput, Box, Link } from "asc-web-components";
 
 const ConsumerModalDialog = (props) => {
 
     const { consumers, selectedConsumer } = props;
 
+    const bodyDescription = (
+        <>
+            <Text isBold={true}>Как это работает?</Text>
+            <Text>Для получения подробных инструкций по подключению этого сервиса, пожалуйста, перейдите в наш Справочный центр, где приводится вся необходимая информация.</Text>
+        </>
+    );
+    const bottomDescription = (
+        <>
+            <Text>
+                Если у вас остались вопросы по подключению этого сервиса или вам требуется помощь, вы всегда можете обратиться в нашу
+                {" "}
+                <Link
+                    isHovered={true}
+                    target="_blank"
+                    href="http://support.onlyoffice.com/ru">
+                    Службу техподдержки
+                            </Link>.</Text></>
+    );
+
     const getConsumerName = () => {
         return consumers.find((consumer) => consumer.name === selectedConsumer).name;
     }
@@ -35,10 +54,12 @@ const ConsumerModalDialog = (props) => {
             headerContent={`${getConsumerName()}`}
             bodyContent={[
                 <Text>{getInnerDescription()}</Text>,
+                <Text>{bodyDescription}</Text>,
                 getInputFields()
             ]}
             footerContent={[
-                <Button primary size="medium" label="Включить" />
+                <Button primary size="medium" label="Включить" />,
+                <Text>{bottomDescription}</Text>
             ]}
             onClose={props.onModalClose}
         />