Merge branch 'develop' into feature/oauth2-client

2023-11-15 17:13:50 +03:00 · 2023-11-15 17:13:50 +03:00 · ae5b4d4ed8
commit ae5b4d4ed8
parent 9dd8624bbb 86d6293584
473 changed files with 3750 additions and 3476 deletions
--- a/.vscode/tasks.json
+++ b/.vscode/tasks.json
@ -17,6 +17,21 @@
        "close": false
      }
    },
+    {
+      "label": "Backend | rebuild EE",
+      "command": "cd ${workspaceFolder}/../ ; ${command:python.interpreterPath} buildtools/build.backend.docker.py -f",
+      "type": "shell",
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      },
+      "presentation": {
+        "reveal": "always",
+        "panel": "new",
+        "focus": true,
+        "close": false
+      }
+    },
    {
      "label": "Backend | build CE",
      "command": "cd ${workspaceFolder}/../ ; ${command:python.interpreterPath} buildtools/build.backend.docker.py -c",
@ -33,8 +48,23 @@
      }
    },
    {
-      "label": "Backend | build SAAS",
-      "command": "cd ${workspaceFolder}/../ ; ${command:python.interpreterPath} buildtools/build.backend.docker.py -s",
+      "label": "Backend | build SAAS + dnsmasq",
+      "command": "cd ${workspaceFolder}/../ ; ${command:python.interpreterPath} buildtools/build.backend.docker.py -s -d",
+      "type": "shell",
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      },
+      "presentation": {
+        "reveal": "always",
+        "panel": "new",
+        "focus": true,
+        "close": false
+      }
+    },
+    {
+      "label": "Backend | build EE + dnsmasq",
+      "command": "cd ${workspaceFolder}/../ ; ${command:python.interpreterPath} buildtools/build.backend.docker.py -d",
      "type": "shell",
      "group": {
        "kind": "build",
--- a/frontend.code-workspace
+++ b/frontend.code-workspace
@ -51,15 +51,25 @@
            "task": "Backend | build EE",
            "tooltip": "🛠️ Start the \"backend docker build EE\" task"
          },
+          {
+            "label": "Docker : ReBuild-EE",
+            "task": "Backend | rebuild EE",
+            "tooltip": "🛠️ Start the \"backend docker rebuild EE\" task"
+          },
          {
            "label": "Docker : Build-CE",
            "task": "Backend | build CE",
            "tooltip": "🛠️ Start the \"backend docker build CE\" task"
          },
          {
-            "label": "Docker : Build-SAAS",
-            "task": "Backend | build SAAS",
-            "tooltip": "🛠️ Start the \"backend docker build SAAS\" task"
+            "label": "Docker : Build-SAAS + dnsmasq",
+            "task": "Backend | build SAAS + dnsmasq",
+            "tooltip": "🛠️ Start the \"backend docker build SAAS + dnsmasq\" task"
+          },
+          {
+            "label": "Docker : Build-EE + dnsmasq",
+            "task": "Backend | build EE + dnsmasq",
+            "tooltip": "🛠️ Start the \"backend docker build EE + dnsmasq\" task"
          },
          {
            "label": "Docker : Clear",
--- a/packages/client/public/locales/de/Files.json
+++ b/packages/client/public/locales/de/Files.json
@ -149,7 +149,5 @@
  "ViewList": "Liste",
  "ViewOnlyRooms": "Schreibgeschützt",
  "ViewTiles": "Zellen",
-  "WantToRestoreTheRoom": "Alle externen Links in diesem Raum werden aktiv und der Inhalt ist für jeden mit dem Link zugänglich. Möchten Sie den Raum wiederherstellen?",
-  "WantToRestoreTheRooms": "Alle externen Links in wiederhergestellten Räumen werden aktiv und ihre Inhalte sind für alle mit den Raumlinks zugänglich. Möchten Sie die Räume wiederherstellen?",
  "WithSubfolders": "Mit Unterordnern"
 }
--- a/packages/client/public/locales/en/Errors.json
+++ b/packages/client/public/locales/en/Errors.json
@ -1,4 +1,5 @@
 {
+  "AccessDenied": "Access denied",
  "Error401Text": "Sorry, the resource is not currently accessible.",
  "Error403Text": "Sorry, access denied.",
  "Error404Text": "Sorry, the resource cannot be found.",
@ -8,5 +9,6 @@
  "ErrorUnavailableText": "DocSpace unavailable",
  "InvalidLink": "Invalid link",
  "LinkDoesNotExist": "The link you are trying to open does not exist.",
-  "LinkHasExpired": "The link you followed has expired."
+  "LinkHasExpired": "The link you followed has expired.",
+  "PortalRestriction": "Your IP address is not included in the list of allowed IP addresses to access this DocSpace. Turn off a VPN if it's enabled and reload the page, or use another IP address to log in."
 }
--- a/packages/client/public/locales/en/Files.json
+++ b/packages/client/public/locales/en/Files.json
@ -30,6 +30,7 @@
  "CopyLinkPassword": "Copy link password",
  "CopyLink": "Copy link",
  "CopyGeneralLink": "Copy general link",
+  "RevokeLink": "Revoke link",
  "CopyPassword": "Copy password",
  "CreateNewLink": "Create new link",
  "CreateAndCopy": "Create and copy",
@ -38,7 +39,7 @@
  "DaysRemaining": "Days remaining: {{daysRemaining}}",
  "DeleteLink": "Delete link",
  "DeleteLinkNote": "The link will be deleted permanently. You will not be able to undo this action.",
-  "DeleteGeneralLink": "The previous link will become unavailable. A new general link will be created.",
+  "DeleteGeneralLink": "Previous general link will be deactivated. A new general link will be created.",
  "DisableDownload": "Restrict file content copy, file download and printing",
  "DisableLink": "Disable link",
  "DisableNotifications": "Disable notifications",
@ -173,8 +174,8 @@
  "ViewOnlyRooms": "View-only",
  "ViewTiles": "Tiles",
  "WantLeaveRoom": "Do you really want to leave this room?  You will be able to join it again via new invitation by a room admin.",
-  "WantToRestoreTheRoom": "All external links in this room will become active, and its contents will be available to everyone with the link. Do you want to restore the room?",
-  "WantToRestoreTheRooms": "All external links in restored rooms will become active, and their contents will be available to everyone with the room links. Do you want to restore the rooms?",
+  "WantToRestoreTheRoom": "All shared links in this room will become active, and its contents will be available to everyone with the link. Do you want to restore the room?",
+  "WantToRestoreTheRooms": "All shared links in restored rooms will become active, and their contents will be available to everyone with the room links. Do you want to restore the rooms?",
  "WithSubfolders": "With subfolders",
  "YouLeftTheRoom": "You have left the room",
  "GeneralLink": "General link",
--- a/packages/client/public/locales/en/Profile.json
+++ b/packages/client/public/locales/en/Profile.json
@ -8,6 +8,7 @@
  "DesktopTheme": "Sync with desktop Editor settings",
  "DesktopThemeDescription": "Automatically switch between light and dark themes when your desktop editor.",
  "EditPhoto": "Edit photo",
+  "ErrorAccountAlreadyUse": "Linked account already in use by another user",
  "EmailNotVerified": "Email is not verified",
  "FileManagement": "File management",
  "InterfaceTheme": "Interface theme",
--- a/packages/client/public/locales/es/Files.json
+++ b/packages/client/public/locales/es/Files.json
@ -149,7 +149,5 @@
  "ViewList": "Lista",
  "ViewOnlyRooms": "Solo lectura",
  "ViewTiles": "Iconos",
-  "WantToRestoreTheRoom": "Todos los enlaces externos de esta sala se activarán, y su contenido estará disponible para todos los que tengan el enlace. ¿Desea restaurar la sala?",
-  "WantToRestoreTheRooms": "Todos los enlaces externos de las salas restauradas se activarán, y su contenido estará disponible para todos los que tengan el enlace a la sala. ¿Desea restaurar las salas?",
  "WithSubfolders": "Con subcarpetas"
 }
--- a/packages/client/public/locales/fr/Files.json
+++ b/packages/client/public/locales/fr/Files.json
@ -149,7 +149,5 @@
  "ViewList": "Liste",
  "ViewOnlyRooms": "Lecture seule",
  "ViewTiles": "Carreaux",
-  "WantToRestoreTheRoom": "Tous les liens externes de cette salle deviendront actifs et son contenu sera accessible à tous les utilisateurs disposant du lien. Voulez-vous restaurer la salle ?",
-  "WantToRestoreTheRooms": "Tous les liens externes des salles restaurées deviendront actifs et leur contenu sera accessible à tous ceux qui possèdent les liens de la salle. Voulez-vous restaurer les salles ?",
  "WithSubfolders": "Avec des sous-dossiers"
 }
--- a/packages/client/public/locales/hy-AM/Files.json
+++ b/packages/client/public/locales/hy-AM/Files.json
@ -149,7 +149,5 @@
  "ViewList": "Ցուցակ",
  "ViewOnlyRooms": "Միայն դիտելու համար",
  "ViewTiles": "Սալիկներ",
-  "WantToRestoreTheRoom": "Այս սենյակի բոլոր արտաքին հղումները կակտիվանան, և դրա բովանդակությունը հասանելի կլինի բոլորին, ովքեր ունեն հղումը: Ցանկանու՞մ եք վերականգնել սենյակը:",
-  "WantToRestoreTheRooms": "Վերականգնված սենյակների բոլոր արտաքին հղումները կակտիվանան, և դրանց բովանդակությունը հասանելի կլինի բոլորին սենյակի հղումներով: Ցանկանու՞մ եք վերականգնել սենյակները:",
  "WithSubfolders": "Ենթաթղթապանակներով"
 }
--- a/packages/client/public/locales/it/Files.json
+++ b/packages/client/public/locales/it/Files.json
@ -149,7 +149,5 @@
  "ViewList": "Lista",
  "ViewOnlyRooms": "Solo visualizzazione",
  "ViewTiles": "Tegole",
-  "WantToRestoreTheRoom": "Tutti i link esterni in questa stanza diventeranno attivi e i suoi contenuti saranno disponibili a chiunque abbia il collegamento. Vuoi ripristinare la stanza?",
-  "WantToRestoreTheRooms": "Tutti i link esterni nelle stanze ripristinate diventeranno attivi e i loro contenuti saranno disponibili a chiunque abbia i link alle stanze. Vuoi ripristinare le stanze?",
  "WithSubfolders": "Con sottocartelle"
 }
--- a/packages/client/public/locales/pt-BR/Files.json
+++ b/packages/client/public/locales/pt-BR/Files.json
@ -149,7 +149,5 @@
  "ViewList": "Lista",
  "ViewOnlyRooms": "Somente visualização",
  "ViewTiles": "Azulejos",
-  "WantToRestoreTheRoom": "Todos os links externos desta sala ficarão ativos e seu conteúdo estará disponível para todos que possuem o link. Você quer restaurar o quarto?",
-  "WantToRestoreTheRooms": "Todos os links externos nas salas restauradas ficarão ativos e seu conteúdo estará disponível para todos com os links das salas. Quer restaurar os quartos?",
  "WithSubfolders": "Com subpastas"
 }
--- a/packages/client/public/locales/ru/Files.json
+++ b/packages/client/public/locales/ru/Files.json
@ -149,7 +149,5 @@
  "ViewList": "Список",
  "ViewOnlyRooms": "Просмотр",
  "ViewTiles": "Плитки",
-  "WantToRestoreTheRoom": "Все внешние ссылки в этой комнате станут активными, и ее содержимое будет доступно всем, у кого есть ссылка. Восстановить комнату?",
-  "WantToRestoreTheRooms": "Все внешние ссылки в восстановленных комнатах станут активными, а их содержимое будет доступно всем, у кого есть ссылки на комнаты. Восстановить комнаты?",
  "WithSubfolders": "С подпапками"
 }
--- a/packages/client/src/HOCs/withLoader.js
+++ b/packages/client/src/HOCs/withLoader.js
@ -1,7 +1,8 @@
 import React, { useEffect, useState } from "react";
 import { observer, inject } from "mobx-react";
 import { useLocation } from "react-router-dom";
-
+import TableSkeleton from "@docspace/components/skeletons/table";
+import RowsSkeleton from "@docspace/components/skeletons/rows";
 import Loaders from "@docspace/common/components/Loaders";

 const pathname = window.location.pathname.toLowerCase();
@ -39,9 +40,9 @@ const withLoader = (WrappedComponent) => (Loader) => {
      ) : currentViewAs === "tile" ? (
        <Loaders.Tiles />
      ) : currentViewAs === "table" ? (
-        <Loaders.TableLoader />
+        <TableSkeleton />
      ) : (
-        <Loaders.Rows />
+        <RowsSkeleton />
      )
    ) : (
      <WrappedComponent {...props} />
--- a/packages/client/src/Hooks/useLoadingWithTimeout.ts
+++ b/packages/client/src/Hooks/useLoadingWithTimeout.ts
@ -0,0 +1,51 @@
+import {
+  useState,
+  useEffect,
+  Dispatch,
+  SetStateAction,
+  useCallback,
+  useRef,
+} from "react";
+
+function useLoadingWithTimeout<S = undefined>(
+  timeout: number
+): [S | undefined, Dispatch<SetStateAction<S | undefined>>];
+
+function useLoadingWithTimeout<S extends boolean>(
+  timeout: number,
+  initialState: S | (() => S)
+): [S, Dispatch<SetStateAction<S>>];
+
+function useLoadingWithTimeout<S extends boolean | undefined = undefined>(
+  timeout: number,
+  initialState?: S | (() => S)
+) {
+  const [state, setState] = useState<S | undefined>(initialState);
+  const timerRef = useRef<number>();
+
+  const cleanTimer = useCallback(() => {
+    clearTimeout(timerRef.current);
+    timerRef.current = undefined;
+  }, []);
+
+  const setStateWithTimeout: Dispatch<SetStateAction<S | undefined>> =
+    useCallback((value) => {
+      cleanTimer();
+
+      if (value) {
+        timerRef.current = window.setTimeout(() => {
+          setState(value);
+        }, timeout);
+      } else {
+        setState(value);
+      }
+    }, []);
+
+  useEffect(() => {
+    return () => cleanTimer();
+  }, []);
+
+  return [state, setStateWithTimeout];
+}
+
+export default useLoadingWithTimeout;
--- a/packages/client/src/Hooks/useViewEffect.ts
+++ b/packages/client/src/Hooks/useViewEffect.ts
@ -1,6 +1,6 @@
-import React, { useEffect, useContext } from "react";
+import { useEffect, useContext } from "react";

-import { DeviceType } from "../constants";
+import { DeviceType } from "@docspace/common/constants";
 //@ts-ignore
 import { Context } from "@docspace/components/utils/context";
 import { isTablet, isMobile } from "@docspace/components/utils/device";
@ -18,11 +18,11 @@ type ContextType = {
  sectionHeight: number;
 };

-export function useViewEffect({
+const useViewEffect = ({
  view,
  setView,
  currentDeviceType,
-}: useViewEffectProps) {
+}: useViewEffectProps) => {
  const { sectionWidth } = useContext<ContextType>(Context);

  useEffect(() => {
@ -40,4 +40,6 @@ export function useViewEffect({
      isNotTableView && setView("table");
    }
  }, [sectionWidth, currentDeviceType]);
-}
+};
+
+export default useViewEffect;
--- a/packages/client/src/Shell.jsx
+++ b/packages/client/src/Shell.jsx
@ -75,6 +75,17 @@ const Shell = ({ items = [], page = "home", ...rest }) => {
    }
  }, []);

