Merge branch 'develop' into feature/shared-redesign-third-party

2022-10-06 12:56:09 +03:00 · 2022-10-06 12:56:09 +03:00 · ac85ff775e
commit ac85ff775e
parent 2b471fc610 39b15a7117
31 changed files with 274 additions and 45 deletions
--- a/build/build.sh
+++ b/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
--- a/build/run/macos/api.sh
+++ b/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
--- a/build/run/macos/backend.sh
+++ b/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 &
--- a/build/run/macos/docker-tools/docker-compose.yml
+++ b/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:
--- a/build/run/macos/files.service.sh
+++ b/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
--- a/build/run/macos/files.sh
+++ b/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
--- a/build/run/macos/people.sh
+++ b/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
--- a/build/run/macos/socket.sh
+++ b/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 
--- a/build/run/macos/studio.sh
+++ b/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
--- a/build/runMigrations.sh
+++ b/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
--- a/build/start/command.ps1
+++ b/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 )
--- a/frontend.macos.code-workspace
+++ b/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"
+    ]
+  }
+}
--- a/packages/client/src/components/Article/Body/Items.js
+++ b/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,
    ]
  );

--- a/packages/client/src/components/Article/MainButton/index.js
+++ b/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" />
    )
  )
 );
--- a/packages/client/src/components/EmptyContainer/EmptyContainer.js
+++ b/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}`}
  }
 `;
--- a/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContainer.js
+++ b/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
--- a/packages/client/src/pages/Home/Section/Body/RowsView/SimpleFilesRow.js
+++ b/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;
--- a/packages/client/src/store/ContextOptionsStore.js
+++ b/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,
      },
--- a/packages/client/src/store/FilesActionsStore.js
+++ b/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)
          );
        }
--- a/packages/client/src/store/FilesStore.js
+++ b/packages/client/src/store/FilesStore.js
@ -664,6 +664,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}`);
@ -1703,7 +1706,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;
@ -1713,10 +1717,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];
--- a/packages/client/src/store/ProfileActionsStore.js
+++ b/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,
      });
--- a/packages/common/components/Article/styled-article.js
+++ b/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;
--- a/packages/common/components/Article/sub-components/article-profile.js
+++ b/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,
--- a/packages/components/catalog-item/styled-catalog-item.js
+++ b/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;
  }

--- a/packages/components/drop-down-item/styled-drop-down-item.js
+++ b/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};
+      }
    }
  }

--- a/packages/components/empty-screen-container/styled-empty-screen-container.js
+++ b/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;
--- a/packages/components/infinite-loader/StyledInfiniteLoader.js
+++ b/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} {
--- a/packages/components/row-content/styled-row-content.js
+++ b/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} {
--- a/packages/components/themes/dark.js
+++ b/packages/components/themes/dark.js
@ -1614,10 +1614,11 @@ const Dark = {
  },

  toggleButton: {
-    fillColor: grayMaxLight,
+    fillColor: "#F0F0F0",
    fillColorOff: "#292929",

    disableFillColor: black,
+    disableFillColorOff: "#545454",

    borderColor: "#474747",
    borderColorOff: "#474747",
@ -1625,11 +1626,11 @@ const Dark = {
    disableBorderColor: "#474747",
    disableBorderColorOff: "#646464",

-    fillCircleColor: "#FFFFFF",
+    fillCircleColor: "#292929",
    fillCircleColorOff: grayMaxLight,

-    disableFillCircleColor: "#333333",
-    disableFillCircleColorOff: "#797979",
+    disableFillCircleColor: "#545454",
+    disableFillCircleColorOff: black,
  },

  contextMenuButton: {
--- a/packages/components/toggle-button/index.js
+++ b/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>
          )}
--- a/packages/components/toggle-button/styled-toggle-button.js
+++ b/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