refactor: Defect #57131

public/css/main.css

@@ -2935,7 +2935,7 @@ button.active {
 } */
 
 .react-confirm-alert-body {
-  color: var(--white-90) !important;
+  color: var(--main-black60) !important;
   background: var(--input-background) !important;
   border-radius: unset !important;
 }

src/components/form/AddForm.js

@@ -146,10 +146,17 @@ class AddForm extends Component {
   };
 
   removeElement = (index) => {
-    // console.log(this.state.formElements)
+    // console.log(this.state.formElements);
+
     confirmAlert({
-      title: LANG.CONFIRM_TO_REMOVE,
-      message: LANG.ARE_YOU_SURE_YOU_WANT_TO_DO_THIS,
+      title:
+        this.state.formElements[index] === "heading"
+          ? LANG.HEADING_REMOVAL_WARNING
+          : LANG.CONFIRM_TO_REMOVE,
+      message:
+        this.state.formElements[index] === "heading"
+          ? LANG.CONFIRM_TO_REMOVE_2
+          : LANG.ARE_YOU_SURE_YOU_WANT_TO_DO_THIS,
       buttons: [
         {
           label: LANG.REMOVE,

src/constants/LangConstants.ts

@@ -52,4 +52,6 @@ export const LANG = {
   CANCEL: "Cancel",
   REMOVE: "Remove",
   CONFIRM_TO_REMOVE: "Confirm to remove",
+  HEADING_REMOVAL_WARNING: "Are you sure deleting the header?",
+  CONFIRM_TO_REMOVE_2: "This action will move the question section to the general header category.",
 };