init

resources/js/pages/Project.vue

@@ -69,7 +69,7 @@
             </template>
 
             <template #footer>
-                <ui-button color="gray-50" hover="gray-200" @click.native="closeNewProjectModal">
+                <ui-button color="gray-100" hover="gray-200" @click.native="closeNewProjectModal">
                     <span class="text-gray-800">Cancel</span>
                 </ui-button>
 

resources/js/pages/Projects/Collection/CollectionDetail.vue

@@ -559,7 +559,7 @@
             </template>
 
             <template #footer>
-                <ui-button color="gray-50" hover="gray-200" @click.native="closeNewFieldModal">
+                <ui-button color="gray-100" hover="gray-200" @click.native="closeNewFieldModal">
                     <span class="text-gray-800">Cancel</span>
                 </ui-button>
 
@@ -595,7 +595,7 @@
             </template>
 
             <template #footer>
-                <ui-button color="gray-50" hover="gray-200" @click.native="closeEditCollectionModal">
+                <ui-button color="gray-100" hover="gray-200" @click.native="closeEditCollectionModal">
                     <span class="text-gray-800">Cancel</span>
                 </ui-button>
 

resources/js/pages/Projects/Collection/_Sections_/CollectionSidebar.vue

@@ -60,7 +60,7 @@
             </template>
 
             <template #footer>
-                <ui-button color="gray-50" hover="gray-200" @click.native="closeNewCollectionModal">
+                <ui-button color="gray-100" hover="gray-200" @click.native="closeNewCollectionModal">
                     <span class="text-gray-800">Cancel</span>
                 </ui-button>
 

resources/js/pages/Projects/Content/Edit.vue

@@ -384,7 +384,7 @@
                                             </div>
 
                                             <div class="overflow-x-auto sm:rounded-md" v-if="relationRecords[field.name] !== undefined && relationRecords[field.name].length !== 0">
-                                                <table class="min-w-full divide-y divide-gray-200 ">
+                                                <table class="min-w-full divide-y divide-gray-200">
                                                     <thead class="">
                                                         <tr>
                                                             <th scope="col" class="px-6 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"></th>
@@ -532,7 +532,7 @@
             </template>
 
             <template #footer>
-                <ui-button color="gray-50" hover="gray-200" @click.native="closeMediaLibraryModal">
+                <ui-button color="gray-100" hover="gray-200" @click.native="closeMediaLibraryModal">
                     <span class="text-gray-800">Cancel</span>
                 </ui-button>
             </template>
@@ -548,7 +548,7 @@
             </template>
 
             <template #footer>
-                <ui-button color="gray-50" hover="gray-200" @click.native="closeRelationModal">
+                <ui-button color="gray-100" hover="gray-200" @click.native="closeRelationModal">
                     <span class="text-gray-800">Cancel</span>
                 </ui-button>
             </template>

resources/js/pages/Projects/Content/Forms.vue

@@ -50,7 +50,7 @@
             </template>
 
             <template #footer>
-                <ui-button color="gray-50" hover="gray-200" @click.native="closeNewFormModal">
+                <ui-button color="gray-100" hover="gray-200" @click.native="closeNewFormModal">
                     <span class="text-gray-800">Cancel</span>
                 </ui-button>
 

resources/js/pages/Projects/Content/FormsDetail.vue

@@ -229,7 +229,7 @@
             </template>
 
             <template #footer>
-                <ui-button color="gray-50" hover="gray-200" @click.native="closeNewFormModal">
+                <ui-button color="gray-100" hover="gray-200" @click.native="closeNewFormModal">
                     <span class="text-gray-800">Cancel</span>
                 </ui-button>
 

resources/js/pages/Projects/Content/New.vue

@@ -377,7 +377,7 @@
                                             </div>
 
                                             <div class="overflow-x-auto sm:rounded-md" v-if="relationRecords[field.name] !== undefined && relationRecords[field.name].length !== 0">
-                                                <table class="min-w-full divide-y divide-gray-200 ">
+                                                <table class="min-w-full divide-y divide-gray-200">
                                                     <thead>
                                                         <tr>
                                                             <th scope="col" class="px-6 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"></th>
@@ -496,7 +496,7 @@
             </template>
 
             <template #footer>
-                <ui-button color="gray-50" hover="gray-200" @click.native="closeMediaLibraryModal">
+                <ui-button color="gray-100" hover="gray-200" @click.native="closeMediaLibraryModal">
                     <span class="text-gray-800">Cancel</span>
                 </ui-button>
             </template>
