incr(ui): mainly make the hrs touch the ends

reports/AccountReport.ts

@@ -122,7 +122,6 @@ export abstract class AccountReport extends LedgerReport {
       align: 'left',
       width: ACC_NAME_WIDTH,
       bold: !al.level,
-      italics: al.isGroup,
       indent: al.level ?? 0,
     } as ReportCell;
 

reports/TrialBalance/TrialBalance.ts

@@ -156,7 +156,6 @@ export class TrialBalance extends AccountReport {
       align: 'left',
       width: ACC_NAME_WIDTH,
       bold: !al.level,
-      italics: al.isGroup,
       indent: al.level ?? 0,
     } as ReportCell;
 

src/App.vue

@@ -76,7 +76,7 @@ export default {
       await this.fileSelected(lastSelectedFilePath, false);
     } catch (err) {
       await handleErrorWithDialog(err, undefined, true, true);
-      this.activeScreen = 'DatabaseSelector';
+      await this.showDbSelector()
     }
   },
   methods: {

src/components/Controls/AttachImage.vue

@@ -9,7 +9,7 @@
       overflow-hidden
       cursor-pointer
     "
-    :class="{ 'w-20 h-20': size !== 'small', 'w-16 h-16': size === 'small' }"
+    :class="{ 'w-20 h-20': size !== 'small', 'w-12 h-12': size === 'small' }"
     @mouseover="showEdit = true"
     @mouseleave="showEdit = false"
     @click="openFileSelector"

src/components/Modal.vue

@@ -14,7 +14,7 @@
     style="background: rgba(0, 0, 0, 0.2); backdrop-filter: blur(4px)"
     v-if="openModal"
   >
-    <div class="bg-white rounded-lg shadow-2xl w-600" v-bind="$attrs">
+    <div class="bg-white rounded-lg shadow-2xl w-form" v-bind="$attrs">
       <slot></slot>
     </div>
   </div>

src/components/TwoColumnForm.vue

@@ -46,8 +46,11 @@
       <!-- Regular Field Form -->
       <div
         v-else
-        class="grid"
-        :class="{ 'border-b': !noBorder }"
+        class="grid items-center"
+        :class="{
+          'border-b': !noBorder,
+          'h-12': !['AttachImage', 'Text'].includes(df.fieldtype),
+        }"
         :key="`${df.fieldname}-regular`"
         :style="style"
       >

src/pages/ChartOfAccounts.vue

@@ -10,11 +10,9 @@
         <div
           class="
             mt-2
-            px-4
             py-2
             cursor-pointer
             hover:bg-gray-100
-            rounded-md
             group
             flex
             items-center
@@ -26,7 +24,7 @@
           ]"
           @click="onClick(account)"
         >
-          <component :is="getIconComponent(account)" />
+          <component :is="getIconComponent(account)" class="ml-2" />
           <div class="flex items-baseline">
             <div
               class="ml-3"

src/pages/DatabaseSelector.vue

@@ -7,7 +7,7 @@
     }"
   >
     <div
-      class="w-full w-600 shadow rounded-lg border relative"
+      class="w-full w-form shadow rounded-lg border relative"
       style="height: 700px"
     >
       <!-- Welcome to Frappe Books -->
@@ -132,7 +132,7 @@
       >
         <LanguageSelector
           v-show="!creatingDemo"
-          class="text-sm w-40 bg-gray-100 rounded-md"
+          class="text-sm w-28 bg-gray-100 rounded-md"
           input-class="py-1.5 bg-transparent"
         />
         <button
@@ -143,7 +143,8 @@
             rounded-md
             px-4
             py-1.5
-            w-40
+            w-28
+            h-8
           "
           @click="createDemo"
           :disabled="creatingDemo"

src/pages/InvoiceForm.vue

@@ -30,186 +30,152 @@
     </PageHeader>
 
     <!-- Invoice Form -->
