From b08aeefbbcbab1265af28b72cad65e77fccc9773 Mon Sep 17 00:00:00 2001
From: Imesh Chandrasiri <imeshc@wso2.com>
Date: Fri, 9 Sep 2016 18:23:44 +0530
Subject: [PATCH] Modal Changes

---
 .../app/pages/cdmf.page.devices/devices.hbs   | 102 ++--
 .../app/pages/cdmf.page.policies/policies.hbs | 527 +++++++++---------
 .../app/pages/cdmf.page.users/users.hbs       |  21 +-
 3 files changed, 337 insertions(+), 313 deletions(-)

diff --git a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.devices/devices.hbs b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.devices/devices.hbs
index 421ab3b7793..4b1975f9bfd 100644
--- a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.devices/devices.hbs
+++ b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.devices/devices.hbs
@@ -229,61 +229,83 @@
                 </div>
 
                 <div id="remove-device-modal-content" class="hide">
-                    <div class="content">
-                        <div class="row">
-                            <div class="col-lg-5 col-md-6 col-centered">
-                                <h3>Do you really want to remove this device from your Devices List?</h3>
+                    <div class="modal-header">
+                        <h3 class="pull-left modal-title">
+                            Do you really want to remove this device from your Devices List?
+                        </h3>
+                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fw fw-cancel"></i></button>
+                    </div>
+                    <div class="modal-body add-margin-top-2x add-margin-bottom-2x">
 
-                                <div class="buttons">
-                                    <a href="#" id="remove-device-yes-link" class="btn-operations">
-                                        &nbsp;&nbsp;&nbsp;&nbsp;Yes&nbsp;&nbsp;&nbsp;&nbsp;
-                                    </a>
-                                    &nbsp;&nbsp;
-                                    <a href="#" id="remove-device-cancel-link" class="btn-operations">
-                                        &nbsp;&nbsp;&nbsp;&nbsp;Cancel&nbsp;&nbsp;&nbsp;&nbsp;
-                                    </a>
-                                </div>
-                            </div>
+                    </div>
+                    <div class="modal-footer">
+                        <div class="buttons">
+                            <a href="#" id="remove-device-yes-link" class="btn-operations">
+                                &nbsp;&nbsp;&nbsp;&nbsp;Yes&nbsp;&nbsp;&nbsp;&nbsp;
+                            </a>
+                            &nbsp;&nbsp;
+                            <a href="#" id="remove-device-cancel-link" class="btn-operations">
+                                &nbsp;&nbsp;&nbsp;&nbsp;Cancel&nbsp;&nbsp;&nbsp;&nbsp;
+                            </a>
                         </div>
                     </div>
                 </div>
 
                 <div id="remove-device-200-content" class="hide">
-                    <div class="content">
-                        <div class="row">
-                            <div class="col-lg-5 col-md-6 col-centered">
-                                <h3>Device was successfully removed.</h3>
-                            </div>
+                    <div class="modal-header">
+                        <h3 class="pull-left modal-title">
+                            Device was successfully removed.
+                        </h3>
+                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fw fw-cancel"></i></button>
+                    </div>
+                    <div class="modal-body add-margin-top-2x add-margin-bottom-2x">
+
+                    </div>
+                    <div class="modal-footer">
+                        <div class="buttons">
+                            <a href="javascript:hidePopup()" class="btn-operations">Ok</a>
                         </div>
                     </div>
                 </div>
 
                 <div id="edit-device-modal-content" class="hide">
