incr: unify row heights

- delete rando file

src/components/Controls/Table.vue

@@ -5,16 +5,21 @@
     </div>
 
     <!-- Title Row -->
-    <Row :ratio="ratio" class="border-b px-2 text-gray-600 w-full">
+    <Row
+      :ratio="ratio"
+      class="border-b px-2 text-gray-600 w-full flex items-center"
+    >
       <div class="flex items-center pl-2">#</div>
       <div
+        class="items-center flex px-2 h-row-mid"
         :class="{
-          'px-2 py-3': size === 'small',
-          'px-3 py-4': size !== 'small',
-          'text-right': isNumeric(df),
+          'ml-auto': isNumeric(df),
         }"
         v-for="df in tableFields"
         :key="df.fieldname"
+        :style="{
+          height: ``,
+        }"
       >
         {{ df.label }}
       </div>
@@ -40,29 +45,28 @@
     <!-- Add Row and Row Count -->
     <Row
       :ratio="ratio"
-      class="text-gray-500 cursor-pointer border-transparent px-2 w-full"
+      class="
+        text-gray-500
+        cursor-pointer
+        border-transparent
+        px-2
+        w-full
+        h-row-mid
+        flex
+        items-center
+      "
       v-if="!isReadOnly"
       @click="addRow"
     >
       <div class="flex items-center pl-1">
         <feather-icon name="plus" class="w-4 h-4 text-gray-500" />
       </div>
-      <div
-        class="flex justify-between"
-        :class="{
-          'px-2 py-3': size === 'small',
-          'px-3 py-4': size !== 'small',
-        }"
-      >
+      <div class="flex justify-between px-2">
         {{ t`Add Row` }}
       </div>
       <div v-for="i in ratio.slice(3).length" :key="i"></div>
       <div
-        class="text-right"
-        :class="{
-          'px-2 py-3': size === 'small',
-          'px-3 py-4': size !== 'small',
-        }"
+        class="text-right px-2"
         v-if="
           value && maxRowsBeforeOverflow && value.length > maxRowsBeforeOverflow
         "
