From b4698bf439a4cb1d84f3f7297cf2b9ce4b8e0b93 Mon Sep 17 00:00:00 2001
From: Viktor Fomin <viktor.fomin@onlyoffice.com>
Date: Thu, 20 Jun 2024 11:29:42 +0300
Subject: [PATCH] Client: use colors from theme

---
 .../NavMenu/sub-components/nav-item.js         |  6 +++---
 .../sub-components/ExternalLinks.js            |  5 +++--
 .../Groups/TableView/GroupsTableItem.js        |  3 ++-
 .../Body/TableView/sub-components/RoomCell.js  |  3 ++-
 .../categories/common/Appearance/preview.js    | 18 ++++++++++++++++--
 .../common/Customization/dns-settings.js       |  2 +-
 .../AccountsTable/RowView/index.js             |  3 ++-
 .../sub-components/TooltipContent.js           |  3 ++-
 .../JavascriptSDK/sub-components/csp.js        |  3 ++-
 .../FilterDialog/DeliveryDatePicker.js         | 12 +++++++++---
 .../WebhookHistory/sub-components/StatusBar.js |  3 ++-
 .../HistoryRowView/HistoryRowContent.js        |  3 ++-
 .../WebhooksRowView/WebhookRowContent.js       |  3 ++-
 .../WebhooksTableView/WebhooksTableRow.js      |  3 ++-
 .../storage-management/StyledComponent.js      |  3 ++-
 .../SessionsTable/RowView/SessionsRow.js       |  7 ++++++-
 .../RowView/SessionsRowContent.js              |  7 ++++++-
 .../TableView/SessionsTableRow.js              |  3 ++-
 .../src/pages/PublicRoom/StyledPublicRoom.js   |  4 ++--
 19 files changed, 68 insertions(+), 26 deletions(-)

diff --git a/packages/client/src/components/NavMenu/sub-components/nav-item.js b/packages/client/src/components/NavMenu/sub-components/nav-item.js
index c283c91396..be5aad8fa0 100644
--- a/packages/client/src/components/NavMenu/sub-components/nav-item.js
+++ b/packages/client/src/components/NavMenu/sub-components/nav-item.js
@@ -39,7 +39,7 @@ import {
 } from "@docspace/shared/utils";
 
 import MenuIcon from "PUBLIC_DIR/images/menu.react.svg";
-import { Base } from "@docspace/shared/themes";
+import { Base, globalColors } from "@docspace/shared/themes";
 
 const NavItemSeparator = styled.div`
   border-bottom: 1px ${(props) => (props.dashed ? "dashed" : "solid")}
@@ -127,9 +127,9 @@ const NavItemBadge = styled(Badge)`
 `;
 
 const VersionBadge = styled.div`
-  background-color: #3cb55b;
+  background-color: ${globalColors.lightStatusPositive};
   border-radius: 5px;
-  color: #ffffff;
+  color: ${globalColors.white};
   display: inline-block;
   font-size: 10px;
   line-height: 8px;
diff --git a/packages/client/src/components/panels/InvitePanel/sub-components/ExternalLinks.js b/packages/client/src/components/panels/InvitePanel/sub-components/ExternalLinks.js
index d38f02d409..dcae7f306f 100644
--- a/packages/client/src/components/panels/InvitePanel/sub-components/ExternalLinks.js
+++ b/packages/client/src/components/panels/InvitePanel/sub-components/ExternalLinks.js
@@ -50,6 +50,7 @@ import {
   StyledDescription,
 } from "../StyledInvitePanel";
 import { PRODUCT_NAME } from "@docspace/shared/constants";