@@ -512,7 +512,7 @@
             </template>
 
             <template #footer>
-                <ui-button color="gray-50" hover="gray-200" @click.native="closeRelationModal">
+                <ui-button color="gray-100" hover="gray-200" @click.native="closeRelationModal">
                     <span class="text-gray-800">Cancel</span>
                 </ui-button>
             </template>

resources/js/pages/Projects/Content/_Sections_/ContentTable.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="app__project-content-table">
         <h4 class="mb-2 font-bold text-lg flex justify-end items-center h-10">
             <div class="flex-1">{{ collection.name }} <small class="text-gray-400 ml-1">#{{ collection.slug }}</small></div>
 
@@ -104,7 +104,6 @@
         <div class="w-full text-sm text-gray-700 mb-2 pl-1 flex justify-between">
             <div class="flex">
                 <div class="py-1">{{ selected.length }} items selected</div>
-
                 <div v-if="selected.length !== 0 && listOptions.getItems !== 'trashed'" class="ml-2 cursor-pointer text-green-500 font-bold py-1 px-3 rounded-md hover:bg-gray-100" @click="publishSelected"><i class="fa fa-cloud-upload-alt"></i> publish</div>
                 <div v-if="selected.length !== 0 && listOptions.getItems !== 'trashed'" class="ml-2 cursor-pointer text-gray-500 font-bold py-1 px-3 rounded-md hover:bg-gray-100" @click="unPublishSelected"><i class="fa fa-cloud-download-alt"></i> unpublish</div>
                 <div v-if="selected.length !== 0 && listOptions.getItems !== 'trashed'" class="ml-2 cursor-pointer text-orange-500 font-bold py-1 px-3 rounded-md hover:bg-gray-100" @click="moveToTrashSelected"><i class="fa fa-trash-restore"></i> move to trash</div>
@@ -121,14 +120,14 @@
         </div>
 
         <div class="clear-both">
-            <div class="w-full border">
+            <div class="w-full border rounded-md">
                 <div class="overflow-x-auto sm:rounded-md">
-                    <table class="min-w-full divide-y divide-gray-200 ">
+                    <table class="min-w-full divide-y divide-gray-200">
                         <thead class="bg-gray-100">
                             <tr class="relative">
                                 <th scope="col" class="px-6 py-3 text-center">
                                     <div class="w-full pl-1">
-                                        <input type="checkbox" v-if="relation_type != 1" v-model="selectAll" @click="selectAllFn()" v-formcheckbox>
+                                        <input type="checkbox" v-if="relation_type != 1" v-model="selectAll" @click="selectAllFn()" v-formcheckbox class="cursor-pointer">
                                     </div>
                                 </th>
                                 <th scope="col" v-for="field in collection.fields" :key="field.id" v-show="field.type != 'password' && field.type != 'json' && columns[field.name]" @click="sortBy(field.name, 1)" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase whitespace-nowrap cursor-pointer">
@@ -189,7 +188,7 @@
                         <tbody class="bg-white divide-y divide-gray-200">
                             <tr v-for="item in content.data" :key="item.id" class="relative">
                                 <td class="pl-2 py-4 text-sm text-center w-px">
-                                    <input type="checkbox" :checked="checkIfSelected(item.id)" @click="selectRecord(item.id)" v-formcheckbox>
+                                    <input type="checkbox" :checked="checkIfSelected(item.id)" @click="selectRecord(item.id)" v-formcheckbox class="cursor-pointer">
                                 </td>
                                 <td v-for="field in collection.fields" :key="field.id" v-show="field.type != 'password' && field.type != 'json' && columns[field.name]" class="px-6 py-3 text-sm min-w-full whitespace-nowrap">
                                     <span v-for="meta in item.meta" :key="meta.id">
@@ -295,7 +294,7 @@
             </template>
 
             <template #footer>
-                <ui-button color="gray-50" hover="gray-200" @click.native="closeTextModal">
+                <ui-button color="gray-100" hover="gray-200" @click.native="closeTextModal">
                     <span class="text-gray-800">Close</span>
                 </ui-button>
             </template>
@@ -344,7 +343,7 @@
             </template>
 
             <template #footer>
