Merge pull request #959 from ONLYOFFICE/bugfix/fix-catalog-styles

Web:Common:Article: add vertical line and fix styles

packages/common/components/Article/styled-article.js

@@ -23,6 +23,8 @@ const StyledArticle = styled.article`
 
   //padding: 0 20px;
 
+  border-right: ${(props) => props.theme.catalog.verticalLine};
+
   @media ${tablet} {
     min-width: ${(props) => (props.showText ? "243px" : "60px")};
     max-width: ${(props) => (props.showText ? "243px" : "60px")};
@@ -63,6 +65,8 @@ const StyledArticle = styled.article`
     padding: 0;
     top: ${(props) => (props.isBannerVisible ? "-16px" : "64px")} !important;
     height: calc(100% - 64px) !important;
+
+    border-right: none;
   `}
 
   z-index: ${(props) =>
@@ -77,7 +81,7 @@ const StyledArticle = styled.article`
     .scroll-body {
       overflow-x: hidden !important;
       height: calc(100% - 200px);
-      padding: 0 20px;
+      padding: 0 20px !important;
 
       @media ${tablet} {
         height: calc(100% - 150px);
@@ -278,16 +282,19 @@ const StyledArticleProfile = styled.div`
   justify-content: center;
 
   border-top: ${(props) => props.theme.catalog.profile.borderTop};
+  border-right: ${(props) => props.theme.catalog.verticalLine}
   background-color: ${(props) => props.theme.catalog.profile.background};
 
   @media ${tablet} {
     padding: 16px 14px;
   }
 
-  ${isTablet &&
-  css`
-    padding: 16px 14px;
-  `}
+  ${
+    isTablet &&
+    css`
+      padding: 16px 14px;
+    `
+  }
 
   .profile-avatar {
     cursor: pointer;

packages/components/themes/base.js

@@ -1858,6 +1858,8 @@ const Base = {
 
     headerBurgerColor: "#657077",
 
+    verticalLine: "1px solid #eceef1",
+
     profile: {
       borderTop: "1px solid #eceef1",
       background: "#f3f4f4",

packages/components/themes/dark.js

@@ -1854,6 +1854,8 @@ const Dark = {
 
     headerBurgerColor: "#606060",
 
+    verticalLine: "1px solid #474747",
+
     profile: {
       borderTop: "1px solid #474747",
       background: "#3D3D3D",