Merge branch 'develop' into feature/doc-space-info-panel

build/build.sh

@@ -0,0 +1,35 @@
+#!/bin/bash
+
+echo off
+
+echo "##########################################################"
+echo "#########  Start build and deploy  #######################"
+echo "##########################################################"
+
+echo ""
+
+rd="$( cd "$( dirname "${BASH_SOURCE[0]}" )" >/dev/null 2>&1 && pwd )"
+echo "Run script directory:" $rd
+
+dir=$(builtin cd $rd/../; pwd)
+echo "Root directory:" $dir
+
+pushd $dir
+
+echo "FRONT-END (for start run command 'yarn start' inside the root folder)"
+yarn install
+
+echo "BACK-END"
+dotnet build $dir/asc.web.slnf  /fl1 /flp1:logfile=asc.web.log;verbosity=normal
+
+echo "install nodejs projects dependencies..."
+pushd $dir/common/ASC.Socket.IO/
+yarn install
+pushd $dir/common/ASC.SsoAuth/
+yarn install
+pushd $dir/common/ASC.WebDav/
+yarn install
+pushd $dir/common/ASC.UrlShortener/
+yarn install
+pushd $dir/common/ASC.WebPlugins/
+yarn install

build/run/macos/api.sh

@@ -0,0 +1,10 @@
+#!/bin/bash
+
+rd="$( cd "$( dirname "${BASH_SOURCE[0]}" )" >/dev/null 2>&1 && pwd )"
+echo "Run script directory:" $rd
+
+dir=$(builtin cd $rd/../../../; pwd)
+echo "Root directory:" $dir
+
+# Web API Root
+dotnet $dir/web/ASC.Web.Api/bin/Debug/ASC.Web.Api.dll urls=http://0.0.0.0:5000 $STORAGE_ROOT=$dir/Data log:dir=$dir/Logs log:name=api pathToConf=$dir/config core:products:folder=$dir/products

build/run/macos/backend.sh

@@ -0,0 +1,10 @@
+#!/bin/bash
+
+dir="$( cd "$( dirname "${BASH_SOURCE[0]}" )" >/dev/null 2>&1 && pwd )"
+echo "Root directory:" $dir
+
+$dir/api.sh & 
+$dir/studio.sh & 
+$dir/people.sh & 
+$dir/files.sh & 
+$dir/files.service.sh &

build/run/macos/docker-tools/docker-compose.yml

@@ -0,0 +1,20 @@
+version: "3.8"
+
+services:
+  rhonda_rabbitmq:
+    image: rabbitmq:3-management-alpine
+    container_name: "rabbitmq"
+    ports:
+      - 5672:5672
+      - 15672:15672
+    volumes:
+      - ~/.container-data/rabbitmq/data/:/var/lib/rabbitmq/
+      - ~/.container-data/rabbitmq/log/:/var/log/rabbitmq
+  redis:
+    image: redis:latest
+    volumes:
+      - ~/.container-data/redis/log/:/var/log/redis
+    ports:
+      - 6379:6379
+volumes:
+  container-data:

build/run/macos/files.service.sh

@@ -0,0 +1,11 @@
+#!/bin/bash
+
+rd="$( cd "$( dirname "${BASH_SOURCE[0]}" )" >/dev/null 2>&1 && pwd )"
+echo "Run script directory:" $rd
+
+dir=$(builtin cd $rd/../../../; pwd)
+echo "Root directory:" $dir
+
+# Web API Files.Service
+# set servicepath=%cd%\products\ASC.Files\Service\bin\Debug\ASC.Files.Service.exe urls=http://0.0.0.0:5009 $STORAGE_ROOT=%cd%\Data log:dir=%cd%\Logs log:name=files.service pathToConf=%cd%\config core:products:folder=%cd%\products
+dotnet $dir/products/ASC.Files/Service/bin/Debug/ASC.Files.Service.dll urls=http://0.0.0.0:5009 $STORAGE_ROOT=$dir/Data log:dir=$dir/Logs log:name=files.service pathToConf=$dir/config core:products:folder=$dir/products

build/run/macos/files.sh

@@ -0,0 +1,11 @@
+#!/bin/bash
+
+rd="$( cd "$( dirname "${BASH_SOURCE[0]}" )" >/dev/null 2>&1 && pwd )"
+echo "Run script directory:" $rd
+
+dir=$(builtin cd $rd/../../../; pwd)
+echo "Root directory:" $dir
+
+# Web API Files
+# set servicepath=%cd%\products\ASC.Files\Server\bin\Debug\ASC.Files.exe urls=http://0.0.0.0:5007 $STORAGE_ROOT=%cd%\Data log:dir=%cd%\Logs log:name=files pathToConf=%cd%\config core:products:folder=%cd%\products
+dotnet $dir/products/ASC.Files/Server/bin/Debug/ASC.Files.dll urls=http://0.0.0.0:5007 $STORAGE_ROOT=$dir/Data log:dir=$dir/Logs log:name=files pathToConf=$dir/config core:products:folder=$dir/products

