From f955bea11591d5e0df97a0dd53a3a88265c21a21 Mon Sep 17 00:00:00 2001
From: Timofey <fognir742@gmail.com>
Date: Tue, 25 Jan 2022 16:32:35 +0800
Subject: [PATCH] Web:Client:Components: fixed product name color for dark and
 base theme

---
 .../components/Headline/StyledHeadline.js     | 22 +++++++++----------
 packages/asc-web-components/themes/base.js    |  1 +
 packages/asc-web-components/themes/dark.js    |  1 +
 .../NavMenu/sub-components/header.js          | 10 +++++++--
 4 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/packages/asc-web-common/components/Headline/StyledHeadline.js b/packages/asc-web-common/components/Headline/StyledHeadline.js
index f5acde7609..36213464cb 100644
--- a/packages/asc-web-common/components/Headline/StyledHeadline.js
+++ b/packages/asc-web-common/components/Headline/StyledHeadline.js
@@ -1,18 +1,18 @@
-import styled from "styled-components";
-import Heading from "@appserver/components/heading";
-import Base from "@appserver/components/themes/base";
-import NoUserSelect from "@appserver/components/utils/commonStyles";
-import { tablet } from "@appserver/components/utils/device";
+import styled from 'styled-components';
+import Heading from '@appserver/components/heading';
+import Base from '@appserver/components/themes/base';
+import NoUserSelect from '@appserver/components/utils/commonStyles';
+import { tablet } from '@appserver/components/utils/device';
 const size = {
-  header: "28px",
-  menu: "23px",
-  content: "21px",
+  header: '28px',
+  menu: '23px',
+  content: '21px',
 };
 
 const weight = {
   header: 600,
-  menu: "bold",
-  content: "bold",
+  menu: 'bold',
+  content: 'bold',
 };
 
 const StyledHeading = styled(Heading)`
@@ -23,7 +23,7 @@ const StyledHeading = styled(Heading)`
   color: ${(props) => (props.color ? props.color : props.theme.color)};
   ${NoUserSelect}
   @media ${tablet} {
-    ${(props) => props.headlineType === "content" && "font-size: 18px"};
+    ${(props) => props.headlineType === 'content' && 'font-size: 18px'};
   }
 `;
 StyledHeading.defaultProps = { theme: Base };
diff --git a/packages/asc-web-components/themes/base.js b/packages/asc-web-components/themes/base.js
index 0a06e1283b..bece5c6b6e 100644
--- a/packages/asc-web-components/themes/base.js
+++ b/packages/asc-web-components/themes/base.js
@@ -1783,6 +1783,7 @@ const Base = {
   header: {
     backgroundColor: "#0F4071",
     linkColor: "#7a95b0",
+    productColor: white,
   },
 
   menuContainer: {
diff --git a/packages/asc-web-components/themes/dark.js b/packages/asc-web-components/themes/dark.js
index 7074ca265f..9748305eee 100644
--- a/packages/asc-web-components/themes/dark.js
+++ b/packages/asc-web-components/themes/dark.js
@@ -1784,6 +1784,7 @@ const Dark = {
   header: {
     backgroundColor: "#1f1f1f ",
     linkColor: "#a9a9a9",
+    productColor: "#eeeeee",
   },
 
   menuContainer: {
diff --git a/web/ASC.Web.Client/src/components/NavMenu/sub-components/header.js b/web/ASC.Web.Client/src/components/NavMenu/sub-components/header.js
index 90a8a3f88e..5ed6395298 100644
--- a/web/ASC.Web.Client/src/components/NavMenu/sub-components/header.js
+++ b/web/ASC.Web.Client/src/components/NavMenu/sub-components/header.js
@@ -147,6 +147,7 @@ const HeaderComponent = ({
   isAdmin,
   backdropClick,
   isPersonal,
+  theme,
   ...props
 }) => {
   const { t } = useTranslation('Common');
@@ -207,7 +208,11 @@ const HeaderComponent = ({
         </LinkWithoutRedirect>
 
         {!isPersonal && (
-          <Headline className="header-module-title" type="header" onClick={onClick}>
+          <Headline
+            className="header-module-title"
+            type="header"
+            color={theme.header.productColor}
+            onClick={onClick}>
             {currentProductName}
           </Headline>
         )}
@@ -302,12 +307,13 @@ export default inject(({ auth }) => {
     availableModules,
     version,
   } = auth;
-  const { logoUrl, defaultPage, currentProductId, personal: isPersonal } = settingsStore;
+  const { logoUrl, defaultPage, currentProductId, personal: isPersonal, theme } = settingsStore;
   const { totalNotifications } = moduleStore;
 
   //TODO: restore when chat will complete -> const mainModules = availableModules.filter((m) => !m.isolateMode);
 
   return {
+    theme,
     isPersonal,
     isAdmin,
     defaultPage,