☁️ Export to hub frontend

argilla-frontend/assets/scss/abstract/placeholders/_tooltip.scss

@@ -115,7 +115,7 @@ $tooltip-border-radius: $border-radius-s;
       height: auto;
       opacity: 1;
       transition: opacity 0.3s ease 0.2s;
-      z-index: 2;
+      z-index: 3;
     }
     &:before {
       opacity: 1;

argilla-frontend/components/base/base-resizable/useResizable.ts

@@ -17,7 +17,7 @@ export const useResizable = ({ id }: { id: string }) => {
 
     await debounce.wait();
 
-    const layout = get("layout");
+    const layout = get<Record<string, unknown>>("layout");
 
     set("layout", {
       ...layout,

argilla-frontend/components/base/base-switch/BaseSwitch.vue

@@ -18,13 +18,13 @@
 <template>
   <div
     :class="{ disabled: !checked, 'disable-action': disableAction }"
-    class="re-switch"
+    class="switch"
   >
-    <label v-if="$slots.default" :for="id || name" class="re-switch-label">
+    <label v-if="$slots.default" :for="id || name" class="switch-label">
       <slot />
     </label>
-    <div class="re-switch-container" @click="toggle($event)">
-      <div class="re-switch-thumb" :style="styles">
+    <div class="switch-container" @click="toggle($event)">
+      <div class="switch-thumb" :style="styles">
         <input
           :id="id"
           type="checkbox"
@@ -33,7 +33,7 @@
           :value="value"
           tabindex="-1"
         />
-        <button :type="type" class="re-switch-holder">
+        <button :type="type" class="switch-holder">
           <svgicon width="10" height="10" name="check" color="white"></svgicon>
         </button>
       </div>
@@ -120,41 +120,41 @@ export default {
 $switch-width: 28px;
 $switch-height: 11px;
 $switch-thumb-size: 18px;
-.re-switch {
+.switch {
   display: flex;
   align-items: center;
   position: relative;
   &.disabled {
     svg {
       display: none;
     }
-    .re-switch-thumb {
+    .switch-thumb {
       background-color: #f0f0f0 !important;
     }
   }
   &.disable-action {
     opacity: 0.5;
     pointer-events: none;
     cursor: default;
-    .re-switch-thumb {
+    .switch-thumb {
       background-color: var(--color-white) !important;
       transform: translate3d(-1px, -50%, 0px) !important;
     }
     &:active {
-      .re-switch-thumb {
+      .switch-thumb {
         transform: translate3d(50%, -50%, 0px) !important;
       }
     }
   }
-  .re-switch-container {
+  .switch-container {
     width: $switch-width;
     height: $switch-height;
     position: relative;
     border-radius: $switch-height;
     transition: $swift-ease-out;
     background-color: var(--bg-opacity-20);
     cursor: pointer;
-    .re-switch-thumb {
+    .switch-thumb {
       width: $switch-thumb-size;
       height: $switch-thumb-size;
       position: absolute;
@@ -168,7 +168,7 @@ $switch-thumb-size: 18px;
       position: absolute;
       left: -999em;
     }
-    .re-switch-holder {
+    .switch-holder {
       @include absoluteCenter;
       width: $switch-thumb-size;
       height: $switch-thumb-size;
@@ -183,9 +183,9 @@ $switch-thumb-size: 18px;
       }
     }
   }
-  .re-switch-label {
+  .switch-label {
     margin-right: 1em;
-    color: var(--fg-secondary);
+    color: var(--fg-primary);
   }
 }
 </style>

argilla-frontend/components/base/base-toast/api.ts

@@ -22,87 +22,18 @@ import eventBus from "./bus";
 export const toast = (globalOptions = {}) => {
   return {
     open(options) {
-      let message;
-      if (typeof options === "string") message = options;
-
-      const defaultOptions = {
-        message,
+      const props = {
+        ...globalOptions,
+        ...options,
       };
 
-      const propsData = Object.assign(
-        {},
-        defaultOptions,
-        globalOptions,
-        options
-      );
-
       return new (Vue.extend(Toast))({
         el: document.createElement("div"),
-        propsData,
+        propsData: props,
       });
     },
     clear() {
       eventBus.$emit("toast.clear");
     },
-    success(message, options = {}) {
-      return this.open(
-        Object.assign(
-          {},
-          {
-            message,
-            type: "success",
-          },
-          options
-        )
-      );
-    },
-    danger(message, options = {}) {
-      return this.open(
-        Object.assign(
-          {},
-          {
-            message,
-            type: "danger",
-          },
-          options
-        )
-      );
-    },
-    info(message, options = {}) {
-      return this.open(
-        Object.assign(
-          {},
-          {
-            message,
-            type: "info",
-          },
-          options
-        )
-      );
-    },
-    warning(message, options = {}) {
-      return this.open(
-        Object.assign(
-          {},
-          {
-            message,
-            type: "warning",
-          },
-          options
-        )
-      );
-    },
-    default(message, options = {}) {
-      return this.open(
-        Object.assign(
-          {},
-          {
-            message,
-            type: "default",
-          },
-          options
-        )
-      );
-    },
   };
 };