Refactoring.

packages/client/src/components/panels/StyledPanels.js

@@ -256,40 +256,6 @@ const StyledContent = styled.div`
 
 StyledContent.defaultProps = { theme: Base };
 
-const StyledHeaderContent = styled.div`
-  display: flex;
-  align-items: center;
-
-  ${(props) =>
-    props.theme.interfaceDirection === "rtl"
-      ? css`
-          padding-right: 16px;
-          padding-left: 37px;
-        `
-      : css`
-          padding-left: 16px;
-          padding-right: 37px;
-        `}
-
-  border-bottom: ${(props) => props.theme.filesPanels.sharing.borderBottom};
-
-  .files-operations-header,
-  .sharing_panel-header {
-    font-weight: 700;
-    margin: 14px 0;
-  }
-
-  @media ${desktop} {
-    .files-operations-header,
-    .sharing_panel-header {
-      margin: 12px 0;
-      font-size: 18px;
-    }
-  }
-`;
-
-StyledHeaderContent.defaultProps = { theme: Base };
-
 const StyledBody = styled.div`
   &.files-operations-body {
     ${(props) =>
@@ -726,7 +692,6 @@ export {
   StyledEmbeddingPanel,
   StyledVersionHistoryPanel,
   StyledContent,
-  StyledHeaderContent,
   StyledBody,
   StyledFooter,
   StyledLinkRow,

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

@@ -43,7 +43,7 @@ export interface AsideProps {
   onCloseClick?: AsideHeaderProps["onCloseClick"];
 }
 export interface AsideHeaderProps {
-  header: string;
+  header: string | React.ReactNode;
   className?: string;
   id?: string;
   isBackButton?: boolean;

packages/shared/components/context-menu-button/ContextMenuButton.styled.ts

@@ -73,13 +73,13 @@ const StyledContent = styled.div`
 `;
 StyledContent.defaultProps = { theme: Base };
 
-const StyledHeaderContent = styled.div`
-  display: flex;
-  align-items: center;
-  border-bottom: ${(props) =>
-    props.theme.contextMenuButton.headerContent.borderBottom};
-`;
-StyledHeaderContent.defaultProps = { theme: Base };
+// const StyledHeaderContent = styled.div`
+//   display: flex;
+//   align-items: center;
+//   border-bottom: ${(props) =>
+//     props.theme.contextMenuButton.headerContent.borderBottom};
+// `;
+// StyledHeaderContent.defaultProps = { theme: Base };
 
 const StyledBodyContent = styled.div`
   position: relative;
@@ -101,4 +101,4 @@ const StyledBodyContent = styled.div`
 `;
 StyledBodyContent.defaultProps = { theme: Base };
 
-export { StyledBodyContent, StyledHeaderContent, StyledContent, StyledOuter };
+export { StyledBodyContent, StyledContent, StyledOuter };

packages/shared/components/context-menu-button/ContextMenuButton.tsx

@@ -38,13 +38,11 @@ import { DropDown } from "../drop-down";
 import { IconButton } from "../icon-button";
 import { Backdrop } from "../backdrop";
 import { Aside } from "../aside";
-import { Heading, HeadingLevel, HeadingSize } from "../heading";
 import { Link } from "../link";
 import { ContextMenuModel } from "../context-menu";
 
 import {
   StyledBodyContent,
-  StyledHeaderContent,
   StyledContent,
   StyledOuter,
 } from "./ContextMenuButton.styled";
@@ -225,7 +223,7 @@ const ContextMenuButtonPure = ({
   };
 
   const iconButtonName = state.isOpen && iconOpenName ? iconOpenName : iconName;
-
+  console.log("displayType", displayType);
   return (
     <StyledOuter
       ref={ref}
@@ -297,9 +295,10 @@ const ContextMenuButtonPure = ({
               scale={false}
               zIndex={310}
               onClose={onCloseAction}
+              header={asideHeader}
             >
               <StyledContent>
-                <StyledHeaderContent>
+                {/* <StyledHeaderContent>
                   <Heading
                     className="header"
                     size={HeadingSize.medium}
@@ -308,7 +307,7 @@ const ContextMenuButtonPure = ({
                   >
                     {asideHeader}
                   </Heading>
-                </StyledHeaderContent>
+                </StyledHeaderContent> */}
                 <StyledBodyContent>
                   {state.data.map(
                     (item: ContextMenuModel, index: number) =>