Client: use colors from theme

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

@@ -70,6 +70,7 @@ import { getCorrectFourValuesStyle } from "@docspace/shared/utils";
 import { ArticleButtonLoader } from "@docspace/shared/skeletons/article";
 import { isMobile, isTablet } from "react-device-detect";
 import { PRODUCT_NAME } from "@docspace/shared/constants";
+import { globalColors } from "@docspace/shared/themes";
 
 const StyledButton = styled(Button)`
   font-weight: 700;
@@ -121,7 +122,7 @@ const StyledButton = styled(Button)`
     border-radius: 3px;
 
     user-select: none;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-tap-highlight-color: ${globalColors.tapHighlight};
   }
 `;
 

packages/client/src/components/NavMenu/sub-components/header-catalog-burger.js

@@ -30,7 +30,7 @@ import PropTypes from "prop-types";
 
 import MenuIcon from "PUBLIC_DIR/images/menu.react.svg";
 import { mobile } from "@docspace/shared/utils";
-import { Base } from "@docspace/shared/themes";
+import { Base, globalColors } from "@docspace/shared/themes";
 
 const StyledIconBox = styled.div`
   display: none;
@@ -45,7 +45,7 @@ const StyledIconBox = styled.div`
     theme.interfaceDirection === "rtl"
       ? `padding-right: 16px;`
       : `padding-left: 16px;`}
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: ${globalColors.tapHighlight};
 `;
 
 const StyledMenuIcon = styled(MenuIcon)`

packages/client/src/components/NavMenu/sub-components/header-nav.js

@@ -35,6 +35,7 @@ import {
   getCorrectFourValuesStyle,
 } from "@docspace/shared/utils";
 import { inject, observer } from "mobx-react";
+import { globalColors } from "@docspace/shared/themes";
 
 const StyledNav = styled.nav`
   display: flex;
