Merge branch 'develop' into feature/stripe

packages/client/src/store/ContextOptionsStore.js

@@ -551,7 +551,7 @@ class ContextOptionsStore {
       {
         key: "room-info",
         label: "Info",
-        icon: "/static/images/info.react.svg",
+        icon: "/static/images/info.outline.react.svg",
         onClick: this.onShowInfoPanel,
         disabled: false,
       },

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

@@ -1702,7 +1702,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;
@@ -1712,10 +1713,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

@@ -193,7 +193,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,
       },
@@ -213,7 +213,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/components/drop-down-item/styled-drop-down-item.js

@@ -63,6 +63,13 @@ const StyledDropdownItem = styled.div`
             ? 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/themes/dark.js

@@ -1621,10 +1621,11 @@ const Dark = {
   },
 
   toggleButton: {
-    fillColor: grayMaxLight,
+    fillColor: "#F0F0F0",
     fillColorOff: "#292929",
 
     disableFillColor: black,
+    disableFillColorOff: "#545454",
 
     borderColor: "#474747",
     borderColorOff: "#474747",
@@ -1632,11 +1633,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