incr: remove min restrictions

- minor color update
- increase dashboard colors by 100

main.ts

@@ -77,8 +77,6 @@ export class Main {
     const options: BrowserWindowConstructorOptions = {
       width: this.WIDTH,
       height: this.HEIGHT,
-      minWidth: this.WIDTH,
-      minHeight: this.HEIGHT,
       title: this.title,
       titleBarStyle: 'hidden',
       trafficLightPosition: { x: 16, y: 16 },

src/pages/Dashboard/Cashflow.vue

@@ -7,11 +7,11 @@
       <!-- Chart Legend -->
       <div class="flex text-base gap-8" v-if="hasData">
         <div class="flex items-center gap-2">
-          <span class="w-3 h-3 rounded-sm inline-block bg-blue-400" />
+          <span class="w-3 h-3 rounded-sm inline-block bg-blue-500" />
           <span class="text-gray-900">{{ t`Inflow` }}</span>
         </div>
         <div class="flex items-center gap-2">
-          <span class="w-3 h-3 rounded-sm inline-block bg-pink-400" />
+          <span class="w-3 h-3 rounded-sm inline-block bg-pink-500" />
           <span class="text-gray-900">{{ t`Outflow` }}</span>
         </div>
       </div>
@@ -77,7 +77,7 @@ export default {
   computed: {
     chartData() {
       let data = this.data;
-      let colors = [uicolors.blue['400'], uicolors.pink['400']];
+      let colors = [uicolors.blue['500'], uicolors.pink['500']];
       if (!this.hasData) {
         data = dummyData;
         colors = [uicolors.gray['200'], uicolors.gray['100']];

src/pages/Dashboard/Dashboard.vue

@@ -1,17 +1,22 @@
 <template>
-  <div class="flex flex-col">
+  <div class="overflow-hidden h-screen" style="width: var(--w-desk)">
     <PageHeader :title="t`Dashboard`" />
 
-    <div class="overflow-y-hidden no-scrollbar flex flex-col">
-      <Cashflow class="p-4" />
-      <hr />
-      <UnpaidInvoices />
-      <hr />
-      <div class="flex">
-        <ProfitAndLoss class="w-full p-4 border-r" />
-        <Expenses class="w-full p-4" />
+    <div class="no-scrollbar overflow-auto h-full">
+      <div
+        style="min-width: var(--w-desk-fixed); min-height: var(--h-app)"
+        class="overflow-auto"
+      >
+        <Cashflow class="p-4" />
+        <hr />
+        <UnpaidInvoices />
+        <hr />
+        <div class="flex">
+          <ProfitAndLoss class="w-full p-4 border-r" />
+          <Expenses class="w-full p-4" />
+        </div>
+        <hr />
       </div>
-      <hr />
     </div>
   </div>
 </template>

src/pages/Dashboard/ProfitAndLoss.vue

@@ -61,7 +61,7 @@ export default {
     chartData() {
       const points = [this.data.map((d) => d.balance)];
       const colors = [
-        { positive: uicolors.blue['400'], negative: uicolors.pink['400'] },
+        { positive: uicolors.blue['500'], negative: uicolors.pink['500'] },
       ];
       const format = (value) => fyo.format(value ?? 0, 'Currency');
       const yMax = getYMax(points);

src/pages/Dashboard/UnpaidInvoices.vue

@@ -73,9 +73,9 @@
             class="absolute inset-0 h-4"
             :class="
               invoice.count && invoice.color == 'blue'
-                ? 'bg-blue-400'
+                ? 'bg-blue-500'
                 : invoice.hasData
-                ? 'bg-pink-400'
+                ? 'bg-pink-500'
                 : 'bg-gray-400'
             "
             :style="`width: ${invoice.barWidth}%`"

src/styles/index.css

@@ -54,10 +54,11 @@ html {
 }
 
 :root {
+  --w-app: 1200px;
   --w-sidebar: 12rem;
-  --w-desk: calc(100vw - 12rem);
+  --w-desk: calc(100vw - var(--w-sidebar));
+  --w-desk-fixed: calc(var(--w-app) - var(--w-sidebar));
   --w-scrollbar: 0.5rem;
-  
 
   /* Row Heights */
   --h-row-smallest: 2rem;
@@ -65,6 +66,7 @@ html {
   --h-row-mid: 3rem;
   --h-row-large: 3.5rem;
   --h-row-largest: 4rem;
+  --h-app: 800px;
 }
 
 .w-form {

tailwind.config.js

@@ -57,9 +57,7 @@ module.exports = {
         'span-full': '1 / -1',
       },
       colors: {
-        brand: '#2490EF',
-        'brand-100': '#f4f9ff',
-        black: '#112B42',
+        black: '#1E293B',
         gray: {
           25: '#fcfcfd',
           50: '#f8f9fc',
@@ -134,7 +132,7 @@ module.exports = {
           300: '#99d0ff',
           400: '#66b8ff',
           500: '#33a1ff',
-          600: '#0089ff',
+          600: '#2490ef',
           700: '#006ecc',
           800: '#005299',
           900: '#003766',