+import { globalColors } from "@docspace/shared/themes";
 
 const ExternalLinks = ({
   t,
@@ -191,8 +192,8 @@ const ExternalLinks = ({
             <IconButton
               size={16}
               iconName={MediaDownloadReactSvgUrl}
-              hoverColor="#333333"
-              iconColor="#A3A9AE"
+              hoverColor={globalColors.black}
+              iconColor={globalColors.gray}
               onClick={toggleActionLinks}
             />
             <DropDown
diff --git a/packages/client/src/pages/Home/Section/AccountsBody/Groups/TableView/GroupsTableItem.js b/packages/client/src/pages/Home/Section/AccountsBody/Groups/TableView/GroupsTableItem.js
index be763572ba..3a8aece55f 100644
--- a/packages/client/src/pages/Home/Section/AccountsBody/Groups/TableView/GroupsTableItem.js
+++ b/packages/client/src/pages/Home/Section/AccountsBody/Groups/TableView/GroupsTableItem.js
@@ -34,6 +34,7 @@ import * as Styled from "./index.styled";
 import { Text } from "@docspace/shared/components/text";
 import { Avatar } from "@docspace/shared/components/avatar";
 import Badges from "../../Badges";
+import { globalColors } from "@docspace/shared/themes";
 
 const GroupsTableItem = ({
   t,
@@ -143,7 +144,7 @@ const GroupsTableItem = ({
               fontSize="13px"
               isTextOverflow
               className="table-cell_group-manager"
-              color={"#A3A9AE"}
+              color={globalColors.gray}
               dir="auto"
             >
               {item.manager?.displayName}
diff --git a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RoomCell.js b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RoomCell.js
index 7990a2733b..13f9de8259 100644
--- a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RoomCell.js
+++ b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RoomCell.js
@@ -31,6 +31,7 @@ import React, { useState } from "react";
 import { StyledText } from "./CellStyles";
 import { getFolderPath } from "@docspace/shared/api/files";
 import { CategoryType } from "@docspace/client/src/helpers/constants";
+import { globalColors } from "@docspace/shared/themes";
 
 const RoomCell = ({ sideColor, item }) => {
   const { originRoomTitle, originId, originTitle } = item;
@@ -78,7 +79,7 @@ const RoomCell = ({ sideColor, item }) => {
       getContent={() => (
         <span>
           {isTooltipLoading ? (
-            <Loader color="#333333" size="12px" type="track" />
+            <Loader color={globalColors.black} size="12px" type="track" />
           ) : (
             path.map((pathPart, i) => (
               <Text key={pathPart.id} isBold={i === 0} isInline fontSize="12px">
diff --git a/packages/client/src/pages/PortalSettings/categories/common/Appearance/preview.js b/packages/client/src/pages/PortalSettings/categories/common/Appearance/preview.js
index c32ce0948b..2eb983623a 100644
--- a/packages/client/src/pages/PortalSettings/categories/common/Appearance/preview.js
+++ b/packages/client/src/pages/PortalSettings/categories/common/Appearance/preview.js
@@ -40,6 +40,7 @@ import ButtonPlusIcon from "PUBLIC_DIR/images/actions.button.plus.react.svg";
 import { saveToSessionStorage, getFromSessionStorage } from "../../../utils";
 
 import { isMobile, isTablet } from "@docspace/shared/utils";
+import { globalColors } from "@docspace/shared/themes";
 
 const Preview = (props) => {
   const {
@@ -366,8 +367,21 @@ const Preview = (props) => {
               fill="none"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <rect x="4" y="6" width="20" height="20" rx="2" fill="#11A3D4" />
-              <circle cx="24" cy="6" r="5" fill="#11A3D4" stroke="#F8F9F9" />
+              <rect
+                x="4"
+                y="6"
+                width="20"
+                height="20"
+                rx="2"
+                fill={globalColors.secondBlue}
+              />
+              <circle
+                cx="24"
+                cy="6"
+                r="5"
+                fill={globalColors.secondBlue}
+                stroke={globalColors.grayLight}
+              />
             </svg>
             <RectangleSkeleton
               animate={false}
diff --git a/packages/client/src/pages/PortalSettings/categories/common/Customization/dns-settings.js b/packages/client/src/pages/PortalSettings/categories/common/Customization/dns-settings.js
index 50eb32e2b3..36bf3d663c 100644
--- a/packages/client/src/pages/PortalSettings/categories/common/Customization/dns-settings.js
+++ b/packages/client/src/pages/PortalSettings/categories/common/Customization/dns-settings.js
@@ -225,7 +225,7 @@ const DNSSettings = (props) => {
               key="dns-hint"
               fontSize="12px"
               fontWeight="400"
-              color="#A3A9AE"
+              color={globalColors.gray}
             >
               {`${t("Settings:DNSSettingsHint")}${domainExampleText}`}
             </Text>
diff --git a/packages/client/src/pages/PortalSettings/categories/data-import/NextCloudWorkspace/Stepper/AddEmailsStep/AccountsTable/RowView/index.js b/packages/client/src/pages/PortalSettings/categories/data-import/NextCloudWorkspace/Stepper/AddEmailsStep/AccountsTable/RowView/index.js
index 64575b7deb..5f68f19586 100644
--- a/packages/client/src/pages/PortalSettings/categories/data-import/NextCloudWorkspace/Stepper/AddEmailsStep/AccountsTable/RowView/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/data-import/NextCloudWorkspace/Stepper/AddEmailsStep/AccountsTable/RowView/index.js
@@ -33,6 +33,7 @@ import { RowContainer } from "@docspace/shared/components/row-container";
 import UsersRow from "./UsersRow";
 import { Row } from "@docspace/shared/components/row";
 import { Text } from "@docspace/shared/components/text";
+import { globalColors } from "@docspace/shared/themes";
 
 const StyledRow = styled(Row)`
   box-sizing: border-box;
@@ -87,7 +88,7 @@ const RowView = (props) => {
         indeterminate={isIndeterminate}
         isDisabled={usersWithFilledEmails.length === 0}
       >
-        <Text color="#a3a9ae" fontWeight={600} fontSize="12px">
+        <Text color={globalColors.gray} fontWeight={600} fontSize="12px">
           {t("Common:Name")}
         </Text>
       </StyledRow>
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/TooltipContent.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/TooltipContent.js
index 7cf59273dd..d666279db8 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/TooltipContent.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/TooltipContent.js
@@ -29,6 +29,7 @@ import { Text } from "@docspace/shared/components/text";
 import styled from "styled-components";
 
 import XImg from "PUBLIC_DIR/images/x.react.svg";
+import { globalColors } from "@docspace/shared/themes";
 
 const Wrapper = styled.div`
   box-sizing: border-box;
@@ -48,7 +49,7 @@ const HeaderContainer = styled.header`
   svg {
     cursor: pointer;
     path {
-      fill: #333;
+      fill: ${globalColors.black};
     }
   }
 `;
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/csp.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/csp.js
index 6695708539..24d1f8b9dc 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/csp.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/csp.js
@@ -40,6 +40,7 @@ import { SelectedItem } from "@docspace/shared/components/selected-item";
 import { tablet } from "@docspace/shared/utils";
 import Base from "@docspace/shared/themes/base";
 import { PRODUCT_NAME } from "@docspace/shared/constants";
+import { globalColors } from "@docspace/shared/themes";
 
 const CategoryHeader = styled.div`
   margin-top: 24px;
@@ -257,7 +258,7 @@ const CSP = ({
       </Container>
       <Text
         lineHeight="20px"
-        color={error ? theme?.input.focusErrorBorderColor : "#A3A9AE"}
+        color={error ? theme?.input.focusErrorBorderColor : globalColors.gray}
       >
         {error ? error : t("CSPUrlHelp", { productName: PRODUCT_NAME })}
       </Text>
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/FilterDialog/DeliveryDatePicker.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/FilterDialog/DeliveryDatePicker.js
index 140d1eedba..dc17175961 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/FilterDialog/DeliveryDatePicker.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/FilterDialog/DeliveryDatePicker.js
@@ -37,6 +37,7 @@ import { SelectorAddButton } from "@docspace/shared/components/selector-add-butt
 import { SelectedItem } from "@docspace/shared/components/selected-item";
 
 import { isMobile } from "@docspace/shared/utils";
+import { globalColors } from "@docspace/shared/themes";
 
 const Selectors = styled.div`
   position: relative;
@@ -235,7 +236,7 @@ const DeliveryDatePicker = ({
                 <Text
                   isInline
                   fontWeight={600}
-                  color="#A3A9AE"
+                  color={globalColors.gray}
                   className="mr-8"
                 >
                   {t("From")}
@@ -250,7 +251,12 @@ const DeliveryDatePicker = ({
                 />
               </span>
 
-              <Text isInline fontWeight={600} color="#A3A9AE" className="mr-8">
+              <Text
+                isInline
+                fontWeight={600}
+                color={globalColors.gray}
+                className="mr-8"
+              >
                 {t("Before")}
               </Text>
               <TimePicker
@@ -270,7 +276,7 @@ const DeliveryDatePicker = ({
                 onClick={showTimePicker}
                 className="mr-8 add-delivery-time-button"
               />
-              <Text isInline fontWeight={600} color="#A3A9AE">
+              <Text isInline fontWeight={600} color={globalColors.gray}>
                 {t("SelectDeliveryTime")}
               </Text>
             </TimePickerCell>
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/StatusBar.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/StatusBar.js
index bb0b6b8d22..ee00c4dda0 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/StatusBar.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/StatusBar.js
@@ -31,6 +31,7 @@ import { inject, observer } from "mobx-react";
 
 import { SelectedItem } from "@docspace/shared/components/selected-item";
 import { Link } from "@docspace/shared/components/link";
+import { globalColors } from "@docspace/shared/themes";
 
 const StatusBarWrapper = styled.div`
   margin-top: 9px;
@@ -148,7 +149,7 @@ const StatusBar = (props) => {
           fontWeight={600}
           isHovered={true}
           onClick={clearAll}
-          color="#A3A9AE"
+          color={globalColors.gray}
           className="statusActionItem"
         >
           Clear all
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/WebhookHistoryTable/HistoryRowView/HistoryRowContent.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/WebhookHistoryTable/HistoryRowView/HistoryRowContent.js
index 405f419cb5..e9a82dabc1 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/WebhookHistoryTable/HistoryRowView/HistoryRowContent.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/WebhookHistoryTable/HistoryRowView/HistoryRowContent.js
@@ -33,6 +33,7 @@ import { RowContent } from "@docspace/shared/components/row-content";
 
 import StatusBadge from "../../../../sub-components/StatusBadge";
 import { useTranslation } from "react-i18next";
+import { globalColors } from "@docspace/shared/themes";
 
 const StyledRowContent = styled(RowContent)`
   display: flex;
@@ -77,7 +78,7 @@ export const HistoryRowContent = ({ sectionWidth, historyItem }) => {
           </Text>
           <StatusBadge status={historyItem.status} />
         </StatusHeader>
-        <Text fontWeight={600} fontSize="12px" color="#A3A9AE">
+        <Text fontWeight={600} fontSize="12px" color={globalColors.gray}>
           {formattedDelivery}
         </Text>
       </ContentWrapper>
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/WebhooksTable/WebhooksRowView/WebhookRowContent.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/WebhooksTable/WebhooksRowView/WebhookRowContent.js
index 6fa962904b..b3c640c618 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/WebhooksTable/WebhooksRowView/WebhookRowContent.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/WebhooksTable/WebhooksRowView/WebhookRowContent.js
@@ -34,6 +34,7 @@ import { ToggleButton } from "@docspace/shared/components/toggle-button";
 import StatusBadge from "../../StatusBadge";
 
 import { isMobile, tablet } from "@docspace/shared/utils";
+import { globalColors } from "@docspace/shared/themes";
 
 const StyledRowContent = styled(RowContent)`
   display: flex;
@@ -96,7 +97,7 @@ export const WebhookRowContent = ({
         </FlexWrapper>
 
         {!isMobile() && (
-          <Text fontWeight={600} fontSize="12px" color="#A3A9AE">
+          <Text fontWeight={600} fontSize="12px" color={globalColors.gray}>
             {webhook.uri}
           </Text>
         )}
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/WebhooksTable/WebhooksTableView/WebhooksTableRow.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/WebhooksTable/WebhooksTableView/WebhooksTableRow.js
index f928267779..42019875f6 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/WebhooksTable/WebhooksTableView/WebhooksTableRow.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/WebhooksTable/WebhooksTableView/WebhooksTableRow.js
@@ -40,6 +40,7 @@ import { useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 
 import { inject, observer } from "mobx-react";
+import { globalColors } from "@docspace/shared/themes";
 
 const StyledWrapper = styled.div`
   display: contents;
@@ -150,7 +151,7 @@ const WebhooksTableRow = (props) => {
             <Text
               as="span"
               fontSize="11px"
-              color="#A3A9AE"
+              color={globalColors.gray}
               fontWeight={600}
               className="textOverflow"
             >
diff --git a/packages/client/src/pages/PortalSettings/categories/storage-management/StyledComponent.js b/packages/client/src/pages/PortalSettings/categories/storage-management/StyledComponent.js
index cb05e47ac1..5f0e1eea8b 100644
--- a/packages/client/src/pages/PortalSettings/categories/storage-management/StyledComponent.js
+++ b/packages/client/src/pages/PortalSettings/categories/storage-management/StyledComponent.js
@@ -196,7 +196,8 @@ const StyledStatistics = styled.div`
 const StyledDivider = styled.div`
   height: 1px;
   width: 100%;
-  background-color: #ddd;
+  background-color: ${(props) =>
+    props.theme.client.settings.storageManagement.dividerColor};
   margin: 28px 0 28px 0;
 `;
 
diff --git a/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/SessionsTable/RowView/SessionsRow.js b/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/SessionsTable/RowView/SessionsRow.js
index f39c275353..2610948dbc 100644
--- a/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/SessionsTable/RowView/SessionsRow.js
+++ b/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/SessionsTable/RowView/SessionsRow.js
@@ -32,6 +32,7 @@ import { IconButton } from "@docspace/shared/components/icon-button";
 import SessionsRowContent from "./SessionsRowContent";
 import RemoveSessionSvgUrl from "PUBLIC_DIR/images/remove.session.svg?url";
 import TickSvgUrl from "PUBLIC_DIR/images/tick.svg?url";
+import { globalColors } from "@docspace/shared/themes";
 
 const SessionsRow = (props) => {
   const {
@@ -57,7 +58,11 @@ const SessionsRow = (props) => {
     <>
       {showTickIcon ? (
         !isMobile() && (
-          <IconButton size={16} iconName={TickSvgUrl} color="#20D21F" />
+          <IconButton
+            size={16}
+            iconName={TickSvgUrl}
+            color={globalColors.tickColor}
+          />
         )
       ) : (
         <IconButton
diff --git a/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/SessionsTable/RowView/SessionsRowContent.js b/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/SessionsTable/RowView/SessionsRowContent.js
index 03652a24e1..5130f32f83 100644
--- a/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/SessionsTable/RowView/SessionsRowContent.js
+++ b/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/SessionsTable/RowView/SessionsRowContent.js
@@ -32,6 +32,7 @@ import { Text } from "@docspace/shared/components/text";
 import { RowContent } from "@docspace/shared/components/row-content";
 import { IconButton } from "@docspace/shared/components/icon-button";
 import TickSvgUrl from "PUBLIC_DIR/images/tick.svg?url";
+import { globalColors } from "@docspace/shared/themes";
 
 const StyledRowContent = styled(RowContent)`
   .rowMainContainer {
@@ -66,7 +67,11 @@ const SessionsRowContent = ({
         {platform} <span className="session-browser">{`(${browser})`}</span>
       </Text>
       {isMobile() && showTickIcon && (
-        <IconButton size={12} iconName={TickSvgUrl} color="#20D21F" />
+        <IconButton
+          size={12}
+          iconName={TickSvgUrl}
+          color={globalColors.tickColor}
+        />
       )}
       <Text truncate>{convertTime(date)}</Text>
       {(country || city) && (
diff --git a/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/SessionsTable/TableView/SessionsTableRow.js b/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/SessionsTable/TableView/SessionsTableRow.js
index 6f472af87d..728f65cbc8 100644
--- a/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/SessionsTable/TableView/SessionsTableRow.js
+++ b/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/SessionsTable/TableView/SessionsTableRow.js
@@ -36,6 +36,7 @@ import { IconButton } from "@docspace/shared/components/icon-button";
 import { convertTime } from "@docspace/shared/utils/convertTime";
 import RemoveSessionSvgUrl from "PUBLIC_DIR/images/remove.session.svg?url";
 import TickSvgUrl from "PUBLIC_DIR/images/tick.svg?url";
+import { globalColors } from "@docspace/shared/themes";
 
 const StyledTableRow = styled(TableRow)`
   .session-platform {
@@ -110,7 +111,7 @@ const SessionsTableRow = (props) => {
           <IconButton
             size={12}
             className="tick-icon"
-            color="#20D21F"
+            color={globalColors.tickColor}
             iconName={TickSvgUrl}
           />
         )}
diff --git a/packages/client/src/pages/PublicRoom/StyledPublicRoom.js b/packages/client/src/pages/PublicRoom/StyledPublicRoom.js
index 0e3009800d..a9f626571c 100644
--- a/packages/client/src/pages/PublicRoom/StyledPublicRoom.js
+++ b/packages/client/src/pages/PublicRoom/StyledPublicRoom.js
@@ -60,11 +60,11 @@ const StyledContainer = styled.div`
       props.theme.interfaceDirection === "rtl"
         ? css`
             margin: 0 15px 0 16px;
-            border-right: 1px solid #dfe2e3;
+            border-right: ${(props) => props.theme.publicRoom.border};
           `
         : css`
             margin: 0 16px 0 15px;
-            border-left: 1px solid #dfe2e3;
+            border-left: ${(props) => props.theme.publicRoom.border};
           `}
     height: 21px;
   }