Client: InfoPanel: redesign empty state

packages/client/src/pages/Home/InfoPanel/Body/styles/severalItems.js

@@ -2,8 +2,11 @@ import styled from "styled-components";
 
 const StyledSeveralItemsContainer = styled.div`
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
+  gap: 32px;
+  padding-top: ${(props) => (props.isAccounts ? "80px" : "0")};
 `;
 
 export { StyledSeveralItemsContainer };

packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/AccountsItemTitle.js

@@ -13,17 +13,9 @@ const AccountsItemTitle = ({
   isSeveralItems,
   selection,
   getUserContextOptions,
-  selectionLength,
 }) => {
   if (isSeveralItems) {
-    return (
-      <StyledTitle>
-        <Avatar size={"min"} role={"user"} />
-        <Text className="text" fontWeight={600} fontSize="16px">
-          {`${t("InfoPanel:SelectedUsers")}: ${selectionLength}`}
-        </Text>
-      </StyledTitle>
-    );
+    return <></>;
   }
 
   const itemTitleRef = useRef();

packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/FilesItemTitle.js

@@ -9,26 +9,10 @@ import ItemContextOptions from "./ItemContextOptions";
 
 import { StyledTitle } from "../../styles/common";
 
-const FilesItemTitle = ({
-  t,
-  selection,
-  isSeveralItems,
-  getIcon,
-  selectionLength,
-}) => {
+const FilesItemTitle = ({ t, selection, isSeveralItems }) => {
   const itemTitleRef = useRef();
 
-  if (isSeveralItems)
-    return (
-      <StyledTitle>
-        <div className="item-icon">
-          <ReactSVG className="icon" src={getIcon(32, ".file")} />
-        </div>
-        <Text className="text">
-          {`${t("InfoPanel:ItemsSelected")}: ${selectionLength}`}
-        </Text>
-      </StyledTitle>
-    );
+  if (isSeveralItems) return <></>;
 
   const icon = selection.icon;
 

packages/client/src/pages/Home/InfoPanel/Body/views/SeveralItems/index.js

@@ -5,9 +5,13 @@ import EmptyScreenAltSvgDarkUrl from "PUBLIC_DIR/images/empty_screen_alt_dark.sv
 
 import React from "react";
 import { inject, observer } from "mobx-react";
+import { useTranslation } from "react-i18next";
+import Text from "@docspace/components/text";
 import { StyledSeveralItemsContainer } from "../../styles/severalItems";
 
-const SeveralItems = ({ isAccounts, theme }) => {
+const SeveralItems = ({ isAccounts, theme, selectedItems }) => {
+  const { t } = useTranslation("InfoPanel");
+
   const emptyScreenAlt = theme.isBase
     ? EmptyScreenAltSvgUrl
     : EmptyScreenAltSvgDarkUrl;
@@ -18,15 +22,28 @@ const SeveralItems = ({ isAccounts, theme }) => {
 
   const imgSrc = isAccounts ? emptyScreenPerson : emptyScreenAlt;
 
+  const itemsText = isAccounts
+    ? t("InfoPanel:SelectedUsers")
+    : t("InfoPanel:ItemsSelected");
+
   return (
-    <StyledSeveralItemsContainer className="no-thumbnail-img-wrapper">
+    <StyledSeveralItemsContainer
+      isAccounts={isAccounts}
+      className="no-thumbnail-img-wrapper"
+    >
       <img size="96px" src={imgSrc} />
+      <Text fontSize="16px" fontWeight={700}>
+        {`${itemsText}: ${selectedItems.length}`}
+      </Text>
     </StyledSeveralItemsContainer>
   );
 };
 
 export default inject(({ auth }) => {
+  const selectedItems = auth.infoPanelStore.getSelectedItems();
+
   return {
     theme: auth.settingsStore.theme,
+    selectedItems,
   };
 })(observer(SeveralItems));