Merge branch 'feature/virtual-rooms-1.2' of https://github.com/ONLYOFFICE/AppServer into feature/virtual-rooms-1.2

2022-03-29 11:52:43 +03:00 · 2022-03-29 11:52:43 +03:00 · 357bfc216f
commit 357bfc216f
parent bd6753df91 1129f0b509
42 changed files with 413 additions and 365 deletions
--- a/config/kafka.json
+++ b/config/kafka.json
@ -1,5 +1,5 @@
 {
-	"kafka": {
-		"BootstrapServers": "localhost:9092"
-	}
-}
+  "kafka": {
+    "BootstrapServers": ""
+  }
+}
--- a/packages/asc-web-common/components/Article/index.js
+++ b/packages/asc-web-common/components/Article/index.js
@ -19,7 +19,7 @@ import { StyledArticle } from "./styled-article";

 const enable = {
  top: false,
-  right: !isMobile,
+  right: false,
  bottom: false,
  left: false,
 };
--- a/packages/asc-web-common/components/Article/styled-article.js
+++ b/packages/asc-web-common/components/Article/styled-article.js
@ -20,11 +20,6 @@ const StyledArticle = styled.article`

  background: ${(props) => props.theme.catalog.background};

-  ${isMobile &&
-  css`
-    margin-top: 48px;
-  `}
-
  @media ${mobile} {
    position: fixed;
    margin-top: 16px;
--- a/packages/asc-web-common/components/Section/sub-components/section-body.js
+++ b/packages/asc-web-common/components/Section/sub-components/section-body.js
@ -177,7 +177,7 @@ class SectionBody extends React.Component {
        className="section-body"
      >
        {withScroll ? (
-          !isMobile ? (
+          !isMobileOnly ? (
            <Scrollbar scrollclass="section-scroll" stype="mediumBlack">
              <div className="section-wrapper">
                <div className="section-wrapper-content" {...focusProps}>
@ -210,7 +210,7 @@ class SectionBody extends React.Component {
        isDesktop={isDesktop}
      >
        {withScroll ? (
-          !isMobile ? (
+          !isMobileOnly ? (
            <Scrollbar stype="mediumBlack">
              <div className="section-wrapper">
                <div className="section-wrapper-content" {...focusProps}>
--- a/packages/asc-web-common/components/Section/sub-components/section-header.js
+++ b/packages/asc-web-common/components/Section/sub-components/section-header.js
@ -24,7 +24,6 @@ const StyledSectionHeader = styled.div`
  ${isMobile &&
  css`
    height: 61px !important;
-    margin-top: 48px !important;
    margin-right: 0px !important;
  `}