-    <div class="flex justify-center flex-1 mb-8 mt-2" v-if="doc">
-      <div
-        class="
-          border
-          rounded-lg
-          shadow
-          h-full
-          flex flex-col
-          justify-between
-          w-600
-        "
-      >
-        <div>
-          <!-- Print Settings Info (Logo, Address, Etc)  -->
-          <div class="flex text-sm text-gray-900 p-6" v-if="printSettings">
-            <div class="w-1/3">
-              <div v-if="printSettings.displayLogo">
-                <img
-                  class="h-12 max-w-32 object-contain"
-                  :src="printSettings.logo"
-                />
-              </div>
-              <div class="text-xl text-gray-700 font-semibold" v-else>
-                {{ companyName }}
-              </div>
-            </div>
-            <div class="w-1/3">
-              <div>{{ printSettings.email }}</div>
-              <div class="mt-1">{{ printSettings.phone }}</div>
-            </div>
-            <div class="w-1/3">
-              <div v-if="address">{{ address.addressDisplay }}</div>
-            </div>
-          </div>
-          <hr />
+    <div
+      class="
+        border
+        rounded-lg
+        shadow
+        h-full
+        flex flex-col
+        mt-2
+        self-center
+        w-form
+        h-form
+      "
+      v-if="doc"
+    >
+      <div class="p-4 text-2xl font-semibold flex justify-between">
+        <h1>
+          {{ doc.notInserted ? t`New Entry` : doc.name }}
+        </h1>
+        <p class="text-gray-600">
+          {{
+            doc.schemaName === 'SalesInvoice'
+              ? t`Sales Invoice`
+              : t`Purchase Invoice`
+          }}
+        </p>
+      </div>
+      <hr />
 
-          <!-- Invoice Form Data Entry -->
-          <div class="m-6 flex flex-col gap-2">
-            <h1 class="text-2xl font-semibold">
-              {{
-                doc.notInserted
-                  ? doc.schemaName === 'SalesInvoice'
-                    ? t`New Sales Invoice`
-                    : t`New Purchase Invoice`
-                  : doc.name
-              }}
-            </h1>
-
-            <!-- First Row of Fields -->
-            <div class="flex flex-row justify-between gap-2">
-              <FormControl
-                class="bg-gray-100 rounded text-base w-1/3"
-                input-class="text-lg font-semibold bg-transparent"
-                :df="getField('party')"
-                :value="doc.party"
-                :placeholder="getField('party').label"
-                @change="(value) => doc.set('party', value)"
-                @new-doc="(party) => doc.set('party', party.name)"
-                :read-only="doc?.submitted"
-              />
-              <div class="w-1/3" />
-              <FormControl
-                class="w-1/3"
-                input-class="bg-gray-100 px-3 py-2 text-base text-right"
-                :df="getField('date')"
-                :value="doc.date"
-                :placeholder="'Date'"
-                @change="(value) => doc.set('date', value)"
-                :read-only="doc?.submitted"
-              />
-            </div>
-
-            <!-- Second Row of Fields -->
-            <div class="flex flex-row justify-between gap-2">
-              <FormControl
-                class="text-base bg-gray-100 rounded w-1/3"
-                input-class="px-3 py-2 text-base bg-transparent"
-                :df="getField('account')"
-                :value="doc.account"
-                :placeholder="'Account'"
-                @change="(value) => doc.set('account', value)"
-                :read-only="doc?.submitted"
-              />
-              <div class="w-1/3" />
-              <FormControl
-                class="text-base bg-gray-100 rounded w-1/3"
-                input-class="bg-transparent px-3 py-2 text-base text-right"
-                :df="getField('numberSeries')"
-                :value="doc.numberSeries"
-                @change="(value) => doc.set('numberSeries', value)"
-                :read-only="!doc.notInserted || doc?.submitted"
-              />
-            </div>
-          </div>
-          <hr />
-
-          <!-- Invoice Items Table -->
-          <Table
-            class="px-6 text-base mt-4"
-            :df="getField('items')"
-            :value="doc.items"
-            :showHeader="true"
-            :max-rows-before-overflow="4"
-            @change="(value) => doc.set('items', value)"
+      <div>
+        <!-- Invoice Form Data Entry -->
+        <div class="m-4 grid grid-cols-3 gap-4">
+          <FormControl
+            class="bg-gray-100 rounded text-base"
+            input-class="text-lg font-semibold bg-transparent"
+            :df="getField('party')"
+            :value="doc.party"
+            :placeholder="getField('party').label"
+            @change="(value) => doc.set('party', value)"
+            @new-doc="(party) => doc.set('party', party.name)"
+            :read-only="doc?.submitted"
+          />
+          <FormControl
+            input-class="bg-gray-100 px-3 py-2 text-base text-right"
+            :df="getField('date')"
+            :value="doc.date"
+            :placeholder="'Date'"
+            @change="(value) => doc.set('date', value)"
+            :read-only="doc?.submitted"
+          />
+          <FormControl
+            class="text-base bg-gray-100 rounded"
+            input-class="bg-transparent px-3 py-2 text-base text-right"
+            :df="getField('numberSeries')"
+            :value="doc.numberSeries"
+            @change="(value) => doc.set('numberSeries', value)"
+            :read-only="!doc.notInserted || doc?.submitted"
+          />
+          <FormControl
+            class="text-base bg-gray-100 rounded"
+            input-class="px-3 py-2 text-base bg-transparent"
+            :df="getField('account')"
+            :value="doc.account"
+            :placeholder="'Account'"
+            @change="(value) => doc.set('account', value)"
             :read-only="doc?.submitted"
           />
         </div>