-                    <div class="content">
-                        <div class="row">
-                            <div class="col-lg-5 col-md-6 col-centered">
-                                <h3>Please enter new name for the device?</h3>
-                                <br/>
-
-                                <div>
-                                    <input id="edit-device-name" style="color:#3f3f3f;padding:5px" type="text"
-                                           value=""
-                                           placeholder="Type here" size="60">
-                                </div>
-                                <div class="buttons">
-                                    <a href="#" id="edit-device-yes-link" class="btn-operations">
-                                        &nbsp;&nbsp;&nbsp;&nbsp;Rename&nbsp;&nbsp;&nbsp;&nbsp;
-                                    </a>
-                                    &nbsp;&nbsp;
-                                    <a href="#" id="edit-device-cancel-link" class="btn-operations">
-                                        &nbsp;&nbsp;&nbsp;&nbsp;Cancel&nbsp;&nbsp;&nbsp;&nbsp;
-                                    </a>
-                                </div>
-                            </div>
+                    <div class="modal-header">
+                        <h3 class="pull-left modal-title">
+                            Please enter new name for the device?
+                        </h3>
+                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fw fw-cancel"></i></button>
+                    </div>
+                    <div class="modal-body add-margin-top-2x add-margin-bottom-2x">
+                        <input id="edit-device-name" style="color:#3f3f3f;padding:5px" type="text"
+                               value=""
+                               placeholder="Type here" size="60">
+                    </div>
+                    <div class="modal-footer">
+                        <div class="buttons">
+                            <a href="#" id="edit-device-yes-link" class="btn-operations">
+                                &nbsp;&nbsp;&nbsp;&nbsp;Rename&nbsp;&nbsp;&nbsp;&nbsp;
+                            </a>
+                            &nbsp;&nbsp;
+                            <a href="#" id="edit-device-cancel-link" class="btn-operations">
+                                &nbsp;&nbsp;&nbsp;&nbsp;Cancel&nbsp;&nbsp;&nbsp;&nbsp;
+                            </a>
                         </div>
                     </div>
                 </div>
 
+                <div id="edit-device-200-content" class="hide">
+                    <div class="modal-header">
+                        <h3 class="pull-left modal-title">
+                            Device was successfully updated.
+                        </h3>
+                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fw fw-cancel"></i></button>
+                    </div>
+                    <div class="modal-body add-margin-top-2x add-margin-bottom-2x">
+
+                    </div>
+                    <div class="modal-footer">
+                        <div class="buttons">
+
                 <div id="edit-device-200-content" class="hide">
                     <div class="content">
                         <div class="row">
diff --git a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.policies/policies.hbs b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.policies/policies.hbs
index 9a3a1137910..61ba4007d54 100644
--- a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.policies/policies.hbs
+++ b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.policies/policies.hbs
@@ -256,378 +256,379 @@
     </div>
 
     <div id="remove-policy-modal-content" class="hide">
-        <div class="content">
-            <div class="row">
-                <div class="col-lg-5 col-md-6 col-centered">
-                    <h3>Do you really want to remove the selected policy(s)?</h3>
-
-                    <div class="buttons">
-                        <a href="#" id="remove-policy-yes-link" class="btn-operations">
-                            Remove
-                        </a>
+        <div class="modal-header">
+            <h3 class="pull-left modal-title">Do you really want to remove the selected policy(s)?</h3>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fw fw-cancel"></i></button>
+        </div>
+        <div class="modal-body add-margin-top-2x add-margin-bottom-2x">
+        </div>
+        <div class="modal-footer">
+            <div class="buttons">
+                <a href="#" id="remove-policy-yes-link" class="btn-operations">
+                    Remove
+                </a>
 
-                        <a href="#" id="remove-policy-cancel-link" class="btn-operations">
-                            Cancel
-                        </a>
-                    </div>
-                </div>
+                <a href="#" id="remove-policy-cancel-link" class="btn-operations">
+                    Cancel
+                </a>
             </div>
         </div>
     </div>
 
     <div id="remove-policy-success-content" class="hide">
-        <div class="content">
-            <div class="row">
-                <div class="col-lg-5 col-md-6 col-centered">
-                    <h3>Done. Selected policy was successfully removed.</h3>
-
-                    <div class="buttons">
-                        <a href="#" id="remove-policy-success-link" class="btn-operations">
-                            Ok
-                        </a>
-                    </div>
-                </div>
+        <div class="modal-header">
+            <h3 class="pull-left modal-title">Done. Selected policy was successfully removed.</h3>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fw fw-cancel"></i></button>
+        </div>
+        <div class="modal-body add-margin-top-2x add-margin-bottom-2x">
+        </div>
+        <div class="modal-footer">
+            <div class="buttons">
+                <a href="#" id="remove-policy-success-link" class="btn-operations">
+                    Ok
+                </a>
             </div>
         </div>
     </div>
 
     <div id="remove-policy-error-content" class="hide">