@@ -161,6 +165,11 @@ export default {
     },
   },
   computed: {
+    height() {
+      if (this.size === 'small') {
+      }
+      return 2;
+    },
     ratio() {
       return [0.3].concat(this.tableFields.map(() => 1));
     },

src/components/Controls/TableRow.vue

@@ -1,7 +1,10 @@
 <template>
-  <Row :ratio="ratio" class="w-full px-2 border-b hover:bg-brand-100 group">
+  <Row
+    :ratio="ratio"
+    class="w-full px-2 border-b hover:bg-brand-100 group flex items-center"
+  >
     <!-- Index or Remove button -->
-    <div class="flex items-center pl-2 text-gray-600">
+    <div class="flex items-center pl-2 text-gray-600 h-row-mid">
       <span class="hidden group-hover:inline-block">
         <feather-icon
           name="x"
@@ -18,7 +21,7 @@
     <FormControl
       v-for="df in tableFields"
       :size="size"
-      class="py-2"
+      class="py-2 h-row-mid"
       :read-only="readOnly"
       :input-class="{ 'text-right': isNumeric(df), 'bg-transparent': true }"
       :key="df.fieldname"

src/components/PageHeader.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="p-4 flex justify-between window-drag border-b items-center">
+  <div class="px-4 flex justify-between window-drag border-b items-center h-row-largest flex-shrink-0">
     <h1 class="text-xl font-semibold select-none" v-if="title && !backLink">
       {{ title }}
     </h1>
     <BackLink v-if="backLink" class="window-no-drag"/>
     <div class="flex items-stretch window-no-drag gap-2">
       <slot />
-      <SearchBar v-if="!hideSearch"/>
+      <SearchBar v-if="!hideSearch" />
     </div>
   </div>
 </template>

src/components/Paginator.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="my-3 grid grid-cols-3 text-gray-800 text-sm select-none">
+  <div
+    class="grid grid-cols-3 text-gray-800 text-sm select-none items-center"
+    style="height: 52px"
+  >
     <!-- Length Display -->
     <div class="justify-self-start">
       {{

src/components/ReconciliationValidation.vue

@@ -1,93 +0,0 @@
-<template>
-  <div id="importWizard" class="modal-body" style="overflow: hidden;">
-    <div class="row">
-      <div class="col-12">
-        <!-- <div v-for="(entry, i) in entries" :key="i">{{ entry['Date'] }}</div> -->
-        <table class="table table-sm">
-          <thead style="font-size: 13px">
-            <tr>
-              <th scope="col">
-                <input type="checkbox" checked="true" ref="all" @change="allSelected" />
-              </th>
-              <th
-                scope="col"
-                v-for="(fieldname, index) in Object.keys(entries[0])"
-                :key="index"
-              >{{ fieldname }}</th>
-            </tr>
-          </thead>
-          <tbody style="font-size: 13px">
-            <tr v-for="(entry, index) in entries" :key="index">
-              <th scope="row">
-                <input type="checkbox" checked="true" :ref="'cb-'+index" @change="rowSelected" />
-              </th>
-              <td v-for="(fieldname, idx) in Object.keys(entry)" :key="idx">{{ entry[fieldname] }}</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col-12 text-right">
-        <f-button primary @click="reconcile">{{ 'Reconcile' }}</f-button>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import luxon from 'luxon';
-import { fyo } from 'src/initFyo';
-
-export default {
-  props: ['entries', 'afterReconcile'],
-  data() {
-    return {
-      selectedEntries: []
-    };
-  },
-  methods: {
-    allSelected() {
-      for (let i = 0; i < this.entries.length; i++) {
-        this.$refs['cb-' + i][0].checked = this.$refs['all'].checked;
-      }
-    },
-    rowSelected() {
-      for (let i = 0; i < this.entries.length; i++) {
-        if (!this.$refs['cb-' + i][0].checked) {
-          this.$refs['all'].checked = false;
-        }
-      }
-    },
-    close() {
-      this.$modal.hide();
-    },
-    async reconcile() {
-      for (let i = 0; i < this.entries.length; i++) {
-        if (this.$refs['cb-' + i][0].checked)
-          this.selectedEntries.push(this.entries[i]);
-      }
-      for (let entry of this.selectedEntries) {
-        const payment = await fyo.doc.getDoc('Payment', entry['Payment Entry']);
-        const clearanceDate =
-          luxon.DateTime.fromFormat(
-            entry['Clearance Date'],
-            'dd/MM/yy'
-          ).toISO() ||
-          luxon.DateTime.fromFormat(
-            entry['Clearance Date'],
-            'dd/MM/yyyy'
-          ).toISO();
-        payment.set({ clearanceDate });
-        await payment.sync();
-      }
-      this.close();
-      await this.afterReconcile();
-    }
-  }
-};
-</script>
-<style>
-.modal-dialog {
-  max-width: 600px !important;
-}
-</style>

src/components/Report/ListReport.vue

@@ -76,6 +76,7 @@
       <hr />
       <Paginator
         :item-count="report?.reportData?.length ?? 0"
+        class="px-4"
         @index-change="setPageIndices"
       />
     </div>

src/components/SearchBar.vue

@@ -71,7 +71,7 @@
         <div
           v-if="si.group === 'Docs'"
           class="flex w-full justify-between px-3 items-center"
-          style="height: 48px; margin-left: -2px"
+          style="height: var(--h-row-mid); margin-left: -2px"
         >
           <div class="flex items-center">
             <p class="text-gray-900">
@@ -93,7 +93,7 @@
         <div
           v-else
           class="flex flex-row w-full justify-between px-3 items-center"
-          style="height: 48px; margin-left: -2px"
+          style="height: var(--h-row-mid); margin-left: -2px"
         >
           <p class="text-gray-900">
             {{ si.label }}

src/components/TwoColumnForm.vue

@@ -20,6 +20,8 @@
         :key="`${df.fieldname}-inline`"
       >
         <TwoColumnForm
+          class="overflow-auto"
+          style="max-height: calc((var(--h-row-mid) + 1px) * 3 - 1px)"
           ref="inlineEditForm"
           :doc="inlineEditDoc"
           :fields="getInlineEditFields(df)"
@@ -29,13 +31,16 @@
           :autosave="false"
           @error="(msg) => $emit('error', msg)"
         />
-        <div class="flex px-4 pb-2 gap-2">
-          <Button class="w-1/2 text-gray-900" @click="stopInlineEditing">
+        <div
+          class="flex px-4 py-4 justify-between items-center"
+          style="max-height: calc(var(--h-row-mid) + 1px)"
+        >
+          <Button class="text-gray-900 w-20" @click="stopInlineEditing">
             {{ t`Cancel` }}
           </Button>
           <Button
             type="primary"
-            class="w-1/2 text-white"
+            class="text-white w-20"
             @click="saveInlineEditDoc(df)"
           >
             {{ t`Save` }}
@@ -49,12 +54,15 @@
         class="grid items-center"
         :class="{
           'border-b': !noBorder,
-          'h-12':
-            !['AttachImage', 'Text'].includes(df.fieldtype) &&
-            !errors[df.fieldname],
         }"
         :key="`${df.fieldname}-regular`"
-        :style="style"
+        :style="{
+          ...style,
+
+          height: !['AttachImage', 'Text'].includes(df.fieldtype)
+            ? 'calc(var(--h-row-mid) + 1px)'
+            : 'calc(var(--h-row-mid) * 2 + 1px)',
+        }"
       >
         <div class="py-2 pl-4 flex text-gray-600">
           <div class="py-1">
@@ -299,6 +307,7 @@ export default {
         .join(' ');
       return {
         'grid-template-columns': templateColumns,
+        height: 'calc(var(--h-row-mid) + 1px)',
       };
     },
     submitted() {

src/components/Widgets/PartyWidget.vue

@@ -1,12 +1,21 @@
 <template>
-  <div class="py-4" v-if="pendingInvoices.length">
-    <div class="px-4 text-sm text-gray-600">
+  <div v-if="pendingInvoices.length">
+    <div
+      class="
+        px-4
+        text-sm text-gray-600
+        border-b
+        flex
+        items-center
+        h-row-smallest
+      "
+    >
       {{ t`Recent Invoices` }}
     </div>
 
     <!-- Invoice List -->
     <div
-      class="px-4 py-3 border-b hover:bg-gray-100 cursor-pointer text-base"
+      class="px-4 py-4 border-b hover:bg-gray-100 cursor-pointer text-base"
       v-for="invoice in pendingInvoices"
       :key="invoice.name"
       @click="routeToForm(invoice)"

src/pages/ChartOfAccounts.vue

@@ -3,31 +3,33 @@
     <PageHeader :title="t`Chart of Accounts`" />
 
     <!-- Chart of Accounts -->
-    <div class="flex-1 flex flex-col mx-4 overflow-y-auto mb-4" v-if="root">
+    <div class="flex-1 flex flex-col overflow-y-auto mb-4" v-if="root">
       <!-- Chart of Accounts Indented List -->
       <template v-for="account in allAccounts" :key="account.name">
         <!-- Account List Item -->
         <div
           class="
-            mt-2
             py-2
             cursor-pointer
             hover:bg-gray-100
             group
             flex
             items-center
+            border-b
+            flex-shrink-0
+            pr-4
           "
           :class="[
             account.level !== 0 ? 'text-base' : 'text-lg',
             isQuickEditOpen(account) ? 'bg-gray-200' : '',
-            `pl-${account.level * 8}`,
           ]"
+          :style="`height: calc(var(--h-row-mid) + 1px); padding-left: calc(1rem + 2rem * ${account.level})`"
           @click="onClick(account)"
         >
-          <component :is="getIconComponent(account)" class="ml-2" />
+          <component :is="getIconComponent(account)" />
           <div class="flex items-baseline">
             <div
-              class="ml-3"
+              class="ml-4"
               :class="[!account.parentAccount && 'font-semibold']"
             >
               {{ account.name }}

src/pages/DataImport.vue

@@ -15,12 +15,19 @@
       >
     </PageHeader>
 
-    <div
-      class="flex px-4 mt-2 text-base w-full flex-col gap-8"
-      v-if="!complete"
-    >
+    <div class="flex text-base w-full flex-col" v-if="!complete">
       <!-- Type selector -->
-      <div class="flex flex-row justify-start items-center w-full gap-2">
+      <div
+        class="
+          flex flex-row
+          justify-start
+          items-center
+          w-full
+          gap-2
+          border-b
+          p-4
+        "
+      >
         <FormControl
           :df="importableDf"
           input-class="bg-transparent text-gray-900 text-base"
@@ -45,9 +52,9 @@
       </div>
 
       <!-- Settings -->
-      <div v-if="fileName" class="">
+      <div v-if="fileName" class="border-b p-4">
         <h2 class="text-lg font-semibold">{{ t`Importer Settings` }}</h2>
-        <div class="mt-4 flex gap-2">
+        <div class="mt-2 flex gap-2">
           <div
             v-if="file && isSubmittable"
             class="
@@ -124,11 +131,14 @@
       </div>
 
       <!-- Label Assigner -->
-      <div v-if="fileName" class="pb-4">
-        <h2 class="text-lg font-semibold">{{ t`Assign Imported Labels` }}</h2>
-        <div
-          class="gap-2 mt-4 grid grid-flow-col overflow-x-auto no-scrollbar"
-        >
+      <div v-if="fileName" class="p-4 border-b">
+        <div class="flex items-center gap-2">
+          <h2 class="text-lg font-semibold">{{ t`Assign Imported Labels` }}</h2>
+          <p class="text-red-400 text-sm" v-if="isRequiredUnassigned">
+            {{ t`* required fields` }}
+          </p>
+        </div>
+        <div class="gap-2 mt-4 grid grid-flow-col overflow-x-auto no-scrollbar">
           <div
             v-for="(f, k) in importer.assignableLabels"
             :key="'assigner-' + f + '-' + k"
@@ -151,24 +161,24 @@
             />
           </div>
         </div>
-        <p
-          class="text-red-400 text-sm mt-1 -mb-1 p-0 h-0"
-          v-if="isRequiredUnassigned"
-        >
-          {{ t`* required fields` }}
-        </p>
       </div>
 
       <!-- Data Verifier -->
       <div v-if="fileName">
-        <h2 class="-mt-4 text-lg font-semibold pb-1">
-          {{ t`Verify Imported Data` }}
-        </h2>
-
-        <div class="overflow-auto mt-4 pb-4">
+        <div class="overflow-auto border-b">
           <!-- Column Name Rows  -->
           <div
-            class="grid grid-flow-col pb-4 border-b gap-2 sticky top-0 bg-white"
+            class="
+              grid grid-flow-col
+              border-b
+              gap-2
+              sticky
+              top-0
+              bg-white
+              px-4
+              h-row-mid
+              items-center
+            "
             style="width: fit-content"
             v-if="importer.columnLabels.length > 0"
           >
@@ -190,10 +200,17 @@
           <!-- Data Rows -->
           <div
             v-if="importer.columnLabels.length > 0"
-            style="max-height: 400px"
+            style="max-height: 500px"
           >
             <div
-              class="grid grid-flow-col mt-4 pb-4 border-b gap-2 items-center"
+              class="
+                grid grid-flow-col
+                border-b
+                gap-2
+                items-center
+                px-4
+                h-row-mid
+              "
               style="width: fit-content"
               v-for="(r, i) in assignedMatrix"
               :key="'matrix-row-' + i"
@@ -238,13 +255,18 @@
                 :value="c"
               />
             </div>
+
+            <!-- Add Row button -->
             <button
               class="
                 text-gray-600
-                hover:text-gray-900
+                hover:bg-gray-100
                 flex flex-row
                 w-full
-                mt-4
+                px-4
+                h-row-mid
+                border-b
+                items-center
                 outline-none
               "
               @click="

src/pages/DatabaseSelector.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="py-10 flex-1 bg-white flex justify-center items-center"
+    class="flex-1 flex justify-center items-center"
     :class="{
       'pointer-events-none': loadingDatabase,
       'window-drag': platform !== 'Windows',
@@ -11,7 +11,7 @@
       style="height: 700px"
     >
       <!-- Welcome to Frappe Books -->
-      <div class="px-6 py-10">
+      <div class="px-4 py-4">
         <h1 class="text-2xl font-semibold select-none">
           {{ t`Welcome to Frappe Books` }}
         </h1>
@@ -27,7 +27,7 @@
       <!-- New File (Blue Icon) -->
       <div
         @click="newDatabase"
-        class="px-6 h-18 flex flex-row items-center gap-4 p-2"
+        class="px-4 h-row-largest flex flex-row items-center gap-4 p-2"
         :class="creatingDemo ? '' : 'hover:bg-gray-100 cursor-pointer'"
       >
         <div class="w-8 h-8 rounded-full bg-blue-500 relative flex-center">
@@ -47,7 +47,7 @@
       <!-- Existing File (Green Icon) -->
       <div
         @click="existingDatabase"
-        class="px-6 h-18 flex flex-row items-center gap-4 p-2"
+        class="px-4 h-row-largest flex flex-row items-center gap-4 p-2"
         :class="creatingDemo ? '' : 'hover:bg-gray-100 cursor-pointer'"
       >
         <div class="w-8 h-8 rounded-full bg-green-500 relative flex-center">
@@ -67,7 +67,7 @@
       <!-- File List -->
       <div class="overflow-y-auto" style="max-height: 340px">
         <div
-          class="h-18 px-6 flex gap-4 items-center"
+          class="h-row-largest px-4 flex gap-4 items-center"
           :class="creatingDemo ? '' : 'hover:bg-gray-100 cursor-pointer'"
           v-for="(file, i) in files"
           :key="file.dbPath"
@@ -137,8 +137,7 @@
           justify-between
           items-center
           absolute
-          px-6
-          py-6
+          p-4
           text-gray-900
         "
         style="top: 100%; transform: translateY(-100%)"

src/pages/GetStarted.vue

@@ -1,26 +1,21 @@
 <template>
   <div class="flex flex-col overflow-y-hidden">
     <PageHeader :title="t`Setup Your Workspace`" />
-    <div class="flex-1 mx-4 overflow-y-auto overflow-x-hidden">
-      <div class="my-4" v-for="section in sections" :key="section.label">
+    <div class="flex-1 overflow-y-auto overflow-x-hidden">
+      <div
+        class="p-4 border-b"
+        v-for="section in sections"
+        :key="section.label"
+      >
         <h2 class="font-medium">{{ section.label }}</h2>
-        <div class="flex mt-4 -mx-2">
+        <div class="flex mt-4 gap-4">
           <div
-            class="flex-shrink-0 w-full px-2 md:w-1/3 sm:w-1/2"
+            class="w-full md:w-1/3 sm:w-1/2"
             v-for="item in section.items"
             :key="item.label"
           >
             <div
-              class="
-                flex flex-col
-                justify-between
-                h-40
-                p-4
-                border
-                rounded-lg
-                cursor-pointer
-                hover:shadow-md
-              "
+              class="flex flex-col justify-between h-40 p-4 border rounded-lg"
               @mouseenter="() => (activeCard = item.key)"
               @mouseleave="() => (activeCard = null)"
             >

src/pages/InvoiceForm.vue

@@ -31,7 +31,7 @@
 
     <!-- Invoice Form -->
     <template #body v-if="doc">
-      <div class="p-4 text-2xl font-semibold flex justify-between">
+      <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>
@@ -102,7 +102,7 @@
 
       <div v-if="doc.items?.length ?? 0" class="mt-auto">
         <hr />
-        <div class="flex justify-between text-base m-6 gap-12">
+        <div class="flex justify-between text-base m-4 gap-12">
           <!-- Form Terms-->
           <FormControl
             class="w-1/2 self-end"

src/pages/JournalEntryForm.vue

@@ -24,7 +24,7 @@
 
     <!-- Journal Entry Form -->
     <template #body v-if="doc">
-      <div class="p-4 text-2xl font-semibold flex justify-between">
+      <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>
@@ -98,7 +98,7 @@
       <!-- Footer -->
       <div v-if="doc.accounts?.length ?? 0" class="mt-auto">
         <hr />
-        <div class="flex justify-between text-base m-6 gap-12">
+        <div class="flex justify-between text-base m-4 gap-12">
           <!-- User Remark -->
           <FormControl
             v-if="!doc.submitted || doc.userRemark"

src/pages/ListView/List.vue

@@ -4,16 +4,16 @@
     <div class="flex items-center">
       <p class="w-8 text-right mr-4 text-gray-700">#</p>
       <Row
-        class="flex-1 text-gray-700 border-none"
+        class="flex-1 text-gray-700 border-none h-row-mid"
         :columnCount="columns.length"
         gap="1rem"
       >
         <div
           v-for="(column, i) in columns"
           :key="column.label"
-          class="py-4 overflow-x-auto no-scrollbar whitespace-nowrap"
+          class="overflow-x-auto no-scrollbar whitespace-nowrap h-row items-center flex"
           :class="{
-            'text-right': isNumeric(column.fieldtype),
+            'ml-auto': isNumeric(column.fieldtype),
             'pr-4': i === columns.length - 1,
           }"
         >
