incr(ui): button heights

- hover colors

src/components/Button.vue

@@ -1,7 +1,14 @@
 <template>
   <button
-    class="focus:outline-none rounded-md shadow-button flex-center h-8"
-    :style="style"
+    class="
+      focus:outline-none
+      rounded-md
+      flex
+      justify-center
+      items-center
+      h-8
+      text-sm
+    "
     :class="_class"
     v-bind="$attrs"
   >
@@ -30,21 +37,15 @@ export default {
     },
   },
   computed: {
-    style() {
-      return {
-        ...(this.padding
-          ? { padding: this.icon ? '6px 12px' : '6px 24px' }
-          : {}),
-        color: this.type === 'primary' ? '#fff' : '#112B42',
-        'background-image':
-          this.type === 'primary'
-            ? 'linear-gradient(180deg, #2C9AF1 0%, #2490EF 100%)'
-            : 'linear-gradient(180deg, #F9F9FA 0%, #F4F4F6 100%)',
-      };
-    },
     _class() {
       return {
         'opacity-50 cursor-not-allowed pointer-events-none': this.disabled,
+        'text-white': this.type === 'primary',
+        'bg-blue-500': this.type === 'primary',
+        'text-gray-900': this.type !== 'primary',
+        'bg-gray-100': this.type !== 'primary',
+        'px-3': this.padding && this.icon,
+        'px-6': this.padding && !this.icon,
       };
     },
   },

src/components/Controls/TableRow.vue

@@ -5,7 +5,7 @@
       w-full
       px-2
       border-b
-      hover:bg-brand-100
+      hover:bg-gray-50
       h-row-mid
       group
       flex
@@ -31,7 +31,6 @@
     <FormControl
       v-for="df in tableFields"
       :size="size"
-      class="py-2"
       :read-only="readOnly"
       :input-class="{ 'text-right': isNumeric(df), 'bg-transparent': true }"
       :key="df.fieldname"

src/components/DropdownWithActions.vue

@@ -7,12 +7,7 @@
     right
   >
     <template v-slot="{ toggleDropdown }">
-      <Button
-        class="text-gray-900"
-        :type="type"
-        :icon="true"
-        @click="toggleDropdown()"
-      >
+      <Button :type="type" :icon="icon" @click="toggleDropdown()">
         <slot>
           <feather-icon name="more-horizontal" class="w-4 h-4" />
         </slot>
