feat: refactor modal component

assets/scss/styles.scss

@@ -303,12 +303,13 @@ input[type="checkbox"] {
 .toasted-container {
   .toasted {
     &.toasted-primary {
-      @apply px-6 py-1;
       @apply bg-tooltip;
       @apply text-primary text-xs;
       @apply !font-semibold;
+      @apply justify-start;
 
       .action {
+        @apply ml-auto;
         @apply transition;
         @apply text-current;
         @apply hover:(opacity-75 no-underline);
@@ -317,15 +318,16 @@ input[type="checkbox"] {
 
     &.info {
       @apply !bg-accent;
-      @apply !text-white;
     }
 
     &.error {
-      @apply !text-white;
+      @apply !bg-red-400;
+      @apply !text-red-800;
     }
 
     &.success {
-      @apply !text-white;
+      @apply !bg-green-400;
+      @apply !text-green-800;
     }
   }
 }

assets/scss/themes.scss

@@ -82,7 +82,7 @@
   // Tooltip color
   --tooltip-color: theme("colors.true-gray.100");
   // Editor theme
-  --editor-theme: "vibrant_ink";
+  --editor-theme: "twilight";
 }
 
 @mixin blueTheme {

components/app/SlideOver.vue

@@ -1,18 +1,7 @@
 <template>
   <div>
-    <transition
+    <transition v-if="show" name="fade" appear>
-      enter-class="opacity-0"
+      <div class="inset-0 transition-opacity z-20 fixed" @keydown.esc="close()">
-      enter-active-class="ease-out transition"
-      enter-to-class="opacity-100"
-      leave-class="opacity-100"
-      leave-active-class="ease-out transition"
-      leave-to-class="opacity-0"
-    >
-      <div
-        v-if="show"
-        class="inset-0 transition-opacity z-20 fixed"
-        @keydown.esc="close()"
-      >
         <div
           class="bg-primaryDark opacity-75 inset-0 absolute"
           tabindex="0"

components/button/Primary.vue

@@ -15,7 +15,7 @@
     :class="[
       color
         ? `text-${color}-800 bg-${color}-200 hover:text-${color}-900 hover:bg-${color}-300 focus:text-${color}-900 focus:bg-${color}-300`
-        : `text-white bg-accent hover:bg-accentDark focus:bg-accentDark`,
+        : `text-primary bg-accent hover:bg-accentDark focus:bg-accentDark`,
       label ? 'px-4' : 'px-2',
       rounded ? 'rounded-full' : 'rounded',
       { 'opacity-75 cursor-not-allowed': disabled },

components/firebase/Login.vue

@@ -1,5 +1,5 @@
 <template>
-  <SmartModal v-if="show" @close="hideModal">
+  <SmartModal v-if="show" dialog @close="hideModal">
     <template #header>
       <h3 class="heading">{{ $t("login_to_hoppscotch") }}</h3>
       <div>

components/smart/Modal.vue

@@ -1,51 +1,66 @@
 <template>
-  <transition name="modal" appear @leave="onTransitionLeaveStart">
+  <transition name="fade" appear @leave="onTransitionLeaveStart">
     <div
       ref="modal"
-      class="
+      class="inset-0 transition z-10 z-50 fixed hide-scrollbar overflow-y-auto"
-        bg-primaryDark
-        flex
-        h-full
-        w-full
-        inset-0
-        transition
-        z-50
-        fixed
-        items-center
-        justify-center
-      "
-      @touchstart="onBackdropMouseDown"
-      @touchend="onBackdropMouseUp"
-      @mouseup="onBackdropMouseUp"
-      @mousedown="onBackdropMouseDown"
     >
       <div
-        class="
+        class="flex min-h-screen text-center items-end justify-center sm:block"
-          bg-primary
-          rounded
-          flex flex-col
-          max-w-md max-h-lg
-          flex-1
-          m-2
-          shadow-xl
-          p-4
-          transition
-          modal-container
-          relative
-        "
       >
-        <div class="flex pl-2 items-center justify-between">
+        <transition name="fade" appear>
-          <slot name="header"></slot>
+          <div
-        </div>
+            class="bg-primaryDark inset-0 transition-opacity fixed"
-        <div class="flex flex-col my-4 overflow-auto">
+            @touchstart="!dialog ? close() : null"
-          <slot name="body"></slot>
+            @touchend="!dialog ? close() : null"
-        </div>
+            @mouseup="!dialog ? close() : null"
-        <div
+            @mousedown="!dialog ? close() : null"
-          v-if="hasFooterSlot"
+          ></div>
-          class="flex flex-1 p-2 items-center justify-between"
+        </transition>
+        <span
+          class="hidden sm:inline-block sm:align-middle sm:h-screen"
+          aria-hidden="true"
+          >&#8203;</span
         >
-          <slot name="footer"></slot>
+        <transition
-        </div>
+          appear
+          enter-active-class="transition"
+          enter-class="translate-y-4 scale-95"
+          enter-to-class="translate-y-0 scale-100"
+          leave-active-class="transition"
+          leave-class="translate-y-0 scale-100"
+          leave-to-class="translate-y-4 scale-95"
+        >
+          <div
+            class="
+              bg-primary
+              rounded
+              shadow-xl
+              m-4
+              text-left
+              w-full
+              p-4
+              transform
+              transition-all
+              inline-block
+              align-bottom
+              overflow-hidden
+              sm:align-middle sm:max-w-md
+            "
+          >
+            <div class="flex pl-2 items-center justify-between">
+              <slot name="header"></slot>
+            </div>
+            <div class="flex flex-col my-4 overflow-auto">
+              <slot name="body"></slot>
+            </div>
+            <div
+              v-if="hasFooterSlot"
+              class="flex flex-1 p-2 items-center justify-between"
+            >
+              <slot name="footer"></slot>
+            </div>
+          </div>
+        </transition>
       </div>
     </div>
   </transition>
@@ -64,10 +79,15 @@ const stack = (() => {
 })()
 
 export default {
+  props: {
+    dialog: {
+      type: Boolean,
+      default: false,
+    },
+  },
   data() {
     return {
       stackId: Math.random(),
-      shouldCloseOnBackdropClick: true,
       // when doesn't fire on unmount, we should manually remove the modal from DOM
       // (for example, when the parent component of this modal gets destroyed)
       shouldCleanupDomOnUnmount: true,
@@ -96,22 +116,6 @@ export default {
     close() {
       this.$emit("close")
     },
-    onBackdropMouseDown({ target }) {
-      this.shouldCloseOnBackdropClick =
-        !this.checkIfTargetInsideModalContent(target)
-    },
-    onBackdropMouseUp({ target }) {
-      if (
-        this.shouldCloseOnBackdropClick &&
-        !this.checkIfTargetInsideModalContent(target)
-      ) {
-        this.close()
-      }
-      this.shouldCloseOnBackdropClick = true
-    },
-    checkIfTargetInsideModalContent($target) {
-      return $target?.closest(".modal-container")
-    },
     onKeyDown(e) {
       if (e.key === "Escape" && this.stackId === stack.peek()) {
         e.preventDefault()
@@ -134,17 +138,3 @@ export default {
   },
 }
 </script>
-
-<style scoped lang="scss">
-.modal-enter,
-.modal-leave-active {
-  @apply opacity-0;
-}
-
-.modal-enter .modal-container,
-.modal-leave-active .modal-container {
-  @apply transform;
-  @apply scale-90;
-  @apply transition;
-}
-</style>

lang/en-US.json

@@ -178,7 +178,6 @@
   "cancelled": "Cancelled",
   "save": "Save",
   "dismiss": "Dismiss",
-  "are_you_sure": "Are you sure?",
   "yes": "Yes",
   "no": "No",
   "restore": "Restore",
@@ -277,11 +276,13 @@
   "tests": "Tests",
   "create_new_collection": "Create new collection",
   "create_new_environment": "Create new environment",
-  "are_you_sure_remove_history": "Are you sure you want to remove all History?",
+  "are_you_sure": "Are you sure?",
-  "are_you_sure_remove_collection": "Are you sure you want to remove this Collection?",
+  "are_you_sure_logout": "Are you sure you want to logout?",
-  "are_you_sure_remove_folder": "Are you sure you want to remove this folder?",
+  "are_you_sure_remove_history": "Are you sure you want to permanently delete all history?",
-  "are_you_sure_remove_request": "Are you sure you want to remove this request?",
+  "are_you_sure_remove_collection": "Are you sure you want to permanently delete this collection?",
-  "are_you_sure_remove_environment": "Are you sure you want to remove this environment?",
+  "are_you_sure_remove_folder": "Are you sure you want to permanently delete this folder?",
+  "are_you_sure_remove_request": "Are you sure you want to permanently delete this request?",
+  "are_you_sure_remove_environment": "Are you sure you want to permanently delete this environment?",
   "are_you_sure_remove_telemetry": "Are you sure you want to opt-out of Telemetry?",
   "telemetry_helps_us": "Telemetry helps us to personalize our operations and deliver the best experience to you.",
   "select_next_method": "Select Next method",
@@ -344,7 +345,6 @@
   "share": "Share",
   "interceptor": "Interceptor",
   "profile": "Profile",
-  "are_you_sure_logout": "Are you sure you want to logout?",
   "telemetry": "Telemetry",
   "shortcuts_indicator": "Shortcuts indicator",
   "zen_mode": "Zen mode",

pages/graphql.vue

@@ -1177,7 +1177,7 @@ export default defineComponent({
         this.$refs.queryEditor.setValidationSchema(schema)
         this.$nuxt.$loading.finish()
         const duration = Date.now() - startTime
-        this.$toast.info(this.$t("finished_in", { duration }), {
+        this.$toast.success(this.$t("finished_in", { duration }), {
           icon: "done",
         })
       } catch (error) {