-        <div class="content">
-            <div class="row">
-                <div class="col-lg-5 col-md-6 col-centered">
-                    <h3>An unexpected error occurred. Please try again later.</h3>
-
-                    <div class="buttons">
-                        <a href="#" id="remove-policy-error-link" class="btn-operations">
-                            Ok
-                        </a>
-                    </div>
-                </div>
+        <div class="modal-header">
+            <h3 class="pull-left modal-title">An unexpected error occurred. Please try again later.</h3>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fw fw-cancel"></i></button>
+        </div>
+        <div class="modal-body add-margin-top-2x add-margin-bottom-2x">
+        </div>
+        <div class="modal-footer">
+            <div class="buttons">
+                <a href="#" id="remove-policy-error-link" class="btn-operations">
+                    Ok
+                </a>
             </div>
         </div>
     </div>
 
     <div id="remove-policy-error-devices" class="hide">
-        <div class="content">
-            <div class="row">
-                <div class="col-lg-5 col-md-6 col-centered">
-                    <h3>You cannot remove policies that are already applied to devices. Please deselect
-                        them and try
-                        again.</h3>
-
-                    <div class="buttons">
-                        <a href="#" id="remove-policy-error-devices" class="btn-operations">
-                            Ok
-                        </a>
-                    </div>
-                </div>
+        <div class="modal-header">
+            <h3 class="pull-left modal-title">Cannot Remove Policies.</h3>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fw fw-cancel"></i></button>
+        </div>
+        <div class="modal-body add-margin-top-2x add-margin-bottom-2x">
+            <h4>You cannot remove policies that are already applied to devices. Please deselect
+                them and try
+                again.</h4>
+        </div>
+        <div class="modal-footer">
+            <div class="buttons">
+                <a href="#" id="remove-policy-error-devices" class="btn-operations">
+                    Ok
+                </a>
             </div>
         </div>
     </div>
 
     <div id="publish-policy-modal-content" class="hide">
-        <div class="content">
-            <div class="row">
-                <div class="col-lg-5 col-md-6 col-centered">
-                    <h3>Do you really want to publish the selected policy(s)?</h3>
-
-                    <div class="buttons">
-                        <a href="#" id="publish-policy-yes-link" class="btn-operations">Yes</a>
-                        <a href="#" id="publish-policy-cancel-link" class="btn-operations">No</a>
-                    </div>
-                </div>
+        <div class="modal-header">
+            <h3 class="pull-left modal-title">Do you really want to publish the selected policy(s)?</h3>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fw fw-cancel"></i></button>
+        </div>
+        <div class="modal-body add-margin-top-2x add-margin-bottom-2x">
+
+        </div>
+        <div class="modal-footer">
+            <div class="buttons">
+                <a href="#" id="publish-policy-yes-link" class="btn-operations">Yes</a>
+                <a href="#" id="publish-policy-cancel-link" class="btn-operations">No</a>
             </div>
         </div>
     </div>
 
     <div id="publish-policy-success-content" class="hide">
-        <div class="content">
-            <div class="row">
-                <div class="col-lg-5 col-md-6 col-centered">
-                    <h3>Done. Selected policy was successfully published.</h3>
-
-                    <div class="buttons">
-                        <a href="#" id="publish-policy-success-link" class="btn-operations">
-                            Ok
-                        </a>
-                    </div>
-                </div>
+        <div class="modal-header">
+            <h3 class="pull-left modal-title">Done. Selected policy was successfully published.</h3>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fw fw-cancel"></i></button>
+        </div>
+        <div class="modal-body add-margin-top-2x add-margin-bottom-2x">
+
+        </div>
+        <div class="modal-footer">
+            <div class="buttons">
+                <a href="#" id="publish-policy-success-link" class="btn-operations">
+                    Ok
+                </a>
             </div>
         </div>
     </div>
 
     <div id="publish-policy-error-content" class="hide">
