Web: Common: fixed selector styles, fixed filter styles

web/ASC.Web.Common/src/components/AdvancedSelector/sub-components/Selector.js

@@ -80,6 +80,7 @@ const Selector = props => {
 
   useEffect(() => {
     resetCache();
+    setCurrentGroup(getCurrentGroup(convertGroups(groups)));
   }, [searchValue, currentGroup, hasNextPage]);
 
   const [selectedOptionList, setSelectedOptionList] = useState(
@@ -336,6 +337,7 @@ const Selector = props => {
                 className="row-option" 
                 {...tooltipProps}
                 onClick={onLinkClick}
+                noHover
               >
                 {option.label}
                 {displayType === "aside" && getOptionTooltipContent && (
@@ -510,6 +512,7 @@ const Selector = props => {
           title={label}
           style={style}
           className={`row-group${isSelected ? " selected" : ""}`}
+          noHover
         >
           {isMultiSelect && allowGroupSelection && (
             <Checkbox

web/ASC.Web.Common/src/components/AdvancedSelector/sub-components/StyledSelector.js

@@ -39,6 +39,10 @@ const dropdownStyles = css`
 
     .header-groups {
       grid-area: header-groups;
+
+      .group_header {
+        line-height: 30px;
+      }
       /* background-color: white; */
     }
 
@@ -47,6 +51,10 @@ const dropdownStyles = css`
       margin-left: -8px;
       /* background-color: white; */
 
+      .row-group:first-child {
+        font-weight: 700;
+      }
+
       .row-group {
         box-sizing: border-box;
         height: 32px;
@@ -59,7 +67,7 @@ const dropdownStyles = css`
         }
 
         &:hover {
-          background-color: #f8f9f9;
+          background-color: #eceef1;
           border-radius: 3px;
         }
       }
@@ -200,6 +208,11 @@ const StyledSelector = styled(Container)`
         height: 32px;
         cursor: pointer;
 
+        &:hover {
+          background-color: #eceef1;
+          border-radius: 3px;
+        }
+
         .option_checkbox {
           width: 265px;
         }

web/ASC.Web.Common/src/components/FilterInput/FilterInput.js

@@ -532,10 +532,10 @@ class FilterInput extends React.Component {
             hideFilterItems, sortId, sortDirection } = this.state;
 
         // console.log("filter input render, openFilterItems", openFilterItems, 'hideFilterItems', hideFilterItems);
-        let iconSize = 33;
+        let iconSize = 30;
         switch (size) {
             case 'base':
-                iconSize = 33;
+                iconSize = 30;
                 break;
             case 'middle':
             case 'big':

web/ASC.Web.Common/src/components/FilterInput/StyledFilterInput.js

@@ -27,7 +27,8 @@ const StyledFilterInput = styled.div`
 
       .search-input-block {
           & > input { 
-              height: 30px; 
+              height: 30px;
+              line-height: 30px;
           }
       }
     }
@@ -233,6 +234,16 @@ export const StyledCloseButtonBlock = styled.div`
           fill: #A3A9AE; 
         }
       }
+
+    :hover {
+      .styled-close-button {
+        svg {
+          path {
+            fill: #555F65;
+          }
+        }
+      }
+    }
   `}
 `;
 

web/ASC.Web.Common/src/components/FilterInput/sub-components/CloseButton.js

@@ -8,8 +8,8 @@ const CloseButton = props => {
   return (
     <div className={`styled-close-button ${className}`}>
       <IconButton
+        className="close-button"
         color={"#A3A9AE"}
-        hoverColor={"#A3A9AE"}
         clickColor={"#A3A9AE"}
         size={10}
         iconName={'CrossIcon'}

web/ASC.Web.Common/src/components/PeopleSelector/sub-components/UserTooltip.js

@@ -18,7 +18,7 @@ const UserTooltip = ({ avatarUrl, label, email, position }) => (
     </div>
 
     <div className='block-info'>
-      <Text isBold={true} fontSize="13px" fontWeight={700} truncate={true} title={label}>
+      <Text isBold={true} fontSize="13px" fontWeight={600} truncate={true} title={label}>
         {label}
       </Text>
       <Text color="#A3A9AE" fontSize="13px" className="email-text" truncate={true} title={email}>