Small UI improvements to API keys page

public/mix-manifest.json

@@ -1,5 +1,5 @@
 {
-    "/js/build/app.js": "/js/build/app.js?id=edf4823a58f20c4e41fc",
+    "/js/build/app.js": "/js/build/app.js?id=59a0bef2700228bfcb09",
     "/css/build/AdminLTE.css": "/css/build/AdminLTE.css?id=59413334823616b81341",
     "/css/build/app.css": "/css/build/app.css?id=032fd8c3fce99c7fd862",
     "/css/build/overrides.css": "/css/build/overrides.css?id=0b4aefd7ef0c117ef23a",
@@ -34,5 +34,5 @@
     "/css/dist/bootstrap-table.css": "/css/dist/bootstrap-table.css?id=a534edb9f7179f6dcf62",
     "/js/build/vendor.js": "/js/build/vendor.js?id=ac70ab5fd89efc2aa7d0",
     "/js/dist/bootstrap-table.js": "/js/dist/bootstrap-table.js?id=9407782198cbc29f23d1",
-    "/js/dist/all.js": "/js/dist/all.js?id=29881ddb42a1bf849280"
+    "/js/dist/all.js": "/js/dist/all.js?id=8a05165e62950089cb29"
 }

resources/assets/js/components/passport/PersonalAccessTokens.vue

@@ -13,12 +13,9 @@
         <div>
             <div class="panel panel-default">
                 <div class="panel-heading">
-                    <div style="display: flex; justify-content: space-between; align-items: center;">
+                    <div class="text-right" style="display: flex; justify-content: space-between; align-items: center;">
-                        <h2>
-                            Personal Access Tokens
-                        </h2>
 
-                        <a class="action-link" @click="showCreateTokenForm">
+                        <a class="btn btn-info btn-sm action-link pull-right" @click="showCreateTokenForm">
                             Create New Token
                         </a>
                     </div>
@@ -34,8 +31,8 @@
                     <table class="table table-borderless m-b-none" v-if="tokens.length > 0">
                         <thead>
                             <tr>
-                                <th>Name</th>
+                                <th class="col-md-9">Name</th>
-                                <th><span class="sr-only">Delete</span></th>
+                                <th class="col-md-3"><span class="sr-only">Delete</span></th>
                             </tr>
                         </thead>
 
@@ -47,9 +44,9 @@
                                 </td>
 
                                 <!-- Delete Button -->
-                                <td style="vertical-align: middle;">
+                                <td style="vertical-align: middle;" class="text-right">
-                                    <a class="action-link text-danger" @click="revoke(token)">
+                                    <a class="action-link btn btn-danger btn-sm" @click="revoke(token)">
-                                        Delete
+                                      <i class="fa fa-trash"></i>
                                     </a>
                                 </td>
                             </tr>