From ae3b369e9a0b6bf806a1c87b659a2576e439e65b Mon Sep 17 00:00:00 2001
From: James Cole <thegrumpydictator@gmail.com>
Date: Sun, 4 Feb 2018 15:58:03 +0100
Subject: [PATCH] Match layout to Firefly III

---
 .../components/passport/AuthorizedClients.vue | 63 ++++++++++---------
 .../assets/js/components/passport/Clients.vue | 25 ++++----
 .../passport/PersonalAccessTokens.vue         | 22 +++----
 3 files changed, 55 insertions(+), 55 deletions(-)

diff --git a/resources/assets/js/components/passport/AuthorizedClients.vue b/resources/assets/js/components/passport/AuthorizedClients.vue
index 6afd90afd1..ca4f03d0a0 100644
--- a/resources/assets/js/components/passport/AuthorizedClients.vue
+++ b/resources/assets/js/components/passport/AuthorizedClients.vue
@@ -11,41 +11,44 @@
 <template>
     <div>
         <div v-if="tokens.length > 0">
-            <div class="panel panel-default">
-                <div class="panel-heading">Authorized Applications</div>
-
-                <div class="panel-body">
+            <div class="box box-primary">
+                <div class="box-header with-border">
+                    <h3 class="box-title">
+                        Authorized Applications
+                    </h3>
+                </div>
+                <div class="box-body">
                     <!-- Authorized Tokens -->
                     <table class="table table-borderless m-b-none">
                         <thead>
-                            <tr>
-                                <th>Name</th>
-                                <th>Scopes</th>
-                                <th></th>
-                            </tr>
+                        <tr>
+                            <th>Name</th>
+                            <th>Scopes</th>
+                            <th></th>
+                        </tr>
                         </thead>
 
                         <tbody>
-                            <tr v-for="token in tokens">
-                                <!-- Client Name -->
-                                <td style="vertical-align: middle;">
-                                    {{ token.client.name }}
-                                </td>
+                        <tr v-for="token in tokens">
+                            <!-- Client Name -->
+                            <td style="vertical-align: middle;">
+                                {{ token.client.name }}
+                            </td>
 
-                                <!-- Scopes -->
-                                <td style="vertical-align: middle;">
+                            <!-- Scopes -->
+                            <td style="vertical-align: middle;">
                                     <span v-if="token.scopes.length > 0">
                                         {{ token.scopes.join(', ') }}
                                     </span>
-                                </td>
+                            </td>
 
-                                <!-- Revoke Button -->
-                                <td style="vertical-align: middle;">
-                                    <a class="action-link text-danger" @click="revoke(token)">
-                                        Revoke
-                                    </a>
-                                </td>
-                            </tr>
+                            <!-- Revoke Button -->
+                            <td style="vertical-align: middle;">
+                                <a class="action-link btn btn-danger btn-xs" @click="revoke(token)">
+                                    Revoke
+                                </a>
+                            </td>
+                        </tr>
                         </tbody>
                     </table>
                 </div>
@@ -92,9 +95,9 @@
              */
             getTokens() {
                 axios.get('/oauth/tokens')
-                        .then(response => {
-                            this.tokens = response.data;
-                        });
+                    .then(response => {
+                        this.tokens = response.data;
+                    });
             },
 
             /**
@@ -102,9 +105,9 @@
              */
             revoke(token) {
                 axios.delete('/oauth/tokens/' + token.id)
-                        .then(response => {
-                            this.getTokens();
-                        });
+                    .then(response => {
+                        this.getTokens();
+                    });
             }
         }
     }
diff --git a/resources/assets/js/components/passport/Clients.vue b/resources/assets/js/components/passport/Clients.vue
index f026f11d74..70aaccf50a 100644
--- a/resources/assets/js/components/passport/Clients.vue
+++ b/resources/assets/js/components/passport/Clients.vue
@@ -10,20 +10,14 @@
 
 <template>
     <div>
-        <div class="panel panel-default">
-            <div class="panel-heading">
-                <div style="display: flex; justify-content: space-between; align-items: center;">
-                    <span>
+        <div class="box box-primary">
+            <div class="box-header with-border">
+                <h3 class="box-title">
                         OAuth Clients
-                    </span>
-
-                    <a class="action-link" @click="showCreateClientForm">
-                        Create New Client
-                    </a>
-                </div>
+                </h3>
             </div>
 
-            <div class="panel-body">
+            <div class="box-body">
                 <!-- Current Clients -->
                 <p class="m-b-none" v-if="clients.length === 0">
                     You have not created any OAuth clients.
@@ -59,14 +53,14 @@
 
                             <!-- Edit Button -->
                             <td style="vertical-align: middle;">
-                                <a class="action-link" @click="edit(client)">
+                                <a class="action-link btn btn-default btn-xs" @click="edit(client)">
                                     Edit
                                 </a>
                             </td>
 
                             <!-- Delete Button -->
                             <td style="vertical-align: middle;">
-                                <a class="action-link text-danger" @click="destroy(client)">
+                                <a class="action-link btn btn-danger btn-xs" @click="destroy(client)">
                                     Delete
                                 </a>
                             </td>
@@ -74,6 +68,11 @@
                     </tbody>
                 </table>
             </div>
+            <div class="box-footer">
+                <a class="action-link btn btn-success" @click="showCreateClientForm">
+                    Create New Client
+                </a>
+            </div>
         </div>
 
         <!-- Create Client Modal -->
diff --git a/resources/assets/js/components/passport/PersonalAccessTokens.vue b/resources/assets/js/components/passport/PersonalAccessTokens.vue
index 75afc51135..fa7d8e0668 100644
--- a/resources/assets/js/components/passport/PersonalAccessTokens.vue
+++ b/resources/assets/js/components/passport/PersonalAccessTokens.vue
@@ -11,20 +11,13 @@
 <template>
     <div>
         <div>
-            <div class="panel panel-default">
-                <div class="panel-heading">
-                    <div style="display: flex; justify-content: space-between; align-items: center;">
-                        <span>
+            <div class="box box-primary">
+                <div class="box-header with-border">
+                    <h3 class="box-title">
                             Personal Access Tokens
-                        </span>
-
-                        <a class="action-link" @click="showCreateTokenForm">
-                            Create New Token
-                        </a>
-                    </div>
+                    </h3>
                 </div>
-
-                <div class="panel-body">
+                <div class="box-body">
                     <!-- No Tokens Notice -->
                     <p class="m-b-none" v-if="tokens.length === 0">
                         You have not created any personal access tokens.
@@ -56,6 +49,11 @@
                         </tbody>
                     </table>
                 </div>
+                <div class="box-footer">
+                    <a class="action-link btn btn-success" @click="showCreateTokenForm">
+                        Create New Token
+                    </a>
+                </div>
             </div>
         </div>