From 495c33394090e7ba4f010efd116d58e3b42faf0f Mon Sep 17 00:00:00 2001
From: Viktor Fomin <viktor.fomin@onlyoffice.com>
Date: Tue, 25 Jun 2024 12:49:17 +0300
Subject: [PATCH] Shared: use colors from theme

---
 packages/shared/components/date-picker/DatePicker.test.tsx  | 5 ++---
 .../shared/components/image-editor/AvatarPreview/index.tsx  | 3 ++-
 packages/shared/components/input-phone/index.tsx            | 1 -
 .../save-cancel-buttons/SaveCancelButton.styled.ts          | 6 +++---
 .../shared/components/time-picker/TimePicker.styled.tsx     | 5 +++--
 5 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/shared/components/date-picker/DatePicker.test.tsx b/packages/shared/components/date-picker/DatePicker.test.tsx
index de37e72afe..a23adb2f3f 100644
--- a/packages/shared/components/date-picker/DatePicker.test.tsx
+++ b/packages/shared/components/date-picker/DatePicker.test.tsx
@@ -118,8 +118,8 @@ describe("DatePicker tests", () => {
   // // @ts-expect-error TS(2582): Cannot find name 'it'. Do you need to install type... Remove this comment to see the full error message
   // it("DatePicker themeColor test", () => {
   //   // @ts-expect-error TS(2322): Type '{ themeColor: string; }' is not assignable t... Remove this comment to see the full error message
-  //   const wrapper = mount(<DatePicker themeColor={"#fff"} />);
-  //   expect(wrapper.props().themeColor).toEqual("#fff");
+  //   const wrapper = mount(<DatePicker themeColor={""} />);
+  //   expect(wrapper.props().themeColor).toEqual("");
   // });
 
   // // @ts-expect-error TS(2582): Cannot find name 'it'. Do you need to install type... Remove this comment to see the full error message
@@ -228,7 +228,6 @@ describe("DatePicker tests", () => {
   //     isDisabled: false,
   //     isReadOnly: false,
   //     hasError: false,
-  //     themeColor: "#ED7309",
   //     locale: "en",
   //   };
 
diff --git a/packages/shared/components/image-editor/AvatarPreview/index.tsx b/packages/shared/components/image-editor/AvatarPreview/index.tsx
index ef075530b6..43f9ef6952 100644
--- a/packages/shared/components/image-editor/AvatarPreview/index.tsx
+++ b/packages/shared/components/image-editor/AvatarPreview/index.tsx
@@ -31,6 +31,7 @@ import { Avatar, AvatarRole, AvatarSize } from "../../avatar";
 import { Text } from "../../text";
 
 import { mobile } from "../../../utils";
+import { globalColors } from "../../../themes";
 
 const StyledWrapper = styled.div`
   width: 100%;
@@ -54,7 +55,7 @@ const StyledWrapper = styled.div`
     gap: 8px;
     align-items: center;
     padding: 8px;
-    border: 1px solid #eceef1;
+    border: 1px solid ${globalColors.grayLightMid};
     border-radius: 6px;
   }
 `;
diff --git a/packages/shared/components/input-phone/index.tsx b/packages/shared/components/input-phone/index.tsx
index 23f0e6bffd..4327f7d355 100644
--- a/packages/shared/components/input-phone/index.tsx
+++ b/packages/shared/components/input-phone/index.tsx
@@ -267,7 +267,6 @@
 //         // @ts-expect-error TS(2322): Type '{ children: any; className: string; color: s... Remove this comment to see the full error message
 //         <Text
 //           className="phone-input_error-text"
-//           color="#f21c0e"
 //           fontSize="11px"
 //           lineHeight="14px"
 //         >
diff --git a/packages/shared/components/save-cancel-buttons/SaveCancelButton.styled.ts b/packages/shared/components/save-cancel-buttons/SaveCancelButton.styled.ts
index aa48dcdcac..79233b2950 100644
--- a/packages/shared/components/save-cancel-buttons/SaveCancelButton.styled.ts
+++ b/packages/shared/components/save-cancel-buttons/SaveCancelButton.styled.ts
@@ -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 "../../themes";
+import { Base, globalColors } from "../../themes";
 import { mobileMore, mobile } from "../../utils";
 
 const displaySettings = css<{
@@ -39,7 +39,7 @@ const displaySettings = css<{
   align-items: flex-start;
   border-top: ${(props) =>
     props.hasScroll && !props.showReminder && !props.hideBorder
-      ? "1px solid #ECEEF1"
+      ? `1px solid ${globalColors.grayLightMid}`
       : "none"};
 
   ${(props) =>
@@ -90,7 +90,7 @@ const displaySettings = css<{
     props.hasScroll &&
     css`
       .unsaved-changes {
-        border-top: 1px solid #eceef1;
+        border-top: 1px solid ${globalColors.grayLightMid};
         width: calc(100% - 16px);
 
         ${props.theme.interfaceDirection === "rtl"
diff --git a/packages/shared/components/time-picker/TimePicker.styled.tsx b/packages/shared/components/time-picker/TimePicker.styled.tsx
index 953c6e6b44..eeaef4d93f 100644
--- a/packages/shared/components/time-picker/TimePicker.styled.tsx
+++ b/packages/shared/components/time-picker/TimePicker.styled.tsx
@@ -34,7 +34,7 @@ const TimeInput = styled.div<{ hasError?: boolean; isFocused?: boolean }>`
   padding: 0px 6px;
   direction: ltr;
 
-  border: 1px solid #d0d5da;
+  border: 1px solid ${globalColors.grayStrong};
   border-radius: 3px;
 
   transition: "all 0.2s ease 0s";
@@ -42,7 +42,8 @@ const TimeInput = styled.div<{ hasError?: boolean; isFocused?: boolean }>`
   display: flex;
   align-items: center;
 
-  border-color: ${(props) => (props.hasError ? "#f21c0e" : "#d0d5da")};
+  border-color: ${(props) =>
+    props.hasError ? globalColors.lightErrorStatus : globalColors.grayStrong};
 
   background-color: ${(props) => props.theme.input.backgroundColor};