build/run/macos/people.sh

@@ -0,0 +1,11 @@
+#!/bin/bash
+
+rd="$( cd "$( dirname "${BASH_SOURCE[0]}" )" >/dev/null 2>&1 && pwd )"
+echo "Run script directory:" $rd
+
+dir=$(builtin cd $rd/../../../; pwd)
+echo "Root directory:" $dir
+
+# Web API People
+# set servicepath=%cd%\products\ASC.People\Server\bin\Debug\ASC.People.exe urls=http://0.0.0.0:5004 $STORAGE_ROOT=%cd%\Data log:dir=%cd%\Logs log:name=people pathToConf=%cd%\config core:products:folder=%cd%\products
+dotnet $dir/products/ASC.People/Server/bin/Debug/ASC.People.dll urls=http://0.0.0.0:5004 $STORAGE_ROOT=$dir/Data log:dir=$dir/Logs log:name=people pathToConf=$dir/config core:products:folder=$dir/products

build/run/macos/socket.sh

@@ -0,0 +1,10 @@
+#!/bin/bash
+
+rd="$( cd "$( dirname "${BASH_SOURCE[0]}" )" >/dev/null 2>&1 && pwd )"
+echo "Run script directory:" $rd
+
+dir=$(builtin cd $rd/../../../; pwd)
+echo "Root directory:" $dir
+
+# Web Socket IO
+node $dir/common/ASC.Socket.IO/server.js --logPath=$dir/Logs 

build/run/macos/studio.sh

@@ -0,0 +1,11 @@
+#!/bin/bash
+
+rd="$( cd "$( dirname "${BASH_SOURCE[0]}" )" >/dev/null 2>&1 && pwd )"
+echo "Run script directory:" $rd
+
+dir=$(builtin cd $rd/../../../; pwd)
+echo "Root directory:" $dir
+
+# Web Studio
+# set servicepath=%cd%\web\ASC.Web.Studio\bin\Debug\ASC.Web.Studio.exe urls=http://0.0.0.0:5003 $STORAGE_ROOT=%cd%\Data  log:dir=%cd%\Logs log:name=studio pathToConf=%cd%\config core:products:folder=%cd%\products
+dotnet $dir/web/ASC.Web.Studio/bin/Debug/ASC.Web.Studio.dll urls=http://0.0.0.0:5003 $STORAGE_ROOT=$dir/Data log:dir=$dir/Logs log:name=studio pathToConf=$dir/config core:products:folder=$dir/products

build/runMigrations.sh

@@ -0,0 +1,16 @@
+#!/bin/bash
+
+echo "MIGRATIONS"
+echo off
+
+rd="$( cd "$( dirname "${BASH_SOURCE[0]}" )" >/dev/null 2>&1 && pwd )"
+echo "Run script directory:" $rd
+
+dir=$(builtin cd $rd/../; pwd)
+echo "Root directory:" $dir
+
+dotnet build $dir/asc.web.slnf 
+dotnet build $dir/ASC.Migrations.sln
+
+pushd $dir/common/Tools/ASC.Migration.Runner/bin/Debug/net6.0
+dotnet ASC.Migration.Runner.dll

build/start/command.ps1

@@ -13,7 +13,7 @@ $CommandName = "$($args[0])";
 #Write-Output  "Starting $($CommandName) services at time: $(Get-Date -Format HH:mm:ss)"
 #Write-Output  ""
 
