Shared/Client: InfoPanel: Fixed styles because of an aside header component.

packages/client/src/pages/Home/InfoPanel/Header/index.js

@@ -43,6 +43,7 @@ import { StyledInfoPanelHeader } from "./styles/common";
 
 import { PluginFileType } from "SRC_DIR/helpers/plugins/enums";
 import { FolderType } from "@docspace/shared/enums";
+import { AsideHeader } from "@docspace/shared/components/aside";
 
 const InfoPanelHeaderContent = (props) => {
   const {
@@ -194,25 +195,11 @@ const InfoPanelHeaderContent = (props) => {
 
   return (
     <StyledInfoPanelHeader isTablet={isTablet} withTabs={withTabs}>
-      <div className="main">
-        <Text className="header-text" fontSize="21px" fontWeight="700">
-          {t("Common:Info")}
-        </Text>
-
-        {!isTablet && (
-          <div className="info-panel-toggle-bg">
-            <IconButton
-              isStroke
-              size="17"
-              onClick={closeInfoPanel}
-              iconName={CrossReactSvgUrl}
-              title={t("Common:InfoPanel")}
-              className="info-panel-toggle"
-              id="info-panel-toggle--close"
-            />
-          </div>
-        )}
-      </div>
+      <AsideHeader
+        header={t("Common:Info")}
+        onCloseClick={closeInfoPanel}
+        withoutBorder
+      />
 
       {withTabs && (
         <div className="tabs">

packages/client/src/pages/Home/InfoPanel/Header/styles/common.js

@@ -29,7 +29,7 @@ import { Base } from "@docspace/shared/themes";
 import { tablet } from "@docspace/shared/utils";
 
 const getHeaderHeight = ({ withTabs, isTablet }) => {
-  let res = isTablet ? 53 : 69;
+  let res = isTablet ? 54 : 70;
   if (withTabs) res += 32;
   return `${res}px`;
 };
@@ -54,40 +54,6 @@ const StyledInfoPanelHeader = styled.div`
   flex-direction: column;
   border-bottom: ${(props) =>
     props.withTabs ? "none" : `1px solid ${props.theme.infoPanel.borderColor}`};
-  .main {
-    height: ${(props) => getMainHeight(props)};
-    min-height: ${(props) => getMainHeight(props)};
-    @media ${tablet} {
-      height: ${(props) => getMainHeight({ ...props, isTablet: true })};
-      min-height: ${(props) => getMainHeight({ ...props, isTablet: true })};
-    }
-
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    .header-text {
-      ${(props) =>
-        props.theme.interfaceDirection === "rtl"
-          ? css`
-              margin-right: 20px;
-            `
-          : css`
-              margin-left: 20px;
-            `}
-    }
-  }
-
-  .info-panel-toggle-bg {
-    ${(props) =>
-      props.theme.interfaceDirection === "rtl"
-        ? css`
-            margin-left: 20px;
-          `
-        : css`
-            margin-right: 20px;
-          `}
-  }
 
   .tabs {
     display: flex;

packages/shared/components/section/sub-components/InfoPanel.tsx

@@ -29,12 +29,7 @@ import React, { useEffect, useRef } from "react";
 import { DeviceType } from "../../../enums";
 import { Portal } from "../../portal";
 
-import {
-  StyledInfoPanelWrapper,
-  StyledInfoPanel,
-  StyledControlContainer,
-  StyledCrossIcon,
-} from "../Section.styled";
+import { StyledInfoPanelWrapper, StyledInfoPanel } from "../Section.styled";
 import { InfoPanelProps } from "../Section.types";
 
 const InfoPanel = ({
@@ -49,8 +44,6 @@ const InfoPanel = ({
 }: InfoPanelProps) => {
   const infoPanelRef = useRef<null | HTMLDivElement>(null);
 
-  const closeInfoPanel = () => setIsVisible?.(false);
-
   useEffect(() => {
     const onMouseDown = (e: MouseEvent) => {
       const target = e.target as HTMLElement;
@@ -74,13 +67,7 @@ const InfoPanel = ({
       id="InfoPanelWrapper"
       ref={infoPanelRef}
     >
-      <StyledInfoPanel>
-        <StyledControlContainer onClick={closeInfoPanel}>
-          <StyledCrossIcon />
-        </StyledControlContainer>
-
-        {children}
-      </StyledInfoPanel>
+      <StyledInfoPanel>{children}</StyledInfoPanel>
     </StyledInfoPanelWrapper>
   );