-        <div class="content">
-            <div class="row">
-                <div class="col-lg-5 col-md-6 col-centered">
-                    <h3>An unexpected error occurred. Please try again later.</h3>
-
-                    <div class="buttons">
-                        <a href="#" id="publish-policy-error-link" class="btn-operations">
-                            Ok
-                        </a>
-                    </div>
-                </div>
+        <div class="modal-header">
+            <h3 class="pull-left modal-title">An unexpected error occurred. Please try again later.</h3>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fw fw-cancel"></i></button>
+        </div>
+        <div class="modal-body add-margin-top-2x add-margin-bottom-2x">
+
+        </div>
+        <div class="modal-footer">
+            <div class="buttons">
+                <a href="#" id="publish-policy-error-link" class="btn-operations">
+                    Ok
+                </a>
             </div>
         </div>
     </div>
 
     <div id="unpublish-policy-modal-content" class="hide">
-        <div class="content">
-            <div class="row">
-                <div class="col-lg-5 col-md-6 col-centered">
-                    <h3>Do you really want to unpublish the selected policy(s)?</h3>
-
-                    <div class="buttons">
-                        <a href="#" id="unpublish-policy-yes-link" class="btn-operations">
-                            Yes
-                        </a>
+        <div class="modal-header">
+            <h3 class="pull-left modal-title">Do you really want to unpublish the selected policy(s)?</h3>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fw fw-cancel"></i></button>
+        </div>
+        <div class="modal-body add-margin-top-2x add-margin-bottom-2x">
 
-                        <a href="#" id="unpublish-policy-cancel-link" class="btn-operations">
-                            No
-                        </a>
-                    </div>
-                </div>
+        </div>
+        <div class="modal-footer">
+            <div class="buttons">
+                <a href="#" id="unpublish-policy-yes-link" class="btn-operations">
+                    Yes
+                </a>
+
+                <a href="#" id="unpublish-policy-cancel-link" class="btn-operations">
+                    No
+                </a>
             </div>
         </div>
     </div>
 
     <div id="unpublish-policy-success-content" class="hide">
-        <div class="content">
-            <div class="row">
-                <div class="col-lg-5 col-md-6 col-centered">
-                    <h3>Done. Selected policy was successfully unpublished.</h3>
-
-                    <div class="buttons">
-                        <a href="#" id="unpublish-policy-success-link" class="btn-operations">
-                            Ok
-                        </a>
-                    </div>
-                </div>
+        <div class="modal-header">
+            <h3 class="pull-left modal-title">Done. Selected policy was successfully unpublished.</h3>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fw fw-cancel"></i></button>
+        </div>
+        <div class="modal-body add-margin-top-2x add-margin-bottom-2x">
+
+        </div>
+        <div class="modal-footer">
+            <div class="buttons">
+                <a href="#" id="unpublish-policy-success-link" class="btn-operations">
+                    Ok
+                </a>
             </div>
         </div>
     </div>
 
     <div id="unpublish-policy-error-content" class="hide">
-        <div class="content">
-            <div class="row">
-                <div class="col-lg-5 col-md-6 col-centered">
-                    <h3>An unexpected error occurred. Please try again later.</h3>
-
-                    <div class="buttons">
-                        <a href="#" id="unpublish-policy-error-link" class="btn-operations">
-                            Ok
-                        </a>
-                    </div>
-                </div>
+        <div class="modal-header">
+            <h3 class="pull-left modal-title">An unexpected error occurred. Please try again later.</h3>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fw fw-cancel"></i></button>
+        </div>
+        <div class="modal-body add-margin-top-2x add-margin-bottom-2x">
+
+        </div>
+        <div class="modal-footer">
+            <div class="buttons">
+                <a href="#" id="unpublish-policy-error-link" class="btn-operations">
+                    Ok
+                </a>
             </div>
         </div>
     </div>
 
     <div id="save-policy-priorities-success-content" class="hide">