-                <ui-button color="gray-50" hover="gray-200" @click.native="closeMediaModal">
+                <ui-button color="gray-100" hover="gray-200" @click.native="closeMediaModal">
                     <span class="text-gray-800">Close</span>
                 </ui-button>
             </template>
@@ -357,7 +356,7 @@
 
             <template #content>
                 <div class="overflow-x-auto sm:rounded-md" v-if="relationRecords.length > 0">
-                    <table class="min-w-full divide-y divide-gray-200 ">
+                    <table class="min-w-full divide-y divide-gray-200">
                         <thead>
                             <tr>
                                 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase"></th>
@@ -407,7 +406,7 @@
             </template>
 
             <template #footer>
-                <ui-button color="gray-50" hover="gray-200" @click.native="closeRelationModal">
+                <ui-button color="gray-100" hover="gray-200" @click.native="closeRelationModal">
                     <span class="text-gray-800">Close</span>
                 </ui-button>
             </template>

resources/js/pages/Projects/Settings/API.vue

@@ -54,8 +54,8 @@
                                     <div class="cursor-pointer text-indigo-700" @click="openNewTokenModal = true">Create New Token</div>
                                 </div>
                             </div>
-                            <div class="overflow-x-auto mt-1 flex rounded-md">
-                                <table class="min-w-full divide-y divide-gray-200 border">
+                            <div class="overflow-x-auto mt-1 flex border rounded-md">
+                                <table class="min-w-full divide-y divide-gray-200">
                                     <thead class="bg-gray-100">
                                         <tr>
                                             <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
@@ -176,7 +176,7 @@
             </template>
 
             <template #footer>
-                <ui-button color="gray-50" hover="gray-200" @click.native="closeNewTokenModal">
+                <ui-button color="gray-100" hover="gray-200" @click.native="closeNewTokenModal">
                     <span class="text-gray-800">Cancel</span>
                 </ui-button>
                 <ui-button v-if="!showToken" color="indigo-500" @click.native="createNewTokenSubmit">

resources/js/pages/Projects/Settings/Locales.vue

@@ -15,8 +15,8 @@
                             <div class="w-full flex justify-between">
                                 <div class="text-lg font-bold">Available Locales</div>
                             </div>
-                            <div class="overflow-x-auto mt-1 flex rounded-md">
-                                <table class="min-w-full divide-y divide-gray-200 border">
+                            <div class="overflow-x-auto mt-1 flex border rounded-md">
+                                <table class="min-w-full divide-y divide-gray-200">
                                     <tbody class="bg-white divide-y divide-gray-200">
                                         <tr v-for="locale in project.locales" :key="locale">
                                             <td class="px-6 py-3 text-sm align-top">

resources/js/pages/Projects/Settings/Users.vue

@@ -12,8 +12,8 @@
                     <h4 class="mb-2 p-2 font-bold text-xl">Users & Roles</h4>
 
                     <div class="w-full bg-white mt-2 rounded-md p-4">
-                        <div class="overflow-x-auto w-full border clear-both mt-2">
-                            <table class="min-w-full divide-y divide-gray-200 ">
+                        <div class="w-full border rounded-md mt-2 overflow-x-auto clear-both">
+                            <table class="min-w-full divide-y divide-gray-200">
                                 <thead class="bg-gray-100">
                                     <tr>
                                             <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Role</th>
@@ -29,7 +29,7 @@
                                             <small class="block text-gray-600 text-xs">Can create and edit collections and content</small>
                                         </td>
                                         <td class="px-6 py-3 text-sm">
-                                            <div v-for="user in super_admins" :key="user.id" class="border border-gray-100 mb-2 block w-full p-2">
+                                            <div v-for="user in super_admins" :key="user.id" class="border border-gray-100 rounded-md mb-2 block w-full p-2">
                                                 <div class="flex items-center">
                                                     <div>
                                                         <div class="flex bg-green-500 text-white p-2 text-md rounded-full text-center mr-2 w-9"><div class="w-full text-center">{{ getUserNameInitials(user.name) }}</div></div>
@@ -40,7 +40,7 @@
                                                     </div>
                                                 </div>
                                             </div>
-                                            <div v-for="user in admins" :key="user.id" class="border border-gray-100 mb-2 block w-full p-2">
+                                            <div v-for="user in admins" :key="user.id" class="border border-gray-100 rounded-md mb-2 block w-full p-2">
                                                 <div class="flex flex-start w-full items-center">
                                                     <div>
                                                         <div class="flex bg-green-500 text-white p-2 text-md rounded-full text-center mr-2 w-9"><div class="w-full text-center">{{ getUserNameInitials(user.name) }}</div></div>
