fix(ui): center toasts

- wider toasts
- narrower sidebar

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>
 

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(' ');

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);
     },
   },
 };

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() {

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>