Improved some UI.

mehedijaman · mehedijaman · commit 52657995c5a1 · 2024-05-20T14:14:20.000+06:00
- Button paddings decreased to make the button small
- Paginator buttons made smaller
- Space between buttons decreased.
- Datatable Header height decreased and color darkened
- Datatable row height decreased
diff --git a/stubs/page-stub/Index.stub b/stubs/page-stub/Index.stub
@@ -33,7 +33,7 @@
 
                     <AppDataTableData>
                         <!-- edit {{ resourceName }} -->
-                        <AppTooltip text="Edit {{ ResourceName }}" class="mr-3">
+                        <AppTooltip text="Edit {{ ResourceName }}" class="mr-2">
                             <AppButton
                                 class="btn btn-icon btn-primary"
                                 @click="
diff --git a/stubs/resources/js/Components/DataTable/AppDataTableData.vue b/stubs/resources/js/Components/DataTable/AppDataTableData.vue
@@ -1,5 +1,5 @@
 <template>
-    <td class="whitespace-nowrap px-6 py-4 font-medium">
+    <td class="whitespace-nowrap px-4 py-2 font-medium">
         <slot></slot>
     </td>
 </template>
diff --git a/stubs/resources/js/Components/DataTable/AppDataTableHead.vue b/stubs/resources/js/Components/DataTable/AppDataTableHead.vue
@@ -4,7 +4,7 @@
             <th
                 v-for="header in headers"
                 :key="header"
-                class="border-b border-skin-neutral-6 bg-skin-neutral-3 px-6 py-3"
+                class="border-b border-skin-neutral-5 bg-skin-neutral-5 px-4 py-2"
             >
                 {{ header }}
             </th>
diff --git a/stubs/resources/js/Components/DataTable/AppDataTableRow.vue b/stubs/resources/js/Components/DataTable/AppDataTableRow.vue
@@ -1,5 +1,5 @@
 <template>
-    <tr class="border-b border-b-skin-neutral-6 hover:bg-skin-neutral-3">
+    <tr class="border border-skin-neutral-4 hover:bg-skin-neutral-3">
         <slot></slot>
     </tr>
 </template>
diff --git a/stubs/resources/js/Components/DataTable/AppPaginator.vue b/stubs/resources/js/Components/DataTable/AppPaginator.vue
@@ -6,12 +6,12 @@
             <template v-for="(link, index) in links" :key="index">
                 <div
                     v-if="link.url === null"
-                    class="mb-1 mr-1 rounded border px-4 py-3 text-sm leading-4 opacity-30"
+                    class="mb-1 mr-1 rounded border px-3 py-2 text-sm leading-4 opacity-30"
                     v-html="link.label"
                 />
                 <Link
                     v-else
-                    class="mb-1 mr-1 rounded border px-4 py-3 text-sm leading-4 hover:bg-skin-primary-10 hover:text-skin-primary-1 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
+                    class="mb-1 mr-1 rounded border px-3 py-2 text-sm leading-4 hover:bg-skin-primary-10 hover:text-skin-primary-1 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
                     :class="{
                         'bg-skin-primary-9 text-skin-primary-2': link.active
                     }"
diff --git a/stubs/resources/js/Components/Misc/AppButton.vue b/stubs/resources/js/Components/Misc/AppButton.vue
@@ -10,7 +10,7 @@ const emit = defineEmits(['click'])
 
 <style scoped>
 .btn {
-    @apply z-0 rounded-md px-5 py-2.5 text-sm font-medium transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2;
+    @apply z-0 flex items-center rounded-md px-4 py-2 text-sm font-medium transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2;
 }
 
 .btn-primary {
@@ -38,6 +38,6 @@ const emit = defineEmits(['click'])
 }
 
 .btn-icon {
-    @apply h-10 w-10 rounded-md px-2.5 py-2.5;
+    @apply h-8  rounded-md px-3;
 }
 </style>
diff --git a/stubs/resources/js/Pages/AclPermission/PermissionIndex.vue b/stubs/resources/js/Pages/AclPermission/PermissionIndex.vue
@@ -33,7 +33,7 @@
 
                     <AppDataTableData>
                         <!-- edit permission -->
-                        <AppTooltip :text="__('Edit Permission')" class="mr-3">
+                        <AppTooltip :text="__('Edit Permission')" class="mr-2">
                             <AppButton
                                 class="btn btn-icon btn-primary"
                                 @click="
diff --git a/stubs/resources/js/Pages/AclRole/RoleIndex.vue b/stubs/resources/js/Pages/AclRole/RoleIndex.vue
@@ -30,7 +30,7 @@
 
                     <AppDataTableData>
                         <!-- role permissions -->