@@ -62,7 +63,7 @@ const StyledNav = styled.nav`
   }
   .icon-profile-menu {
     cursor: pointer;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-tap-highlight-color: ${globalColors.tapHighlight};
   }
 `;
 const HeaderNav = ({

packages/client/src/components/NavMenu/sub-components/header-unauth.js

@@ -29,7 +29,7 @@ import PropTypes from "prop-types";
 import styled from "styled-components";
 import { Box } from "@docspace/shared/components/box";
 import { inject, observer } from "mobx-react";
-import { Base } from "@docspace/shared/themes";
+import { Base, globalColors } from "@docspace/shared/themes";
 import { mobile, getLogoUrl } from "@docspace/shared/utils";
 import { WhiteLabelLogoType } from "@docspace/shared/enums";
 import { LanguageCombobox } from "@docspace/shared/components/language-combobox";
@@ -58,7 +58,7 @@ const Header = styled.header`
   }
 
   .header-logo-wrapper {
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-tap-highlight-color: ${globalColors.tapHighlight};
   }
 
   .header-logo-min_icon {

packages/client/src/components/NavMenu/sub-components/header.js

@@ -42,7 +42,7 @@ import {
 import { WhiteLabelLogoType } from "@docspace/shared/enums";
 import { combineUrl } from "@docspace/shared/utils/combineUrl";
 import HeaderCatalogBurger from "./header-catalog-burger";
-import { Base } from "@docspace/shared/themes";
+import { Base, globalColors } from "@docspace/shared/themes";
 
 const Header = styled.header`
   display: flex;
@@ -59,7 +59,7 @@ const Header = styled.header`
     display: flex;
     align-items: center;
     justify-items: center;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-tap-highlight-color: ${globalColors.tapHighlight};
 
     ${NoUserSelect}
   }

packages/client/src/components/NavMenu/sub-components/nav-logo-item.js

@@ -31,6 +31,7 @@ import styled from "styled-components";
 import { inject, observer } from "mobx-react";
 import { NoUserSelect, getLogoUrl } from "@docspace/shared/utils";
 import { WhiteLabelLogoType } from "@docspace/shared/enums";
+import { globalColors } from "@docspace/shared/themes";
 
 const LogoItem = styled.div`
   display: flex;
@@ -41,7 +42,7 @@ const LogoItem = styled.div`
   cursor: pointer;
 
   .nav-logo-wrapper {
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-tap-highlight-color: ${globalColors.tapHighlight};
     ${NoUserSelect}
   }
 

packages/client/src/components/NavMenu/sub-components/nav.js

@@ -29,7 +29,7 @@ import PropTypes from "prop-types";
 import styled from "styled-components";
 import { Scrollbar } from "@docspace/shared/components/scrollbar";
 import { isMobileOnly, isMobile } from "react-device-detect";
-import { Base } from "@docspace/shared/themes";
+import { Base, globalColors } from "@docspace/shared/themes";
 
 const StyledNav = styled.nav`
   background-color: ${(props) => props.theme.nav.backgroundColor};
@@ -44,7 +44,7 @@ const StyledNav = styled.nav`
   transition: width 0.3s ease-in-out;
   width: ${(props) => (props.opened ? "240px" : "0")};
   z-index: 200;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: ${globalColors.tapHighlight};
 
   .version-box {
     position: absolute;

packages/client/src/components/panels/EmbeddingPanel/StyledEmbeddingPanel.js

@@ -26,6 +26,7 @@
 
 import styled, { css } from "styled-components";
 import { ModalDialog } from "@docspace/shared/components/modal-dialog";
+import { globalColors } from "@docspace/shared/themes";
 
 const StyledModalDialog = styled(ModalDialog)`
   .modal-header {
@@ -118,7 +119,7 @@ const StyledBody = styled.div`
 
   .embedding-panel_code-container {
     margin-top: 16px;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-tap-highlight-color: ${globalColors.tapHighlight};
   }
 
   .embedding-panel_text {

packages/client/src/components/panels/StyledPanels.js

@@ -29,7 +29,7 @@ import { Scrollbar } from "@docspace/shared/components/scrollbar";
 import { Link } from "@docspace/shared/components/link";
 import { desktop, mobile, tablet } from "@docspace/shared/utils";
 import { isMobile } from "react-device-detect";
-import { Base } from "@docspace/shared/themes";
+import { Base, globalColors } from "@docspace/shared/themes";
 
 const PanelStyles = css`
   .panel_combo-box {
@@ -507,7 +507,7 @@ const StyledLinkRow = styled.div`
   .row_content {
     display: grid;
     grid-template-columns: 1fr 28px;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-tap-highlight-color: ${globalColors.tapHighlight};
   }
 
   .combo-button {
@@ -596,7 +596,7 @@ const StyledModalRowContainer = styled.div`
   }
 
   .embedding-panel_code-container {
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-tap-highlight-color: ${globalColors.tapHighlight};
   }
 
   .embedding-panel_text {
@@ -654,7 +654,7 @@ const StyledModalRowContainer = styled.div`
   }
 
   .embedding-panel_code-container {
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-tap-highlight-color: ${globalColors.tapHighlight};
   }
 
   .embedding-panel_text {

packages/client/src/pages/FormGallery/TilesView/StyledTileView.js

@@ -25,7 +25,7 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
 import styled, { css } from "styled-components";
-import { Base } from "@docspace/shared/themes";
+import { Base, globalColors } from "@docspace/shared/themes";
 import TileContent from "./sub-components/TileContent";
 import { ContextMenu } from "@docspace/shared/components/context-menu";
 
@@ -36,7 +36,6 @@ import {
   mobileMore,
   getCorrectFourValuesStyle,
 } from "@docspace/shared/utils";
-import { globalColors } from "@docspace/shared/themes";
 
 const FlexBoxStyles = css`
   display: flex;
@@ -60,7 +59,7 @@ const StyledTile = styled.div`
   border-radius: 6px;
   ${(props) =>
     props.showHotkeyBorder && `border-color: ${globalColors.lightSecondMain}`};
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: ${globalColors.tapHighlight};
 
   ${(props) => props.isSelected && checkedStyle}
 

packages/client/src/pages/Home/InfoPanel/Body/styles/gallery.js

@@ -26,14 +26,14 @@
 
 import styled from "styled-components";
 import { isMobileOnly } from "react-device-detect";
-import { Base } from "@docspace/shared/themes";
+import { Base, globalColors } from "@docspace/shared/themes";
 
 const StyledGalleryThumbnail = styled.div`
   box-sizing: border-box;
   width: 100%;
   overflow: hidden;
   border-radius: 6px;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: ${globalColors.tapHighlight};
   height: ${isMobileOnly ? "335px" : "346px"};
   border: ${(props) =>
     `solid 1px ${props.theme.infoPanel.gallery.borderColor}`};

packages/client/src/pages/Home/Section/AccountsBody/Groups/RowView/index.styled.js

@@ -28,7 +28,7 @@ import styled, { css } from "styled-components";
 import { RowContainer } from "@docspace/shared/components/row-container";
 import { isMobile, isTablet } from "react-device-detect";
 import { Row } from "@docspace/shared/components/row";
-import { Base } from "@docspace/shared/themes";
+import { Base, globalColors } from "@docspace/shared/themes";
 import { mobile, tablet } from "@docspace/shared/utils/device";
 import { RowContent } from "@docspace/shared/components/row-content";
 
@@ -142,7 +142,7 @@ export const GroupsRow = styled(Row)`
 
   position: unset;
 
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: ${globalColors.tapHighlight};
   .styled-element {
     height: 32px;
     margin-inline-end: 12px;

packages/client/src/pages/Home/Section/AccountsBody/InsideGroup/RowView/SimpleUserRow.js

@@ -29,7 +29,7 @@ import styled, { css } from "styled-components";
 import { isMobile } from "react-device-detect";
 
 import { Row } from "@docspace/shared/components/row";
-import { Base } from "@docspace/shared/themes";
+import { Base, globalColors } from "@docspace/shared/themes";
 
 import withContent from "SRC_DIR/HOCs/withPeopleContent";
 
@@ -112,7 +112,7 @@ const StyledSimpleUserRow = styled(Row)`
   `}
 
   position: unset;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: ${globalColors.tapHighlight};
 
   .styled-element {
     height: 32px;

packages/client/src/pages/Home/Section/AccountsBody/People/RowView/SimpleUserRow.js

@@ -29,7 +29,7 @@ import styled, { css } from "styled-components";
 import { isMobile } from "react-device-detect";
 
 import { Row } from "@docspace/shared/components/row";
-import { Base } from "@docspace/shared/themes";
+import { Base, globalColors } from "@docspace/shared/themes";
 
 import withContent from "SRC_DIR/HOCs/withPeopleContent";
 
@@ -112,8 +112,7 @@ const StyledSimpleUserRow = styled(Row)`
   `}
 
   position: unset;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: ${globalColors.tapHighlight};
-
   .styled-element {
     height: 32px;
     margin-inline-end: 12px;

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

@@ -145,7 +145,7 @@ const StyledSimpleFilesRow = styled(Row)`
       }
   `}
 
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: ${globalColors.tapHighlight};
 
   .styled-element {
     height: 32px;

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

@@ -478,7 +478,7 @@ const StyledQuickButtonsContainer = styled.div`
       fill: ${(props) =>
         props.theme.filesSection.tableView.row.shareHoverColor};
     }
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-tap-highlight-color: ${globalColors.tapHighlight};
   }
 `;
 

packages/client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js

@@ -158,7 +158,7 @@ const StyledTile = styled.div`
     props.showHotkeyBorder && `border-color: ${globalColors.lightSecondMain}`};
   ${(props) =>
     props.isFolder && !props.isRooms && "border-top-left-radius: 6px;"}
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: ${globalColors.tapHighlight};
 
   ${(props) => props.isFolder && (props.isRoom ? roomsStyles : FlexBoxStyles)};
   ${(props) => (props.isFolder ? FolderStyles : FileStyles)};

packages/client/src/pages/Home/Section/Header/index.js

@@ -50,6 +50,7 @@ import {
   getCategoryUrl,
 } from "SRC_DIR/helpers/utils";
 import TariffBar from "SRC_DIR/components/TariffBar";
+import { globalColors } from "@docspace/shared/themes";
 
 const StyledContainer = styled.div`
   width: 100%;
@@ -64,7 +65,7 @@ const StyledContainer = styled.div`
         : css`
             margin: 0 0 0 -20px;
           `}
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-tap-highlight-color: ${globalColors.tapHighlight};
 
     width: calc(100% + 40px);
     height: 68px;

packages/client/src/pages/PortalSettings/categories/data-management/backup/StyledBackup.js

@@ -125,7 +125,7 @@ const commonStyles = css`
     max-width: fit-content;
     font-size: 12px;
     line-height: 15px;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-tap-highlight-color: ${globalColors.tapHighlight};
   }
 `;
 

packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/HistoryHeader.js

@@ -103,7 +103,7 @@ const HeaderContainer = styled.div`
     margin-block: 0;
     margin-inline: -20px 0;
 
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-tap-highlight-color: ${globalColors.tapHighlight};
 
     flex: 0 0 auto;