-        <div class="content">
-            <div class="row">
-                <div class="col-lg-5 col-md-6 col-centered">
-                    <h3>Done. New Policy priorities were successfully updated.</h3>
-
-                    <div class="buttons">
-                        <a href="#" id="save-policy-priorities-success-link" class="btn-operations">
-                            Ok
-                        </a>
-                    </div>
-                </div>
+        <div class="modal-header">
+            <h3 class="pull-left modal-title">Done. New Policy priorities were successfully updated.</h3>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fw fw-cancel"></i></button>
+        </div>
+        <div class="modal-body add-margin-top-2x add-margin-bottom-2x">
+
+        </div>
+        <div class="modal-footer">
+            <div class="buttons">
+                <a href="#" id="save-policy-priorities-success-link" class="btn-operations">
+                    Ok
+                </a>
             </div>
         </div>
     </div>
 
     <div id="save-policy-priorities-error-content" class="hide">
-        <div class="content">
-            <div class="row">
-                <div class="col-lg-5 col-md-6 col-centered">
-                    <h3>An unexpected error occurred. Please try again later.</h3>
-                    <h4 class="message-from-server"></h4>
-
-                    <div class="buttons">
-                        <a href="#" id="save-policy-priorities-error-link" class="btn-operations">
-                            Ok
-                        </a>
-                    </div>
-                </div>
+        <div class="modal-header">
+            <h3 class="pull-left modal-title">An unexpected error occurred. Please try again later.</h3>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fw fw-cancel"></i></button>
+        </div>
+        <div class="modal-body add-margin-top-2x add-margin-bottom-2x">
+
+        </div>
+        <div class="modal-footer">
+            <div class="buttons">
+                <a href="#" id="save-policy-priorities-error-link" class="btn-operations">
+                    Ok
+                </a>
             </div>
         </div>
     </div>
 
     <div id="change-policy-modal-content" class="hide">
-        <div class="content">
-            <div class="row">
-                <div class="col-lg-5 col-md-6 col-centered">
-                    <h3>Do you really want to apply changes to all policies?</h3>
-
-                    <div class="buttons">
-                        <a href="#" id="change-policy-yes-link" class="btn-operations">
-                            Yes
-                        </a>
+        <div class="modal-header">
+            <h3 class="pull-left modal-title">Do you really want to apply changes to all policies?</h3>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fw fw-cancel"></i></button>
+        </div>
+        <div class="modal-body add-margin-top-2x add-margin-bottom-2x">
 
-                        <a href="#" id="change-policy-cancel-link" class="btn-operations">
-                            No
-                        </a>
-                    </div>
-                </div>
+        </div>
+        <div class="modal-footer">
+            <div class="buttons">
+                <a href="#" id="change-policy-yes-link" class="btn-operations">
+                    Yes
+                </a>
+
+                <a href="#" id="change-policy-cancel-link" class="btn-operations">
+                    No
+                </a>
             </div>
         </div>
     </div>
 
     <div id="change-policy-success-content" class="hide">
-        <div class="content">
-            <div class="row">
-                <div class="col-lg-5 col-md-6 col-centered">
-                    <h3>Done. Changes applied successfully.</h3>
-
-                    <div class="buttons">
-                        <a href="#" id="change-policy-success-link" class="btn-operations">
-                            Ok
-                        </a>
-                    </div>
-                </div>
+        <div class="modal-header">
+            <h3 class="pull-left modal-title">Done. Changes applied successfully.</h3>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fw fw-cancel"></i></button>
+        </div>
+        <div class="modal-body add-margin-top-2x add-margin-bottom-2x">
+
+        </div>
+        <div class="modal-footer">
+            <div class="buttons">
+                <a href="#" id="change-policy-success-link" class="btn-operations">
+                    Ok
+                </a>
             </div>
         </div>
     </div>
 
     <div id="change-policy-error-content" class="hide">