-                        <AppTooltip :text="__('Role Permissions')" class="mr-3">
+                        <AppTooltip :text="__('Role Permissions')" class="mr-2">
                             <AppButton
                                 class="btn btn-icon btn-primary"
                                 @click="
@@ -44,7 +44,7 @@
                         </AppTooltip>
 
                         <!-- edit role -->
-                        <AppTooltip :text="__('Edit Role')" class="mr-3">
+                        <AppTooltip :text="__('Edit Role')" class="mr-2">
                             <AppButton
                                 class="btn btn-icon btn-primary"
                                 @click="
diff --git a/stubs/resources/js/Pages/AclRolePermission/RolePermissionForm.vue b/stubs/resources/js/Pages/AclRolePermission/RolePermissionForm.vue
@@ -27,7 +27,7 @@
                                 name="permission"
                                 :value="permission"
                             />
-                            <AppLabel :for="permission.name" class="ml-3">
+                            <AppLabel :for="permission.name" class="ml-2">
                                 {{ permission.name }}
                             </AppLabel>
                         </div>
diff --git a/stubs/resources/js/Pages/AclUserPermission/UserPermissionForm.vue b/stubs/resources/js/Pages/AclUserPermission/UserPermissionForm.vue
@@ -28,7 +28,7 @@
                                 name="permission"
                                 :value="permission"
                             />
-                            <AppLabel :for="permission.name" class="ml-3">
+                            <AppLabel :for="permission.name" class="ml-2">
                                 {{ permission.name }}
                             </AppLabel>
                         </div>
diff --git a/stubs/resources/js/Pages/AclUserRole/UserRoleForm.vue b/stubs/resources/js/Pages/AclUserRole/UserRoleForm.vue
@@ -28,7 +28,7 @@
                                 name="role"
                                 :value="role"
                             />
-                            <AppLabel :for="role.name" class="ml-3">
+                            <AppLabel :for="role.name" class="ml-2">
                                 {{ role.name }}
                             </AppLabel>
                         </div>
diff --git a/stubs/resources/js/Pages/User/UserIndex.vue b/stubs/resources/js/Pages/User/UserIndex.vue
@@ -34,7 +34,7 @@
 
                     <AppDataTableData>
                         <!-- edit user roles -->
-                        <AppTooltip :text="__('User Roles')" class="mr-3">
+                        <AppTooltip :text="__('User Roles')" class="mr-2">
                             <AppButton
                                 class="btn btn-icon btn-primary"
                                 @click="
@@ -48,7 +48,7 @@
                         </AppTooltip>
 
                         <!-- edit user permissions -->
-                        <AppTooltip :text="__('User Permissions')" class="mr-3">
+                        <AppTooltip :text="__('User Permissions')" class="mr-2">
                             <AppButton
                                 class="btn btn-icon btn-primary"
                                 @click="
@@ -62,7 +62,7 @@
                         </AppTooltip>
 
                         <!-- edit user -->
-                        <AppTooltip :text="__('Edit User')" class="mr-3">
+                        <AppTooltip :text="__('Edit User')" class="mr-2">
                             <AppButton
                                 class="btn btn-icon btn-primary"
                                 @click="

Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,7 @@`
`4`	`4`	`<th`
`5`	`5`	`v-for="header in headers"`
`6`	`6`	`:key="header"`
`7`		`- class="border-b border-skin-neutral-6 bg-skin-neutral-3 px-6 py-3"`
	`7`	`+ class="border-b border-skin-neutral-5 bg-skin-neutral-5 px-4 py-2"`
`8`	`8`	`>`
`9`	`9`	`{{ header }}`
`10`	`10`	`</th>`
Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@ const emit = defineEmits(['click'])`
`10`	`10`
`11`	`11`	`<style scoped>`
`12`	`12`	`.btn {`
`13`		`- @apply z-0 rounded-md px-5 py-2.5 text-sm font-medium transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2;`
	`13`	`+ @apply z-0 flex items-center rounded-md px-4 py-2 text-sm font-medium transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2;`
`14`	`14`	`}`
`15`	`15`
`16`	`16`	`.btn-primary {`
`@@ -38,6 +38,6 @@ const emit = defineEmits(['click'])`
`38`	`38`	`}`
`39`	`39`
`40`	`40`	`.btn-icon {`
`41`		`- @apply h-10 w-10 rounded-md px-2.5 py-2.5;`
	`41`	`+ @apply h-8 rounded-md px-3;`
`42`	`42`	`}`
`43`	`43`	`</style>`