+        <hr />
 
-        <!-- Invoice Form Footer -->
+        <!-- Invoice Items Table -->
+        <Table
+          class="text-base"
+          :df="getField('items')"
+          :value="doc.items"
+          :showHeader="true"
+          :max-rows-before-overflow="4"
+          @change="(value) => doc.set('items', value)"
+          :read-only="doc?.submitted"
+        />
+      </div>
 
-        <div v-if="doc.items?.length ?? 0">
-          <hr />
-          <div class="flex justify-between text-base m-6 gap-12">
-            <!-- Form Terms-->
-            <FormControl
-              class="w-1/2 self-end"
-              v-if="!doc?.submitted || doc.terms"
-              :df="getField('terms')"
-              :value="doc.terms"
-              input-class="bg-gray-100"
-              @change="(value) => doc.set('terms', value)"
-              :read-only="doc?.submitted"
-            />
+      <!-- Invoice Form Footer -->
 
-            <!-- Totals -->
-            <div class="w-1/2 gap-2 flex flex-col self-end ml-auto">
-              <!-- Subtotal -->
-              <div class="flex justify-between">
-                <div>{{ t`Subtotal` }}</div>
-                <div>{{ formattedValue('netTotal') }}</div>
+      <div v-if="doc.items?.length ?? 0" class="mt-auto">
+        <hr />
+        <div class="flex justify-between text-base m-6 gap-12">
+          <!-- Form Terms-->
+          <FormControl
+            class="w-1/2 self-end"
+            v-if="!doc?.submitted || doc.terms"
+            :df="getField('terms')"
+            :value="doc.terms"
+            input-class="bg-gray-100"
+            @change="(value) => doc.set('terms', value)"
+            :read-only="doc?.submitted"
+          />
+
+          <!-- Totals -->
+          <div class="w-1/2 gap-2 flex flex-col self-end ml-auto">
+            <!-- Subtotal -->
+            <div class="flex justify-between">
+              <div>{{ t`Subtotal` }}</div>
+              <div>{{ formattedValue('netTotal') }}</div>
+            </div>
+            <hr />
+
+            <!-- Taxes -->
+            <div
+              class="flex justify-between"
+              v-for="tax in doc.taxes"
+              :key="tax.name"
+            >
+              <div>{{ tax.account }}</div>
+              <div>
+                {{
+                  fyo.format(tax.amount, {
+                    fieldtype: 'Currency',
+                    currency: doc.currency,
+                  })
+                }}
               </div>
-              <hr />
+            </div>
+            <hr v-if="doc.taxes?.length" />
 
