feat: add confirmation dialog component for comment deletion

- Introduced VeltConfirmDialogWf component for handling comment deletion confirmations.
- Added associated styles for the confirmation dialog in styles.css.
- Integrated the confirmation dialog into VeltCustomization component.

This enhances user experience by providing a clear confirmation step before deleting comments.

Author: mayank-velt

apps/react/comments/dashboard/self-hosting/dashboard-postgres-demo/components/velt/ui-customization/VeltConfirmDialogWf.tsx

@@ -0,0 +1,33 @@
+import { VeltConfirmDialogWireframe } from "@veltdev/react";
+import { Close } from "./Icons";
+
+const VeltConfirmDialogWf = () => {
+    return <VeltConfirmDialogWireframe>
+        <div className="oe-confirm-dialog-close-button">
+            <VeltConfirmDialogWireframe.RejectButton>
+                <Close width={20} height={20} />
+            </VeltConfirmDialogWireframe.RejectButton>
+        </div>
+        <VeltConfirmDialogWireframe.Title>
+            <div className="oe-confirm-dialog-title">Delete Comment?</div>
+        </VeltConfirmDialogWireframe.Title>
+        <VeltConfirmDialogWireframe.Message>
+            <div>This action cannot be undone.</div>
+            <div>Documents uploaded while commenting will not be deleted when the comment is deleted. Go to the job Details tab, Documents section to manage documents.</div>
+        </VeltConfirmDialogWireframe.Message>
+        <div className="oe-confirm-dialog-buttons">
+            <VeltConfirmDialogWireframe.RejectButton>
+                <div className="oe-confirm-dialog-cancel-button">
+                    Cancel
+                </div>
+            </VeltConfirmDialogWireframe.RejectButton>
+            <VeltConfirmDialogWireframe.ApproveButton>
+                <div className="oe-confirm-dialog-delete-button">
+                    Delete Comment
+                </div>
+            </VeltConfirmDialogWireframe.ApproveButton>
+        </div>
+    </VeltConfirmDialogWireframe>
+}
+
+export default VeltConfirmDialogWf;

apps/react/comments/dashboard/self-hosting/dashboard-postgres-demo/components/velt/ui-customization/VeltCustomization.tsx

@@ -12,6 +12,7 @@ import VeltCommentsSidebarFocusedThreadWf from './VeltCommentsSidebarFocusedThre
 import VeltCommentsSidebarEmptyPlaceholderWf from './VeltCommentsSidebarEmptyPlaceholderWf';
 import VeltNotificationWf from './VeltNotificationPanelWf';
 import VeltNotificationListItemWf from './VeltNotificationListItemWf';
+import VeltConfirmDialogWf from './VeltConfirmDialogWf';
 
 export function VeltCustomization() {
 
@@ -29,6 +30,7 @@ export function VeltCustomization() {
       <VeltCommentsSidebarEmptyPlaceholderWf />
       <VeltNotificationWf />
       <VeltNotificationListItemWf />
+      <VeltConfirmDialogWf />
     </VeltWireframe>
   );
 }

apps/react/comments/dashboard/self-hosting/dashboard-postgres-demo/components/velt/ui-customization/styles.css

@@ -1355,4 +1355,99 @@ app-if {
 
 app-notifications-panel-view-all-button {
   display: none !important;
-}
+}
+
+
+.velt-confirm-dialog {
+    padding: 32px !important;
+    width: 552px !important;
+    position: relative !important;
+  }
+  
+  .velt-mat-dialog-container
+    mat-dialog-container
+    .mat-mdc-dialog-surface.mdc-dialog__surface:has(snippyly-confirm-dialog) {
+    border-radius: 4px !important;
+  }
+  
+  .oe-confirm-dialog-close-button {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    color: #6b758a;
+    border-radius: 4px;
+    padding: 4px;
+    cursor: pointer;
+  
+    &:hover {
+      background-color: #f3f4f6;
+    }
+  }
+  
+  .oe-confirm-dialog-title {
+    font-weight: 500;
+    font-size: 24px;
+    leading-trim: NONE;
+    line-height: 36px;
+    letter-spacing: 0.15px;
+    color: #00102e;
+  }
+  
+  .velt-confirm-dialog-message {
+    font-weight: 300 !important;
+    font-size: 16px !important;
+    leading-trim: NONE !important;
+    line-height: 24px !important;
+    letter-spacing: 0.3px !important;
+    color: #6b758a !important;
+    padding: 0px !important;
+    margin: 16px 0px 32px 0px !important;
+    display: flex !important;
+    flex-direction: column !important;
+    gap: 24px !important;
+  }
+  
+  .oe-confirm-dialog-buttons {
+    display: flex !important;
+    flex-direction: row !important;
+    gap: 16px !important;
+  
+    .oe-confirm-dialog-cancel-button {
+      cursor: pointer !important;
+      height: 40px !important;
+      border-radius: 3px !important;
+      display: flex !important;
+      align-items: center !important;
+      justify-content: center !important;
+      border: 1px solid #e6e8ed !important;
+      box-shadow: 0px 1px 2px 0px #00102e0f !important;
+      font-weight: 500 !important;
+      font-size: 14px !important;
+      leading-trim: NONE !important;
+      line-height: 21px !important;
+      letter-spacing: 0.25px !important;
+      text-align: center !important;
+      vertical-align: middle !important;
+      color: #3c475c !important;
+    }
+  
+    .oe-confirm-dialog-delete-button {
+      cursor: pointer !important;
+      height: 40px !important;
+      border-radius: 3px !important;
+      display: flex !important;
+      align-items: center !important;
+      justify-content: center !important;
+      background-color: #F75452 !important;
+      border: 1px solid #CA3D3D !important;
+      box-shadow: 0px 1px 2px 0px #00102E0F !important;
+      font-weight: 500 !important;
+      font-size: 14px !important;
+      leading-trim: NONE !important;
+      line-height: 21px !important;
+      letter-spacing: 0.25px !important;
+      text-align: center !important;
+      vertical-align: middle !important;
+      color: #ffffff !important;
+    }
+  }