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>

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;

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

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],