-              <!-- Taxes -->
-              <div
-                class="flex justify-between"
-                v-for="tax in doc.taxes"
-                :key="tax.name"
-              >
-                <div>{{ tax.account }}</div>
-                <div>
-                  {{
-                    fyo.format(tax.amount, {
-                      fieldtype: 'Currency',
-                      currency: doc.currency,
-                    })
-                  }}
-                </div>
-              </div>
-              <hr v-if="doc.taxes?.length" />
+            <!-- Grand Total -->
+            <div
+              class="
+                flex
+                justify-between
+                text-green-600
+                font-semibold
+                text-base
+              "
+            >
+              <div>{{ t`Grand Total` }}</div>
+              <div>{{ formattedValue('grandTotal') }}</div>
+            </div>
 
-              <!-- Grand Total -->
-              <div
-                class="
-                  flex
-                  justify-between
-                  text-green-600
-                  font-semibold
-                  text-base
-                "
-              >
-                <div>{{ t`Grand Total` }}</div>
-                <div>{{ formattedValue('grandTotal') }}</div>
-              </div>
-
-              <!-- Outstanding Amount -->
-              <hr v-if="doc.outstandingAmount > 0" />
-              <div
-                v-if="doc.outstandingAmount > 0"
-                class="
-                  flex
-                  justify-between
-                  text-red-600
-                  font-semibold
-                  text-base
-                "
-              >
-                <div>{{ t`Outstanding Amount` }}</div>
-                <div>{{ formattedValue('outstandingAmount') }}</div>
-              </div>
+            <!-- Outstanding Amount -->
+            <hr v-if="doc.outstandingAmount > 0" />
+            <div
+              v-if="doc.outstandingAmount > 0"
+              class="flex justify-between text-red-600 font-semibold text-base"
+            >
+              <div>{{ t`Outstanding Amount` }}</div>
+              <div>{{ formattedValue('outstandingAmount') }}</div>
             </div>
           </div>
         </div>
