Merge branch 'develop' into feature/components-typescript

packages/client/src/components/FilesSelector/FilesSelector.types.ts

@@ -91,6 +91,7 @@ export type useRoomsHelperProps = {
 };
 
 export type useFilesHelpersProps = {
+  roomsFolderId?: number;
   setBreadCrumbs: (items: BreadCrumb[]) => void;
   setIsBreadCrumbsLoading: (value: boolean) => void;
   setIsSelectedParentFolder: (value: boolean) => void;
@@ -221,4 +222,6 @@ export type FilesSelectorProps = {
   withHeader: boolean;
   withCancelButton: boolean;
   settings: any;
+
+  roomsFolderId?: number;
 };

packages/client/src/components/FilesSelector/helpers/useFilesHelper.ts

@@ -133,6 +133,7 @@ export const useFilesHelper = ({
   getIcon,
   t,
   setIsSelectedParentFolder,
+  roomsFolderId,
 }: useFilesHelpersProps) => {
   const getFileList = React.useCallback(
     async (
@@ -278,7 +279,7 @@ export const useFilesHelper = ({
               return {
                 label: title,
                 id: id,
-                isRoom: currentFolder?.current?.rootFolderId === id,
+                isRoom: roomsFolderId === id,
                 roomType,
               };
             }
@@ -334,7 +335,7 @@ export const useFilesHelper = ({
         }
       }
     },
-    [selectedItemId, searchValue, isFirstLoad, disabledItems]
+    [selectedItemId, searchValue, isFirstLoad, disabledItems, roomsFolderId]
   );
 
   return { getFileList };

packages/client/src/components/FilesSelector/index.tsx

@@ -104,6 +104,8 @@ const FilesSelector = ({
   withCancelButton = true,
   getIcon,
   isRoomBackup,
+
+  roomsFolderId,
 }: FilesSelectorProps) => {
   const { t } = useTranslation(["Files", "Common", "Translations"]);
 
@@ -208,6 +210,7 @@ const FilesSelector = ({
     getIcon,
     t,
     setIsSelectedParentFolder,
+    roomsFolderId,
   });
 
   const onSelectAction = (item: Item) => {
@@ -272,7 +275,9 @@ const FilesSelector = ({
 
     if (
       needRoomList ||
-      (!isThirdParty && parentId === 0 && rootFolderType === FolderType.Rooms)
+      (!isThirdParty &&
+        parentId === roomsFolderId &&
+        rootFolderType === FolderType.Rooms)
     ) {
       getRoomSettings();
 
@@ -633,7 +638,7 @@ export default inject(
 
     const sessionPath = window.sessionStorage.getItem("filesSelectorPath");
 
-    const { treeFolders } = treeFoldersStore;
+    const { treeFolders, roomsFolderId } = treeFoldersStore;
 
     const {
       restorePanelVisible,
@@ -747,6 +752,8 @@ export default inject(
       setBackupToPublicRoomVisible,
       currentDeviceType,
       getIcon,
+
+      roomsFolderId,
     };
   }
 )(observer(FilesSelector));

packages/client/src/components/panels/InvitePanel/sub-components/InfoBar.js

@@ -8,7 +8,7 @@ import Text from "@docspace/components/text";
 
 const StyledInfoBar = styled.div`
   display: flex;
-  background-color: #f8f9f9;
+  background-color: ${(props) => props.theme.infoBar.background};
   color: #333;
   font-size: ${(props) => props.theme.getCorrectFontSize("12px")};
   padding: 12px 16px;
@@ -33,9 +33,13 @@ const StyledInfoBar = styled.div`
         }
       }
     }
+
+    &__title {
+      color: ${(props) => props.theme.infoBar.title};
+    }
   }
   .body-container {
-    color: #555f65;
+    color: ${(props) => props.theme.infoBar.description};
     font-weight: 400;
   }
   .close-icon {
@@ -44,8 +48,8 @@ const StyledInfoBar = styled.div`
       fill: ${({ theme }) => theme.iconButton.color};
     }
     svg {
-      weight: 10px;
-      height: 10px;
+      width: 12px;
+      height: 12px;
     }
   }
 `;
@@ -60,7 +64,7 @@ const InfoBar = (props) => {
           <div className="header-icon">
             <ReactSVG src={InfoIcon} />
           </div>
-          <Text fontSize="12px" fontWeight={600}>
+          <Text className="header-body__title" fontSize="12px" fontWeight={600}>
             {t("Common:Info")}
           </Text>
         </div>

packages/client/src/helpers/plugins/WrappedComponent.js

@@ -251,7 +251,7 @@ const ComponentPure = ({
           );
 
           setIsRequestRunning && setIsRequestRunning(false);
-
+          setModalRequestRunning && setModalRequestRunning(false);
           if (isSaveButton) {
             setSettingsModalRequestRunning &&
               setSettingsModalRequestRunning(false);
@@ -263,15 +263,15 @@ const ComponentPure = ({
           ? isSaveButton
             ? modalRequestRunning
             : isRequestRunning
-            ? isRequestRunning
-            : rest.isLoading
+              ? isRequestRunning
+              : rest.isLoading
           : rest.isLoading;
         const isDisabled = disableWhileRequestRunning
           ? isSaveButton
             ? modalRequestRunning
             : isRequestRunning
-            ? isRequestRunning
-            : rest.isDisabled
+              ? isRequestRunning
+              : rest.isDisabled
           : rest.isDisabled;
 
         return (
@@ -317,7 +317,7 @@ const ComponentPure = ({
         return (
           <iframe
             {...elementProps}
-            style={{ minHeight: "100%", border: "none" }}
+            style={{ minHeight: "100%", border: "none", ...elementProps.style }}
           ></iframe>
         );
       }
@@ -382,15 +382,18 @@ const WrappedComponent = ({
 
   const [isRequestRunning, setIsRequestRunning] = React.useState(false);
 
-  const updatePropsContext = (name, props) => {
-    if (saveButton && name === saveButton.contextName) {
-      setSaveButtonProps && setSaveButtonProps((val) => ({ ...val, props }));
-    } else {
-      const newProps = { ...contextProps };
-      newProps[name] = props;
+  const updatePropsContext = (newContextProps) => {
+    const newProps = { ...contextProps };
 
-      setContextProps(newProps);
-    }
+    newContextProps.forEach(({ name, props }) => {
+      if (saveButton && name === saveButton.contextName) {
+        setSaveButtonProps && setSaveButtonProps((val) => ({ ...val, props }));
+      } else {
+        newProps[name] = props;
+      }
+    });
+
+    setContextProps(newProps);
   };
 
   return (

packages/client/src/helpers/plugins/utils.js

@@ -40,9 +40,7 @@ export const messageActions = (
 
       case PluginActions.updateContext:
         if (message.contextProps) {
-          message.contextProps.forEach((prop) => {
-            updatePropsContext && updatePropsContext(prop.name, prop.props);
-          });
+          updatePropsContext(contextProps);
         }
         break;
 

packages/client/src/pages/FormGallery/Body.js

@@ -45,6 +45,10 @@ const SectionBodyContent = ({
   resetFilters,
   submitToGalleryTileIsVisible,
   canSubmitToFormGallery,
+  setOformFilesLoaded,
+  categoryFilterLoaded,
+  languageFilterLoaded,
+  oformFilesLoaded,
 }) => {
   const onMouseDown = (e) => {
     if (
@@ -66,7 +70,11 @@ const SectionBodyContent = ({
     };
   }, [onMouseDown]);
 
-  return !tReady || !oformFiles ? (
+  useEffect(() => {
+    setOformFilesLoaded(tReady && oformFiles);
+  }, [tReady, oformFiles]);
+
+  return !(categoryFilterLoaded && languageFilterLoaded && oformFilesLoaded) ? (
     <Loaders.Tiles foldersCount={0} withTitle={false} />
   ) : !hasGalleryFiles ? (
     <EmptyScreenContainer
@@ -120,4 +128,8 @@ export default inject(({ auth, accessRightsStore, oformsStore }) => ({
   resetFilters: oformsStore.resetFilters,
   submitToGalleryTileIsVisible: oformsStore.submitToGalleryTileIsVisible,
   canSubmitToFormGallery: accessRightsStore.canSubmitToFormGallery,
+  setOformFilesLoaded: oformsStore.setOformFilesLoaded,
+  categoryFilterLoaded: oformsStore.categoryFilterLoaded,
+  languageFilterLoaded: oformsStore.languageFilterLoaded,
+  oformFilesLoaded: oformsStore.oformFilesLoaded,
 }))(withTranslation("Common, FormGallery")(observer(SectionBodyContent)));

packages/client/src/pages/FormGallery/Filter/CategoryFilter/index.js

@@ -3,6 +3,7 @@ import { inject, observer } from "mobx-react";
 import CategoryFilterDesktop from "./DesktopView";
 import CategoryFilterMobile from "./MobileView";
 import { mobile } from "@docspace/components/utils/device";
+import RectangleSkeleton from "@docspace/components/skeletons/rectangle";
 
 import styled, { css } from "styled-components";
 
@@ -34,21 +35,43 @@ export const StyledCategoryFilterWrapper = styled.div`
   }
 `;
 
+export const StyledSkeleton = styled(RectangleSkeleton)`
+  width: 220px;
+  height: 32px;
+
+  @media ${mobile} {
+    width: 100%;
+  }
+
+  ${({ noLocales }) =>
+    !noLocales &&
+    css`
+      @media ${mobile} {
+        max-width: calc(100% - 49px);
+      }
+    `}
+`;
+
 const CategoryFilter = ({
   oformsFilter,
   noLocales,
   fetchCategoryTypes,
   fetchCategoriesOfCategoryType,
+  filterOformsByLocaleIsLoading,
+  setFilterOformsByLocaleIsLoading,
+  setCategoryFilterLoaded,
+  categoryFilterLoaded,
+  languageFilterLoaded,
+  oformFilesLoaded,
 }) => {
   const [menuItems, setMenuItems] = useState([]);
-  const [isLoading, setIsLoading] = useState(false);
 
   useEffect(() => {
     (async () => {
-      setIsLoading(true);
       let newMenuItems = await fetchCategoryTypes();
       if (!newMenuItems) {
-        setIsLoading(false);
+        filterOformsByLocaleIsLoading &&
+          setFilterOformsByLocaleIsLoading(false);
         return;
       }
 
@@ -77,12 +100,21 @@ const CategoryFilter = ({
         })
         .finally(() => {
           setMenuItems(newMenuItems);
-          setIsLoading(false);
+          filterOformsByLocaleIsLoading &&
+            setFilterOformsByLocaleIsLoading(false);
         });
     })();
   }, [oformsFilter.locale]);
 
-  if (!isLoading && menuItems.length === 0) return null;
+  useEffect(() => {
+    setCategoryFilterLoaded(menuItems.length !== 0);
+  }, [menuItems.length]);
+
+  if (
+    filterOformsByLocaleIsLoading ||
+    !(categoryFilterLoaded && languageFilterLoaded && oformFilesLoaded)
+  )
+    return <StyledSkeleton $noLocales={noLocales} />;
 
   return (
     <StyledCategoryFilterWrapper
@@ -100,4 +132,11 @@ export default inject(({ oformsStore }) => ({
     oformsStore.oformLocales !== null && oformsStore.oformLocales?.length === 0,
   fetchCategoryTypes: oformsStore.fetchCategoryTypes,
   fetchCategoriesOfCategoryType: oformsStore.fetchCategoriesOfCategoryType,
+  filterOformsByLocaleIsLoading: oformsStore.filterOformsByLocaleIsLoading,
+  setFilterOformsByLocaleIsLoading:
+    oformsStore.setFilterOformsByLocaleIsLoading,
+  setCategoryFilterLoaded: oformsStore.setCategoryFilterLoaded,
+  categoryFilterLoaded: oformsStore.categoryFilterLoaded,
+  languageFilterLoaded: oformsStore.languageFilterLoaded,
+  oformFilesLoaded: oformsStore.oformFilesLoaded,
 }))(observer(CategoryFilter));

packages/client/src/pages/FormGallery/Filter/LanguageFilter/index.js

@@ -2,13 +2,14 @@ import * as Styled from "./index.styled";
 
 import { withTranslation } from "react-i18next";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { inject, observer } from "mobx-react";
 
 import { flagsIcons } from "@docspace/common/utils/image-flags";
 import { convertToCulture } from "@docspace/common/utils";
 import Backdrop from "@docspace/components/backdrop";
 import { isMobile } from "@docspace/components/utils/device";
+import RectangleSkeleton from "@docspace/components/skeletons/rectangle";
 
 const LanguageFilter = ({
   t,
@@ -16,6 +17,11 @@ const LanguageFilter = ({
   defaultOformLocale,
   oformLocales,
   filterOformsByLocale,
+  filterOformsByLocaleIsLoading,
+  setLanguageFilterLoaded,
+  categoryFilterLoaded,
+  languageFilterLoaded,
+  oformFilesLoaded,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const onToggleDropdownIsOpen = () => setIsOpen(!isOpen);
@@ -29,7 +35,15 @@ const LanguageFilter = ({
     sectionScroll.scrollTop = 0;
   };
 
-  if (oformLocales !== null && oformLocales?.length === 0) return null;
+  useEffect(() => {
+    setLanguageFilterLoaded(oformLocales && oformLocales?.length !== 0);
+  }, [oformLocales, oformLocales?.length]);
+
+  if (
+    filterOformsByLocaleIsLoading ||
+    !(categoryFilterLoaded && languageFilterLoaded && oformFilesLoaded)
+  )
+    return <RectangleSkeleton width="41px" height="32px" />;
 
   return (
     <Styled.LanguageFilter>
@@ -100,4 +114,9 @@ export default inject(({ oformsStore }) => ({
   defaultOformLocale: oformsStore.defaultOformLocale,
   oformLocales: oformsStore.oformLocales,
   filterOformsByLocale: oformsStore.filterOformsByLocale,
+  filterOformsByLocaleIsLoading: oformsStore.filterOformsByLocaleIsLoading,
+  setLanguageFilterLoaded: oformsStore.setLanguageFilterLoaded,
+  categoryFilterLoaded: oformsStore.categoryFilterLoaded,
+  languageFilterLoaded: oformsStore.languageFilterLoaded,
+  oformFilesLoaded: oformsStore.oformFilesLoaded,
 }))(withTranslation(["Common"])(observer(LanguageFilter)));

packages/client/src/pages/FormGallery/index.js

@@ -63,6 +63,8 @@ const FormGallery = ({
     }
   }, [fromFolderId]);
 
+  if (isInitLoading) return <></>;
+
   return (
     <>
       <Section

packages/client/src/store/OformsStore.js

@@ -34,6 +34,10 @@ class OformsStore {
   categoryTitles = [];
 
   oformLocales = null;
+  filterOformsByLocaleIsLoading = false;
+  categoryFilterLoaded = false;
+  languageFilterLoaded = false;
+  oformFilesLoaded = false;
 
   submitToGalleryTileIsVisible = !localStorage.getItem(
     "submitToGalleryTileIsHidden"
@@ -45,8 +49,13 @@ class OformsStore {
   }
 
   get defaultOformLocale() {
-    const userLocale = convertToLanguage(getCookie(LANGUAGE)) || "en";
-    return this.oformLocales?.includes(userLocale) ? userLocale : "en";
+    const userLocale =
+      getCookie(LANGUAGE) || this.authStore.userStore.user?.cultureName || "en";
+    const convertedLocale = convertToLanguage(userLocale);
+
+    return this.oformLocales?.includes(convertedLocale)
+      ? convertedLocale
+      : "en";
   }
 
   setOformFiles = (oformFiles) => (this.oformFiles = oformFiles);
@@ -70,6 +79,22 @@ class OformsStore {
 
   setOformLocales = (oformLocales) => (this.oformLocales = oformLocales);
 
+  setFilterOformsByLocaleIsLoading = (filterOformsByLocaleIsLoading) => {
+    this.filterOformsByLocaleIsLoading = filterOformsByLocaleIsLoading;
+  };
+
+  setCategoryFilterLoaded = (categoryFilterLoaded) => {
+    this.categoryFilterLoaded = categoryFilterLoaded;
+  };
+
+  setLanguageFilterLoaded = (languageFilterLoaded) => {
+    this.languageFilterLoaded = languageFilterLoaded;
+  };
+
+  setOformFilesLoaded = (oformFilesLoaded) => {
+    this.oformFilesLoaded = oformFilesLoaded;
+  };
+
   fetchOformLocales = async () => {
     const { uploadDomain, uploadDashboard } =
       this.authStore.settingsStore.formGallery;
@@ -78,9 +103,7 @@ class OformsStore {
 
     try {
       const fetchedLocales = await getOformLocales(url);
-      const localeKeys = fetchedLocales.map((locale) =>
-        convertToLanguage(locale.code)
-      );
+      const localeKeys = fetchedLocales.map((locale) => locale.code);
       this.setOformLocales(localeKeys);
     } catch (err) {
       this.setOformLocales([]);
@@ -260,6 +283,9 @@ class OformsStore {
   filterOformsByLocale = async (locale) => {
     if (!locale) return;
 
+    if (locale !== this.oformsFilter.locale)
+      this.setFilterOformsByLocaleIsLoading(true);
+
     this.currentCategory = null;
 
     this.oformsFilter.page = 1;

packages/common/utils/index.ts

@@ -409,7 +409,10 @@ export function convertToCulture(key: string) {
 }
 
 export function convertToLanguage(key: string) {
+  if (!key) return;
+
   const splittedKey = key.split("-");
+
   if (splittedKey.length > 1) return splittedKey[0];
 
   return key;

packages/shared/components/table/TableHeader.tsx

@@ -13,7 +13,6 @@ import { TTableColumn, TableHeaderProps } from "./Table.types";
 import { TableSettings } from "./sub-components/TableSettings";
 import { TableHeaderCell } from "./sub-components/TableHeaderCell";
 import {
-  CONTAINER_MARGIN,
   DEFAULT_MIN_COLUMN_SIZE,
   MIN_SIZE_FIRST_COLUMN,
   SETTINGS_SIZE,
@@ -51,84 +50,59 @@ function TableHeader({
     hideColumns: boolean;
   }>({ columnIndex: 0, hideColumns: false });
 
-  const resetColumns = React.useCallback<(resetToDefault?: boolean) => void>(
-    (resetToDefault = false) => {
-      const defaultSize = columns.find((col: TTableColumn) => col.defaultSize)
-        ?.defaultSize;
+  const resetColumns = React.useCallback<
+    (resetToDefault?: boolean) => void
+  >(() => {
+    let str = "";
 
-      let str = "";
+    const enableColumns = columns
+      .filter((x: TTableColumn) => x.enable)
+      .filter((x: TTableColumn) => !x.defaultSize)
+      .filter((x: TTableColumn) => !x.default);
 
-      const enableColumns = columns
-        .filter((x: TTableColumn) => x.enable)
-        .filter((x: TTableColumn) => !x.defaultSize)
-        .filter((x: TTableColumn) => !x.default);
+    const container = containerRef.current
+      ? containerRef.current
+      : document.getElementById("table-container");
+    const containerWidth = container ? +container.clientWidth : 0;
 
-      const container = containerRef.current
-        ? containerRef.current
-        : document.getElementById("table-container");
-      const containerWidth = container ? +container.clientWidth : 0;
+    const firstColumnPercent = 40;
+    const percent = 60 / enableColumns.length;
 
-      if (resetToDefault) {
-        const firstColumnPercent = 40;
-        const percent = 60 / enableColumns.length;
+    const wideColumnSize = `${(containerWidth * firstColumnPercent) / 100}px`;
+    const otherColumns = `${(containerWidth * percent) / 100}px`;
 
-        const wideColumnSize = `${
-          (containerWidth * firstColumnPercent) / 100
-        }px`;
-        const otherColumns = `${(containerWidth * percent) / 100}px`;
+    columns.forEach((col: TTableColumn) => {
+      if (col.default) {
+        str += `${wideColumnSize} `;
+      } else
+        str += col.enable
+          ? col.defaultSize
+            ? `${col.defaultSize}px `
+            : `${otherColumns} `
+          : "0px ";
+    });
 
-        columns.forEach((col: TTableColumn) => {
-          if (col.default) {
-            str += `${wideColumnSize} `;
-          } else
-            str += col.enable
-              ? col.defaultSize
-                ? `${col.defaultSize}px `
-                : `${otherColumns} `
-              : "0px ";
-        });
-      } else {
-        const percent = 100 / enableColumns.length;
-        const newContainerWidth =
-          containerWidth - CONTAINER_MARGIN - (defaultSize || 0);
-        const otherColumns = `${(newContainerWidth * percent) / 100}px`;
+    str += `${SETTINGS_SIZE}px`;
+    if (container) container.style.gridTemplateColumns = str;
 
-        str = "";
+    if (headerRef.current) {
+      headerRef.current.style.gridTemplateColumns = str;
+      headerRef.current.style.width = `${containerWidth}px`;
+    }
 
-        columns.forEach((col: TTableColumn) => {
-          str += col.enable
-            ? /*  col.minWidth
-            ? `${col.minWidth}px `
-            :  */ col.defaultSize
-              ? `${col.defaultSize}px `
-              : `${otherColumns} `
-            : "0px ";
-        });
-      }
+    if (str) {
+      if (!infoPanelVisible) localStorage.setItem(columnStorageName, str);
+      else localStorage.setItem(columnInfoPanelStorageName, str);
+    }
 
-      str += `${SETTINGS_SIZE}px`;
-      if (container) container.style.gridTemplateColumns = str;
-
-      if (headerRef.current) {
-        headerRef.current.style.gridTemplateColumns = str;
-        headerRef.current.style.width = `${containerWidth}px`;
-      }
-
-      if (str) {
-        if (!infoPanelVisible) localStorage.setItem(columnStorageName, str);
-        else localStorage.setItem(columnInfoPanelStorageName, str);
-      }
-
-      if (resizeRef.current) resizeRef.current();
-    },
-    [
-      columnInfoPanelStorageName,
-      columnStorageName,
-      columns,
-      containerRef,
-      infoPanelVisible,
-    ],
-  );
+    if (resizeRef.current) resizeRef.current();
+  }, [
+    columnInfoPanelStorageName,
+    columnStorageName,
+    columns,
+    containerRef,
+    infoPanelVisible,
+  ]);
 
   const distributionOverWidth = React.useCallback(
     (overWidth: number, gridTemplateColumns: string[]) => {
@@ -195,30 +169,42 @@ function TableHeader({
     ) => boolean
   >(
     (gridTemplateColumns, activeColumnIndex, containerWidth) => {
-      const filterColumns = columns.filter((x) => !x.defaultSize);
-
       const clearSize = gridTemplateColumns.map((c) => getSubstring(c));
       const maxSize = Math.max(...clearSize);
 
-      const defaultSize = columns[activeColumnIndex - 1].defaultSize;
+      const defaultSize = columns[activeColumnIndex - 1].defaultSize || 0;
+      const indexOfMaxSize = clearSize.findLastIndex((s) => s === maxSize);
 
-      const defaultColSize =
-        defaultSize || containerWidth / filterColumns.length;
-      const indexOfMaxSize = clearSize.findIndex((s) => s === maxSize);
+      const addedColumn = 1;
+      const enableColumnsLength =
+        columns.filter((column) => !column.defaultSize && column.enable)
+          .length - addedColumn;
+      const allColumnsLength = columns.filter(
+        (column) => !column.defaultSize,
+      ).length;
 
-      const newSize = maxSize - defaultColSize;
+      const defaultSizeColumn =
+        columns.find((column) => column.defaultSize)?.defaultSize || 0;
+
+      const widthColumns = containerWidth - SETTINGS_SIZE - defaultSizeColumn;
+
+      const newColumnSize = defaultSize || widthColumns / allColumnsLength;
+
+      const newSizeMaxColumn = maxSize - newColumnSize;
 
       if (
-        (indexOfMaxSize === 0 && newSize < MIN_SIZE_FIRST_COLUMN) ||
-        newSize <= defaultColSize
+        (indexOfMaxSize === 0 && newSizeMaxColumn < MIN_SIZE_FIRST_COLUMN) ||
+        (indexOfMaxSize !== 0 && newSizeMaxColumn < DEFAULT_MIN_COLUMN_SIZE) ||
+        newColumnSize < DEFAULT_MIN_COLUMN_SIZE ||
+        enableColumnsLength === 1
       ) {
         localStorage.removeItem(columnStorageName);
         resetColumns();
         return true;
       }
 
-      gridTemplateColumns[indexOfMaxSize] = `${newSize}px`;
-      gridTemplateColumns[activeColumnIndex] = `${defaultColSize}px`;
+      gridTemplateColumns[indexOfMaxSize] = `${newSizeMaxColumn}px`;
+      gridTemplateColumns[activeColumnIndex] = `${newColumnSize}px`;
       return false;
     },
     [columnStorageName, columns, resetColumns],
@@ -292,14 +278,14 @@ function TableHeader({
 
       // If content column sizes are calculated as empty after changing view
       if (!hasContent) {
-        resetColumns(true);
+        resetColumns();
         return;
       }
     }
 
     // columns.length + 1 - its settings column
     if (tableContainer.length !== columns.length + 1) {
-      resetColumns(true);
+      resetColumns();
       return;
     }
 
@@ -635,7 +621,7 @@ function TableHeader({
         ? gridTemplateColumnsWithoutOverfilling.join(" ")
         : gridTemplateColumns.join(" ");
     } else {
-      resetColumns(true);
+      resetColumns();
     }
 
     if (str) {

packages/shared/themes/base.ts

@@ -3193,6 +3193,12 @@ export const getBaseTheme = () => {
       descriptionColor: "#555F65",
     },
 
+    infoBar: {
+      background: "#f8f9f9",
+      title: black,
+      description: cyanBlueDarkShade,
+    },
+
     roomIcon: {
       backgroundArchive: "#A3A9AE",
       opacityBackground: "1",

packages/shared/themes/dark.ts

@@ -3168,6 +3168,12 @@ const Dark: TTheme = {
     descriptionColor: "#ADADAD",
   },
 
+  infoBar: {
+    background: "#282828",
+    title: white,
+    description: "#ADADAD",
+  },
+
   roomIcon: {
     backgroundArchive: "#FFFFFF",
     opacityBackground: "0.1",