From abdd26f662e5b3cfacd01ce584f686bc8c815330 Mon Sep 17 00:00:00 2001
From: 18alantom <2.alan.tom@gmail.com>
Date: Thu, 3 Feb 2022 16:25:21 +0530
Subject: [PATCH] fix(ui): center toasts - wider toasts - narrower sidebar

---
 src/App.vue              |  3 ---
 src/colors.js            |  7 ++++++-
 src/components/Badge.vue |  4 ++--
 src/components/Toast.vue | 17 ++++++++++-------
 src/pages/Desk.vue       | 18 ++++++++++++++----
 5 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index fb085147..6e40f1ab 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -18,9 +18,6 @@
       @setup-complete="setupComplete"
       @setup-canceled="setupCanceled"
     />
-    <div id="toast-container" class="absolute bottom-0 right-0 mr-6 mb-3">
-      <div id="toast-target" />
-    </div>
   </div>
 </template>
 
diff --git a/src/colors.js b/src/colors.js
index c0ffeb53..6b374deb 100644
--- a/src/colors.js
+++ b/src/colors.js
@@ -27,11 +27,16 @@ const getValidColor = (color) => {
 export function getBgColorClass(color) {
   return `bg-${getValidColor(color)}-100`;
 }
+
+export function getColorClass(color, type, value = 300) {
+  return `${type}-${getValidColor(color)}-${value}`;
+}
+
 export function getTextColorClass(color) {
   return `text-${getValidColor(color)}-600`;
 }
 
-export function getColorClass(color) {
+export function getBgTextColorClass(color) {
   const bg = getBgColorClass(color);
   const text = getTextColorClass(color);
   return [bg, text].join(' ');
diff --git a/src/components/Badge.vue b/src/components/Badge.vue
index 5ecd3d5e..cda009bb 100644
--- a/src/components/Badge.vue
+++ b/src/components/Badge.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import { getColorClass } from '../colors';
+import { getBgTextColorClass } from '../colors';
 
 export default {
   name: 'Badge',
@@ -16,7 +16,7 @@ export default {
   },
   computed: {
     colorClass() {
-      return getColorClass(this.color);
+      return getBgTextColorClass(this.color);
     },
   },
 };
diff --git a/src/components/Toast.vue b/src/components/Toast.vue
index a7b33334..6ed60f3f 100644
--- a/src/components/Toast.vue
+++ b/src/components/Toast.vue
@@ -2,16 +2,19 @@
   <div
     class="
       text-gray-900
-      shadow-md
+      shadow-lg
       px-3
       py-2
       rounded
       flex
       items-center
       mb-3
-      w-80
+      w-96
+      z-10
+      bg-white
+      border-l-4
     "
-    :class="bgColor + (actionText ? ' cursor-pointer' : '')"
+    :class="colorClass + (actionText ? ' cursor-pointer' : '')"
     style="transition: opacity 150ms ease-in"
     :style="{ opacity }"
     @click="action"
@@ -30,7 +33,7 @@
   </div>
 </template>
 <script>
-import { getBgColorClass, getTextColorClass } from '../colors';
+import { getColorClass } from '../colors';
 
 export default {
   data() {
@@ -62,11 +65,11 @@ export default {
         success: 'green',
       }[this.type];
     },
-    bgColor() {
-      return getBgColorClass(this.color);
+    colorClass() {
+      return getColorClass(this.color, 'border', 300);
     },
     iconColor() {
-      return getTextColorClass(this.color);
+      return getColorClass(this.color, 'text', 400);
     },
   },
   mounted() {
diff --git a/src/pages/Desk.vue b/src/pages/Desk.vue
index e312d19b..1a76b92b 100644
--- a/src/pages/Desk.vue
+++ b/src/pages/Desk.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="flex overflow-hidden">
-    <Sidebar class="w-56 flex-shrink-0" @change-db-file="$emit('change-db-file')"/>
+    <Sidebar
+      class="w-48 flex-shrink-0"
+      @change-db-file="$emit('change-db-file')"
+    />
     <div class="flex flex-1 overflow-y-hidden bg-white">
       <keep-alive>
         <router-view class="flex-1" :key="$route.path" />
@@ -14,6 +17,13 @@
           />
         </keep-alive>
       </div>
+      <div
+        id="toast-container"
+        class="absolute bottom-0 flex flex-col items-center mb-3"
+        style="width: calc(100% - 12rem)"
+      >
+        <div id="toast-target" />
+      </div>
     </div>
   </div>
 </template>
@@ -22,7 +32,7 @@ import Sidebar from '../components/Sidebar';
 export default {
   name: 'Desk',
   components: {
-    Sidebar
+    Sidebar,
   },
   computed: {
     showQuickEdit() {
@@ -31,7 +41,7 @@ export default {
         this.$route.query.doctype &&
         this.$route.query.name
       );
-    }
-  }
+    },
+  },
 };
 </script>