@@ -33,7 +33,7 @@
           </p>
           <Row
             gap="1rem"
-            class="cursor-pointer text-gray-900 flex-1 border-none"
+            class="cursor-pointer text-gray-900 flex-1 border-none h-row-mid"
             @click="openForm(doc)"
             :columnCount="columns.length"
           >

src/pages/ListView/ListCell.vue

@@ -1,11 +1,12 @@
 <template>
-  <div class="py-4 flex items-center truncate" :class="cellClass">
+  <div class="flex items-center truncate" :class="cellClass">
     <span class="truncate" v-if="!customRenderer">{{ columnValue }}</span>
     <component v-else :is="customRenderer" />
   </div>
 </template>
 <script>
 import { fyo } from 'src/initFyo';
+import { isNumeric } from 'src/utils';
 
 export default {
   name: 'ListCell',
@@ -21,9 +22,7 @@ export default {
       return this.column.render(this.doc);
     },
     cellClass() {
-      return ['Int', 'Float', 'Currency'].includes(this.column.fieldtype)
-        ? 'justify-end'
-        : '';
+      return isNumeric(this.column.fieldtype) ? 'justify-end' : '';
     },
   },
 };

src/pages/PrintView/PrintView.vue

@@ -39,13 +39,13 @@
 
     <!-- Printview Customizer -->
     <div class="border-l w-80" v-if="showCustomiser">