+  useEffect(() => {
+    moment.updateLocale("ar-sa", {
+      longDateFormat: {
+        LT: "h:mm a",
+        LTS: "h:mm:ss a",
+      },
+    });
+
+    moment.locale(language);
+  }, []);
+
  useEffect(() => {
    if (!whiteLabelLogoUrls) return;
    const favicon = getLogoFromPath(whiteLabelLogoUrls[2]?.path?.light);
@ -465,6 +476,8 @@ const ThemeProviderWrapper = inject(({ auth, loginStore }) => {
    currentColorScheme = settingsStore.currentColorScheme || false;
  }

+  window.theme = theme;
+
  return {
    theme: { ...theme, interfaceDirection: i18n.dir() },
    currentColorScheme,
--- a/packages/client/src/components/Article/MainButton/MobileView.js
+++ b/packages/client/src/components/Article/MainButton/MobileView.js
@ -33,7 +33,6 @@ const StyledMainButtonMobile = styled(MainButtonMobile)`
        : css`
            right: 16px;
          `}
-    bottom: 16px;
  }
 `;

--- a/packages/client/src/components/Article/MainButton/index.js
+++ b/packages/client/src/components/Article/MainButton/index.js
@ -35,7 +35,7 @@ import { getCorrectFourValuesStyle } from "@docspace/components/utils/rtlUtils";

 const StyledButton = styled(Button)`
  font-weight: 700;
-  font-size: 16px;
+  font-size: ${(props) => props.theme.getCorrectFontSize("16px")};
  padding: 0;
  opacity: ${(props) => (props.isDisabled ? 0.6 : 1)};

--- a/packages/client/src/components/Badges.js
+++ b/packages/client/src/components/Badges.js
@ -153,7 +153,7 @@ const Badges = ({
    color: theme.filesBadges.color,
    fontSize: "9px",
    fontWeight: 800,
-    maxWidth: "50px",
+    maxWidth: "60px",
    padding: isTile || tabletViewBadge ? "2px 5px" : "0 4px",
    lineHeight: "12px",
    "data-id": id,
--- a/packages/client/src/components/BreakpointWarning/sub-components/StyledBreakpointWarning.js
+++ b/packages/client/src/components/BreakpointWarning/sub-components/StyledBreakpointWarning.js
@ -17,7 +17,7 @@ const StyledBreakpointWarning = styled.div`

  .text-breakpoint {
    font-weight: 700;
-    font-size: 16px;
+    font-size: ${(props) => props.theme.getCorrectFontSize("16px")};
    line-height: 22px;
    padding-bottom: 8px;
    max-width: 348px;
@ -25,7 +25,7 @@ const StyledBreakpointWarning = styled.div`

  .text-prompt {
    font-weight: 400;
-    font-size: 12px;
+    font-size: ${(props) => props.theme.getCorrectFontSize("12px")};
    line-height: 16px;
  }

--- a/packages/client/src/components/BreakpointWarning/sub-components/loader.js
+++ b/packages/client/src/components/BreakpointWarning/sub-components/loader.js
@ -1,6 +1,6 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import styled from "styled-components";
-import Loaders from "@docspace/common/components/Loaders";
+import RectangleSkeleton from "@docspace/components/skeletons/rectangle";

 import { getCorrectFourValuesStyle } from "@docspace/components/utils/rtlUtils";
 import { isMobile, mobileMore } from "@docspace/components/utils/device";
@ -64,19 +64,19 @@ const Loader = () => {

  return (
    <StyledLoader>
-      <Loaders.Rectangle
+      <RectangleSkeleton
        height={viewMobile ? "72px" : "100px"}
        width={viewMobile ? "72px" : "100px"}
        className="img block"
      />

      <div className="loader-description">
-        <Loaders.Rectangle
+        <RectangleSkeleton
          height="44px"
          width={viewMobile ? "287px" : "332px"}
          className="block"
        />
-        <Loaders.Rectangle
+        <RectangleSkeleton
          height={viewMobile ? "32px" : "16px"}
          width={viewMobile ? "287px" : "332px"}
          className="loader-text block"
--- a/packages/client/src/components/DragTooltip/DragTooltip.js
+++ b/packages/client/src/components/DragTooltip/DragTooltip.js
@ -10,7 +10,7 @@ const StyledTooltip = styled.div`
  z-index: 250;
  background: ${(props) => props.theme.filesDragTooltip.background};
  border-radius: 6px;
-  font-size: 15px;
+  font-size: ${(props) => props.theme.getCorrectFontSize("15px")};
  font-weight: 600;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
--- a/packages/client/src/components/EditingWrapperComponent.js
+++ b/packages/client/src/components/EditingWrapperComponent.js
@ -84,11 +84,13 @@ const EditingWrapper = styled.div`
  .edit-text {
    height: 32px;
    font-size: ${(props) =>
-      props.viewAs === "table"
-        ? "13px"
-        : props.viewAs === "tile"
-        ? "14px"
-        : "15px"};
+      props.theme.getCorrectFontSize(
+        props.viewAs === "table"
+          ? "13px"
+          : props.viewAs === "tile"
+          ? "14px"
+          : "15px"
+      )};
    outline: 0 !important;
    font-weight: 600;
    margin: 0;
--- a/packages/client/src/components/EmptyContainer/RoomNoAccessContainer.js
+++ b/packages/client/src/components/EmptyContainer/RoomNoAccessContainer.js
@ -78,7 +78,6 @@ const RoomNoAccessContainer = (props) => {
    <EmptyContainer
      isEmptyPage={isEmptyPage}
      sectionWidth={sectionWidth}
-      imageStyle={{ marginRight: "20px" }}
      className="empty-folder_room-not-found"
      {...propsRoomNotFoundOrMoved}
    />
--- a/packages/client/src/components/FilesSelector/FilesSelector.types.ts
+++ b/packages/client/src/components/FilesSelector/FilesSelector.types.ts
@ -57,6 +57,7 @@ export type useSocketHelperProps = {
  setTotal: (callback: setTotalCallback) => void;
  disabledItems: string[] | number[];
  filterParam?: string;
+  getIcon: (size: number, fileExst: string) => string;
 };

 export type useRootHelperProps = {
@ -117,6 +118,7 @@ export type useFilesHelpersProps = {
    search?: string | null,
    isErrorPath?: boolean
  ) => void;
+  getIcon: (size: number, fileExst: string) => string;
  t: any;
 };

@ -213,4 +215,5 @@ export type FilesSelectorProps = {

  embedded: boolean;
  withHeader: boolean;
+  settings: any;
 };
--- a/packages/client/src/components/FilesSelector/FilesSelectorWrapper.tsx
+++ b/packages/client/src/components/FilesSelector/FilesSelectorWrapper.tsx
@ -1,16 +1,19 @@
 import React from "react";
-import { Provider as MobxProvider, inject, observer } from "mobx-react";
+import { Provider as MobxProvider } from "mobx-react";
 import { I18nextProvider } from "react-i18next";
 // @ts-ignore
 import store from "client/store";
 import FilesSelector from "./";
 import i18n from "./i18n";
 import { FilesSelectorProps } from "./FilesSelector.types";
-const { auth: authStore } = store;
+const { auth: authStore, settingsStore } = store;

 const FilesSelectorWrapper = (props: FilesSelectorProps) => {
  React.useEffect(() => {
+    const { setFilesSettings } = settingsStore;
+    const { settings } = props;
    authStore.init(true);
+    settings && setFilesSettings(settings);
  }, []);

  return (
--- a/packages/client/src/components/FilesSelector/helpers/useFilesHelper.ts
+++ b/packages/client/src/components/FilesSelector/helpers/useFilesHelper.ts
@ -24,155 +24,6 @@ import {
 //@ts-ignore
 import toastr from "@docspace/components/toast/toastr";

-const getIconUrl = (extension: string, isImage: boolean, isMedia: boolean) => {
-  // if (extension !== iconPath) return iconSize32.get(iconPath);
-  let path = "";
-
-  switch (extension) {
-    case ".avi":
-      path = "avi.svg";
-      break;
-    case ".csv":
-      path = "csv.svg";
-      break;
-    case ".djvu":
-      path = "djvu.svg";
-      break;
-    case ".doc":
-      path = "doc.svg";
-      break;
-    case ".docm":
-      path = "docm.svg";
-      break;
-    case ".docx":
-      path = "docx.svg";
-      break;
-    case ".dotx":
-      path = "dotx.svg";
-      break;
-    case ".dvd":
-      path = "dvd.svg";
-      break;
-    case ".epub":
-      path = "epub.svg";
-      break;
-    case ".pb2":
-    case ".fb2":
-      path = "fb2.svg";
-      break;
-    case ".flv":
-      path = "flv.svg";
-      break;
-    case ".fodt":
-      path = "fodt.svg";
-      break;
-    case ".iaf":
-      path = "iaf.svg";
-      break;
-    case ".ics":
-      path = "ics.svg";
-      break;
-    case ".m2ts":
-      path = "m2ts.svg";
-      break;
-    case ".mht":
-      path = "mht.svg";
-      break;
-    case ".mkv":
-      path = "mkv.svg";
-      break;
-    case ".mov":
-      path = "mov.svg";
-      break;
-    case ".mp4":
-      path = "mp4.svg";
-      break;
-    case ".mpg":
-      path = "mpg.svg";
-      break;
-    case ".odp":
-      path = "odp.svg";
-      break;
-    case ".ods":
-      path = "ods.svg";
-      break;
-    case ".odt":
-      path = "odt.svg";
-      break;
-    case ".otp":
-      path = "otp.svg";
-      break;
-    case ".ots":
-      path = "ots.svg";
-      break;
-    case ".ott":
-      path = "ott.svg";
-      break;
-    case ".pdf":
-      path = "pdf.svg";
-      break;
-    case ".pot":
-      path = "pot.svg";
-      break;
-    case ".pps":
-      path = "pps.svg";
-      break;
-    case ".ppsx":
-      path = "ppsx.svg";
-      break;
-    case ".ppt":
-      path = "ppt.svg";
-      break;
-    case ".pptm":
-      path = "pptm.svg";
-      break;
-    case ".pptx":
-      path = "pptx.svg";
-      break;
-    case ".rtf":
-      path = "rtf.svg";
-      break;
-    case ".svg":
-      path = "svg.svg";
-      break;
-    case ".txt":
-      path = "txt.svg";
-      break;
-    case ".webm":
-      path = "webm.svg";
-      break;
-    case ".xls":
-      path = "xls.svg";
-      break;
-    case ".xlsm":
-      path = "xlsm.svg";
-      break;
-    case ".xlsx":
-      path = "xlsx.svg";
-      break;
-    case ".xps":
-      path = "xps.svg";
-      break;
-    case ".xml":
-      path = "xml.svg";
-      break;
-    case ".oform":
-      path = "oform.svg";
-      break;
-    case ".docxf":
-      path = "docxf.svg";
-      break;
-    default:
-      path = "file.svg";
-      break;
-  }
-
-  if (isMedia) path = "sound.svg";
-  if (isImage) path = "image.svg";
-
-  return iconSize32.get(path);
-};
-
 export const convertFoldersToItems = (
  folders: any,
  disabledItems: any[],
@ -220,7 +71,11 @@ export const convertFoldersToItems = (
  return items;
 };

-export const convertFilesToItems = (files: any, filterParam?: string) => {
+export const convertFilesToItems = (
+  files: any,
+  filterParam?: string,
+  getIcon: (size: number, fileExst: string) => string
+) => {
  const items = files.map((file: any) => {
    const {
      id,
@ -232,12 +87,7 @@ export const convertFilesToItems = (files: any, filterParam?: string) => {
      fileExst,
    } = file;

-    const isImage = file.viewAccessability.ImageView;
-    const isMedia = file.viewAccessability.MediaView;
-
-    let icon = getIconUrl(fileExst, isImage, isMedia);
-
-    // if(filterParam)
+    let icon = getIcon(32, fileExst);

    return {
      id,
@ -277,6 +127,7 @@ export const useFilesHelper = ({
  isRoomsOnly,
  rootThirdPartyId,
  getRoomList,
+  getIcon,
  t,
 }: useFilesHelpersProps) => {
  const getFileList = React.useCallback(
@ -307,7 +158,7 @@ export const useFilesHelper = ({
        filter.applyFilterOption = ApplyFilterOption.Files;
        switch (filterParam) {
          case FilesSelectorFilterTypes.DOCX:
-            filter.filterType = FilterType.DocumentsOnly;
+            filter.extension = FilesSelectorFilterTypes.DOCX;
            break;

          case FilesSelectorFilterTypes.IMG:
@ -315,7 +166,7 @@ export const useFilesHelper = ({
            break;

          case FilesSelectorFilterTypes.GZ:
-            filter.filterType = FilterType.ArchiveOnly;
+            filter.extension = FilesSelectorFilterTypes.GZ;
            break;

          case FilesSelectorFilterTypes.DOCXF:
@ -379,7 +230,11 @@ export const useFilesHelper = ({
          filterParam
        );

-        const filesList: Item[] = convertFilesToItems(files, filterParam);
+        const filesList: Item[] = convertFilesToItems(
+          files,
+          filterParam,
+          getIcon
+        );

        const itemList = [...foldersList, ...filesList];

--- a/packages/client/src/components/FilesSelector/helpers/useSocketHelper.ts
+++ b/packages/client/src/components/FilesSelector/helpers/useSocketHelper.ts
@ -17,6 +17,7 @@ const useSocketHelper = ({
  setTotal,
  disabledItems,
  filterParam,
+  getIcon,
 }: useSocketHelperProps) => {
  const subscribedId = React.useRef<null | number>(null);

@ -71,7 +72,7 @@ const useSocketHelper = ({
    let item: null | Item = null;

    if (opt?.type === "file") {
-      item = convertFilesToItems([data], filterParam)[0];
+      item = convertFilesToItems([data], filterParam, getIcon)[0];
    } else if (opt?.type === "folder") {
      item = !!data.roomType
        ? convertRoomsToItems([data])[0]
@ -126,7 +127,7 @@ const useSocketHelper = ({
    let item: null | Item = null;

    if (opt?.type === "file") {
-      item = convertFilesToItems([data], filterParam)[0];
+      item = convertFilesToItems([data], filterParam, getIcon)[0];
    } else if (opt?.type === "folder") {
      item = !!data.roomType
        ? convertRoomsToItems([data])[0]
--- a/packages/client/src/components/FilesSelector/index.tsx
+++ b/packages/client/src/components/FilesSelector/index.tsx
@ -101,6 +101,7 @@ const FilesSelector = ({

  embedded,
  withHeader,
+  getIcon,
 }: FilesSelectorProps) => {
  const { t } = useTranslation(["Files", "Common", "Translations"]);

@ -140,6 +141,7 @@ const FilesSelector = ({
    setTotal,
    disabledItems,
    filterParam,
+    getIcon,
  });

  const {
@ -199,6 +201,7 @@ const FilesSelector = ({
    isRoomsOnly,
    rootThirdPartyId,
    getRoomList,
+    getIcon,
    t,
  });

@ -643,8 +646,9 @@ export default inject(
      filesList,
      setMovingInProgress,
      setSelected,
+      filesSettingsStore,
    } = filesStore;
-
+    const { getIcon } = filesSettingsStore;
    const { isVisible: infoPanelIsVisible, selection: infoPanelSelection } =
      auth.infoPanelStore;

@ -713,6 +717,7 @@ export default inject(
      socketSubscribers: socketSubscribesId,
      setMoveToPublicRoomVisible,
      currentDeviceType,
+      getIcon,
    };
  }
 )(observer(FilesSelector));
--- a/packages/client/src/components/GlobalEvents/sub-components/Dialog.js
+++ b/packages/client/src/components/GlobalEvents/sub-components/Dialog.js
@ -90,28 +90,19 @@ const Dialog = ({
  const onSaveAction = useCallback(
    (e) => {
      setIsDisabled(true);
-      isCreateDialog && setKeepNewFileName(isChecked);
+      isCreateDialog && isChecked && setKeepNewFileName(isChecked);
      onSave && onSave(e, value);
    },
    [onSave, isCreateDialog, value, isChecked]
  );

  const onCancelAction = useCallback((e) => {
-    if (isChecked) {
-      setKeepNewFileName(false);
-    }
    onCancel && onCancel(e);
  }, []);

-  const onCloseAction = useCallback(
-    (e) => {
-      if (!isDisabled && isChecked) {
-        setKeepNewFileName(false);
-      }
-      onClose && onClose(e);
-    },
-    [isDisabled]
-  );
+  const onCloseAction = useCallback((e) => {
+    onClose && onClose(e);
+  }, []);

  const onChangeCheckbox = () => {
    isCreateDialog && setIsChecked((val) => !val);
--- a/packages/client/src/components/NavMenu/sub-components/header-navigation-icon.js
+++ b/packages/client/src/components/NavMenu/sub-components/header-navigation-icon.js
@ -64,7 +64,7 @@ const StyledContainer = styled.div`

      p {
        font-weight: 800;
-        font-size: 9px;
+        font-size: ${(props) => props.theme.getCorrectFontSize("9px")};
        line-height: 12px;
      }
    }
--- a/packages/client/src/components/NavMenu/sub-components/header.js
+++ b/packages/client/src/components/NavMenu/sub-components/header.js
@ -67,7 +67,7 @@ const StyledLink = styled.div`
  display: inline;
  .nav-menu-header_link {
    color: ${(props) => props.theme.header.linkColor};
-    font-size: 13px;
+    font-size: ${(props) => props.theme.getCorrectFontSize("13px")};
  }

  a {
--- a/packages/client/src/components/NavMenu/sub-components/nav-item.js
+++ b/packages/client/src/components/NavMenu/sub-components/nav-item.js
@ -102,7 +102,7 @@ const VersionBadge = styled.div`
  border-radius: 5px;
  color: #ffffff;
  display: inline-block;
-  font-size: 10px;
+  font-size: ${(props) => props.theme.getCorrectFontSize("10px")};
  line-height: 8px;
  padding: 3px 6px;
  position: absolute;
--- a/packages/client/src/components/NavMenu/sub-components/profile-menu.js
+++ b/packages/client/src/components/NavMenu/sub-components/profile-menu.js
@ -133,7 +133,7 @@ export const MenuContainer = styled.div`
 MenuContainer.defaultProps = { theme: Base };

 export const MainLabelContainer = styled.div`
-  font-size: 16px;
+  font-size: ${(props) => props.theme.getCorrectFontSize("16px")};
  line-height: 28px;

  width: auto;
@ -149,7 +149,7 @@ MainLabelContainer.defaultProps = { theme: Base };

 export const LabelContainer = styled.div`
  font-weight: normal;
-  font-size: 11px;
+  font-size: ${(props) => props.theme.getCorrectFontSize("11px")};
  line-height: 16px;

  ${commonStyle}
--- a/packages/client/src/components/PeopleSelector/index.js
+++ b/packages/client/src/components/PeopleSelector/index.js
@ -1,23 +1,23 @@
-import CatalogAccountsReactSvgUrl from "PUBLIC_DIR/images/catalog.accounts.react.svg?url";
-import EmptyScreenPersonsSvgUrl from "PUBLIC_DIR/images/empty_screen_persons.svg?url";
-import EmptyScreenPersonsSvgDarkUrl from "PUBLIC_DIR/images/empty_screen_persons_dark.svg?url";
-import DefaultUserPhoto from "PUBLIC_DIR/images/default_user_photo_size_82-82.png";
-
-import React, { useState, useEffect, useRef } from "react";
-import { inject, observer } from "mobx-react";
-import PropTypes from "prop-types";
-import { I18nextProvider, withTranslation } from "react-i18next";
 import i18n from "./i18n";
+import PropTypes from "prop-types";
+import { inject, observer } from "mobx-react";
+import React, { useState, useEffect } from "react";
+import { I18nextProvider, withTranslation } from "react-i18next";

 import Selector from "@docspace/components/selector";
-import Filter from "@docspace/common/api/people/filter";

+import { getUserRole } from "@docspace/common/utils";
+import Filter from "@docspace/common/api/people/filter";
 import { getUserList } from "@docspace/common/api/people";
 import Loaders from "@docspace/common/components/Loaders";
-import { getUserRole } from "@docspace/common/utils";
 import { EmployeeStatus } from "@docspace/common/constants";
+import useLoadingWithTimeout from "SRC_DIR/Hooks/useLoadingWithTimeout";

-let timer = null;
+import DefaultUserPhoto from "PUBLIC_DIR/images/default_user_photo_size_82-82.png";
+
+import EmptyScreenPersonsSvgUrl from "PUBLIC_DIR/images/empty_screen_persons.svg?url";
+import CatalogAccountsReactSvgUrl from "PUBLIC_DIR/images/catalog.accounts.react.svg?url";
+import EmptyScreenPersonsSvgDarkUrl from "PUBLIC_DIR/images/empty_screen_persons_dark.svg?url";

 const PeopleSelector = ({
  acceptButtonLabel,
@ -64,33 +64,12 @@ const PeopleSelector = ({
  const [total, setTotal] = useState(0);
  const [hasNextPage, setHasNextPage] = useState(true);
  const [isNextPageLoading, setIsNextPageLoading] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
-
-  const cleanTimer = () => {
-    timer && clearTimeout(timer);
-    timer = null;
-  };
+  const [isLoading, setIsLoading] = useLoadingWithTimeout(100, false);

  useEffect(() => {
    loadNextPage(0);
  }, []);

-  useEffect(() => {
-    if (isLoading) {
-      cleanTimer();
-      timer = setTimeout(() => {
-        setIsLoading(true);
-      }, 100);
-    } else {
-      cleanTimer();
-      setIsLoading(false);
-    }
-
-    return () => {
-      cleanTimer();
-    };
-  }, [isLoading]);
-
  const toListItem = (item) => {
    const {
      id,
@ -263,13 +242,8 @@ const PeopleSelector = ({
      footerCheckboxLabel={footerCheckboxLabel}
      isChecked={isChecked}
      searchLoader={<Loaders.SelectorSearchLoader />}
-      rowLoader={
-        <Loaders.SelectorRowLoader
-          isMultiSelect={false}
-          isContainer={isLoading}
-          isUser={true}
-        />
-      }
+      isSearchLoading={isLoading}
+      rowLoader={<Loaders.SelectorRowLoader isUser isContainer={isLoading} />}
    />
  );
 };
--- a/packages/client/src/components/dialogs/ChangePortalOwnerDialog/StyledDialog.js
+++ b/packages/client/src/components/dialogs/ChangePortalOwnerDialog/StyledDialog.js
@ -19,13 +19,13 @@ const StyledOwnerInfo = styled.div`

    .display-name {
      font-weight: 700;
-      font-size: 16px;
+      font-size: ${(props) => props.theme.getCorrectFontSize("16px")};
      line-height: 22px;
    }

    .status {
      font-weight: 600;
-      font-size: 13px;
+      font-size: ${(props) => props.theme.getCorrectFontSize("13px")};
      line-height: 20px;
      color: ${(props) => props.theme.dialogs.disableText};
    }
@ -39,14 +39,14 @@ const StyledPeopleSelectorInfo = styled.div`

  .new-owner {
    font-weight: 600;
-    font-size: 15px;
+    font-size: ${(props) => props.theme.getCorrectFontSize("15px")};
    line-height: 16px;
    margin-bottom: 4px;
  }

  .description {
    font-weight: 400;
-    font-size: 13px;
+    font-size: ${(props) => props.theme.getCorrectFontSize("13px")};
    line-height: 20px;

    color: ${(props) => props.theme.dialogs.disableText};
@ -63,7 +63,7 @@ const StyledPeopleSelector = styled.div`

  .label {
    font-weight: 600;
-    font-size: 13px;
+    font-size: ${(props) => props.theme.getCorrectFontSize("13px")};
    line-height: 20px;

    color: ${(props) => props.theme.dialogs.disableText};
@ -86,7 +86,7 @@ const StyledAvailableList = styled.div`

  .list-header {
    font-weight: 600;
-    font-size: 13px;
+    font-size: ${(props) => props.theme.getCorrectFontSize("13px")};
    line-height: 20px;

    margin-bottom: 8px;
@ -94,7 +94,7 @@ const StyledAvailableList = styled.div`

  .list-item {
    font-weight: 400;
-    font-size: 13px;
+    font-size: ${(props) => props.theme.getCorrectFontSize("13px")};
    line-height: 20px;

    margin-bottom: 2px;
@ -115,7 +115,7 @@ const StyledFooterWrapper = styled.div`
    margin-bottom: 16px;

    font-weight: 400;
-    font-size: 13px;
+    font-size: ${(props) => props.theme.getCorrectFontSize("13px")};
    line-height: 20px;
  }

@ -168,7 +168,7 @@ const StyledSelectedOwner = styled.div`
    color: ${({ currentColorScheme }) => currentColorScheme.text.accent};

    font-weight: 600;
-    font-size: 13px;
+    font-size: ${(props) => props.theme.getCorrectFontSize("13px")};
    line-height: 20px;
  }

--- a/packages/client/src/components/dialogs/ConflictResolveDialog/index.js
+++ b/packages/client/src/components/dialogs/ConflictResolveDialog/index.js
@ -47,12 +47,12 @@ const StyledModalDialog = styled(ModalDialog)`

    .radio-option-title {
      font-weight: 600;
-      font-size: 14px;
+      font-size: ${(props) => props.theme.getCorrectFontSize("14px")};
      line-height: 16px;
    }

    .radio-option-description {
-      font-size: 12px;
+      font-size: ${(props) => props.theme.getCorrectFontSize("12px")};
      line-height: 16px;
      color: #a3a9ae;
    }
--- a/packages/client/src/components/dialogs/CreateEditRoomDialog/CreateRoomDialog.js
+++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/CreateRoomDialog.js
@ -96,6 +96,7 @@ const CreateRoomDialog = ({
  const isRoomTitleChanged = roomParams.title.trim() !== "" ? false : true;

  const onKeyUpHandler = (e) => {
+    if (isWrongTitle) return;
    if (e.keyCode === 13) onCreateRoom();
  };

--- a/packages/client/src/components/dialogs/CreateEditRoomDialog/EditRoomDialog.js
+++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/EditRoomDialog.js
@ -28,20 +28,23 @@ const EditRoomDialog = ({
  const prevRoomParams = useRef(
    Object.freeze({
      ...roomParams,
-    }),
+    })
  );

  const compareRoomParams = (prevParams, currentParams) => {
    return (
      prevParams.title === currentParams.title &&
      prevParams.roomOwner.id === currentParams.roomOwner.id &&
-      prevParams.tags.sort().toString() === currentParams.tags.sort().toString() &&
-      ((prevParams.icon.uploadedFile === "" && currentParams.icon.uploadedFile === null) ||
+      prevParams.tags.sort().toString() ===
+        currentParams.tags.sort().toString() &&
+      ((prevParams.icon.uploadedFile === "" &&
+        currentParams.icon.uploadedFile === null) ||
        prevParams.icon.uploadedFile === currentParams.icon.uploadedFile)
    );
  };

-  const setRoomTags = (newTags) => setRoomParams({ ...roomParams, tags: newTags });
+  const setRoomTags = (newTags) =>
+    setRoomParams({ ...roomParams, tags: newTags });

  const tagHandler = new TagHandler(roomParams.tags, setRoomTags, fetchedTags);

@ -52,6 +55,7 @@ const EditRoomDialog = ({
    }));

  const onKeyUpHandler = (e) => {
+    if (isWrongTitle) return;
    if (e.keyCode === 13) onEditRoom();
  };

@ -90,7 +94,8 @@ const EditRoomDialog = ({
      visible={visible}
      onClose={onCloseAction}
      isScrollLocked={isScrollLocked}
-      withFooterBorder>
+      withFooterBorder
+    >
      <ModalDialog.Header>
        <DialogHeader isEdit />
      </ModalDialog.Header>
@ -121,7 +126,10 @@ const EditRoomDialog = ({
          primary
          scale
          onClick={onEditRoom}
-          isDisabled={isWrongTitle || compareRoomParams(prevRoomParams.current, roomParams)}
+          isDisabled={
+            isWrongTitle ||
+            compareRoomParams(prevRoomParams.current, roomParams)
+          }
          isLoading={isLoading}
        />
        <Button
--- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IsPrivateParam/PrivacyLimitationsWarning.js
+++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IsPrivateParam/PrivacyLimitationsWarning.js
@ -35,7 +35,7 @@ const StyledPrivacyLimitationsWarning = styled.div`

    &-text {
      font-weight: 600;
-      font-size: 13px;
+      font-size: ${(props) => props.theme.getCorrectFontSize("13px")};
      line-height: 20px;
      color: ${(props) =>
        props.theme.createEditRoomDialog.isPrivate.limitations.titleColor};
@ -44,7 +44,7 @@ const StyledPrivacyLimitationsWarning = styled.div`

  .warning-description {
    font-weight: 400;
-    font-size: 12px;
+    font-size: ${(props) => props.theme.getCorrectFontSize("12px")};
    line-height: 16px;
    color: ${(props) =>
      props.theme.createEditRoomDialog.isPrivate.limitations.descriptionColor};
@ -54,7 +54,7 @@ const StyledPrivacyLimitationsWarning = styled.div`
    cursor: pointer;
    margin-top: 2px;
    font-weight: 600;
-    font-size: 13px;
+    font-size: ${(props) => props.theme.getCorrectFontSize("13px")};
    line-height: 15px;
    color: ${(props) =>
      props.theme.createEditRoomDialog.isPrivate.limitations.linkColor};
--- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Params/StyledParam.js
+++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Params/StyledParam.js
@ -31,14 +31,14 @@ const StyledParam = styled.div`
      .set_room_params-info-title-text {
        user-select: none;
        font-weight: 600;
-        font-size: 13px;
+        font-size: ${(props) => props.theme.getCorrectFontSize("13px")};
        line-height: 20px;
      }
    }
    .set_room_params-info-description {
      user-select: none;
      font-weight: 400;
-      font-size: 12px;
+      font-size: ${(props) => props.theme.getCorrectFontSize("12px")};
      line-height: 16px;
      color: ${(props) =>
        props.theme.createEditRoomDialog.commonParam.descriptionColor};
--- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/PermanentSettings/PermanentSetting.js
+++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/PermanentSettings/PermanentSetting.js
@ -56,7 +56,7 @@ const StyledPermanentSetting = styled.div`

    &-title {
      font-weight: 600;
-      font-size: 12px;
+      font-size: ${(props) => props.theme.getCorrectFontSize("12px")};
      line-height: 16px;
    }
  }
@ -71,7 +71,7 @@ const StyledPermanentSetting = styled.div`

  .permanent_setting-secondary-info {
    font-weight: 400;
-    font-size: 12px;
+    font-size: ${(props) => props.theme.getCorrectFontSize("12px")};
    line-height: 16px;
    color: ${(props) =>
      props.theme.createEditRoomDialog.permanentSettings.descriptionColor};
--- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomType.js
+++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomType.js
@ -41,19 +41,19 @@ const StyledRoomType = styled.div`
      align-items: center;
      .choose_room-title-text {
        font-weight: 600;
-        font-size: 14px;
+        font-size: ${(props) => props.theme.getCorrectFontSize("14px")};
        line-height: 16px;
      }
    }
    .choose_room-description {
      font-weight: 400;
-      font-size: 12px;
+      font-size: ${(props) => props.theme.getCorrectFontSize("12px")};
      line-height: 16px;
    }
  }

  .choose_room-forward_btn {
-    ${props =>
+    ${(props) =>
      props.theme.interfaceDirection === "rtl"
        ? css`
            margin-right: auto;
@ -70,53 +70,53 @@ const StyledRoomType = styled.div`
 `;

 const StyledListItem = styled(StyledRoomType)`
-  background-color: ${props =>
+  background-color: ${(props) =>
    props.theme.createEditRoomDialog.roomType.listItem.background};
  border: 1px solid
-    ${props => props.theme.createEditRoomDialog.roomType.listItem.borderColor};
+    ${(props) => props.theme.createEditRoomDialog.roomType.listItem.borderColor};
  border-radius: 6px;

  .choose_room-description {
-    color: ${props =>
+    color: ${(props) =>
      props.theme.createEditRoomDialog.roomType.listItem.descriptionText};
  }
 `;

 const StyledDropdownButton = styled(StyledRoomType)`
  border-radius: 6px;
-  background-color: ${props =>
+  background-color: ${(props) =>
    props.theme.createEditRoomDialog.roomType.dropdownButton.background};
  border: 1px solid
-    ${props =>
+    ${(props) =>
      props.isOpen
        ? props.theme.createEditRoomDialog.roomType.dropdownButton
            .isOpenBorderColor
        : props.theme.createEditRoomDialog.roomType.dropdownButton.borderColor};

  .choose_room-description {
-    color: ${props =>
+    color: ${(props) =>
      props.theme.createEditRoomDialog.roomType.dropdownButton.descriptionText};
  }

  .choose_room-forward_btn {
    &.dropdown-button {
-      transform: ${props =>
+      transform: ${(props) =>
        props.isOpen ? "rotate(-90deg)" : "rotate(90deg)"};
    }
  }
 `;

 const StyledDropdownItem = styled(StyledRoomType)`
-  background-color: ${props =>
+  background-color: ${(props) =>
    props.theme.createEditRoomDialog.roomType.dropdownItem.background};

  &:hover {
-    background-color: ${props =>
+    background-color: ${(props) =>
      props.theme.createEditRoomDialog.roomType.dropdownItem.hoverBackground};
  }

  .choose_room-description {
-    color: ${props =>
+    color: ${(props) =>
      props.theme.createEditRoomDialog.roomType.dropdownItem.descriptionText};
  }

@ -127,15 +127,15 @@ const StyledDropdownItem = styled(StyledRoomType)`

 const StyledDisplayItem = styled(StyledRoomType)`
  cursor: default;
-  background-color: ${props =>
+  background-color: ${(props) =>
    props.theme.createEditRoomDialog.roomType.displayItem.background};
  border: 1px solid
-    ${props =>
+    ${(props) =>
      props.theme.createEditRoomDialog.roomType.displayItem.borderColor};
  border-radius: 6px;

  .choose_room-description {
-    color: ${props =>
+    color: ${(props) =>
      props.theme.createEditRoomDialog.roomType.displayItem.descriptionText};
  }

@ -202,7 +202,8 @@ const RoomType = ({
      title={t(room.title)}
      onClick={onClick}
      isOpen={isOpen}
-      data-selected-id={selectedId}>
+      data-selected-id={selectedId}
+    >
      {content}
    </StyledDropdownButton>
  ) : type === "dropdownItem" ? (
@ -211,14 +212,16 @@ const RoomType = ({
      title={t(room.title)}
      onClick={onClick}
      isOpen={isOpen}
-      data-selected-id={selectedId}>
+      data-selected-id={selectedId}
+    >
      {content}
    </StyledDropdownItem>
  ) : (
    <StyledDisplayItem
      id={id}
      title={t(room.title)}
-      data-selected-id={selectedId}>
+      data-selected-id={selectedId}
+    >
      {content}
    </StyledDisplayItem>
  );
--- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/StyledDropdown.js
+++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/StyledDropdown.js
@ -44,7 +44,7 @@ const StyledDropDown = styled(DropDown)`
    width: 100%;
    padding: 6px 8px;
    font-weight: 400;
-    font-size: 13px;
+    font-size: ${(props) => props.theme.getCorrectFontSize("13px")};
    line-height: 20px;

    display: block;
--- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/ThirdPartyStorage/FolderInput.js
+++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/ThirdPartyStorage/FolderInput.js
@ -41,7 +41,7 @@ const StyledFolderInput = styled.div`
  .room_title {
    padding: 5px 0px 5px 0px;
    font-weight: 400;
-    font-size: 13px;
+    font-size: ${(props) => props.theme.getCorrectFontSize("13px")};
    line-height: 20px;
  }

--- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/ThirdPartyStorage/ThirdPartyComboBox.js
+++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/ThirdPartyStorage/ThirdPartyComboBox.js
@ -58,7 +58,7 @@ const StyledStorageLocation = styled.div`

      &-text {
        font-weight: 400;
-        font-size: 13px;
+        font-size: ${(props) => props.theme.getCorrectFontSize("13px")};
        line-height: 20px;
      }

@ -91,7 +91,7 @@ const StyledStorageLocation = styled.div`
      }
      .checkbox-text {
        font-weight: 400;
-        font-size: 13px;
+        font-size: ${(props) => props.theme.getCorrectFontSize("13px")};
        line-height: 20px;
      }
    }
--- a/packages/client/src/components/dialogs/DataReassignmentDialog/sub-components/Body/Progress.js
+++ b/packages/client/src/components/dialogs/DataReassignmentDialog/sub-components/Body/Progress.js
@ -42,7 +42,7 @@ const StyledProgress = styled.div`
  }

  .progress-section-text {
-    font-size: 14px;
+    font-size: ${(props) => props.theme.getCorrectFontSize("14px")};
    font-weight: 600;
    line-height: 16px;
  }
@ -65,7 +65,7 @@ const StyledProgress = styled.div`
  }

  .status {
-    font-size: 14px;
+    font-size: ${(props) => props.theme.getCorrectFontSize("14px")};
    line-height: 16px;
  }

--- a/packages/client/src/components/dialogs/DeleteLinkDialog/index.js
+++ b/packages/client/src/components/dialogs/DeleteLinkDialog/index.js
@ -69,7 +69,11 @@ const DeleteLinkDialogComponent = (props) => {
      visible={visible}
      onClose={onClose}
    >
-      <ModalDialog.Header>{t("Files:DeleteLink")}</ModalDialog.Header>
+      <ModalDialog.Header>
+        {link.sharedTo.primary && isPublicRoomType
+          ? t("Files:RevokeLink")
+          : t("Files:DeleteLink")}
+      </ModalDialog.Header>
      <ModalDialog.Body>
        <div className="modal-dialog-content-body">
          <Text noSelect>
--- a/packages/client/src/components/dialogs/DeleteProfileEverDialog/index.js
+++ b/packages/client/src/components/dialogs/DeleteProfileEverDialog/index.js
@ -42,7 +42,7 @@ const StyledModalDialogContainer = styled(ModalDialogContainer)`

  .text-warning {
    color: #f24724;
-    font-size: 16px;
+    font-size: ${(props) => props.theme.getCorrectFontSize("16px")};
    font-weight: 700;
    line-height: 22px;
  }
--- a/packages/client/src/components/dialogs/ModalDialogContainer.js
+++ b/packages/client/src/components/dialogs/ModalDialogContainer.js
@ -59,7 +59,7 @@ const ModalDialogContainer = styled(ModalDialog)`

  .toggle-content-dialog {
    .heading-toggle-content {
-      font-size: 16px;
+      font-size: ${(props) => props.theme.getCorrectFontSize("16px")};
    }
  }

--- a/packages/client/src/components/dialogs/SubmitToFormGallery/index.styled.js
+++ b/packages/client/src/components/dialogs/SubmitToFormGallery/index.styled.js
@ -39,7 +39,7 @@ export const FormItem = styled.div`
  .item-title {
    margin: 8px 0;
    font-weight: 600;
-    font-size: 14px;
+    font-size: ${(props) => props.theme.getCorrectFontSize("14px")};
    line-height: 16px;
    display: flex;
    min-width: 0;
--- a/packages/client/src/components/panels/AddUsersPanel/index.js
+++ b/packages/client/src/components/panels/AddUsersPanel/index.js
@ -1,26 +1,27 @@
-import React, { useState, useEffect, useCallback } from "react";
-import { inject, observer } from "mobx-react";
 import PropTypes from "prop-types";
-import Backdrop from "@docspace/components/backdrop";
-import Heading from "@docspace/components/heading";
-import Aside from "@docspace/components/aside";
-import IconButton from "@docspace/components/icon-button";
-import { ShareAccessRights } from "@docspace/common/constants";
-import Selector from "@docspace/components/selector";
+import { inject, observer } from "mobx-react";
 import { withTranslation } from "react-i18next";
-import Loaders from "@docspace/common/components/Loaders";
-import withLoader from "../../../HOCs/withLoader";
+import React, { useState, useEffect, useCallback } from "react";
+
+import Aside from "@docspace/components/aside";
+import Backdrop from "@docspace/components/backdrop";
+import Selector from "@docspace/components/selector";
 import toastr from "@docspace/components/toast/toastr";
-import Filter from "@docspace/common/api/people/filter";

-import { getMembersList } from "@docspace/common/api/people";
 import { getUserRole } from "@docspace/common/utils";
-import DefaultUserPhoto from "PUBLIC_DIR/images/default_user_photo_size_82-82.png";
-import CatalogAccountsReactSvgUrl from "PUBLIC_DIR/images/catalog.accounts.react.svg?url";
-import EmptyScreenPersonsSvgUrl from "PUBLIC_DIR/images/empty_screen_persons.svg?url";
-import EmptyScreenPersonsSvgDarkUrl from "PUBLIC_DIR/images/empty_screen_persons_dark.svg?url";
+import Filter from "@docspace/common/api/people/filter";
+import Loaders from "@docspace/common/components/Loaders";
+import { getMembersList } from "@docspace/common/api/people";
+import useLoadingWithTimeout from "SRC_DIR/Hooks/useLoadingWithTimeout";
+import { ShareAccessRights } from "@docspace/common/constants";

-let timer = null;
+import withLoader from "../../../HOCs/withLoader";
+
+import DefaultUserPhoto from "PUBLIC_DIR/images/default_user_photo_size_82-82.png";
+
+import EmptyScreenPersonsSvgUrl from "PUBLIC_DIR/images/empty_screen_persons.svg?url";
+import CatalogAccountsReactSvgUrl from "PUBLIC_DIR/images/catalog.accounts.react.svg?url";
+import EmptyScreenPersonsSvgDarkUrl from "PUBLIC_DIR/images/empty_screen_persons_dark.svg?url";

 const AddUsersPanel = ({
  isEncrypted,
@ -103,33 +104,12 @@ const AddUsersPanel = ({
  const [hasNextPage, setHasNextPage] = useState(true);
  const [isNextPageLoading, setIsNextPageLoading] = useState(false);
  const [total, setTotal] = useState(0);
-  const [isLoading, setIsLoading] = useState(false);
-
-  const cleanTimer = () => {
-    timer && clearTimeout(timer);
-    timer = null;
-  };
+  const [isLoading, setIsLoading] = useLoadingWithTimeout(100, false);

  useEffect(() => {
    loadNextPage(0);
  }, []);

-  useEffect(() => {
-    if (isLoading) {
-      cleanTimer();
-      timer = setTimeout(() => {
-        setIsLoading(true);
-      }, 100);
-    } else {
-      cleanTimer();
-      setIsLoading(false);
-    }
-
-    return () => {
-      cleanTimer();
-    };
-  }, [isLoading]);
-
  const onSearch = (value) => {
    setSearchValue(value);
    loadNextPage(0, value);
@ -264,11 +244,14 @@ const AddUsersPanel = ({
          totalItems={total}
          isLoading={isLoading}
          searchLoader={<Loaders.SelectorSearchLoader />}
+          isSearchLoading={isLoading}
          rowLoader={
            <Loaders.SelectorRowLoader
-              isMultiSelect={false}
+              isUser
+              count={15}
+              withAllSelect
              isContainer={isLoading}
-              isUser={true}
+              isMultiSelect={isMultiSelect}
            />
          }
        />
--- a/packages/client/src/components/panels/EditLinkPanel/StyledEditLinkPanel.js
+++ b/packages/client/src/components/panels/EditLinkPanel/StyledEditLinkPanel.js
@ -135,7 +135,7 @@ const StyledEditLinkPanel = styled(ModalDialog)`

    .edit-link_heading {
      font-weight: 700;
-      font-size: 18px;
+      font-size: ${(props) => props.theme.getCorrectFontSize("18px")};
    }
  }

--- a/packages/client/src/components/panels/EmbeddingPanel/StyledEmbeddingPanel.js
+++ b/packages/client/src/components/panels/EmbeddingPanel/StyledEmbeddingPanel.js
@ -5,7 +5,7 @@ import { Base } from "@docspace/components/themes";
 const StyledEmbeddingPanel = styled.div`
  .embedding-panel {
    .scroll-body {
-      ${props =>
+      ${(props) =>
        props.theme.interfaceDirection === "rtl"
          ? css`
              padding-left: 0 !important;
@ -18,11 +18,11 @@ const StyledEmbeddingPanel = styled.div`

  .embedding_header {
    padding: 0 16px;
-    border-bottom: ${props => props.theme.filesPanels.sharing.borderBottom};
+    border-bottom: ${(props) => props.theme.filesPanels.sharing.borderBottom};

    .hotkeys_heading {
      font-weight: 700;
-      font-size: 18px;
+      font-size: ${(props) => props.theme.getCorrectFontSize("18px")};
    }
  }
 `;
@ -45,7 +45,7 @@ const StyledBody = styled.div`
    .embedding-panel_link {
      box-sizing: border-box;

-      ${props =>
+      ${(props) =>
        props.theme.interfaceDirection === "rtl"
          ? css`
              margin-left: 8px;
@ -73,7 +73,7 @@ const StyledBody = styled.div`
    margin-top: 16px;

    .embedding-panel_input {
-      ${props =>
+      ${(props) =>
        props.theme.interfaceDirection === "rtl"
          ? css`
              margin-left: 8px;
@ -98,7 +98,7 @@ const StyledBody = styled.div`
    position: absolute;
    z-index: 1;
    margin: 8px;
-    ${props =>
+    ${(props) =>
      props.theme.interfaceDirection === "rtl"
        ? css`
            left: 16px;
--- a/packages/client/src/components/panels/HotkeysPanel/StyledHotkeys.js
+++ b/packages/client/src/components/panels/HotkeysPanel/StyledHotkeys.js
@ -23,13 +23,13 @@ const StyledHotkeysPanel = styled.div`

    .hotkeys_heading {
      font-weight: 700;
-      font-size: 18px;
+      font-size: ${(props) => props.theme.getCorrectFontSize("18px")};
    }
  }

  .hotkeys_sub-header {
    font-weight: 700;
-    font-size: 16px;
+    font-size: ${(props) => props.theme.getCorrectFontSize("16px")};
    ${(props) =>
      props.theme.interfaceDirection === "rtl"
        ? css`
--- a/packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js
+++ b/packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js
@ -71,6 +71,7 @@ const StyledInvitePanel = styled.div`

    ${(props) =>
      !props.addUsersPanelVisible &&
+      props.theme.interfaceDirection !== "rtl" &&
      css`
        .trackYVisible {
          .scroller {
@ -108,12 +109,12 @@ StyledBlock.defaultProps = { theme: Base };

 const StyledHeading = styled(Heading)`
  font-weight: 700;
-  font-size: 18px;
+  font-size: ${(props) => props.theme.getCorrectFontSize("18px")};
 `;

 const StyledSubHeader = styled(Heading)`
  font-weight: 700;
-  font-size: 16px;
+  font-size: ${(props) => props.theme.getCorrectFontSize("16px")};
  padding-left: 16px;
  padding-right: 16px;
  margin: 16px 0 8px 0;
@ -135,7 +136,7 @@ const StyledDescription = styled(Text)`
  margin-bottom: 16px;

  font-weight: 400;
-  font-size: 12px;
+  font-size: ${(props) => props.theme.getCorrectFontSize("12px")};
  line-height: 16px;
 `;

@ -162,7 +163,7 @@ const StyledRow = styled.div`

  a {
    font-weight: 600;
-    font-size: 14px;
+    font-size: ${(props) => props.theme.getCorrectFontSize("14px")};
    line-height: 16px;
  }

@ -296,7 +297,9 @@ const SearchItemText = styled(Text)`
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: ${(props) =>
-    props.primary ? "14px" : props.info ? "11px" : "12px"};
+    props.theme.getCorrectFontSize(
+      props.primary ? "14px" : props.info ? "11px" : "12px"
+    )};
  font-weight: ${(props) => (props.primary || props.info ? "600" : "400")};

  color: ${(props) =>
@ -385,7 +388,7 @@ const ResetLink = styled(Link)`
    theme.interfaceDirection === "rtl" ? `right` : `left`};
  padding: 0 16px;
  margin-bottom: 16px;
-  font-size: 13px;
+  font-size: ${(props) => props.theme.getCorrectFontSize("13px")};
  color: ${(props) => props.theme.createEditRoomDialog.commonParam.textColor};
  font-style: normal;
  line-height: 15px;
@ -435,7 +438,7 @@ const StyledInviteLanguage = styled.div`
  color: ${(props) =>
    props.theme.createEditRoomDialog.commonParam.descriptionColor};
  margin-bottom: 4px;
-  font-size: 13px;
+  font-size: ${(props) => props.theme.getCorrectFontSize("13px")};
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
@ -445,20 +448,20 @@ const StyledInviteLanguage = styled.div`
  }

  .invitation-language {
-    margin-right: 4px;
    color: ${(props) =>
      props.theme.createEditRoomDialog.commonParam.descriptionColor};
  }
  .language-combo-box {
    .combo-button {
      padding-left: 6px;
-      padding-right: 0px;
+      padding-right: 6px;
    }
    .combo-button-label {
      color: ${(props) =>
        props.theme.createEditRoomDialog.commonParam.descriptionColor};
    }
    .combo-buttons_arrow-icon {
+      margin-left: 0px;
      svg {
        path {
          fill: ${(props) =>
--- a/packages/client/src/components/panels/InvitePanel/index.js
+++ b/packages/client/src/components/panels/InvitePanel/index.js
@ -62,7 +62,9 @@ const InvitePanel = ({
  currentDeviceType,
 }) => {
  const [invitePanelIsLoding, setInvitePanelIsLoading] = useState(
-    !userLink || !guestLink || !adminLink || !collaboratorLink || roomId !== -1
+    () =>
+      ((!userLink || !guestLink || !collaboratorLink) && !adminLink) ||
+      roomId !== -1
  );
  const [selectedRoom, setSelectedRoom] = useState(null);
  const [hasErrors, setHasErrors] = useState(false);
@ -132,7 +134,7 @@ const InvitePanel = ({

  useEffect(() => {
    if (roomId === -1) {
-      if (!userLink || !guestLink || !adminLink || !collaboratorLink) {
+      if ((!userLink || !guestLink || !collaboratorLink) && !adminLink) {
        setInvitePanelIsLoading(true);
        getPortalInviteLinks().finally(() => {
          disableInvitePanelLoader();
--- a/packages/client/src/components/panels/InvitePanel/sub-components/AccessSelector.js
+++ b/packages/client/src/components/panels/InvitePanel/sub-components/AccessSelector.js
@ -1,11 +1,11 @@
 import React, { useEffect, useState } from "react";
 import { inject, observer } from "mobx-react";

-import AccessRightSelect from "@docspace/components/access-right-select";
 import { getAccessOptions } from "../utils";
-
 import { StyledAccessSelector } from "../StyledInvitePanel";
+
 import { isMobile } from "@docspace/components/utils/device";
+import AccessRightSelect from "@docspace/components/access-right-select";

 const AccessSelector = ({
  t,
@ -23,7 +23,13 @@ const AccessSelector = ({
  noBorder = false,
 }) => {
  const [horizontalOrientation, setHorizontalOrientation] = useState(false);
-  const width = containerRef?.current?.offsetWidth - 32;
+  const [width, setWidth] = useState(0);
+
+  useEffect(() => {
+    if (!containerRef?.current?.offsetWidth) return;
+
+    setWidth(containerRef?.current?.offsetWidth - 32);
+  }, [containerRef?.current?.offsetWidth]);

  const accessOptions = getAccessOptions(
    t,
--- a/packages/client/src/components/panels/InvitePanel/sub-components/InfoBar.js
+++ b/packages/client/src/components/panels/InvitePanel/sub-components/InfoBar.js
@ -10,7 +10,7 @@ const StyledInfoBar = styled.div`
  display: flex;
  background-color: #f8f9f9;
  color: #333;
-  font-size: 12px;
+  font-size: ${(props) => props.theme.getCorrectFontSize("12px")};
  padding: 12px 16px;
  border-radius: 6px;
  margin-bottom: 10px;
--- a/packages/client/src/components/panels/InvitePanel/sub-components/InviteInput.js
+++ b/packages/client/src/components/panels/InvitePanel/sub-components/InviteInput.js
@ -346,6 +346,7 @@ const InviteInput = ({
            textOverflow
            scaledOptions={false}
            size="content"
+            manualWidth="280px"
            showDisabledItems={true}
            dropDownMaxHeight={364}
            withBlur={isMobileView}
--- a/packages/client/src/components/panels/InvitePanel/sub-components/InvitePanelLoader/InvitePanelLoader.tsx
+++ b/packages/client/src/components/panels/InvitePanel/sub-components/InvitePanelLoader/InvitePanelLoader.tsx
@ -1,7 +1,7 @@
 import React from "react";
 //@ts-ignore

-import Loaders from "@docspace/common/components/Loaders";
+import RectangleSkeleton from "@docspace/components/skeletons/rectangle";

 import {
  ExternalLinksLoaderWrapper,
@ -15,22 +15,22 @@ function InvitePanelLoader() {
  return (
    <InvitePanelLoaderWrapper>
      <ExternalLinksLoaderWrapper>
-        <Loaders.Rectangle width="50%" height="22px" />
-        <Loaders.Rectangle width="28px" height="16px" />
-        <Loaders.Rectangle
+        <RectangleSkeleton width="50%" height="22px" />
+        <RectangleSkeleton width="28px" height="16px" />
+        <RectangleSkeleton
          className="external-links-loader__description"
          height="16px"
        />
      </ExternalLinksLoaderWrapper>
      <InviteInputLoaderWrapper>
        <InviteInputLoaderHeaderWrapper>
-          <Loaders.Rectangle width="115px" height="22px" />
-          <Loaders.Rectangle width="100px" height="19px" />
+          <RectangleSkeleton width="115px" height="22px" />
+          <RectangleSkeleton width="100px" height="19px" />
        </InviteInputLoaderHeaderWrapper>
-        <Loaders.Rectangle width="100%" height="32px" />
+        <RectangleSkeleton width="100%" height="32px" />
        <InviteInputLoaderFooterWrapper>
-          <Loaders.Rectangle height="32px" />
-          <Loaders.Rectangle width="90px" height="32px" />
+          <RectangleSkeleton height="32px" />
+          <RectangleSkeleton width="90px" height="32px" />
        </InviteInputLoaderFooterWrapper>
      </InviteInputLoaderWrapper>
    </InvitePanelLoaderWrapper>
--- a/packages/client/src/components/panels/SharingPanel/StyledSharingPanel.js
+++ b/packages/client/src/components/panels/SharingPanel/StyledSharingPanel.js
@ -10,7 +10,7 @@ const StyledContent = styled.div`
  display: grid;

  grid-template-columns: 100%;
-  grid-template-rows: ${props =>
+  grid-template-rows: ${(props) =>
    props.isNotifyUsers
      ? "53px calc(100% - 254px) 201px"
      : "53px calc(100% - 162px) 109px"};
@ -19,12 +19,12 @@ const StyledContent = styled.div`
 const StyledHeaderContent = styled.div`
  width: auto;
  max-width: 100%;
-  height: ${props => (props.isPersonal ? "40px" : "53px")};
+  height: ${(props) => (props.isPersonal ? "40px" : "53px")};

-  border-bottom: ${props =>
+  border-bottom: ${(props) =>
    props.isPersonal ? "none" : props.theme.filesPanels.sharing.borderBottom};

-  padding: ${props => (props.isPersonal ? "0 4px" : "0 16px")};
+  padding: ${(props) => (props.isPersonal ? "0 4px" : "0 16px")};

  box-sizing: border-box;

@ -46,7 +46,7 @@ const StyledHeaderContent = styled.div`
      .icon-button_svg {
        width: 15px;
      }
-      ${props =>
+      ${(props) =>
        props.theme.interfaceDirection === "rtl"
          ? css`
              margin-left: 16px;
@ -57,7 +57,7 @@ const StyledHeaderContent = styled.div`
    }
  }

-  ${props =>
+  ${(props) =>
    props.isEmbedding &&
    css`
      width: 100%;
@ -69,7 +69,7 @@ const StyledHeaderContent = styled.div`

  .sharing_panel-icons-container {
    display: flex;
-    ${props =>
+    ${(props) =>
      props.theme.interfaceDirection === "rtl"
        ? css`
            margin-right: 16px;
@ -92,13 +92,13 @@ const StyledBodyContent = styled.div`

  .body-scroll-content-sharing-panel {
    width: 100%;
-    height: ${props =>
+    height: ${(props) =>
      props.externalLinkVisible
        ? !props.externalLinkOpen
          ? "calc(100% - 125px)"
          : "calc(100% - 207px)"
        : "calc(100% - 62px)"};
-    max-height: ${props =>
+    max-height: ${(props) =>
      props.externalLinkVisible
        ? !props.externalLinkOpen
          ? "calc(100% - 125px)"
@ -115,10 +115,10 @@ const StyledBodyContent = styled.div`

 const StyledExternalLink = styled.div`
  width: 100%;
-  ${props =>
+  ${(props) =>
    props.theme.interfaceDirection === "rtl"
      ? css`
-          padding: ${props =>
+          padding: ${(props) =>
            props.isPersonal
              ? props.isOpen
                ? "8px 0px 4px 4px"
@ -126,7 +126,7 @@ const StyledExternalLink = styled.div`
              : "20px 16px"};
        `
      : css`
-          padding: ${props =>
+          padding: ${(props) =>
            props.isPersonal
              ? props.isOpen
                ? "8px 4px 4px 0px"
@ -134,7 +134,7 @@ const StyledExternalLink = styled.div`
              : "20px 16px"};
        `}

-  border-bottom: ${props =>
+  border-bottom: ${(props) =>
    props.isPersonal ? "none" : props.theme.filesPanels.sharing.borderBottom};

  box-sizing: border-box;
@ -151,10 +151,10 @@ const StyledExternalLink = styled.div`

    .external-link__text {
      font-weight: 700;
-      font-size: 16px;
+      font-size: ${(props) => props.theme.getCorrectFontSize("16px")};
      line-height: 22px;

-      ${props =>
+      ${(props) =>
        props.theme.interfaceDirection === "rtl"
          ? css`
              margin-left: 16px;
@ -179,7 +179,7 @@ const StyledExternalLink = styled.div`

    .external-link__input-link {
      flex-direction: row-reverse;
-      ${props =>
+      ${(props) =>
        props.theme.interfaceDirection === "rtl"
          ? css`
              padding-left: 0px;
@ -199,7 +199,7 @@ const StyledExternalLink = styled.div`
        padding: 4px 16px;

        .external-link__code-icon {
-          ${props =>
+          ${(props) =>
            props.theme.interfaceDirection === "rtl"
              ? css`
                  margin-left: 12px;
@ -210,7 +210,7 @@ const StyledExternalLink = styled.div`

          cursor: pointer;
          path {
-            fill: ${props =>
+            fill: ${(props) =>
              props.theme.filesPanels.sharing.externalLinkSvg} !important;
          }
        }
@ -218,7 +218,7 @@ const StyledExternalLink = styled.div`
        .external-link__share-icon {
          cursor: pointer;
          path {
-            fill: ${props =>
+            fill: ${(props) =>
              props.theme.filesPanels.sharing.externalLinkSvg} !important;
          }
        }
@ -233,7 +233,7 @@ const StyledExternalLink = styled.div`
    }

    .external-link__copy {
-      ${props =>
+      ${(props) =>
        props.theme.interfaceDirection === "rtl"
          ? css`
              margin-right: 8px;
@ -269,7 +269,7 @@ const StyledExternalLink = styled.div`

    .external-link__access-rights_text {
      color: #a3a9ae;
-      ${props =>
+      ${(props) =>
        props.theme.interfaceDirection === "rtl"
          ? css`
              margin-left: 8px;
@ -296,7 +296,7 @@ const StyledInternalLink = styled.div`

  .internal-link__link-text {
    line-height: 22px !important;
-    font-size: 16px !important;
+    font-size: ${(props) => props.theme.getCorrectFontSize("16px")} !important;
    font-weight: 700 !important;
  }

@ -304,7 +304,7 @@ const StyledInternalLink = styled.div`
    line-height: 15px !important;
    font-weight: 600 !important;

-    border-bottom: ${props =>
+    border-bottom: ${(props) =>
      props.theme.filesPanels.sharing.internalLinkBorder};

    cursor: pointer;
@ -330,7 +330,7 @@ const StyledItem = styled.div`
    justify-content: start;

    .info-block__text {
-      ${props =>
+      ${(props) =>
        props.theme.interfaceDirection === "rtl"
          ? css`
              margin-right: 12px;
@ -345,13 +345,13 @@ const StyledItem = styled.div`
    line-height: 15px !important;
    font-weight: 600 !important;

-    border-bottom: ${props => props.theme.filesPanels.sharing.itemBorder};
+    border-bottom: ${(props) => props.theme.filesPanels.sharing.itemBorder};

    cursor: pointer;
  }

  .item__owner {
-    color: ${props => props.theme.filesPanels.sharing.itemOwnerColor};
+    color: ${(props) => props.theme.filesPanels.sharing.itemOwnerColor};
  }

  .panel_combo-box {
@ -373,7 +373,7 @@ const StyledFooterContent = styled.div`
  width: 100%;

  min-height: 100px;
-  border-top: ${props => props.theme.filesPanels.sharing.borderTop};
+  border-top: ${(props) => props.theme.filesPanels.sharing.borderTop};

  position: relative;

@ -402,7 +402,7 @@ StyledFooterContent.defaultProps = { theme: Base };
 const StyledModalFooter = styled.div`
  width: 100%;

-  ${props =>
+  ${(props) =>
    props.theme.interfaceDirection === "rtl"
      ? css`
          padding: 16px 0 4px 0;
@ -443,7 +443,7 @@ const StyledModalFooter = styled.div`
  }

  button:first-child {
-    ${props =>
+    ${(props) =>
      props.theme.interfaceDirection === "rtl"
        ? css`
            margin-left: 8px;
--- a/packages/client/src/components/panels/StyledPanels.js
+++ b/packages/client/src/components/panels/StyledPanels.js
@ -315,7 +315,7 @@ const StyledHeaderContent = styled.div`
    .files-operations-header,
    .sharing_panel-header {
      margin: 12px 0;
-      font-size: 18px;
+      font-size: ${(props) => props.theme.getCorrectFontSize("18px")};
    }
  }
 `;
@ -452,7 +452,7 @@ const StyledSharingBody = styled(Scrollbar)`
  .sharing_panel-text {
    line-height: 24px;
    font-weight: 600;
-    font-size: 14px;
+    font-size: ${(props) => props.theme.getCorrectFontSize("14px")};
  }

  .sharing_panel-link {
@ -563,13 +563,13 @@ const StyledSharingBody = styled(Scrollbar)`
      //padding-right: 15px;

      .sharing_panel-remove-icon {
-        font-size: 12px;
+        font-size: ${(props) => props.theme.getCorrectFontSize("12px")};
      }
    }

    .sharing_panel-text,
    .sharing_panel-link span {
-      font-size: 13px;
+      font-size: ${(props) => props.theme.getCorrectFontSize("13px")};
    }
  }

@ -595,7 +595,7 @@ const StyledFooter = styled.div`
  .sharing_panel-checkbox {
    span {
      font-weight: 600;
-      font-size: 14px;
+      font-size: ${(props) => props.theme.getCorrectFontSize("14px")};
    }

    .checkbox {
@ -641,7 +641,7 @@ const StyledFooter = styled.div`

    .sharing_panel-checkbox {
      span {
-        font-size: 13px;
+        font-size: ${(props) => props.theme.getCorrectFontSize("13px")};
      }
    }

--- a/packages/client/src/components/panels/VersionHistoryPanel/index.js
+++ b/packages/client/src/components/panels/VersionHistoryPanel/index.js
@ -5,6 +5,8 @@ import Heading from "@docspace/components/heading";
 import Aside from "@docspace/components/aside";
 import Loaders from "@docspace/common/components/Loaders";
 import FloatingButton from "@docspace/components/floating-button";
+import Portal from "@docspace/components/portal";
+import { DeviceType } from "@docspace/common/constants";
 import { withTranslation } from "react-i18next";
 import {
  StyledVersionHistoryPanel,
@ -35,10 +37,11 @@ class PureVersionHistoryPanel extends React.Component {

  render() {
    //console.log("render versionHistoryPanel");
-    const { visible, isLoading, versions, showProgressBar } = this.props;
+    const { visible, isLoading, versions, showProgressBar, currentDeviceType } =
+      this.props;
    const zIndex = 310;

-    return (
+    const element = (
      <StyledVersionHistoryPanel
        className="version-history-modal-dialog"
        visible={visible}
@ -89,6 +92,12 @@ class PureVersionHistoryPanel extends React.Component {
        </Aside>
      </StyledVersionHistoryPanel>
    );
+
+    return currentDeviceType === DeviceType.mobile ? (
+      <Portal element={element} />
+    ) : (
+      element
+    );
  }
 }

@ -101,11 +110,9 @@ VersionHistoryPanel.propTypes = {
 };

 export default inject(({ auth, clientLoadingStore, versionHistoryStore }) => {
-  const { isTabletView } = auth.settingsStore;
+  const { isTabletView, currentDeviceType } = auth.settingsStore;
  const { isLoading } = clientLoadingStore;
-  const {
-    setIsMobileHidden: setInfoPanelIsMobileHidden,
-  } = auth.infoPanelStore;
+  const { setIsMobileHidden: setInfoPanelIsMobileHidden } = auth.infoPanelStore;
  const {
    fileId,
    versions,
@ -124,6 +131,7 @@ export default inject(({ auth, clientLoadingStore, versionHistoryStore }) => {
    showProgressBar,

    setIsVerHistoryPanel,
-    setInfoPanelIsMobileHidden
+    setInfoPanelIsMobileHidden,
+    currentDeviceType,
  };
 })(observer(VersionHistoryPanel));
--- a/packages/client/src/helpers/people-helpers.js
+++ b/packages/client/src/helpers/people-helpers.js
@ -157,7 +157,7 @@ export const showEmailActivationToast = (email) => {
  //console.log("showEmailActivationToast", { email });
  toastr.success(
    <Trans i18nKey="MessageEmailActivationInstuctionsSentOnEmail" ns="People">
-      The email activation instructions have been sent to the
+      The email activation instructions have been sent to the{" "}
      <strong>{{ email }}</strong> email address
    </Trans>
  );
--- a/packages/client/src/helpers/plugins/WrappedComponent.js
+++ b/packages/client/src/helpers/plugins/WrappedComponent.js
@ -1,7 +1,7 @@
 import React from "react";
 import { inject, observer } from "mobx-react";

-import RectangleLoader from "@docspace/common/components/Loaders/RectangleLoader";
+import RectangleSkeleton from "@docspace/components/skeletons/rectangle";

 import Box from "@docspace/components/box";
 import Text from "@docspace/components/text";
@ -338,7 +338,7 @@ const ComponentPure = ({
      }

      case PluginComponents.skeleton: {
-        return <RectangleLoader {...elementProps} />;
+        return <RectangleSkeleton {...elementProps} />;
      }
    }
  };
--- a/packages/client/src/pages/About/ModalDialogContainer.js
+++ b/packages/client/src/pages/About/ModalDialogContainer.js
@ -50,7 +50,7 @@ const ModalDialogContainer = styled(ModalDialog)`

  .toggle-content-dialog {
    .heading-toggle-content {
-      font-size: 16px;
+      font-size: ${(props) => props.theme.getCorrectFontSize("16px")};
    }

    .modal-dialog-content {
--- a/packages/client/src/pages/Errors/AccessRestricted/i18n.js
+++ b/packages/client/src/pages/Errors/AccessRestricted/i18n.js
@ -0,0 +1,36 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+import Backend from "@docspace/common/utils/i18next-http-backend";
+import { LANGUAGE } from "@docspace/common/constants";
+import config from "PACKAGE_FILE";
+import { loadLanguagePath } from "SRC_DIR/helpers/utils";
+
+const newInstance = i18n.createInstance();
+
+newInstance
+  .use(Backend)
+  .use(initReactI18next)
+  .init({
+    lng: localStorage.getItem(LANGUAGE) || "en",
+    fallbackLng: "en",
+    load: "currentOnly",
+    //debug: true,
+
+    interpolation: {
+      escapeValue: false, // not needed for react as it escapes by default
+      format: function (value, format) {
+        if (format === "lowercase") return value.toLowerCase();
+        return value;
+      },
+    },
+
+    backend: {
+      loadPath: loadLanguagePath(config.homepage, "Errors"),
+    },
+
+    react: {
+      useSuspense: false,
+    },
+  });
+
+export default newInstance;
--- a/packages/client/src/pages/Errors/AccessRestricted/index.js
+++ b/packages/client/src/pages/Errors/AccessRestricted/index.js
@ -0,0 +1,35 @@
+import React from "react";
+import styled from "styled-components";
+import ErrorContainer from "@docspace/common/components/ErrorContainer";
+import { I18nextProvider, useTranslation } from "react-i18next";
+import i18n from "./i18n";
+
+const StyledWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 64px;
+`;
+
+const AccessRestricted = () => {
+  const { t, ready } = useTranslation("Errors");
+
+  return ready ? (
+    <StyledWrapper>
+      <ErrorContainer
+        headerText={t("AccessDenied")}
+        bodyText={t("PortalRestriction")}
+      />
+    </StyledWrapper>
+  ) : (
+    <></>
+  );
+};
+
+export default () => (
+  <I18nextProvider i18n={i18n}>
+    <AccessRestricted />
+  </I18nextProvider>
+);
--- a/packages/client/src/pages/FormGallery/Filter/CategoryFilter/DesktopView/index.styled.js
+++ b/packages/client/src/pages/FormGallery/Filter/CategoryFilter/DesktopView/index.styled.js
@ -19,7 +19,7 @@ export const CategoryFilter = styled(ComboBox)`

  .combo-button-label {
    font-weight: 400;
-    font-size: 13px;
+    font-size: ${(props) => props.theme.getCorrectFontSize("13px")};
    line-height: 20px;
  }

@ -39,7 +39,7 @@ export const CategoryFilterItem = styled(DropDownItem)`
  box-sizing: border-box;
  padding: 8px 12px;

-  font-size: 12px;
+  font-size: ${(props) => props.theme.getCorrectFontSize("12px")};
  font-weight: 600;
  line-height: 16px;

@ -121,7 +121,7 @@ export const CategoryFilterSubListItem = styled(DropDownItem)`
  box-sizing: border-box;
  padding: 8px 16px;

-  font-size: 13px;
+  font-size: ${(props) => props.theme.getCorrectFontSize("13px")};
  font-weight: 600;
  line-height: 20px;
 `;
--- a/packages/client/src/pages/FormGallery/Filter/CategoryFilter/MobileView/index.styled.js
+++ b/packages/client/src/pages/FormGallery/Filter/CategoryFilter/MobileView/index.styled.js
@ -12,7 +12,7 @@ export const CategoryFilterMobileWrapper = styled.div`

  .combo-button-label {
    font-weight: 400;
-    font-size: 13px;
+    font-size: ${(props) => props.theme.getCorrectFontSize("13px")};
    line-height: 20px;
  }

@ -60,7 +60,7 @@ export const CategoryFilterItemMobile = styled(DropDownItem)`
  height: 36px;
  box-sizing: border-box;

-  font-size: 13px;
+  font-size: ${(props) => props.theme.getCorrectFontSize("13px")};
  font-weight: 600;
  line-height: 20px;

--- a/packages/client/src/pages/FormGallery/Filter/CategoryFilter/index.js
+++ b/packages/client/src/pages/FormGallery/Filter/CategoryFilter/index.js
@ -2,15 +2,20 @@ import { useState, useEffect } from "react";
 import { inject, observer } from "mobx-react";
 import CategoryFilterDesktop from "./DesktopView";
 import CategoryFilterMobile from "./MobileView";
-import { mobile, tablet } from "@docspace/components/utils/device";
+import { mobile } from "@docspace/components/utils/device";

-import styled from "styled-components";
+import styled, { css } from "styled-components";

 export const StyledCategoryFilterWrapper = styled.div`
  width: 100%;
-  @media ${mobile} {
-    max-width: calc(100% - 49px);
-  }
+
+  ${({ noLocales }) =>
+    !noLocales &&
+    css`
+      @media ${mobile} {
+        max-width: calc(100% - 49px);
+      }
+    `}

  .mobileView {
    display: none;
@ -30,13 +35,16 @@ export const StyledCategoryFilterWrapper = styled.div`
 `;

 const CategoryFilter = ({
+  noLocales,
  fetchCategoryTypes,
  fetchCategoriesOfCategoryType,
 }) => {
  const [menuItems, setMenuItems] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    (async () => {
+      setIsLoading(true);
      let newMenuItems = await fetchCategoryTypes();

      const categoryPromises = newMenuItems.map(
@ -62,18 +70,28 @@ const CategoryFilter = ({
            categories: [],
          }));
        })
-        .finally(() => setMenuItems(newMenuItems));
+        .finally(() => {
+          setMenuItems(newMenuItems);
+          setIsLoading(false);
+        });
    })();
  }, []);

+  if (!isLoading && menuItems.length === 0) return null;
+
  return (
-    <StyledCategoryFilterWrapper className="categoryFilterWrapper">
+    <StyledCategoryFilterWrapper
+      noLocales={noLocales}
+      className="categoryFilterWrapper"
+    >
      <CategoryFilterMobile className="mobileView" menuItems={menuItems} />
      <CategoryFilterDesktop className="desktopView" menuItems={menuItems} />
    </StyledCategoryFilterWrapper>
  );
 };
 export default inject(({ oformsStore }) => ({
+  noLocales:
+    oformsStore.oformLocales !== null && oformsStore.oformLocales?.length === 0,
  fetchCategoryTypes: oformsStore.fetchCategoryTypes,
  fetchCategoriesOfCategoryType: oformsStore.fetchCategoriesOfCategoryType,
 }))(observer(CategoryFilter));
--- a/packages/client/src/pages/FormGallery/Filter/LanguageFilter/index.js
+++ b/packages/client/src/pages/FormGallery/Filter/LanguageFilter/index.js
@ -29,6 +29,8 @@ const LanguageFilter = ({
    sectionScroll.scrollTop = 0;
  };

+  if (oformLocales !== null && oformLocales?.length === 0) return null;
+
  return (
    <Styled.LanguageFilter>
      <Backdrop
@ -61,7 +63,7 @@ const LanguageFilter = ({
        selectedOption={{}}
        advancedOptions={
          <>
-            {oformLocales.map((locale) => (
+            {oformLocales?.map((locale) => (
              <Styled.LanguageFilterItem
                className={"language-item"}
                key={locale}
--- a/packages/client/src/pages/FormGallery/Filter/SearchFilter/index.js
+++ b/packages/client/src/pages/FormGallery/Filter/SearchFilter/index.js
@ -2,7 +2,7 @@ import { inject } from "mobx-react";
 import { useState, useRef, useEffect } from "react";
 import { withTranslation } from "react-i18next";

-import * as Styled from "./index.styled";
+import SearchInput from "@docspace/components/search-input";

 const SearchFilter = ({ t, oformsFilter, filterOformsBySearch }) => {
  const [value, setValue] = useState(oformsFilter.search);
@ -26,9 +26,9 @@ const SearchFilter = ({ t, oformsFilter, filterOformsBySearch }) => {
  }, [ref]);

  return (
-    <Styled.SearchFilter
+    <SearchInput
      forwardedRef={ref}
-      className="first-name"
+      scale
      tabIndex={1}
      placeholder={t("Common:Search")}
      value={value}
--- a/packages/client/src/pages/FormGallery/Filter/SearchFilter/index.styled.js
+++ b/packages/client/src/pages/FormGallery/Filter/SearchFilter/index.styled.js
@ -1,7 +0,0 @@
-import styled from "styled-components";
-import SearchInput from "@docspace/components/search-input";
-
-export const SearchFilter = styled(SearchInput)`
-  width: 100%;
-  max-width: 653px;
-`;
--- a/packages/client/src/pages/FormGallery/Filter/index.js
+++ b/packages/client/src/pages/FormGallery/Filter/index.js
@ -13,18 +13,24 @@ export const StyledFilter = styled.div`
  align-items: center;
  justify-content: space-between;
  gap: 8px;
-  height: 32px;
  padding: 0 0 8px 0;

  .form-only-filters {
+    height: 32px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
+
+    &:empty {
+      display: none;
+    }
  }

  .general-filters {
+    height: 32px;
    width: 100%;
+    max-width: 693px;
    display: flex;
    flex-direction: row;
    align-items: center;
@ -32,19 +38,25 @@ export const StyledFilter = styled.div`
    gap: 8px;
  }

+  .form-only-filters:empty + .general-filters {
+    justify-content: space-between;
+    max-width: 100%;
+  }
+
  @media ${tablet} {
    padding-bottom: 16px;
  }

  @media ${mobile} {
-    height: 72px;
-
    flex-direction: ${({ theme }) =>
      theme.interfaceDirection === "rtl" ? `column` : `column-reverse`};

    .form-only-filters {
      width: 100%;
    }
+    .general-filters {
+      max-width: 100%;
+    }
  }
 `;

--- a/packages/client/src/pages/FormGallery/Header.js
+++ b/packages/client/src/pages/FormGallery/Header.js
@ -9,7 +9,6 @@ import {
  StyledContainer,
  StyledHeading,
  StyledHeadline,
-  StyledNavigationDrodown,
  StyledSubmitToGalleryButton,
  StyledInfoPanelToggleWrapper,
 } from "./StyledGallery";
@ -17,10 +16,6 @@ import config from "PACKAGE_FILE";
 import FilesFilter from "@docspace/common/api/files/filter";
 import { combineUrl } from "@docspace/common/utils";
 import { getCategoryUrl } from "SRC_DIR/helpers/utils";
-import TriangleNavigationDownReactSvgUrl from "PUBLIC_DIR/images/triangle.navigation.down.react.svg?url";
-import api from "@docspace/common/api";
-import { isMobileOnly } from "react-device-detect";
-import DropDownItem from "@docspace/components/drop-down-item";

 const SectionHeaderContent = ({
  t,
@ -34,9 +29,6 @@ const SectionHeaderContent = ({

  currentCategory,

-  oformsFilter,
-  filterOformsByCategory,
-
  isInfoPanelVisible,
  setIsInfoPanelVisible,

@ -44,11 +36,6 @@ const SectionHeaderContent = ({
 }) => {
  const navigate = useNavigate();

-  const [checkboxOptions, setCheckboxOptions] = useState({
-    fromFolder: null,
-    viewAll: null,
-  });
-
  const onNavigateBack = () => {
    setGallerySelected(null);

@ -68,50 +55,11 @@ const SectionHeaderContent = ({
    );
  };

-  const onViewAllTemplates = () => filterOformsByCategory("", "");
-
  const onOpenSubmitToGalleryDialog = () =>
    setSubmitToGalleryDialogVisible(true);

  const onToggleInfoPanel = () => setIsInfoPanelVisible(!isInfoPanelVisible);

-  useEffect(() => {
-    (async () => {
-      const prevFolder =
-        oformFromFolderId && (await api.files.getFolderInfo(oformFromFolderId));
-
-      if (prevFolder)
-        setCheckboxOptions((prev) => ({
-          ...prev,
-          fromFolder: (
-            <DropDownItem
-              id={"fromFolder"}
-              key={"fromFolder"}
-              label={prevFolder.title}
-              data-key={prevFolder.title}
-              onClick={onNavigateBack}
-            />
-          ),
-        }));
-    })();
-  }, [oformFromFolderId]);
-
-  useEffect(() => {
-    let viewAll = null;
-    if (oformsFilter.categorizeBy && oformsFilter.categoryId)
-      viewAll = (
-        <DropDownItem
-          id={"view-all"}
-          key={"view-all"}
-          label={t("Common:OFORMsGallery")}
-          data-key={"OFORMs gallery"}
-          onClick={onViewAllTemplates}
-        />
-      );
-
-    setCheckboxOptions((prev) => ({ ...prev, viewAll }));
-  }, [oformsFilter.categorizeBy, oformsFilter.categoryId]);
-
  return (
    <StyledContainer isInfoPanelVisible={isInfoPanelVisible}>
      <IconButton
@ -129,25 +77,6 @@ const SectionHeaderContent = ({
        <StyledHeadline type="content" truncate>
          {getCategoryTitle(currentCategory) || t("Common:OFORMsGallery")}
        </StyledHeadline>
-
-        <StyledNavigationDrodown
-          id="oform-header-combobox"
-          comboIcon={TriangleNavigationDownReactSvgUrl}
-          noBorder
-          className="oform-header-combobox not-selectable"
-          options={[]}
-          selectedOption={{}}
-          manualY="42px"
-          manualX="-32px"
-          title={t("Common:TitleSelectFile")}
-          isMobileView={isMobileOnly}
-          advancedOptions={
-            <>
-              {!!checkboxOptions.fromFolder && checkboxOptions.fromFolder}
-              {!!checkboxOptions.viewAll && checkboxOptions.viewAll}
-            </>
-          }
-        />
      </StyledHeading>

      {canSubmitToFormGallery() && (
@ -192,9 +121,6 @@ export default inject(
      currentCategory: oformsStore.currentCategory,
      fetchCurrentCategory: oformsStore.fetchCurrentCategory,

-      oformsFilter: oformsStore.oformsFilter,
-      filterOformsByCategory: oformsStore.filterOformsByCategory,
-
      setGallerySelected: oformsStore.setGallerySelected,

      canSubmitToFormGallery: accessRightsStore.canSubmitToFormGallery,
--- a/packages/client/src/pages/FormGallery/StyledGallery.js
+++ b/packages/client/src/pages/FormGallery/StyledGallery.js
@ -2,7 +2,6 @@ import styled, { css } from "styled-components";

 import { tablet, mobile } from "@docspace/components/utils/device";
 import Headline from "@docspace/common/components/Headline";
-import ComboBox from "@docspace/components/combobox";
 import { Base } from "@docspace/components/themes";
 import { Button } from "@docspace/components";

@ -69,29 +68,21 @@ const StyledHeadline = styled(Headline)`
  width: 100%;
  max-width: min-content;
  font-weight: 700;
-  font-size: 18px;
+  font-size: ${(props) => props.theme.getCorrectFontSize("18px")};
  line-height: 24px;
  box-sizing: border-box;

  @media ${tablet} {
-    font-size: 21px;
+    font-size: ${(props) => props.theme.getCorrectFontSize("21px")};
    line-height: 28px;
  }

  @media ${mobile} {
-    font-size: 18px;
+    font-size: ${(props) => props.theme.getCorrectFontSize("18px")};
    line-height: 24px;
  }
 `;

-const StyledNavigationDrodown = styled(ComboBox)`
-  width: 12px;
-  margin: ${({ theme }) =>
-    theme.interfaceDirection === "rtl" ? "0 4px 0 0 " : "0 0 0 4px"};
-  box-sizing: border-box;
-  background: transparent;
-`;
-
 const StyledSubmitToGalleryButton = styled(Button)`
  ${(props) =>
    props.theme.interfaceDirection === "rtl"
@ -156,7 +147,6 @@ export {
  StyledHeading,
  StyledHeadline,
  StyledContainer,
-  StyledNavigationDrodown,
  StyledSubmitToGalleryButton,
  StyledInfoPanelToggleWrapper,
 };
--- a/packages/client/src/pages/FormGallery/TilesView/StyledTileView.js
+++ b/packages/client/src/pages/FormGallery/TilesView/StyledTileView.js
@ -374,7 +374,7 @@ const StyledTileContainer = styled.div`
          flex-direction: row;
          align-items: center;

-          font-size: 12px;
+          font-size: ${(props) => props.theme.getCorrectFontSize("12px")};
          font-weight: 600;

          color: ${(props) => props.theme.filterInput.sort.tileSortColor};
@ -418,7 +418,7 @@ const truncateCss = css`
 const commonCss = css`
  margin: 0;
  font-family: "Open Sans";
-  font-size: 12px;
+  font-size: ${(props) => props.theme.getCorrectFontSize("12px")};
  font-style: normal;
  font-weight: 600;
 `;
--- a/packages/client/src/pages/FormGallery/TilesView/sub-components/SubmitToGalleryTile.js
+++ b/packages/client/src/pages/FormGallery/TilesView/sub-components/SubmitToGalleryTile.js
@ -37,12 +37,12 @@ export const StyledSubmitToGalleryTile = styled.div`
    .title {
      color: ${({ currentColorScheme }) => currentColorScheme.main.accent};
      font-weight: 600;
-      font-size: 14px;
+      font-size: ${(props) => props.theme.getCorrectFontSize("14px")};
      line-height: 16px;
    }
    .body {
      font-weight: 400;
-      font-size: 12px;
+      font-size: ${(props) => props.theme.getCorrectFontSize("12px")};
      line-height: 16px;
      color: ${({ theme }) => theme.submitToGalleryTile.bodyText};
    }
--- a/packages/client/src/pages/Home/InfoPanel/Body/styles/accounts.js
+++ b/packages/client/src/pages/Home/InfoPanel/Body/styles/accounts.js
@ -73,13 +73,13 @@ const StyledAccountsItemTitle = styled.div`

    .info-text__name {
      font-weight: 700;
-      font-size: 16px;
+      font-size: ${(props) => props.theme.getCorrectFontSize("16px")};
      line-height: 22px;
    }

    .info-text__email {
      font-weight: 600;
-      font-size: 13px;
+      font-size: ${(props) => props.theme.getCorrectFontSize("13px")};
      line-height: 20px;
      color: ${(props) => props.theme.text.disableColor};
      user-select: text;
@ -121,7 +121,7 @@ const StyledAccountContent = styled.div`

    .header__text {
      font-weight: 600;
-      font-size: 14px;
+      font-size: ${(props) => props.theme.getCorrectFontSize("14px")};
      line-height: 16px;
    }
  }
--- a/packages/client/src/pages/Home/InfoPanel/Body/styles/common.js
+++ b/packages/client/src/pages/Home/InfoPanel/Body/styles/common.js
@ -65,7 +65,15 @@ const StyledTitle = styled.div`

  .info_title-icons {
    display: flex;
-    margin-left: auto;
+    ${(props) =>
+      props.theme.interfaceDirection === "rtl"
+        ? css`
+            margin-right: auto;
+          `
+        : css`
+            margin-left: auto;
+          `}
+    /* theme.interfaceDirection */
    gap: 14px;
    .icon {
      cursor: pointer;
@ -99,7 +107,7 @@ const StyledTitle = styled.div`

  .text {
    font-weight: 600;
-    font-size: 16px;
+    font-size: ${(props) => props.theme.getCorrectFontSize("16px")};
    line-height: 22px;
    max-height: 44px;
    margin: 0 8px;
@ -111,7 +119,7 @@ const StyledTitle = styled.div`
  }

  .free-label {
-    font-size: 14px;
+    font-size: ${(props) => props.theme.getCorrectFontSize("14px")};
    font-weight: 600;
    line-height: 16px;

@ -182,7 +190,7 @@ const StyledLink = styled.div`

  a,
  .link {
-    font-size: 13px;
+    font-size: ${(props) => props.theme.getCorrectFontSize("13px")};
    font-weight: 600;
    line-height: 15px;
  }
@ -210,14 +218,14 @@ const StyledProperties = styled.div`
    grid-column-gap: 24px;

    .property-title {
-      font-size: 13px;
+      font-size: ${(props) => props.theme.getCorrectFontSize("13px")};
    }

    .property-content {
      max-width: 100%;
      margin: auto 0;
      font-weight: 600;
-      font-size: 13px;
+      font-size: ${(props) => props.theme.getCorrectFontSize("13px")};
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
--- a/packages/client/src/pages/Home/InfoPanel/Body/styles/details.js
+++ b/packages/client/src/pages/Home/InfoPanel/Body/styles/details.js
@ -37,7 +37,7 @@ const StyledNoThumbnail = styled.div`
  }

  .room-title {
-    font-size: 41px;
+    font-size: ${(props) => props.theme.getCorrectFontSize("41px")};
    font-weight: 700;
    line-height: 56px;
  }
--- a/packages/client/src/pages/Home/InfoPanel/Body/styles/gallery.js
+++ b/packages/client/src/pages/Home/InfoPanel/Body/styles/gallery.js
@ -31,7 +31,7 @@ const StyledGalleryNoThumbnail = styled.div`
 `;

 const StyledGalleryFormDescription = styled.div`
-  font-size: 13px;
+  font-size: ${(props) => props.theme.getCorrectFontSize("13px")};
  font-weight: 400;
  line-height: 20px;
  color: ${(props) => props.theme.infoPanel.gallery.descriptionColor};
--- a/packages/client/src/pages/Home/InfoPanel/Body/styles/history.js
+++ b/packages/client/src/pages/Home/InfoPanel/Body/styles/history.js
@ -15,7 +15,7 @@ const StyledHistorySubtitle = styled.div`

  padding: 8px 0 12px;
  font-weight: 600;
-  font-size: 13px;
+  font-size: ${(props) => props.theme.getCorrectFontSize("13px")};
  line-height: 20px;
  color: ${(props) => props.theme.infoPanel.history.subtitleColor};
 `;
@ -27,7 +27,7 @@ const StyledUserNameLink = styled.span`
  margin: 1px 0;

  .username {
-    font-size: 13px;
+    font-size: ${(props) => props.theme.getCorrectFontSize("13px")};
    font-weight: 600;
    display: inline-block;
  }
@ -73,7 +73,7 @@ const StyledHistoryBlock = styled.div`
      gap: 4px;
      .name {
        font-weight: 600;
-        font-size: 14px;
+        font-size: ${(props) => props.theme.getCorrectFontSize("14px")};
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
@ -90,7 +90,7 @@ const StyledHistoryBlock = styled.div`
                margin-left: auto;
              `}
        font-weight: 600;
-        font-size: 12px;
+        font-size: ${(props) => props.theme.getCorrectFontSize("12px")};
        color: ${(props) => props.theme.infoPanel.history.dateColor};
      }
    }
@ -119,7 +119,7 @@ const StyledHistoryBlock = styled.div`

 const StyledHistoryBlockMessage = styled.div`
  font-weight: 400;
-  font-size: 13px;
+  font-size: ${(props) => props.theme.getCorrectFontSize("13px")};
  line-height: 20px;

  display: flex;
@ -169,7 +169,7 @@ const StyledHistoryBlockFilesList = styled.div`
            margin: 10px 0 3px 20px;
          `}
    font-weight: 400;
-    font-size: 13px;
+    font-size: ${(props) => props.theme.getCorrectFontSize("13px")};
    line-height: 15px;

    strong {
@ -200,7 +200,7 @@ const StyledHistoryBlockFile = styled.div`

  .item-title {
    font-weight: 600;
-    font-size: 14px;
+    font-size: ${(props) => props.theme.getCorrectFontSize("14px")};
    display: flex;
    min-width: 0;
    gap: 0;
--- a/packages/client/src/pages/Home/InfoPanel/Body/styles/members.js
+++ b/packages/client/src/pages/Home/InfoPanel/Body/styles/members.js
@ -11,7 +11,7 @@ const StyledUserTypeHeader = styled.div`

  .title {
    font-weight: 600;
-    font-size: 14px;
+    font-size: ${(props) => props.theme.getCorrectFontSize("14px")};
    line-height: 20px;
    color: ${(props) => props.theme.infoPanel.members.subtitleColor};
  }
@ -39,7 +39,7 @@ const StyledUser = styled.div`

  .name {
    font-weight: 600;
-    font-size: 14px;
+    font-size: ${(props) => props.theme.getCorrectFontSize("14px")};
    line-height: 16px;
    white-space: nowrap;
    overflow: hidden;
@ -50,7 +50,7 @@ const StyledUser = styled.div`

  .me-label {
    font-weight: 600;
-    font-size: 14px;
+    font-size: ${(props) => props.theme.getCorrectFontSize("14px")};
    line-height: 16px;
    color: ${(props) => props.theme.infoPanel.members.meLabelColor};
    ${(props) =>
@ -78,7 +78,7 @@ const StyledUser = styled.div`
          `}

    font-weight: 600;
-    font-size: 13px;
+    font-size: ${(props) => props.theme.getCorrectFontSize("13px")};
    line-height: 20px;
    white-space: nowrap;

--- a/packages/client/src/pages/Home/InfoPanel/Body/styles/noItem.js
+++ b/packages/client/src/pages/Home/InfoPanel/Body/styles/noItem.js
@ -1,7 +1,7 @@
 import styled, { css } from "styled-components";

 const StyledNoItemContainer = styled.div`
-  ${props =>
+  ${(props) =>
    props.theme.interfaceDirection === "rtl"
      ? css`
          margin: 80px 0 0 auto;
@ -17,14 +17,14 @@ const StyledNoItemContainer = styled.div`

  .no-item-text {
    font-weight: 600;
-    font-size: 14px;
+    font-size: ${(props) => props.theme.getCorrectFontSize("14px")};
    line-height: 16px;
    text-align: center;
  }

  .no-history-text {
    font-weight: 700;
-    font-size: 16px;
+    font-size: ${(props) => props.theme.getCorrectFontSize("16px")};
    line-height: 22px;
    text-align: center;
  }
--- a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Rooms/index.js
+++ b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Rooms/index.js
@ -113,7 +113,7 @@ export default inject(({ auth, dialogsStore, selectedFolderStore }) => {

  return {
    selection,
-    roomsView: auth.infoPanelStore.roomType,
+    roomsView,
    selectionParentRoom: auth.infoPanelStore.selectionParentRoom,
    setIsMobileHidden: auth.infoPanelStore.setIsMobileHidden,

--- a/packages/client/src/pages/Home/InfoPanel/Body/views/Members/index.js
+++ b/packages/client/src/pages/Home/InfoPanel/Body/views/Members/index.js
@ -264,8 +264,11 @@ const Members = ({
  };

  const publicRoomItems = [];
+  const withPublicRoomBlock =
+    selectionParentRoom?.access === ShareAccessRights.RoomManager ||
+    selectionParentRoom?.access === ShareAccessRights.None;

-  if (isPublicRoomType) {
+  if (isPublicRoomType && withPublicRoomBlock) {
    if (!isArchiveFolder || primaryLink) {
      publicRoomItems.push(
        <LinksBlock key="general-link_header">
@ -373,7 +376,8 @@ const Members = ({
    }
  }

-  const showPublicRoomBar = (primaryLink && !isArchiveFolder) || isPublicRoom;
+  const showPublicRoomBar =
+    ((primaryLink && !isArchiveFolder) || isPublicRoom) && withPublicRoomBlock;

  return (
    <>
--- a/packages/client/src/pages/Home/InfoPanel/Body/views/Members/sub-components/LinkRow.js
+++ b/packages/client/src/pages/Home/InfoPanel/Body/views/Members/sub-components/LinkRow.js
@ -20,6 +20,7 @@ import LoadedReactSvgUrl from "PUBLIC_DIR/images/loaded.react.svg?url";
 import TrashReactSvgUrl from "PUBLIC_DIR/images/trash.react.svg?url";
 import ClockReactSvg from "PUBLIC_DIR/images/clock.react.svg";
 import moment from "moment";
+import { RoomsType } from "@docspace/common/constants";

 import { StyledLinkRow } from "./StyledPublicRoom";

@ -37,6 +38,7 @@ const LinkRow = (props) => {
    isArchiveFolder,
    theme,
    setIsScrollLocked,
+    isPublicRoomType,
    ...rest
  } = props;

@ -139,12 +141,12 @@ const LinkRow = (props) => {
      //   icon: ShareReactSvgUrl,
      //   // onClick: () => args.onClickLabel("label2"),
      // },
-      !isExpired && {
-        key: "embedding-settings-key",
-        label: t("Files:EmbeddingSettings"),
-        icon: CodeReactSvgUrl,
-        onClick: onEmbeddingClick,
-      },
+      // !isExpired && {
+      //   key: "embedding-settings-key",
+      //   label: t("Files:EmbeddingSettings"),
+      //   icon: CodeReactSvgUrl,
+      //   onClick: onEmbeddingClick,
+      // },

      !disabled && {
        key: "copy-link-settings-key",
@ -173,8 +175,12 @@ const LinkRow = (props) => {
      },
      {
        key: "delete-link-key",
-        label: t("Common:Delete"),
-        icon: TrashReactSvgUrl,
+        label:
+          primary && isPublicRoomType
+            ? t("Files:RevokeLink")
+            : t("Common:Delete"),
+        icon:
+          primary && isPublicRoomType ? OutlineReactSvgUrl : TrashReactSvgUrl,
        onClick: onDeleteLink,
      },
    ];
@ -273,6 +279,7 @@ export default inject(
      setEmbeddingPanelIsVisible,
      isArchiveFolder: isArchiveFolderRoot,
      theme,
+      isPublicRoomType: selectionParentRoom.roomType === RoomsType.PublicRoom,
    };
  }
 )(
--- a/packages/client/src/pages/Home/InfoPanel/Body/views/Members/sub-components/StyledPublicRoom.js
+++ b/packages/client/src/pages/Home/InfoPanel/Body/views/Members/sub-components/StyledPublicRoom.js
@ -7,7 +7,7 @@ const StyledPublicRoomBar = styled.div`
  display: flex;
  background-color: ${(props) => props.theme.infoBlock.background};
  color: #333;
-  font-size: 12px;
+  font-size: ${(props) => props.theme.getCorrectFontSize("12px")};
  padding: 12px 16px;
  border-radius: 6px;
  margin-bottom: 10px;
--- a/packages/client/src/pages/Home/InfoPanel/Body/views/NoItem/NoGalleryItem.js
+++ b/packages/client/src/pages/Home/InfoPanel/Body/views/NoItem/NoGalleryItem.js
@ -10,7 +10,7 @@ const StyledGalleryEmptyScreen = styled.div`
  }

  .info-panel_gallery-empty-screen-text {
-    font-size: 16px;
+    font-size: ${(props) => props.theme.getCorrectFontSize("16px")};
    font-weight: 700;
    line-height: 22px;
    text-align: center;
--- a/packages/client/src/pages/Home/Section/AccountsBody/RowView/PeopleRowContainer.js
+++ b/packages/client/src/pages/Home/Section/AccountsBody/RowView/PeopleRowContainer.js
@ -2,7 +2,7 @@ import React from "react";
 import { inject, observer } from "mobx-react";
 import styled, { css } from "styled-components";

-import { useViewEffect } from "@docspace/common/hooks";
+import useViewEffect from "SRC_DIR/Hooks/useViewEffect";

 import RowContainer from "@docspace/components/row-container";
 import { tablet } from "@docspace/components/utils/device";
--- a/packages/client/src/pages/Home/Section/AccountsBody/TableView/TableContainer.js
+++ b/packages/client/src/pages/Home/Section/AccountsBody/TableView/TableContainer.js
@ -3,7 +3,7 @@ import { inject, observer } from "mobx-react";
 import styled, { css } from "styled-components";
 import { useNavigate, useLocation } from "react-router-dom";

-import { useViewEffect } from "@docspace/common/hooks";
+import useViewEffect from "SRC_DIR/Hooks/useViewEffect";

 import { Base } from "@docspace/components/themes";
 import TableContainer from "@docspace/components/table-container";
@ -54,6 +54,18 @@ const contextCss = css`
 `;

 const StyledTableContainer = styled(TableContainer)`
+  :has(
+      .table-container_body
+        .table-list-item:first-child:first-child
+        > .table-row-selected
+    ) {
+    .table-container_header {
+      border-image-slice: 1;
+      border-image-source: ${(props) =>
+        props.theme.tableContainer.header.lengthenBorderImageSource};
+    }
+  }
+
  .table-row-selected {
    .table-container_user-name-cell {
      ${userNameCss}
--- a/packages/client/src/pages/Home/Section/AccountsBody/TableView/TableRow.js
+++ b/packages/client/src/pages/Home/Section/AccountsBody/TableView/TableRow.js
@ -170,7 +170,7 @@ const StyledPeopleRow = styled(TableRow)`
            `}

      .combo-button-label {
-        font-size: 13px;
+        font-size: ${(props) => props.theme.getCorrectFontSize("13px")};
        font-weight: 600;
      }
    }
--- a/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContainer.js
+++ b/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContainer.js
@ -1,8 +1,8 @@
 import styled from "styled-components";
-import React, { useMemo } from "react";
+import { useMemo } from "react";
 import { inject, observer } from "mobx-react";

-import { useViewEffect } from "@docspace/common/hooks";
+import useViewEffect from "SRC_DIR/Hooks/useViewEffect";

 import { Base } from "@docspace/components/themes";
 import RowContainer from "@docspace/components/row-container";
--- a/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContent.js
+++ b/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContent.js
@ -76,7 +76,8 @@ const SimpleFilesRowContent = styled(RowContent)`
        : css`
            padding: 12px 12px 0px 0px;
          `}
-    margin-top: -12px;
+    margin-top: ${(props) =>
+      props.theme.interfaceDirection === "rtl" ? "-14px" : "-12px"}
  }

  @media ${tablet} {
--- a/packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js
+++ b/packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js
@ -409,7 +409,7 @@ const StyledBadgesContainer = styled.div`
            `}
      p {
        letter-spacing: 0.5px;
-        font-size: 9px;
+        font-size: ${(props) => props.theme.getCorrectFontSize("9px")};
        font-weight: 800;
      }
    }
--- a/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js
+++ b/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js
@ -4,13 +4,11 @@ import { useNavigate, useLocation } from "react-router-dom";
 import elementResizeDetectorMaker from "element-resize-detector";
 import React, { useEffect, useRef, useCallback, useMemo } from "react";

-import { DeviceType } from "@docspace/common/constants";
-import { useViewEffect } from "@docspace/common/hooks";
+import useViewEffect from "SRC_DIR/Hooks/useViewEffect";

 import { Base } from "@docspace/components/themes";
 import TableContainer from "@docspace/components/table-container";
 import TableBody from "@docspace/components/table-container/TableBody";
-import { isTablet, isMobile } from "@docspace/components/utils/device";

 import TableRow from "./TableRow";
 import TableHeader from "./TableHeader";
--- a/packages/client/src/pages/Home/Section/Body/TilesView/FilesTileContent.js
+++ b/packages/client/src/pages/Home/Section/Body/TilesView/FilesTileContent.js
@ -91,7 +91,7 @@ const SimpleFilesTileContent = styled(TileContent)`
    isRooms &&
    css`
      .item-file-name {
-        font-size: 16px;
+        font-size: ${(props) => props.theme.getCorrectFontSize("16px")};
      }
    `}

--- a/Show More
+++ b/Show More