@saasmakers/ui 1.4.0 → 1.4.2

package/app/components/bases/BaseToast.vue

@@ -30,7 +30,7 @@ function onClose(event: KeyboardEvent | MouseEvent) {
 
 <template>
   <div
-    class="group flex select-none items-center rounded-full bg-gray-900 px-3 py-2 text-base text-white font-normal dark:bg-gray-100 dark:text-black"
+    class="group flex select-none items-center rounded-full bg-gray-900 px-3 py-2 text-base text-white font-normal dark:bg-gray-800 dark:text-gray-100 dark:ring-1 dark:ring-gray-700"
     :class="{ 'cursor-pointer': hasClose }"
     role="button"
     tabindex="0"
@@ -44,40 +44,38 @@ function onClose(event: KeyboardEvent | MouseEvent) {
       :text="text"
     />
 
-    <template v-if="action">
-      <div class="ml-2 mr-1.5 h-5 border-l border-gray-700 flex-initial dark:border-gray-300" />
-
-      <button
-        class="cursor-pointer bg-transparent flex-initial"
-        type="button"
-        @click.stop="onAction"
-      >
-        <BaseText
-          bold
-          class="pointer-events-none"
-          :class="{
-            'text-red-400 dark:text-red-600': status === 'error',
-            'text-indigo-400 dark:text-indigo-600': status === 'info',
-            'text-orange-400 dark:text-orange-600': status === 'warning',
-            'text-teal-400 dark:text-teal-600': status === 'success',
-          }"
-          no-wrap
-          :text="action.label"
-          uppercase
-        />
-      </button>
-    </template>
+    <button
+      v-if="action"
+      class="ml-2 rounded-full px-2 py-0.5 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-offset-gray-900 dark:focus-visible:ring-offset-gray-800"
+      :class="{
+        'bg-red-600/20 text-red-400 hover:bg-red-600/30 focus-visible:ring-red-500 dark:bg-red-400/15 dark:text-red-400 dark:hover:bg-red-400/25': status === 'error',
+        'bg-indigo-600/20 text-indigo-400 hover:bg-indigo-600/30 focus-visible:ring-indigo-500 dark:bg-indigo-400/15 dark:text-indigo-400 dark:hover:bg-indigo-400/25': status === 'info',
+        'bg-green-600/20 text-green-400 hover:bg-green-600/30 focus-visible:ring-green-500 dark:bg-green-400/15 dark:text-green-400 dark:hover:bg-green-400/25': status === 'success',
+        'bg-orange-600/20 text-orange-400 hover:bg-orange-600/30 focus-visible:ring-orange-500 dark:bg-orange-400/15 dark:text-orange-400 dark:hover:bg-orange-400/25': status === 'warning',
+      }"
+      type="button"
+      @click.stop="onAction"
+    >
+      <BaseText
+        bold
+        class="pointer-events-none"
+        no-wrap
+        size="sm"
+        :text="action.label"
+        uppercase
+      />
+    </button>
 
     <template v-if="hasClose">
-      <div class="ml-2 mr-1.5 h-5 border-l border-gray-700 flex-initial dark:border-gray-300" />
+      <div class="ml-2 mr-1.5 h-5 border-l border-gray-700 flex-initial dark:border-gray-600" />
 
       <BaseIcon
         class="text-gray-500 flex-initial dark:text-gray-500"
         :class="{
           'group-hover:text-red-600 dark:group-hover:text-red-400': status === 'error',
           'group-hover:text-indigo-600 dark:group-hover:text-indigo-400': status === 'info',
+          'group-hover:text-green-600 dark:group-hover:text-green-400': status === 'success',
           'group-hover:text-orange-600 dark:group-hover:text-orange-400': status === 'warning',
-          'group-hover:text-teal-600 dark:group-hover:text-teal-400': status === 'success',
         }"
         :icon="getIcon('close')"
       />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saasmakers/ui",
-  "version": "1.4.0",
+  "version": "1.4.2",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
   "license": "MIT",