Client: AsideHeader: Added removal of border by condition.

packages/shared/components/aside/Aside.styled.tsx

@@ -146,14 +146,18 @@ const StyledHeaderContainer = styled.div`
     text-overflow: ellipsis;
     white-space: nowrap;
   }
-  ::after {
+  ${(props) =>
-    content: "";
+    !props.withoutBorder &&
-    border-bottom: ${(props) =>
+    css`
-      `1px solid ${props.theme.modalDialog.headerBorderColor}`};
+      ::after {
-    width: calc(100% + 32px);
+        content: "";
-    position: absolute;
+        border-bottom: ${(props) =>
-    inset-inline-end: -16px;
+          `1px solid ${props.theme.modalDialog.headerBorderColor}`};
-    bottom: 0;
+        width: calc(100% + 32px);
-  }
+        position: absolute;
+        inset-inline-end: -16px;
+        bottom: 0;
+      }
+    `}
 `;
 export { StyledAside, StyledHeaderContainer };

packages/shared/components/aside/Aside.types.ts

@@ -53,6 +53,7 @@ export interface AsideHeaderProps {
   onCloseClick?: () => void;
   style?: React.CSSProperties;
   isLoading?: boolean;
+  withoutBorder?: boolean;
 }
 export interface StyledAsideProps {
   visible: boolean;

packages/shared/components/aside/AsideHeader.tsx

@@ -45,6 +45,7 @@ const AsideHeader = (props: AsideHeaderProps) => {
     id,
     style,
     isLoading,
+    withoutBorder = false,
   } = props;
 
   const backButtonRender = (
@@ -101,7 +102,12 @@ const AsideHeader = (props: AsideHeaderProps) => {
   const loaderComponent = <RectangleSkeleton height="28" width="100%" />;
 
   return (
-    <StyledHeaderContainer id={id} className={className} style={style}>
+    <StyledHeaderContainer
+      id={id}
+      className={className}
+      style={style}
+      withoutBorder={withoutBorder}
+    >
       {isLoading ? loaderComponent : mainComponent}
     </StyledHeaderContainer>
   );

packages/shared/components/selector/sub-components/Header.tsx

@@ -35,6 +35,7 @@ const Header = React.memo(
     onCloseClick,
     withoutBackButton,
     headerLabel,
+    withoutBorder,
   }: HeaderProps) => {
     return (
       <AsideHeader
@@ -44,6 +45,7 @@ const Header = React.memo(
         }
         onBackClick={onBackClick}
         onCloseClick={onCloseClick}
+        withoutBorder={withoutBorder}
       />
     );
   },