From a9734f78e1857a66e985973e23f40a8cee209487 Mon Sep 17 00:00:00 2001
From: Viktor Fomin <viktor.fomin@onlyoffice.com>
Date: Wed, 4 Aug 2021 12:06:16 +0300
Subject: [PATCH] Web: Client: added about content

---
 .../components/pages/About/AboutContent.js    | 115 ++++++++++++++++++
 .../src/components/pages/About/index.js       | 104 +---------------
 2 files changed, 117 insertions(+), 102 deletions(-)
 create mode 100644 web/ASC.Web.Client/src/components/pages/About/AboutContent.js

diff --git a/web/ASC.Web.Client/src/components/pages/About/AboutContent.js b/web/ASC.Web.Client/src/components/pages/About/AboutContent.js
new file mode 100644
index 0000000000..d5a48d00b6
--- /dev/null
+++ b/web/ASC.Web.Client/src/components/pages/About/AboutContent.js
@@ -0,0 +1,115 @@
+import React from "react";
+import Text from "@appserver/components/text";
+import Link from "@appserver/components/link";
+import { useTranslation } from "react-i18next";
+import styled from "styled-components";
+import { ReactSVG } from "react-svg";
+
+const AboutBody = styled.div`
+  width: 100%;
+
+  .avatar {
+    margin-top: 32px;
+    margin-bottom: 16px;
+  }
+
+  .row {
+    display: flex;
+    flex-direction: row;
+  }
+
+  .copyright {
+    margin-top: 16px;
+  }
+`;
+
+const AboutContent = ({ personal, versionAppServer }) => {
+  const { t } = useTranslation("About");
+  const versionEditor = "6.3.1";
+  const license = "AGPL-3.0";
+  const link = "https://github.com/ONLYOFFICE";
+  const phone = "+371 660-16425";
+  const email = "support@onlyoffice.com";
+  const address =
+    "20A-12 Ernesta Birznieka-Upisha street, Riga, Latvia, EU, LV-1050";
+
+  return (
+    <AboutBody>
+      <div className="avatar">
+        {personal ? (
+          <ReactSVG src="images/logo_personal_about.svg" />
+        ) : (
+          <img src="images/dark_general.png" alt="Logo" />
+        )}
+      </div>
+
+      <div className="row">
+        <Text fontSize="13px">{t("DocumentManagement")}:</Text>
+        <Link
+          color="#2DA7DB"
+          fontSize="13px"
+          fontWeight="600"
+          href={link}
+          target="_blank"
+        >
+          ONLYOFFICE App Server
+        </Link>
+        <Text fontSize="13px" fontWeight="600">
+          v.{versionAppServer}
+        </Text>
+      </div>
+
+      <div className="row">
+        <Text fontSize="13px">{t("OnlineEditors")}:</Text>
+        <Link
+          color="#2DA7DB"
+          fontSize="13px"
+          fontWeight="600"
+          href={link}
+          target="_blank"
+        >
+          ONLYOFFICE Docs
+        </Link>
+        <Text fontSize="13px" fontWeight="600">
+          v.{versionEditor}
+        </Text>
+      </div>
+
+      <div className="row">
+        <Text fontSize="13px">{t("SoftwareLicense")}: </Text>
+        <Text fontSize="13px" fontWeight="600">
+          {license}
+        </Text>
+      </div>
+
+      <Text className="copyright" fontSize="14px" fontWeight="600">
+        © Ascensio System SIA
+      </Text>
+
+      <div className="row">
+        <Text fontSize="13px">
+          {t("AboutCompanyAddressTitle")}: {address}
+        </Text>
+      </div>
+
+      <div className="row">
+        <Text fontSize="13px">
+          {t("AboutCompanyTelTitle")}: {phone}
+        </Text>
+      </div>
+      <div className="row">
+        <Text fontSize="13px">{t("AboutCompanyEmailTitle")}:</Text>
+        <Link
+          color="#2DA7DB"
+          fontSize="13px"
+          fontWeight="600"
+          href={`mailto:${email}`}
+        >
+          {email}
+        </Link>
+      </div>
+    </AboutBody>
+  );
+};
+
+export default AboutContent;
diff --git a/web/ASC.Web.Client/src/components/pages/About/index.js b/web/ASC.Web.Client/src/components/pages/About/index.js
index 4aeb309aed..8b917fede8 100644
--- a/web/ASC.Web.Client/src/components/pages/About/index.js
+++ b/web/ASC.Web.Client/src/components/pages/About/index.js
@@ -1,6 +1,5 @@
 import React, { useEffect } from "react";
 import Text from "@appserver/components/text";
