Shared/Client: Fixed styles after adding an icon to the dialog header.

packages/client/src/components/RoomsSelectorInput/index.js

@@ -111,6 +111,7 @@ const RoomsSelectorInput = (props) => {
     />
   );
 
+  console.log("ROOMS");
   return (
     <StyledBodyWrapper maxWidth={maxWidth} className={className}>
       <FileInput

packages/shared/components/filter/Filter.styled.ts

@@ -26,8 +26,6 @@
 
 import styled, { css } from "styled-components";
 
-import CrossIcon from "PUBLIC_DIR/images/cross.react.svg";
-
 import { tablet, mobile } from "../../utils";
 import { Base } from "../../themes";
 import { TViewAs } from "../../types";
@@ -222,9 +220,19 @@ const StyledFilterBlockHeader = styled.div<{ isSelector?: boolean }>`
   height: 53px;
   min-height: 53px;
 
-  padding: 0 16px;
   margin: 0;
 
+  ${(props) =>
+    props.theme.interfaceDirection === "rtl"
+      ? css`
+          padding-right: 16px;
+          padding-left: 37px;
+        `
+      : css`
+          padding-left: 16px;
+          padding-right: 37px;
+        `}
+
   box-sizing: border-box;
 
   border-bottom: ${(props) =>
@@ -504,45 +512,20 @@ const StyledControlContainer = styled.div`
   justify-content: center;
   z-index: 450;
 
-  top: 14px;
   ${(props) =>
     props.theme.interfaceDirection === "rtl"
       ? css`
-          right: -34px;
+          left: 13px;
+          top: 17px;
         `
       : css`
-          left: -34px;
+          right: 13px;
+          top: 17px;
         `}
-
-  @media ${mobile} {
-    top: -34px;
-    ${(props) =>
-      props.theme.interfaceDirection === "rtl"
-        ? css`
-            left: 10px;
-            right: unset;
-          `
-        : css`
-            right: 10px;
-
-            left: unset;
-          `}
-  }
 `;
 
 StyledControlContainer.defaultProps = { theme: Base };
 
-const StyledCrossIcon = styled(CrossIcon)`
-  width: 17px;
-  height: 17px;
-  z-index: 455;
-  path {
-    fill: ${(props) => props.theme.catalog.control.fill};
-  }
-`;
-
-StyledCrossIcon.defaultProps = { theme: Base };
-
 const selectedViewIcon = css`
   svg {
     path {
@@ -727,7 +710,6 @@ export {
   StyledFilterBlockItemSeparator,
   StyledFilterBlockFooter,
   StyledControlContainer,
-  StyledCrossIcon,
 };
 
 export { StyledFilterInput, StyledSearchInput, StyledButton };

packages/shared/components/filter/sub-components/FilterBlock.tsx

@@ -28,6 +28,7 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 
 import ClearReactSvgUrl from "PUBLIC_DIR/images/clear.react.svg?url";
+import CrossIcon from "PUBLIC_DIR/images/cross.react.svg?url";
 
 import GroupsSelector from "../../../selectors/Groups";
 import PeopleSelector from "../../../selectors/People";
@@ -45,7 +46,6 @@ import { TSelectorItem } from "../../selector";
 
 import {
   StyledControlContainer,
-  StyledCrossIcon,
   StyledFilterBlock,
   StyledFilterBlockFooter,
   StyledFilterBlockHeader,
@@ -481,7 +481,7 @@ const FilterBlock = ({
   const showFooter = isLoading ? false : isEqualFilter();
   const showClearFilterBtn =
     !isLoading && (selectedFilterValue.length > 0 || filterValues.length > 0);
-
+  console.log("showSelector.type", showSelector.type);
   const filterBlockComponent = (
     <>
       {showSelector.show ? (
@@ -500,6 +500,7 @@ const FilterBlock = ({
                 withoutBackButton: false,
               }}
               currentUserId={userId}
+              onClose={hideFilterBlock}
             />
           ) : showSelector.type === FilterSelectorTypes.groups ? (
             <GroupsSelector
@@ -511,6 +512,7 @@ const FilterBlock = ({
                 headerLabel: selectorLabel,
                 withoutBackButton: false,
               }}
+              onClose={hideFilterBlock}
             />
           ) : (
             <RoomSelector
@@ -525,11 +527,9 @@ const FilterBlock = ({
               isMultiSelect={false}
               withSearch
               disableThirdParty={disableThirdParty}
+              onClose={hideFilterBlock}
             />
           )}
-          <StyledControlContainer onClick={hideFilterBlock}>
-            <StyledCrossIcon />
-          </StyledControlContainer>
         </StyledFilterBlock>
       ) : (
         <StyledFilterBlock>
@@ -546,6 +546,15 @@ const FilterBlock = ({
                 size={17}
               />
             )}
+
+            <StyledControlContainer onClick={hideFilterBlock}>
+              <IconButton
+                size={17}
+                className="close-button"
+                iconName={CrossIcon}
+                isClickable
+              />
+            </StyledControlContainer>
           </StyledFilterBlockHeader>
           <div className="filter-body">
             {isLoading ? (
@@ -598,10 +607,6 @@ const FilterBlock = ({
               isDisabled={isLoading}
             />
           </StyledFilterBlockFooter>
-
-          <StyledControlContainer id="filter_close" onClick={hideFilterBlock}>
-            <StyledCrossIcon />
-          </StyledControlContainer>
         </StyledFilterBlock>
       )}
 

packages/shared/components/selector/Selector.styled.ts

@@ -63,7 +63,10 @@ const StyledSelector = styled.div`
   overflow: hidden;
 `;
 
-const StyledHeader = styled.div<{ withoutBorder?: boolean }>`
+const StyledHeader = styled.div<{
+  withoutBorder?: boolean;
+  withoutIcon: boolean;
+}>`
   width: calc(100% - 53px);
   min-height: 53px;
   height: 53px;
@@ -79,15 +82,6 @@ const StyledHeader = styled.div<{ withoutBorder?: boolean }>`
   display: flex;
   align-items: center;
 
-  ${(props) =>
-    props.theme.interfaceDirection === "rtl"
-      ? css`
-          padding-left: 37px;
-        `
-      : css`
-          padding-right: 37px;
-        `}
-
   .arrow-button {
     cursor: pointer;
     margin-right: 12px;

packages/shared/selectors/Groups/GroupsSelector.types.ts

@@ -33,6 +33,7 @@ import { TSelectorItem } from "../../components/selector";
 export type GroupsSelectorProps = TSelectorHeader & {
   id?: string;
   className?: string;
+  onClose?: () => void;
   onSubmit: (
     selectedItems: TSelectorItem[],
     access?: TAccessRight | null,

packages/shared/selectors/Groups/index.tsx

@@ -43,7 +43,7 @@ const GroupsSelector = (props: GroupsSelectorProps) => {
     className,
 
     headerProps,
-
+    onClose,
     onSubmit,
   } = props;
 
@@ -143,7 +143,7 @@ const GroupsSelector = (props: GroupsSelectorProps) => {
     [searchValue],
   );
 
-  return (
+  const SelectorGroups = (
     <Selector
       id={id}
       className={className}
@@ -187,6 +187,16 @@ const GroupsSelector = (props: GroupsSelectorProps) => {
       }
     />
   );
+
+  if (!onClose) {
+    return SelectorGroups;
+  }
+
+  return (
+    <Aside visible onClose={onClose} withoutBodyScroll>
+      {SelectorGroups}
+    </Aside>
+  );
 };
 
 export default GroupsSelector;

packages/shared/selectors/People/PeopleSelector.types.ts

@@ -64,4 +64,5 @@ export type PeopleSelectorProps = TSelectorHeader &
 
     emptyScreenHeader?: string;
     emptyScreenDescription?: string;
+    onClose?: () => void;
   };

packages/shared/selectors/People/index.tsx

@@ -52,6 +52,7 @@ import { AvatarRole } from "../../components/avatar";
 import { Text } from "../../components/text";
 
 import { PeopleSelectorProps } from "./PeopleSelector.types";
+import { Aside } from "../../components/aside";
 
 const toListItem = (
   item: TUser,
@@ -142,6 +143,7 @@ const PeopleSelector = ({
 
   emptyScreenHeader,
   emptyScreenDescription,
+  onClose,
 }: PeopleSelectorProps) => {
   const { t }: { t: TTranslation } = useTranslation(["Common"]);
 
@@ -377,7 +379,7 @@ const PeopleSelector = ({
     );
   };
 
-  return (
+  const SelectorUser = (
     <Selector
       id={id}
       alwaysShowFooter={itemsList.length !== 0 || Boolean(searchValue)}
@@ -414,6 +416,15 @@ const PeopleSelector = ({
       {...infoProps}
     />
   );
+  if (!onClose) {
+    return SelectorUser;
+  }
+
+  return (
+    <Aside visible onClose={onClose} withoutBodyScroll>
+      {SelectorUser}
+    </Aside>
+  );
 };
 
 export default PeopleSelector;

packages/shared/selectors/Room/RoomSelector.types.ts

@@ -48,4 +48,5 @@ export type RoomSelectorProps = TSelectorHeader &
     withSearch?: boolean;
 
     disableThirdParty?: boolean;
+    onClose?: () => void;
   };

packages/shared/selectors/Room/index.tsx

@@ -44,6 +44,7 @@ import { TTranslation } from "../../types";
 
 import { RoomSelectorProps } from "./RoomSelector.types";
 import { convertToItems } from "./RoomSelector.utils";
+import { Aside } from "../../components/aside";
 
 const PAGE_COUNT = 100;
 
@@ -73,6 +74,8 @@ const RoomSelector = ({
   roomType,
 
   disableThirdParty,
+
+  onClose,
 }: RoomSelectorProps) => {
   const { t }: { t: TTranslation } = useTranslation(["Common"]);
 
@@ -208,7 +211,7 @@ const RoomSelector = ({
       }
     : {};
 
-  return (
+  const SelectorRoom = (
     <Selector
       id={id}
       className={className}
@@ -243,6 +246,16 @@ const RoomSelector = ({
       }
     />
   );
+
+  if (!onClose) {
+    return SelectorRoom;
+  }
+
+  return (
+    <Aside visible onClose={onClose} withoutBodyScroll>
+      {SelectorRoom}
+    </Aside>
+  );
 };
 
 export default RoomSelector;