From 73c1ea02c85fc039943fefd1f3f11679050f0d2e Mon Sep 17 00:00:00 2001 From: Viktor Fomin Date: Fri, 28 Jun 2024 14:12:37 +0300 Subject: [PATCH] Client: use colors from theme --- .../client/src/components/Article/MainButton/index.js | 3 ++- .../NavMenu/sub-components/header-catalog-burger.js | 4 ++-- .../src/components/NavMenu/sub-components/header-nav.js | 3 ++- .../components/NavMenu/sub-components/header-unauth.js | 4 ++-- .../src/components/NavMenu/sub-components/header.js | 4 ++-- .../components/NavMenu/sub-components/nav-logo-item.js | 3 ++- .../client/src/components/NavMenu/sub-components/nav.js | 4 ++-- .../panels/EmbeddingPanel/StyledEmbeddingPanel.js | 3 ++- packages/client/src/components/panels/StyledPanels.js | 8 ++++---- .../src/pages/FormGallery/TilesView/StyledTileView.js | 5 ++--- .../src/pages/Home/InfoPanel/Body/styles/gallery.js | 4 ++-- .../Section/AccountsBody/Groups/RowView/index.styled.js | 4 ++-- .../AccountsBody/InsideGroup/RowView/SimpleUserRow.js | 4 ++-- .../Section/AccountsBody/People/RowView/SimpleUserRow.js | 5 ++--- .../pages/Home/Section/Body/RowsView/SimpleFilesRow.js | 2 +- .../src/pages/Home/Section/Body/TableView/StyledTable.js | 2 +- .../Home/Section/Body/TilesView/sub-components/Tile.js | 2 +- packages/client/src/pages/Home/Section/Header/index.js | 3 ++- .../categories/data-management/backup/StyledBackup.js | 2 +- .../WebhookHistory/sub-components/HistoryHeader.js | 2 +- 20 files changed, 37 insertions(+), 34 deletions(-) diff --git a/packages/client/src/components/Article/MainButton/index.js b/packages/client/src/components/Article/MainButton/index.js index 5aebd88ad4..2a9c0b3d31 100644 --- a/packages/client/src/components/Article/MainButton/index.js +++ b/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}; } `; diff --git a/packages/client/src/components/NavMenu/sub-components/header-catalog-burger.js b/packages/client/src/components/NavMenu/sub-components/header-catalog-burger.js index 8e13650f44..701c023227 100644 --- a/packages/client/src/components/NavMenu/sub-components/header-catalog-burger.js +++ b/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)` diff --git a/packages/client/src/components/NavMenu/sub-components/header-nav.js b/packages/client/src/components/NavMenu/sub-components/header-nav.js index 5985317390..b8bd991a30 100644 --- a/packages/client/src/components/NavMenu/sub-components/header-nav.js +++ b/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 = ({ diff --git a/packages/client/src/components/NavMenu/sub-components/header-unauth.js b/packages/client/src/components/NavMenu/sub-components/header-unauth.js index 7b69d7db28..fcd664300a 100644 --- a/packages/client/src/components/NavMenu/sub-components/header-unauth.js +++ b/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 { diff --git a/packages/client/src/components/NavMenu/sub-components/header.js b/packages/client/src/components/NavMenu/sub-components/header.js index fb62f7dfd6..4f5fcb8982 100644 --- a/packages/client/src/components/NavMenu/sub-components/header.js +++ b/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} } diff --git a/packages/client/src/components/NavMenu/sub-components/nav-logo-item.js b/packages/client/src/components/NavMenu/sub-components/nav-logo-item.js index 4087180820..18b80c09fc 100644 --- a/packages/client/src/components/NavMenu/sub-components/nav-logo-item.js +++ b/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} } diff --git a/packages/client/src/components/NavMenu/sub-components/nav.js b/packages/client/src/components/NavMenu/sub-components/nav.js index 8c74b944a5..3c36f84998 100644 --- a/packages/client/src/components/NavMenu/sub-components/nav.js +++ b/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; diff --git a/packages/client/src/components/panels/EmbeddingPanel/StyledEmbeddingPanel.js b/packages/client/src/components/panels/EmbeddingPanel/StyledEmbeddingPanel.js index df4dccbfc6..22ed225f08 100644 --- a/packages/client/src/components/panels/EmbeddingPanel/StyledEmbeddingPanel.js +++ b/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 { diff --git a/packages/client/src/components/panels/StyledPanels.js b/packages/client/src/components/panels/StyledPanels.js index 26f59357d5..67d68aa528 100644 --- a/packages/client/src/components/panels/StyledPanels.js +++ b/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 { diff --git a/packages/client/src/pages/FormGallery/TilesView/StyledTileView.js b/packages/client/src/pages/FormGallery/TilesView/StyledTileView.js index 7d7ce0a3ba..3e828fa231 100644 --- a/packages/client/src/pages/FormGallery/TilesView/StyledTileView.js +++ b/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} diff --git a/packages/client/src/pages/Home/InfoPanel/Body/styles/gallery.js b/packages/client/src/pages/Home/InfoPanel/Body/styles/gallery.js index f697199a47..075027296e 100644 --- a/packages/client/src/pages/Home/InfoPanel/Body/styles/gallery.js +++ b/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}`}; diff --git a/packages/client/src/pages/Home/Section/AccountsBody/Groups/RowView/index.styled.js b/packages/client/src/pages/Home/Section/AccountsBody/Groups/RowView/index.styled.js index ceafd96b8b..3c4f69658d 100644 --- a/packages/client/src/pages/Home/Section/AccountsBody/Groups/RowView/index.styled.js +++ b/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; diff --git a/packages/client/src/pages/Home/Section/AccountsBody/InsideGroup/RowView/SimpleUserRow.js b/packages/client/src/pages/Home/Section/AccountsBody/InsideGroup/RowView/SimpleUserRow.js index d313f3f2cf..711f610819 100644 --- a/packages/client/src/pages/Home/Section/AccountsBody/InsideGroup/RowView/SimpleUserRow.js +++ b/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; diff --git a/packages/client/src/pages/Home/Section/AccountsBody/People/RowView/SimpleUserRow.js b/packages/client/src/pages/Home/Section/AccountsBody/People/RowView/SimpleUserRow.js index ec255b2b32..6e99aad333 100644 --- a/packages/client/src/pages/Home/Section/AccountsBody/People/RowView/SimpleUserRow.js +++ b/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; diff --git a/packages/client/src/pages/Home/Section/Body/RowsView/SimpleFilesRow.js b/packages/client/src/pages/Home/Section/Body/RowsView/SimpleFilesRow.js index add06730d4..21a9b6a964 100644 --- a/packages/client/src/pages/Home/Section/Body/RowsView/SimpleFilesRow.js +++ b/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; diff --git a/packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js b/packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js index a6df2e2b43..f91960526b 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js +++ b/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}; } `; diff --git a/packages/client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js b/packages/client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js index d0cc7af207..5af82e8f55 100644 --- a/packages/client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js +++ b/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)}; diff --git a/packages/client/src/pages/Home/Section/Header/index.js b/packages/client/src/pages/Home/Section/Header/index.js index 664438e466..5d87326515 100644 --- a/packages/client/src/pages/Home/Section/Header/index.js +++ b/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; diff --git a/packages/client/src/pages/PortalSettings/categories/data-management/backup/StyledBackup.js b/packages/client/src/pages/PortalSettings/categories/data-management/backup/StyledBackup.js index 5e24182fc5..f533ddc2ed 100644 --- a/packages/client/src/pages/PortalSettings/categories/data-management/backup/StyledBackup.js +++ b/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}; } `; diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/HistoryHeader.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/HistoryHeader.js index 76fd740179..e94f5797a3 100644 --- a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/HistoryHeader.js +++ b/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;