Style tweaks and fixes.

Show tooltip over platform image in activity pane that shows player name.

data/interfaces/default/css/plexpy.css

@@ -97,16 +97,144 @@ img {
 	background-repeat: repeat-x;
 	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0);
 }
+.btn {
+    outline:0px !important;
+    -webkit-appearance:none;
+}
 .btn-activity-info,
 .btn-activity-info:focus {
     color: #aaa;
     background-color: rgba(0,0,0,0.5);
-    outline:0px !important;
-    -webkit-appearance:none;
 }
 .btn-activity-info:hover {
     color: #eee;
 }
+.btn-dark {
+    color: #e5e5e5;
+    background-color: #3B3B3B;
+    border-color: transparent;
+}
+.btn-dark:focus,
+.btn-dark.focus {
+  color: #e5e5e5;
+  background-color: #3B3B3B;
+}
+.btn-dark:hover {
+  color: #fff;
+  background-color: #333;
+  border-color: #444;
+}
+.btn-dark:active,
+.btn-dark.active,
+.open > .dropdown-toggle.btn-dark {
+  color: #fff;
+  background-color: #3B3B3B;
+}
+.btn-dark:active:hover,
+.btn-dark.active:hover,
+.open > .dropdown-toggle.btn-dark:hover,
+.btn-dark:active:focus,
+.btn-dark.active:focus,
+.open > .dropdown-toggle.btn-dark:focus,
+.btn-dark:active.focus,
+.btn-dark.active.focus,
+.open > .dropdown-toggle.btn-dark.focus {
+  color: #fff;
+  background-color: #3B3B3B;
+}
+.btn-dark:active,
+.btn-dark.active,
+.open > .dropdown-toggle.btn-dark {
+  background-image: none;
+}
+.btn-dark.disabled,
+.btn-dark[disabled],
+fieldset[disabled] .btn-dark,
+.btn-dark.disabled:hover,
+.btn-dark[disabled]:hover,
+fieldset[disabled] .btn-dark:hover,
+.btn-dark.disabled:focus,
+.btn-dark[disabled]:focus,
+fieldset[disabled] .btn-dark:focus,
+.btn-dark.disabled.focus,
+.btn-dark[disabled].focus,
+fieldset[disabled] .btn-dark.focus,
+.btn-dark.disabled:active,
+.btn-dark[disabled]:active,
+fieldset[disabled] .btn-dark:active,
+.btn-dark.disabled.active,
+.btn-dark[disabled].active,
+fieldset[disabled] .btn-dark.active {
+  background-color: #5cb85c;
+  border-color: #4cae4c;
+}
+.btn-dark .badge {
+  color: #e5e5e5;
+  background-color: #3B3B3B;
+}
+.btn-bright {
+    color: #fff;
+    background-color: #eb8600;
+    border-color: transparent;
+}
+.btn-bright:focus,
+.btn-bright.focus {
+  color: #fff;
+  background-color: #eb8600;
+}
+.btn-bright:hover {
+  color: #fff;
+  background-color: #E69400;
+  border-color: #f9aa03;
+}
+.btn-bright:active,
+.btn-bright.active,
+.open > .dropdown-toggle.btn-bright {
+  color: #fff;
+  background-color: #eb8600;
+}
+.btn-bright:active:hover,
+.btn-bright.active:hover,
+.open > .dropdown-toggle.btn-bright:hover,
+.btn-bright:active:focus,
+.btn-bright.active:focus,
+.open > .dropdown-toggle.btn-bright:focus,
+.btn-bright:active.focus,
+.btn-bright.active.focus,
+.open > .dropdown-toggle.btn-bright.focus {
+  color: #fff;
+  background-color: #eb8600;
+}
+.btn-bright:active,
+.btn-bright.active,
+.open > .dropdown-toggle.btn-bright {
+  background-image: none;
+}
+.btn-bright.disabled,
+.btn-bright[disabled],
+fieldset[disabled] .btn-bright,
+.btn-bright.disabled:hover,
+.btn-bright[disabled]:hover,
+fieldset[disabled] .btn-bright:hover,
+.btn-bright.disabled:focus,
+.btn-bright[disabled]:focus,
+fieldset[disabled] .btn-bright:focus,
+.btn-bright.disabled.focus,
+.btn-bright[disabled].focus,
+fieldset[disabled] .btn-bright.focus,
+.btn-bright.disabled:active,
+.btn-bright[disabled]:active,
+fieldset[disabled] .btn-bright:active,
+.btn-bright.disabled.active,
+.btn-bright[disabled].active,
+fieldset[disabled] .btn-bright.active {
+  background-color: #5cb85c;
+  border-color: #4cae4c;
+}
+.btn-bright .badge {
+  color: #fff;
+  background-color: #eb8600;
+}
 .modal-header {
 	padding: 15px 20px;
 	background-color: #323232;
@@ -247,14 +375,16 @@ input[type="color"],
       -ms-user-select: none;
           user-select: none;
     background-image: none;
-    background-color: #444;
+    background-color: #3B3B3B;
+    color: #e5e5e5;
     border: 1px solid transparent;
     border-radius: 3px;
     outline:0px !important;
     -webkit-appearance:none;
 }
 .btn-form:hover {
-	color: #F9AA03;
+	color: #fff;
+	background-color: #333;
 }
 .btn-form:focus {
 	color: #fff;
@@ -1147,53 +1277,6 @@ input[type="color"],
 .table-card-back td {
 	font-size: 12px;
 }
-.squared {
-	padding: 4px 12px;
-    margin: 2px 2px 2px 0px;
-    font-size: 14px;
-    font-weight: normal;
-    line-height: 1.42857143;
-    text-align: center;
-    white-space: nowrap;
-    vertical-align: middle;
-    -ms-touch-action: manipulation;
-      touch-action: manipulation;
-    cursor: pointer;
-    -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-    background-image: none;
-    background-color: #444;
-    border: 1px solid transparent;
-    border-radius: 3px;
-    outline:0px !important;
-    -webkit-appearance:none;
-}
-.squared:hover {
-    color: #F9AA03;
-}
-.squared:active {
-    border: 1px solid #eb8600;
-}
-.squared-primary {
-	background-color: #eb8600;
-	color: #f2f2f2;
-}
-.squared-primary:hover {
-	color: #fff;
-}
-.squared-primary:active {
-    border: 1px solid #444;
-    color: #444;
-}
-.squared-caps {
-	color: #f2f2f2;
-	font-size: 12px;
-	padding: 2px 8px;
-	text-transform: uppercase;
-	font-weight: bold;
-}
 .header-bar {
 	float: left;
 }

data/interfaces/default/current_activity.html

@@ -96,7 +96,7 @@ DOCUMENTATION :: END
                         <div class="bar" style="width: ${a['progress_percent']}%">${a['progress_percent']}%</div>
                     </div>
                 </div>
-                <div class="dashboard-activity-metadata-platform" id="platform-${a['session_key']}">
+                <div class="dashboard-activity-metadata-platform" data-toggle="tooltip" data-placement="right" title data-title="${a['player']}" id="platform-${a['session_key']}">
                 </div>
                 <div class="dashboard-activity-metadata-user">
                     % if a['user_id']:
@@ -207,6 +207,10 @@ DOCUMENTATION :: END
         $('.dashboard-activity-poster-info-bar', this).slideUp('fast');
     });
 