-        <div class="content">
-            <div class="row">
-                <div class="col-lg-5 col-md-6 col-centered">
-                    <h3>An unexpected error occurred. Please try again later.</h3>
-
-                    <div class="buttons">
-                        <a href="#" id="change-policy-error-link" class="btn-operations">
-                            Ok
-                        </a>
-                    </div>
-                </div>
+        <div class="modal-header">
+            <h3 class="pull-left modal-title">An unexpected error occurred. Please try again later.</h3>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fw fw-cancel"></i></button>
+        </div>
+        <div class="modal-body add-margin-top-2x add-margin-bottom-2x">
+
+        </div>
+        <div class="modal-footer">
+            <div class="buttons">
+                <a href="#" id="change-policy-error-link" class="btn-operations">
+                    Ok
+                </a>
             </div>
         </div>
     </div>
 
     <div id="errorPolicyUnPublish" class="hide">
-        <div class="content">
-            <div class="row">
-                <div class="col-lg-5 col-md-6 col-centered">
-                    <h3>
-                    <span class="fw-stack">
+        <div class="modal-header">
+            <h3 class="pull-left modal-title">
+                <span class="fw-stack">
                         <i class="fw fw-ring fw-stack-2x"></i>
                         <i class="fw fw-error fw-stack-1x"></i>
                     </span>
-                        Operation cannot be performed !
-                    </h3>
-                    <h4>
-                        Please select a policy or a list of policies to unpublish.
-                    </h4>
-
-                    <div class="buttons">
-                        <a href="javascript:hidePopup()" class="btn-operations">
-                            Ok
-                        </a>
-                    </div>
-                </div>
+                Operation cannot be performed !
+            </h3>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fw fw-cancel"></i></button>
+        </div>
+        <div class="modal-body add-margin-top-2x add-margin-bottom-2x">
+            <h4>Please select a policy or a list of policies to unpublish.</h4>
+        </div>
+        <div class="modal-footer">
+            <div class="buttons">
+                <a href="javascript:hidePopup()" class="btn-operations">
+                    Ok
+                </a>
             </div>
         </div>
     </div>
     <div id="errorPolicyUnPublishSelection" class="hide">
-        <div class="content">
-            <div class="row">
-                <div class="col-lg-5 col-md-6 col-centered">
-                    <h3>
-                    <span class="fw-stack">
+        <div class="modal-header">
+            <h3 class="pull-left modal-title">
+                <span class="fw-stack">
                         <i class="fw fw-ring fw-stack-2x"></i>
                         <i class="fw fw-error fw-stack-1x"></i>
                     </span>
-                        Operation cannot be performed !
-                    </h3>
-                    <h4>
-                        You cannot select already inactive policies. Please deselect inactive policies
-                        and try again.
-                    </h4>
-
-                    <div class="buttons">
-                        <a href="javascript:hidePopup()" class="btn-operations">
-                            Ok
-                        </a>
-                    </div>
-                </div>
+                Operation cannot be performed !
+            </h3>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fw fw-cancel"></i></button>
+        </div>
+        <div class="modal-body add-margin-top-2x add-margin-bottom-2x">
+            <h4>You cannot select already inactive policies. Please deselect inactive policies
+                and try again.</h4>
+        </div>
+        <div class="modal-footer">
+            <div class="buttons">
+                <a href="javascript:hidePopup()" class="btn-operations">
+                    Ok
+                </a>
             </div>
         </div>
     </div>
     <div id="errorPolicyPublishSelection" class="hide">
-        <div class="content">
-            <div class="row">
-                <div class="col-lg-5 col-md-6 col-centered">
-                    <h3>
-                    <span class="fw-stack">
+        <div class="modal-header">
+            <h3 class="pull-left modal-title">
+                <span class="fw-stack">
                         <i class="fw fw-ring fw-stack-2x"></i>
                         <i class="fw fw-error fw-stack-1x"></i>
                     </span>
