refactor(app-headless-cms): confirmation and information messaging

packages/app-headless-cms/src/admin/views/contentModels/fullDelete/dialog/Confirmation.tsx

@@ -11,6 +11,10 @@ const errorClassName = css({
     display: "block"
 });
 
+const deleteClassName = css({
+    fontWeight: "bold"
+});
+
 export interface IConfirmationProps {
     model: CmsModel;
     confirmation: string;
@@ -35,7 +39,10 @@ export const Confirmation = (props: IConfirmationProps) => {
     return (
         <>
             <p>Are you sure you want to delete this content model and all of its entries?</p>
-            <p>If yes, please write &quot;{placeholder}&quot; in the confirmation input:</p>
+            <p>
+                If yes, please write <span className={deleteClassName}>{placeholder}</span> in the
+                confirmation input:
+            </p>
             <p>
                 <br />
             </p>

packages/app-headless-cms/src/admin/views/contentModels/fullDelete/dialog/Information.tsx

@@ -1,10 +1,15 @@
 import React from "react";
 import type { CmsModel } from "~/types";
+import { css } from "emotion";
 
 export interface IInformationProps {
     model: Pick<CmsModel, "plugin">;
 }
 
+const warningClassName = css({
+    color: "var(--mdc-theme-error)"
+});
+
 export const Information = (props: IInformationProps) => {
     const { model } = props;
     return (
@@ -23,7 +28,8 @@ export const Information = (props: IInformationProps) => {
             <p>- This action will permanently delete the model and all its associated data.</p>
             <p>- References to this model in other parts of the system will be emptied.</p>
             <p>- This action cannot be undone.</p>
-            <p>- Lifecycle events will be triggered.</p>
+            <p>- All relevant lifecycle events will be triggered.</p>
+            <p className={warningClassName}> - This action cannot be undone!</p>
         </>
     );
 };