From a1d14ab4304a4b5d51a8537ee38d128aeaaa2719 Mon Sep 17 00:00:00 2001
From: David-DB88 <58771979+David-DB88@users.noreply.github.com>
Date: Fri, 30 Sep 2022 17:04:40 +0400
Subject: [PATCH] Add warning message for the Topic Danger zone #2534 (#2663)

* Add warning message for Danger zone in case of editing the Topic #2534

* Used existing palette color on warning message for Danger zone in case of editing the Topic #2534

* Update kafka-ui-react-app/src/components/Topics/Topic/Edit/DangerZone/DangerZone.tsx

Co-authored-by: davitbejanyan <dbejanyan@provectus.com>
Co-authored-by: Oleg Shur <workshur@gmail.com>
Co-authored-by: Roman Zabaluev <rzabaluev@provectus.com>
---
 .../Topics/Topic/Edit/DangerZone/DangerZone.styled.tsx    | 8 ++++++--
 .../Topics/Topic/Edit/DangerZone/DangerZone.tsx           | 4 ++++
 kafka-ui-react-app/src/theme/theme.ts                     | 5 ++++-
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Edit/DangerZone/DangerZone.styled.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Edit/DangerZone/DangerZone.styled.tsx
index b9ad51a669..b5741c67e1 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Edit/DangerZone/DangerZone.styled.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Edit/DangerZone/DangerZone.styled.tsx
@@ -15,11 +15,15 @@ export const Wrapper = styled.div`
 `;
 
 export const Title = styled.h1`
-  color: ${({ theme }) => theme.dangerZone.color};
+  color: ${({ theme }) => theme.dangerZone.color.title};
   font-size: 20px;
   padding-bottom: 16px;
 `;
-
+export const Warning = styled.div`
+  color: ${({ theme }) => theme.dangerZone.color.warningMessage};
+  font-size: 12px;
+  padding-bottom: 16px;
+`;
 export const Form = styled.form`
   display: flex;
   align-items: flex-end;
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Edit/DangerZone/DangerZone.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Edit/DangerZone/DangerZone.tsx
index 49f1d3574a..59016d1d7a 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Edit/DangerZone/DangerZone.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Edit/DangerZone/DangerZone.tsx
@@ -81,6 +81,10 @@ const DangerZone: React.FC<DangerZoneProps> = ({
   return (
     <S.Wrapper>
       <S.Title>Danger Zone</S.Title>
+      <S.Warning>
+        Change these parameters only if you are absolutely sure what you are
+        doing.
+      </S.Warning>
       <div>
         <FormProvider {...partitionsMethods}>
           <S.Form
diff --git a/kafka-ui-react-app/src/theme/theme.ts b/kafka-ui-react-app/src/theme/theme.ts
index d05ad54cb9..19c082c284 100644
--- a/kafka-ui-react-app/src/theme/theme.ts
+++ b/kafka-ui-react-app/src/theme/theme.ts
@@ -518,7 +518,10 @@ const theme = {
   },
   dangerZone: {
     borderColor: Colors.neutral[10],
-    color: Colors.red[50],
+    color: {
+      title: Colors.red[50],
+      warningMessage: Colors.neutral[50],
+    },
   },
   configList: {
     color: Colors.neutral[30],