fixed Article CloseBtn and Header offset

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

@@ -121,6 +121,7 @@ const StyledArticle = styled.article`
 
   .article-body__scrollbar {
     .scroll-body {
+      padding-top: 16px;
       padding-right: 0px !important;
 
       @media ${mobile} {
@@ -158,7 +159,7 @@ const StyledArticleHeader = styled.div`
   @media ${mobile} {
     border-bottom: ${(props) => props.theme.catalog.header.borderBottom};
     padding: 12px 16px 12px;
-    margin-bottom: 16px !important;
+    //margin-bottom: 16px !important;
   }
 
   ${isTablet &&
@@ -173,7 +174,7 @@ const StyledArticleHeader = styled.div`
     border-bottom: ${(props) =>
       props.theme.catalog.header.borderBottom} !important;
     padding: 12px 16px 12px !important;
-    margin-bottom: 16px !important;
+    //margin-bottom: 16px !important;
   `}
 
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@@ -262,11 +263,10 @@ const StyledArticleMainButton = styled.div`
 `;
 
 const StyledControlContainer = styled.div`
-  background: ${(props) => props.theme.catalog.control.background};
-  width: 24px;
-  height: 24px;
+  width: 17px;
+  height: 17px;
   position: absolute;
-  top: 30px;
+  top: 37px;
   right: 10px;
   border-radius: 100px;
   cursor: pointer;
@@ -279,8 +279,8 @@ const StyledControlContainer = styled.div`
 StyledControlContainer.defaultProps = { theme: Base };
 
 const StyledCrossIcon = styled(CrossIcon)`
-  width: 12px;
-  height: 12px;
+  width: 17px;
+  height: 17px;
   path {
     fill: ${(props) => props.theme.catalog.control.fill};
   }

packages/asc-web-components/modal-dialog/components/CloseButton.js

@@ -7,17 +7,13 @@ import IconButton from "../../icon-button";
 import Base from "../../themes/base";
 
 const StyledCloseButtonWrapper = styled.div`
-  width: 24px;
-  height: 24px;
+  width: 17px;
+  height: 17px;
 
   display: flex;
   align-items: center;
   justify-content: center;
 
-  background-color: ${(props) =>
-    props.theme.modalDialog.closeButton.backgroundColor};
-  border-radius: 50%;
-
   cursor: pointer;
   position: absolute;
 
@@ -28,14 +24,14 @@ const StyledCloseButtonWrapper = styled.div`
           right: -34px;
           @media ${smallTablet} {
             right: 10px;
-            top: -34px;
+            top: -27px;
           }
         `
       : css`
           top: 10px;
-          left: -34px;
+          left: -27px;
           @media ${smallTablet} {
-            top: -34px;
+            top: -27px;
             left: auto;
             right: 10px;
           }
@@ -59,7 +55,7 @@ const CloseButton = ({ currentDisplayType, zIndex, onClick }) => {
       currentDisplayType={currentDisplayType}
     >
       <IconButton
-        size="12px"
+        size="17px"
         className="close-button"
         iconName="/static/images/cross.react.svg"
       />

packages/asc-web-components/themes/base.js

@@ -602,7 +602,7 @@ const Base = {
     },
 
     closeButton: {
-      backgroundColor: "#9a9ea3",
+      //backgroundColor: "#9a9ea3",
       fillColor: white,
     },
   },

packages/asc-web-components/themes/dark.js

@@ -600,8 +600,8 @@ const Dark = {
     },
 
     closeButton: {
-      backgroundColor: "#9A9EA3",
-      fillColor: black,
+      //backgroundColor: "#9A9EA3",
+      fillColor: "#9A9EA3",
     },
   },
 

products/ASC.Files/Server/DocStore

@@ -1 +1 @@
-Subproject commit 2bb4d878b42e8c648dd44fed7d445163772551fa
+Subproject commit 806c9fd9c1b2356393d142dacc8d4879fb235fd6