-      <div class="mt-4 px-4 flex items-center justify-between">
+      <div class="px-4 flex items-center justify-between h-row-largest border-b">
         <h2 class="font-semibold">{{ t`Customise` }}</h2>
         <Button :icon="true" @click="showCustomiser = false">
           <feather-icon name="x" class="w-4 h-4" />
         </Button>
       </div>
-      <TwoColumnForm class="mt-4" :doc="printSettings" :autosave="true" />
+      <TwoColumnForm :doc="printSettings" :autosave="true" class="border-none"/>
     </div>
   </div>
 </template>

src/pages/QuickEditForm.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="border-l h-full overflow-auto">
     <!-- Quick edit Tool bar -->
-    <div class="flex items-center justify-between px-4 pt-4">
+    <div class="flex items-center justify-between px-4 border-b h-row-largest">
       <!-- Close Button and Status Text -->
       <div class="flex items-center">
         <Button :icon="true" @click="routeToPrevious">
@@ -43,7 +43,11 @@
     </div>
 
     <!-- Name and image -->
-    <div class="p-4 gap-2 flex-center flex flex-col items-center" v-if="doc">
+    <div
+      class="px-4 flex-center flex flex-col items-center gap-1.5"
+      style="height: calc(var(--h-row-mid) * 2 + 1px)"
+      v-if="doc"
+    >
       <FormControl
         v-if="imageField"
         :df="imageField"