-                        Operation cannot be performed !
-                    </h3>
-                    <h4>
-                        You cannot select already active policies. Please deselect active policies and
-                        try again.
-                    </h4>
-
-                    <div class="buttons">
-                        <a href="javascript:hidePopup()" class="btn-operations">
-                            Ok
-                        </a>
-                    </div>
-                </div>
+                Operation cannot be performed !
+            </h3>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fw fw-cancel"></i></button>
+        </div>
+        <div class="modal-body add-margin-top-2x add-margin-bottom-2x">
+            <h4>You cannot select already active policies. Please deselect active policies and
+                try again.</h4>
+        </div>
+        <div class="modal-footer">
+            <div class="buttons">
+                <a href="javascript:hidePopup()" class="btn-operations">
+                    Ok
+                </a>
             </div>
         </div>
     </div>
     <div id="errorPolicyPublish" class="hide">
-        <div class="content">
-            <div class="row">
-                <div class="col-lg-5 col-md-6 col-centered">
-                    <h3>
-                    <span class="fw-stack">
+        <div class="modal-header">
+            <h3 class="pull-left modal-title">
+                <span class="fw-stack">
                         <i class="fw fw-ring fw-stack-2x"></i>
                         <i class="fw fw-error fw-stack-1x"></i>
                     </span>
-                        Operation cannot be performed !
-                    </h3>
-                    <h4>
-                        Please select a policy or a list of policies to publish.
-                    </h4>
-
-                    <div class="buttons">
-                        <a href="javascript:hidePopup()" class="btn-operations">
-                            Ok
-                        </a>
-                    </div>
-                </div>
+                Operation cannot be performed !
+            </h3>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fw fw-cancel"></i></button>
+        </div>
+        <div class="modal-body add-margin-top-2x add-margin-bottom-2x">
+            <h4>Please select a policy or a list of policies to publish.</h4>
+        </div>
+        <div class="modal-footer">
+            <div class="buttons">
+                <a href="javascript:hidePopup()" class="btn-operations">
+                    Ok
+                </a>
             </div>
         </div>
     </div>
     <div id="errorPolicy" class="hide">
-        <div class="content">
-            <div class="row">
-                <div class="col-lg-5 col-md-6 col-centered">
-                    <h3>
-                    <span class="fw-stack">
+        <div class="modal-header">
+            <h3 class="pull-left modal-title">
+                <span class="fw-stack">
                         <i class="fw fw-ring fw-stack-2x"></i>
                         <i class="fw fw-error fw-stack-1x"></i>
                     </span>
-                        Operation cannot be performed !
-                    </h3>
-                    <h4>
-                        Please select a policy or a list of policies to remove.
-                    </h4>
-
-                    <div class="buttons">
-                        <a href="javascript:hidePopup()" class="btn-operations">
-                            Ok
-                        </a>
-                    </div>
-                </div>
+                Operation cannot be performed !
+            </h3>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fw fw-cancel"></i></button>
+        </div>
+        <div class="modal-body add-margin-top-2x add-margin-bottom-2x">
+            <h4>Please select a policy or a list of policies to remove.</h4>
+        </div>
+        <div class="modal-footer">
+            <div class="buttons">
+                <a href="javascript:hidePopup()" class="btn-operations">
+                    Ok
+                </a>
             </div>
         </div>
     </div>
diff --git a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.users/users.hbs b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.users/users.hbs
index 517a36eecf2..88cdc69918b 100644
--- a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.users/users.hbs
+++ b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.users/users.hbs
@@ -119,16 +119,17 @@
     </div>
 
     <div id="invite-user-success-content" class="hide">
-        <div class="content">
-            <div class="row">
-                <div class="col-lg-5 col-md-6 col-centered">
-                    <h3>User invitation email for enrollment was successfully sent.</h3>
-                    <div class="buttons">
-                        <a href="#" id="invite-user-success-link" class="btn-operations">
-                            Ok
-                        </a>
-                    </div>
-                </div>
+        <div class="modal-header">
+            <h3 class="pull-left modal-title">User invitation email for enrollment was successfully sent.</h3>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fw fw-cancel"></i></button>
+        </div>
+        <div class="modal-body add-margin-top-2x add-margin-bottom-2x">
+        </div>
+        <div class="modal-footer">
+            <div class="buttons">
+                <a href="#" id="invite-user-success-link" class="btn-operations">
+                    Ok
+                </a>
             </div>
         </div>
     </div>