@@ -316,7 +282,7 @@ export default {
         this.schemaName === ModelNameEnum.SalesInvoice
           ? this.t`Submit Sales Invoice?`
           : this.t`Submit Purchase Invoice?`;
-      const ref = this
+      const ref = this;
       await showMessageDialog({
         message,
         buttons: [

src/pages/JournalEntryForm.vue

@@ -25,124 +25,116 @@
     </PageHeader>
 
     <!-- Journal Entry Form -->
-    <div v-if="doc" class="flex justify-center flex-1 mb-8 mt-2">
-      <div
-        class="
-          border
-          rounded-lg
-          shadow
-          h-full
-          flex flex-col
-          justify-between
-          w-600
-        "
-      >
-        <div>
-          <div class="m-6 flex flex-col gap-2">
-            <h1 class="text-2xl font-semibold">
-              {{ doc.notInserted ? t`New Journal Entry` : doc.name }}
-            </h1>
-
-            <!-- First Column of Fields -->
-            <div class="flex flex-row justify-between gap-2">
-              <FormControl
-                class="w-1/3"
-                :df="getField('entryType')"
-                :value="doc.entryType"
-                placeholder="Entry Type"
-                @change="(value) => doc.set('entryType', value)"
-                input-class="bg-gray-100 px-3 py-2 text-base"
-                :read-only="doc.submitted"
-                :class="doc.submitted && 'pointer-events-none'"
-              />
-              <FormControl
-                class="w-1/3"
-                :df="getField('referenceNumber')"
-                :value="doc.referenceNumber"
-                :placeholder="'Reference Number'"
-                @change="(value) => doc.set('referenceNumber', value)"
-                input-class="bg-gray-100 p-2 text-base"
-                :read-only="doc.submitted"
-                :class="doc.submitted && 'pointer-events-none'"
-              />
-              <FormControl
-                :df="getField('numberSeries')"
-                :value="doc.numberSeries"
-                @change="(value) => doc.set('numberSeries', value)"
-                class="bg-gray-100 rounded w-1/3"
-                input-class="p-2 text-base bg-transparent"
-                :read-only="!doc.notInserted || doc.submitted"
-                :class="doc.submitted && 'pointer-events-none'"
-              />
-            </div>
-
-            <!-- Second Row of Fields -->
-            <div class="flex flex-row justify-between gap-2">
-              <FormControl
-                class="w-1/3"
-                :df="getField('date')"
-                :value="doc.date"
-                :placeholder="'Date'"
-                @change="(value) => doc.set('date', value)"
-                input-class="bg-gray-100 px-3 py-2 text-base"
-                :read-only="doc.submitted"
-                :class="doc.submitted && 'pointer-events-none'"
-              />
-              <div class="w-1/3" />
-              <FormControl
-                class="w-1/3"
-                :df="getField('referenceDate')"
-                :value="doc.referenceDate"
-                :placeholder="'Reference Date'"
-                @change="(value) => doc.set('referenceDate', value)"
-                input-class="bg-gray-100 px-3 py-2 text-base"
-                :read-only="doc.submitted"
-                :class="doc.submitted && 'pointer-events-none'"
-              />
-            </div>
-          </div>
-          <hr />
-
-          <!-- Account Entries Table -->
-          <Table
-            class="mt-2 px-6 text-base"
-            :df="getField('accounts')"
-            :value="doc.accounts"
-            :showHeader="true"
-            :max-rows-before-overflow="6"
+    <div
+      class="
+        self-center
+        border
+        rounded-lg
+        shadow
+        flex flex-col
+        mt-2
+        w-form
+        h-form
+      "
+      v-if="doc"
+    >
+      <div class="p-4 text-2xl font-semibold flex justify-between">
+        <h1>
+          {{ doc.notInserted ? t`New Entry` : doc.name }}
+        </h1>
+        <p class="text-gray-600">
+          {{ t`Journal Entry` }}
+        </p>
+      </div>
+      <hr />
+      <div>
+        <div class="m-4 grid grid-cols-3 gap-y-4 gap-x-4">
+          <!-- First Column of Fields -->
+          <FormControl
+            :df="getField('numberSeries')"
+            :value="doc.numberSeries"
+            @change="(value) => doc.set('numberSeries', value)"
+            class="bg-gray-100 rounded"
+            input-class="p-2 text-base bg-transparent"
+            :read-only="!doc.notInserted || doc.submitted"
+            :class="doc.submitted && 'pointer-events-none'"
+          />
+          <FormControl
+            :df="getField('date')"
+            :value="doc.date"
+            :placeholder="'Date'"
+            @change="(value) => doc.set('date', value)"
+            input-class="bg-gray-100 px-3 py-2 text-base"
             :read-only="doc.submitted"
+            :class="doc.submitted && 'pointer-events-none'"
+          />
+          <FormControl
+            :df="getField('entryType')"
+            :value="doc.entryType"
+            placeholder="Entry Type"
+            @change="(value) => doc.set('entryType', value)"
+            input-class="bg-gray-100 px-3 py-2 text-base"
+            :read-only="doc.submitted"
+            :class="doc.submitted && 'pointer-events-none'"
+          />
+          <FormControl
+            :df="getField('referenceNumber')"
+            :value="doc.referenceNumber"
+            :placeholder="'Reference Number'"
+            @change="(value) => doc.set('referenceNumber', value)"
+            input-class="bg-gray-100 p-2 text-base"
+            :read-only="doc.submitted"
+            :class="doc.submitted && 'pointer-events-none'"
+          />
+          <FormControl
+            :df="getField('referenceDate')"
+            :value="doc.referenceDate"
+            :placeholder="'Reference Date'"
+            @change="(value) => doc.set('referenceDate', value)"
+            input-class="bg-gray-100 px-3 py-2 text-base"
+            :read-only="doc.submitted"
+            :class="doc.submitted && 'pointer-events-none'"
           />
         </div>
+        <hr />
 
-        <!-- Footer -->
-        <div v-if="doc.accounts?.length ?? 0">
-          <hr />
-          <div class="flex justify-between text-base m-6 gap-12">
-            <!-- User Remark -->
-            <FormControl
-              v-if="!doc.submitted || doc.userRemark"
-              class="w-1/2 self-end"
-              input-class="bg-gray-100"
-              :df="getField('userRemark')"
-              :value="doc.userRemark"
-              @change="(value) => doc.set('userRemark', value)"
-              :class="doc.submitted && 'pointer-events-none'"
-              :read-only="doc.submitted"
-            />
+        <!-- Account Entries Table -->
+        <Table
+          class="text-base"
+          :df="getField('accounts')"
+          :value="doc.accounts"
+          :showHeader="true"
+          :max-rows-before-overflow="6"
+          :read-only="doc.submitted"
+        />
+      </div>
 
-            <!-- Debit and Credit -->
-            <div
-              class="w-1/2 gap-2 flex flex-col self-end font-semibold ml-auto"
-            >
-              <div class="flex justify-between text-green-600">
-                <div>{{ t`Total Debit` }}</div>
-                <div>{{ totalDebit }}</div>
-              </div>
-              <hr />
-              <div class="flex justify-between text-red-600">
-                <div>{{ t`Total Credit` }}</div>
-                <div>{{ totalCredit }}</div>
-              </div>
+      <!-- Footer -->
+      <div v-if="doc.accounts?.length ?? 0" class="mt-auto">
+        <hr />
+        <div class="flex justify-between text-base m-6 gap-12">
+          <!-- User Remark -->
+          <FormControl
+            v-if="!doc.submitted || doc.userRemark"
+            class="w-1/2 self-end"
+            input-class="bg-gray-100"
+            :df="getField('userRemark')"
+            :value="doc.userRemark"
+            @change="(value) => doc.set('userRemark', value)"
+            :class="doc.submitted && 'pointer-events-none'"
+            :read-only="doc.submitted"
+          />
+
+          <!-- Debit and Credit -->
+          <div class="w-1/2 gap-2 flex flex-col self-end font-semibold ml-auto">
+            <div class="flex justify-between text-green-600">
+              <div>{{ t`Total Debit` }}</div>
+              <div>{{ totalDebit }}</div>
+            </div>
+            <hr />
+            <div class="flex justify-between text-red-600">
+              <div>{{ t`Total Credit` }}</div>
+              <div>{{ totalCredit }}</div>
             </div>
           </div>
         </div>

src/pages/ListView/List.vue

@@ -9,14 +9,13 @@
         gap="1rem"
       >
         <div
-          v-for="column in columns"
+          v-for="(column, i) in columns"
           :key="column.label"
-          class="py-4 truncate"
-          :class="
-            ['Int', 'Float', 'Currency'].includes(column.fieldtype)
-              ? 'text-right'
-              : ''
-          "
+          class="py-4 overflow-x-scroll whitespace-nowrap"
+          :class="{
+            'text-right': isNumeric(column.fieldtype),
+            'pr-4': i === columns.length - 1,
+          }"
         >
           {{ column.label }}
         </div>
@@ -39,14 +38,15 @@
             :columnCount="columns.length"
           >
             <ListCell
-              v-for="column in columns"
+              v-for="(column, c) in columns"
               :key="column.label"
               :class="{
-                'text-right': ['Float', 'Currency'].includes(column.fieldtype),
+                'text-right': isNumeric(column.fieldtype),
+                'pr-4': c === columns.length - 1,
               }"
               :doc="doc"
               :column="column"
-            ></ListCell>
+            />
           </Row>
         </div>
         <hr v-if="i !== dataSlice.length - 1" />
@@ -77,6 +77,7 @@ import Button from 'src/components/Button';
 import Paginator from 'src/components/Paginator.vue';
 import Row from 'src/components/Row';
 import { fyo } from 'src/initFyo';
+import { isNumeric } from 'src/utils';
 import { openQuickEdit, routeTo } from 'src/utils/ui';
 import { defineComponent } from 'vue';
 import ListCell from './ListCell';
@@ -138,6 +139,7 @@ export default defineComponent({
     this.setUpdateListeners();
   },
   methods: {
+    isNumeric,
     setPageIndices({ start, end }) {
       this.pageStart = start;
       this.pageEnd = end;

src/pages/Settings/Settings.vue

@@ -1,44 +1,44 @@
 <template>
   <div class="flex flex-col overflow-hidden">
     <PageHeader :title="t`Settings`" />
-    <div class="flex justify-center flex-1 mb-8 mt-2">
-      <div
-        class="border rounded-lg shadow h-full flex flex-col justify-between"
-        style="width: 600px"
-      >
-        <div class="pb-2 mt-8">
-          <Row
-            :columnCount="tabs.length"
-            class="px-6 border-none w-full"
-            gap="0.5rem"
-          >
-            <div
-              v-for="(tab, i) in tabs"
-              :key="tab.label"
-              class="
-                p-2
-                rounded-md
-                hover:bg-white
-                flex flex-col
-                items-center
-                justify-center
-                cursor-pointer
-              "
-              :class="i === activeTab && 'text-blue-500'"
-              @click="activeTab = i"
-            >
-              <component
-                :is="getIconComponent(tab)"
-                :active="i === activeTab"
-              />
-              <div class="mt-2 text-xs">{{ tab.label }}</div>
-            </div>
-          </Row>
-        </div>
-        <div class="flex-1 p-6 overflow-y-auto">
-          <component :is="activeTabComponent" @change="handleChange" />
+    <div
+      class="
+        border
+        rounded-lg
+        shadow
+        h-full
+        flex flex-col
+        justify-between
+        self-center
+        mt-2
+        w-form
+        h-form
+      "
+    >
+      <!-- Icon Tab Bar -->
+      <div class="flex justify-around mb-4 mt-6">
+        <div
+          v-for="(tab, i) in tabs"
+          :key="tab.label"
+          class="
+            p-2
+            rounded-md
+            hover:bg-white
+            flex flex-col
+            items-center
+            justify-center
+            cursor-pointer
+          "
+          :class="i === activeTab && 'text-blue-500'"
+          @click="activeTab = i"
+        >
+          <component :is="getIconComponent(tab)" :active="i === activeTab" />
+          <div class="mt-2 text-xs">{{ tab.label }}</div>
         </div>
       </div>
+      <div class="flex-1 overflow-y-scroll">
+        <component :is="activeTabComponent" @change="handleChange" />
+      </div>
     </div>
   </div>
 </template>

src/pages/Settings/TabInvoice.vue

@@ -1,6 +1,7 @@
 <template>
-  <div v-if="doc">
-    <div class="flex items-center">
+  <div v-if="doc" class="pb-4">
+    <hr />
+    <div class="flex items-center gap-4 p-4">
       <FormControl
         :df="getField('logo')"
         :value="doc.logo"
@@ -11,30 +12,18 @@
           }
         "
       />
-      <div class="ml-6 flex flex-col">
-        <span class="font-semibold">
+      <div class="flex flex-col">
+        <span
+          class="bg-transparent font-semibold text-xl text-gray-900 px-3 py-2"
+        >
           {{ companyName }}
         </span>
-        <span class="text-lg text-gray-700">
+        <span class="text-lg text-gray-800 px-3 py-2">
           {{ doc.email }}
         </span>
-        <FormControl
-          class="mt-2"
-          :df="getField('displayLogo')"
-          :value="doc.displayLogo"
-          :show-label="true"
-          @change="
-            (value) => {
-              doc.setAndSync('displayLogo', value);
-              forwardChangeEvent(getField('displayLogo'));
-            }
-          "
-          size="small"
-        />
       </div>
     </div>
     <TwoColumnForm
-      class="mt-6"
       :doc="doc"
       :fields="fields"
       :autosave="true"
@@ -78,9 +67,13 @@ export default {
   },
   computed: {
     fields() {
-      return ['template', 'color', 'font', 'email', 'phone', 'address'].map(
-        (field) => this.getField(field)
-      );
+      const fields = ['template', 'color', 'font', 'email', 'phone', 'address'];
+
+      if (this.doc.logo) {
+        fields.unshift('displayLogo');
+      }
+
+      return fields.map((field) => this.getField(field));
     },
   },
   methods: {

src/pages/Settings/TabSystem.vue

@@ -9,11 +9,11 @@
       @change="forwardChangeEvent"
     />
     <div
-      class="flex flex-row justify-between items-center w-full text-gray-900"
+      class="flex flex-row justify-between items-center w-full text-gray-900 p-6"
     >
       <LanguageSelector
         class="text-sm w-40 bg-gray-100 rounded-md"
-        input-class="py-1.5 bg-transparent"
+        input-class="bg-transparent"
       />
       <button
         class="
@@ -22,7 +22,7 @@
           hover:bg-gray-200
           rounded-md
           px-4
-          py-1.5
+          h-8
           w-40
         "
         @click="checkForUpdates(true)"

src/pages/SetupWizard/SetupWizard.vue

@@ -2,7 +2,6 @@
   <div
     class="py-10 flex-1 bg-white flex justify-center items-center window-drag"
   >
-
     <!-- 0: Language Selection Slide -->
     <Slide
       @primary-clicked="handlePrimary"
@@ -44,22 +43,23 @@
 
       <template #content>
         <div v-if="doc">
-          <div class="flex items-center px-6 py-5 mb-8 bg-brand rounded-xl">
+          <!-- Image Section -->
+          <div class="flex items-center p-4 gap-4">
             <FormControl
               :df="getField('logo')"
               :value="doc.logo"
               @change="(value) => setValue('logo', value)"
             />
-            <div class="ml-2">
+            <div>
               <FormControl
                 ref="companyField"
                 :df="getField('companyName')"
                 :value="doc.companyName"
                 @change="(value) => setValue('companyName', value)"
-                :input-class="
-                  () => [
-                    'bg-transparent font-semibold text-xl text-white placeholder-blue-400 focus:outline-none focus:bg-blue-600 px-3 rounded py-1',
-                  ]
+                input-class="
+                  bg-transparent
+                  font-semibold
+                  text-xl
                 "
                 :autofocus="true"
               />
@@ -67,16 +67,17 @@
                 :df="getField('email')"
                 :value="doc.email"
                 @change="(value) => setValue('email', value)"
-                :input-class="
-                  () => [
-                    'text-base bg-transparent text-white placeholder-blue-400 focus:bg-blue-600 focus:outline-none rounded px-3 py-1',
-                  ]
+                input-class="
+                  text-base
+                  bg-transparent
                 "
               />
             </div>
           </div>
+
           <p
-            class="px-3 -mt-6 text-sm absolute text-red-400 w-full"
+            class="-mt-6 text-sm absolute text-red-400 w-full"
+            style="left: 7.75rem"
             v-if="emailError"
           >
             {{ emailError }}
@@ -95,7 +96,7 @@
 import { ipcRenderer } from 'electron';
 import FormControl from 'src/components/Controls/FormControl.vue';
 import LanguageSelector from 'src/components/Controls/LanguageSelector.vue';
-import TwoColumnForm from 'src/components/TwoColumnForm';
+import TwoColumnForm from 'src/components/TwoColumnForm.vue';
 import { fyo } from 'src/initFyo';
 import { getErrorMessage } from 'src/utils';
 import { getSetupWizardDoc } from 'src/utils/misc';

src/pages/SetupWizard/Slide.vue

@@ -1,18 +1,27 @@
 <template>
-  <div class="w-600 shadow rounded-lg border relative" style="height: 700px">
-    <div class="px-6 py-8">
-      <h1 class="text-2xl font-semibold"><slot name="title"></slot></h1>
+  <div class="w-form shadow rounded-lg border relative" style="height: 700px">
+    <!-- Slide Title -->
+    <div class="px-6 py-10">
+      <h1 class="text-2xl font-semibold select-none">
+        <slot name="title"></slot>
+      </h1>
     </div>
+    <hr />
 
-    <div class="px-6 window-no-drag">
+    <!-- Slide Content -->
+    <div class="window-no-drag">
       <slot name="content"></slot>
     </div>
 
+    <!-- Slide Buttons -->
     <div
-      class="flex justify-between px-6 pb-6 window-no-drag absolute w-600"
+      class="flex justify-between px-6 pb-6 window-no-drag absolute w-form"
       style="top: 100%; transform: translateY(-100%)"
     >
-      <Button class="text-sm text-grey-900 w-28" @click="$emit('secondary-clicked')">
+      <Button
+        class="text-sm text-grey-900 w-28"
+        @click="$emit('secondary-clicked')"
+      >
         <slot name="secondaryButton"></slot>
       </Button>
       <Button

src/styles/index.css

@@ -53,10 +53,14 @@ html {
   display: none;
 }
 
-.w-600 {
+.w-form {
   width: 600px;
 }
 
+.h-form {
+  height: 800px;
+}
+
 .w-sidebar {
   width: 12rem;
 }