@@ -53,7 +57,7 @@
         :letter-placeholder="doc[titleField.fieldname]?.[0] ?? null"
       />
       <FormControl
-        input-class="text-center"
+        input-class="text-center h-8"
         ref="titleControl"
         v-if="titleField"
         :df="titleField"

src/pages/Settings/Settings.vue

@@ -2,7 +2,7 @@
   <FormContainer :title="t`Settings`">
     <template #body>
       <!-- Icon Tab Bar -->
-      <div class="flex justify-around mb-4 mt-6">
+      <div class="flex justify-around mb-2 mt-4">
         <div
           v-for="(tab, i) in tabs"
           :key="tab.label"

src/pages/Settings/TabInvoice.vue

@@ -61,9 +61,7 @@ export default {
   },
   async mounted() {
     this.doc = await fyo.doc.getDoc('PrintSettings');
-    this.companyName = (
-      await fyo.doc.getDoc('AccountingSettings')
-    ).companyName;
+    this.companyName = (await fyo.doc.getDoc('AccountingSettings')).companyName;
   },
   computed: {
     fields() {

src/pages/Settings/TabSystem.vue

@@ -9,7 +9,7 @@
       @change="forwardChangeEvent"
     />
     <LanguageSelector
-      class="text-sm w-28 bg-gray-100 rounded-md mb-6 ml-6"
+      class="text-sm w-28 bg-gray-100 rounded-md mb-4 ml-4"
       input-class="py-1.5 bg-transparent"
     />
   </div>

src/pages/SetupWizard/SetupWizard.vue

@@ -1,7 +1,5 @@
 <template>
-  <div
-    class="py-10 flex-1 bg-white flex justify-center items-center window-drag"
-  >
+  <div class="flex-1 bg-white flex justify-center items-center window-drag">
     <!-- 0: Language Selection Slide -->
     <Slide
       @primary-clicked="handlePrimary"

src/pages/SetupWizard/Slide.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="w-form shadow rounded-lg border relative" style="height: 700px">
     <!-- Slide Title -->
-    <div class="px-6 py-10">
+    <div class="p-4">
       <h1 class="text-2xl font-semibold select-none">
         <slot name="title"></slot>
       </h1>
@@ -15,7 +15,7 @@
 
     <!-- Slide Buttons -->
     <div
-      class="flex justify-between px-6 pb-6 window-no-drag absolute w-form"
+      class="flex justify-between px-4 pb-4 window-no-drag absolute w-form"
       style="top: 100%; transform: translateY(-100%)"
     >
       <Button

src/styles/index.css

@@ -53,6 +53,20 @@ html {
   display: none;
 }
 
+:root {
+  --w-sidebar: 12rem;
+  --w-desk: calc(100vw - 12rem);
+  --w-scrollbar: 0.5rem;
+  
+
+  /* Row Heights */
+  --h-row-smallest: 2rem;
+  --h-row-small: 2.5rem;
+  --h-row-mid: 3rem;
+  --h-row-large: 3.5rem;
+  --h-row-largest: 4rem;
+}
+
 .w-form {
   width: 600px;
 }
@@ -61,10 +75,24 @@ html {
   height: 800px;
 }
 
-:root {
-  --w-sidebar: 12rem;
-  --w-desk: calc(100vw - 12rem);
-  --w-scrollbar: 8px;
+.h-row-smallest {
+  height: var(--h-row-smallest);
+}
+
+.h-row-small {
+  height: var(--h-row-small);
+}
+
+.h-row-mid {
+  height: var(--h-row-mid);
+}
+
+.h-row-large {
+  height: var(--h-row-large);
+}
+
+.h-row-largest {
+  height: var(--h-row-largest);
 }
 
 .w-sidebar {