btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

refactor: sort classes

Browse Source
This commit is contained in:
liyasthomas
2021-12-31 20:05:39 +05:30
parent 80956fbd27
commit b343789554
62 changed files with 349 additions and 352 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
packages/hoppscotch-app/assets/scss/styles.scss
View File

@@ -1,7 +1,9 @@
*, * {
*::before,
*::after {
@apply backface-hidden; @apply backface-hidden;
@apply before:backface-hidden;
@apply after:backface-hidden;
@apply selection:bg-accentDark;
@apply selection:text-accentContrast;
} }
:root { :root {
@@ -37,11 +39,6 @@
@apply hidden; @apply hidden;
} }
::selection {
@apply bg-accentDark;
@apply text-accentContrast;
}
input::placeholder, input::placeholder,
textarea::placeholder { textarea::placeholder {
@apply text-secondary; @apply text-secondary;
@@ -457,8 +454,8 @@ pre.ace_editor {
@apply px-1; @apply px-1;
} }
.capitalize-first::first-letter { .capitalize-first {
@apply capitalize; @apply first-letter:capitalize;
} }
@media (max-width: 767px) { @media (max-width: 767px) {

2
packages/hoppscotch-app/components/app/Announcement.vue
View File

@@ -7,7 +7,7 @@
<span class="md:hidden"> <span class="md:hidden">
{{ t("helpers.offline_short") }} {{ t("helpers.offline_short") }}
</span> </span>
<span class="hidden md:inline"> <span class="<md:hidden">
{{ t("helpers.offline") }} {{ t("helpers.offline") }}
</span> </span>
</span> </span>

2
packages/hoppscotch-app/components/app/Header.vue
View File

@@ -9,7 +9,7 @@
label="HOPPSCOTCH" label="HOPPSCOTCH"
to="/" to="/"
/> />
<AppGitHubStarButton class="mt-1.5 transition hidden sm:flex" /> <AppGitHubStarButton class="mt-1.5 transition <sm:hidden" />
</div> </div>
<div class="inline-flex items-center space-x-2"> <div class="inline-flex items-center space-x-2">
<ButtonSecondary <ButtonSecondary

18
packages/hoppscotch-app/components/environments/Edit.vue
View File

@@ -6,7 +6,7 @@
> >
<template #body> <template #body>
<div class="flex flex-col px-2"> <div class="flex flex-col px-2">
<div class="flex relative"> <div class="relative flex">
<input <input
id="selectLabelEnvEdit" id="selectLabelEnvEdit"
v-model="name" v-model="name"
@@ -22,7 +22,7 @@
{{ $t("action.label") }} {{ $t("action.label") }}
</label> </label>
</div> </div>
<div class="flex flex-1 items-center justify-between"> <div class="flex items-center justify-between flex-1">
<label for="variableList" class="p-4"> <label for="variableList" class="p-4">
{{ $t("environment.variable_list") }} {{ $t("environment.variable_list") }}
</label> </label>
@@ -41,21 +41,21 @@
/> />
</div> </div>
</div> </div>
<div class="divide-dividerLight divide-y border border-divider rounded"> <div class="border divide-y rounded divide-dividerLight border-divider">
<div <div
v-for="(variable, index) in vars" v-for="(variable, index) in vars"
:key="`variable-${index}`" :key="`variable-${index}`"
class="divide-dividerLight divide-x flex" class="flex divide-x divide-dividerLight"
> >
<input <input
v-model="variable.key" v-model="variable.key"
class="bg-transparent flex flex-1 py-2 px-4" class="flex flex-1 px-4 py-2 bg-transparent"
:placeholder="`${$t('count.variable', { count: index + 1 })}`" :placeholder="`${$t('count.variable', { count: index + 1 })}`"
:name="'param' + index" :name="'param' + index"
/> />
<input <input
v-model="variable.value" v-model="variable.value"
class="bg-transparent flex flex-1 py-2 px-4" class="flex flex-1 px-4 py-2 bg-transparent"
:placeholder="`${$t('count.value', { count: index + 1 })}`" :placeholder="`${$t('count.value', { count: index + 1 })}`"
:name="'value' + index" :name="'value' + index"
/> />
@@ -72,15 +72,15 @@
</div> </div>
<div <div
v-if="vars.length === 0" v-if="vars.length === 0"
class="flex flex-col text-secondaryLight p-4 items-center justify-center" class="flex flex-col items-center justify-center p-4 text-secondaryLight"
> >
<img <img
:src="`/images/states/${$colorMode.value}/blockchain.svg`" :src="`/images/states/${$colorMode.value}/blockchain.svg`"
loading="lazy" loading="lazy"
class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex" class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
:alt="`${$t('empty.environments')}`" :alt="`${$t('empty.environments')}`"
/> />
<span class="text-center pb-4"> <span class="pb-4 text-center">
{{ $t("empty.environments") }} {{ $t("empty.environments") }}
</span> </span>
<ButtonSecondary <ButtonSecondary

4
packages/hoppscotch-app/components/environments/Environment.vue
View File

@@ -4,13 +4,13 @@
@contextmenu.prevent="options.tippy().show()" @contextmenu.prevent="options.tippy().show()"
> >
<span <span
class="cursor-pointer flex px-4 items-center justify-center" class="flex items-center justify-center px-4 cursor-pointer"
@click="$emit('edit-environment')" @click="$emit('edit-environment')"
> >
<SmartIcon class="svg-icons" name="layers" /> <SmartIcon class="svg-icons" name="layers" />
</span> </span>
<span <span
class="cursor-pointer flex flex-1 min-w-0 py-2 pr-2 transition group-hover:text-secondaryDark" class="flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer group-hover:text-secondaryDark"
@click="$emit('edit-environment')" @click="$emit('edit-environment')"
> >
<span class="truncate"> <span class="truncate">

2
packages/hoppscotch-app/components/environments/ImportExport.vue
View File

@@ -57,7 +57,7 @@
</span> </span>
</template> </template>
<template #body> <template #body>
<div class="flex flex-col space-y-2 px-2"> <div class="flex flex-col px-2 space-y-2">
<SmartItem <SmartItem
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="t('action.preserve_current')" :title="t('action.preserve_current')"

16
packages/hoppscotch-app/components/environments/index.vue
View File

@@ -1,22 +1,22 @@
<template> <template>
<div> <div>
<div class="bg-primary rounded-t flex flex-col top-0 z-10 sticky"> <div class="sticky top-0 z-10 flex flex-col rounded-t bg-primary">
<tippy ref="options" interactive trigger="click" theme="popover" arrow> <tippy ref="options" interactive trigger="click" theme="popover" arrow>
<template #trigger> <template #trigger>
<span <span
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="`${$t('environment.select')}`" :title="`${$t('environment.select')}`"
class="bg-transparent border-b border-dividerLight flex-1 select-wrapper" class="flex-1 bg-transparent border-b border-dividerLight select-wrapper"
> >
<ButtonSecondary <ButtonSecondary
v-if="selectedEnvironmentIndex !== -1" v-if="selectedEnvironmentIndex !== -1"
:label="environments[selectedEnvironmentIndex].name" :label="environments[selectedEnvironmentIndex].name"
class="rounded-none flex-1 pr-8" class="flex-1 pr-8 rounded-none"
/> />
<ButtonSecondary <ButtonSecondary
v-else v-else
:label="`${$t('environment.no_environment')}`" :label="`${$t('environment.no_environment')}`"
class="rounded-none flex-1 pr-8" class="flex-1 pr-8 rounded-none"
/> />
</span> </span>
</template> </template>
@@ -45,7 +45,7 @@
" "
/> />
</tippy> </tippy>
<div class="border-b border-dividerLight flex flex-1 justify-between"> <div class="flex justify-between flex-1 border-b border-dividerLight">
<ButtonSecondary <ButtonSecondary
svg="plus" svg="plus"
:label="`${$t('action.new')}`" :label="`${$t('action.new')}`"
@@ -86,15 +86,15 @@
</div> </div>
<div <div
v-if="environments.length === 0" v-if="environments.length === 0"
class="flex flex-col text-secondaryLight p-4 items-center justify-center" class="flex flex-col items-center justify-center p-4 text-secondaryLight"
> >
<img <img
:src="`/images/states/${$colorMode.value}/blockchain.svg`" :src="`/images/states/${$colorMode.value}/blockchain.svg`"
loading="lazy" loading="lazy"
class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex" class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
:alt="`${$t('empty.environments')}`" :alt="`${$t('empty.environments')}`"
/> />
<span class="text-center pb-4"> <span class="pb-4 text-center">
{{ $t("empty.environments") }} {{ $t("empty.environments") }}
</span> </span>
<ButtonSecondary <ButtonSecondary

8
packages/hoppscotch-app/components/firebase/Login.vue
View File

@@ -7,7 +7,7 @@
@close="hideModal" @close="hideModal"
> >
<template #body> <template #body>
<div v-if="mode === 'sign-in'" class="flex flex-col space-y-2 px-2"> <div v-if="mode === 'sign-in'" class="flex flex-col px-2 space-y-2">
<SmartItem <SmartItem
:loading="signingInWithGitHub" :loading="signingInWithGitHub"
svg="auth/github" svg="auth/github"
@@ -56,8 +56,8 @@
/> />
</form> </form>
<div v-if="mode === 'email-sent'" class="flex flex-col px-4"> <div v-if="mode === 'email-sent'" class="flex flex-col px-4">
<div class="flex flex-col max-w-md items-center justify-center"> <div class="flex flex-col items-center justify-center max-w-md">
<SmartIcon class="h-6 text-accent w-6" name="inbox" /> <SmartIcon class="w-6 h-6 text-accent" name="inbox" />
<h3 class="my-2 text-lg text-center"> <h3 class="my-2 text-lg text-center">
{{ $t("auth.we_sent_magic_link") }} {{ $t("auth.we_sent_magic_link") }}
</h3> </h3>
@@ -95,7 +95,7 @@
</p> </p>
<p <p
v-if="mode === 'email-sent'" v-if="mode === 'email-sent'"
class="flex flex-1 text-secondaryLight justify-between" class="flex justify-between flex-1 text-secondaryLight"
> >
<SmartAnchor <SmartAnchor
class="link" class="link"

8
packages/hoppscotch-app/components/graphql/Field.vue
View File

@@ -21,19 +21,19 @@
</div> </div>
<div <div
v-if="gqlField.description" v-if="gqlField.description"
class="text-secondaryLight py-2 field-desc" class="py-2 text-secondaryLight field-desc"
> >
{{ gqlField.description }} {{ gqlField.description }}
</div> </div>
<div <div
v-if="gqlField.isDeprecated" v-if="gqlField.isDeprecated"
class="rounded bg-yellow-200 my-1 text-black py-1 px-2 inline-block field-deprecated" class="inline-block px-2 py-1 my-1 text-black bg-yellow-200 rounded field-deprecated"
> >
{{ $t("state.deprecated") }} {{ $t("state.deprecated") }}
</div> </div>
<div v-if="fieldArgs.length > 0"> <div v-if="fieldArgs.length > 0">
<h5 class="my-2">Arguments:</h5> <h5 class="my-2">Arguments:</h5>
<div class="border-divider border-l-2 pl-4"> <div class="pl-4 border-l-2 border-divider">
<div v-for="(field, index) in fieldArgs" :key="`field-${index}`"> <div v-for="(field, index) in fieldArgs" :key="`field-${index}`">
<span> <span>
{{ field.name }}: {{ field.name }}:
@@ -44,7 +44,7 @@
</span> </span>
<div <div
v-if="field.description" v-if="field.description"
class="text-secondaryLight py-2 field-desc" class="py-2 text-secondaryLight field-desc"
> >
{{ field.description }} {{ field.description }}
</div> </div>

6
packages/hoppscotch-app/components/graphql/Request.vue
View File

@@ -1,13 +1,13 @@
<template> <template>
<div class="bg-primary flex p-4 top-0 z-10 sticky"> <div class="sticky top-0 z-10 flex p-4 bg-primary">
<div class="space-x-2 flex-1 inline-flex"> <div class="inline-flex flex-1 space-x-2">
<input <input
id="url" id="url"
v-model="url" v-model="url"
type="url" type="url"
autocomplete="off" autocomplete="off"
spellcheck="false" spellcheck="false"
class="bg-primaryLight border border-divider rounded text-secondaryDark w-full py-2 px-4 hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark" class="w-full px-4 py-2 border rounded bg-primaryLight border-divider text-secondaryDark hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark"
:placeholder="`${t('request.url')}`" :placeholder="`${t('request.url')}`"
:disabled="connected" :disabled="connected"
@keyup.enter="onConnectClick" @keyup.enter="onConnectClick"

16
packages/hoppscotch-app/components/graphql/RequestOptions.vue
View File

@@ -8,7 +8,7 @@
:indicator="gqlQueryString && gqlQueryString.length > 0 ? true : false" :indicator="gqlQueryString && gqlQueryString.length > 0 ? true : false"
> >
<div <div
class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between gqlRunQuery" class="sticky z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold gqlRunQuery"
> >
<label class="font-semibold text-secondaryLight"> <label class="font-semibold text-secondaryLight">
{{ t("request.query") }} {{ t("request.query") }}
@@ -71,7 +71,7 @@
:indicator="variableString && variableString.length > 0 ? true : false" :indicator="variableString && variableString.length > 0 ? true : false"
> >
<div <div
class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between" class="sticky z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
> >
<label class="font-semibold text-secondaryLight"> <label class="font-semibold text-secondaryLight">
{{ t("request.variables") }} {{ t("request.variables") }}
@@ -114,7 +114,7 @@
:info="activeGQLHeadersCount === 0 ? null : `${activeGQLHeadersCount}`" :info="activeGQLHeadersCount === 0 ? null : `${activeGQLHeadersCount}`"
> >
<div <div
class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between" class="sticky z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
> >
<label class="font-semibold text-secondaryLight"> <label class="font-semibold text-secondaryLight">
{{ t("tab.headers") }} {{ t("tab.headers") }}
@@ -154,7 +154,7 @@
<div <div
v-for="(header, index) in headers" v-for="(header, index) in headers"
:key="`header-${String(index)}`" :key="`header-${String(index)}`"
class="divide-dividerLight divide-x border-b border-dividerLight flex" class="flex border-b divide-x divide-dividerLight border-dividerLight"
> >
<SmartAutoComplete <SmartAutoComplete
:placeholder="`${t('count.header', { count: index + 1 })}`" :placeholder="`${t('count.header', { count: index + 1 })}`"
@@ -180,7 +180,7 @@
" "
/> />
<input <input
class="bg-transparent flex flex-1 py-2 px-4" class="flex flex-1 px-4 py-2 bg-transparent"
:placeholder="`${t('count.value', { count: index + 1 })}`" :placeholder="`${t('count.value', { count: index + 1 })}`"
:name="`value ${String(index)}`" :name="`value ${String(index)}`"
:value="header.value" :value="header.value"
@@ -232,15 +232,15 @@
</div> </div>
<div <div
v-if="headers.length === 0" v-if="headers.length === 0"
class="flex flex-col text-secondaryLight p-4 items-center justify-center" class="flex flex-col items-center justify-center p-4 text-secondaryLight"
> >
<img <img
:src="`/images/states/${$colorMode.value}/add_category.svg`" :src="`/images/states/${$colorMode.value}/add_category.svg`"
loading="lazy" loading="lazy"
class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex" class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
:alt="`${t('empty.headers')}`" :alt="`${t('empty.headers')}`"
/> />
<span class="text-center pb-4"> <span class="pb-4 text-center">
{{ t("empty.headers") }} {{ t("empty.headers") }}
</span> </span>
<ButtonSecondary <ButtonSecondary

14
packages/hoppscotch-app/components/graphql/Response.vue
View File

@@ -2,14 +2,14 @@
<div> <div>
<div <div
v-if="responseString === 'loading'" v-if="responseString === 'loading'"
class="flex flex-col p-4 items-center justify-center" class="flex flex-col items-center justify-center p-4"
> >
<SmartSpinner class="my-4" /> <SmartSpinner class="my-4" />
<span class="text-secondaryLight">{{ t("state.loading") }}</span> <span class="text-secondaryLight">{{ t("state.loading") }}</span>
</div> </div>
<div v-else-if="responseString"> <div v-else-if="responseString">
<div <div
class="bg-primary border-b border-dividerLight flex flex-1 pl-4 top-0 z-10 sticky items-center justify-between" class="sticky top-0 z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight"
> >
<label class="font-semibold text-secondaryLight"> <label class="font-semibold text-secondaryLight">
{{ t("response.title") }} {{ t("response.title") }}
@@ -42,14 +42,14 @@
</div> </div>
<div <div
v-else v-else
class="flex flex-col flex-1 text-secondaryLight p-4 items-center justify-center" class="flex flex-col items-center justify-center flex-1 p-4 text-secondaryLight"
> >
<div class="flex space-x-2 my-4 pb-4"> <div class="flex pb-4 my-4 space-x-2">
<div class="flex flex-col space-y-4 text-right items-end"> <div class="flex flex-col items-end space-y-4 text-right">
<span class="flex flex-1 items-center"> <span class="flex items-center flex-1">
{{ t("shortcut.general.command_menu") }} {{ t("shortcut.general.command_menu") }}
</span> </span>
<span class="flex flex-1 items-center"> <span class="flex items-center flex-1">
{{ t("shortcut.general.help_menu") }} {{ t("shortcut.general.help_menu") }}
</span> </span>
</div> </div>

26
packages/hoppscotch-app/components/graphql/Sidebar.vue
View File

@@ -33,26 +33,26 @@
subscriptionFields.length === 0 && subscriptionFields.length === 0 &&
graphqlTypes.length === 0 graphqlTypes.length === 0
" "
class="flex flex-col text-secondaryLight p-4 items-center justify-center" class="flex flex-col items-center justify-center p-4 text-secondaryLight"
> >
<img <img
:src="`/images/states/${$colorMode.value}/add_comment.svg`" :src="`/images/states/${$colorMode.value}/add_comment.svg`"
loading="lazy" loading="lazy"
class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex" class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
:alt="`${t('empty.documentation')}`" :alt="`${t('empty.documentation')}`"
/> />
<span class="text-center mb-4"> <span class="mb-4 text-center">
{{ t("empty.documentation") }} {{ t("empty.documentation") }}
</span> </span>
</div> </div>
<div v-else> <div v-else>
<div class="bg-primary flex top-0 z-10 sticky"> <div class="sticky top-0 z-10 flex bg-primary">
<input <input
v-model="graphqlFieldsFilterText" v-model="graphqlFieldsFilterText"
type="search" type="search"
autocomplete="off" autocomplete="off"
:placeholder="`${t('action.search')}`" :placeholder="`${t('action.search')}`"
class="bg-transparent flex w-full p-4 py-2" class="flex w-full p-4 py-2 bg-transparent"
/> />
<div class="flex"> <div class="flex">
<ButtonSecondary <ButtonSecondary
@@ -74,7 +74,7 @@
:id="'queries'" :id="'queries'"
:label="`${t('tab.queries')}`" :label="`${t('tab.queries')}`"
:selected="true" :selected="true"
class="divide-dividerLight divide-y" class="divide-y divide-dividerLight"
> >
<GraphqlField <GraphqlField
v-for="(field, index) in filteredQueryFields" v-for="(field, index) in filteredQueryFields"
@@ -88,7 +88,7 @@
v-if="mutationFields.length > 0" v-if="mutationFields.length > 0"
:id="'mutations'" :id="'mutations'"
:label="`${t('graphql.mutations')}`" :label="`${t('graphql.mutations')}`"
class="divide-dividerLight divide-y" class="divide-y divide-dividerLight"
> >
<GraphqlField <GraphqlField
v-for="(field, index) in filteredMutationFields" v-for="(field, index) in filteredMutationFields"
@@ -102,7 +102,7 @@
v-if="subscriptionFields.length > 0" v-if="subscriptionFields.length > 0"
:id="'subscriptions'" :id="'subscriptions'"
:label="`${t('graphql.subscriptions')}`" :label="`${t('graphql.subscriptions')}`"
class="divide-dividerLight divide-y" class="divide-y divide-dividerLight"
> >
<GraphqlField <GraphqlField
v-for="(field, index) in filteredSubscriptionFields" v-for="(field, index) in filteredSubscriptionFields"
@@ -117,7 +117,7 @@
:id="'types'" :id="'types'"
ref="typesTab" ref="typesTab"
:label="`${t('tab.types')}`" :label="`${t('tab.types')}`"
class="divide-dividerLight divide-y" class="divide-y divide-dividerLight"
> >
<GraphqlType <GraphqlType
v-for="(type, index) in filteredGraphqlTypes" v-for="(type, index) in filteredGraphqlTypes"
@@ -137,7 +137,7 @@
<SmartTab :id="'schema'" icon="box" :label="`${t('tab.schema')}`"> <SmartTab :id="'schema'" icon="box" :label="`${t('tab.schema')}`">
<div <div
v-if="schemaString" v-if="schemaString"
class="bg-primary border-b border-dividerLight flex flex-1 pl-4 top-0 z-10 sticky items-center justify-between" class="sticky top-0 z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight"
> >
<label class="font-semibold text-secondaryLight"> <label class="font-semibold text-secondaryLight">
{{ t("graphql.schema") }} {{ t("graphql.schema") }}
@@ -176,15 +176,15 @@
<div v-if="schemaString" ref="schemaEditor"></div> <div v-if="schemaString" ref="schemaEditor"></div>
<div <div
v-else v-else
class="flex flex-col text-secondaryLight p-4 items-center justify-center" class="flex flex-col items-center justify-center p-4 text-secondaryLight"
> >
<img <img
:src="`/images/states/${$colorMode.value}/blockchain.svg`" :src="`/images/states/${$colorMode.value}/blockchain.svg`"
loading="lazy" loading="lazy"
class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex" class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
:alt="`${t('empty.schema')}`" :alt="`${t('empty.schema')}`"
/> />
<span class="text-center mb-4"> <span class="mb-4 text-center">
{{ t("empty.schema") }} {{ t("empty.schema") }}
</span> </span>
</div> </div>

10
packages/hoppscotch-app/components/graphql/Type.vue
View File

@@ -6,7 +6,7 @@
<span v-else-if="isEnum" class="text-accent">enum </span> <span v-else-if="isEnum" class="text-accent">enum </span>
{{ gqlType.name }} {{ gqlType.name }}
</div> </div>
<div v-if="gqlType.description" class="text-secondaryLight py-2 type-desc"> <div v-if="gqlType.description" class="py-2 text-secondaryLight type-desc">
{{ gqlType.description }} {{ gqlType.description }}
</div> </div>
<div v-if="interfaces.length > 0"> <div v-if="interfaces.length > 0">
@@ -18,7 +18,7 @@
<GraphqlTypeLink <GraphqlTypeLink
:gql-type="gqlInterface" :gql-type="gqlInterface"
:jump-type-callback="jumpTypeCallback" :jump-type-callback="jumpTypeCallback"
class="border-divider border-l-2 pl-4" class="pl-4 border-l-2 border-divider"
/> />
</div> </div>
</div> </div>
@@ -29,7 +29,7 @@
:key="`child-${index}`" :key="`child-${index}`"
:gql-type="child" :gql-type="child"
:jump-type-callback="jumpTypeCallback" :jump-type-callback="jumpTypeCallback"
class="border-divider border-l-2 pl-4" class="pl-4 border-l-2 border-divider"
/> />
</div> </div>
<div v-if="gqlType.getFields"> <div v-if="gqlType.getFields">
@@ -37,7 +37,7 @@
<GraphqlField <GraphqlField
v-for="(field, index) in gqlType.getFields()" v-for="(field, index) in gqlType.getFields()"
:key="`field-${index}`" :key="`field-${index}`"
class="border-divider border-l-2 pl-4" class="pl-4 border-l-2 border-divider"
:gql-field="field" :gql-field="field"
:is-highlighted="isFieldHighlighted({ field })" :is-highlighted="isFieldHighlighted({ field })"
:jump-type-callback="jumpTypeCallback" :jump-type-callback="jumpTypeCallback"
@@ -48,7 +48,7 @@
<div <div
v-for="(value, index) in gqlType.getValues()" v-for="(value, index) in gqlType.getValues()"
:key="`value-${index}`" :key="`value-${index}`"
class="border-divider border-l-2 pl-4" class="pl-4 border-l-2 border-divider"
v-text="value.name" v-text="value.name"
></div> ></div>
</div> </div>

36
packages/hoppscotch-app/components/http/Authorization.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<div <div
class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between" class="sticky z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
> >
<span class="flex items-center"> <span class="flex items-center">
<label class="font-semibold text-secondaryLight"> <label class="font-semibold text-secondaryLight">
@@ -17,7 +17,7 @@
<template #trigger> <template #trigger>
<span class="select-wrapper"> <span class="select-wrapper">
<ButtonSecondary <ButtonSecondary
class="rounded-none ml-2 pr-8" class="pr-8 ml-2 rounded-none"
:label="authName" :label="authName"
/> />
</span> </span>
@@ -130,15 +130,15 @@
</div> </div>
<div <div
v-if="authType === 'none'" v-if="authType === 'none'"
class="flex flex-col text-secondaryLight p-4 items-center justify-center" class="flex flex-col items-center justify-center p-4 text-secondaryLight"
> >
<img <img
:src="`/images/states/${$colorMode.value}/login.svg`" :src="`/images/states/${$colorMode.value}/login.svg`"
loading="lazy" loading="lazy"
class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex" class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
:alt="`${$t('empty.authorization')}`" :alt="`${$t('empty.authorization')}`"
/> />
<span class="text-center pb-4"> <span class="pb-4 text-center">
{{ $t("empty.authorization") }} {{ $t("empty.authorization") }}
</span> </span>
<ButtonSecondary <ButtonSecondary
@@ -151,17 +151,17 @@
class="mb-4" class="mb-4"
/> />
</div> </div>
<div v-else class="border-b border-dividerLight flex"> <div v-else class="flex border-b border-dividerLight">
<div class="border-r border-dividerLight w-2/3"> <div class="w-2/3 border-r border-dividerLight">
<div v-if="authType === 'basic'"> <div v-if="authType === 'basic'">
<div class="border-b border-dividerLight flex"> <div class="flex border-b border-dividerLight">
<SmartEnvInput <SmartEnvInput
v-model="basicUsername" v-model="basicUsername"
:placeholder="$t('authorization.username')" :placeholder="$t('authorization.username')"
styles="bg-transparent flex flex-1 py-1 px-4" styles="bg-transparent flex flex-1 py-1 px-4"
/> />
</div> </div>
<div class="border-b border-dividerLight flex"> <div class="flex border-b border-dividerLight">
<SmartEnvInput <SmartEnvInput
v-model="basicPassword" v-model="basicPassword"
:placeholder="$t('authorization.password')" :placeholder="$t('authorization.password')"
@@ -170,7 +170,7 @@
</div> </div>
</div> </div>
<div v-if="authType === 'bearer'"> <div v-if="authType === 'bearer'">
<div class="border-b border-dividerLight flex"> <div class="flex border-b border-dividerLight">
<SmartEnvInput <SmartEnvInput
v-model="bearerToken" v-model="bearerToken"
placeholder="Token" placeholder="Token"
@@ -179,7 +179,7 @@
</div> </div>
</div> </div>
<div v-if="authType === 'oauth-2'"> <div v-if="authType === 'oauth-2'">
<div class="border-b border-dividerLight flex"> <div class="flex border-b border-dividerLight">
<SmartEnvInput <SmartEnvInput
v-model="oauth2Token" v-model="oauth2Token"
placeholder="Token" placeholder="Token"
@@ -189,22 +189,22 @@
<HttpOAuth2Authorization /> <HttpOAuth2Authorization />
</div> </div>
<div v-if="authType === 'api-key'"> <div v-if="authType === 'api-key'">
<div class="border-b border-dividerLight flex"> <div class="flex border-b border-dividerLight">
<SmartEnvInput <SmartEnvInput
v-model="apiKey" v-model="apiKey"
placeholder="Key" placeholder="Key"
styles="bg-transparent flex flex-1 py-1 px-4" styles="bg-transparent flex flex-1 py-1 px-4"
/> />
</div> </div>
<div class="border-b border-dividerLight flex"> <div class="flex border-b border-dividerLight">
<SmartEnvInput <SmartEnvInput
v-model="apiValue" v-model="apiValue"
placeholder="Value" placeholder="Value"
styles="bg-transparent flex flex-1 py-1 px-4" styles="bg-transparent flex flex-1 py-1 px-4"
/> />
</div> </div>
<div class="border-b border-dividerLight flex items-center"> <div class="flex items-center border-b border-dividerLight">
<label class="text-secondaryLight ml-4"> <label class="ml-4 text-secondaryLight">
{{ $t("authorization.pass_key_by") }} {{ $t("authorization.pass_key_by") }}
</label> </label>
<tippy <tippy
@@ -218,7 +218,7 @@
<span class="select-wrapper"> <span class="select-wrapper">
<ButtonSecondary <ButtonSecondary
:label="addTo || $t('state.none')" :label="addTo || $t('state.none')"
class="rounded-none ml-2 pr-8" class="pr-8 ml-2 rounded-none"
/> />
</span> </span>
</template> </template>
@@ -257,9 +257,9 @@
</div> </div>
</div> </div>
<div <div
class="bg-primary h-full top-upperTertiaryStickyFold min-w-46 max-w-1/3 p-4 z-9 sticky overflow-auto" class="sticky h-full p-4 overflow-auto bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9"
> >
<div class="text-secondaryLight pb-2"> <div class="pb-2 text-secondaryLight">
{{ $t("helpers.authorization") }} {{ $t("helpers.authorization") }}
</div> </div>
<SmartAnchor <SmartAnchor

10
packages/hoppscotch-app/components/http/Body.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<div <div
class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between" class="sticky z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
> >
<span class="flex items-center"> <span class="flex items-center">
<label class="font-semibold text-secondaryLight"> <label class="font-semibold text-secondaryLight">
@@ -18,7 +18,7 @@
<span class="select-wrapper"> <span class="select-wrapper">
<ButtonSecondary <ButtonSecondary
:label="contentType || $t('state.none').toLowerCase()" :label="contentType || $t('state.none').toLowerCase()"
class="rounded-none ml-2 pr-8" class="pr-8 ml-2 rounded-none"
/> />
</span> </span>
</template> </template>
@@ -53,15 +53,15 @@
<HttpRawBody v-else-if="contentType !== null" :content-type="contentType" /> <HttpRawBody v-else-if="contentType !== null" :content-type="contentType" />
<div <div
v-if="contentType == null" v-if="contentType == null"
class="flex flex-col text-secondaryLight p-4 items-center justify-center" class="flex flex-col items-center justify-center p-4 text-secondaryLight"
> >
<img <img
:src="`/images/states/${$colorMode.value}/upload_single_file.svg`" :src="`/images/states/${$colorMode.value}/upload_single_file.svg`"
loading="lazy" loading="lazy"
class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex" class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
:alt="`${$t('empty.body')}`" :alt="`${$t('empty.body')}`"
/> />
<span class="text-center pb-4"> <span class="pb-4 text-center">
{{ $t("empty.body") }} {{ $t("empty.body") }}
</span> </span>
<ButtonSecondary <ButtonSecondary

10
packages/hoppscotch-app/components/http/BodyParameters.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<div <div
class="bg-primary border-b border-dividerLight flex flex-1 top-upperTertiaryStickyFold pl-4 z-10 sticky items-center justify-between" class="sticky z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight top-upperTertiaryStickyFold"
> >
<label class="font-semibold text-secondaryLight"> <label class="font-semibold text-secondaryLight">
{{ $t("request.body") }} {{ $t("request.body") }}
@@ -31,7 +31,7 @@
<div <div
v-for="(param, index) in bodyParams" v-for="(param, index) in bodyParams"
:key="`param-${index}`" :key="`param-${index}`"
class="divide-dividerLight divide-x border-b border-dividerLight flex" class="flex border-b divide-x divide-dividerLight border-dividerLight"
> >
<SmartEnvInput <SmartEnvInput
v-model="param.key" v-model="param.key"
@@ -141,15 +141,15 @@
</div> </div>
<div <div
v-if="bodyParams.length === 0" v-if="bodyParams.length === 0"
class="flex flex-col text-secondaryLight p-4 items-center justify-center" class="flex flex-col items-center justify-center p-4 text-secondaryLight"
> >
<img <img
:src="`/images/states/${$colorMode.value}/upload_single_file.svg`" :src="`/images/states/${$colorMode.value}/upload_single_file.svg`"
loading="lazy" loading="lazy"
class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex" class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
:alt="`${$t('empty.body')}`" :alt="`${$t('empty.body')}`"
/> />
<span class="text-center pb-4"> <span class="pb-4 text-center">
{{ $t("empty.body") }} {{ $t("empty.body") }}
</span> </span>
<ButtonSecondary <ButtonSecondary

4
packages/hoppscotch-app/components/http/CodegenModal.vue
View File

@@ -33,7 +33,7 @@
" "
/> />
</tippy> </tippy>
<div class="flex flex-1 justify-between"> <div class="flex justify-between flex-1">
<label for="generatedCode" class="p-4"> <label for="generatedCode" class="p-4">
{{ t("request.generated_code") }} {{ t("request.generated_code") }}
</label> </label>
@@ -41,7 +41,7 @@
<div <div
v-if="codegenType" v-if="codegenType"
ref="generatedCode" ref="generatedCode"
class="border border-dividerLight rounded" class="border rounded border-dividerLight"
></div> ></div>
</div> </div>
</template> </template>

10
packages/hoppscotch-app/components/http/Headers.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<div <div
class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between" class="sticky z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
> >
<label class="font-semibold text-secondaryLight"> <label class="font-semibold text-secondaryLight">
{{ t("request.header_list") }} {{ t("request.header_list") }}
@@ -41,7 +41,7 @@
<div <div
v-for="(header, index) in headers$" v-for="(header, index) in headers$"
:key="`header-${index}`" :key="`header-${index}`"
class="divide-dividerLight divide-x border-b border-dividerLight flex" class="flex border-b divide-x divide-dividerLight border-dividerLight"
> >
<SmartAutoComplete <SmartAutoComplete
:placeholder="`${t('count.header', { count: index + 1 })}`" :placeholder="`${t('count.header', { count: index + 1 })}`"
@@ -125,15 +125,15 @@
</div> </div>
<div <div
v-if="headers$.length === 0" v-if="headers$.length === 0"
class="flex flex-col text-secondaryLight p-4 items-center justify-center" class="flex flex-col items-center justify-center p-4 text-secondaryLight"
> >
<img <img
:src="`/images/states/${$colorMode.value}/add_category.svg`" :src="`/images/states/${$colorMode.value}/add_category.svg`"
loading="lazy" loading="lazy"
class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex" class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
:alt="`${t('empty.headers')}`" :alt="`${t('empty.headers')}`"
/> />
<span class="text-center pb-4"> <span class="pb-4 text-center">
{{ t("empty.headers") }} {{ t("empty.headers") }}
</span> </span>
<ButtonSecondary <ButtonSecondary

4
packages/hoppscotch-app/components/http/ImportCurl.vue
View File

@@ -1,10 +1,10 @@
<template> <template>
<SmartModal v-if="show" :title="`${t('import.curl')}`" @close="hideModal"> <SmartModal v-if="show" :title="`${t('import.curl')}`" @close="hideModal">
<template #body> <template #body>
<div class="h-46 px-2"> <div class="px-2 h-46">
<div <div
ref="curlEditor" ref="curlEditor"
class="border border-dividerLight h-full rounded" class="h-full border rounded border-dividerLight"
></div> ></div>
</div> </div>
</template> </template>

20
packages/hoppscotch-app/components/http/OAuth2Authorization.vue
View File

@@ -1,46 +1,46 @@
<template> <template>
<div class="flex flex-col"> <div class="flex flex-col">
<div class="border-b border-dividerLight flex"> <div class="flex border-b border-dividerLight">
<input <input
id="oidcDiscoveryURL" id="oidcDiscoveryURL"
v-model="oidcDiscoveryURL" v-model="oidcDiscoveryURL"
class="bg-transparent flex flex-1 py-2 px-4" class="flex flex-1 px-4 py-2 bg-transparent"
placeholder="OpenID Connect Discovery URL" placeholder="OpenID Connect Discovery URL"
name="oidcDiscoveryURL" name="oidcDiscoveryURL"
/> />
</div> </div>
<div class="border-b border-dividerLight flex"> <div class="flex border-b border-dividerLight">
<input <input
id="authURL" id="authURL"
v-model="authURL" v-model="authURL"
class="bg-transparent flex flex-1 py-2 px-4" class="flex flex-1 px-4 py-2 bg-transparent"
placeholder="Authentication URL" placeholder="Authentication URL"
name="authURL" name="authURL"
/> />
</div> </div>
<div class="border-b border-dividerLight flex"> <div class="flex border-b border-dividerLight">
<input <input
id="accessTokenURL" id="accessTokenURL"
v-model="accessTokenURL" v-model="accessTokenURL"
class="bg-transparent flex flex-1 py-2 px-4" class="flex flex-1 px-4 py-2 bg-transparent"
placeholder="Access Token URL" placeholder="Access Token URL"
name="accessTokenURL" name="accessTokenURL"
/> />
</div> </div>
<div class="border-b border-dividerLight flex"> <div class="flex border-b border-dividerLight">
<input <input
id="clientID" id="clientID"
v-model="clientID" v-model="clientID"
class="bg-transparent flex flex-1 py-2 px-4" class="flex flex-1 px-4 py-2 bg-transparent"
placeholder="Client ID" placeholder="Client ID"
name="clientID" name="clientID"
/> />
</div> </div>
<div class="border-b border-dividerLight flex"> <div class="flex border-b border-dividerLight">
<input <input
id="scope" id="scope"
v-model="scope" v-model="scope"
class="bg-transparent flex flex-1 py-2 px-4" class="flex flex-1 px-4 py-2 bg-transparent"
placeholder="Scope" placeholder="Scope"
name="scope" name="scope"
/> />

10
packages/hoppscotch-app/components/http/Parameters.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<div <div
class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between" class="sticky z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
> >
<label class="font-semibold text-secondaryLight"> <label class="font-semibold text-secondaryLight">
{{ t("request.parameter_list") }} {{ t("request.parameter_list") }}
@@ -41,7 +41,7 @@
<div <div
v-for="(param, index) in params$" v-for="(param, index) in params$"
:key="`param-${index}`" :key="`param-${index}`"
class="divide-dividerLight divide-x border-b border-dividerLight flex" class="flex border-b divide-x divide-dividerLight border-dividerLight"
> >
<SmartEnvInput <SmartEnvInput
v-model="param.key" v-model="param.key"
@@ -118,15 +118,15 @@
</div> </div>
<div <div
v-if="params$.length === 0" v-if="params$.length === 0"
class="flex flex-col text-secondaryLight p-4 items-center justify-center" class="flex flex-col items-center justify-center p-4 text-secondaryLight"
> >
<img <img
:src="`/images/states/${$colorMode.value}/add_files.svg`" :src="`/images/states/${$colorMode.value}/add_files.svg`"
loading="lazy" loading="lazy"
class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex" class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
:alt="`${t('empty.parameters')}`" :alt="`${t('empty.parameters')}`"
/> />
<span class="text-center pb-4"> <span class="pb-4 text-center">
{{ t("empty.parameters") }} {{ t("empty.parameters") }}
</span> </span>
<ButtonSecondary <ButtonSecondary

12
packages/hoppscotch-app/components/http/PreRequestScript.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<div <div
class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between" class="sticky z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
> >
<label class="font-semibold text-secondaryLight"> <label class="font-semibold text-secondaryLight">
{{ t("preRequest.javascript_code") }} {{ t("preRequest.javascript_code") }}
@@ -29,14 +29,14 @@
/> />
</div> </div>
</div> </div>
<div class="border-b border-dividerLight flex"> <div class="flex border-b border-dividerLight">
<div class="border-r border-dividerLight w-2/3"> <div class="w-2/3 border-r border-dividerLight">
<div ref="preRrequestEditor" class="h-full"></div> <div ref="preRrequestEditor" class="h-full"></div>
</div> </div>
<div <div
class="bg-primary h-full top-upperTertiaryStickyFold min-w-46 max-w-1/3 p-4 z-9 sticky overflow-auto" class="sticky h-full p-4 overflow-auto bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9"
> >
<div class="text-secondaryLight pb-2"> <div class="pb-2 text-secondaryLight">
{{ t("helpers.pre_request_script") }} {{ t("helpers.pre_request_script") }}
</div> </div>
<SmartAnchor <SmartAnchor
@@ -44,7 +44,7 @@
to="https://docs.hoppscotch.io/features/pre-request-script" to="https://docs.hoppscotch.io/features/pre-request-script"
blank blank
/> />
<h4 class="font-bold text-secondaryLight pt-6"> <h4 class="pt-6 font-bold text-secondaryLight">
{{ t("preRequest.snippets") }} {{ t("preRequest.snippets") }}
</h4> </h4>
<div class="flex flex-col pt-4"> <div class="flex flex-col pt-4">

2
packages/hoppscotch-app/components/http/RawBody.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<div <div
class="bg-primary border-b border-dividerLight flex flex-1 top-upperTertiaryStickyFold pl-4 z-10 sticky items-center justify-between" class="sticky z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight top-upperTertiaryStickyFold"
> >
<label class="font-semibold text-secondaryLight"> <label class="font-semibold text-secondaryLight">
{{ t("request.raw_body") }} {{ t("request.raw_body") }}

2
packages/hoppscotch-app/components/http/Response.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="flex flex-1 flex-col"> <div class="flex flex-col flex-1">
<HttpResponseMeta :response="response" /> <HttpResponseMeta :response="response" />
<LensesResponseBodyRenderer <LensesResponseBodyRenderer
v-if="!loading && hasResponse" v-if="!loading && hasResponse"

40
packages/hoppscotch-app/components/http/ResponseMeta.vue
View File

@@ -1,23 +1,23 @@
<template> <template>
<div <div
class="bg-primary flex p-4 top-0 z-10 sticky items-center overflow-auto hide-scrollbar whitespace-nowrap" class="sticky top-0 z-10 flex items-center p-4 overflow-auto bg-primary hide-scrollbar whitespace-nowrap"
> >
<div <div
v-if="response == null" v-if="response == null"
class="flex flex-col flex-1 text-secondaryLight items-center justify-center" class="flex flex-col items-center justify-center flex-1 text-secondaryLight"
> >
<div class="flex space-x-2 my-4 pb-4"> <div class="flex pb-4 my-4 space-x-2">
<div class="flex flex-col space-y-4 text-right items-end"> <div class="flex flex-col items-end space-y-4 text-right">
<span class="flex flex-1 items-center"> <span class="flex items-center flex-1">
{{ t("shortcut.request.send_request") }} {{ t("shortcut.request.send_request") }}
</span> </span>
<span class="flex flex-1 items-center"> <span class="flex items-center flex-1">
{{ t("shortcut.general.show_all") }} {{ t("shortcut.general.show_all") }}
</span> </span>
<span class="flex flex-1 items-center"> <span class="flex items-center flex-1">
{{ t("shortcut.general.command_menu") }} {{ t("shortcut.general.command_menu") }}
</span> </span>
<span class="flex flex-1 items-center"> <span class="flex items-center flex-1">
{{ t("shortcut.general.help_menu") }} {{ t("shortcut.general.help_menu") }}
</span> </span>
</div> </div>
@@ -57,44 +57,44 @@
</div> </div>
<div <div
v-if="response.type === 'network_fail'" v-if="response.type === 'network_fail'"
class="flex flex-col flex-1 p-4 items-center justify-center" class="flex flex-col items-center justify-center flex-1 p-4"
> >
<img <img
:src="`/images/states/${$colorMode.value}/youre_lost.svg`" :src="`/images/states/${$colorMode.value}/youre_lost.svg`"
loading="lazy" loading="lazy"
class="flex-col object-contain object-center h-32 my-4 w-32 inline-flex" class="inline-flex flex-col object-contain object-center w-32 h-32 my-4"
:alt="`${t('error.network_fail')}`" :alt="`${t('error.network_fail')}`"
/> />
<span class="font-semibold text-center mb-2"> <span class="mb-2 font-semibold text-center">
{{ t("error.network_fail") }} {{ t("error.network_fail") }}
</span> </span>
<span <span
class="max-w-sm text-secondaryLight text-center mb-6 whitespace-normal" class="max-w-sm mb-6 text-center whitespace-normal text-secondaryLight"
> >
{{ t("helpers.network_fail") }} {{ t("helpers.network_fail") }}
</span> </span>
<AppInterceptor class="border border-dividerLight rounded" /> <AppInterceptor class="border rounded border-dividerLight" />
</div> </div>
<div <div
v-if="response.type === 'script_fail'" v-if="response.type === 'script_fail'"
class="flex flex-col flex-1 p-4 items-center justify-center" class="flex flex-col items-center justify-center flex-1 p-4"
> >
<img <img
:src="`/images/states/${$colorMode.value}/youre_lost.svg`" :src="`/images/states/${$colorMode.value}/youre_lost.svg`"
loading="lazy" loading="lazy"
class="flex-col object-contain object-center h-32 my-4 w-32 inline-flex" class="inline-flex flex-col object-contain object-center w-32 h-32 my-4"
:alt="`${t('error.script_fail')}`" :alt="`${t('error.script_fail')}`"
/> />
<span class="font-semibold text-center mb-2"> <span class="mb-2 font-semibold text-center">
{{ t("error.script_fail") }} {{ t("error.script_fail") }}
</span> </span>
<span <span
class="max-w-sm text-secondaryLight text-center mb-6 whitespace-normal" class="max-w-sm mb-6 text-center whitespace-normal text-secondaryLight"
> >
{{ t("helpers.script_fail") }} {{ t("helpers.script_fail") }}
</span> </span>
<div <div
class="bg-primaryLight rounded font-mono w-full py-2 px-4 text-red-400 overflow-auto whitespace-normal" class="w-full px-4 py-2 overflow-auto font-mono text-red-400 whitespace-normal rounded bg-primaryLight"
> >
{{ response.error.name }}: {{ response.error.message }}<br /> {{ response.error.name }}: {{ response.error.message }}<br />
{{ response.error.stack }} {{ response.error.stack }}
@@ -102,11 +102,11 @@
</div> </div>
<div <div
v-if="response.type === 'success' || response.type === 'fail'" v-if="response.type === 'success' || response.type === 'fail'"
class="font-semibold flex items-center text-tiny" class="flex items-center font-semibold text-tiny"
> >
<div <div
:class="statusCategory.className" :class="statusCategory.className"
class="space-x-4 inline-flex flex-1" class="inline-flex flex-1 space-x-4"
> >
<span v-if="response.statusCode"> <span v-if="response.statusCode">
<span class="text-secondary"> {{ t("response.status") }}: </span> <span class="text-secondary"> {{ t("response.status") }}: </span>

18
packages/hoppscotch-app/components/http/TestResult.vue
View File

@@ -7,7 +7,7 @@
" "
> >
<div <div
class="bg-primary border-b border-dividerLight flex top-lowerSecondaryStickyFold pl-4 z-10 sticky items-center justify-between" class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
> >
<label class="font-semibold text-secondaryLight"> <label class="font-semibold text-secondaryLight">
{{ t("test.report") }} {{ t("test.report") }}
@@ -19,8 +19,8 @@
@click.native="clearContent()" @click.native="clearContent()"
/> />
</div> </div>
<div class="divide-dividerLight border-b border-dividerLight divide-y-4"> <div class="border-b divide-y-4 divide-dividerLight border-dividerLight">
<div v-if="testResults.tests" class="divide-dividerLight divide-y-4"> <div v-if="testResults.tests" class="divide-y-4 divide-dividerLight">
<HttpTestResultEntry <HttpTestResultEntry
v-for="(result, index) in testResults.tests" v-for="(result, index) in testResults.tests"
:key="`result-${index}`" :key="`result-${index}`"
@@ -29,7 +29,7 @@
</div> </div>
<div <div
v-if="testResults.expectResults" v-if="testResults.expectResults"
class="divide-dividerLight divide-y" class="divide-y divide-dividerLight"
> >
<HttpTestResultReport <HttpTestResultReport
v-if="testResults.expectResults.length" v-if="testResults.expectResults.length"
@@ -38,7 +38,7 @@
<div <div
v-for="(result, index) in testResults.expectResults" v-for="(result, index) in testResults.expectResults"
:key="`result-${index}`" :key="`result-${index}`"
class="flex py-2 px-4 items-center" class="flex items-center px-4 py-2"
> >
<i <i
class="mr-4 material-icons" class="mr-4 material-icons"
@@ -64,18 +64,18 @@
</div> </div>
<div <div
v-else v-else
class="flex flex-col text-secondaryLight p-4 items-center justify-center" class="flex flex-col items-center justify-center p-4 text-secondaryLight"
> >
<img <img
:src="`/images/states/${$colorMode.value}/validation.svg`" :src="`/images/states/${$colorMode.value}/validation.svg`"
loading="lazy" loading="lazy"
class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex" class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
:alt="`${t('empty.tests')}`" :alt="`${t('empty.tests')}`"
/> />
<span class="text-center pb-2"> <span class="pb-2 text-center">
{{ t("empty.tests") }} {{ t("empty.tests") }}
</span> </span>
<span class="text-center pb-4"> <span class="pb-4 text-center">
{{ t("helpers.tests") }} {{ t("helpers.tests") }}
</span> </span>
<ButtonSecondary <ButtonSecondary

6
packages/hoppscotch-app/components/http/TestResultEntry.vue
View File

@@ -2,11 +2,11 @@
<div> <div>
<span <span
v-if="testResults.description" v-if="testResults.description"
class="flex font-bold text-secondaryDark py-2 px-4 items-center" class="flex items-center px-4 py-2 font-bold text-secondaryDark"
> >
{{ testResults.description }} {{ testResults.description }}
</span> </span>
<div v-if="testResults.expectResults" class="divide-dividerLight divide-y"> <div v-if="testResults.expectResults" class="divide-y divide-dividerLight">
<HttpTestResultReport <HttpTestResultReport
v-if="testResults.expectResults.length" v-if="testResults.expectResults.length"
:test-results="testResults" :test-results="testResults"
@@ -14,7 +14,7 @@
<div <div
v-for="(result, index) in testResults.expectResults" v-for="(result, index) in testResults.expectResults"
:key="`result-${index}`" :key="`result-${index}`"
class="flex py-2 px-4 items-center" class="flex items-center px-4 py-2"
> >
<i <i
class="mr-4 material-icons" class="mr-4 material-icons"

2
packages/hoppscotch-app/components/http/TestResultReport.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="flex p-2 items-center"> <div class="flex items-center p-2">
<SmartProgressRing <SmartProgressRing
class="text-red-500" class="text-red-500"
:radius="16" :radius="16"

12
packages/hoppscotch-app/components/http/Tests.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<div <div
class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between" class="sticky z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
> >
<label class="font-semibold text-secondaryLight"> <label class="font-semibold text-secondaryLight">
{{ t("test.javascript_code") }} {{ t("test.javascript_code") }}
@@ -29,14 +29,14 @@
/> />
</div> </div>
</div> </div>
<div class="border-b border-dividerLight flex"> <div class="flex border-b border-dividerLight">
<div class="border-r border-dividerLight w-2/3"> <div class="w-2/3 border-r border-dividerLight">
<div ref="testScriptEditor" class="h-full"></div> <div ref="testScriptEditor" class="h-full"></div>
</div> </div>
<div <div
class="bg-primary h-full top-upperTertiaryStickyFold min-w-46 max-w-1/3 p-4 z-9 sticky overflow-auto" class="sticky h-full p-4 overflow-auto bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9"
> >
<div class="text-secondaryLight pb-2"> <div class="pb-2 text-secondaryLight">
{{ t("helpers.post_request_tests") }} {{ t("helpers.post_request_tests") }}
</div> </div>
<SmartAnchor <SmartAnchor
@@ -44,7 +44,7 @@
to="https://docs.hoppscotch.io/features/tests" to="https://docs.hoppscotch.io/features/tests"
blank blank
/> />
<h4 class="font-bold text-secondaryLight pt-6"> <h4 class="pt-6 font-bold text-secondaryLight">
{{ t("test.snippets") }} {{ t("test.snippets") }}
</h4> </h4>
<div class="flex flex-col pt-4"> <div class="flex flex-col pt-4">

12
packages/hoppscotch-app/components/lenses/HeadersRenderer.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<div <div
class="bg-primary border-b border-dividerLight flex top-lowerSecondaryStickyFold pl-4 z-10 sticky items-center justify-between" class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
> >
<label class="font-semibold text-secondaryLight"> <label class="font-semibold text-secondaryLight">
{{ t("request.header_list") }} {{ t("request.header_list") }}
@@ -20,19 +20,19 @@
<div <div
v-for="(header, index) in headers" v-for="(header, index) in headers"
:key="`header-${index}`" :key="`header-${index}`"
class="divide-dividerLight divide-x border-b border-dividerLight flex group" class="flex border-b divide-x divide-dividerLight border-dividerLight group"
> >
<span <span
class="flex flex-1 min-w-0 py-2 px-4 transition group-hover:text-secondaryDark" class="flex flex-1 min-w-0 px-4 py-2 transition group-hover:text-secondaryDark"
> >
<span class="rounded-sm truncate select-all"> <span class="truncate rounded-sm select-all">
{{ header.key }} {{ header.key }}
</span> </span>
</span> </span>
<span <span
class="flex flex-1 min-w-0 py-2 px-4 transition group-hover:text-secondaryDark" class="flex flex-1 min-w-0 px-4 py-2 transition group-hover:text-secondaryDark"
> >
<span class="rounded-sm truncate select-all"> <span class="truncate rounded-sm select-all">
{{ header.value }} {{ header.value }}
</span> </span>
</span> </span>

2
packages/hoppscotch-app/components/lenses/renderers/HTMLLensRenderer.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="flex flex-col flex-1"> <div class="flex flex-col flex-1">
<div <div
class="bg-primary border-b border-dividerLight flex top-lowerSecondaryStickyFold pl-4 z-10 sticky items-center justify-between" class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
> >
<label class="font-semibold text-secondaryLight"> <label class="font-semibold text-secondaryLight">
{{ t("response.body") }} {{ t("response.body") }}

4
packages/hoppscotch-app/components/lenses/renderers/ImageLensRenderer.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<div <div
class="bg-primary border-b border-dividerLight flex top-lowerSecondaryStickyFold pl-4 z-10 sticky items-center justify-between" class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
> >
<label class="font-semibold text-secondaryLight"> <label class="font-semibold text-secondaryLight">
{{ $t("response.body") }} {{ $t("response.body") }}
@@ -18,7 +18,7 @@
</div> </div>
</div> </div>
<img <img
class="border-b border-dividerLight flex max-w-full flex-1" class="flex flex-1 max-w-full border-b border-dividerLight"
:src="imageSource" :src="imageSource"
loading="lazy" loading="lazy"
:alt="imageSource" :alt="imageSource"

6
packages/hoppscotch-app/components/lenses/renderers/JSONLensRenderer.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<div <div
class="bg-primary border-b border-dividerLight flex top-lowerSecondaryStickyFold pl-4 z-10 sticky items-center justify-between" class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
> >
<label class="font-semibold text-secondaryLight">{{ <label class="font-semibold text-secondaryLight">{{
t("response.body") t("response.body")
@@ -36,7 +36,7 @@
<div ref="jsonResponse"></div> <div ref="jsonResponse"></div>
<div <div
v-if="outlinePath" v-if="outlinePath"
class="bg-primaryLight border-t border-dividerLight flex flex-nowrap flex-1 px-2 bottom-0 z-10 sticky overflow-auto hide-scrollbar" class="sticky bottom-0 z-10 flex flex-1 px-2 overflow-auto border-t bg-primaryLight border-dividerLight flex-nowrap hide-scrollbar"
> >
<div <div
v-for="(item, index) in outlinePath" v-for="(item, index) in outlinePath"
@@ -115,7 +115,7 @@
</tippy> </tippy>
<i <i
v-if="index + 1 !== outlinePath.length" v-if="index + 1 !== outlinePath.length"
class="text-secondaryLight opacity-50 material-icons" class="opacity-50 text-secondaryLight material-icons"
>chevron_right</i >chevron_right</i
> >
</div> </div>

2
packages/hoppscotch-app/components/lenses/renderers/RawLensRenderer.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<div <div
class="bg-primary border-b border-dividerLight flex top-lowerSecondaryStickyFold pl-4 z-10 sticky items-center justify-between" class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
> >
<label class="font-semibold text-secondaryLight"> <label class="font-semibold text-secondaryLight">
{{ t("response.body") }} {{ t("response.body") }}

2
packages/hoppscotch-app/components/lenses/renderers/XMLLensRenderer.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<div <div
class="bg-primary border-b border-dividerLight flex top-lowerSecondaryStickyFold pl-4 z-10 sticky items-center justify-between" class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
> >
<label class="font-semibold text-secondaryLight"> <label class="font-semibold text-secondaryLight">
{{ t("response.body") }} {{ t("response.body") }}

6
packages/hoppscotch-app/components/profile/Picture.vue
View File

@@ -1,15 +1,15 @@
<template> <template>
<div <div
tabindex="0" tabindex="0"
class="cursor-pointer flex rounded-full h-5 w-5 relative items-center justify-center focus:outline-none focus-visible:ring focus-visible:ring-primaryDark" class="relative flex items-center justify-center w-5 h-5 rounded-full cursor-pointer focus:outline-none focus-visible:ring focus-visible:ring-primaryDark"
> >
<img <img
class="bg-primaryDark rounded-full object-cover object-center h-5 w-5 transition absolute" class="absolute object-cover object-center w-5 h-5 transition rounded-full bg-primaryDark"
:src="url" :src="url"
:alt="alt" :alt="alt"
loading="lazy" loading="lazy"
/> />
<div class="rounded-full shadow-inner inset-0 absolute"></div> <div class="absolute inset-0 rounded-full shadow-inner"></div>
<span <span
v-if="indicator" v-if="indicator"
class="border-primary rounded-full border-2 h-2.5 -top-0.5 -right-0.5 w-2.5 absolute" class="border-primary rounded-full border-2 h-2.5 -top-0.5 -right-0.5 w-2.5 absolute"

4
packages/hoppscotch-app/components/realtime/Log.vue
View File

@@ -1,9 +1,9 @@
<template> <template>
<div class="flex flex-col"> <div class="flex flex-col">
<div <div
class="bg-primary border-b border-dividerLight flex flex-1 pl-4 top-0 z-10 sticky items-center justify-between" class="sticky top-0 z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight"
> >
<label for="log" class="font-semibold text-secondaryLight py-2"> <label for="log" class="py-2 font-semibold text-secondaryLight">
{{ title }} {{ title }}
</label> </label>
</div> </div>

16
packages/hoppscotch-app/components/realtime/Mqtt.vue
View File

@@ -13,15 +13,15 @@
:size="COLUMN_LAYOUT ? 45 : 50" :size="COLUMN_LAYOUT ? 45 : 50"
class="hide-scrollbar !overflow-auto" class="hide-scrollbar !overflow-auto"
> >
<div class="bg-primary flex flex-col space-y-4 p-4 top-0 z-10 sticky"> <div class="sticky top-0 z-10 flex flex-col p-4 space-y-4 bg-primary">
<div class="space-x-2 flex-1 inline-flex"> <div class="inline-flex flex-1 space-x-2">
<input <input
id="mqtt-url" id="mqtt-url"
v-model="url" v-model="url"
type="url" type="url"
autocomplete="off" autocomplete="off"
spellcheck="false" spellcheck="false"
class="bg-primaryLight border border-divider rounded text-secondaryDark w-full py-2 px-4 hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark" class="w-full px-4 py-2 border rounded bg-primaryLight border-divider text-secondaryDark hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark"
:placeholder="$t('mqtt.url')" :placeholder="$t('mqtt.url')"
:disabled="connectionState" :disabled="connectionState"
@keyup.enter="validUrl ? toggleConnection() : null" @keyup.enter="validUrl ? toggleConnection() : null"
@@ -73,7 +73,7 @@
min-size="20" min-size="20"
class="hide-scrollbar !overflow-auto" class="hide-scrollbar !overflow-auto"
> >
<div class="flex flex-col flex-1 p-4 inline-flex"> <div class="flex inline-flex flex-col flex-1 p-4">
<label for="pub_topic" class="font-semibold text-secondaryLight"> <label for="pub_topic" class="font-semibold text-secondaryLight">
{{ $t("mqtt.topic") }} {{ $t("mqtt.topic") }}
</label> </label>
@@ -89,12 +89,12 @@
spellcheck="false" spellcheck="false"
/> />
</div> </div>
<div class="flex flex-1 p-4 items-center justify-between"> <div class="flex items-center justify-between flex-1 p-4">
<label for="mqtt-message" class="font-semibold text-secondaryLight"> <label for="mqtt-message" class="font-semibold text-secondaryLight">
{{ $t("mqtt.communication") }} {{ $t("mqtt.communication") }}
</label> </label>
</div> </div>
<div class="flex space-x-2 px-4"> <div class="flex px-4 space-x-2">
<input <input
id="mqtt-message" id="mqtt-message"
v-model="msg" v-model="msg"
@@ -113,13 +113,13 @@
/> />
</div> </div>
<div <div
class="border-t border-dividerLight flex flex-col flex-1 mt-4 p-4 inline-flex" class="flex inline-flex flex-col flex-1 p-4 mt-4 border-t border-dividerLight"
> >
<label for="sub_topic" class="font-semibold text-secondaryLight"> <label for="sub_topic" class="font-semibold text-secondaryLight">
{{ $t("mqtt.topic") }} {{ $t("mqtt.topic") }}
</label> </label>
</div> </div>
<div class="flex space-x-2 px-4"> <div class="flex px-4 space-x-2">
<input <input
id="sub_topic" id="sub_topic"
v-model="sub_topic" v-model="sub_topic"

36
packages/hoppscotch-app/components/realtime/Socketio.vue
View File

@@ -13,8 +13,8 @@
:size="COLUMN_LAYOUT ? 45 : 50" :size="COLUMN_LAYOUT ? 45 : 50"
class="hide-scrollbar !overflow-auto" class="hide-scrollbar !overflow-auto"
> >
<div class="bg-primary flex p-4 top-0 z-10 sticky"> <div class="sticky top-0 z-10 flex p-4 bg-primary">
<div class="space-x-2 flex-1 inline-flex"> <div class="inline-flex flex-1 space-x-2">
<div class="flex flex-1"> <div class="flex flex-1">
<label for="client-version"> <label for="client-version">
<tippy <tippy
@@ -30,7 +30,7 @@
id="client-version" id="client-version"
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
title="socket.io-client version" title="socket.io-client version"
class="bg-primaryLight border border-divider rounded-l cursor-pointer flex font-semibold text-secondaryDark py-2 px-4 w-26 hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark" class="flex px-4 py-2 font-semibold border rounded-l cursor-pointer bg-primaryLight border-divider text-secondaryDark w-26 hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark"
:value="`Client ${clientVersion}`" :value="`Client ${clientVersion}`"
readonly readonly
:disabled="connectionState" :disabled="connectionState"
@@ -52,7 +52,7 @@
autocomplete="off" autocomplete="off"
spellcheck="false" spellcheck="false"
:class="{ error: !urlValid }" :class="{ error: !urlValid }"
class="bg-primaryLight border border-divider flex flex-1 text-secondaryDark w-full py-2 px-4 hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark" class="flex flex-1 w-full px-4 py-2 border bg-primaryLight border-divider text-secondaryDark hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark"
:placeholder="$t('socketio.url')" :placeholder="$t('socketio.url')"
:disabled="connectionState" :disabled="connectionState"
@keyup.enter="urlValid ? toggleConnection() : null" @keyup.enter="urlValid ? toggleConnection() : null"
@@ -60,7 +60,7 @@
<input <input
id="socketio-path" id="socketio-path"
v-model="path" v-model="path"
class="bg-primaryLight border border-divider rounded-r flex flex-1 text-secondaryDark w-full py-2 px-4 hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark" class="flex flex-1 w-full px-4 py-2 border rounded-r bg-primaryLight border-divider text-secondaryDark hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark"
spellcheck="false" spellcheck="false"
:disabled="connectionState" :disabled="connectionState"
@keyup.enter="urlValid ? toggleConnection() : null" @keyup.enter="urlValid ? toggleConnection() : null"
@@ -82,7 +82,7 @@
</div> </div>
</div> </div>
<div <div
class="bg-primary border-b border-dividerLight flex flex-1 top-upperPrimaryStickyFold pl-4 z-10 sticky items-center justify-between" class="sticky z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight top-upperPrimaryStickyFold"
> >
<span class="flex items-center"> <span class="flex items-center">
<label class="font-semibold text-secondaryLight"> <label class="font-semibold text-secondaryLight">
@@ -98,7 +98,7 @@
<template #trigger> <template #trigger>
<span class="select-wrapper"> <span class="select-wrapper">
<ButtonSecondary <ButtonSecondary
class="rounded-none ml-2 pr-8" class="pr-8 ml-2 rounded-none"
:label="authType" :label="authType"
/> />
</span> </span>
@@ -160,15 +160,15 @@
</div> </div>
<div <div
v-if="authType === 'None'" v-if="authType === 'None'"
class="flex flex-col text-secondaryLight p-4 items-center justify-center" class="flex flex-col items-center justify-center p-4 text-secondaryLight"
> >
<img <img
:src="`/images/states/${$colorMode.value}/login.svg`" :src="`/images/states/${$colorMode.value}/login.svg`"
loading="lazy" loading="lazy"
class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex" class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
:alt="$t('empty.authorization')" :alt="$t('empty.authorization')"
/> />
<span class="text-center pb-4"> <span class="pb-4 text-center">
This SocketIO connection does not use any authentication. This SocketIO connection does not use any authentication.
</span> </span>
<ButtonSecondary <ButtonSecondary
@@ -183,10 +183,10 @@
</div> </div>
<div <div
v-if="authType === 'Bearer'" v-if="authType === 'Bearer'"
class="border-b border-dividerLight flex" class="flex border-b border-dividerLight"
> >
<div class="border-r border-dividerLight w-2/3"> <div class="w-2/3 border-r border-dividerLight">
<div class="border-b border-dividerLight flex"> <div class="flex border-b border-dividerLight">
<SmartEnvInput <SmartEnvInput
v-model="bearerToken" v-model="bearerToken"
placeholder="Token" placeholder="Token"
@@ -195,10 +195,10 @@
</div> </div>
</div> </div>
<div <div
class="bg-primary h-full top-upperTertiaryStickyFold min-w-46 max-w-1/3 p-4 z-9 sticky overflow-auto" class="sticky h-full p-4 overflow-auto bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9"
> >
<div class="p-2"> <div class="p-2">
<div class="text-secondaryLight pb-2"> <div class="pb-2 text-secondaryLight">
{{ $t("helpers.authorization") }} {{ $t("helpers.authorization") }}
</div> </div>
<SmartAnchor <SmartAnchor
@@ -225,7 +225,7 @@
min-size="20" min-size="20"
class="hide-scrollbar !overflow-auto" class="hide-scrollbar !overflow-auto"
> >
<div class="flex flex-col flex-1 p-4 inline-flex"> <div class="flex inline-flex flex-col flex-1 p-4">
<label for="events" class="font-semibold text-secondaryLight"> <label for="events" class="font-semibold text-secondaryLight">
{{ $t("socketio.events") }} {{ $t("socketio.events") }}
</label> </label>
@@ -242,7 +242,7 @@
:disabled="!connectionState" :disabled="!connectionState"
/> />
</div> </div>
<div class="flex flex-1 p-4 items-center justify-between"> <div class="flex items-center justify-between flex-1 p-4">
<label class="font-semibold text-secondaryLight"> <label class="font-semibold text-secondaryLight">
{{ $t("socketio.communication") }} {{ $t("socketio.communication") }}
</label> </label>
@@ -255,7 +255,7 @@
/> />
</div> </div>
</div> </div>
<div class="flex flex-col space-y-2 px-4 pb-4"> <div class="flex flex-col px-4 pb-4 space-y-2">
<div <div
v-for="(input, index) of communication.inputs" v-for="(input, index) of communication.inputs"
:key="`input-${index}`" :key="`input-${index}`"

10
packages/hoppscotch-app/components/realtime/Sse.vue
View File

@@ -1,8 +1,8 @@
<template> <template>
<Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT"> <Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
<Pane :size="COLUMN_LAYOUT ? 45 : 50" class="hide-scrollbar !overflow-auto"> <Pane :size="COLUMN_LAYOUT ? 45 : 50" class="hide-scrollbar !overflow-auto">
<div class="bg-primary flex p-4 top-0 z-10 sticky"> <div class="sticky top-0 z-10 flex p-4 bg-primary">
<div class="space-x-2 flex-1 inline-flex"> <div class="inline-flex flex-1 space-x-2">
<div class="flex flex-1"> <div class="flex flex-1">
<input <input
id="server" id="server"
@@ -10,21 +10,21 @@
type="url" type="url"
autocomplete="off" autocomplete="off"
:class="{ error: !serverValid }" :class="{ error: !serverValid }"
class="bg-primaryLight border border-divider rounded-l flex flex-1 text-secondaryDark w-full py-2 px-4 hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark" class="flex flex-1 w-full px-4 py-2 border rounded-l bg-primaryLight border-divider text-secondaryDark hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark"
:placeholder="$t('sse.url')" :placeholder="$t('sse.url')"
:disabled="connectionSSEState" :disabled="connectionSSEState"
@keyup.enter="serverValid ? toggleSSEConnection() : null" @keyup.enter="serverValid ? toggleSSEConnection() : null"
/> />
<label <label
for="event-type" for="event-type"
class="bg-primaryLight border-t border-b border-divider font-semibold text-secondaryLight py-2 px-4 truncate" class="px-4 py-2 font-semibold truncate border-t border-b bg-primaryLight border-divider text-secondaryLight"
> >
{{ $t("sse.event_type") }} {{ $t("sse.event_type") }}
</label> </label>
<input <input
id="event-type" id="event-type"
v-model="eventType" v-model="eventType"
class="bg-primaryLight border border-divider rounded-r flex flex-1 text-secondaryDark w-full py-2 px-4 hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark" class="flex flex-1 w-full px-4 py-2 border rounded-r bg-primaryLight border-divider text-secondaryDark hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark"
spellcheck="false" spellcheck="false"
:disabled="connectionSSEState" :disabled="connectionSSEState"
@keyup.enter="serverValid ? toggleSSEConnection() : null" @keyup.enter="serverValid ? toggleSSEConnection() : null"

22
packages/hoppscotch-app/components/realtime/Websocket.vue
View File

@@ -13,12 +13,12 @@
:size="COLUMN_LAYOUT ? 45 : 50" :size="COLUMN_LAYOUT ? 45 : 50"
class="hide-scrollbar !overflow-auto" class="hide-scrollbar !overflow-auto"
> >
<div class="bg-primary flex p-4 top-0 z-10 sticky"> <div class="sticky top-0 z-10 flex p-4 bg-primary">
<div class="space-x-2 flex-1 inline-flex"> <div class="inline-flex flex-1 space-x-2">
<input <input
id="websocket-url" id="websocket-url"
v-model="url" v-model="url"
class="bg-primaryLight border border-divider rounded text-secondaryDark w-full py-2 px-4 hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark" class="w-full px-4 py-2 border rounded bg-primaryLight border-divider text-secondaryDark hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark"
type="url" type="url"
autocomplete="off" autocomplete="off"
spellcheck="false" spellcheck="false"
@@ -43,7 +43,7 @@
</div> </div>
</div> </div>
<div <div
class="bg-primary border-b border-dividerLight flex flex-1 top-upperPrimaryStickyFold pl-4 z-10 sticky items-center justify-between" class="sticky z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight top-upperPrimaryStickyFold"
> >
<label class="font-semibold text-secondaryLight"> <label class="font-semibold text-secondaryLight">
{{ $t("websocket.protocols") }} {{ $t("websocket.protocols") }}
@@ -66,11 +66,11 @@
<div <div
v-for="(protocol, index) of protocols" v-for="(protocol, index) of protocols"
:key="`protocol-${index}`" :key="`protocol-${index}`"
class="divide-dividerLight divide-x border-b border-dividerLight flex" class="flex border-b divide-x divide-dividerLight border-dividerLight"
> >
<input <input
v-model="protocol.value" v-model="protocol.value"
class="bg-transparent flex flex-1 py-2 px-4" class="flex flex-1 px-4 py-2 bg-transparent"
:placeholder="$t('count.protocol', { count: index + 1 })" :placeholder="$t('count.protocol', { count: index + 1 })"
name="message" name="message"
type="text" type="text"
@@ -120,15 +120,15 @@
</div> </div>
<div <div
v-if="protocols.length === 0" v-if="protocols.length === 0"
class="flex flex-col text-secondaryLight p-4 items-center justify-center" class="flex flex-col items-center justify-center p-4 text-secondaryLight"
> >
<img <img
:src="`/images/states/${$colorMode.value}/add_category.svg`" :src="`/images/states/${$colorMode.value}/add_category.svg`"
loading="lazy" loading="lazy"
class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex" class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
:alt="$t('empty.protocols')" :alt="$t('empty.protocols')"
/> />
<span class="text-center mb-4"> <span class="mb-4 text-center">
{{ $t("empty.protocols") }} {{ $t("empty.protocols") }}
</span> </span>
</div> </div>
@@ -147,7 +147,7 @@
min-size="20" min-size="20"
class="hide-scrollbar !overflow-auto" class="hide-scrollbar !overflow-auto"
> >
<div class="flex flex-col flex-1 p-4 inline-flex"> <div class="flex inline-flex flex-col flex-1 p-4">
<label <label
for="websocket-message" for="websocket-message"
class="font-semibold text-secondaryLight" class="font-semibold text-secondaryLight"
@@ -155,7 +155,7 @@
{{ $t("websocket.communication") }} {{ $t("websocket.communication") }}
</label> </label>
</div> </div>
<div class="flex space-x-2 px-4"> <div class="flex px-4 space-x-2">
<input <input
id="websocket-message" id="websocket-message"
v-model="communication.input" v-model="communication.input"

4
packages/hoppscotch-app/components/smart/Checkbox.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div <div
class="cursor-pointer flex-nowrap transition inline-flex items-center justify-center group hover:text-secondaryDark" class="inline-flex items-center justify-center transition cursor-pointer flex-nowrap group hover:text-secondaryDark"
@click="$emit('change')" @click="$emit('change')"
> >
<input <input
@@ -12,7 +12,7 @@
/> />
<label <label
for="checkbox" for="checkbox"
class="cursor-pointer font-semibold pl-0 align-middle" class="pl-0 font-semibold align-middle cursor-pointer"
> >
<slot></slot> <slot></slot>
</label> </label>

2
packages/hoppscotch-app/components/smart/DeletableChip.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<span class="chip"> <span class="chip">
<i class="opacity-75 material-icons">attachment</i> <i class="opacity-75 material-icons">attachment</i>
<span class="max-w-64 px-2 truncate"><slot></slot></span> <span class="px-2 truncate max-w-64"><slot></slot></span>
<ButtonSecondary <ButtonSecondary
class="rounded close-button" class="rounded close-button"
svg="x" svg="x"

8
packages/hoppscotch-app/components/smart/Item.vue
View File

@@ -3,7 +3,7 @@
:to="`${/^\/(?!\/).*$/.test(to) ? localePath(to) : to}`" :to="`${/^\/(?!\/).*$/.test(to) ? localePath(to) : to}`"
:exact="exact" :exact="exact"
:blank="blank" :blank="blank"
class="rounded flex-shrink-0 py-2 px-4 transition inline-flex items-center hover:bg-primaryDark hover:text-secondaryDark focus:outline-none focus-visible:bg-primaryDark focus-visible:text-secondaryDark" class="inline-flex items-center flex-shrink-0 px-4 py-2 transition rounded hover:bg-primaryDark hover:text-secondaryDark focus:outline-none focus-visible:bg-primaryDark focus-visible:text-secondaryDark"
:class="[ :class="[
{ 'opacity-75 cursor-not-allowed': disabled }, { 'opacity-75 cursor-not-allowed': disabled },
{ 'pointer-events-none': loading }, { 'pointer-events-none': loading },
@@ -44,7 +44,7 @@
</span> </span>
<SmartSpinner v-else class="mr-4 text-secondaryDark" /> <SmartSpinner v-else class="mr-4 text-secondaryDark" />
<div <div
class="flex-1 inline-flex items-start truncate" class="inline-flex items-start flex-1 truncate"
:class="{ 'flex-col': description }" :class="{ 'flex-col': description }"
> >
<div class="font-semibold truncate"> <div class="font-semibold truncate">
@@ -56,7 +56,7 @@
</div> </div>
<i <i
v-if="infoIcon" v-if="infoIcon"
class="ml-6 items-center self-center material-icons" class="items-center self-center ml-6 material-icons"
:class="{ 'text-accent': activeInfoIcon }" :class="{ 'text-accent': activeInfoIcon }"
> >
{{ infoIcon }} {{ infoIcon }}
@@ -65,7 +65,7 @@
<kbd <kbd
v-for="(key, index) in shortcut" v-for="(key, index) in shortcut"
:key="`key-${index}`" :key="`key-${index}`"
class="shortcut-key -mr-2" class="-mr-2 shortcut-key"
> >
{{ key }} {{ key }}
</kbd> </kbd>

2
packages/hoppscotch-app/components/smart/LoadingIndicator.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="text-sm text-secondaryLight animate-pulse"> <div class="text-sm text-secondaryLight animate-pulse">
<AppLogo class="h-8 w-8" /> <AppLogo class="w-8 h-8" />
</div> </div>
</template> </template>

16
packages/hoppscotch-app/components/smart/Modal.vue
View File

@@ -2,14 +2,14 @@
<transition name="fade" appear @leave="onTransitionLeaveStart"> <transition name="fade" appear @leave="onTransitionLeaveStart">
<div <div
ref="modal" ref="modal"
class="inset-0 transition z-10 z-50 fixed overflow-y-auto hide-scrollbar" class="fixed inset-0 z-10 z-50 overflow-y-auto transition hide-scrollbar"
> >
<div <div
class="flex min-h-screen text-center items-end justify-center sm:block" class="flex items-end justify-center min-h-screen text-center sm:block"
> >
<transition name="fade" appear> <transition name="fade" appear>
<div <div
class="bg-primaryLight opacity-90 inset-0 transition fixed" class="fixed inset-0 transition bg-primaryLight opacity-90"
@touchstart="!dialog ? close() : null" @touchstart="!dialog ? close() : null"
@touchend="!dialog ? close() : null" @touchend="!dialog ? close() : null"
@mouseup="!dialog ? close() : null" @mouseup="!dialog ? close() : null"
@@ -18,7 +18,7 @@
</transition> </transition>
<span <span
v-if="placement === 'center'" v-if="placement === 'center'"
class="hidden sm:h-screen sm:inline-block sm:align-middle" class="sm:h-screen <sm:hidden sm:align-middle"
aria-hidden="true" aria-hidden="true"
>&#8203;</span >&#8203;</span
> >
@@ -32,7 +32,7 @@
leave-to-class="scale-95 translate-y-4" leave-to-class="scale-95 translate-y-4"
> >
<div <div
class="bg-primary shadow-lg text-left w-full transform transition-all inline-block overflow-hidden align-bottom sm:rounded-xl sm:align-middle" class="inline-block w-full overflow-hidden text-left align-bottom transition-all transform shadow-lg bg-primary sm:rounded-xl sm:align-middle"
:class="[ :class="[
{ 'mt-24 md:mb-8': placement === 'top' }, { 'mt-24 md:mb-8': placement === 'top' },
{ 'p-4': !fullWidth }, { 'p-4': !fullWidth },
@@ -41,7 +41,7 @@
> >
<div <div
v-if="title" v-if="title"
class="flex mb-4 pl-2 items-center justify-between" class="flex items-center justify-between pl-2 mb-4"
> >
<h3 class="heading">{{ title }}</h3> <h3 class="heading">{{ title }}</h3>
<span class="flex"> <span class="flex">
@@ -54,14 +54,14 @@
</span> </span>
</div> </div>
<div <div
class="flex flex-col max-h-md overflow-y-auto hide-scrollbar" class="flex flex-col overflow-y-auto max-h-md hide-scrollbar"
:class="{ 'py-2': !fullWidth }" :class="{ 'py-2': !fullWidth }"
> >
<slot name="body"></slot> <slot name="body"></slot>
</div> </div>
<div <div
v-if="hasFooterSlot" v-if="hasFooterSlot"
class="flex flex-1 mt-4 p-2 items-center justify-between" class="flex items-center justify-between flex-1 p-2 mt-4"
> >
<slot name="footer"></slot> <slot name="footer"></slot>
</div> </div>

4
packages/hoppscotch-app/components/smart/Radio.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div <div
class="cursor-pointer flex flex-nowrap transition flex-1 items-center group hover:text-secondaryDark" class="flex items-center flex-1 transition cursor-pointer flex-nowrap group hover:text-secondaryDark"
@click="$emit('change', value)" @click="$emit('change', value)"
> >
<span class="inline-flex mr-4"> <span class="inline-flex mr-4">
@@ -9,7 +9,7 @@
</i> </i>
<i v-else class="material-icons">radio_button_unchecked</i> <i v-else class="material-icons">radio_button_unchecked</i>
</span> </span>
<span class="font-semibold inline-flex">{{ label }}</span> <span class="inline-flex font-semibold">{{ label }}</span>
</div> </div>
</template> </template>

8
packages/hoppscotch-app/components/smart/Tabs.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div <div
class="flex flex-nowrap h-full flex-1" class="flex flex-1 h-full flex-nowrap"
:class="{ 'flex-col h-auto': !vertical }" :class="{ 'flex-col h-auto': !vertical }"
> >
<div <div
@@ -9,7 +9,7 @@
> >
<div class="flex flex-1"> <div class="flex flex-1">
<div <div
class="flex flex-1 justify-between" class="flex justify-between flex-1"
:class="{ 'flex-col': vertical }" :class="{ 'flex-col': vertical }"
> >
<div class="flex" :class="{ 'flex-col space-y-2 p-2': vertical }"> <div class="flex" :class="{ 'flex-col space-y-2 p-2': vertical }">
@@ -35,7 +35,7 @@
</span> </span>
<span <span
v-if="tab.indicator" v-if="tab.indicator"
class="bg-accentLight rounded-full h-1 ml-2 w-1" class="w-1 h-1 ml-2 rounded-full bg-accentLight"
></span> ></span>
</button> </button>
</div> </div>
@@ -46,7 +46,7 @@
</div> </div>
</div> </div>
<div <div
class="h-full w-full contents" class="w-full h-full contents"
:class="{ :class="{
'!flex flex-col flex-1 overflow-y-auto hide-scrollbar': vertical, '!flex flex-col flex-1 overflow-y-auto hide-scrollbar': vertical,
}" }"

4
packages/hoppscotch-app/components/smart/Toggle.vue
View File

@@ -1,12 +1,12 @@
<template> <template>
<div <div
class="cursor-pointer flex-nowrap transition inline-flex items-center justify-center group hover:text-secondaryDark" class="inline-flex items-center justify-center transition cursor-pointer flex-nowrap group hover:text-secondaryDark"
@click="$emit('change')" @click="$emit('change')"
> >
<span ref="toggle" class="toggle" :class="{ on: on }"> <span ref="toggle" class="toggle" :class="{ on: on }">
<span class="handle"></span> <span class="handle"></span>
</span> </span>
<span class="cursor-pointer font-semibold pl-0 align-middle"> <span class="pl-0 font-semibold align-middle cursor-pointer">
<slot></slot> <slot></slot>
</span> </span>
</div> </div>

2
packages/hoppscotch-app/components/tab/Primary.vue
View File

@@ -3,7 +3,7 @@
:to="`${/^\/(?!\/).*$/.test(to) ? localePath(to) : to}`" :to="`${/^\/(?!\/).*$/.test(to) ? localePath(to) : to}`"
:exact="exact" :exact="exact"
:blank="blank" :blank="blank"
class="rounded py-2 px-4 transition inline-flex items-center truncate focus:outline-none" class="inline-flex items-center px-4 py-2 truncate transition rounded focus:outline-none"
:class="[ :class="[
color color
? `text-${color}-500 hover:text-${color}-600 focus-visible:text-${color}-600` ? `text-${color}-500 hover:text-${color}-600 focus-visible:text-${color}-600`

2
packages/hoppscotch-app/components/tab/Secondary.vue
View File

@@ -3,7 +3,7 @@
:to="`${/^\/(?!\/).*$/.test(to) ? localePath(to) : to}`" :to="`${/^\/(?!\/).*$/.test(to) ? localePath(to) : to}`"
:exact="exact" :exact="exact"
:blank="blank" :blank="blank"
class="font-semibold py-2 transform transition inline-flex items-center hover:translate-x-2 focus:outline-none focus-visible:translate-x-2" class="inline-flex items-center py-2 font-semibold transition transform hover:translate-x-2 focus:outline-none focus-visible:translate-x-2"
:class="[ :class="[
label ? 'px-4' : 'px-2', label ? 'px-4' : 'px-2',
active active

18
packages/hoppscotch-app/components/teams/Edit.vue
View File

@@ -2,7 +2,7 @@
<SmartModal v-if="show" :title="t('team.edit')" @close="hideModal"> <SmartModal v-if="show" :title="t('team.edit')" @close="hideModal">
<template #body> <template #body>
<div class="flex flex-col px-2"> <div class="flex flex-col px-2">
<div class="flex relative"> <div class="relative flex">
<input <input
id="selectLabelTeamEdit" id="selectLabelTeamEdit"
v-model="name" v-model="name"
@@ -17,7 +17,7 @@
{{ t("action.label") }} {{ t("action.label") }}
</label> </label>
</div> </div>
<div class="flex flex-1 pt-4 items-center justify-between"> <div class="flex items-center justify-between flex-1 pt-4">
<label for="memberList" class="p-4"> <label for="memberList" class="p-4">
{{ t("team.members") }} {{ t("team.members") }}
</label> </label>
@@ -47,19 +47,19 @@
E.isRight(teamDetails.data) && E.isRight(teamDetails.data) &&
teamDetails.data.right.team.teamMembers teamDetails.data.right.team.teamMembers
" "
class="divide-dividerLight divide-y border border-divider rounded" class="border divide-y rounded divide-dividerLight border-divider"
> >
<div <div
v-if="teamDetails.data.right.team.teamMembers === 0" v-if="teamDetails.data.right.team.teamMembers === 0"
class="flex flex-col text-secondaryLight p-4 items-center justify-center" class="flex flex-col items-center justify-center p-4 text-secondaryLight"
> >
<img <img
:src="`/images/states/${$colorMode.value}/add_group.svg`" :src="`/images/states/${$colorMode.value}/add_group.svg`"
loading="lazy" loading="lazy"
class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex" class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
:alt="`${t('empty.members')}`" :alt="`${t('empty.members')}`"
/> />
<span class="text-center pb-4"> <span class="pb-4 text-center">
{{ t("empty.members") }} {{ t("empty.members") }}
</span> </span>
<ButtonSecondary <ButtonSecondary
@@ -76,10 +76,10 @@
<div <div
v-for="(member, index) in membersList" v-for="(member, index) in membersList"
:key="`member-${index}`" :key="`member-${index}`"
class="divide-dividerLight divide-x flex" class="flex divide-x divide-dividerLight"
> >
<input <input
class="bg-transparent flex flex-1 py-2 px-4" class="flex flex-1 px-4 py-2 bg-transparent"
:placeholder="`${t('team.email')}`" :placeholder="`${t('team.email')}`"
:name="'param' + index" :name="'param' + index"
:value="member.email" :value="member.email"
@@ -96,7 +96,7 @@
<template #trigger> <template #trigger>
<span class="select-wrapper"> <span class="select-wrapper">
<input <input
class="bg-transparent cursor-pointer flex flex-1 py-2 px-4" class="flex flex-1 px-4 py-2 bg-transparent cursor-pointer"
:placeholder="`${t('team.permissions')}`" :placeholder="`${t('team.permissions')}`"
:name="'value' + index" :name="'value' + index"
:value="member.role" :value="member.role"

54
packages/hoppscotch-app/components/teams/Invite.vue
View File

@@ -2,8 +2,8 @@
<SmartModal v-if="show" :title="t('team.invite')" @close="hideModal"> <SmartModal v-if="show" :title="t('team.invite')" @close="hideModal">
<template #body> <template #body>
<div v-if="sendInvitesResult.length" class="flex flex-col px-4"> <div v-if="sendInvitesResult.length" class="flex flex-col px-4">
<div class="flex flex-col max-w-md items-center justify-center"> <div class="flex flex-col items-center justify-center max-w-md">
<SmartIcon class="h-6 text-accent w-6" name="users" /> <SmartIcon class="w-6 h-6 text-accent" name="users" />
<h3 class="my-2 text-lg text-center"> <h3 class="my-2 text-lg text-center">
{{ t("team.we_sent_invite_link") }} {{ t("team.we_sent_invite_link") }}
</h3> </h3>
@@ -12,7 +12,7 @@
</p> </p>
</div> </div>
<div <div
class="border border-dividerLight rounded flex flex-col space-y-6 mt-8 p-4" class="flex flex-col p-4 mt-8 space-y-6 border rounded border-dividerLight"
> >
<div <div
v-for="(invitee, index) in sendInvitesResult" v-for="(invitee, index) in sendInvitesResult"
@@ -41,20 +41,20 @@
</div> </div>
<div <div
v-else-if="sendingInvites" v-else-if="sendingInvites"
class="flex p-4 items-center justify-center" class="flex items-center justify-center p-4"
> >
<SmartSpinner /> <SmartSpinner />
</div> </div>
<div v-else class="flex flex-col px-2"> <div v-else class="flex flex-col px-2">
<div class="flex flex-1 items-center justify-between"> <div class="flex items-center justify-between flex-1">
<label for="memberList" class="px-4 pb-4"> <label for="memberList" class="px-4 pb-4">
{{ t("team.pending_invites") }} {{ t("team.pending_invites") }}
</label> </label>
</div> </div>
<div class="divide-dividerLight divide-y border border-divider rounded"> <div class="border divide-y rounded divide-dividerLight border-divider">
<div <div
v-if="pendingInvites.loading" v-if="pendingInvites.loading"
class="flex p-4 items-center justify-center" class="flex items-center justify-center p-4"
> >
<SmartSpinner /> <SmartSpinner />
</div> </div>
@@ -66,18 +66,18 @@
v-for="(invitee, index) in pendingInvites.data.right.team v-for="(invitee, index) in pendingInvites.data.right.team
.teamInvitations" .teamInvitations"
:key="`invitee-${index}`" :key="`invitee-${index}`"
class="divide-dividerLight divide-x flex" class="flex divide-x divide-dividerLight"
> >
<input <input
v-if="invitee" v-if="invitee"
class="bg-transparent flex flex-1 text-secondaryLight py-2 px-4" class="flex flex-1 px-4 py-2 bg-transparent text-secondaryLight"
:placeholder="`${t('team.email')}`" :placeholder="`${t('team.email')}`"
:name="'param' + index" :name="'param' + index"
:value="invitee.inviteeEmail" :value="invitee.inviteeEmail"
readonly readonly
/> />
<input <input
class="bg-transparent flex flex-1 text-secondaryLight py-2 px-4" class="flex flex-1 px-4 py-2 bg-transparent text-secondaryLight"
:placeholder="`${t('team.permissions')}`" :placeholder="`${t('team.permissions')}`"
:name="'value' + index" :name="'value' + index"
:value="invitee.inviteeRole" :value="invitee.inviteeRole"
@@ -99,7 +99,7 @@
E.isRight(pendingInvites.data) && E.isRight(pendingInvites.data) &&
pendingInvites.data.right.team.teamInvitations.length === 0 pendingInvites.data.right.team.teamInvitations.length === 0
" "
class="flex flex-col text-secondaryLight p-4 items-center justify-center" class="flex flex-col items-center justify-center p-4 text-secondaryLight"
> >
<span class="text-center"> <span class="text-center">
{{ t("empty.pending_invites") }} {{ t("empty.pending_invites") }}
@@ -107,14 +107,14 @@
</div> </div>
<div <div
v-if="!pendingInvites.loading && E.isLeft(pendingInvites.data)" v-if="!pendingInvites.loading && E.isLeft(pendingInvites.data)"
class="flex flex-col p-4 items-center" class="flex flex-col items-center p-4"
> >
<i class="mb-4 material-icons">help_outline</i> <i class="mb-4 material-icons">help_outline</i>
{{ t("error.something_went_wrong") }} {{ t("error.something_went_wrong") }}
</div> </div>
</div> </div>
</div> </div>
<div class="flex flex-1 pt-4 items-center justify-between"> <div class="flex items-center justify-between flex-1 pt-4">
<label for="memberList" class="p-4"> <label for="memberList" class="p-4">
{{ t("team.invite_tooltip") }} {{ t("team.invite_tooltip") }}
</label> </label>
@@ -127,15 +127,15 @@
/> />
</div> </div>
</div> </div>
<div class="divide-dividerLight divide-y border border-divider rounded"> <div class="border divide-y rounded divide-dividerLight border-divider">
<div <div
v-for="(invitee, index) in newInvites" v-for="(invitee, index) in newInvites"
:key="`new-invitee-${index}`" :key="`new-invitee-${index}`"
class="divide-dividerLight divide-x flex" class="flex divide-x divide-dividerLight"
> >
<input <input
v-model="invitee.key" v-model="invitee.key"
class="bg-transparent flex flex-1 py-2 px-4" class="flex flex-1 px-4 py-2 bg-transparent"
:placeholder="`${t('team.email')}`" :placeholder="`${t('team.email')}`"
:name="'invitee' + index" :name="'invitee' + index"
autofocus autofocus
@@ -151,7 +151,7 @@
<template #trigger> <template #trigger>
<span class="select-wrapper"> <span class="select-wrapper">
<input <input
class="bg-transparent cursor-pointer flex flex-1 py-2 px-4" class="flex flex-1 px-4 py-2 bg-transparent cursor-pointer"
:placeholder="`${t('team.permissions')}`" :placeholder="`${t('team.permissions')}`"
:name="'value' + index" :name="'value' + index"
:value="invitee.value" :value="invitee.value"
@@ -219,15 +219,15 @@
</div> </div>
<div <div
v-if="newInvites.length === 0" v-if="newInvites.length === 0"
class="flex flex-col text-secondaryLight p-4 items-center justify-center" class="flex flex-col items-center justify-center p-4 text-secondaryLight"
> >
<img <img
:src="`/images/states/${$colorMode.value}/add_group.svg`" :src="`/images/states/${$colorMode.value}/add_group.svg`"
loading="lazy" loading="lazy"
class="flex-col object-contain object-center h-16 mb-4 w-16 inline-flex" class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
:alt="`${t('empty.invites')}`" :alt="`${t('empty.invites')}`"
/> />
<span class="text-center pb-4"> <span class="pb-4 text-center">
{{ t("empty.invites") }} {{ t("empty.invites") }}
</span> </span>
<ButtonSecondary <ButtonSecondary
@@ -239,10 +239,10 @@
</div> </div>
<div <div
v-if="newInvites.length" v-if="newInvites.length"
class="border border-dividerLight rounded flex flex-col mt-4 py-4 px-4 items-start" class="flex flex-col items-start px-4 py-4 mt-4 border rounded border-dividerLight"
> >
<span <span
class="bg-primaryDark border border-divider rounded-full flex font-semibold mb-4 py-1 px-2 items-center justify-center" class="flex items-center justify-center px-2 py-1 mb-4 font-semibold border rounded-full bg-primaryDark border-divider"
> >
<i class="mr-2 text-secondaryLight material-icons">help_outline</i> <i class="mr-2 text-secondaryLight material-icons">help_outline</i>
{{ t("profile.roles") }} {{ t("profile.roles") }}
@@ -252,10 +252,10 @@
{{ t("profile.roles_description") }} {{ t("profile.roles_description") }}
</span> </span>
</p> </p>
<ul class="space-y-4 mt-4"> <ul class="mt-4 space-y-4">
<li class="flex"> <li class="flex">
<span <span
class="font-semibold text-secondaryDark max-w-16 w-1/4 uppercase truncate" class="w-1/4 font-semibold uppercase truncate text-secondaryDark max-w-16"
> >
{{ t("profile.owner") }} {{ t("profile.owner") }}
</span> </span>
@@ -265,7 +265,7 @@
</li> </li>
<li class="flex"> <li class="flex">
<span <span
class="font-semibold text-secondaryDark max-w-16 w-1/4 uppercase truncate" class="w-1/4 font-semibold uppercase truncate text-secondaryDark max-w-16"
> >
{{ t("profile.editor") }} {{ t("profile.editor") }}
</span> </span>
@@ -275,7 +275,7 @@
</li> </li>
<li class="flex"> <li class="flex">
<span <span
class="font-semibold text-secondaryDark max-w-16 w-1/4 uppercase truncate" class="w-1/4 font-semibold uppercase truncate text-secondaryDark max-w-16"
> >
{{ t("profile.viewer") }} {{ t("profile.viewer") }}
</span> </span>
@@ -290,7 +290,7 @@
<template #footer> <template #footer>
<p <p
v-if="sendInvitesResult.length" v-if="sendInvitesResult.length"
class="flex flex-1 text-secondaryLight justify-between" class="flex justify-between flex-1 text-secondaryLight"
> >
<SmartAnchor <SmartAnchor
class="link" class="link"

10
packages/hoppscotch-app/components/teams/Team.vue
View File

@@ -1,10 +1,10 @@
<template> <template>
<div <div
class="border border-divider rounded flex flex-col flex-1" class="flex flex-col flex-1 border rounded border-divider"
@contextmenu.prevent="!compact ? options.tippy().show() : null" @contextmenu.prevent="!compact ? options.tippy().show() : null"
> >
<div <div
class="flex flex-1 items-start" class="flex items-start flex-1"
:class=" :class="
compact compact
? team.myRole === 'OWNER' ? team.myRole === 'OWNER'
@@ -27,7 +27,7 @@
> >
{{ team.name || t("state.nothing_found") }} {{ team.name || t("state.nothing_found") }}
</label> </label>
<div class="flex -space-x-1 mt-2 overflow-hidden"> <div class="flex mt-2 -space-x-1 overflow-hidden">
<img <img
v-for="(member, index) in team.teamMembers" v-for="(member, index) in team.teamMembers"
:key="`member-${index}`" :key="`member-${index}`"
@@ -35,13 +35,13 @@
:title="member.user.displayName" :title="member.user.displayName"
:src="member.user.photoURL || undefined" :src="member.user.photoURL || undefined"
:alt="member.user.displayName" :alt="member.user.displayName"
class="rounded-full h-5 ring-primary ring-2 w-5 inline-block" class="inline-block w-5 h-5 rounded-full ring-primary ring-2"
loading="lazy" loading="lazy"
/> />
</div> </div>
</div> </div>
</div> </div>
<div v-if="!compact" class="flex flex-shrink-0 items-end justify-between"> <div v-if="!compact" class="flex items-end justify-between flex-shrink-0">
<span> <span>
<ButtonSecondary <ButtonSecondary
v-if="team.myRole === 'OWNER'" v-if="team.myRole === 'OWNER'"

8
packages/hoppscotch-app/components/teams/index.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<div class="space-y-4 p-4"> <div class="p-4 space-y-4">
<ButtonSecondary <ButtonSecondary
:label="`${t('team.create_new')}`" :label="`${t('team.create_new')}`"
outline outline
@@ -19,15 +19,15 @@
E.isRight(myTeams.data) && E.isRight(myTeams.data) &&
myTeams.data.right.myTeams.length === 0 myTeams.data.right.myTeams.length === 0
" "
class="flex flex-col text-secondaryLight p-4 items-center justify-center" class="flex flex-col items-center justify-center p-4 text-secondaryLight"
> >
<img <img
:src="`/images/states/${$colorMode.value}/add_group.svg`" :src="`/images/states/${$colorMode.value}/add_group.svg`"
loading="lazy" loading="lazy"
class="flex-col object-contain object-center h-16 mb-8 w-16 inline-flex" class="inline-flex flex-col object-contain object-center w-16 h-16 mb-8"
:alt="`${t('empty.teams')}`" :alt="`${t('empty.teams')}`"
/> />
<span class="text-center mb-4"> <span class="mb-4 text-center">
{{ t("empty.teams") }} {{ t("empty.teams") }}
</span> </span>
<ButtonSecondary <ButtonSecondary

16
packages/hoppscotch-app/pages/documentation.vue
View File

@@ -13,18 +13,18 @@
:size="COLUMN_LAYOUT ? 45 : 50" :size="COLUMN_LAYOUT ? 45 : 50"
class="hide-scrollbar !overflow-auto" class="hide-scrollbar !overflow-auto"
> >
<div class="flex p-4 items-start justify-between"> <div class="flex items-start justify-between p-4">
<label> <label>
{{ $t("documentation.generate_message") }} {{ $t("documentation.generate_message") }}
</label> </label>
<span <span
class="bg-accentDark rounded text-accentContrast py-1 px-2 inline-flex" class="inline-flex px-2 py-1 rounded bg-accentDark text-accentContrast"
> >
BETA BETA
</span> </span>
</div> </div>
<div <div
class="bg-primary border-b border-dividerLight flex top-0 z-10 sticky items-start justify-between" class="sticky top-0 z-10 flex items-start justify-between border-b bg-primary border-dividerLight"
> >
<label for="collectionUpload"> <label for="collectionUpload">
<ButtonSecondary <ButtonSecondary
@@ -53,12 +53,12 @@
<textarea-autosize <textarea-autosize
id="import-curl" id="import-curl"
v-model="collectionJSON" v-model="collectionJSON"
class="bg-primary font-mono p-4 w-full" class="w-full p-4 font-mono bg-primary"
autofocus autofocus
rows="8" rows="8"
/> />
<div <div
class="bg-primary border-t border-b border-dividerLight flex p-4 bottom-0 z-10 sticky items-start justify-between" class="sticky bottom-0 z-10 flex items-start justify-between p-4 border-t border-b bg-primary border-dividerLight"
> >
<ButtonPrimary <ButtonPrimary
:label="$t('documentation.generate')" :label="$t('documentation.generate')"
@@ -73,16 +73,16 @@
<div class="flex flex-col"> <div class="flex flex-col">
<div <div
v-if="items.length === 0" v-if="items.length === 0"
class="flex flex-col text-secondaryLight p-4 items-center justify-center" class="flex flex-col items-center justify-center p-4 text-secondaryLight"
> >
<i class="opacity-75 pb-2 material-icons">topic</i> <i class="pb-2 opacity-75 material-icons">topic</i>
<span class="text-center"> <span class="text-center">
{{ $t("helpers.generate_documentation_first") }} {{ $t("helpers.generate_documentation_first") }}
</span> </span>
</div> </div>
<div <div
v-else v-else
class="bg-primary border-b border-dividerLight flex flex-1 p-4 top-0 z-10 sticky" class="sticky top-0 z-10 flex flex-1 p-4 border-b bg-primary border-dividerLight"
> >
<span <span
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"

2
packages/hoppscotch-app/pages/enter.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="flex flex-col min-h-screen items-center justify-center"> <div class="flex flex-col items-center justify-center min-h-screen">
<SmartSpinner v-if="signingInWithEmail" /> <SmartSpinner v-if="signingInWithEmail" />
<SmartLoadingIndicator v-else /> <SmartLoadingIndicator v-else />
<pre v-if="error">{{ error }}</pre> <pre v-if="error">{{ error }}</pre>

22
packages/hoppscotch-app/pages/join-team.vue
View File

@@ -1,10 +1,10 @@
<template> <template>
<div class="flex flex-col min-h-screen items-center justify-between"> <div class="flex flex-col items-center justify-between min-h-screen">
<div <div
v-if="invalidLink" v-if="invalidLink"
class="flex flex-col flex-1 items-center justify-center" class="flex flex-col items-center justify-center flex-1"
> >
<i class="opacity-75 pb-2 material-icons">error_outline</i> <i class="pb-2 opacity-75 material-icons">error_outline</i>
<h1 class="text-center heading"> <h1 class="text-center heading">
{{ $t("team.invalid_invite_link") }} {{ $t("team.invalid_invite_link") }}
</h1> </h1>
@@ -14,13 +14,13 @@
</div> </div>
<div <div
v-else-if="loadingCurrentUser" v-else-if="loadingCurrentUser"
class="flex flex-col flex-1 p-4 items-center justify-center" class="flex flex-col items-center justify-center flex-1 p-4"
> >
<SmartSpinner /> <SmartSpinner />
</div> </div>
<div <div
v-else-if="currentUser === null" v-else-if="currentUser === null"
class="flex flex-col flex-1 p-4 items-center justify-center" class="flex flex-col items-center justify-center flex-1 p-4"
> >
<h1 class="heading">{{ $t("team.login_to_continue") }}</h1> <h1 class="heading">{{ $t("team.login_to_continue") }}</h1>
<p class="mt-2">{{ $t("team.login_to_continue_description") }}</p> <p class="mt-2">{{ $t("team.login_to_continue_description") }}</p>
@@ -30,24 +30,24 @@
@click.native="showLogin = true" @click.native="showLogin = true"
/> />
</div> </div>
<div v-else class="flex flex-col flex-1 p-4 items-center justify-center"> <div v-else class="flex flex-col items-center justify-center flex-1 p-4">
<div <div
v-if="inviteDetails.loading" v-if="inviteDetails.loading"
class="flex flex-col flex-1 p-4 items-center justify-center" class="flex flex-col items-center justify-center flex-1 p-4"
> >
<SmartSpinner /> <SmartSpinner />
</div> </div>
<div v-else> <div v-else>
<div <div
v-if="!inviteDetails.loading && E.isLeft(inviteDetails.data)" v-if="!inviteDetails.loading && E.isLeft(inviteDetails.data)"
class="flex flex-col p-4 items-center" class="flex flex-col items-center p-4"
> >
<i class="mb-4 material-icons">error_outline</i> <i class="mb-4 material-icons">error_outline</i>
<p> <p>
{{ getErrorMessage(inviteDetails.data.left) }} {{ getErrorMessage(inviteDetails.data.left) }}
</p> </p>
<p <p
class="border border-dividerLight rounded flex flex-col mt-8 p-4 items-center" class="flex flex-col items-center p-4 mt-8 border rounded border-dividerLight"
> >
<span class="mb-4"> <span class="mb-4">
{{ $t("team.logout_and_try_again") }} {{ $t("team.logout_and_try_again") }}
@@ -66,7 +66,7 @@
E.isRight(inviteDetails.data) && E.isRight(inviteDetails.data) &&
!joinTeamSuccess !joinTeamSuccess
" "
class="flex flex-col flex-1 p-4 items-center justify-center" class="flex flex-col items-center justify-center flex-1 p-4"
> >
<h1 class="heading"> <h1 class="heading">
{{ {{
@@ -103,7 +103,7 @@
E.isRight(inviteDetails.data) && E.isRight(inviteDetails.data) &&
joinTeamSuccess joinTeamSuccess
" "
class="flex flex-col flex-1 p-4 items-center justify-center" class="flex flex-col items-center justify-center flex-1 p-4"
> >
<h1 class="heading"> <h1 class="heading">
{{ {{

18
packages/hoppscotch-app/pages/profile.vue
View File

@@ -9,10 +9,10 @@
<img <img
:src="`/images/states/${$colorMode.value}/login.svg`" :src="`/images/states/${$colorMode.value}/login.svg`"
loading="lazy" loading="lazy"
class="flex-col object-contain object-center h-24 my-4 w-24 inline-flex" class="inline-flex flex-col object-contain object-center w-24 h-24 my-4"
:alt="`${t('empty.parameters')}`" :alt="`${t('empty.parameters')}`"
/> />
<p class="text-center text-secondaryLight pb-4"> <p class="pb-4 text-center text-secondaryLight">
{{ t("empty.profile") }} {{ t("empty.profile") }}
</p> </p>
<ButtonPrimary <ButtonPrimary
@@ -23,15 +23,15 @@
</div> </div>
<div v-else class="space-y-8"> <div v-else class="space-y-8">
<div <div
class="bg-primaryLight rounded h-24 -mb-11 md:h-32" class="h-24 rounded bg-primaryLight -mb-11 md:h-32"
style="background-image: url('/images/cover.svg')" style="background-image: url('/images/cover.svg')"
></div> ></div>
<div class="flex flex-col space-y-8 px-4 justify-between md:flex-row"> <div class="flex flex-col justify-between px-4 space-y-8 md:flex-row">
<div class="flex items-end"> <div class="flex items-end">
<img <img
v-if="currentUser.photoURL" v-if="currentUser.photoURL"
:src="currentUser.photoURL" :src="currentUser.photoURL"
class="rounded-lg h-16 ring-primary ring-4 w-16" class="w-16 h-16 rounded-lg ring-primary ring-4"
:alt="`${currentUser.displayName}`" :alt="`${currentUser.displayName}`"
/> />
<SmartIcon v-else name="user" class="svg-icons" /> <SmartIcon v-else name="user" class="svg-icons" />
@@ -39,7 +39,7 @@
<label class="heading"> <label class="heading">
{{ currentUser.displayName || t("state.nothing_found") }} {{ currentUser.displayName || t("state.nothing_found") }}
</label> </label>
<p class="flex text-secondaryLight items-center"> <p class="flex items-center text-secondaryLight">
{{ currentUser.email }} {{ currentUser.email }}
<SmartIcon <SmartIcon
v-if="currentUser.emailVerified" v-if="currentUser.emailVerified"
@@ -50,14 +50,14 @@
v-else v-else
:label="t('settings.verify_email')" :label="t('settings.verify_email')"
svg="verified" svg="verified"
class="ml-2 py-0 px-1" class="px-1 py-0 ml-2"
:loading="verifyingEmailAddress" :loading="verifyingEmailAddress"
@click.native="sendEmailVerification" @click.native="sendEmailVerification"
/> />
</p> </p>
</div> </div>
</div> </div>
<div class="flex space-x-2 items-end"> <div class="flex items-end space-x-2">
<div> <div>
<SmartItem <SmartItem
to="/settings" to="/settings"
@@ -144,7 +144,7 @@
<div class="my-1 text-secondaryLight"> <div class="my-1 text-secondaryLight">
{{ t("settings.sync_description") }} {{ t("settings.sync_description") }}
</div> </div>
<div class="space-y-4 py-4"> <div class="py-4 space-y-4">
<div class="flex items-center"> <div class="flex items-center">
<SmartToggle <SmartToggle
:on="SYNC_COLLECTIONS" :on="SYNC_COLLECTIONS"

14
packages/hoppscotch-app/pages/r/_id.vue
View File

@@ -2,9 +2,9 @@
<div class="flex flex-col items-center justify-between"> <div class="flex flex-col items-center justify-between">
<div <div
v-if="invalidLink" v-if="invalidLink"
class="flex flex-col flex-1 items-center justify-center" class="flex flex-col items-center justify-center flex-1"
> >
<i class="opacity-75 pb-2 material-icons">error_outline</i> <i class="pb-2 opacity-75 material-icons">error_outline</i>
<h1 class="text-center heading"> <h1 class="text-center heading">
{{ $t("error.invalid_link") }} {{ $t("error.invalid_link") }}
</h1> </h1>
@@ -12,19 +12,19 @@
{{ $t("error.invalid_link_description") }} {{ $t("error.invalid_link_description") }}
</p> </p>
</div> </div>
<div v-else class="flex flex-col flex-1 p-4 items-center justify-center"> <div v-else class="flex flex-col items-center justify-center flex-1 p-4">
<div <div
v-if="shortcodeDetails.loading" v-if="shortcodeDetails.loading"
class="flex flex-col flex-1 p-4 items-center justify-center" class="flex flex-col items-center justify-center flex-1 p-4"
> >
<SmartSpinner /> <SmartSpinner />
</div> </div>
<div v-else> <div v-else>
<div <div
v-if="!shortcodeDetails.loading && E.isLeft(shortcodeDetails.data)" v-if="!shortcodeDetails.loading && E.isLeft(shortcodeDetails.data)"
class="flex flex-col p-4 items-center" class="flex flex-col items-center p-4"
> >
<i class="opacity-75 pb-2 material-icons">error_outline</i> <i class="pb-2 opacity-75 material-icons">error_outline</i>
<h1 class="text-center heading"> <h1 class="text-center heading">
{{ $t("error.invalid_link") }} {{ $t("error.invalid_link") }}
</h1> </h1>
@@ -43,7 +43,7 @@
</div> </div>
<div <div
v-if="!shortcodeDetails.loading && E.isRight(shortcodeDetails.data)" v-if="!shortcodeDetails.loading && E.isRight(shortcodeDetails.data)"
class="flex flex-col flex-1 p-4 items-center justify-center" class="flex flex-col items-center justify-center flex-1 p-4"
> >
<h1 class="heading"> <h1 class="heading">
{{ $t("state.loading") }} {{ $t("state.loading") }}

18
packages/hoppscotch-app/pages/settings.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<div class="container divide-dividerLight divide-y space-y-8"> <div class="container space-y-8 divide-y divide-dividerLight">
<div class="md:grid md:gap-4 md:grid-cols-3"> <div class="md:grid md:gap-4 md:grid-cols-3">
<div class="p-8 md:col-span-1"> <div class="p-8 md:col-span-1">
<h3 class="heading"> <h3 class="heading">
@@ -10,7 +10,7 @@
{{ t("settings.theme_description") }} {{ t("settings.theme_description") }}
</p> </p>
</div> </div>
<div class="space-y-8 p-8 md:col-span-2"> <div class="p-8 space-y-8 md:col-span-2">
<section> <section>
<h4 class="font-semibold text-secondaryDark"> <h4 class="font-semibold text-secondaryDark">
{{ t("settings.background") }} {{ t("settings.background") }}
@@ -68,7 +68,7 @@
{{ t("app.contact_us") }} </SmartLink {{ t("app.contact_us") }} </SmartLink
>. >.
</div> </div>
<div class="space-y-4 py-4"> <div class="py-4 space-y-4">
<div class="flex items-center"> <div class="flex items-center">
<SmartToggle :on="TELEMETRY_ENABLED" @change="showConfirmModal"> <SmartToggle :on="TELEMETRY_ENABLED" @change="showConfirmModal">
{{ t("settings.telemetry") }} {{ t("settings.telemetry") }}
@@ -109,7 +109,7 @@
{{ t("settings.interceptor_description") }} {{ t("settings.interceptor_description") }}
</p> </p>
</div> </div>
<div class="space-y-8 p-8 md:col-span-2"> <div class="p-8 space-y-8 md:col-span-2">
<section> <section>
<h4 class="font-semibold text-secondaryDark"> <h4 class="font-semibold text-secondaryDark">
{{ t("settings.extensions") }} {{ t("settings.extensions") }}
@@ -127,7 +127,7 @@
{{ t("settings.extension_ver_not_reported") }} {{ t("settings.extension_ver_not_reported") }}
</span> </span>
</div> </div>
<div class="flex flex-col space-y-2 py-4"> <div class="flex flex-col py-4 space-y-2">
<span> <span>
<SmartItem <SmartItem
to="https://chrome.google.com/webstore/detail/hoppscotch-browser-extens/amknoiejhlmhancpahfcfcfhllgkpbld" to="https://chrome.google.com/webstore/detail/hoppscotch-browser-extens/amknoiejhlmhancpahfcfcfhllgkpbld"
@@ -151,7 +151,7 @@
/> />
</span> </span>
</div> </div>
<div class="space-y-4 py-4"> <div class="py-4 space-y-4">
<div class="flex items-center"> <div class="flex items-center">
<SmartToggle <SmartToggle
:on="EXTENSIONS_ENABLED" :on="EXTENSIONS_ENABLED"
@@ -180,7 +180,7 @@
{{ t("app.proxy_privacy_policy") }} </SmartLink {{ t("app.proxy_privacy_policy") }} </SmartLink
>. >.
</div> </div>
<div class="space-y-4 py-4"> <div class="py-4 space-y-4">
<div class="flex items-center"> <div class="flex items-center">
<SmartToggle <SmartToggle
:on="PROXY_ENABLED" :on="PROXY_ENABLED"
@@ -190,8 +190,8 @@
</SmartToggle> </SmartToggle>
</div> </div>
</div> </div>
<div class="flex space-x-2 py-4 items-center"> <div class="flex items-center py-4 space-x-2">
<div class="flex flex-col flex-1 relative"> <div class="relative flex flex-col flex-1">
<input <input
id="url" id="url"
v-model="PROXY_URL" v-model="PROXY_URL"