From 91dfcbaf9e7c40024fdf142e3bdeb858a7382d1c Mon Sep 17 00:00:00 2001
From: zalenskiSofteq <egor.zalenski@softeq.com>
Date: Wed, 31 Aug 2022 16:31:50 +0300
Subject: [PATCH] #RI-3430 - Edit field with unprintable characters are not
 highlighted in yellow

---
 .../browser/components/string-details/StringDetails.tsx      | 2 +-
 .../browser/components/string-details/styles.module.scss     | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/redisinsight/ui/src/pages/browser/components/string-details/StringDetails.tsx b/redisinsight/ui/src/pages/browser/components/string-details/StringDetails.tsx
index b5de01a0f4..52f9eb5e48 100644
--- a/redisinsight/ui/src/pages/browser/components/string-details/StringDetails.tsx
+++ b/redisinsight/ui/src/pages/browser/components/string-details/StringDetails.tsx
@@ -191,7 +191,7 @@ const StringDetails = (props: Props) => {
             }}
             disabled={loading}
             inputRef={textAreaRef}
-            className={cx(styles.stringTextArea, { 'input-warning': isDisabled })}
+            className={cx(styles.stringTextArea, { [styles.areaWarning]: isDisabled })}
             data-testid="string-value"
           />
         </InlineItemEditor>
diff --git a/redisinsight/ui/src/pages/browser/components/string-details/styles.module.scss b/redisinsight/ui/src/pages/browser/components/string-details/styles.module.scss
index 69cffb71d9..df481309a5 100644
--- a/redisinsight/ui/src/pages/browser/components/string-details/styles.module.scss
+++ b/redisinsight/ui/src/pages/browser/components/string-details/styles.module.scss
@@ -45,4 +45,9 @@ $outer-height-mobile: 340px;
   @media only screen and (max-width: 767px) {
     max-height: calc(100vh - #{$outer-height-mobile} - 55px);
   }
+
+  &.areaWarning {
+    border-color: var(--euiColorWarningLight) !important;
+    background-image: none !important;
+  }
 }