From f497e28241cc1f3ab0dcb168a623f08f42accacd Mon Sep 17 00:00:00 2001
From: Artem Tarasov <artem.tarasov@onlyoffice.com>
Date: Fri, 1 Oct 2021 16:51:28 +0300
Subject: [PATCH] Web: Common: PageLayout/Headline: fixed styles of header
 section, filter section

---
 .../components/Headline/Headline.js           |  8 ++++++-
 .../components/Headline/StyledHeadline.js     |  4 ++++
 .../sub-components/article-header.js          | 12 +++++++---
 .../sub-components/section-filter.js          |  4 ++++
 .../sub-components/section-header.js          | 22 +++++++++++++++----
 5 files changed, 42 insertions(+), 8 deletions(-)

diff --git a/packages/asc-web-common/components/Headline/Headline.js b/packages/asc-web-common/components/Headline/Headline.js
index 3603ba3920..ba2c9c8ff8 100644
--- a/packages/asc-web-common/components/Headline/Headline.js
+++ b/packages/asc-web-common/components/Headline/Headline.js
@@ -4,7 +4,13 @@ import StyledHeading from "./StyledHeadline";
 
 const Headline = ({ type, ...props }) => {
   //console.log("Headline render");
-  return <StyledHeading headlineType={type} {...props} />;
+  return (
+    <StyledHeading
+      headlineType={type}
+      {...props}
+      className={`headline-heading ${props?.className}`}
+    />
+  );
 };
 
 Headline.propTypes = {
diff --git a/packages/asc-web-common/components/Headline/StyledHeadline.js b/packages/asc-web-common/components/Headline/StyledHeadline.js
index ee8f28164c..5063ac78d7 100644
--- a/packages/asc-web-common/components/Headline/StyledHeadline.js
+++ b/packages/asc-web-common/components/Headline/StyledHeadline.js
@@ -21,6 +21,10 @@ const StyledHeading = styled(Heading)`
   font-weight: ${(props) => weight[props.headlineType]};
   color: ${(props) => (props.color ? props.color : props.theme.color)};
   ${NoUserSelect}
+
+  @media (min-width: 1314px) {
+    ${(props) => props.headlineType === "content" && "font-size: 18px"};
+  }
 `;
 StyledHeading.defaultProps = { theme: Base };
 
diff --git a/packages/asc-web-common/components/PageLayout/sub-components/article-header.js b/packages/asc-web-common/components/PageLayout/sub-components/article-header.js
index 561f6b6995..007408559c 100644
--- a/packages/asc-web-common/components/PageLayout/sub-components/article-header.js
+++ b/packages/asc-web-common/components/PageLayout/sub-components/article-header.js
@@ -1,13 +1,19 @@
 import React from "react";
 import styled from "styled-components";
 import equal from "fast-deep-equal/react";
-import { tablet } from "@appserver/components/utils/device";
 
 const StyledArticleHeader = styled.div`
-  border-bottom: 1px solid #eceef1;
   height: 64px;
 
-  @media ${tablet} {
+  @media (min-width: 1314px) {
+    height: 39px;
+
+    .headline-heading {
+      margin-top: -5px;
+    }
+  }
+
+  @media (max-width: 1313px) {
     display: none;
   }
 `;
diff --git a/packages/asc-web-common/components/PageLayout/sub-components/section-filter.js b/packages/asc-web-common/components/PageLayout/sub-components/section-filter.js
index 5af9752915..2ecbdd18d8 100644
--- a/packages/asc-web-common/components/PageLayout/sub-components/section-filter.js
+++ b/packages/asc-web-common/components/PageLayout/sub-components/section-filter.js
@@ -4,6 +4,10 @@ import equal from "fast-deep-equal/react";
 
 const StyledSectionFilter = styled.div`
   margin: 16px 24px 9px 0;
+
+  @media (min-width: 1314px) {
+    margin-left: -4px;
+  }
 `;
 
 class SectionFilter extends React.Component {
diff --git a/packages/asc-web-common/components/PageLayout/sub-components/section-header.js b/packages/asc-web-common/components/PageLayout/sub-components/section-header.js
index b96db37a95..6c5617a7bb 100644
--- a/packages/asc-web-common/components/PageLayout/sub-components/section-header.js
+++ b/packages/asc-web-common/components/PageLayout/sub-components/section-header.js
@@ -8,8 +8,7 @@ import { isMobile } from "react-device-detect";
 import { tablet, desktop } from "@appserver/components/utils/device";
 import NoUserSelect from "@appserver/components/utils/commonStyles";
 const StyledSectionHeader = styled.div`
-  border-bottom: 1px solid #eceef1;
-  height: 55px;
+  height: 41px;
   margin-right: 24px;
   margin-top: -1px;
   padding-bottom: 9px;
@@ -27,6 +26,22 @@ const StyledSectionHeader = styled.div`
     }
   `}
 
+  @media (min-width: 1314px) {
+    margin-left: -4px;
+    height: 31px;
+
+    .section-header {
+      margin-top: -4px;
+    }
+
+    .arrow-button {
+      svg {
+        width: 14px !important;
+      }
+      margin-right: 10px !important;
+    }
+  }
+
   @media ${tablet} {
     margin-right: 16px;
   }
@@ -38,8 +53,7 @@ const StyledSectionHeader = styled.div`
       width: 100%;
     `}
 
-    //padding-top: 4px;
-      ${isMobile &&
+    ${isMobile &&
     css`
       position: fixed;
       top: 56px;