-import Link from "@appserver/components/link";
 import PageLayout from "@appserver/common/components/PageLayout";
 import { I18nextProvider, Trans, withTranslation } from "react-i18next";
 import styled from "styled-components";
@@ -9,25 +8,10 @@ import { setDocumentTitle } from "../../../helpers/utils";
 import i18n from "./i18n";
 import withLoader from "../Confirm/withLoader";
 import { inject, observer } from "mobx-react";
-import { ReactSVG } from "react-svg";
+import AboutContent from "./AboutContent";
 
 const BodyStyle = styled.div`
-  width: 100%;
   padding: ${isMobileOnly ? "48px 0 0" : "80px 147px 0"};
-
-  .avatar {
-    margin-top: 32px;
-    margin-bottom: 16px;
-  }
-
-  .row {
-    display: flex;
-    flex-direction: row;
-  }
-
-  .copyright {
-    margin-top: 16px;
-  }
 `;
 
 const Body = ({ t, personal, versionAppServer }) => {
@@ -35,97 +19,13 @@ const Body = ({ t, personal, versionAppServer }) => {
     setDocumentTitle(t("Common:About"));
   }, [t]);
 
-  const versionEditor = "6.3.1";
-  const license = "AGPL-3.0";
-  const link = "https://github.com/ONLYOFFICE";
-  const phone = "+371 660-16425";
-  const email = "support@onlyoffice.com";
-  const address =
-    "20A-12 Ernesta Birznieka-Upisha street, Riga, Latvia, EU, LV-1050";
-
   return (
     <BodyStyle>
       <Text fontSize="32px" fontWeight="600">
         {t("AboutHeader")}
       </Text>
 
-      <div className="avatar">
-        {personal ? (
-          <ReactSVG src="images/logo_personal_about.svg" />
-        ) : (
-          <img
-            className="logo-img"
-            src="images/dark_general.png"
-            width="320"
-            height="181"
-            alt="Logo"
-          />
-        )}
-      </div>
-
-      <div className="row">
-        <Text fontSize="13px">{t("DocumentManagement")}:</Text>
-        <Link
-          color="#2DA7DB"
-          fontSize="13px"
-          fontWeight="600"
-          href={link}
-          target="_blank"
-        >
-          ONLYOFFICE App Server
-        </Link>
-        <Text fontSize="13px" fontWeight="600">
-          v.{versionAppServer}
-        </Text>
-      </div>
-
-      <div className="row">
-        <Text fontSize="13px">{t("OnlineEditors")}:</Text>
-        <Link
-          color="#2DA7DB"
-          fontSize="13px"
-          fontWeight="600"
-          href={link}
-          target="_blank"
-        >
-          ONLYOFFICE Docs
-        </Link>
-        <Text fontSize="13px" fontWeight="600">
-          v.{versionEditor}
-        </Text>
-      </div>
-
-      <div className="row">
-        <Text fontSize="13px">{t("SoftwareLicense")}: </Text>
-        <Text fontSize="13px" fontWeight="600">
-          {license}
-        </Text>
-      </div>
-
-      <Text className="copyright" fontSize="14px" fontWeight="600">
-        © Ascensio System SIA
-      </Text>
-
-      <div className="row">
-        <Text fontSize="13px">{t("AboutCompanyAddressTitle")}:</Text>
-        <Text fontSize="13px">{address}</Text>
-      </div>
-
-      <div className="row">
-        <Text fontSize="13px">{t("AboutCompanyTelTitle")}:</Text>
-        <Text fontSize="13px">{phone}</Text>
-      </div>
-      <div className="row">
-        <Text fontSize="13px">{t("AboutCompanyEmailTitle")}:</Text>
-        <Link
-          color="#2DA7DB"
-          fontSize="13px"
-          fontWeight="600"
-          href={`mailto:${email}`}
-        >
-          {email}
-        </Link>
-      </div>
+      <AboutContent personal={personal} versionAppServer={versionAppServer} />
     </BodyStyle>
   );
 };