From ebe79b5cdfee17ad6015b0a82407ccfd99c41435 Mon Sep 17 00:00:00 2001
From: TimofeyBoyko <fognir742@gmail.com>
Date: Tue, 13 Sep 2022 12:56:47 +0300
Subject: [PATCH] Web:Common:FilterInput: fix styles and hide clear filter
 button

---
 .../FilterInput/StyledFilterInput.js          |  4 +++
 .../common/components/FilterInput/index.js    | 13 ++++++++
 .../FilterInput/sub-components/FilterBlock.js | 14 ++++----
 .../sub-components/StyledFilterBlock.js       | 33 +++++++++++++++----
 4 files changed, 51 insertions(+), 13 deletions(-)

diff --git a/packages/common/components/FilterInput/StyledFilterInput.js b/packages/common/components/FilterInput/StyledFilterInput.js
index 16b91c1911..c01f46a81b 100644
--- a/packages/common/components/FilterInput/StyledFilterInput.js
+++ b/packages/common/components/FilterInput/StyledFilterInput.js
@@ -35,6 +35,10 @@ const StyledFilterInput = styled.div`
     flex-wrap: wrap;
 
     margin-bottom: 8px;
+
+    .clear-all-link {
+      margin-left: 12px;
+    }
   }
 `;
 
diff --git a/packages/common/components/FilterInput/index.js b/packages/common/components/FilterInput/index.js
index e52699ec0d..2ee6daa3d7 100644
--- a/packages/common/components/FilterInput/index.js
+++ b/packages/common/components/FilterInput/index.js
@@ -7,6 +7,7 @@ import {
 } from "@docspace/components/utils/device";
 
 import ViewSelector from "@docspace/components/view-selector";
+import Link from "@docspace/components/link";
 
 import FilterButton from "./sub-components/FilterButton";
 import SortButton from "./sub-components/SortButton";
@@ -164,6 +165,18 @@ const FilterInput = React.memo(
                 removeSelectedItem={removeSelectedItemAction}
               />
             ))}
+            {selectedItems.length > 1 && (
+              <Link
+                className={"clear-all-link"}
+                isHovered
+                fontWeight={600}
+                isSemitransparent
+                type="action"
+                onClick={() => onFilter([])}
+              >
+                {t("ClearAll")}
+              </Link>
+            )}
           </div>
         )}
       </StyledFilterInput>
diff --git a/packages/common/components/FilterInput/sub-components/FilterBlock.js b/packages/common/components/FilterInput/sub-components/FilterBlock.js
index d2dbd3e9c1..c36a9f4f60 100644
--- a/packages/common/components/FilterInput/sub-components/FilterBlock.js
+++ b/packages/common/components/FilterInput/sub-components/FilterBlock.js
@@ -373,12 +373,14 @@ const FilterBlock = ({
         <StyledFilterBlock showFooter={showFooter}>
           <StyledFilterBlockHeader>
             <Heading size="medium">{filterHeader}</Heading>
-            <IconButton
-              iconName="/static/images/clear.react.svg"
-              isFill={true}
-              onClick={onClearFilter}
-              size={17}
-            />
+            {showFooter && (
+              <IconButton
+                iconName="/static/images/clear.react.svg"
+                isFill={true}
+                onClick={onClearFilter}
+                size={17}
+              />
+            )}
           </StyledFilterBlockHeader>
           <div className="filter-body">
             {isLoading ? (
diff --git a/packages/common/components/FilterInput/sub-components/StyledFilterBlock.js b/packages/common/components/FilterInput/sub-components/StyledFilterBlock.js
index 46b3fe09cd..7e64e42cdc 100644
--- a/packages/common/components/FilterInput/sub-components/StyledFilterBlock.js
+++ b/packages/common/components/FilterInput/sub-components/StyledFilterBlock.js
@@ -54,6 +54,12 @@ const StyledFilterBlock = styled.div`
 
     .combo-button {
       justify-content: space-between;
+
+      .combo-button-label {
+        font-size: 13px;
+        font-weight: 400;
+        line-height: 20px;
+      }
     }
   }
 `;
@@ -76,6 +82,10 @@ const StyledFilterBlockHeader = styled.div`
   align-items: center;
   justify-content: ${(props) => (props.isSelector ? "start" : "space-between")};
 
+  h1 {
+    font-weight: 700;
+  }
+
   .arrow-button {
     margin-right: 12px;
   }
@@ -89,7 +99,7 @@ StyledFilterBlockHeader.defaultProps = { theme: Base };
 
 const StyledFilterBlockItem = styled.div`
   padding: ${(props) =>
-    !props.withoutHeader ? "12px 16px 0px 16px" : "6px 16px 0px 16px"};
+    !props.withoutHeader ? "12px 15px 0px 16px" : "5px 15px 0px 16px"};
 
   display: flex;
   flex-direction: column;
@@ -147,8 +157,8 @@ const selectedItemTag = css`
 `;
 
 const StyledFilterBlockItemTag = styled.div`
-  height: 30px;
-  max-height: 30px;
+  height: 28px;
+  max-height: 28px;
 
   display: flex;
   flex-direction: row;
@@ -161,7 +171,7 @@ const StyledFilterBlockItemTag = styled.div`
 
   padding: 4px 15px;
 
-  margin: 0 6px 12px 0;
+  margin: 0 7px 8px 0;
 
   cursor: pointer;
 
@@ -174,12 +184,13 @@ StyledFilterBlockItemTag.defaultProps = { theme: Base };
 
 const selectedItemTagText = css`
   color: ${(props) => props.theme.filterInput.filter.selectedItem.color};
+  font-weight: 600;
 `;
 
 const StyledFilterBlockItemTagText = styled(Text)`
   height: 20px;
 
-  font-weight: normal;
+  font-weight: 400;
   font-size: 13px;
   line-height: 20px;
 
@@ -226,7 +237,15 @@ const StyledFilterBlockItemToggleButton = styled(ToggleButton)`
   grid-gap: 0px;
 `;
 const StyledFilterBlockItemCheckboxContainer = styled.div`
-  margin: 7px 0 11px;
+  margin: 7px 0 13px;
+
+  .checkbox {
+    margin-right: 8px !important;
+  }
+
+  .checkbox-text {
+    line-height: 20px;
+  }
 `;
 
 const StyledFilterBlockItemSeparator = styled.div`
@@ -237,7 +256,7 @@ const StyledFilterBlockItemSeparator = styled.div`
 
   background: ${(props) => props.theme.filterInput.filter.separatorColor};
 
-  margin: 2px 0 0 0;
+  margin: 4px 0 4px 0;
 `;
 
 StyledFilterBlockItemToggleButton.defaultProps = { theme: Base };