--- a/packages/asc-web-components/avatar/index.js
+++ b/packages/asc-web-components/avatar/index.js
@ -55,9 +55,12 @@ Initials.propTypes = {
 const Avatar = (props) => {
  //console.log("Avatar render");
  const { size, source, userName, role, editing, editAction } = props;
+  let isDefault = false;
+
+  if (source.includes("default_user_photo")) isDefault = true;

  const avatarContent = source ? (
-    <StyledImage src={source} />
+    <StyledImage src={source} isDefault={isDefault} />
  ) : userName ? (
    <Initials userName={userName} size={size} />
  ) : (
--- a/packages/asc-web-components/avatar/styled-avatar.js
+++ b/packages/asc-web-components/avatar/styled-avatar.js
@ -101,8 +101,8 @@ const StyledImage = styled.img`
  width: ${(props) => props.theme.avatar.image.width};
  height: ${(props) => props.theme.avatar.image.height};
  border-radius: ${(props) => props.theme.avatar.image.borderRadius};
-
-  ${NoUserSelect}
+  content: ${(props) => props.isDefault && props.theme.avatar.defaultImage};
+  ${NoUserSelect};
 `;
 StyledImage.defaultProps = { theme: Base };

--- a/packages/asc-web-components/table-container/StyledTableContainer.js
+++ b/packages/asc-web-components/table-container/StyledTableContainer.js
@ -7,7 +7,7 @@ import { isMobile } from "react-device-detect";
 const StyledTableContainer = styled.div`
  -moz-user-select: none;

-  width: 100%;
+  width: calc(100% - 5px);
  max-width: 100%;
  margin-top: -19px;

--- a/packages/asc-web-components/themes/base.js
+++ b/packages/asc-web-components/themes/base.js
@ -985,6 +985,7 @@ const Base = {
  },

  avatar: {
+    defaultImage: `url("/static/images/avatar.base.react.svg")`,
    initialsContainer: {
      color: white,
      left: "50%",
@ -2059,7 +2060,7 @@ const Base = {
      activeIconColor: grayMain,
      hoverIconColor: grayMain,

-      borderImageSource: `linear-gradient(to right,${white} 24px,${grayLightMid} 24px,${grayLightMid} calc(100% - 24px),${white} calc(100% - 24px))`,
+      borderImageSource: `linear-gradient(to right,${white} 21px,${grayLightMid} 21px,${grayLightMid} calc(100% - 20px),${white} calc(100% - 20px))`,
    },

    tableCell: {
@ -2112,8 +2113,8 @@ const Base = {
        shareHoverColor: "#3b72a7",

        borderImageRight:
-          "linear-gradient(to right, #ffffff 17px,#eceef1 31px)",
-        borderImageLeft: "linear-gradient(to left, #ffffff 17px,#eceef1 31px)",
+          "linear-gradient(to right, #ffffff 25px,#eceef1 24px)",
+        borderImageLeft: "linear-gradient(to left, #ffffff 20px,#eceef1 24px)",

        borderColor: "#ECEEf1",
        borderColorTransition: "#f3f4f4",
--- a/packages/asc-web-components/themes/dark.js
+++ b/packages/asc-web-components/themes/dark.js
@ -983,6 +983,7 @@ const Dark = {
  },

  avatar: {
+    defaultImage: `url("/static/images/avatar.dark.react.svg")`,
    initialsContainer: {
      color: white,
      left: "50%",
@ -1592,7 +1593,7 @@ const Dark = {
    contentPadding: "10px 0px 0px 0px",
    arrowMargin: "4px 8px 4px 0px",
    transform: "rotate(180deg)",
-    iconColor: black,
+    iconColor: white,

    childrenContent: {
      color: black,
@ -2063,7 +2064,7 @@ const Dark = {
      activeIconColor: "#858585",
      hoverIconColor: grayMaxLight,

-      borderImageSource: `linear-gradient(to right,${black} 24px,#474747 24px,#474747 calc(100% - 24px),${black} calc(100% - 24px))`,
+      borderImageSource: `linear-gradient(to right,${black} 21px,#474747 21px,#474747 calc(100% - 20px),${black} calc(100% - 20px))`,
    },

    tableCell: {
@ -2122,8 +2123,8 @@ const Dark = {
        shareHoverColor: "#eeeeee",

        borderImageRight:
-          "linear-gradient(to right, #333333 17px, #474747 31px)",
-        borderImageLeft: "linear-gradient(to left, #333333 17px, #474747 31px)",
+          "linear-gradient(to right, #333333 25px, #474747 24px)",
+        borderImageLeft: "linear-gradient(to left, #333333 20px, #474747 24px)",

        borderColor: "#858585",
        borderColorTransition: "#474747",
--- a/products/ASC.Files/Client/public/images/icons/24/folder.svg
+++ b/products/ASC.Files/Client/public/images/icons/24/folder.svg
@ -1,4 +1,4 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M4 4C3.44772 4 3 4.44775 3 5V9C3 8.44775 3.44772 8 4 8H21C21.5523 8 22 8.44775 22 9V8C22 7.44775 21.5523 7 21 7H11V5C11 4.44775 10.5523 4 10 4H4Z" fill="#788790"/>
-<rect x="3" y="8" width="19" height="12" rx="1" fill="#B2BBC0"/>
+<rect x="3" y="7" width="23" height="14" rx="2" fill="#B2BBC0"/>
 </svg>
--- a/products/ASC.Files/Client/public/images/icons/24/folder/box.svg
+++ b/products/ASC.Files/Client/public/images/icons/24/folder/box.svg
@ -1,6 +1,6 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect y="7" width="23" height="14" rx="2" fill="#B2BBC0"/>
-<path d="M2 2C0.895447 2 0 2.89551 0 4V9C0 7.89551 0.895447 7 2 7H21C22.1046 7 23 7.89551 23 9V7C23 5.89551 22.1046 5 21 5H10V4C10 2.89551 9.10455 2 8 2H2Z" fill="#788790"/>
+<rect x="3" y="7" width="23" height="14" rx="2" fill="#B2BBC0"/>
+<path d="M4 4C3.44772 4 3 4.44775 3 5V9C3 8.44775 3.44772 8 4 8H21C21.5523 8 22 8.44775 22 9V8C22 7.44775 21.5523 7 21 7H11V5C11 4.44775 10.5523 4 10 4H4Z" fill="#788790"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M11 16.5V20.5C11 21.8807 12.1193 23 13.5 23C14.3178 23 15.0439 22.6073 15.5 22.0002C15.9561 22.6073 16.6822 23 17.5 23C18.8807 23 20 21.8807 20 20.5C20 19.1193 18.8807 18 17.5 18C16.6822 18 15.9561 18.3927 15.5 18.9998C15.0439 18.3927 14.3178 18 13.5 18C12.9372 18 12.4178 18.186 12 18.4998V16.5C12 16.2239 11.7761 16 11.5 16C11.2239 16 11 16.2239 11 16.5ZM15 20.5C15 21.3284 14.3284 22 13.5 22C12.6716 22 12 21.3284 12 20.5C12 19.6716 12.6716 19 13.5 19C14.3284 19 15 19.6716 15 20.5ZM19 20.5C19 21.3284 18.3284 22 17.5 22C16.6716 22 16 21.3284 16 20.5C16 19.6716 16.6716 19 17.5 19C18.3284 19 19 19.6716 19 20.5Z" fill="#0071F7"/>
 <path d="M23.1 18.2C23.1912 18.0785 23.3364 18 23.5 18C23.7761 18 24 18.2239 24 18.5C24 18.6152 23.961 18.7213 23.8956 18.8059L22.625 20.5L23.8996 22.1994C23.9626 22.2831 24 22.3872 24 22.5C24 22.7761 23.7761 23 23.5 23C23.3336 23 23.1861 22.9187 23.0952 22.7936L22 21.3333L20.9049 22.7935C20.814 22.9186 20.6665 23 20.5 23C20.2239 23 20 22.7761 20 22.5C20 22.3874 20.0372 22.2835 20.1 22.2L21.375 20.5L20.1044 18.8058C20.0389 18.7212 20 18.6152 20 18.5C20 18.2239 20.2239 18 20.5 18C20.6641 18 20.8098 18.0791 20.9009 18.2012L22 19.6666L23.1 18.2Z" fill="#0071F7"/>
 </svg>
--- a/products/ASC.Files/Client/public/images/icons/24/folder/dropbox.svg
+++ b/products/ASC.Files/Client/public/images/icons/24/folder/dropbox.svg
@ -1,6 +1,6 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect y="7" width="23" height="14" rx="2" fill="#B2BBC0"/>
+<rect x="3" y="7" width="23" height="14" rx="2" fill="#B2BBC0"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M15 12L12 14L15 16L12 18L15 20L18 18L21 20L24 18L21 16L24 14L21 12L18 14L15 12ZM18 14L21 16L18 18L15 16L18 14Z" fill="#0061FF"/>
 <path d="M15 21L18 19L21 21L18 23L15 21Z" fill="#0061FF"/>
-<path d="M2 2C0.895447 2 0 2.89551 0 4V9C0 7.89551 0.895447 7 2 7H21C22.1046 7 23 7.89551 23 9V7C23 5.89551 22.1046 5 21 5H10V4C10 2.89551 9.10455 2 8 2H2Z" fill="#788790"/>
+<path d="M4 4C3.44772 4 3 4.44775 3 5V9C3 8.44775 3.44772 8 4 8H21C21.5523 8 22 8.44775 22 9V8C22 7.44775 21.5523 7 21 7H11V5C11 4.44775 10.5523 4 10 4H4Z" fill="#788790"/>
 </svg>
--- a/products/ASC.Files/Client/public/images/icons/24/folder/google.svg
+++ b/products/ASC.Files/Client/public/images/icons/24/folder/google.svg
@ -1,6 +1,6 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect y="7" width="23" height="14" rx="2" fill="#B2BBC0"/>
-<path d="M2 2C0.895447 2 0 2.89551 0 4V9C0 7.89551 0.895447 7 2 7H21C22.1046 7 23 7.89551 23 9V7C23 5.89551 22.1046 5 21 5H10V4C10 2.89551 9.10455 2 8 2H2Z" fill="#788790"/>
+<rect x="3" y="7" width="23" height="14" rx="2" fill="#B2BBC0"/>
+<path d="M4 4C3.44772 4 3 4.44775 3 5V9C3 8.44775 3.44772 8 4 8H21C21.5523 8 22 8.44775 22 9V8C22 7.44775 21.5523 7 21 7H11V5C11 4.44775 10.5523 4 10 4H4Z" fill="#788790"/>
 <path d="M20.7189 14H20.6969L20.7079 14.02L20.7189 14Z" fill="#00AC47"/>
 <path d="M18.9962 17.1336L17.4203 20H14V19.9941L17.2844 14.0199L18.9962 17.1336Z" fill="#00AC47"/>
 <path d="M17.4203 20H14L15.771 23L17.4203 20Z" fill="#0066DA"/>
--- a/products/ASC.Files/Client/public/images/icons/24/folder/kdrive.svg
+++ b/products/ASC.Files/Client/public/images/icons/24/folder/kdrive.svg
@ -1,7 +1,7 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0)">
-<rect y="7" width="23" height="14" rx="2" fill="#B2BBC0"/>
-<path d="M2 2C0.895447 2 0 2.89551 0 4V9C0 7.89551 0.895447 7 2 7H21C22.1046 7 23 7.89551 23 9V7C23 5.89551 22.1046 5 21 5H10V4C10 2.89551 9.10455 2 8 2H2Z" fill="#788790"/>
+<rect x="3" y="7" width="23" height="14" rx="2" fill="#B2BBC0"/>
+<path d="M4 4C3.44772 4 3 4.44775 3 5V9C3 8.44775 3.44772 8 4 8H21C21.5523 8 22 8.44775 22 9V8C22 7.44775 21.5523 7 21 7H11V5C11 4.44775 10.5523 4 10 4H4Z" fill="#788790"/>
 <path opacity="0.504232" fill-rule="evenodd" clip-rule="evenodd" d="M17.765 12.6343L18.6906 13.0212C18.8322 13.0805 18.9417 13.1975 18.9914 13.3428L19.3594 14.4184C19.4187 14.5916 19.5621 14.7226 19.7398 14.7661L23.5907 15.708C23.831 15.7667 24 15.9821 24 16.2294V20.7227C24 21.0192 23.7596 21.2595 23.4632 21.2595C23.4096 21.2595 23.3564 21.2515 23.3053 21.2358L17.4001 19.4188C17.1748 19.3495 17.0211 19.1414 17.0211 18.9057V13.1296C17.0211 12.8331 17.2615 12.5928 17.558 12.5928C17.629 12.5928 17.6994 12.6069 17.765 12.6343Z" fill="#D0DFFF"/>
 <path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M16.4229 13.709L17.3484 14.0959C17.4901 14.1552 17.5996 14.2722 17.6493 14.4175L18.0173 15.4931C18.0765 15.6663 18.2199 15.7974 18.3977 15.8408L22.2485 16.7827C22.4888 16.8414 22.6578 17.0568 22.6578 17.3041V21.7974C22.6578 22.0939 22.4175 22.3342 22.121 22.3342C22.0675 22.3342 22.0143 22.3262 21.9631 22.3105L16.0579 20.4935C15.8327 20.4242 15.679 20.2161 15.679 19.9804V14.2043C15.679 13.9078 15.9193 13.6675 16.2158 13.6675C16.2869 13.6675 16.3573 13.6816 16.4229 13.709Z" fill="#B3CAFF"/>
 <path opacity="0.8" d="M21.3158 20.6241L22.6579 21.037V17.3035C22.6579 17.0562 22.4889 16.8408 22.2486 16.7821L18.3977 15.8402C18.22 15.7968 18.0766 15.6657 18.0173 15.4925L17.6493 14.4169C17.5996 14.2716 17.4901 14.1546 17.3485 14.0953L17.0211 13.9585V16.7432C17.0325 16.7468 17.044 16.75 17.0557 16.7529L20.9065 17.6947C21.1468 17.7535 21.3158 17.9688 21.3158 18.2162V20.6241Z" fill="#AAC4FF"/>
--- a/products/ASC.Files/Client/public/images/icons/24/folder/nextcloud.svg
+++ b/products/ASC.Files/Client/public/images/icons/24/folder/nextcloud.svg
@ -1,5 +1,5 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect y="7" width="23" height="14" rx="2" fill="#B2BBC0"/>
-<path d="M2 2C0.895447 2 0 2.89551 0 4V9C0 7.89551 0.895447 7 2 7H21C22.1046 7 23 7.89551 23 9V7C23 5.89551 22.1046 5 21 5H10V4C10 2.89551 9.10455 2 8 2H2Z" fill="#788790"/>
+<rect x="3" y="7" width="23" height="14" rx="2" fill="#B2BBC0"/>
+<path d="M4 4C3.44772 4 3 4.44775 3 5V9C3 8.44775 3.44772 8 4 8H21C21.5523 8 22 8.44775 22 9V8C22 7.44775 21.5523 7 21 7H11V5C11 4.44775 10.5523 4 10 4H4Z" fill="#788790"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M18 23C19.1298 23 20.1138 22.3755 20.6254 21.4528C20.9838 21.792 21.4676 22 22 22C23.1046 22 24 21.1046 24 20C24 18.8954 23.1046 18 22 18C21.4676 18 20.9838 18.208 20.6254 18.5472C20.1138 17.6245 19.1298 17 18 17C16.8702 17 15.8862 17.6245 15.3746 18.5472C15.0162 18.208 14.5324 18 14 18C12.8954 18 12 18.8954 12 20C12 21.1046 12.8954 22 14 22C14.5324 22 15.0162 21.792 15.3746 21.4528C15.8862 22.3755 16.8702 23 18 23ZM18 22C19.1046 22 20 21.1046 20 20C20 18.8954 19.1046 18 18 18C16.8954 18 16 18.8954 16 20C16 21.1046 16.8954 22 18 22ZM14 21C14.5523 21 15 20.5523 15 20C15 19.4477 14.5523 19 14 19C13.4477 19 13 19.4477 13 20C13 20.5523 13.4477 21 14 21ZM23 20C23 20.5523 22.5523 21 22 21C21.4477 21 21 20.5523 21 20C21 19.4477 21.4477 19 22 19C22.5523 19 23 19.4477 23 20Z" fill="#0082C9"/>
 </svg>
--- a/products/ASC.Files/Client/public/images/icons/24/folder/onedrive.svg
+++ b/products/ASC.Files/Client/public/images/icons/24/folder/onedrive.svg
@ -1,8 +1,8 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect y="7" width="23" height="14" rx="2" fill="#B2BBC0"/>
+<rect x="3" y="7" width="23" height="14" rx="2" fill="#B2BBC0"/>
 <path d="M16.5758 17.4462C16.0916 17.1458 15.5301 16.9928 14.9615 16.9995C13.3055 17.02 11.9797 18.3813 12.0002 20.04C12.0077 20.6417 12.2074 21.2721 12.551 21.7656L19.0002 19L16.5758 17.4462Z" fill="#0078D4"/>
 <path d="M12.5392 21.7602C13.0995 22.5671 14.0188 23.048 15.0001 23.0475H21.5623C22.4587 23.0477 23.2829 22.555 23.7082 21.7646L19.0002 19L12.5392 21.7602Z" fill="#28A8EA"/>
 <path d="M21.9992 18.0007C21.1379 17.9999 19.7728 18.6745 19.0002 19L23.7082 21.7645C24.6284 19.4091 22.9935 18.352 21.9992 18.0007Z" fill="#1490DF"/>
 <path d="M22.0005 18.0012L22.0041 18C21.565 16.2849 20.0002 15 18.5002 15C16.5006 15 15.681 15.9698 15.0045 16.9993C15.5583 17.0006 16.1038 17.1533 16.5758 17.4462L19.0002 19C19.1261 18.9469 19.2678 18.8846 19.4206 18.8174C20.2045 18.4725 21.2783 18 21.9992 18.0007L22.0005 18.0012Z" fill="#0364B8"/>
-<path d="M2 2C0.895447 2 0 2.89551 0 4V9C0 7.89551 0.895447 7 2 7H21C22.1046 7 23 7.89551 23 9V7C23 5.89551 22.1046 5 21 5H10V4C10 2.89551 9.10455 2 8 2H2Z" fill="#788790"/>
+<path d="M4 4C3.44772 4 3 4.44775 3 5V9C3 8.44775 3.44772 8 4 8H21C21.5523 8 22 8.44775 22 9V8C22 7.44775 21.5523 7 21 7H11V5C11 4.44775 10.5523 4 10 4H4Z" fill="#788790"/>
 </svg>
--- a/products/ASC.Files/Client/public/images/icons/24/folder/owncloud.svg
+++ b/products/ASC.Files/Client/public/images/icons/24/folder/owncloud.svg
@ -1,5 +1,5 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect y="7" width="23" height="14" rx="2" fill="#B2BBC0"/>
+<rect x="3" y="7" width="23" height="14" rx="2" fill="#B2BBC0"/>
 <path d="M15.1999 18.6001C15.0744 18.4331 15 18.2251 15 18C15 17.4478 15.4477 17 16 17C16.5523 17 17 17.4478 17 18C16.3246 18 15.7013 18.2236 15.1999 18.6001Z" fill="#1D2D44"/>
 <path d="M12.5 19C12.7761 19 13 18.7764 13 18.5C13 18.2236 12.7761 18 12.5 18C12.2239 18 12 18.2236 12 18.5C12 18.7764 12.2239 19 12.5 19Z" fill="#1D2D44"/>
 <path d="M13 22C13 22.5522 12.5523 23 12 23C11.4477 23 11 22.5522 11 22C11 21.4478 11.4477 21 12 21C12.5523 21 13 21.4478 13 22Z" fill="#1D2D44"/>
@ -9,5 +9,5 @@
 <path d="M20 19C20 19.2759 19.8883 19.5254 19.7076 19.7065C19.412 19.0889 18.9112 18.5879 18.2934 18.2925C18.4743 18.1118 18.7241 18 19 18C19.5523 18 20 18.4478 20 19Z" fill="#1D2D44"/>
 <path d="M19.517 22.6333C19.8225 22.1636 20 21.6021 20 21C20 20.6997 19.9559 20.4102 19.8739 20.1367C20.0644 20.0493 20.2765 20 20.5 20C21.3284 20 22 20.6714 22 21.5C22 22.3286 21.3284 23 20.5 23C20.1239 23 19.7802 22.8618 19.517 22.6333Z" fill="#1D2D44"/>
 <path d="M14 22.5C14 22.3335 14.0813 22.186 14.2062 22.0952C14.3294 22.4092 14.504 22.6973 14.7196 22.9492C14.6533 22.9814 14.5788 23 14.5 23C14.2239 23 14 22.7764 14 22.5Z" fill="#1D2D44"/>
-<path d="M2 2C0.895447 2 0 2.89551 0 4V9C0 7.89551 0.895447 7 2 7H21C22.1046 7 23 7.89551 23 9V7C23 5.89551 22.1046 5 21 5H10V4C10 2.89551 9.10455 2 8 2H2Z" fill="#788790"/>
+<path d="M4 4C3.44772 4 3 4.44775 3 5V9C3 8.44775 3.44772 8 4 8H21C21.5523 8 22 8.44775 22 9V8C22 7.44775 21.5523 7 21 7H11V5C11 4.44775 10.5523 4 10 4H4Z" fill="#788790"/>
 </svg>
--- a/products/ASC.Files/Client/public/images/icons/24/folder/sharepoint.svg
+++ b/products/ASC.Files/Client/public/images/icons/24/folder/sharepoint.svg
@ -1,6 +1,6 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect y="7" width="23" height="14" rx="2" fill="#B2BBC0"/>
-<path d="M2 2C0.895447 2 0 2.89551 0 4V9C0 7.89551 0.895447 7 2 7H21C22.1046 7 23 7.89551 23 9V7C23 5.89551 22.1046 5 21 5H10V4C10 2.89551 9.10455 2 8 2H2Z" fill="#788790"/>
+<rect x="3" y="7" width="23" height="14" rx="2" fill="#B2BBC0"/>
+<path d="M4 4C3.44772 4 3 4.44775 3 5V9C3 8.44775 3.44772 8 4 8H21C21.5523 8 22 8.44775 22 9V8C22 7.44775 21.5523 7 21 7H11V5C11 4.44775 10.5523 4 10 4H4Z" fill="#788790"/>
 <circle cx="18.5" cy="14.5" r="3.5" fill="#036C70"/>
 <circle cx="21" cy="18" r="3" fill="#1A9BA1"/>
 <circle cx="18.5" cy="20.5" r="2.5" fill="#37C6D0"/>
--- a/products/ASC.Files/Client/public/images/icons/24/folder/webdav.svg
+++ b/products/ASC.Files/Client/public/images/icons/24/folder/webdav.svg
@ -1,5 +1,5 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect y="7" width="23" height="14" rx="2" fill="#B2BBC0"/>
-<path d="M2 2C0.895447 2 0 2.89551 0 4V9C0 7.89551 0.895447 7 2 7H21C22.1046 7 23 7.89551 23 9V7C23 5.89551 22.1046 5 21 5H10V4C10 2.89551 9.10455 2 8 2H2Z" fill="#788790"/>
+<rect x="3" y="7" width="23" height="14" rx="2" fill="#B2BBC0"/>
+<path d="M4 4C3.44772 4 3 4.44775 3 5V9C3 8.44775 3.44772 8 4 8H21C21.5523 8 22 8.44775 22 9V8C22 7.44775 21.5523 7 21 7H11V5C11 4.44775 10.5523 4 10 4H4Z" fill="#788790"/>
 <path d="M21.675 18.02C21.335 16.295 19.82 15 18 15C16.555 15 15.3 15.82 14.675 17.02C13.17 17.18 12 18.455 12 20C12 21.655 13.345 23 15 23H21.5C22.88 23 24 21.88 24 20.5C24 19.18 22.975 18.11 21.675 18.02Z" fill="#96D1DE"/>
 </svg>
--- a/products/ASC.Files/Client/public/images/icons/24/folder/yandex.svg
+++ b/products/ASC.Files/Client/public/images/icons/24/folder/yandex.svg
@ -1,7 +1,7 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0)">
-<rect y="7" width="23" height="14" rx="2" fill="#B2BBC0"/>
-<path d="M2 2C0.895447 2 0 2.89551 0 4V9C0 7.89551 0.895447 7 2 7H21C22.1046 7 23 7.89551 23 9V7C23 5.89551 22.1046 5 21 5H10V4C10 2.89551 9.10455 2 8 2H2Z" fill="#788790"/>
+<rect x="3" y="7" width="23" height="14" rx="2" fill="#B2BBC0"/>
+<path d="M4 4C3.44772 4 3 4.44775 3 5V9C3 8.44775 3.44772 8 4 8H21C21.5523 8 22 8.44775 22 9V8C22 7.44775 21.5523 7 21 7H11V5C11 4.44775 10.5523 4 10 4H4Z" fill="#788790"/>
 <path d="M12.1677 21.9165C12.1292 21.7979 12.0933 21.667 12.0789 21.5563C11.9683 20.7051 12.9262 19.5061 12.9262 19.5061L13.7012 18.5999C14.2287 17.3765 14.2917 16.6425 15.9169 15.7315C17.325 14.9423 18.7229 15.0911 20.0035 15.5629C20.0035 15.5629 21.337 15.5472 22.1257 15.6545C22.1991 15.6645 22.2683 15.673 22.3342 15.6811C22.733 15.7738 23.0863 15.8601 23.4767 16.1131C23.6564 16.2295 23.7686 16.3692 23.8619 16.4924C23.0069 15.4741 20.1878 15.9238 16.994 17.3231C14.1079 18.7625 11.9582 20.6483 12.1677 21.9165Z" fill="black"/>
 <path d="M23.913 16.562C24.4044 17.6574 22.8061 20.0959 19.4937 21.8112C16.6537 23.1799 13.1925 23.4107 12.2823 22.2466C11.5733 20.9951 13.845 18.8945 16.9924 17.3247C20.2551 15.8952 23.1268 15.4568 23.913 16.562Z" fill="#0077FF"/>
 <path d="M21.2741 18.9189C21.5425 19.441 20.5918 20.3514 19.0126 21.1649C17.6613 21.8193 16.1552 22.1345 15.7401 21.598C15.4453 21.0878 16.4752 20.0824 17.9742 19.3348C19.5229 18.6434 20.9129 18.4162 21.2741 18.9189Z" fill="white"/>
--- a/products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/sub-components/AuthorCell.js
+++ b/products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/sub-components/AuthorCell.js
@ -1,12 +1,14 @@
 import React from "react";
-import { StyledText, StyledAuthorAvatar } from "./CellStyles";
+import { StyledText, StyledAuthorCell } from "./CellStyles";
+import Avatar from "@appserver/components/avatar";

 const AuthorCell = ({ fileOwner, sideColor, item }) => {
  return (
-    <>
-      <StyledAuthorAvatar
-        src={item.createdBy.avatarSmall}
+    <StyledAuthorCell>
+      <Avatar
+        source={item.createdBy.avatarSmall}
        className="author-avatar-cell"
+        role="user"
      />
      <StyledText
        color={sideColor}
@ -17,7 +19,7 @@ const AuthorCell = ({ fileOwner, sideColor, item }) => {
      >
        {fileOwner}
      </StyledText>
-    </>
+    </StyledAuthorCell>
  );
 };

--- a/products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/sub-components/CellStyles.js
+++ b/products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/sub-components/CellStyles.js
@ -6,11 +6,14 @@ const StyledText = styled(Text)`
  margin-right: 12px;
 `;

-const StyledAuthorAvatar = styled.img`
-  width: 16px;
-  height: 16px;
-  margin-right: 8px;
-  border-radius: 20px;
+const StyledAuthorCell = styled.div`
+  display: flex;
+
+  .author-avatar-cell {
+    width: 16px;
+    height: 16px;
+    margin-right: 8px;
+  }
 `;

-export { StyledText, StyledAuthorAvatar };
+export { StyledText, StyledAuthorCell };
--- a/products/ASC.Files/Client/src/store/HotkeyStore.js
+++ b/products/ASC.Files/Client/src/store/HotkeyStore.js
@ -31,7 +31,8 @@ class HotkeyStore {
  }

  activateHotkeys = (e) => {
-    if (this.dialogsStore.someDialogIsOpen) return;
+    if (this.dialogsStore.someDialogIsOpen || ev.target?.tagName === "INPUT")
+      return e;

    const isDefaultKeys =
      ["PageUp", "PageDown", "Home", "End"].indexOf(e.code) > -1;
--- a/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/TextChangeField.js
+++ b/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/TextChangeField.js
@ -34,7 +34,6 @@ class TextChangeField extends React.Component {

      tooltipContent,
      helpButtonHeaderContent,
-      dataDialog,
      maxLabelWidth,
    } = this.props;

@ -62,7 +61,6 @@ class TextChangeField extends React.Component {
            size="small"
            style={{ marginLeft: "8px" }}
            tabIndex={buttonTabIndex}
-            data-dialog={dataDialog}
          />
        </InputContainer>
      </FieldContainer>
--- a/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/updateUserForm.js
+++ b/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/updateUserForm.js
@ -52,12 +52,6 @@ import { combineUrl } from "@appserver/common/utils";
 import { AppServerConfig } from "@appserver/common/constants";
 import { Base } from "@appserver/components/themes";

-const dialogsDataset = {
-  changeEmail: "changeEmail",
-  changePassword: "changePassword",
-  changePhone: "changePhone",
-};
-
 const Table = styled.table`
  width: 100%;
  margin-bottom: 23px;
@ -188,13 +182,10 @@ class UpdateUserForm extends React.Component {
        defaultWidth: 0,
        defaultHeight: 0,
      },
-      dialogsVisible: {
-        [dialogsDataset.changePassword]: false,
-        [dialogsDataset.changePhone]: false,
-        [dialogsDataset.changeEmail]: false,
-        currentDialog: "",
-      },
      isMobile: isMobile || isTablet,
+      changeEmailDialogVisible: false,
+      changePhoneDialogVisible: false,
+      changePasswordDialogVisible: false,
    };

    //Set unique contacts id
@ -207,6 +198,18 @@ class UpdateUserForm extends React.Component {
    return newState;
  };

+  onChangeEmailDialog = (visible) => {
+    this.setState({ changeEmailDialogVisible: visible });
+  };
+
+  onChangePhoneDialog = (visible) => {
+    this.setState({ changePhoneDialogVisible: visible });
+  };
+
+  onChangePasswordDialog = (visible) => {
+    this.setState({ changePasswordDialogVisible: visible });
+  };
+
  setIsEdit = () => {
    const { isEdit, setIsEditingForm } = this.props;
    if (!isEdit) setIsEditingForm(true);
@ -230,19 +233,6 @@ class UpdateUserForm extends React.Component {
    this.setIsEdit();
  };

-  toggleDialogsVisible = (e) => {
-    const stateCopy = Object.assign({}, {}, this.state.dialogsVisible);
-    const selectedDialog = e ? e.target.dataset.dialog : e;
-    if (selectedDialog) {
-      stateCopy[selectedDialog] = true;
-      stateCopy.currentDialog = selectedDialog;
-    } else {
-      stateCopy[stateCopy.currentDialog] = false;
-      stateCopy.currentDialog = "";
-    }
-    this.setState({ dialogsVisible: stateCopy });
-  };
-
  onUserTypeChange = (event) => {
    var stateCopy = Object.assign({}, this.state);
    stateCopy.profile.isVisitor = event.target.value === "true";
@ -763,7 +753,7 @@ class UpdateUserForm extends React.Component {
              inputValue={profile.email}
              buttonText={t("ChangeButton")}
              buttonIsDisabled={isLoading}
-              buttonOnClick={this.toggleDialogsVisible}
+              buttonOnClick={() => this.onChangeEmailDialog(true)}
              buttonTabIndex={1}
              helpButtonHeaderContent={t("Common:Mail")}
              tooltipContent={
@ -790,7 +780,6 @@ class UpdateUserForm extends React.Component {
                  </Trans>
                </Text>
              }
-              dataDialog={dialogsDataset.changeEmail}
              maxLabelWidth={maxLabelWidth}
            />
            <TextChangeField
@ -799,9 +788,8 @@ class UpdateUserForm extends React.Component {
              inputValue={"********"}
              buttonText={t("ChangeButton")}
              buttonIsDisabled={isLoading}
-              buttonOnClick={this.toggleDialogsVisible}
+              buttonOnClick={() => this.onChangePasswordDialog(true)}
              buttonTabIndex={2}
-              dataDialog={dialogsDataset.changePassword}
              maxLabelWidth={maxLabelWidth}
            />
            {/*TODO: uncomment this after added phone form */}
@ -811,9 +799,8 @@ class UpdateUserForm extends React.Component {
              inputValue={profile.mobilePhone}
              buttonText={t("ChangeButton")}
              buttonIsDisabled={isLoading}
-              buttonOnClick={this.toggleDialogsVisible}
+              buttonOnClick={() => this.onChangePhoneDialog(true)}
              buttonTabIndex={3}
-              dataDialog={dialogsDataset.changePhone}
              maxLabelWidth={maxLabelWidth}
            /> */}
            <TextField
@ -1012,26 +999,26 @@ class UpdateUserForm extends React.Component {
          />
        </div>

-        {dialogsVisible.changeEmail && (
+        {this.state.changeEmailDialogVisible && (
          <ChangeEmailDialog
-            visible={dialogsVisible.changeEmail}
-            onClose={this.toggleDialogsVisible}
+            visible={this.state.changeEmailDialogVisible}
+            onClose={() => this.onChangeEmailDialog(false)}
            user={profile}
          />
        )}

-        {dialogsVisible.changePassword && (
+        {this.state.changePasswordDialogVisible && (
          <ChangePasswordDialog
-            visible={dialogsVisible.changePassword}
-            onClose={this.toggleDialogsVisible}
+            visible={this.state.changePasswordDialogVisible}
+            onClose={() => this.onChangePasswordDialog(false)}
            email={profile.email}
          />
        )}

-        {dialogsVisible.changePhone && (
+        {this.state.changePhoneDialogVisible && (
          <ChangePhoneDialog
-            visible={dialogsVisible.changePhone}
-            onClose={this.toggleDialogsVisible}
+            visible={this.state.changePhoneDialogVisible}
+            onClose={() => this.onChangePhoneDialog(false)}
            user={profile}
          />
        )}
--- a/public/images/avatar.base.react.svg
+++ b/public/images/avatar.base.react.svg
@ -0,0 +1,9 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32Z" fill="#ECEEF1"/>
+<mask id="mask0_2848_66240" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="32" height="32">
+<path d="M16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_2848_66240)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.0001 6.22266C19.9273 6.22266 23.1112 9.40648 23.1112 13.3338C23.1112 17.2614 19.9273 20.4449 16.0001 20.4449C12.0728 20.4449 8.88894 17.2611 8.88894 13.3338C8.88894 9.40648 12.0728 6.22266 16.0001 6.22266ZM25.8284 35.556H6.17141C4.29721 35.556 2.77783 34.1381 2.77783 32.4108C2.77783 24.4842 6.64481 21.3893 10.7572 21.4912C12.1831 22.4051 13.9143 22.9421 15.7825 22.9421C17.7192 22.9421 19.5087 22.3651 20.963 21.3893C25.5425 21.3893 29.2223 24.4842 29.2223 32.4108C29.2223 34.1381 27.7029 35.556 25.8284 35.556Z" fill="#A3A9AE"/>
+</g>
+</svg>
--- a/public/images/avatar.dark.react.svg
+++ b/public/images/avatar.dark.react.svg
@ -0,0 +1,13 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.96">
+<g clip-path="url(#clip0_1385_76427)">
+<path d="M0 16C0 7.16344 7.16344 0 16 0C24.8366 0 32 7.16344 32 16C32 24.8366 24.8366 32 16 32C7.16344 32 0 24.8366 0 16Z" fill="#3D3D3D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.0001 6.22217C19.9273 6.22217 23.1112 9.40599 23.1112 13.3333C23.1112 17.2609 19.9273 20.4444 16.0001 20.4444C12.0728 20.4444 8.88894 17.2606 8.88894 13.3333C8.88894 9.40599 12.0728 6.22217 16.0001 6.22217ZM25.8284 35.5555H6.17141C4.29721 35.5555 2.77783 34.1376 2.77783 32.4103C2.77783 24.4837 6.64481 21.3888 10.7572 21.4907C12.1831 22.4046 13.9143 22.9416 15.7825 22.9416C17.7192 22.9416 19.5087 22.3646 20.963 21.3888C25.5425 21.3888 29.2223 24.4837 29.2223 32.4103C29.2223 34.1376 27.7029 35.5555 25.8284 35.5555Z" fill="white" fill-opacity="0.2"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_1385_76427">
+<path d="M0 16C0 7.16344 7.16344 0 16 0C24.8366 0 32 7.16344 32 16C32 24.8366 24.8366 32 16 32C7.16344 32 0 24.8366 0 16Z" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/web/ASC.Web.Client/src/components/Layout/index.js
+++ b/web/ASC.Web.Client/src/components/Layout/index.js
@ -17,7 +17,7 @@ import { inject, observer } from "mobx-react";
 const StyledContainer = styled.div`
  width: 100%;
  height: ${(props) =>
-    (props.isTabletView || isMobile) && !isFirefox
+    (props.isTabletView || isMobileOnly) && !isFirefox
      ? `${props.contentHeight}px`
      : "100vh"};

@ -31,22 +31,15 @@ const StyledContainer = styled.div`
    > .scroll-body {
      -webkit-touch-callout: none;
      -webkit-user-select: none;
-      position: ${(props) =>
-        isMobile && !isSmallTablet()
-          ? props.isArticlePinned
-            ? "static"
-            : "absolute"
-          : "absolute"} !important;
+      position: ${isMobileOnly && !isSmallTablet() && "absolute"} !important;

-      ${(props) =>
-        isMobile &&
-        props.isArticlePinned &&
-        !isSmallTablet() &&
-        css`
-          overflow-y: hidden !important;
-          overflow-x: hidden !important;
-          width: 192px;
-        `}
+      ${isMobileOnly &&
+      !isSmallTablet() &&
+      css`
+        overflow-y: hidden !important;
+        overflow-x: hidden !important;
+        width: 192px;
+      `}
    }

    .nav-thumb-horizontal {
@ -60,13 +53,7 @@ const StyledContainer = styled.div`
 `;

 const Layout = (props) => {
-  const {
-    children,
-    isTabletView,
-    setIsTabletView,
-    isArticlePinned,
-    isArticleVisibleOnUnpin,
-  } = props;
+  const { children, isTabletView, setIsTabletView } = props;

  const [contentHeight, setContentHeight] = useState();
  const [isPortrait, setIsPortrait] = useState();
@ -177,9 +164,8 @@ const Layout = (props) => {
      className="Layout"
      isTabletView={isTabletView}
      contentHeight={contentHeight}
-      isArticlePinned={isArticlePinned}
    >
-      {isMobile ? <MobileLayout {...props} /> : children}
+      {isMobileOnly ? <MobileLayout {...props} /> : children}
    </StyledContainer>
  );
 };
@ -188,14 +174,12 @@ Layout.propTypes = {
  isTabletView: PropTypes.bool,
  children: PropTypes.any,
  setIsTabletView: PropTypes.func,
-  isArticlePinned: PropTypes.bool,
 };

 export default inject(({ auth }) => {
  return {
    isTabletView: auth.settingsStore.isTabletView,
-    isArticlePinned: auth.settingsStore.isArticlePinned,
-    isArticleVisibleOnUnpin: auth.settingsStore.isArticleVisibleOnUnpin,
+
    setIsTabletView: auth.settingsStore.setIsTabletView,
  };
 })(observer(Layout));
--- a/web/ASC.Web.Client/src/components/Main/index.js
+++ b/web/ASC.Web.Client/src/components/Main/index.js
@ -1,6 +1,6 @@
 import React from "react";
 import styled, { css } from "styled-components";
-import { isIOS, isFirefox, isMobile } from "react-device-detect";
+import { isIOS, isFirefox, isMobile, isMobileOnly } from "react-device-detect";

 const StyledMain = styled.main`
  height: ${(props) =>
@ -16,6 +16,11 @@ const StyledMain = styled.main`
  box-sizing: border-box;

  ${isMobile &&
+  css`
+    height: calc(100vh - 48px);
+  `}
+
+  ${isMobileOnly &&
  css`
    height: auto;
    min-height: 100%;
--- a/web/ASC.Web.Client/src/components/NavMenu/index.js
+++ b/web/ASC.Web.Client/src/components/NavMenu/index.js
@ -13,7 +13,7 @@ import { withRouter } from "react-router";

 import Loaders from "@appserver/common/components/Loaders";
 import { LayoutContextConsumer } from "../Layout/context";
-import { isMobile } from "react-device-detect";
+import { isMobileOnly } from "react-device-detect";
 import { inject, observer } from "mobx-react";
 import i18n from "./i18n";
 import PreparationPortalDialog from "../dialogs/PreparationPortalDialog";
@ -25,14 +25,14 @@ const StyledContainer = styled.header`

  ${(props) =>
    !props.isLoaded
-      ? isMobile &&
+      ? isMobileOnly &&
        css`
          position: static;

          margin-right: -16px; /* It is a opposite value of padding-right of custom scroll bar,
       so that there is no white bar in the header on loading. (padding-right: 16px)*/
        `
-      : isMobile &&
+      : isMobileOnly &&
        css`
          .navMenuHeader,
          .profileMenuIcon,
--- a/web/ASC.Web.Client/src/components/pages/Home/sub-components/HomeContainer.js
+++ b/web/ASC.Web.Client/src/components/pages/Home/sub-components/HomeContainer.js
@ -1,5 +1,5 @@
 import styled, { css } from "styled-components";
-import { isMobileOnly, isMobile } from "react-device-detect";
+import { isMobileOnly, isMobile, isTablet } from "react-device-detect";

 const HomeContainer = styled.div`
  margin: ${isMobileOnly ? "50px" : "42px"} auto 0;
@ -31,13 +31,11 @@ const HomeContainer = styled.div`
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 26px ${isMobileOnly ? "31px" : "45px"};

-      ${isMobileOnly &&
+      ${(isTablet || isMobile) &&
      css`
-        @media (min-width: 500px) {
-          display: flex;
-          justify-content: center;
-          flex-wrap: wrap;
-        }
+        display: flex;
+        justify-content: center;
+        flex-wrap: wrap;
      `}

      .home-module {
--- a/web/ASC.Web.Client/src/components/pages/Settings/categories/common/SettingsPageLayout.js
+++ b/web/ASC.Web.Client/src/components/pages/Settings/categories/common/SettingsPageLayout.js
@ -0,0 +1,76 @@
+import React, { useEffect, useState } from "react";
+import styled from "styled-components";
+import { Base } from "@appserver/components/themes";
+import { isSmallTablet } from "@appserver/components/utils/device";
+
+const StyledComponent = styled.div`
+  .combo-button-label {
+    max-width: 100%;
+  }
+
+  .settings-block {
+    margin-bottom: 24px;
+  }
+
+  .category-description {
+    line-height: 20px;
+    color: #657077;
+    margin-bottom: 20px;
+  }
+
+  .category-item-wrapper:not(:last-child) {
+    border-bottom: 1px solid #eceef1;
+    margin-bottom: 24px;
+  }
+
+  .category-item-description {
+    color: ${(props) => props.theme.studio.settings.common.descriptionColor};
+    font-size: 12px;
+    max-width: 1024px;
+  }
+
+  .category-item-heading {
+    display: flex;
+    align-items: center;
+    padding-bottom: 16px;
+  }
+
+  .category-item-title {
+    font-weight: bold;
+    font-size: 16px;
+    line-height: 22px;
+    margin-right: 4px;
+  }
+
+  @media (min-width: 600px) {
+    .settings-block {
+      max-width: 350px;
+      height: auto;
+    }
+  }
+`;
+
+StyledComponent.defaultProps = { theme: Base };
+
+const SettingsPageLayout = ({ children }) => {
+  const [mobileView, setMobileView] = useState();
+
+  const checkInnerWidth = () => {
+    if (isSmallTablet()) {
+      setMobileView(true);
+    } else {
+      setMobileView(false);
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener("resize", checkInnerWidth);
+    return () => window.removeEventListener("resize", checkInnerWidth);
+  }, [checkInnerWidth]);
+
+  //TODO: Add menu, hide along the route
+  const isMobile = !!(isSmallTablet() || mobileView);
+  return <>{children(isMobile)}</>;
+};
+
+export default SettingsPageLayout;
--- a/web/ASC.Web.Client/src/components/pages/Settings/categories/common/SettingsPageMobileView.js
+++ b/web/ASC.Web.Client/src/components/pages/Settings/categories/common/SettingsPageMobileView.js
@ -0,0 +1,37 @@
+import React from "react";
+import styled from "styled-components";
+import { Base } from "@appserver/components/themes";
+
+const StyledComponent = styled.div`
+  .combo-button-label {
+    max-width: 100%;
+  }
+
+  .category-item-wrapper {
+    padding-top: 20px;
+
+    .category-item-heading {
+      padding-bottom: 8px;
+    }
+
+    .category-item-description {
+      color: #657077;
+      font-size: 13px;
+      max-width: 1024px;
+    }
+
+    .inherit-title-link {
+      margin-right: 4px;
+      font-size: 16px;
+      font-weight: 700;
+    }
+  }
+`;
+
+StyledComponent.defaultProps = { theme: Base };
+
+const SettingsPageMobileView = ({ children }) => {
+  return <StyledComponent>{children}</StyledComponent>;
+};
+
+export default SettingsPageMobileView;
--- a/web/ASC.Web.Client/src/components/pages/Settings/categories/common/customization-navbar.js
+++ b/web/ASC.Web.Client/src/components/pages/Settings/categories/common/customization-navbar.js
@ -1,123 +0,0 @@
-import React from "react";
-import { withTranslation } from "react-i18next";
-import styled from "styled-components";
-import Text from "@appserver/components/text";
-import Box from "@appserver/components/box";
-import Link from "@appserver/components/link";
-import ArrowRightIcon from "../../../../../../public/images/arrow.right.react.svg";
-import commonIconsStyles from "@appserver/components/utils/common-icons-style";
-import { combineUrl } from "@appserver/common/utils";
-import { inject, observer } from "mobx-react";
-import { AppServerConfig } from "@appserver/common/constants";
-import withCultureNames from "@appserver/common/hoc/withCultureNames";
-import { Base } from "@appserver/components/themes";
-import history from "@appserver/common/history";
-
-const StyledArrowRightIcon = styled(ArrowRightIcon)`
-  ${commonIconsStyles}
-  path {
-    fill: ${(props) => props.theme.studio.settings.common.arrowColor};
-  }
-`;
-
-StyledArrowRightIcon.defaultProps = { theme: Base };
-
-const StyledComponent = styled.div`
-  .combo-button-label {
-    max-width: 100%;
-  }
-
-  .category-item-wrapper {
-    padding-top: 20px;
-
-    .category-item-heading {
-      padding-bottom: 8px;
-    }
-
-    .category-item-description {
-      color: #657077;
-      font-size: 13px;
-      max-width: 1024px;
-    }
-
-    .inherit-title-link {
-      margin-right: 4px;
-      font-size: 16px;
-      font-weight: 700;
-    }
-  }
-`;
-
-StyledComponent.defaultProps = { theme: Base };
-
-const CustomizationNavbar = ({ t, theme, helpUrlCommonSettings }) => {
-  const onClickLink = (e) => {
-    e.preventDefault();
-    history.push(e.target.pathname);
-  };
-
-  return (
-    <StyledComponent>
-      <div className="category-item-wrapper">
-        <div className="category-item-heading">
-          <Link
-            className="inherit-title-link header"
-            onClick={onClickLink}
-            truncate={true}
-            href={combineUrl(
-              AppServerConfig.proxyURL,
-              "/settings/common/customization/language-and-time-zone"
-            )}
-          >
-            {t("StudioTimeLanguageSettings")}
-          </Link>
-          <StyledArrowRightIcon size="small" color="#333333" />
-        </div>
-        <Text className="category-item-description">
-          {t("LanguageAndTimeZoneSettingsDescription")}
-        </Text>
-        <Box paddingProp="10px 0 3px 0">
-          <Link
-            color={theme.studio.settings.common.linkColorHelp}
-            target="_blank"
-            isHovered={true}
-            href={helpUrlCommonSettings}
-          >
-            {t("Common:LearnMore")}
-          </Link>
-        </Box>
-      </div>
-      <div className="category-item-wrapper">
-        <div className="category-item-heading">
-          <Link
-            truncate={true}
-            className="inherit-title-link header"
-            onClick={onClickLink}
-            href={combineUrl(
-              AppServerConfig.proxyURL,
-              "/settings/common/customization/custom-titles"
-            )}
-          >
-            {t("CustomTitlesWelcome")}
-          </Link>
-          <StyledArrowRightIcon size="small" color="#333333" />
-        </div>
-        <Text className="category-item-description">
-          {t("CustomTitlesSettingsDescription")}
-        </Text>
-      </div>
-    </StyledComponent>
-  );
-};
-
-export default inject(({ auth }) => {
-  const { helpUrlCommonSettings, theme } = auth.settingsStore;
-  return {
-    theme,
-    helpUrlCommonSettings,
-  };
-})(
-  withCultureNames(
-    observer(withTranslation(["Settings", "Common"])(CustomizationNavbar))
-  )
-);
--- a/web/ASC.Web.Client/src/components/pages/Settings/categories/common/customization.js
+++ b/web/ASC.Web.Client/src/components/pages/Settings/categories/common/customization.js
@ -1,15 +1,15 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 import { withTranslation } from "react-i18next";
 import styled from "styled-components";
 import withCultureNames from "@appserver/common/hoc/withCultureNames";
-import CustomizationNavbar from "./customization-navbar";
-import LanguageAndTimeZone from "./language-and-time-zone";
-import CustomTitles from "./custom-titles";
-import PortalRenaming from "./portal-renaming";
-import { Base } from "@appserver/components/themes";
-import { isSmallTablet } from "@appserver/components/utils/device";
+import LanguageAndTimeZone from "./settingsCustomization/language-and-time-zone";
+import CustomTitles from "./settingsCustomization/custom-titles";
+import PortalRenaming from "./settingsCustomization/portal-renaming";
+import SettingsPageLayout from "./SettingsPageLayout";
+import SettingsPageMobileView from "./SettingsPageMobileView";
+
+import { Base } from "@appserver/components/themes";

-import commonSettingsStyles from "../../utils/commonSettingsStyles";
 const StyledComponent = styled.div`
  .combo-button-label {
    max-width: 100%;
@ -60,38 +60,25 @@ const StyledComponent = styled.div`
 StyledComponent.defaultProps = { theme: Base };

 const Customization = ({ t }) => {
-  const [mobileView, setMobileView] = useState();
-
-  const checkInnerWidth = () => {
-    if (window.innerWidth < 600) {
-      setMobileView(true);
-    } else {
-      setMobileView(false);
-    }
-  };
-
-  useEffect(() => {
-    window.addEventListener("resize", checkInnerWidth);
-    return () => window.removeEventListener("resize", checkInnerWidth);
-  }, [checkInnerWidth]);
-
-  return isSmallTablet() || mobileView ? (
-    <CustomizationNavbar />
-  ) : (
-    <StyledComponent>
-      <div className="category-description">{`${t(
-        "Settings:CustomizationDescription"
-      )}`}</div>
-      <div className="category-item-wrapper">
-        <LanguageAndTimeZone />
-      </div>
-      {/* <div className="category-item-wrapper">
-              <CustomTitles />
-            </div>
-            <div className="category-item-wrapper">
-              <PortalRenaming />
-            </div> */}
-    </StyledComponent>
+  return (
+    <SettingsPageLayout>
+      {(isMobile) =>
+        isMobile ? (
+          <SettingsPageMobileView>
+            <LanguageAndTimeZone isMobileView={isMobile} />
+            {/* <CustomTitles /> */}
+          </SettingsPageMobileView>
+        ) : (
+          <StyledComponent>
+            <div className="category-description">{`${t(
+              "Settings:CustomizationDescription"
+            )}`}</div>
+            <LanguageAndTimeZone isMobileView={isMobile} />
+            {/* <CustomTitles /> */}
+          </StyledComponent>
+        )
+      }
+    </SettingsPageLayout>
  );
 };

--- a/web/ASC.Web.Client/src/components/pages/Settings/categories/common/settingsCustomization/custom-titles.js
+++ b/web/ASC.Web.Client/src/components/pages/Settings/categories/common/settingsCustomization/custom-titles.js
@ -8,10 +8,10 @@ import TextInput from "@appserver/components/text-input";
 import HelpButton from "@appserver/components/help-button";
 import SaveCancelButtons from "@appserver/components/save-cancel-buttons";
 import { showLoader, hideLoader } from "@appserver/common/utils";
-import { saveToSessionStorage, getFromSessionStorage } from "../../utils";
-import { setDocumentTitle } from "../../../../../helpers/utils";
+import { saveToSessionStorage, getFromSessionStorage } from "../../../utils";
+import { setDocumentTitle } from "../../../../../../helpers/utils";
 import { inject, observer } from "mobx-react";
-import { CustomTitlesTooltip } from "./sub-components/common-tooltips";
+import { CustomTitlesTooltip } from "../sub-components/common-tooltips";

 const StyledComponent = styled.div`
  .settings-block {
--- a/web/ASC.Web.Client/src/components/pages/Settings/categories/common/settingsCustomization/language-and-time-zone.js
+++ b/web/ASC.Web.Client/src/components/pages/Settings/categories/common/settingsCustomization/language-and-time-zone.js
@ -8,20 +8,27 @@ import Loader from "@appserver/components/loader";
 import toastr from "@appserver/components/toast/toastr";
 import HelpButton from "@appserver/components/help-button";
 import SaveCancelButtons from "@appserver/components/save-cancel-buttons";
-import { saveToSessionStorage, getFromSessionStorage } from "../../utils";
-import { setDocumentTitle } from "../../../../../helpers/utils";
+import { saveToSessionStorage, getFromSessionStorage } from "../../../utils";
+import { setDocumentTitle } from "../../../../../../helpers/utils";
 import { inject, observer } from "mobx-react";
 import { LANGUAGE } from "@appserver/common/constants";
 import { convertLanguage } from "@appserver/common/utils";
 import withCultureNames from "@appserver/common/hoc/withCultureNames";
-import { LanguageTimeSettingsTooltip } from "./sub-components/common-tooltips";
+import { LanguageTimeSettingsTooltip } from "../sub-components/common-tooltips";
 import { combineUrl } from "@appserver/common/utils";
 import { AppServerConfig } from "@appserver/common/constants";
-import config from "../../../../../../package.json";
+import config from "../../../../../../../package.json";
 import history from "@appserver/common/history";
 import { isMobileOnly } from "react-device-detect";
 import Scrollbar from "@appserver/components/scrollbar";
-
+import Text from "@appserver/components/text";
+import Box from "@appserver/components/box";
+import Link from "@appserver/components/link";
+import ArrowRightIcon from "../../../../../../../public/images/arrow.right.react.svg";
+import { isSmallTablet } from "@appserver/components/utils/device";
+import commonIconsStyles from "@appserver/components/utils/common-icons-style";
+import { Base } from "@appserver/components/themes";
+import checkScrollSettingsBlock from "../utils";
 const mapTimezonesToArray = (timezones) => {
  return timezones.map((timezone) => {
    return { key: timezone.id, label: timezone.displayName };
@ -38,6 +45,15 @@ const paddingSectionWrapperContent = "22px";
 const saveCancelButtons = "56px";
 const flex = "4px";

+const StyledArrowRightIcon = styled(ArrowRightIcon)`
+  ${commonIconsStyles}
+  path {
+    fill: ${(props) => props.theme.studio.settings.common.arrowColor};
+  }
+`;
+
+StyledArrowRightIcon.defaultProps = { theme: Base };
+
 const StyledScrollbar = styled(Scrollbar)`
  height: calc(
    100vh -
@ -144,6 +160,7 @@ class LanguageAndTimeZone extends React.Component {
    timezoneDefaultFromSessionStorage = getFromSessionStorage(
      "timezoneDefault"
    );
+
    setDocumentTitle(t("Customization"));

    this.state = {
@ -158,10 +175,7 @@ class LanguageAndTimeZone extends React.Component {
      isLoadingGreetingRestore: false,
      hasChanged: false,
      showReminder: false,
-      sectionWidth: null,
      hasScroll: false,
-      heightSettingsBlock: null,
-      heightScrollBody: null,
    };
  }

@ -221,7 +235,13 @@ class LanguageAndTimeZone extends React.Component {
  }

  componentDidUpdate(prevProps, prevState) {
-    const { timezones, timezoneDefault, languageDefault } = this.state;
+    const {
+      timezones,
+      timezoneDefault,
+      languageDefault,
+      hasScroll,
+    } = this.state;
+
    const {
      i18n,
      language,
@ -230,8 +250,16 @@ class LanguageAndTimeZone extends React.Component {
      cultureNames,
    } = this.props;

-    this.checkHeightSettingsBlock();
-    window.addEventListener("resize", this.checkHeightSettingsBlock);
+    const checkScroll = checkScrollSettingsBlock();
+
+    window.addEventListener("resize", checkScroll);
+    const scrollLngTZSettings = checkScroll();
+
+    if (scrollLngTZSettings !== hasScroll) {
+      this.setState({
+        hasScroll: scrollLngTZSettings,
+      });
+    }

    // TODO: Remove div with height 64 and remove settings-mobile class
    const settingsMobile = document.getElementsByClassName(
@ -268,7 +296,7 @@ class LanguageAndTimeZone extends React.Component {
    window.removeEventListener(
      "resize",
      this.checkInnerWidth,
-      this.checkHeightSettingsBlock
+      checkScrollSettingsBlock
    );
  }

@ -373,7 +401,7 @@ class LanguageAndTimeZone extends React.Component {
  };

  checkInnerWidth = () => {
-    if (window.innerWidth > 600) {
+    if (!isSmallTablet()) {
      history.push(
        combineUrl(
          AppServerConfig.proxyURL,
@ -385,50 +413,19 @@ class LanguageAndTimeZone extends React.Component {
    }
  };

-  checkHeightSettingsBlock = () => {
-    if (this.settingsDiv && this.scrollBody) return;
-
-    this.settingsDiv = document.getElementsByClassName("settings-block")[0];
-
-    if (!this.settingsDiv) return;
-
-    this.scrollBody = this.settingsDiv.closest(".scroll-body");
-
-    if (!this.scrollBody) return;
-
-    const height = getComputedStyle(this.settingsDiv).height.slice(0, -2);
-    const heightScrollBody = getComputedStyle(this.scrollBody).height.slice(
-      0,
-      -2
-    );
-
-    if (
-      this.state.heightSettingsBlock === height &&
-      this.state.heightScrollBody === heightScrollBody
-    ) {
-      return;
-    }
-
-    this.setState({
-      heightSettingsBlock: height,
-    });
-    this.setState({
-      heightScrollBody: heightScrollBody,
-    });
-
-    if (parseInt(height, 10) > parseInt(heightScrollBody, 10)) {
-      this.setState({
-        hasScroll: true,
-      });
-    } else {
-      this.setState({
-        hasScroll: false,
-      });
-    }
+  onClickLink = (e) => {
+    e.preventDefault();
+    history.push(e.target.pathname);
  };

  render() {
-    const { t, theme, cultureNames } = this.props;
+    const {
+      t,
+      theme,
+      cultureNames,
+      isMobileView,
+      helpUrlCommonSettings,
+    } = this.props;
    const {
      isLoadedData,
      language,
@ -443,6 +440,37 @@ class LanguageAndTimeZone extends React.Component {
      <LanguageTimeSettingsTooltip theme={theme} t={t} />
    );

+    const isMobileViewLanguageTimeSettings = (
+      <div className="category-item-wrapper">
+        <div className="category-item-heading">
+          <Link
+            className="inherit-title-link header"
+            onClick={this.onClickLink}
+            truncate={true}
+            href={combineUrl(
+              AppServerConfig.proxyURL,
+              "/settings/common/customization/language-and-time-zone"
+            )}
+          >
+            {t("StudioTimeLanguageSettings")}
+          </Link>
+          <StyledArrowRightIcon size="small" color="#333333" />
+        </div>
+        <Text className="category-item-description">
+          {t("LanguageAndTimeZoneSettingsDescription")}
+        </Text>
+        <Box paddingProp="10px 0 3px 0">
+          <Link
+            color={theme.studio.settings.common.linkColorHelp}
+            target="_blank"
+            isHovered={true}
+            href={helpUrlCommonSettings}
+          >
+            {t("Common:LearnMore")}
+          </Link>
+        </Box>
+      </div>
+    );
    const settingsBlock = (
      <div className="settings-block">
        <FieldContainer
@ -493,9 +521,12 @@ class LanguageAndTimeZone extends React.Component {

    return !isLoadedData ? (
      <Loader className="pageLoader" type="rombs" size="40px" />
+    ) : isMobileView ? (
+      isMobileViewLanguageTimeSettings
    ) : (
      <StyledComponent hasScroll={hasScroll}>
-        {this.checkInnerWidth() && (
+        {/* Added isMobileView */}
+        {this.checkInnerWidth() && !isMobileView && (
          <div className="category-item-heading">
            <div className="category-item-title">
              {t("StudioTimeLanguageSettings")}
@ -507,8 +538,7 @@ class LanguageAndTimeZone extends React.Component {
            />
          </div>
        )}
-        {(isMobileOnly && window.innerWidth < 600) ||
-        window.innerWidth < 600 ? (
+        {(isMobileOnly && isSmallTablet()) || isSmallTablet() ? (
          <StyledScrollbar stype="smallBlack">{settingsBlock}</StyledScrollbar>
        ) : (
          <> {settingsBlock}</>
@ -541,6 +571,7 @@ export default inject(({ auth, setup }) => {
    //getPortalCultures,
    getPortalTimezones,
    getCurrentCustomSchema,
+    helpUrlCommonSettings,
  } = auth.settingsStore;

  const { user } = auth.userStore;
@ -562,6 +593,7 @@ export default inject(({ auth, setup }) => {
    setLanguageAndTime,
    getCurrentCustomSchema,
    getPortalTimezones,
+    helpUrlCommonSettings,
  };
 })(
  withCultureNames(
--- a/web/ASC.Web.Client/src/components/pages/Settings/categories/common/settingsCustomization/portal-renaming.js
+++ b/web/ASC.Web.Client/src/components/pages/Settings/categories/common/settingsCustomization/portal-renaming.js
@ -23,7 +23,7 @@ const StyledComponent = styled.div`
 `;

 const PortalRenaming = ({ t, theme, sectionWidth }) => {
-  // todo: Изменить на false
+  // TODO: Change false
  const [isLoadedData, setIsLoadedData] = useState(true);

  const onSavePortalRename = () => {
--- a/web/ASC.Web.Client/src/components/pages/Settings/categories/common/utils.js
+++ b/web/ASC.Web.Client/src/components/pages/Settings/categories/common/utils.js
@ -0,0 +1,38 @@
+const checkScrollSettingsBlock = () => {
+  let initHeight = 0;
+  let initHeightScroll = 0;
+
+  const settingsDiv = document.getElementsByClassName("settings-block")?.[0];
+  const scrollBody = settingsDiv?.closest(".scroll-body");
+
+  const height = parseInt(
+    !!settingsDiv ? getComputedStyle(settingsDiv).height.slice(0, -2) : 0,
+    0
+  );
+
+  const heightScroll = parseInt(
+    !!scrollBody ? getComputedStyle(scrollBody).height.slice(0, -2) : 0,
+    0
+  );
+
+  return () => {
+    if (height === initHeight && heightScroll !== initHeightScroll) {
+      return;
+    }
+
+    if (height !== initHeight) {
+      initHeight = height;
+    }
+    if (heightScroll !== initHeightScroll) {
+      initHeightScroll = heightScroll;
+    }
+
+    if (height > heightScroll) {
+      return true;
+    } else {
+      return false;
+    }
+  };
+};
+
+export default checkScrollSettingsBlock;
--- a/web/ASC.Web.Client/src/components/pages/Settings/index.js
+++ b/web/ASC.Web.Client/src/components/pages/Settings/index.js
@ -19,9 +19,11 @@ const CustomizationSettings = lazy(() =>
  import("./categories/common/customization")
 );
 const LanguageAndTimeZoneSettings = lazy(() =>
-  import("./categories/common/language-and-time-zone")
+  import("./categories/common/settingsCustomization/language-and-time-zone")
+);
+const CustomTitles = lazy(() =>
+  import("./categories/common/settingsCustomization/custom-titles")
 );
-const CustomTitles = lazy(() => import("./categories/common/custom-titles"));
 const TeamTemplate = lazy(() => import("./categories/common/team-template"));
 const ThirdPartyServices = lazy(() =>
  import("./categories/integration/thirdPartyServicesSettings")
--- a/web/ASC.Web.Login/src/Login.jsx
+++ b/web/ASC.Web.Login/src/Login.jsx
@ -441,7 +441,7 @@ const Form = (props) => {
              isVertical={true}
              labelVisible={false}
              hasError={!passwordValid}
-              errorMessage={!password.trim() && t("Common:RequiredField")} //TODO: Add wrong password server error
+              errorMessage={!password.trim() ? t("Common:RequiredField") : ""} //TODO: Add wrong password server error
            >
              <PasswordInput
                simpleView={true}