-Get-ChildItem -Path $WorkDir | ForEach-Object -ThrottleLimit 20 -Parallel  {
+Get-ChildItem -Path $WorkDir -File | ForEach-Object -ThrottleLimit 20 -Parallel  {
     $ServiceName = "Onlyoffice$([System.IO.Path]::GetFileNameWithoutExtension($_))";
 
     switch ( $Using:CommandName )

frontend.macos.code-workspace

@@ -0,0 +1,43 @@
+{
+  "folders": [
+    {
+      "name": "🌐 root",
+      "path": "."
+    },
+    {
+      "name": "🚀 @docspace/client",
+      "path": "packages/client"
+    },
+    {
+      "name": "🔑 @docspace/login",
+      "path": "packages/login"
+    },
+    {
+      "name": "📄 @docspace/editor",
+      "path": "packages/editor"
+    },
+    {
+      "name": "📦 @docspace/common",
+      "path": "packages/common"
+    },
+    {
+      "name": "📦 @docspace/components",
+      "path": "packages/components"
+    }
+  ],
+  "settings": {
+    "window.zoomLevel": 0,
+    "editor.formatOnSave": true,
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "liveServer.settings.multiRootWorkspaceName": "✨ docspace",
+    "cSpell.words": ["docspace", "browserslist", "debuginfo", "doceditor"],
+    "jest.autoRun": "false"
+  },
+  "extensions": {
+    "recommendations": [
+      "folke.vscode-monorepo-workspace",
+      "orta.vscode-jest",
+      "firsttris.vscode-jest-runner"
+    ]
+  }
+}

packages/client/src/HOCs/withContent.js

@@ -82,7 +82,7 @@ export default function withContent(WrappedContent) {
           ? { noHover: true }
           : { onClick: onFilesClick };
 
-      if (!isDesktop && !isTrashFolder) {
+      if (!isDesktop && !isTrashFolder && !isArchiveFolder) {
         linkStyles.href = href;
       }
 

packages/client/src/components/Article/Body/Items.js

@@ -342,7 +342,7 @@ const Items = ({
         />
       );
 
-      items.splice(3, 0, filesHeader);
+      isAdmin && items.splice(3, 0, filesHeader);
       items.unshift(roomsHeader);
       items.push(otherHeader);
 
@@ -363,6 +363,7 @@ const Items = ({
       startUpload,
       uploadEmptyFolders,
       trashIsEmpty,
+      isAdmin,
     ]
   );
 

packages/client/src/components/Article/MainButton/index.js

@@ -526,7 +526,7 @@ export default inject(
 )(
   withTranslation(["Article", "UploadPanel", "Common", "Files", "People"])(
     withLoader(observer(withRouter(ArticleMainButtonContent)))(
-      <Loaders.ArticleButton />
+      <Loaders.ArticleButton height="28px" />
     )
   )
 );

packages/client/src/components/EmptyContainer/EmptyContainer.js

@@ -7,6 +7,7 @@ import {
   smallTablet,
   desktop,
 } from "@docspace/components/utils/device";
+import { isMobile } from "react-device-detect";
 
 const EmptyPageStyles = css`
   padding: 44px 0px 64px 0px;
@@ -29,8 +30,9 @@ const EmptyPageStyles = css`
   }
 
   @media ${tablet} {
-    padding: 44px 0px 64px 97px;
+    padding: 44px 0px 64px 0px;
     grid-column-gap: 33px;
+    margin-left: auto;
   }
 
   @media ${smallTablet} {
@@ -88,6 +90,13 @@ const EmptyFolderWrapper = styled.div`
       bottom: 16px;
     }
 
+    @media screen and (max-width: 1325px) {
+      ${!isMobile &&
+      css`
+        margin-left: 98px;
+      `};
+    }
+
     ${(props) => props.isEmptyPage && `${EmptyPageStyles}`}
   }
 `;

packages/client/src/components/GlobalEvents/sub-components/Dialog.js

@@ -6,7 +6,6 @@ import ModalDialog from "@docspace/components/modal-dialog";
 import TextInput from "@docspace/components/text-input";
 import Button from "@docspace/components/button";
 import ComboBox from "@docspace/components/combobox";
-import { isSafari, isTablet } from "react-device-detect";
 
 const Dialog = ({
   t,
@@ -59,13 +58,8 @@ const Dialog = ({
     e.target.select();
   }, []);
 
-  const returnWindowPositionAfterKeyboard = () => {
-    isSafari && isTablet && window.scrollTo(0, 0);
-  };
-
   const onSaveAction = useCallback(
     (e) => {
-      returnWindowPositionAfterKeyboard();
       setIsDisabled(true);
       onSave && onSave(e, value);
     },
@@ -73,12 +67,10 @@ const Dialog = ({
   );
 
   const onCancelAction = useCallback((e) => {
-    returnWindowPositionAfterKeyboard();
     onCancel && onCancel(e);
   }, []);
 
   const onCloseAction = useCallback((e) => {
-    returnWindowPositionAfterKeyboard();
     onClose && onClose(e);
   }, []);
 

packages/client/src/components/dialogs/ChangeNameDialog/index.js

@@ -1,4 +1,7 @@
 import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { inject, observer } from "mobx-react";
+
 import ModalDialog from "@docspace/components/modal-dialog";
 import FieldContainer from "@docspace/components/field-container";
 import TextInput from "@docspace/components/text-input";
@@ -8,7 +11,19 @@ import toastr from "@docspace/components/toast/toastr";
 import ModalDialogContainer from "../ModalDialogContainer";
 
 const ChangeNameDialog = (props) => {
-  const { t, tReady, visible, onClose, profile, onSave } = props;
+  const { t, ready } = useTranslation([
+    "ProfileAction",
+    "PeopleTranslations",
+    "Common",
+  ]);
+  const {
+    visible,
+    onClose,
+    profile,
+    updateProfile,
+    updateProfileInUsers,
+    fromList,
+  } = props;
   const [firstName, setFirstName] = useState(profile.firstName);
   const [lastName, setLastName] = useState(profile.lastName);
   const [isSaving, setIsSaving] = useState(false);
@@ -20,7 +35,8 @@ const ChangeNameDialog = (props) => {
 
     try {
       setIsSaving(true);
-      await onSave(newProfile);
+      const currentProfile = await updateProfile(newProfile);
+      fromList && (await updateProfileInUsers(currentProfile));
       toastr.success(t("ProfileAction:ChangesSavedSuccessfully"));
     } catch (error) {
       console.error(error);
@@ -33,7 +49,7 @@ const ChangeNameDialog = (props) => {
 
   return (
     <ModalDialogContainer
-      isLoading={!tReady}
+      isLoading={!ready}
       visible={visible}
       onClose={onClose}
       displayType="modal"
@@ -92,4 +108,10 @@ const ChangeNameDialog = (props) => {
   );
 };
 
-export default ChangeNameDialog;
+export default inject(({ peopleStore }) => {
+  const { updateProfile } = peopleStore.targetUserStore;
+
+  const { updateProfileInUsers } = peopleStore.usersStore;
+
+  return { updateProfile, updateProfileInUsers };
+})(observer(ChangeNameDialog));

packages/client/src/pages/AccountsHome/Section/Body/Dialogs.js

@@ -14,6 +14,7 @@ import {
   SendInviteDialog,
   DeleteUsersDialog,
   InviteDialog,
+  ChangeNameDialog,
 } from "SRC_DIR/components/dialogs";
 
 const Dialogs = ({
@@ -31,6 +32,10 @@ const Dialogs = ({
   sendInviteDialogVisible,
   deleteDialogVisible,
   invitationDialogVisible,
+
+  changeNameVisible,
+  setChangeNameVisible,
+  profile,
 }) => {
   return (
     <>
@@ -113,11 +118,19 @@ const Dialogs = ({
           onCloseButton={closeDialogs}
         />
       )}
+      {changeNameVisible && (
+        <ChangeNameDialog
+          visible={changeNameVisible}
+          onClose={() => setChangeNameVisible(false)}
+          profile={profile}
+          fromList
+        />
+      )}
     </>
   );
 };
 
-export default inject(({ peopleStore }) => {
+export default inject(({ auth, peopleStore }) => {
   const {
     changeEmail,
     changePassword,
@@ -136,6 +149,13 @@ export default inject(({ peopleStore }) => {
     invitationDialogVisible,
   } = peopleStore.dialogStore;
 
+  const { user: profile } = auth.userStore;
+
+  const {
+    changeNameVisible,
+    setChangeNameVisible,
+  } = peopleStore.targetUserStore;
+
   return {
     changeEmail,
     changePassword,
@@ -152,5 +172,9 @@ export default inject(({ peopleStore }) => {
     sendInviteDialogVisible,
     deleteDialogVisible,
     invitationDialogVisible,
+
+    changeNameVisible,
+    setChangeNameVisible,
+    profile,
   };
 })(observer(Dialogs));

packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContainer.js

@@ -50,7 +50,7 @@ const StyledRowContainer = styled(RowContainer)`
     .files-row {
       border-top: ${(props) =>
         `1px ${props.theme.filesSection.tableView.row.borderColor} solid`};
-      margin-top: -3px;
+      margin-top: -1px;
       ${marginStyles}
     }
   }
@@ -94,7 +94,7 @@ const FilesRowContainer = ({
       hasMoreFiles={hasMoreFiles}
       draggable
       useReactWindow={!withPaging}
-      itemHeight={58}
+      itemHeight={59}
     >
       {filesList.map((item, index) => (
         <SimpleFilesRow

packages/client/src/pages/Home/Section/Body/RowsView/SimpleFilesRow.js

@@ -39,7 +39,7 @@ const StyledWrapper = styled.div`
 const StyledSimpleFilesRow = styled(Row)`
   ${(props) => (props.checked || props.isActive) && checkedStyle};
   ${(props) => props.dragging && draggingStyle}
-  height: 57px;
+  height: 56px;
 
   ${(props) =>
     !isMobile &&
@@ -49,7 +49,7 @@ const StyledSimpleFilesRow = styled(Row)`
         cursor: pointer;
         ${checkedStyle}
 
-        margin-top: -3px;
+        margin-top: -1px;
         border-top: ${(props) =>
           `1px ${props.theme.filesSection.tableView.row.borderColor} solid`};
       }
@@ -67,13 +67,13 @@ const StyledSimpleFilesRow = styled(Row)`
       /* cursor: wait; */
     `}
 
-  margin-top: -2px;
+  margin-top: 0px;
 
   ${(props) =>
     props.showHotkeyBorder &&
     css`
       border-top: 1px solid #2da7db !important;
-      margin-top: -3px;
+      margin-top: -1px;
       margin-left: -24px;
       margin-right: -24px;
       padding-left: 24px;

packages/client/src/pages/Home/Section/Body/TableView/TableRow.js

@@ -66,7 +66,7 @@ const StyledTableRow = styled(TableRow)`
           background: ${(props) =>
             `${props.theme.filesSection.tableView.row.backgroundActive} !important`};
 
-          margin-top: -1px;
+          margin-top: ${(props) => (props.showHotkeyBorder ? "-2px" : "-1px")};
           ${(props) =>
             !props.showHotkeyBorder &&
             css`
@@ -168,13 +168,23 @@ const StyledTableRow = styled(TableRow)`
     props.showHotkeyBorder &&
     css`
       .table-container_cell {
-        margin-top: -1px;
-        border-top: 1px solid #2da7db;
+        margin-top: -2px;
+
+        border-top: 1px solid #2da7db !important;
         border-right: 0;
         border-left: 0;
       }
       .table-container_file-name-cell > .table-container_cell {
-        margin-top: 0;
+        margin-top: 2px;
+        border-top: 0px !important;
+      }
+
+      .item-file-name,
+      .row_update-text,
+      .expandButton,
+      .badges,
+      .table-container_cell > p {
+        margin-top: 2px;
       }
     `}
 `;

packages/client/src/pages/PortalSettings/Layout/Article/Body/index.js

@@ -210,7 +210,7 @@ class ArticleBodyContent extends React.Component {
           showText={showText}
           text={this.mapKeys(item.tKey)}
           value={item.link}
-          isActive={item.key + "-0" === selectedKeys[0]}
+          isActive={item.key === selectedKeys[0][0]}
           onClick={() => this.onSelect(item.key)}
         />
       );

packages/client/src/pages/Profile/Section/Body/sub-components/main-profile/index.js

@@ -21,11 +21,10 @@ import {
 import { StyledWrapper, StyledInfo } from "./styled-main-profile";
 
 const MainProfile = (props) => {
-  const { t, ready } = useTranslation(["Profile", "Common"]);
+  const { t } = useTranslation(["Profile", "Common"]);
 
   const {
     profile,
-    updateProfile,
     changeEmailVisible,
     setChangeEmailVisible,
     changePasswordVisible,
@@ -115,12 +114,9 @@ const MainProfile = (props) => {
 
       {changeNameVisible && (
         <ChangeNameDialog
-          t={t}
-          tReady={ready}
           visible={changeNameVisible}
           onClose={() => setChangeNameVisible(false)}
           profile={profile}
-          onSave={updateProfile}
         />
       )}
 
@@ -140,7 +136,6 @@ export default inject(({ peopleStore }) => {
 
   const {
     targetUser: profile,
-    updateProfile,
     changeEmailVisible,
     setChangeEmailVisible,
     changePasswordVisible,
@@ -153,7 +148,6 @@ export default inject(({ peopleStore }) => {
 
   return {
     profile,
-    updateProfile,
     changeEmailVisible,
     setChangeEmailVisible,
     changePasswordVisible,

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

@@ -21,11 +21,13 @@ class Profile extends React.Component {
       setIsLoading,
       setIsEditTargetUser,
       setLoadedProfile,
+      setSelectedNode,
     } = this.props;
     const userId = "@self";
 
     setFirstLoad(false);
     setIsEditTargetUser(false);
+    setSelectedNode(["accounts"]);
 
     setDocumentTitle(t("Common:Profile"));
     this.documentElement = document.getElementsByClassName("hidingHeader");
@@ -101,7 +103,7 @@ Profile.propTypes = {
 };
 
 export default withRouter(
-  inject(({ auth, peopleStore }) => {
+  inject(({ auth, peopleStore, treeFoldersStore }) => {
     const { setDocumentTitle, isAdmin, language } = auth;
     const { targetUserStore, loadingStore } = peopleStore;
     const {
@@ -111,6 +113,7 @@ export default withRouter(
       setIsEditTargetUser,
     } = targetUserStore;
     const { setFirstLoad, setIsLoading, setLoadedProfile } = loadingStore;
+    const { setSelectedNode } = treeFoldersStore;
     return {
       setDocumentTitle,
       isAdmin,
@@ -123,6 +126,7 @@ export default withRouter(
       setIsEditTargetUser,
       setLoadedProfile,
       showCatalog: auth.settingsStore.showCatalog,
+      setSelectedNode,
     };
   })(
     observer(withTranslation(["Profile", "Common"])(withCultureNames(Profile)))

packages/client/src/store/AccountsContextOptionsStore.js

@@ -50,7 +50,7 @@ class AccountsContextOptionsStore {
             key: option,
             icon: "images/pencil.react.svg",
             label: t("PeopleTranslations:NameChangeButton"),
-            onClick: () => this.toggleChangeNameDialog(item),
+            onClick: this.toggleChangeNameDialog,
           };
         case "change-email":
           return {
@@ -267,17 +267,10 @@ class AccountsContextOptionsStore {
     history.push(PROFILE_SELF_URL);
   };
 
-  toggleChangeNameDialog = (item) => {
-    const {
-      setDialogData,
-      setChangeNameDialogVisible,
-    } = this.peopleStore.dialogStore;
-    const { id, firstName, lastName } = item;
+  toggleChangeNameDialog = () => {
+    const { setChangeNameVisible } = this.peopleStore.targetUserStore;
 
-    setDialogData({ id, firstName, lastName });
-
-    setChangeNameDialogVisible(true);
-    toastr.warning("Work at progress");
+    setChangeNameVisible(true);
   };
 
   toggleChangeEmailDialog = (item) => {

packages/client/src/store/ContextOptionsStore.js

@@ -553,6 +553,13 @@ class ContextOptionsStore {
         onClick: () => this.onClickInviteUsers(),
         disabled: false,
       },
+      {
+        key: "room-info",
+        label: "Info",
+        icon: "/static/images/info.outline.react.svg",
+        onClick: this.onShowInfoPanel,
+        disabled: false,
+      },
       {
         key: "pin-room",
         label: t("Pin"),

packages/client/src/store/FilesActionsStore.js

@@ -664,7 +664,7 @@ class FilesActionStore {
           toastr.success(translations.successRemoveFolder);
         } else {
           this.updateFilesAfterDelete([itemId]);
-          this.filesStore.removeFiles([itemId], null, () =>
+          this.filesStore.removeFiles(null, [itemId], () =>
             toastr.success(translations.successRemoveFolder)
           );
         }

packages/client/src/store/FilesStore.js

@@ -660,6 +660,9 @@ class FilesStore {
     const filterData = filter ? filter.clone() : FilesFilter.getDefault();
     filterData.folder = folderId;
 
+    if (folderId === "@my" && this.authStore.userStore.user.isVisitor)
+      return this.fetchRooms();
+
     const filterStorageItem =
       this.authStore.userStore.user?.id &&
       localStorage.getItem(`UserFilter=${this.authStore.userStore.user.id}`);
@@ -1710,7 +1713,8 @@ class FilesStore {
 
   removeFiles = (fileIds, folderIds, showToast) => {
     const newFilter = this.filter.clone();
-    const deleteCount = fileIds.length + folderIds.length;
+    const deleteCount = (fileIds?.length ?? 0) + (folderIds?.length ?? 0);
+
     newFilter.startIndex =
       (newFilter.page + 1) * newFilter.pageCount - deleteCount;
     newFilter.pageCount = deleteCount;
@@ -1720,10 +1724,10 @@ class FilesStore {
       .then((res) => {
         const files = fileIds
           ? this.files.filter((x) => !fileIds.includes(x.id))
-          : [];
+          : this.files;
         const folders = folderIds
           ? this.folders.filter((x) => !folderIds.includes(x.id))
-          : [];
+          : this.folders;
 
         const newFiles = [...files, ...res.files];
         const newFolders = [...folders, ...res.folders];

packages/client/src/store/ProfileActionsStore.js

@@ -190,7 +190,7 @@ class ProfileActionsStore {
       hotkeys,
       {
         key: "AboutBtn",
-        icon: "/static/images/info.react.svg",
+        icon: "/static/images/info.outline.react.svg",
         label: t("Common:AboutCompanyTitle"),
         onClick: this.onAboutClick,
       },
@@ -210,7 +210,7 @@ class ProfileActionsStore {
     if (debugInfo) {
       actions.splice(3, 0, {
         key: "DebugBtn",
-        icon: "/static/images/info.react.svg",
+        icon: "/static/images/info.outline.react.svg",
         label: "Debug Info",
         onClick: this.onDebugClick,
       });

packages/common/components/Article/styled-article.js

@@ -289,6 +289,10 @@ const StyledArticleProfile = styled.div`
     padding: 16px 14px;
   `}
 
+  .profile-avatar {
+    cursor: pointer;
+  }
+
   .option-button {
     margin-left: auto;
     height: 32px;

packages/common/components/Article/sub-components/article-profile.js

@@ -15,7 +15,7 @@ import {
 } from "../styled-article";
 
 const ArticleProfile = (props) => {
-  const { user, showText, getUserRole, getActions } = props;
+  const { user, showText, getUserRole, getActions, onProfileClick } = props;
   const { t } = useTranslation("Common");
   const [isOpen, setIsOpen] = useState(false);
   const ref = useRef(null);
@@ -31,7 +31,11 @@ const ArticleProfile = (props) => {
   };
 
   const onAvatarClick = (e) => {
-    if (isTabletView && !showText) toggle(e, !isOpen);
+    if (isTabletView && !showText) {
+      toggle(e, !isOpen);
+    } else {
+      onProfileClick();
+    }
   };
 
   const onHide = () => {
@@ -46,6 +50,7 @@ const ArticleProfile = (props) => {
       <StyledArticleProfile showText={showText} tablet={isTabletView}>
         <div ref={ref}>
           <Avatar
+            className={"profile-avatar"}
             size={avatarSize}
             role={"user"}
             source={user.avatar}
@@ -94,9 +99,10 @@ const ArticleProfile = (props) => {
 
 export default withRouter(
   inject(({ auth, profileActionsStore }) => {
-    const { getActions, getUserRole } = profileActionsStore;
+    const { getActions, getUserRole, onProfileClick } = profileActionsStore;
 
     return {
+      onProfileClick,
       user: auth.userStore.user,
       getUserRole,
       getActions,

packages/components/catalog-item/styled-catalog-item.js

@@ -34,7 +34,7 @@ const StyledCatalogItemHeaderContainer = styled.div`
 
   height: 24px;
 
-  padding: 8px 12px 4px;
+  padding: 7px 12px 4px;
 
   box-sizing: border-box;
 
@@ -44,7 +44,7 @@ const StyledCatalogItemHeaderContainer = styled.div`
     font-style: normal;
     font-weight: 600;
     font-size: 11px;
-    line-height: 12px;
+    line-height: 14px;
     color: #a3a9ae;
   }
 

packages/components/combobox/styled-combobox.js

@@ -19,7 +19,7 @@ const StyledComboBox = styled.div`
     props.isOpen &&
     props.noBorder &&
     css`
-      background: #dfe2e3;
+      background: ${(props) => props.theme.comboBox.background};
       border-radius: 3px;
     `}
 

packages/components/drop-down-item/styled-drop-down-item.js

@@ -56,6 +56,20 @@ const StyledDropdownItem = styled.div`
             ? props.theme.dropDownItem.icon.disableColor
             : props.theme.dropDownItem.icon.color};
       }
+
+      circle[fill] {
+        fill: ${(props) =>
+          props.disabled
+            ? props.theme.dropDownItem.icon.disableColor
+            : props.theme.dropDownItem.icon.color};
+      }
+
+      rect[fill] {
+        fill: ${(props) =>
+          props.disabled
+            ? props.theme.dropDownItem.icon.disableColor
+            : props.theme.dropDownItem.icon.color};
+      }
     }
   }
 

packages/components/empty-screen-container/styled-empty-screen-container.js

@@ -72,6 +72,7 @@ const EmptyContentBody = styled.div`
   grid-column-gap: 16px;
   grid-row-gap: 10px;
   max-width: 800px;
+
   grid-template-rows: max-content;
   .ec-image {
     grid-area: img;
@@ -79,6 +80,10 @@ const EmptyContentBody = styled.div`
     ${NoUserSelect}
   }
 
+  @media ${tablet} {
+    max-width: 480px;
+  }
+
   .ec-header {
     grid-area: headerText;
     padding-top: 16px;
@@ -104,7 +109,6 @@ const EmptyContentBody = styled.div`
   @media (orientation: portrait) {
     @media (max-width: 768px) {
       padding-top: 0px;
-      max-width: 700px;
 
       .ec-image {
         max-height: 100px;

packages/components/infinite-loader/StyledInfiniteLoader.js

@@ -1,7 +1,8 @@
 import { List } from "react-virtualized";
 import styled, { css } from "styled-components";
 import Base from "../themes/base";
-import { desktop, mobile, tablet } from "../utils/device";
+import { mobile, tablet } from "../utils/device";
+import { isMobile } from "react-device-detect";
 
 const StyledScroll = styled.div`
   overflow: scroll;
@@ -31,10 +32,10 @@ const StyledScroll = styled.div`
 
 const rowStyles = css`
   margin-left: -20px;
-  width: ${({ width }) => width + 36 + "px !important"};
+  width: ${({ width }) => width + (isMobile ? 36 : 40) + "px !important"};
 
   .ReactVirtualized__Grid__innerScrollContainer {
-    max-width: ${({ width }) => width + 36 + "px !important"};
+    max-width: ${({ width }) => width + (isMobile ? 36 : 40) + "px !important"};
   }
 
   @media ${tablet} {

packages/components/modal-dialog/index.js

@@ -8,7 +8,7 @@ import ModalAside from "./views/modal-aside";
 import { handleTouchMove, handleTouchStart } from "./handlers/swipeHandler";
 import { getCurrentDisplayType } from "./handlers/resizeHandler";
 import { parseChildren } from "./handlers/childrenParseHandler";
-import { isMobile } from "react-device-detect";
+import { isSafari, isTablet } from "react-device-detect";
 
 const Header = () => null;
 Header.displayName = "DialogHeader";
@@ -46,7 +46,9 @@ const ModalDialog = ({
     getCurrentDisplayType(displayType, displayTypeDetailed)
   );
   const [modalSwipeOffset, setModalSwipeOffset] = useState(0);
-
+  const returnWindowPositionAfterKeyboard = () => {
+    isSafari && isTablet && window.scrollY !== 0 && window.scrollTo(0, 0);
+  };
   useEffect(() => {
     const onResize = throttle(() => {
       setCurrentDisplayType(
@@ -65,6 +67,8 @@ const ModalDialog = ({
     window.addEventListener("touchmove", onSwipe);
     window.addEventListener("touchend", onSwipeEnd);
     return () => {
+      returnWindowPositionAfterKeyboard();
+
       window.removeEventListener("resize", onResize);
       window.removeEventListener("keyup", onKeyPress);
       window.removeEventListener("touchstart", handleTouchStart);

packages/components/row-content/styled-row-content.js

@@ -79,7 +79,9 @@ const MainContainerWrapper = styled.div`
       props.widthProp &&
       props.widthProp < size.tablet) ||
     props.isMobile
-      ? `${mainWrapperTabletStyle}`
+      ? css`
+          ${mainWrapperTabletStyle}
+        `
       : `
   `}
   @media ${tablet} {

packages/components/themes/base.js

@@ -1528,6 +1528,7 @@ const Base = {
 
   comboBox: {
     padding: "6px 0px",
+    background: lightGrayishStrongBlue,
 
     width: {
       base: "173px",

packages/components/themes/dark.js

@@ -1525,6 +1525,7 @@ const Dark = {
 
   comboBox: {
     padding: "6px 0px",
+    background: black,
 
     width: {
       base: "173px",
@@ -1614,10 +1615,11 @@ const Dark = {
   },
 
   toggleButton: {
-    fillColor: grayMaxLight,
+    fillColor: "#F0F0F0",
     fillColorOff: "#292929",
 
     disableFillColor: black,
+    disableFillColorOff: "#545454",
 
     borderColor: "#474747",
     borderColorOff: "#474747",
@@ -1625,11 +1627,11 @@ const Dark = {
     disableBorderColor: "#474747",
     disableBorderColorOff: "#646464",
 
-    fillCircleColor: "#FFFFFF",
+    fillCircleColor: "#292929",
     fillCircleColorOff: grayMaxLight,
 
-    disableFillCircleColor: "#333333",
-    disableFillCircleColorOff: "#797979",
+    disableFillCircleColor: "#545454",
+    disableFillCircleColorOff: black,
   },
 
   contextMenuButton: {

packages/components/toggle-button/index.js

@@ -1,15 +1,8 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
-import {
-  ToggleButtonContainer,
-  HiddenInput,
-  Container,
-} from "./styled-toggle-button";
+import { ToggleButtonContainer, HiddenInput } from "./styled-toggle-button";
 import Text from "../text";
-import globalColors from "../utils/globalColors";
 import { motion } from "framer-motion";
-import Base from "../themes/base";
-
 import { ColorTheme, ThemeType } from "@docspace/common/components/ColorTheme";
 
 const ToggleIcon = ({ isChecked, isLoading }) => {
@@ -72,16 +65,12 @@ class ToggleButton extends Component {
       className,
       style,
       isLoading,
-      theme,
     } = this.props;
-    const { gray } = globalColors;
-    const colorProps = isDisabled ? { color: gray } : {};
 
     //console.log("ToggleButton render");
 
     return (
       <ColorTheme
-        theme={theme}
         themeId={ThemeType.ToggleButton}
         id={id}
         className={className}
@@ -102,7 +91,7 @@ class ToggleButton extends Component {
           />
           <ToggleIcon isChecked={this.state.checked} isLoading={isLoading} />
           {label && (
-            <Text className="toggle-button-text" as="span" {...colorProps}>
+            <Text className="toggle-button-text" as="span">
               {label}
             </Text>
           )}

packages/components/toggle-button/styled-toggle-button.js

@@ -36,9 +36,12 @@ const ToggleButtonContainer = styled.label`
             rect {
               fill: ${props.isChecked
                 ? props.theme.toggleButton.disableFillColor
-                : props.theme.toggleButton.fillColorOff};
+                : props.theme.toggleButton.disableFillColorOff};
               stroke-width: 1px;
               stroke-linecap: round;
+              stroke: ${props.isChecked
+                ? props.theme.toggleButton.borderColor
+                : props.theme.toggleButton.borderColorOff};
             }
             circle {
               fill: ${props.isChecked
@@ -52,6 +55,9 @@ const ToggleButtonContainer = styled.label`
                 ? props.theme.toggleButton.fillColor
                 : props.theme.toggleButton.fillColorOff};
               stroke-width: 1px;
+              stroke: ${props.isChecked
+                ? props.theme.toggleButton.borderColor
+                : props.theme.toggleButton.borderColor};
             }
             circle {
               fill: ${props.isChecked