Print dialog related changes (#547)

Print dialog related changes (#547)

Author: divyav-aot

forms-flow-rsbcservice/src/component/RSBCImage/PrintConfirmationDialog.tsx

@@ -19,16 +19,26 @@ const PrintConfirmationDialog: React.FC<ConfirmationDialogProps> = ({
   return (
     <div className="modal-overlay">
       <div className="confirmation-dialog">
-        <p>{message}</p>
-        <button className="btn btn-primary" onClick={onConfirm}>
-          {primaryBtnCaption}
-        </button>
-        <button className="btn btn-secondary" onClick={onCancel}>
-          {secondaryBtnCaption}
-        </button>
+      <button className="dialog-close btn-secondary" onClick={onCancel}>
+        ×
+      </button>
+        <h2 className="dialog-header">Print Form</h2>
+        <hr />
+        <div className="dialog-message">
+          <p>{message}</p>
+        </div>
+        <hr />
+        <div className="dialog-actions">
+          <button className="btn btn-secondary" onClick={onCancel}>
+            {secondaryBtnCaption}
+          </button>
+          <button className="btn btn-primary" onClick={onConfirm}>
+            {primaryBtnCaption}
+          </button>
+        </div>
       </div>
     </div>
   );
 };
 
-export default PrintConfirmationDialog;
+export default PrintConfirmationDialog;

forms-flow-rsbcservice/src/component/RSBCImage/RSBCImage.tsx

@@ -135,8 +135,8 @@ export default class RSBCImage extends ReactComponent {
     if (requireConfirmation && this.component.stage !== "stageTwo") {
       const proceedToPrint = await this.showConfirmationDialog(
         "If you print this form you cannot go back and edit it, please confirm you wish to proceed.",
-        "Proceed",
-        "Cancel"
+        "Print",
+        "Close"
       );
 
       if (proceedToPrint) {

forms-flow-rsbcservice/src/component/RSBCImage/printConfirmationDialog.scss

@@ -5,33 +5,54 @@
   left: 0;
   width: 100vw;
   height: 100vh;
-  background: rgba(0, 0, 0, 0.5); 
   display: flex;
   justify-content: center;
   align-items: center;
-  z-index: 1000; 
+  z-index: 1000;
+  background-color: rgba(0, 0, 0, 0.3) !important;
 }
 
 .confirmation-dialog {
-  background: white;
+  background-color: #fff;
   padding: 20px;
   border-radius: 8px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
-  text-align: center;
-  z-index: 1001; 
+  width: 400px;
+  max-width: 90%;
+  word-wrap: break-word;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+  position: relative;
 }
 
-.confirmation-dialog p {
-  margin-bottom: 15px;
+.dialog-header {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: bold;
+  padding-right: 25px;
 }
 
-.confirmation-dialog button {
-  margin: 10px;
-  padding: 8px 16px;
+.dialog-close {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background: none;
   border: none;
+  font-size: 1.2rem;
   cursor: pointer;
-  border-radius: 4px;
-  font-size: 14px;
+  line-height: 1;
+  color: var(--secondary-btn-bg-color);
+}
+
+.dialog-message {
+  margin: 20px 0;
+}
+
+.dialog-actions {
+  display: flex;
+  justify-content: flex-end;
+  text-align: right;
+  gap: 10px;
+  margin-top: 20px;
+  flex-wrap: wrap;
 }
 
 .confirmation-dialog .yes-button {