+    // Tooltips
+    $('.dashboard-activity-metadata-platform').each(function() {
+        $(this).tooltip();
+    });
 </script>
 % else:
 <div class="text-muted">Nothing is currently being watched.</div><br>

data/interfaces/default/edit_user.html

@@ -23,7 +23,7 @@ DOCUMENTATION :: END
     <div class="modal-content">
         <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-remove"></i></button>
-            <h4>Edit user <strong>${data['user']}</strong></h4>
+            <h4 class="modal-title">Edit user <strong>${data['user']}</strong></h4>
         </div>
         <div class="modal-body" id="modal-text">
             <fieldset>
@@ -46,7 +46,7 @@ DOCUMENTATION :: END
         </div>
         <div class="modal-footer">
             <div>
-                <input type="button" id="save_user_name" class="squared squared-primary" value="Save">
+                <input type="button" id="save_user_name" class="btn btn-bright" value="Save">
                 <span id="edit-user-status-message"></span>
             </div>
         </div>

data/interfaces/default/history.html

@@ -13,7 +13,7 @@
         <div class="header-bar">
             <span><i class="fa fa-history"></i> History</span>
         </div>
-        <div class="colvis-button-bar hidden-phone">
+        <div class="colvis-button-bar hidden-xs">
         </div>
     </div>
     <div class='table-card-back'>
