Web:Common:FilterInput: update resize for tablet and mobile view, add close button for all device types

packages/asc-web-common/components/FilterInput/sub-components/FilterBlock.js

@@ -201,6 +201,10 @@ const FilterBlock = ({
                 headerLabel={headerLabel}
               />
             )}
+
+            <StyledControlContainer onClick={hideFilterBlock}>
+              <StyledCrossIcon />
+            </StyledControlContainer>
           </StyledFilterBlock>
         </>
       ) : (
@@ -242,6 +246,10 @@ const FilterBlock = ({
               onClick={onFilterAction}
             />
           </StyledFilterBlockFooter>
+
+          <StyledControlContainer onClick={hideFilterBlock}>
+            <StyledCrossIcon />
+          </StyledControlContainer>
         </StyledFilterBlock>
       )}
 
@@ -250,10 +258,6 @@ const FilterBlock = ({
         withBackground={true}
         onClick={hideFilterBlock}
       />
-
-      <StyledControlContainer onClick={hideFilterBlock}>
-        <StyledCrossIcon />
-      </StyledControlContainer>
     </>
   );
 };

packages/asc-web-common/components/FilterInput/sub-components/StyledFilterBlock.js

@@ -1,19 +1,12 @@
 import Text from "@appserver/components/text";
 import styled, { css } from "styled-components";
-import { isMobileOnly } from "react-device-detect";
+import { isMobileOnly, isMobile } from "react-device-detect";
 
 import ToggleButton from "@appserver/components/toggle-button";
-import { mobile } from "@appserver/components/utils/device";
+import { mobile, tablet } from "@appserver/components/utils/device";
 import { Base } from "@appserver/components/themes";
 import CrossIcon from "@appserver/components/public/static/images/cross.react.svg";
 
-const mobileView = css`
-  top: 64px;
-
-  width: 100% !important;
-  height: calc(100% - 64px) !important;
-`;
-
 const StyledFilterBlock = styled.div`
   position: fixed;
   top: 0;
@@ -29,11 +22,22 @@ const StyledFilterBlock = styled.div`
 
   background: ${(props) => props.theme.filterInput.filter.background};
 
-  @media ${mobile} {
-    ${mobileView}
+  @media ${tablet} {
+    max-width: calc(100% - 69px);
   }
 
-  ${isMobileOnly && mobileView}
+  ${isMobile &&
+  css`
+    max-width: calc(100% - 69px);
+  `}
+
+  @media (max-width: 428px) {
+    bottom: 0;
+    top: unset;
+    height: calc(100% - 64px);
+    width: 100%;
+    max-width: 100%;
+  }
 
   .people-selector {
     height: 100%;
@@ -247,62 +251,51 @@ const StyledFilterBlockFooter = styled.div`
   align-items: center;
   justify-content: center;
 
-  @media ${mobile} {
+  @media (max-width: 428px) {
     width: 100%;
   }
-
-  ${isMobileOnly &&
-  css`
-    width: 100%;
-  `}
 `;
 
 StyledFilterBlockFooter.defaultProps = { theme: Base };
 
 const StyledControlContainer = styled.div`
-  background: ${(props) => props.theme.catalog.control.background};
+  display: flex;
+
   width: 24px;
   height: 24px;
-  position: fixed;
-  top: 30px;
-  right: 10px;
+  position: absolute;
+
   border-radius: 100px;
   cursor: pointer;
-  display: flex;
+
   align-items: center;
   justify-content: center;
-  z-index: 999;
-  display: none;
+  z-index: 450;
 
-  @media ${mobile} {
-    display: flex;
-  }
+  top: 14px;
+  left: -34px;
 
-  ${isMobileOnly &&
+  ${isMobile &&
   css`
-    display: flex;
+    top: 14px;
   `}
+
+  @media (max-width: 428px) {
+    top: -34px;
+    right: 10px;
+    left: unset;
+  }
 `;
 
 StyledControlContainer.defaultProps = { theme: Base };
 
 const StyledCrossIcon = styled(CrossIcon)`
-  width: 12px;
-  height: 12px;
+  width: 17px;
+  height: 17px;
+  z-index: 455;
   path {
     fill: ${(props) => props.theme.catalog.control.fill};
   }
-
-  display: none;
-
-  @media ${mobile} {
-    display: flex;
-  }
-
-  ${isMobileOnly &&
-  css`
-    display: flex;
-  `}
 `;
 
 StyledCrossIcon.defaultProps = { theme: Base };