Replaced RCUE with PatternFly (part 3).

The RCUE library has been replaced with a more generic PatternFly
library. The dialog boxes and the navigation bar have been updated
accordingly.

Ticket #958

14 files changed, 279 insertions, 282 deletions

diff --git a/base/server/share/webapps/pki/css/pki-tables.css b/base/server/share/webapps/pki/css/pki-tables.css
index b8534611e..63a99549b 100644
--- a/base/server/share/webapps/pki/css/pki-tables.css
+++ b/base/server/share/webapps/pki/css/pki-tables.css
@@ -8,7 +8,7 @@ table {
 table caption {
   text-align: left;
   font-weight: bold;
-  padding: 11.5px;
+  padding: 11px;
 }
 
 table tbody tr:nth-child(even) {
@@ -20,37 +20,12 @@ table tbody tr td,
 table thead tr th {
   font-weight: normal;
   padding: 6px 15px;
-  font-size: 11.5px;
+  font-size: 11px;
   border-top: 1px #ebebeb;
   border-right: 1px #dcdcdc solid;
   text-align: left;
 }
 
-.rcue-table-actions {
-  padding: 1px;
-  border-top: none;
-}
-
-.rcue-table-actions span:last-child {
-  float: right;
-}
-
-.rcue-table-actions {
-  padding: 1px;
-}
-
-.rcue-table-actions button {
-  padding: 3px 8px;
-  font-size: 11px;
-  box-shadow: 1px 2px 2px #e3e3e3;
-  margin: 4px;
-}
-
-.rcue-table-number {
-  text-align: right;
-  width: 100px;
-}
-
 table thead tr th {
   font-weight: bold;
   border: none;
diff --git a/base/server/share/webapps/pki/css/pki-ui.css b/base/server/share/webapps/pki/css/pki-ui.css
index 73d287704..d5c74445f 100644
--- a/base/server/share/webapps/pki/css/pki-ui.css
+++ b/base/server/share/webapps/pki/css/pki-ui.css
@@ -19,11 +19,8 @@
  * @author Endi S. Dewata
  */
 
-@import url("pki-common.css");
-@import url("pki-tabs.css");
 @import url("pki-forms.css");
 @import url("pki-tables.css");
-@import url("pki-dialogs.css");
 
 .pki-header {
   margin-bottom: 10px;
@@ -53,39 +50,12 @@
   margin-bottom: 5px;
 }
 
-.pki-fields fieldset label {
-  min-width: 100px;
+fieldset label {
+  min-width: 150px;
   display: inline-block;
   line-height: 30px;
 }
 
-.rcue-dialog-background {
-  display: none;
-}
-
-.rcue-dialog header {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  margin: 0;
-  padding: 16px 16px 0 22px;
-}
-
-.rcue-dialog fieldset {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 75px;
-  bottom: 60px;
-  padding: 16px 16px 16px 44px;
-}
-
-.rcue-dialog footer {
-  right: 0;
-  padding: 0 16px 16px 22px;
-}
-
 input[readonly="readonly"] {
   background-image: none;
   border: 1px solid #FFFFFF;
diff --git a/base/server/share/webapps/pki/js/pki-ui.js b/base/server/share/webapps/pki/js/pki-ui.js
index 442c6b27d..9a1d2e593 100644
--- a/base/server/share/webapps/pki/js/pki-ui.js
+++ b/base/server/share/webapps/pki/js/pki-ui.js
@@ -188,7 +188,7 @@ var Dialog = Backbone.View.extend({
         if (self.actions == undefined) {
             // by default all buttons are active
             self.actions = [];
-            self.$("button").each(function(index) {
+            self.$(".modal-footer button").each(function(index) {
                 var button = $(this);
                 var action = button.attr("name");
                 self.actions.push(action);
@@ -204,21 +204,18 @@ var Dialog = Backbone.View.extend({
         self.handlers["close"] = function() {
             self.close();
         };
+
+        self.$el.modal({ show: false });
     },
     render: function() {
         var self = this;
 
         if (self.title) {
-            self.$("header h1").text(self.title);
+            self.$(".modal-title").text(self.title);
         }
 
-        self.$(".rcue-button-close").click(function(e) {
-            self.close();
-            e.preventDefault();
-        });
-
         // setup input fields
-        self.$("input").each(function(index) {
+        self.$(".modal-body input").each(function(index) {
             var input = $(this);
             var name = input.attr("name");
             if (_.contains(self.readonly, name)) {
@@ -229,7 +226,7 @@ var Dialog = Backbone.View.extend({
         });
 
         // setup buttons
-        self.$("button").each(function(index) {
+        self.$(".modal-footer button").each(function(index) {
             var button = $(this);
             var action = button.attr("name");
 
@@ -257,15 +254,14 @@ var Dialog = Backbone.View.extend({
     open: function() {
         var self = this;
         self.render();
-        self.$el.show();
+        self.$el.modal("show");
     },
     close: function() {
         var self = this;
-        self.$el.hide();
+        self.$el.modal("hide");
 
         // remove event handlers
-        self.$(".rcue-button-close").off("click");
-        self.$("button").each(function(index) {
+        self.$(".modal-footer button").each(function(index) {
             var button = $(this);
             button.off("click");
         });
@@ -275,13 +271,13 @@ var Dialog = Backbone.View.extend({
         var self = this;
 
         // load input fields
-        $("input", self.$el).each(function(index) {
+        self.$(".modal-body input").each(function(index) {
             var input = $(this);
             self.loadField(input);
         });
 
         // load drop-down lists
-        $("select", self.$el).each(function(index) {
+        self.$(".modal-body select").each(function(index) {
             var input = $(this);
             self.loadField(input);
         });
@@ -297,13 +293,13 @@ var Dialog = Backbone.View.extend({
         var self = this;
 
         // save input fields
-        $("input", self.$el).each(function(index) {
+        self.$(".modal-body input").each(function(index) {
             var input = $(this);
             self.saveField(input);
         });
 
         // save drop-down lists
-        $("select", self.$el).each(function(index) {
+        self.$(".modal-body select").each(function(index) {
             var input = $(this);
             self.saveField(input);
         });
@@ -328,18 +324,13 @@ var ErrorDialog = Backbone.View.extend({
         var self = this;
 
         if (self.title) {
-            self.$(".pki-title").text(self.title);
+            self.$(".modal-title").text(self.title);
         }
 
         if (self.content) {
             self.$("span[name=content]").html(self.content);
         }
 
-        self.$(".rcue-button-close").click(function(e) {
-            self.close();
-            e.preventDefault();
-        });
-
         self.$("button[name=close]").click(function(e) {
             self.close();
             e.preventDefault();
diff --git a/base/tps-tomcat/shared/webapps/tps/index.html b/base/tps-tomcat/shared/webapps/tps/index.html
index 183b73fcf..c511f147b 100644
--- a/base/tps-tomcat/shared/webapps/tps/index.html
+++ b/base/tps-tomcat/shared/webapps/tps/index.html
@@ -18,7 +18,7 @@
 <html>
 <head>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link href="/pki/css/rcue.css" rel="stylesheet" media="screen, print">
+    <link href="/pki/css/patternfly.css" rel="stylesheet" media="screen, print">
     <script src="/pki/js/jquery.js"></script>
     <script src="/pki/js/bootstrap.js"></script>
     <script src="/tps/js/account.js"></script>
@@ -41,7 +41,7 @@ $(function() {
 </head>
 <body>
 
-<nav id="navigation" class="navbar navbar-default navbar-rcue" role="navigation">
+<nav id="navigation" class="navbar navbar-default navbar-pf" role="navigation">
 <div class="navbar-header">
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-1">
         <span class="sr-only">Toggle navigation</span>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/audit.html b/base/tps-tomcat/shared/webapps/tps/ui/audit.html
index 3e5662e16..3e6cc6cbb 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/audit.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/audit.html
@@ -106,23 +106,29 @@
 </tfoot>
 </table>
 
-<div id="event-dialog" class="rcue-dialog-background">
-    <div class="rcue-dialog">
-        <header>
-            <h1>Edit Event</h1>
-            <a class="rcue-button-close" href="#"></a>
-        </header>
-        <fieldset>
-            <label>Name</label>
-            <input name="name" readonly="readonly"><br>
-            <label>Value</label>
-            <input name="value" readonly="readonly"><br>
-        </fieldset>
-        <footer>
-            <button name="add" class="primary">Add</button>
-            <button name="save" class="primary">Save</button>
-            <button name="close" class="primary">Close</button>
-            <button name="cancel">Cancel</button>
-        </footer>
+<div id="event-dialog" class="modal">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
+                    <span class="pficon pficon-close"></span>
+                </button>
+                <h4 class="modal-title">Edit Event</h4>
+            </div>
+            <div class="modal-body">
+                <fieldset>
+                    <label>Name</label>
+                    <input name="name" readonly="readonly"><br>
+                    <label>Value</label>
+                    <input name="value" readonly="readonly"><br>
+                </fieldset>
+            </div>
+            <div class="modal-footer">
+                <button name="add" class="btn btn-primary">Add</button>
+                <button name="save" class="btn btn-primary">Save</button>
+                <button name="close" class="btn btn-primary">Close</button>
+                <button name="cancel" class="btn btn-default" data-dismiss="modal">Cancel</button>
+            </div>
+        </div>
     </div>
 </div>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/authenticator.html b/base/tps-tomcat/shared/webapps/tps/ui/authenticator.html
index 866dab10c..6da1fbf12 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/authenticator.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/authenticator.html
@@ -103,23 +103,29 @@
 </tfoot>
 </table>
 
-<div id="property-dialog" class="rcue-dialog-background">
-    <div class="rcue-dialog">
-        <header>
-            <h1>Edit Property</h1>
-            <a class="rcue-button-close" href="#"></a>
-        </header>
-        <fieldset>
-            <label>Name</label>
-            <input name="name" readonly="readonly"><br>
-            <label>Value</label>
-            <input name="value" readonly="readonly"><br>
-        </fieldset>
-        <footer>
-            <button name="add" class="primary">Add</button>
-            <button name="save" class="primary">Save</button>
-            <button name="close" class="primary">Close</button>
-            <button name="cancel">Cancel</button>
-        </footer>
+<div id="property-dialog" class="modal">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
+                    <span class="pficon pficon-close"></span>
+                </button>
+                <h4 class="modal-title">Edit Property</h4>
+            </div>
+            <div class="modal-body">
+		        <fieldset>
+		            <label>Name</label>
+		            <input name="name" readonly="readonly"><br>
+		            <label>Value</label>
+		            <input name="value" readonly="readonly"><br>
+		        </fieldset>
+            </div>
+            <div class="modal-footer">
+	            <button name="add" class="btn btn-primary">Add</button>
+	            <button name="save" class="btn btn-primary">Save</button>
+	            <button name="close" class="btn btn-primary">Close</button>
+	            <button name="cancel" class="btn btn-default" data-dismiss="modal">Cancel</button>
+            </div>
+        </div>
     </div>
 </div>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/config.html b/base/tps-tomcat/shared/webapps/tps/ui/config.html
index 3d838bd6f..d94a0fa28 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/config.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/config.html
@@ -88,23 +88,29 @@
 </tfoot>
 </table>
 
-<div id="property-dialog" class="rcue-dialog-background">
-    <div class="rcue-dialog">
-        <header>
-            <h1>Edit Property</h1>
-            <a class="rcue-button-close" href="#"></a>
-        </header>
-        <fieldset>
-            <label>Name</label>
-            <input name="name" readonly="readonly"><br>
-            <label>Value</label>
-            <input name="value" readonly="readonly"><br>
-        </fieldset>
-        <footer>
-            <button name="add" class="primary">Add</button>
-            <button name="save" class="primary">Save</button>
-            <button name="close" class="primary">Close</button>
-            <button name="cancel">Cancel</button>
-        </footer>
+<div id="property-dialog" class="modal">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
+                    <span class="pficon pficon-close"></span>
+                </button>
+                <h4 class="modal-title">Edit Property</h4>
+            </div>
+            <div class="modal-body">
+		        <fieldset>
+		            <label>Name</label>
+		            <input name="name" readonly="readonly"><br>
+		            <label>Value</label>
+		            <input name="value" readonly="readonly"><br>
+		        </fieldset>
+            </div>
+            <div class="modal-footer">
+	            <button name="add" class="btn btn-primary">Add</button>
+	            <button name="save" class="btn btn-primary">Save</button>
+	            <button name="close" class="btn btn-primary">Close</button>
+	            <button name="cancel" class="btn btn-default" data-dismiss="modal">Cancel</button>
+            </div>
+        </div>
     </div>
 </div>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/connector.html b/base/tps-tomcat/shared/webapps/tps/ui/connector.html
index 1eba29f6c..015a7ac6d 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/connector.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/connector.html
@@ -103,23 +103,29 @@
 </tfoot>
 </table>
 
-<div id="property-dialog" class="rcue-dialog-background">
-    <div class="rcue-dialog">
-        <header>
-            <h1>Edit Property</h1>
-            <a class="rcue-button-close" href="#"></a>
-        </header>
-        <fieldset>
-            <label>Name</label>
-            <input name="name" readonly="readonly"><br>
-            <label>Value</label>
-            <input name="value" readonly="readonly"><br>
-        </fieldset>
-        <footer>
-            <button name="add" class="primary">Add</button>
-            <button name="save" class="primary">Save</button>
-            <button name="close" class="primary">Close</button>
-            <button name="cancel">Cancel</button>
-        </footer>
+<div id="property-dialog" class="modal">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
+                    <span class="pficon pficon-close"></span>
+                </button>
+                <h4 class="modal-title">Edit Property</h4>
+            </div>
+            <div class="modal-body">
+		        <fieldset>
+		            <label>Name</label>
+		            <input name="name" readonly="readonly"><br>
+		            <label>Value</label>
+		            <input name="value" readonly="readonly"><br>
+		        </fieldset>
+            </div>
+            <div class="modal-footer">
+	            <button name="add" class="btn btn-primary">Add</button>
+	            <button name="save" class="btn btn-primary">Save</button>
+	            <button name="close" class="btn btn-primary">Close</button>
+	            <button name="cancel" class="btn btn-default" data-dismiss="modal">Cancel</button>
+            </div>
+        </div>
     </div>
 </div>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/group.html b/base/tps-tomcat/shared/webapps/tps/ui/group.html
index 17e7d1e1d..493b79488 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/group.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/group.html
@@ -98,22 +98,28 @@
 </tfoot>
 </table>
 
-<div id="member-dialog" class="rcue-dialog-background">
-    <div class="rcue-dialog">
-        <header>
-            <h1>Group Member</h1>
-            <a class="rcue-button-close" href="#"></a>
-        </header>
-        <fieldset>
-            <label>Group ID</label>
-            <input name="groupID" readonly="readonly"><br>
-            <label>User ID</label>
-            <input name="memberID" readonly="readonly"><br>
-        </fieldset>
-        <footer>
-            <button name="add" class="primary">Add</button>
-            <button name="close" class="primary">Close</button>
-            <button name="cancel">Cancel</button>
-        </footer>
+<div id="member-dialog" class="modal">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
+                    <span class="pficon pficon-close"></span>
+                </button>
+                <h4 class="modal-title">Group Member</h4>
+            </div>
+            <div class="modal-body">
+		        <fieldset>
+		            <label>Group ID</label>
+		            <input name="groupID" readonly="readonly"><br>
+		            <label>User ID</label>
+		            <input name="memberID" readonly="readonly"><br>
+		        </fieldset>
+            </div>
+            <div class="modal-footer">
+	            <button name="add" class="btn btn-primary">Add</button>
+	            <button name="close" class="btn btn-primary">Close</button>
+	            <button name="cancel" class="btn btn-default" data-dismiss="modal">Cancel</button>
+            </div>
+        </div>
     </div>
 </div>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/index.html b/base/tps-tomcat/shared/webapps/tps/ui/index.html
index 8a969e0ee..edf3f3092 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/index.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/index.html
@@ -18,12 +18,13 @@
 <html>
 <head>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link href="/pki/css/rcue.css" rel="stylesheet" media="screen, print">
+    <link href="/pki/css/patternfly.css" rel="stylesheet" media="screen, print">
     <link href="/pki/css/pki-ui.css" rel="stylesheet" type="text/css">
     <script src="/pki/js/jquery.js"></script>
     <script src="/pki/js/underscore.js"></script>
     <script src="/pki/js/backbone.js"></script>
     <script src="/pki/js/bootstrap.js"></script>
+    <script src="/pki/js/patternfly.js"></script>
     <script src="/pki/js/pki-ui.js"></script>
     <script src="/tps/js/tps.js"></script>
     <script src="/tps/js/account.js"></script>
@@ -333,7 +334,7 @@ $(function() {
 </head>
 <body>
 
-<nav id="navigation" class="navbar navbar-default navbar-rcue" role="navigation">
+<nav id="navigation" class="navbar navbar-default navbar-pf" role="navigation">
 <div class="navbar-header">
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-1">
         <span class="sr-only">Toggle navigation</span>
@@ -350,7 +351,7 @@ $(function() {
     <li><a href="#">Status</a></li>
     <li class="dropdown">
         <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-        <span class="rcueicon rcueicon-user"></span>
+        <span class="pficon pficon-user"></span>
         <span id="user"></span><b class="caret"></b>
         </a>
         <ul class="dropdown-menu">
@@ -395,18 +396,24 @@ $(function() {
 <div id="content">
 </div>
 
-<div id="error-dialog" class="rcue-dialog-background">
-    <div class="rcue-dialog">
-        <header>
-            <span class="pki-title">Error</span>
-            <a class="rcue-button-close" href="#"></a>
-        </header>
-        <fieldset>
-            <span name="content"></span>
-        </fieldset>
-        <footer>
-            <button name="close" class="primary">Close</button>
-        </footer>
+<div id="error-dialog" class="modal">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
+                    <span class="pficon pficon-close"></span>
+                </button>
+                <h4 class="modal-title">Error</h4>
+            </div>
+            <div class="modal-body">
+		        <fieldset>
+		            <span name="content"></span>
+		        </fieldset>
+            </div>
+            <div class="modal-footer">
+                <button name="close" class="btn btn-primary">Close</button>
+            </div>
+        </div>
     </div>
 </div>
 
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/profile-mapping.html b/base/tps-tomcat/shared/webapps/tps/ui/profile-mapping.html
index 9f0a214e0..139d21262 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/profile-mapping.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/profile-mapping.html
@@ -103,23 +103,29 @@
 </tfoot>
 </table>
 
-<div id="property-dialog" class="rcue-dialog-background">
-    <div class="rcue-dialog">
-        <header>
-            <h1>Edit Property</h1>
-            <a class="rcue-button-close" href="#"></a>
-        </header>
-        <fieldset>
-            <label>Name</label>
-            <input name="name" readonly="readonly"><br>
-            <label>Value</label>
-            <input name="value" readonly="readonly"><br>
-        </fieldset>
-        <footer>
-            <button name="add" class="primary">Add</button>
-            <button name="save" class="primary">Save</button>
-            <button name="close" class="primary">Close</button>
-            <button name="cancel">Cancel</button>
-        </footer>
+<div id="property-dialog" class="modal">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
+                    <span class="pficon pficon-close"></span>
+                </button>
+                <h4 class="modal-title">Edit Property</h4>
+            </div>
+            <div class="modal-body">
+		        <fieldset>
+		            <label>Name</label>
+		            <input name="name" readonly="readonly"><br>
+		            <label>Value</label>
+		            <input name="value" readonly="readonly"><br>
+		        </fieldset>
+            </div>
+            <div class="modal-footer">
+                <button name="add" class="btn btn-primary">Add</button>
+                <button name="save" class="btn btn-primary">Save</button>
+                <button name="close" class="btn btn-primary">Close</button>
+                <button name="cancel" class="btn btn-default" data-dismiss="modal">Cancel</button>
+            </div>
+        </div>
     </div>
 </div>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/profile.html b/base/tps-tomcat/shared/webapps/tps/ui/profile.html
index e41444c9d..61811bcc3 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/profile.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/profile.html
@@ -103,23 +103,29 @@
 </tfoot>
 </table>
 
-<div id="property-dialog" class="rcue-dialog-background">
-    <div class="rcue-dialog">
-        <header>
-            <h1>Edit Property</h1>
-            <a class="rcue-button-close" href="#"></a>
-        </header>
-        <fieldset>
-            <label>Name</label>
-            <input name="name" readonly="readonly"><br>
-            <label>Value</label>
-            <input name="value" readonly="readonly"><br>
-        </fieldset>
-        <footer>
-            <button name="add" class="primary">Add</button>
-            <button name="save" class="primary">Save</button>
-            <button name="close" class="primary">Close</button>
-            <button name="cancel">Cancel</button>
-        </footer>
+<div id="property-dialog" class="modal">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
+                    <span class="pficon pficon-close"></span>
+                </button>
+                <h4 class="modal-title">Edit Property</h4>
+            </div>
+            <div class="modal-body">
+                <fieldset>
+                    <label>Name</label>
+                    <input name="name" readonly="readonly"><br>
+                    <label>Value</label>
+                    <input name="value" readonly="readonly"><br>
+                </fieldset>
+            </div>
+            <div class="modal-footer">
+                <button name="add" class="btn btn-primary">Add</button>
+                <button name="save" class="btn btn-primary">Save</button>
+                <button name="close" class="btn btn-primary">Close</button>
+                <button name="cancel" class="btn btn-default" data-dismiss="modal">Cancel</button>
+            </div>
+        </div>
     </div>
 </div>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/token.html b/base/tps-tomcat/shared/webapps/tps/ui/token.html
index 247300af4..6d34af5d2 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/token.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/token.html
@@ -61,28 +61,34 @@
 </fieldset>
 </div>
 
-<div id="token-status-dialog" class="rcue-dialog-background">
-    <div class="rcue-dialog">
-        <header>
-            <h1>Change Token Status</h1>
-            <a class="rcue-button-close" href="#"></a>
-        </header>
-        <fieldset>
-            <label>Token ID</label>
-            <input name="tokenID" readonly="readonly"><br>
-            <label>Status</label>
-            <select name="status">
-            <option value="UNINITIALIZED">Uninitialized</option>
-            <option value="ACTIVE">Active</option>
-            <option value="TEMP_LOST">Temporarily lost</option>
-            <option value="PERM_LOST">Permanently lost</option>
-            <option value="DAMAGED">Physically damaged</option>
-            <option value="TERMINATED">Terminated</option>
-            </select><br>
-        </fieldset>
-        <footer>
-            <button name="save" class="primary">Save</button>
-            <button name="cancel">Cancel</button>
-        </footer>
+<div id="token-status-dialog" class="modal">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
+                    <span class="pficon pficon-close"></span>
+                </button>
+                <h4 class="modal-title">Change Token Status</h4>
+            </div>
+            <div class="modal-body">
+		        <fieldset>
+		            <label>Token ID</label>
+		            <input name="tokenID" readonly="readonly"><br>
+		            <label>Status</label>
+		            <select name="status">
+		            <option value="UNINITIALIZED">Uninitialized</option>
+		            <option value="ACTIVE">Active</option>
+		            <option value="TEMP_LOST">Temporarily lost</option>
+		            <option value="PERM_LOST">Permanently lost</option>
+		            <option value="DAMAGED">Physically damaged</option>
+		            <option value="TERMINATED">Terminated</option>
+		            </select><br>
+		        </fieldset>
+            </div>
+            <div class="modal-footer">
+	            <button name="save" class="btn btn-primary">Save</button>
+	            <button name="cancel" class="btn btn-default" data-dismiss="modal">Cancel</button>
+            </div>
+        </div>
     </div>
 </div>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/tokens.html b/base/tps-tomcat/shared/webapps/tps/ui/tokens.html
index e5f52105f..98ae769aa 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/tokens.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/tokens.html
@@ -86,40 +86,46 @@
 </tfoot>
 </table>
 
-<div id="token-status-dialog" class="rcue-dialog-background">
-    <div class="rcue-dialog">
-        <header>
-            <h1>Change Token Status</h1>
-            <a class="rcue-button-close" href="#"></a>
-        </header>
-        <fieldset>
-            <label>Token ID</label>
-            <input name="tokenID" readonly="readonly"><br>
-            <label>User ID</label>
-            <input name="userID" readonly="readonly"><br>
-            <label>Type</label>
-            <input name="type" readonly="readonly"><br>
-            <label>Status</label>
-            <select name="status">
-            <option value="UNINITIALIZED">Uninitialized</option>
-            <option value="ACTIVE">Active</option>
-            <option value="TEMP_LOST">Temporarily lost</option>
-            <option value="PERM_LOST">Permanently lost</option>
-            <option value="DAMAGED">Physically damaged</option>
-            <option value="TERMINATED">Terminated</option>
-            </select><br>
-            <label>Applet ID</label>
-            <input name="appletID" readonly="readonly"><br>
-            <label>Key Info</label>
-            <input name="keyInfo" readonly="readonly"><br>
-            <label>Created</label>
-            <input name="createTimestamp" readonly="readonly"><br>
-            <label>Modified</label>
-            <input name="modifyTimestamp" readonly="readonly"><br>
-        </fieldset>
-        <footer>
-            <button name="save" class="primary">Save</button>
-            <button name="cancel">Cancel</button>
-        </footer>
+<div id="token-status-dialog" class="modal">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
+                    <span class="pficon pficon-close"></span>
+                </button>
+                <h4 class="modal-title">Change Token Status</h4>
+            </div>
+            <div class="modal-body">
+		        <fieldset>
+		            <label>Token ID</label>
+		            <input name="tokenID" readonly="readonly"><br>
+		            <label>User ID</label>
+		            <input name="userID" readonly="readonly"><br>
+		            <label>Type</label>
+		            <input name="type" readonly="readonly"><br>
+		            <label>Status</label>
+		            <select name="status">
+		            <option value="UNINITIALIZED">Uninitialized</option>
+		            <option value="ACTIVE">Active</option>
+		            <option value="TEMP_LOST">Temporarily lost</option>
+		            <option value="PERM_LOST">Permanently lost</option>
+		            <option value="DAMAGED">Physically damaged</option>
+		            <option value="TERMINATED">Terminated</option>
+		            </select><br>
+		            <label>Applet ID</label>
+		            <input name="appletID" readonly="readonly"><br>
+		            <label>Key Info</label>
+		            <input name="keyInfo" readonly="readonly"><br>
+		            <label>Created</label>
+		            <input name="createTimestamp" readonly="readonly"><br>
+		            <label>Modified</label>
+		            <input name="modifyTimestamp" readonly="readonly"><br>
+		        </fieldset>
+            </div>
+            <div class="modal-footer">
+	            <button name="save" class="btn btn-primary">Save</button>
+	            <button name="cancel" class="btn btn-default" data-dismiss="modal">Cancel</button>
+            </div>
+        </div>
     </div>
 </div>