@@ -67,7 +67,7 @@
                                             <small class="block text-gray-600 text-xs">Can create and edit content</small>
                                         </td>
                                         <td class="px-6 py-3 text-sm">
-                                            <div v-for="user in editors" :key="user.id" class="border border-gray-100 mb-2 block w-full p-2">
+                                            <div v-for="user in editors" :key="user.id" class="border border-gray-100 rounded-md mb-2 block w-full p-2">
                                                 <div class="flex flex-start w-full items-center">
                                                     <div>
                                                         <div class="flex bg-green-500 text-white p-2 text-md rounded-full text-center mr-2 w-9"><div class="w-full text-center">{{ getUserNameInitials(user.name) }}</div></div>
@@ -117,7 +117,7 @@
             <template #content>
                 <div class="mt-4">
                     <div v-if="!createNewUser">
-                        <table class="min-w-full divide-y divide-gray-200 ">
+                        <table class="min-w-full divide-y divide-gray-200">
                             <thead class="bg-gray-100">
                                 <tr>
                                     <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
@@ -171,7 +171,7 @@
             </template>
 
             <template #footer>
-                <ui-button color="gray-50" hover="gray-200" @click.native="closeAssignUserModal">
+                <ui-button color="gray-100" hover="gray-200" @click.native="closeAssignUserModal">
                     <span class="text-gray-800">Cancel</span>
                 </ui-button>
                 <ui-button color="indigo-500" v-if="createNewUser" @click.native="createNewUserSubmit">

resources/js/pages/Projects/Settings/WebhookLogs.vue

@@ -85,7 +85,7 @@
             </template>
 
             <template #footer>
-                <ui-button color="gray-50" hover="gray-200" @click.native="closeDetailModal">
+                <ui-button color="gray-100" hover="gray-200" @click.native="closeDetailModal">
                     <span class="text-gray-800">Close</span>
                 </ui-button>
             </template>

resources/js/pages/Projects/Settings/Webhooks.vue

@@ -155,7 +155,7 @@
             </template>
 
             <template #footer>
-                <ui-button color="gray-50" hover="gray-200" @click.native="closeNewWebhookModal">
+                <ui-button color="gray-100" hover="gray-200" @click.native="closeNewWebhookModal">
                     <span class="text-gray-800">Cancel</span>
                 </ui-button>
                 <ui-button color="indigo-500" :disabled="progress" @click.native="createNewWebhookSubmit">

resources/views/admin.blade.php

@@ -16,6 +16,8 @@
         <script src="{{ mix('js/app.js') }}" defer></script>
     </head>
     <body class="font-sans antialiased">
-        <div id="app" v-cloak><app></app></div>
+        <div id="app" v-cloak>
+            <app></app>
+        </div>
     </body>
 </html>

resources/views/app.blade.php

@@ -8,6 +8,8 @@
     </head>
 
     <body>
-        CMS frontend page
+        <div class="app">
+            AineCMS frontend page
+        </div>
     </body>
 </html>

resources/views/auth/confirm-password.blade.php

@@ -15,13 +15,16 @@
         <form method="POST" action="{{ route('password.confirm') }}">
             @csrf
 
-            <div>
+            <div class="block">
                 <x-label for="password" :value="__('Password')" />
 
-                <x-input id="password" class="block mt-1 w-full"
-                                type="password"
-                                name="password"
-                                required autocomplete="current-password" />
+                <x-input 
+                    id="password" 
+                    class="block mt-1 w-full"
+                    type="password"
+                    name="password"
+                    required autocomplete="current-password"
+                />
             </div>
 
             <div class="flex justify-end mt-4">

resources/views/auth/forgot-password.blade.php

@@ -17,10 +17,17 @@
         <form method="POST" action="{{ route('password.email') }}">
             @csrf
 
-            <div>
+            <div class="block">
                 <x-label for="email" :value="__('Email')" />
-
-                <x-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autofocus />
+                <x-input 
+                    id="email" 
+                    class="block mt-1 w-full" 
+                    type="email" 
+                    name="email" 
+                    :value="old('email')" 
+                    required 
+                    autofocus 
+                />
             </div>
 
             <div class="flex items-center justify-end mt-4">