@@ -58,7 +58,7 @@
             }
         }
         history_table = $('#history_table').DataTable(history_table_options);
-        var colvis = new $.fn.dataTable.ColVis(history_table);
+        var colvis = new $.fn.dataTable.ColVis(history_table, { buttonText: 'Select columns', buttonClass: 'btn btn-dark' });
         $(colvis.button()).appendTo('div.colvis-button-bar');
     });
 

data/interfaces/default/info.html

@@ -254,7 +254,7 @@ DOCUMENTATION :: END
         history_table = $('#history_table').DataTable(history_table_options);
         history_table.column(4).visible(false);
 
-        var colvis = new $.fn.dataTable.ColVis(history_table);
+        var colvis = new $.fn.dataTable.ColVis(history_table, { buttonText: 'Select columns', buttonClass: 'btn btn-dark' });
         $(colvis.button()).appendTo('div.colvis-button-bar');
     });
 </script>
@@ -272,7 +272,7 @@ DOCUMENTATION :: END
             }
         }
         history_table = $('#history_table').DataTable(history_table_options);
-        var colvis = new $.fn.dataTable.ColVis(history_table);
+        var colvis = new $.fn.dataTable.ColVis(history_table, { buttonText: 'Select columns', buttonClass: 'btn btn-dark' });
         $(colvis.button()).appendTo('div.colvis-button-bar');
     });
 </script>

data/interfaces/default/js/dataTables.colVis.js