@@ -30,6 +25,7 @@ export default {
   props: {
     actions: { default: [] },
     type: { type: String, default: 'secondary' },
+    icon: { type: Boolean, default: true },
   },
   inject: {
     doc: { default: null },

src/components/FilterDropdown.vue

@@ -4,7 +4,7 @@
       <Button :icon="true" @click="togglePopover()">
         <span class="flex items-center">
           <Icon name="filter" size="12" class="stroke-current text-gray-800" />
-          <span class="ml-2 text-base text-black">
+          <span class="ml-1">
             <template v-if="activeFilterCount > 0">
               {{ filterAppliedMessage }}
             </template>

src/components/SearchBar.vue

@@ -4,23 +4,20 @@
     <button
       @click="open"
       class="
-        focus:outline-none
-        shadow-button
-        flex flex-row
-        gap-1
-        text-base text-gray-700
-        bg-gray-100
-        rounded-md
+        px-2
         h-8
-        w-48
-        px-3
+        flex
         items-center
-        hover:bg-gray-200
+        rounded-md
+        text-sm
+        text-gray-900
+        bg-gray-100
       "
+      :padding="false"
     >
-      <feather-icon name="search" class="w-4 h-4" />
+      <feather-icon name="search" class="w-4 h-4 mr-1 text-gray-800" />
       <p>{{ t`Search` }}</p>
-      <div class="text-gray-400 ml-auto text-sm">
+      <div class="text-gray-500 px-1 ml-4 text-sm">
         {{ modKey('k') }}
       </div>
     </button>

src/components/StatusBadge.vue

@@ -1,5 +1,5 @@
 <template>
-  <Badge class="text-xs flex-center px-3 ml-2" :color="color" v-if="status">{{
+  <Badge class="text-sm flex-center px-3 ml-2" :color="color" v-if="status">{{
     statusLabel
   }}</Badge>
 </template>

src/components/Widgets/PartyWidget.vue

@@ -15,7 +15,7 @@
 
     <!-- Invoice List -->
     <div
-      class="px-4 py-4 border-b hover:bg-gray-100 cursor-pointer text-base"
+      class="px-4 py-4 border-b hover:bg-gray-50 cursor-pointer text-base"
       v-for="invoice in pendingInvoices"
       :key="invoice.name"
       @click="routeToForm(invoice)"
@@ -31,13 +31,13 @@
       </div>
 
       <!-- Invoice Date & Amount -->
-      <div class="flex justify-between">
+      <div class="flex justify-between text-gray-900">
         <span>
           {{ fyo.format(invoice.date, getInvoiceField(invoice, 'date')) }}
         </span>
         <div>
           <!-- Paid Amount -->
-          <span class="font-medium text-gray-900">
+          <span>
             {{
               fyo.format(
                 amountPaid(invoice),
@@ -47,7 +47,7 @@
           </span>
 
           <!-- Outstanding Amount -->
-          <span class="text-gray-600" v-if="!fullyPaid(invoice)">
+          <span class="text-gray-600 font-medium" v-if="!fullyPaid(invoice)">
             ({{
               fyo.format(
                 invoice.outstandingAmount,

src/pages/ChartOfAccounts.vue

@@ -11,7 +11,7 @@
           class="
             py-2
             cursor-pointer
-            hover:bg-gray-100
+            hover:bg-gray-50
             group
             flex
             items-center

src/pages/DataImport.vue

@@ -260,7 +260,7 @@
             <button
               class="
                 text-gray-600
-                hover:bg-gray-100
+                hover:bg-gray-50
                 flex flex-row
                 w-full
                 px-4

src/pages/InvoiceForm.vue

@@ -5,7 +5,6 @@
       <StatusBadge :status="status" />
       <Button
         v-if="doc?.submitted"
-        class="text-gray-900 text-xs"
         :icon="true"
         @click="routeTo(`/print/${doc.schemaName}/${doc.name}`)"
       >
@@ -15,7 +14,6 @@
       <Button
         v-if="doc?.notInserted || doc?.dirty"
         type="primary"
-        class="text-white text-xs"
         @click="sync"
       >
         {{ t`Save` }}
@@ -23,7 +21,6 @@
       <Button
         v-if="!doc?.dirty && !doc?.notInserted && !doc?.submitted"
         type="primary"
-        class="text-white text-xs"
         @click="submit"
         >{{ t`Submit` }}</Button
       >
@@ -31,7 +28,17 @@
 
     <!-- Invoice Form -->
     <template #body v-if="doc">
-      <div class="px-4 text-xl font-semibold flex justify-between h-row-large items-center">
+      <div
+        class="
+          px-4
+          text-xl
+          font-semibold
+          flex
+          justify-between
+          h-row-large
+          items-center
+        "
+      >
         <h1>
           {{ doc.notInserted ? t`New Entry` : doc.name }}
         </h1>

src/pages/ListView/List.vue

@@ -34,7 +34,7 @@
     <div class="overflow-y-auto" v-if="dataSlice.length !== 0">
       <div v-for="(doc, i) in dataSlice" :key="doc.name">
         <!-- Row Content -->
-        <div class="flex hover:bg-gray-100 items-center">
+        <div class="flex hover:bg-gray-50 items-center">
           <p class="w-8 text-right mr-4 text-gray-900">
             {{ i + pageStart + 1 }}
           </p>

src/pages/PrintView/PrintView.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex">
     <div class="flex flex-col flex-1">
-      <PageHeader :backLink="true" class="bg-white z-10">
+      <PageHeader :backLink="true" class="bg-white z-10" :border="false">
         <Button
           class="text-gray-900 text-xs"
           @click="showCustomiser = !showCustomiser"
@@ -19,11 +19,11 @@
         class="flex justify-center flex-1 overflow-auto relative"
       >
         <div
-          class="h-full shadow my-4 absolute"
+          class="h-full shadow mb-4 absolute"
           style="
             width: 21cm;
             height: 29.7cm;
-            transform: scale(0.7) translateY(-240px);
+            transform: scale(0.65) translateY(-300px);
           "
           ref="printContainer"
         >

src/pages/Report.vue

@@ -3,6 +3,7 @@
     <PageHeader :title="title">
       <DropdownWithActions
         v-for="group of groupedActions"
+        :icon="false"
         :key="group.label"
         :type="group.type"
         :actions="group.actions"