feat: checkbox component

packages/hoppscotch-app/assets/scss/styles.scss

@@ -289,37 +289,6 @@ pre.ace_editor {
   }
 }
 
-input[type="checkbox"].checkbox {
-  @apply hidden;
-
-  &,
-  & + label {
-    @apply align-middle;
-    @apply cursor-pointer;
-
-    &::before {
-      @apply border-divider border-2;
-      @apply rounded;
-      @apply inline-flex;
-      @apply items-center;
-      @apply justify-center;
-      @apply text-transparent;
-      @apply h-4;
-      @apply w-4;
-      @apply font-icon;
-
-      content: "\e876";
-      margin: 8px 8px 8px 0;
-    }
-  }
-
-  &:checked + label::before {
-    @apply bg-accent;
-    @apply border-accent;
-    @apply text-primary;
-  }
-}
-
 .info-response {
   @apply text-pink-500;
 }

packages/hoppscotch-app/components/http/Authorization.vue

@@ -63,19 +63,19 @@
         </tippy>
       </span>
       <div class="flex">
-        <!-- <SmartToggle
+        <!-- <SmartCheckbox
           :on="!URLExcludes.auth"
           @change="setExclude('auth', !$event)"
         >
           {{ $t("authorization.include_in_url") }}
-        </SmartToggle> -->
-        <SmartToggle
+        </SmartCheckbox> -->
+        <SmartCheckbox
           :on="authActive"
           class="px-2"
           @change="authActive = !authActive"
         >
           {{ $t("state.enabled") }}
-        </SmartToggle>
+        </SmartCheckbox>
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           to="https://docs.hoppscotch.io/features/authorization"
@@ -254,7 +254,6 @@ export default defineComponent({
       { authType: "none", authActive: true },
       setRESTAuth
     )
-
     const authType = pluckRef(auth, "authType")
     const authName = computed(() => {
       if (authType.value === "basic") return "Basic Auth"
@@ -263,23 +262,17 @@ export default defineComponent({
       else return "None"
     })
     const authActive = pluckRef(auth, "authActive")
-
     const basicUsername = pluckRef(auth as Ref<HoppRESTAuthBasic>, "username")
     const basicPassword = pluckRef(auth as Ref<HoppRESTAuthBasic>, "password")
-
     const bearerToken = pluckRef(auth as Ref<HoppRESTAuthBearer>, "token")
-
     const oauth2Token = pluckRef(auth as Ref<HoppRESTAuthOAuth2>, "token")
-
     const URLExcludes = useSetting("URL_EXCLUDES")
-
     const clearContent = () => {
       auth.value = {
         authType: "none",
         authActive: true,
       }
     }
-
     return {
       auth,
       authType,

packages/hoppscotch-app/components/smart/Checkbox.vue

@@ -0,0 +1,77 @@
+<template>
+  <div
+    class="
+      cursor-pointer
+      flex-nowrap
+      group
+      inline-flex
+      items-center
+      justify-center
+      transition
+      hover:text-secondaryDark
+    "
+    @click="$emit('change')"
+  >
+    <input
+      id="checkbox"
+      type="checkbox"
+      name="checkbox"
+      :checked="on"
+      @change="$emit('change')"
+    />
+    <label
+      for="checkbox"
+      class="cursor-pointer pl-0 align-middle font-semibold"
+    >
+      <slot></slot>
+    </label>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
+  props: {
+    on: {
+      type: Boolean,
+      default: false,
+    },
+  },
+})
+</script>
+
+<style scoped lang="scss">
+input[type="checkbox"] {
+  @apply appearance-none;
+  @apply hidden;
+
+  & + label {
+    @apply inline-flex items-center justify-center;
+    @apply cursor-pointer;
+
+    &::before {
+      @apply border-divider border-2;
+      @apply rounded;
+      @apply group-hover:border-accentDark;
+      @apply inline-flex;
+      @apply items-center;
+      @apply justify-center;
+      @apply text-transparent;
+      @apply h-4;
+      @apply w-4;
+      @apply font-icon;
+      @apply mr-3;
+      @apply transition;
+
+      content: "\e876";
+    }
+  }
+
+  &:checked + label::before {
+    @apply bg-accent;
+    @apply border-accent;
+    @apply text-accentContrast;
+  }
+}
+</style>