@@ -255,7 +255,7 @@ ColVis.prototype = {
 
 		this.dom.button = $( '<button />', {
 				'class': !this.s.dt.bJUI ?
-					"ColVis_Button ColVis_MasterButton" :
+					this.s.buttonClass :
 					"ColVis_Button ColVis_MasterButton ui-button ui-state-default"
 			} )
 			.append( '<span>'+this.s.buttonText+'</span>' )
@@ -923,6 +923,14 @@ ColVis.defaults = {
 	 */
 	buttonText: 'Show / hide columns',
 
+	/**
+	 * Class name used for the button
+	 *  @property buttonClass
+	 *  @type     string
+	 *  @default  ColVis_Button ColVis_MasterButton
+	 */
+	buttonClass: 'ColVis_Button ColVis_MasterButton',
+
 	/**
 	 * List of columns (integers) which should be excluded from the list
 	 *  @property aiExclude

data/interfaces/default/logs.html

@@ -21,7 +21,7 @@ from plexpy import helpers
             <span><i class="fa fa-book"></i> Logs</span>
         </div>
         <div class="button-bar">
-            <button class="squared" id="clear-logs"><i class="fa fa-trash-o"></i> Clear log</button>
+            <button class="btn btn-dark" id="clear-logs"><i class="fa fa-trash-o"></i> Clear log</button>
         </div>
     </div>
     <div class='table-card-back'>

data/interfaces/default/notification_config.html

@@ -3,7 +3,7 @@
     <div class="modal-content">
         <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-remove"></i></button>
-            <h4 id="notification-config-modal-header">Set Config</h4>
+            <h4 class="modal-title" id="notification-config-modal-header">Set Config</h4>
         </div>
         <div class="modal-body">
             <div class="container-fluid">
@@ -35,7 +35,7 @@
             </div>
         </div>
         <div class="modal-footer">
-            <input type="button" id="save-notification-item" class="squared squared-primary" value="Save">
+            <input type="button" id="save-notification-item" class="btn btn-bright" value="Save">
         </div>
     </div>
 </div>

data/interfaces/default/plexwatch_import.html

@@ -2,7 +2,7 @@
     <div class="modal-content">
         <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-remove"></i></button>
-            <h4>Import PlexWatch Database</h4>
+            <h4 class="modal-title">Import PlexWatch Database</h4>
         </div>
         <div class="modal-body" id="modal-text">
             <div class="form-group">
@@ -39,7 +39,7 @@
         <div class="modal-footer">
             <div>
                 <span id="status-message"></span>
-                <input type="button" id="import_db" class="squared squared-primary" value="Import">
+                <input type="button" id="import_db" class="btn btn-bright" value="Import">
             </div>
         </div>
     </div>

data/interfaces/default/settings.html

@@ -19,10 +19,10 @@ available_notification_agents = notifiers.available_notification_agents()
                 </div>
                 <div class="button-bar">
                     % if config['check_github']:
-                    <button id="menu_link_update_check" class="squared"><i class="fa fa-arrow-circle-up"></i> Check for Updates</button>
+                    <button id="menu_link_update_check" class="btn btn-dark"><i class="fa fa-arrow-circle-up"></i> Check for Updates</button>
                     % endif
-                    <button id="menu_link_restart" class="squared"><i class="fa fa-refresh"></i> Restart</button>
+                    <button id="menu_link_restart" class="btn btn-dark"><i class="fa fa-refresh"></i> Restart</button>
-                    <button id="menu_link_shutdown" class="squared"><i class="fa fa-power-off"></i> Shut Down</button>
+                    <button id="menu_link_shutdown" class="btn btn-dark"><i class="fa fa-power-off"></i> Shut Down</button>
                 </div>
             </div>
         </div>
@@ -79,7 +79,7 @@ available_notification_agents = notifiers.available_notification_agents()
                             </div>
                             <p class="help-block">Set your preferred time format. <a href="javascript:void(0)" data-target="#dateTimeOptionsModal" data-toggle="modal">Click here</a> to see the parameter list.</p>
                         </div>
-                        <input type="button" class="squared squared-primary save-button" value="Save" data-success="Changes saved successfully">
+                        <input type="button" class="btn btn-bright save-button" value="Save" data-success="Changes saved successfully">
                     </div>
                     <div role="tabpanel" class="tab-pane" id="tabs-2">
                         <div class="padded-header">
@@ -127,7 +127,7 @@ available_notification_agents = notifiers.available_notification_agents()
                             </div>
                         </div>
 
-                        <input type="button" class="squared squared-primary save-button" value="Save" data-success="Changes saved successfully">
+                        <input type="button" class="btn btn-bright save-button" value="Save" data-success="Changes saved successfully">
                     </div>
                     <div role="tabpanel" class="tab-pane" id="tabs-3">
 
@@ -179,7 +179,7 @@ available_notification_agents = notifiers.available_notification_agents()
                             <p class="help-block">Current API key: <strong><br/>${config['api_key']}</strong></p>
                         </div>
 
-                        <input type="button" class="squared squared-primary save-button" value="Save" data-success="Changes saved successfully">
+                        <input type="button" class="btn btn-bright save-button" value="Save" data-success="Changes saved successfully">
                     </div>
                     <div role="tabpanel" class="tab-pane" id="tabs-4">
 
@@ -219,7 +219,7 @@ available_notification_agents = notifiers.available_notification_agents()
                         </div>
                         <input type="hidden" id="pms_identifier" name="pms_identifier" value="${config['pms_identifier']}">
 
-                        <input type="button" class="squared squared-primary save-button" value="Save" data-success="Changes saved successfully">
+                        <input type="button" class="btn btn-bright save-button" value="Save" data-success="Changes saved successfully">
                     </div>
                     <div role="tabpanel" class="tab-pane" id="tabs-5">
 
@@ -230,10 +230,14 @@ available_notification_agents = notifiers.available_notification_agents()
                             <label for="pms_token">PMS Token</label>
                             <div class="row">
                                 <div class="col-xs-6">
-                                    <input type="text" class="form-control" id="pms_token" name="pms_token" value="${config['pms_token']}" size="30" data-parsley-trigger="change" required>
+                                    <div class="input-group">
+                                        <input type="text" class="form-control" id="pms_token" name="pms_token" value="${config['pms_token']}" data-parsley-trigger="change" required>
+                                        <span class="input-group-btn">
+                                            <button class="btn btn-form" type="button" data-toggle="modal" data-target="#pms-auth-modal">Fetch Token</button>
+                                        </span>
+                                    </div>
                                 </div>
                             </div>
-                            <a href="#pms-auth-modal" data-toggle="modal">&nbspFetch Token</a>
                             <p class="help-block">Token for Plex.tv authentication.</p>
                         </div>
 
@@ -256,7 +260,7 @@ available_notification_agents = notifiers.available_notification_agents()
                             <p class="help-block">Refresh the user list when PlexPy starts.</p>
                         </div>
 
-                        <input type="button" class="squared squared-primary save-button" value="Save" data-success="Changes saved successfully">
+                        <input type="button" class="btn btn-bright save-button" value="Save" data-success="Changes saved successfully">
                     </div>
                     <div role="tabpanel" class="tab-pane" id="tabs-6">
                         <div class="padded-header">
@@ -290,7 +294,7 @@ available_notification_agents = notifiers.available_notification_agents()
                         </div>
                         <p class="help-block"><a href="javascript:void(0)" id="toggle-plexwatch-import-modal" data-target="#plexwatch-import-modal" data-toggle="modal">Click here to Import an existing Plexwatch database.</a></p>
 
-                        <input type="button" class="squared squared-primary save-button" value="Save" data-success="Changes saved successfully">
+                        <input type="button" class="btn btn-bright save-button" value="Save" data-success="Changes saved successfully">
                     </div>
                     <div role="tabpanel" class="tab-pane" id="tabs-7">
 
@@ -345,7 +349,7 @@ available_notification_agents = notifiers.available_notification_agents()
                             </p>
                         </div>
 
-                        <input type="button" class="squared squared-primary save-button" value="Save" data-success="Changes saved successfully">
+                        <input type="button" class="btn btn-bright save-button" value="Save" data-success="Changes saved successfully">
                     </div>
                     <div role="tabpanel" class="tab-pane" id="tabs-8">
 
@@ -443,7 +447,7 @@ available_notification_agents = notifiers.available_notification_agents()
                             </li>
                         </ul>
 
-                        <input type="button" class="squared squared-primary save-button" value="Save" data-success="Changes saved successfully">
+                        <input type="button" class="btn btn-bright save-button" value="Save" data-success="Changes saved successfully">
                     </div>
                     <div role="tabpanel" class="tab-pane" id="tabs-9">
 
@@ -485,7 +489,7 @@ available_notification_agents = notifiers.available_notification_agents()
                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                         <i class="fa fa-remove"></i>
                     </button>
-                    <h4>Date &amp; Time Format Options</h4>
+                    <h4 class="modal-title">Date &amp; Time Format Options</h4>
                 </div>
                 <div class="modal-body">
                     <table>
@@ -609,7 +613,7 @@ available_notification_agents = notifiers.available_notification_agents()
                 <div class="modal-header">
                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i
                             class="fa fa-remove"></i></button>
-                    <h4>Fetch Plex.tv Token</h4>
+                    <h4 class="modal-title">Fetch Plex.tv Token</h4>
                 </div>
                 <div class="modal-body" id="modal-text">
                     <div>
@@ -638,10 +642,10 @@ available_notification_agents = notifiers.available_notification_agents()
                     </div>
                 </div>
                 <div class="modal-footer">
-                    <div class="">
+                    <div style="float: left;">
-                        <input type="button" id="get-pms-auth-token" class="squared squared-primary" value="Fetch Token">
+                        <strong><span id="pms-token-status"></span></strong>
-                        <span id="pms-token-status"></span>
                     </div>
+                    <input type="button" id="get-pms-auth-token" class="btn btn-bright" value="Fetch Token">
                 </div>
             </div>
         </div>
@@ -654,7 +658,7 @@ available_notification_agents = notifiers.available_notification_agents()
                 <div class="modal-header">
                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i
                             class="fa fa-remove"></i></button>
-                    <h4>Notification string substitutions</h4>
+                    <h4 class="modal-title">Notification string substitutions</h4>
                 </div>
                 <div class="modal-body">
                     <div>
@@ -752,7 +756,7 @@ available_notification_agents = notifiers.available_notification_agents()
             <div class="modal-content">
                 <div class="modal-header">
                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-remove"></i></button>
-                    <h4>Notification exclusion tags</h4>
+                    <h4 class="modal-title">Notification exclusion tags</h4>
                 </div>
                 <div class="modal-body">
                     <div>

data/interfaces/default/shutdown.html

@@ -12,7 +12,7 @@
                 <div class="modal-dialog" role="document">
                     <div class="modal-content">
                         <div class="modal-header">
-                            <h4>${message}</h4>
+                            <h4 class="modal-title">${message}</h4>
                         </div>
                         <div class="modal-body" id="modal-text">
                             <div align="center">

data/interfaces/default/sync.html

@@ -58,7 +58,7 @@
         }
         sync_table = $('#sync_table').DataTable(sync_table_options);
 
-        var colvis = new $.fn.dataTable.ColVis( sync_table );
+        var colvis = new $.fn.dataTable.ColVis( sync_table, { buttonText: 'Select columns', buttonClass: 'btn btn-dark' } );
         $( colvis.button() ).appendTo('div.colvis-button-bar');
     });
 </script>

data/interfaces/default/user.html

@@ -131,7 +131,7 @@ from plexpy import helpers
                             <div class="modal-content">
                                 <div class="modal-header">
                                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-remove"></i></button>
-                                    <h4 id="myModalLabel">IP Address: <strong><span id="modal_header_ip_address"></span></strong></h4>
+                                    <h4 class="modal-title" id="myModalLabel">IP Address: <strong><span id="modal_header_ip_address"></span></strong></h4>
                                 </div>
                                 <div class="modal-body" id="modal-text">
                                     <div class="col-md-6">
@@ -305,7 +305,7 @@ from plexpy import helpers
             history_table = $('#history_table').DataTable(history_table_options);
             history_table.column(1).visible(false);
 
-            var colvis = new $.fn.dataTable.ColVis(history_table);
+            var colvis = new $.fn.dataTable.ColVis(history_table, { buttonText: 'Select columns', buttonClass: 'btn btn-dark' });
             $(colvis.button()).appendTo('#button-bar-history');
         });
 
@@ -336,7 +336,7 @@ from plexpy import helpers
             sync_table = $('#sync_table').DataTable(sync_table_options);
             history_table.column(1).visible(false);
 
-            var colvis_sync = new $.fn.dataTable.ColVis( sync_table );
+            var colvis_sync = new $.fn.dataTable.ColVis( sync_table, { buttonText: 'Select columns', buttonClass: 'btn btn-dark' } );
             $( colvis_sync.button() ).appendTo('#button-bar-sync');
         });
 

data/interfaces/default/users.html

@@ -12,7 +12,7 @@
             <span><i class="fa fa-group"></i> Active Users</span>
         </div>
         <div class="button-bar">
-            <button class="squared" id="refresh-users-list"><i class="fa fa-refresh"></i> Refresh users</button>
+            <button class="btn btn-dark" id="refresh-users-list"><i class="fa fa-refresh"></i> Refresh users</button>
         </div>
     </div>
     <div class='table-card-back'>

data/interfaces/default/welcome.html

@@ -75,7 +75,7 @@ from plexpy import version
                 </div>
                 <input type="hidden" class="form-control pms-settings" id="pms_valid" data-validate="validatePMSip" value="">
                 <input type="hidden" class="form-control pms-settings" id="pms_identifier" name="pms_identifier" value="${config['pms_identifier']}">
-                <a class="squared" id="verify-plex-server" href="#" role="button">Verify</a><span style="margin-left: 10px; display: none;" id="pms-verify-status"></span>
+                <a class="btn btn-dark" id="verify-plex-server" href="#" role="button">Verify</a><span style="margin-left: 10px; display: none;" id="pms-verify-status"></span>
             </div>
 
             <div class="wizard-card" data-cardname="card3">
@@ -98,7 +98,7 @@ from plexpy import version
                     </div>
                 </div>
                 <input type="hidden" class="form-control pms-auth" name="pms_token" id="pms_token" value="${config['pms_token']}" data-validate="validatePMStoken">
-                <a class="squared" id="pms-authenticate" href="#" role="button">Authenticate</a><span style="margin-left: 10px; display: none;" id="pms-token-status"></span>
+                <a class="btn btn-dark" id="pms-authenticate" href="#" role="button">Authenticate</a><span style="margin-left: 10px; display: none;" id="pms-token-status"></span>
             </div>
             <div class="wizard-card" data-cardname="card4">
                 <h3>Monitoring</h3>