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

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

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

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

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

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

@@ -6,7 +6,7 @@
>
<template #body>
<div class="flex flex-col px-2">
<div class="flex relative">
<div class="relative flex">
<input
id="selectLabelEnvEdit"
v-model="name"
@@ -22,7 +22,7 @@
{{ $t("action.label") }}
</label>
</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">
{{ $t("environment.variable_list") }}
</label>
@@ -41,21 +41,21 @@
/>
</div>
</div>
<div class="divide-dividerLight divide-y border border-divider rounded">
<div class="border divide-y rounded divide-dividerLight border-divider">
<div
v-for="(variable, index) in vars"
:key="`variable-${index}`"
class="divide-dividerLight divide-x flex"
class="flex divide-x divide-dividerLight"
>
<input
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 })}`"
:name="'param' + index"
/>
<input
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 })}`"
:name="'value' + index"
/>
@@ -72,15 +72,15 @@
</div>
<div
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
:src="`/images/states/${$colorMode.value}/blockchain.svg`"
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')}`"
/>
<span class="text-center pb-4">
<span class="pb-4 text-center">
{{ $t("empty.environments") }}
</span>
<ButtonSecondary

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

@@ -4,13 +4,13 @@
@contextmenu.prevent="options.tippy().show()"
>
<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')"
>
<SmartIcon class="svg-icons" name="layers" />
</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')"
>
<span class="truncate">

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

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

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

@@ -1,22 +1,22 @@
<template>
<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>
<template #trigger>
<span
v-tippy="{ theme: 'tooltip' }"
: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
v-if="selectedEnvironmentIndex !== -1"
:label="environments[selectedEnvironmentIndex].name"
class="rounded-none flex-1 pr-8"
class="flex-1 pr-8 rounded-none"
/>
<ButtonSecondary
v-else
:label="`${$t('environment.no_environment')}`"
class="rounded-none flex-1 pr-8"
class="flex-1 pr-8 rounded-none"
/>
</span>
</template>
@@ -45,7 +45,7 @@
"
/>
</tippy>
<div class="border-b border-dividerLight flex flex-1 justify-between">
<div class="flex justify-between flex-1 border-b border-dividerLight">
<ButtonSecondary
svg="plus"
:label="`${$t('action.new')}`"
@@ -86,15 +86,15 @@
</div>
<div
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
:src="`/images/states/${$colorMode.value}/blockchain.svg`"
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')}`"
/>
<span class="text-center pb-4">
<span class="pb-4 text-center">
{{ $t("empty.environments") }}
</span>
<ButtonSecondary

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

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

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

@@ -21,19 +21,19 @@
</div>
<div
v-if="gqlField.description"
class="text-secondaryLight py-2 field-desc"
class="py-2 text-secondaryLight field-desc"
>
{{ gqlField.description }}
</div>
<div
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") }}
</div>
<div v-if="fieldArgs.length > 0">
<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}`">
<span>
{{ field.name }}:
@@ -44,7 +44,7 @@
</span>
<div
v-if="field.description"
class="text-secondaryLight py-2 field-desc"
class="py-2 text-secondaryLight field-desc"
>
{{ field.description }}
</div>

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

@@ -1,13 +1,13 @@
<template>
<div class="bg-primary flex p-4 top-0 z-10 sticky">
<div class="space-x-2 flex-1 inline-flex">
<div class="sticky top-0 z-10 flex p-4 bg-primary">
<div class="inline-flex flex-1 space-x-2">
<input
id="url"
v-model="url"
type="url"
autocomplete="off"
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')}`"
:disabled="connected"
@keyup.enter="onConnectClick"

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

@@ -8,7 +8,7 @@
:indicator="gqlQueryString && gqlQueryString.length > 0 ? true : false"
>
<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">
{{ t("request.query") }}
@@ -71,7 +71,7 @@
:indicator="variableString && variableString.length > 0 ? true : false"
>
<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">
{{ t("request.variables") }}
@@ -114,7 +114,7 @@
:info="activeGQLHeadersCount === 0 ? null : `${activeGQLHeadersCount}`"
>
<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">
{{ t("tab.headers") }}
@@ -154,7 +154,7 @@
<div
v-for="(header, index) in headers"
: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
:placeholder="`${t('count.header', { count: index + 1 })}`"
@@ -180,7 +180,7 @@
"
/>
<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 })}`"
:name="`value ${String(index)}`"
:value="header.value"
@@ -232,15 +232,15 @@
</div>
<div
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
:src="`/images/states/${$colorMode.value}/add_category.svg`"
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')}`"
/>
<span class="text-center pb-4">
<span class="pb-4 text-center">
{{ t("empty.headers") }}
</span>
<ButtonSecondary

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

@@ -2,14 +2,14 @@
<div>
<div
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" />
<span class="text-secondaryLight">{{ t("state.loading") }}</span>
</div>
<div v-else-if="responseString">
<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">
{{ t("response.title") }}
@@ -42,14 +42,14 @@
</div>
<div
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 flex-col space-y-4 text-right items-end">
<span class="flex flex-1 items-center">
<div class="flex pb-4 my-4 space-x-2">
<div class="flex flex-col items-end space-y-4 text-right">
<span class="flex items-center flex-1">
{{ t("shortcut.general.command_menu") }}
</span>
<span class="flex flex-1 items-center">
<span class="flex items-center flex-1">
{{ t("shortcut.general.help_menu") }}
</span>
</div>

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

@@ -33,26 +33,26 @@
subscriptionFields.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
:src="`/images/states/${$colorMode.value}/add_comment.svg`"
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')}`"
/>
<span class="text-center mb-4">
<span class="mb-4 text-center">
{{ t("empty.documentation") }}
</span>
</div>
<div v-else>
<div class="bg-primary flex top-0 z-10 sticky">
<div class="sticky top-0 z-10 flex bg-primary">
<input
v-model="graphqlFieldsFilterText"
type="search"
autocomplete="off"
: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">
<ButtonSecondary
@@ -74,7 +74,7 @@
:id="'queries'"
:label="`${t('tab.queries')}`"
:selected="true"
class="divide-dividerLight divide-y"
class="divide-y divide-dividerLight"
>
<GraphqlField
v-for="(field, index) in filteredQueryFields"
@@ -88,7 +88,7 @@
v-if="mutationFields.length > 0"
:id="'mutations'"
:label="`${t('graphql.mutations')}`"
class="divide-dividerLight divide-y"
class="divide-y divide-dividerLight"
>
<GraphqlField
v-for="(field, index) in filteredMutationFields"
@@ -102,7 +102,7 @@
v-if="subscriptionFields.length > 0"
:id="'subscriptions'"
:label="`${t('graphql.subscriptions')}`"
class="divide-dividerLight divide-y"
class="divide-y divide-dividerLight"
>
<GraphqlField
v-for="(field, index) in filteredSubscriptionFields"
@@ -117,7 +117,7 @@
:id="'types'"
ref="typesTab"
:label="`${t('tab.types')}`"
class="divide-dividerLight divide-y"
class="divide-y divide-dividerLight"
>
<GraphqlType
v-for="(type, index) in filteredGraphqlTypes"
@@ -137,7 +137,7 @@
<SmartTab :id="'schema'" icon="box" :label="`${t('tab.schema')}`">
<div
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">
{{ t("graphql.schema") }}
@@ -176,15 +176,15 @@
<div v-if="schemaString" ref="schemaEditor"></div>
<div
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
:src="`/images/states/${$colorMode.value}/blockchain.svg`"
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')}`"
/>
<span class="text-center mb-4">
<span class="mb-4 text-center">
{{ t("empty.schema") }}
</span>
</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>
{{ gqlType.name }}
</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 }}
</div>
<div v-if="interfaces.length > 0">
@@ -18,7 +18,7 @@
<GraphqlTypeLink
:gql-type="gqlInterface"
:jump-type-callback="jumpTypeCallback"
class="border-divider border-l-2 pl-4"
class="pl-4 border-l-2 border-divider"
/>
</div>
</div>
@@ -29,7 +29,7 @@
:key="`child-${index}`"
:gql-type="child"
:jump-type-callback="jumpTypeCallback"
class="border-divider border-l-2 pl-4"
class="pl-4 border-l-2 border-divider"
/>
</div>
<div v-if="gqlType.getFields">
@@ -37,7 +37,7 @@
<GraphqlField
v-for="(field, index) in gqlType.getFields()"
:key="`field-${index}`"
class="border-divider border-l-2 pl-4"
class="pl-4 border-l-2 border-divider"
:gql-field="field"
:is-highlighted="isFieldHighlighted({ field })"
:jump-type-callback="jumpTypeCallback"
@@ -48,7 +48,7 @@
<div
v-for="(value, index) in gqlType.getValues()"
:key="`value-${index}`"
class="border-divider border-l-2 pl-4"
class="pl-4 border-l-2 border-divider"
v-text="value.name"
></div>
</div>

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

@@ -1,7 +1,7 @@
<template>
<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">
<label class="font-semibold text-secondaryLight">
@@ -17,7 +17,7 @@
<template #trigger>
<span class="select-wrapper">
<ButtonSecondary
class="rounded-none ml-2 pr-8"
class="pr-8 ml-2 rounded-none"
:label="authName"
/>
</span>
@@ -130,15 +130,15 @@
</div>
<div
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
:src="`/images/states/${$colorMode.value}/login.svg`"
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')}`"
/>
<span class="text-center pb-4">
<span class="pb-4 text-center">
{{ $t("empty.authorization") }}
</span>
<ButtonSecondary
@@ -151,17 +151,17 @@
class="mb-4"
/>
</div>
<div v-else class="border-b border-dividerLight flex">
<div class="border-r border-dividerLight w-2/3">
<div v-else class="flex border-b border-dividerLight">
<div class="w-2/3 border-r border-dividerLight">
<div v-if="authType === 'basic'">
<div class="border-b border-dividerLight flex">
<div class="flex border-b border-dividerLight">
<SmartEnvInput
v-model="basicUsername"
:placeholder="$t('authorization.username')"
styles="bg-transparent flex flex-1 py-1 px-4"
/>
</div>
<div class="border-b border-dividerLight flex">
<div class="flex border-b border-dividerLight">
<SmartEnvInput
v-model="basicPassword"
:placeholder="$t('authorization.password')"
@@ -170,7 +170,7 @@
</div>
</div>
<div v-if="authType === 'bearer'">
<div class="border-b border-dividerLight flex">
<div class="flex border-b border-dividerLight">
<SmartEnvInput
v-model="bearerToken"
placeholder="Token"
@@ -179,7 +179,7 @@
</div>
</div>
<div v-if="authType === 'oauth-2'">
<div class="border-b border-dividerLight flex">
<div class="flex border-b border-dividerLight">
<SmartEnvInput
v-model="oauth2Token"
placeholder="Token"
@@ -189,22 +189,22 @@
<HttpOAuth2Authorization />
</div>
<div v-if="authType === 'api-key'">
<div class="border-b border-dividerLight flex">
<div class="flex border-b border-dividerLight">
<SmartEnvInput
v-model="apiKey"
placeholder="Key"
styles="bg-transparent flex flex-1 py-1 px-4"
/>
</div>
<div class="border-b border-dividerLight flex">
<div class="flex border-b border-dividerLight">
<SmartEnvInput
v-model="apiValue"
placeholder="Value"
styles="bg-transparent flex flex-1 py-1 px-4"
/>
</div>
<div class="border-b border-dividerLight flex items-center">
<label class="text-secondaryLight ml-4">
<div class="flex items-center border-b border-dividerLight">
<label class="ml-4 text-secondaryLight">
{{ $t("authorization.pass_key_by") }}
</label>
<tippy
@@ -218,7 +218,7 @@
<span class="select-wrapper">
<ButtonSecondary
:label="addTo || $t('state.none')"
class="rounded-none ml-2 pr-8"
class="pr-8 ml-2 rounded-none"
/>
</span>
</template>
@@ -257,9 +257,9 @@
</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") }}
</div>
<SmartAnchor

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

@@ -1,7 +1,7 @@
<template>
<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">
<label class="font-semibold text-secondaryLight">
@@ -18,7 +18,7 @@
<span class="select-wrapper">
<ButtonSecondary
:label="contentType || $t('state.none').toLowerCase()"
class="rounded-none ml-2 pr-8"
class="pr-8 ml-2 rounded-none"
/>
</span>
</template>
@@ -53,15 +53,15 @@
<HttpRawBody v-else-if="contentType !== null" :content-type="contentType" />
<div
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
:src="`/images/states/${$colorMode.value}/upload_single_file.svg`"
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')}`"
/>
<span class="text-center pb-4">
<span class="pb-4 text-center">
{{ $t("empty.body") }}
</span>
<ButtonSecondary

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

@@ -1,7 +1,7 @@
<template>
<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">
{{ $t("request.body") }}
@@ -31,7 +31,7 @@
<div
v-for="(param, index) in bodyParams"
:key="`param-${index}`"
class="divide-dividerLight divide-x border-b border-dividerLight flex"
class="flex border-b divide-x divide-dividerLight border-dividerLight"
>
<SmartEnvInput
v-model="param.key"
@@ -141,15 +141,15 @@
</div>
<div
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
:src="`/images/states/${$colorMode.value}/upload_single_file.svg`"
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')}`"
/>
<span class="text-center pb-4">
<span class="pb-4 text-center">
{{ $t("empty.body") }}
</span>
<ButtonSecondary

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

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

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

@@ -1,7 +1,7 @@
<template>
<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">
{{ t("request.header_list") }}
@@ -41,7 +41,7 @@
<div
v-for="(header, index) in headers$"
:key="`header-${index}`"
class="divide-dividerLight divide-x border-b border-dividerLight flex"
class="flex border-b divide-x divide-dividerLight border-dividerLight"
>
<SmartAutoComplete
:placeholder="`${t('count.header', { count: index + 1 })}`"
@@ -125,15 +125,15 @@
</div>
<div
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
:src="`/images/states/${$colorMode.value}/add_category.svg`"
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')}`"
/>
<span class="text-center pb-4">
<span class="pb-4 text-center">
{{ t("empty.headers") }}
</span>
<ButtonSecondary

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

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

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

@@ -1,46 +1,46 @@
<template>
<div class="flex flex-col">
<div class="border-b border-dividerLight flex">
<div class="flex border-b border-dividerLight">
<input
id="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"
name="oidcDiscoveryURL"
/>
</div>
<div class="border-b border-dividerLight flex">
<div class="flex border-b border-dividerLight">
<input
id="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"
name="authURL"
/>
</div>
<div class="border-b border-dividerLight flex">
<div class="flex border-b border-dividerLight">
<input
id="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"
name="accessTokenURL"
/>
</div>
<div class="border-b border-dividerLight flex">
<div class="flex border-b border-dividerLight">
<input
id="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"
name="clientID"
/>
</div>
<div class="border-b border-dividerLight flex">
<div class="flex border-b border-dividerLight">
<input
id="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"
name="scope"
/>

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

@@ -1,7 +1,7 @@
<template>
<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">
{{ t("request.parameter_list") }}
@@ -41,7 +41,7 @@
<div
v-for="(param, index) in params$"
:key="`param-${index}`"
class="divide-dividerLight divide-x border-b border-dividerLight flex"
class="flex border-b divide-x divide-dividerLight border-dividerLight"
>
<SmartEnvInput
v-model="param.key"
@@ -118,15 +118,15 @@
</div>
<div
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
:src="`/images/states/${$colorMode.value}/add_files.svg`"
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')}`"
/>
<span class="text-center pb-4">
<span class="pb-4 text-center">
{{ t("empty.parameters") }}
</span>
<ButtonSecondary

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

@@ -1,7 +1,7 @@
<template>
<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">
{{ t("preRequest.javascript_code") }}
@@ -29,14 +29,14 @@
/>
</div>
</div>
<div class="border-b border-dividerLight flex">
<div class="border-r border-dividerLight w-2/3">
<div class="flex border-b border-dividerLight">
<div class="w-2/3 border-r border-dividerLight">
<div ref="preRrequestEditor" class="h-full"></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") }}
</div>
<SmartAnchor
@@ -44,7 +44,7 @@
to="https://docs.hoppscotch.io/features/pre-request-script"
blank
/>
<h4 class="font-bold text-secondaryLight pt-6">
<h4 class="pt-6 font-bold text-secondaryLight">
{{ t("preRequest.snippets") }}
</h4>
<div class="flex flex-col pt-4">

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

@@ -1,7 +1,7 @@
<template>
<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">
{{ t("request.raw_body") }}

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

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

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

@@ -1,23 +1,23 @@
<template>
<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
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 flex-col space-y-4 text-right items-end">
<span class="flex flex-1 items-center">
<div class="flex pb-4 my-4 space-x-2">
<div class="flex flex-col items-end space-y-4 text-right">
<span class="flex items-center flex-1">
{{ t("shortcut.request.send_request") }}
</span>
<span class="flex flex-1 items-center">
<span class="flex items-center flex-1">
{{ t("shortcut.general.show_all") }}
</span>
<span class="flex flex-1 items-center">
<span class="flex items-center flex-1">
{{ t("shortcut.general.command_menu") }}
</span>
<span class="flex flex-1 items-center">
<span class="flex items-center flex-1">
{{ t("shortcut.general.help_menu") }}
</span>
</div>
@@ -57,44 +57,44 @@
</div>
<div
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
:src="`/images/states/${$colorMode.value}/youre_lost.svg`"
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')}`"
/>
<span class="font-semibold text-center mb-2">
<span class="mb-2 font-semibold text-center">
{{ t("error.network_fail") }}
</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") }}
</span>
<AppInterceptor class="border border-dividerLight rounded" />
<AppInterceptor class="border rounded border-dividerLight" />
</div>
<div
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
:src="`/images/states/${$colorMode.value}/youre_lost.svg`"
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')}`"
/>
<span class="font-semibold text-center mb-2">
<span class="mb-2 font-semibold text-center">
{{ t("error.script_fail") }}
</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") }}
</span>
<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.stack }}
@@ -102,11 +102,11 @@
</div>
<div
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
: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 class="text-secondary"> {{ t("response.status") }}: </span>

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

@@ -7,7 +7,7 @@
"
>
<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">
{{ t("test.report") }}
@@ -19,8 +19,8 @@
@click.native="clearContent()"
/>
</div>
<div class="divide-dividerLight border-b border-dividerLight divide-y-4">
<div v-if="testResults.tests" class="divide-dividerLight divide-y-4">
<div class="border-b divide-y-4 divide-dividerLight border-dividerLight">
<div v-if="testResults.tests" class="divide-y-4 divide-dividerLight">
<HttpTestResultEntry
v-for="(result, index) in testResults.tests"
:key="`result-${index}`"
@@ -29,7 +29,7 @@
</div>
<div
v-if="testResults.expectResults"
class="divide-dividerLight divide-y"
class="divide-y divide-dividerLight"
>
<HttpTestResultReport
v-if="testResults.expectResults.length"
@@ -38,7 +38,7 @@
<div
v-for="(result, index) in testResults.expectResults"
:key="`result-${index}`"
class="flex py-2 px-4 items-center"
class="flex items-center px-4 py-2"
>
<i
class="mr-4 material-icons"
@@ -64,18 +64,18 @@
</div>
<div
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
:src="`/images/states/${$colorMode.value}/validation.svg`"
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')}`"
/>
<span class="text-center pb-2">
<span class="pb-2 text-center">
{{ t("empty.tests") }}
</span>
<span class="text-center pb-4">
<span class="pb-4 text-center">
{{ t("helpers.tests") }}
</span>
<ButtonSecondary

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

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

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

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

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

@@ -1,7 +1,7 @@
<template>
<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">
{{ t("test.javascript_code") }}
@@ -29,14 +29,14 @@
/>
</div>
</div>
<div class="border-b border-dividerLight flex">
<div class="border-r border-dividerLight w-2/3">
<div class="flex border-b border-dividerLight">
<div class="w-2/3 border-r border-dividerLight">
<div ref="testScriptEditor" class="h-full"></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") }}
</div>
<SmartAnchor
@@ -44,7 +44,7 @@
to="https://docs.hoppscotch.io/features/tests"
blank
/>
<h4 class="font-bold text-secondaryLight pt-6">
<h4 class="pt-6 font-bold text-secondaryLight">
{{ t("test.snippets") }}
</h4>
<div class="flex flex-col pt-4">

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

@@ -1,7 +1,7 @@
<template>
<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">
{{ t("request.header_list") }}
@@ -20,19 +20,19 @@
<div
v-for="(header, index) in headers"
: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
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 }}
</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 }}
</span>
</span>

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

@@ -1,7 +1,7 @@
<template>
<div class="flex flex-col flex-1">
<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">
{{ t("response.body") }}

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

@@ -1,7 +1,7 @@
<template>
<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">
{{ $t("response.body") }}
@@ -18,7 +18,7 @@
</div>
</div>
<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"
loading="lazy"
:alt="imageSource"

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

@@ -1,7 +1,7 @@
<template>
<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">{{
t("response.body")
@@ -36,7 +36,7 @@
<div ref="jsonResponse"></div>
<div
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
v-for="(item, index) in outlinePath"
@@ -115,7 +115,7 @@
</tippy>
<i
v-if="index + 1 !== outlinePath.length"
class="text-secondaryLight opacity-50 material-icons"
class="opacity-50 text-secondaryLight material-icons"
>chevron_right</i
>
</div>

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

@@ -1,7 +1,7 @@
<template>
<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">
{{ t("response.body") }}

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

@@ -1,7 +1,7 @@
<template>
<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">
{{ t("response.body") }}

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

@@ -1,15 +1,15 @@
<template>
<div
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
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"
:alt="alt"
loading="lazy"
/>
<div class="rounded-full shadow-inner inset-0 absolute"></div>
<div class="absolute inset-0 rounded-full shadow-inner"></div>
<span
v-if="indicator"
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>
<div class="flex flex-col">
<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 }}
</label>
</div>

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

@@ -13,15 +13,15 @@
:size="COLUMN_LAYOUT ? 45 : 50"
class="hide-scrollbar !overflow-auto"
>
<div class="bg-primary flex flex-col space-y-4 p-4 top-0 z-10 sticky">
<div class="space-x-2 flex-1 inline-flex">
<div class="sticky top-0 z-10 flex flex-col p-4 space-y-4 bg-primary">
<div class="inline-flex flex-1 space-x-2">
<input
id="mqtt-url"
v-model="url"
type="url"
autocomplete="off"
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')"
:disabled="connectionState"
@keyup.enter="validUrl ? toggleConnection() : null"
@@ -73,7 +73,7 @@
min-size="20"
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">
{{ $t("mqtt.topic") }}
</label>
@@ -89,12 +89,12 @@
spellcheck="false"
/>
</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">
{{ $t("mqtt.communication") }}
</label>
</div>
<div class="flex space-x-2 px-4">
<div class="flex px-4 space-x-2">
<input
id="mqtt-message"
v-model="msg"
@@ -113,13 +113,13 @@
/>
</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">
{{ $t("mqtt.topic") }}
</label>
</div>
<div class="flex space-x-2 px-4">
<div class="flex px-4 space-x-2">
<input
id="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"
class="hide-scrollbar !overflow-auto"
>
<div class="bg-primary flex p-4 top-0 z-10 sticky">
<div class="space-x-2 flex-1 inline-flex">
<div class="sticky top-0 z-10 flex p-4 bg-primary">
<div class="inline-flex flex-1 space-x-2">
<div class="flex flex-1">
<label for="client-version">
<tippy
@@ -30,7 +30,7 @@
id="client-version"
v-tippy="{ theme: 'tooltip' }"
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}`"
readonly
:disabled="connectionState"
@@ -52,7 +52,7 @@
autocomplete="off"
spellcheck="false"
: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')"
:disabled="connectionState"
@keyup.enter="urlValid ? toggleConnection() : null"
@@ -60,7 +60,7 @@
<input
id="socketio-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"
:disabled="connectionState"
@keyup.enter="urlValid ? toggleConnection() : null"
@@ -82,7 +82,7 @@
</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">
<label class="font-semibold text-secondaryLight">
@@ -98,7 +98,7 @@
<template #trigger>
<span class="select-wrapper">
<ButtonSecondary
class="rounded-none ml-2 pr-8"
class="pr-8 ml-2 rounded-none"
:label="authType"
/>
</span>
@@ -160,15 +160,15 @@
</div>
<div
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
:src="`/images/states/${$colorMode.value}/login.svg`"
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')"
/>
<span class="text-center pb-4">
<span class="pb-4 text-center">
This SocketIO connection does not use any authentication.
</span>
<ButtonSecondary
@@ -183,10 +183,10 @@
</div>
<div
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="border-b border-dividerLight flex">
<div class="w-2/3 border-r border-dividerLight">
<div class="flex border-b border-dividerLight">
<SmartEnvInput
v-model="bearerToken"
placeholder="Token"
@@ -195,10 +195,10 @@
</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="text-secondaryLight pb-2">
<div class="pb-2 text-secondaryLight">
{{ $t("helpers.authorization") }}
</div>
<SmartAnchor
@@ -225,7 +225,7 @@
min-size="20"
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">
{{ $t("socketio.events") }}
</label>
@@ -242,7 +242,7 @@
:disabled="!connectionState"
/>
</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">
{{ $t("socketio.communication") }}
</label>
@@ -255,7 +255,7 @@
/>
</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
v-for="(input, index) of communication.inputs"
:key="`input-${index}`"

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

@@ -1,8 +1,8 @@
<template>
<Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
<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="space-x-2 flex-1 inline-flex">
<div class="sticky top-0 z-10 flex p-4 bg-primary">
<div class="inline-flex flex-1 space-x-2">
<div class="flex flex-1">
<input
id="server"
@@ -10,21 +10,21 @@
type="url"
autocomplete="off"
: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')"
:disabled="connectionSSEState"
@keyup.enter="serverValid ? toggleSSEConnection() : null"
/>
<label
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") }}
</label>
<input
id="event-type"
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"
:disabled="connectionSSEState"
@keyup.enter="serverValid ? toggleSSEConnection() : null"

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

@@ -13,12 +13,12 @@
:size="COLUMN_LAYOUT ? 45 : 50"
class="hide-scrollbar !overflow-auto"
>
<div class="bg-primary flex p-4 top-0 z-10 sticky">
<div class="space-x-2 flex-1 inline-flex">
<div class="sticky top-0 z-10 flex p-4 bg-primary">
<div class="inline-flex flex-1 space-x-2">
<input
id="websocket-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"
autocomplete="off"
spellcheck="false"
@@ -43,7 +43,7 @@
</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">
{{ $t("websocket.protocols") }}
@@ -66,11 +66,11 @@
<div
v-for="(protocol, index) of protocols"
:key="`protocol-${index}`"
class="divide-dividerLight divide-x border-b border-dividerLight flex"
class="flex border-b divide-x divide-dividerLight border-dividerLight"
>
<input
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 })"
name="message"
type="text"
@@ -120,15 +120,15 @@
</div>
<div
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
:src="`/images/states/${$colorMode.value}/add_category.svg`"
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')"
/>
<span class="text-center mb-4">
<span class="mb-4 text-center">
{{ $t("empty.protocols") }}
</span>
</div>
@@ -147,7 +147,7 @@
min-size="20"
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="websocket-message"
class="font-semibold text-secondaryLight"
@@ -155,7 +155,7 @@
{{ $t("websocket.communication") }}
</label>
</div>
<div class="flex space-x-2 px-4">
<div class="flex px-4 space-x-2">
<input
id="websocket-message"
v-model="communication.input"

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

@@ -1,6 +1,6 @@
<template>
<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')"
>
<input
@@ -12,7 +12,7 @@
/>
<label
for="checkbox"
class="cursor-pointer font-semibold pl-0 align-middle"
class="pl-0 font-semibold align-middle cursor-pointer"
>
<slot></slot>
</label>

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

@@ -1,7 +1,7 @@
<template>
<span class="chip">
<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
class="rounded close-button"
svg="x"

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

@@ -3,7 +3,7 @@
:to="`${/^\/(?!\/).*$/.test(to) ? localePath(to) : to}`"
:exact="exact"
: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="[
{ 'opacity-75 cursor-not-allowed': disabled },
{ 'pointer-events-none': loading },
@@ -44,7 +44,7 @@
</span>
<SmartSpinner v-else class="mr-4 text-secondaryDark" />
<div
class="flex-1 inline-flex items-start truncate"
class="inline-flex items-start flex-1 truncate"
:class="{ 'flex-col': description }"
>
<div class="font-semibold truncate">
@@ -56,7 +56,7 @@
</div>
<i
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 }"
>
{{ infoIcon }}
@@ -65,7 +65,7 @@
<kbd
v-for="(key, index) in shortcut"
:key="`key-${index}`"
class="shortcut-key -mr-2"
class="-mr-2 shortcut-key"
>
{{ key }}
</kbd>

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

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

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

@@ -2,14 +2,14 @@
<transition name="fade" appear @leave="onTransitionLeaveStart">
<div
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
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>
<div
class="bg-primaryLight opacity-90 inset-0 transition fixed"
class="fixed inset-0 transition bg-primaryLight opacity-90"
@touchstart="!dialog ? close() : null"
@touchend="!dialog ? close() : null"
@mouseup="!dialog ? close() : null"
@@ -18,7 +18,7 @@
</transition>
<span
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"
>&#8203;</span
>
@@ -32,7 +32,7 @@
leave-to-class="scale-95 translate-y-4"
>
<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="[
{ 'mt-24 md:mb-8': placement === 'top' },
{ 'p-4': !fullWidth },
@@ -41,7 +41,7 @@
>
<div
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>
<span class="flex">
@@ -54,14 +54,14 @@
</span>
</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 }"
>
<slot name="body"></slot>
</div>
<div
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>
</div>

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

@@ -1,6 +1,6 @@
<template>
<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)"
>
<span class="inline-flex mr-4">
@@ -9,7 +9,7 @@
</i>
<i v-else class="material-icons">radio_button_unchecked</i>
</span>
<span class="font-semibold inline-flex">{{ label }}</span>
<span class="inline-flex font-semibold">{{ label }}</span>
</div>
</template>

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

@@ -1,6 +1,6 @@
<template>
<div
class="flex flex-nowrap h-full flex-1"
class="flex flex-1 h-full flex-nowrap"
:class="{ 'flex-col h-auto': !vertical }"
>
<div
@@ -9,7 +9,7 @@
>
<div class="flex flex-1">
<div
class="flex flex-1 justify-between"
class="flex justify-between flex-1"
:class="{ 'flex-col': vertical }"
>
<div class="flex" :class="{ 'flex-col space-y-2 p-2': vertical }">
@@ -35,7 +35,7 @@
</span>
<span
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>
</button>
</div>
@@ -46,7 +46,7 @@
</div>
</div>
<div
class="h-full w-full contents"
class="w-full h-full contents"
:class="{
'!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>
<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')"
>
<span ref="toggle" class="toggle" :class="{ on: on }">
<span class="handle"></span>
</span>
<span class="cursor-pointer font-semibold pl-0 align-middle">
<span class="pl-0 font-semibold align-middle cursor-pointer">
<slot></slot>
</span>
</div>

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

@@ -3,7 +3,7 @@
:to="`${/^\/(?!\/).*$/.test(to) ? localePath(to) : to}`"
:exact="exact"
: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="[
color
? `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}`"
:exact="exact"
: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="[
label ? 'px-4' : 'px-2',
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">
<template #body>
<div class="flex flex-col px-2">
<div class="flex relative">
<div class="relative flex">
<input
id="selectLabelTeamEdit"
v-model="name"
@@ -17,7 +17,7 @@
{{ t("action.label") }}
</label>
</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">
{{ t("team.members") }}
</label>
@@ -47,19 +47,19 @@
E.isRight(teamDetails.data) &&
teamDetails.data.right.team.teamMembers
"
class="divide-dividerLight divide-y border border-divider rounded"
class="border divide-y rounded divide-dividerLight border-divider"
>
<div
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
:src="`/images/states/${$colorMode.value}/add_group.svg`"
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')}`"
/>
<span class="text-center pb-4">
<span class="pb-4 text-center">
{{ t("empty.members") }}
</span>
<ButtonSecondary
@@ -76,10 +76,10 @@
<div
v-for="(member, index) in membersList"
:key="`member-${index}`"
class="divide-dividerLight divide-x flex"
class="flex divide-x divide-dividerLight"
>
<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')}`"
:name="'param' + index"
:value="member.email"
@@ -96,7 +96,7 @@
<template #trigger>
<span class="select-wrapper">
<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')}`"
:name="'value' + index"
: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">
<template #body>
<div v-if="sendInvitesResult.length" class="flex flex-col px-4">
<div class="flex flex-col max-w-md items-center justify-center">
<SmartIcon class="h-6 text-accent w-6" name="users" />
<div class="flex flex-col items-center justify-center max-w-md">
<SmartIcon class="w-6 h-6 text-accent" name="users" />
<h3 class="my-2 text-lg text-center">
{{ t("team.we_sent_invite_link") }}
</h3>
@@ -12,7 +12,7 @@
</p>
</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
v-for="(invitee, index) in sendInvitesResult"
@@ -41,20 +41,20 @@
</div>
<div
v-else-if="sendingInvites"
class="flex p-4 items-center justify-center"
class="flex items-center justify-center p-4"
>
<SmartSpinner />
</div>
<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">
{{ t("team.pending_invites") }}
</label>
</div>
<div class="divide-dividerLight divide-y border border-divider rounded">
<div class="border divide-y rounded divide-dividerLight border-divider">
<div
v-if="pendingInvites.loading"
class="flex p-4 items-center justify-center"
class="flex items-center justify-center p-4"
>
<SmartSpinner />
</div>
@@ -66,18 +66,18 @@
v-for="(invitee, index) in pendingInvites.data.right.team
.teamInvitations"
:key="`invitee-${index}`"
class="divide-dividerLight divide-x flex"
class="flex divide-x divide-dividerLight"
>
<input
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')}`"
:name="'param' + index"
:value="invitee.inviteeEmail"
readonly
/>
<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')}`"
:name="'value' + index"
:value="invitee.inviteeRole"
@@ -99,7 +99,7 @@
E.isRight(pendingInvites.data) &&
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">
{{ t("empty.pending_invites") }}
@@ -107,14 +107,14 @@
</div>
<div
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>
{{ t("error.something_went_wrong") }}
</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">
{{ t("team.invite_tooltip") }}
</label>
@@ -127,15 +127,15 @@
/>
</div>
</div>
<div class="divide-dividerLight divide-y border border-divider rounded">
<div class="border divide-y rounded divide-dividerLight border-divider">
<div
v-for="(invitee, index) in newInvites"
:key="`new-invitee-${index}`"
class="divide-dividerLight divide-x flex"
class="flex divide-x divide-dividerLight"
>
<input
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')}`"
:name="'invitee' + index"
autofocus
@@ -151,7 +151,7 @@
<template #trigger>
<span class="select-wrapper">
<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')}`"
:name="'value' + index"
:value="invitee.value"
@@ -219,15 +219,15 @@
</div>
<div
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
:src="`/images/states/${$colorMode.value}/add_group.svg`"
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')}`"
/>
<span class="text-center pb-4">
<span class="pb-4 text-center">
{{ t("empty.invites") }}
</span>
<ButtonSecondary
@@ -239,10 +239,10 @@
</div>
<div
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
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>
{{ t("profile.roles") }}
@@ -252,10 +252,10 @@
{{ t("profile.roles_description") }}
</span>
</p>
<ul class="space-y-4 mt-4">
<ul class="mt-4 space-y-4">
<li class="flex">
<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") }}
</span>
@@ -265,7 +265,7 @@
</li>
<li class="flex">
<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") }}
</span>
@@ -275,7 +275,7 @@
</li>
<li class="flex">
<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") }}
</span>
@@ -290,7 +290,7 @@
<template #footer>
<p
v-if="sendInvitesResult.length"
class="flex flex-1 text-secondaryLight justify-between"
class="flex justify-between flex-1 text-secondaryLight"
>
<SmartAnchor
class="link"

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

@@ -1,10 +1,10 @@
<template>
<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"
>
<div
class="flex flex-1 items-start"
class="flex items-start flex-1"
:class="
compact
? team.myRole === 'OWNER'
@@ -27,7 +27,7 @@
>
{{ team.name || t("state.nothing_found") }}
</label>
<div class="flex -space-x-1 mt-2 overflow-hidden">
<div class="flex mt-2 -space-x-1 overflow-hidden">
<img
v-for="(member, index) in team.teamMembers"
:key="`member-${index}`"
@@ -35,13 +35,13 @@
:title="member.user.displayName"
:src="member.user.photoURL || undefined"
: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"
/>
</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>
<ButtonSecondary
v-if="team.myRole === 'OWNER'"

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

@@ -1,6 +1,6 @@
<template>
<div>
<div class="space-y-4 p-4">
<div class="p-4 space-y-4">
<ButtonSecondary
:label="`${t('team.create_new')}`"
outline
@@ -19,15 +19,15 @@
E.isRight(myTeams.data) &&
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
:src="`/images/states/${$colorMode.value}/add_group.svg`"
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')}`"
/>
<span class="text-center mb-4">
<span class="mb-4 text-center">
{{ t("empty.teams") }}
</span>
<ButtonSecondary

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

@@ -13,18 +13,18 @@
:size="COLUMN_LAYOUT ? 45 : 50"
class="hide-scrollbar !overflow-auto"
>
<div class="flex p-4 items-start justify-between">
<div class="flex items-start justify-between p-4">
<label>
{{ $t("documentation.generate_message") }}
</label>
<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
</span>
</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">
<ButtonSecondary
@@ -53,12 +53,12 @@
<textarea-autosize
id="import-curl"
v-model="collectionJSON"
class="bg-primary font-mono p-4 w-full"
class="w-full p-4 font-mono bg-primary"
autofocus
rows="8"
/>
<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
:label="$t('documentation.generate')"
@@ -73,16 +73,16 @@
<div class="flex flex-col">
<div
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">
{{ $t("helpers.generate_documentation_first") }}
</span>
</div>
<div
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
v-tippy="{ theme: 'tooltip' }"

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

@@ -1,5 +1,5 @@
<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" />
<SmartLoadingIndicator v-else />
<pre v-if="error">{{ error }}</pre>

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

@@ -1,10 +1,10 @@
<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
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">
{{ $t("team.invalid_invite_link") }}
</h1>
@@ -14,13 +14,13 @@
</div>
<div
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 />
</div>
<div
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>
<p class="mt-2">{{ $t("team.login_to_continue_description") }}</p>
@@ -30,24 +30,24 @@
@click.native="showLogin = true"
/>
</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
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 />
</div>
<div v-else>
<div
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>
<p>
{{ getErrorMessage(inviteDetails.data.left) }}
</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">
{{ $t("team.logout_and_try_again") }}
@@ -66,7 +66,7 @@
E.isRight(inviteDetails.data) &&
!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">
{{
@@ -103,7 +103,7 @@
E.isRight(inviteDetails.data) &&
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">
{{

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

@@ -9,10 +9,10 @@
<img
:src="`/images/states/${$colorMode.value}/login.svg`"
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')}`"
/>
<p class="text-center text-secondaryLight pb-4">
<p class="pb-4 text-center text-secondaryLight">
{{ t("empty.profile") }}
</p>
<ButtonPrimary
@@ -23,15 +23,15 @@
</div>
<div v-else class="space-y-8">
<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')"
></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">
<img
v-if="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}`"
/>
<SmartIcon v-else name="user" class="svg-icons" />
@@ -39,7 +39,7 @@
<label class="heading">
{{ currentUser.displayName || t("state.nothing_found") }}
</label>
<p class="flex text-secondaryLight items-center">
<p class="flex items-center text-secondaryLight">
{{ currentUser.email }}
<SmartIcon
v-if="currentUser.emailVerified"
@@ -50,14 +50,14 @@
v-else
:label="t('settings.verify_email')"
svg="verified"
class="ml-2 py-0 px-1"
class="px-1 py-0 ml-2"
:loading="verifyingEmailAddress"
@click.native="sendEmailVerification"
/>
</p>
</div>
</div>
<div class="flex space-x-2 items-end">
<div class="flex items-end space-x-2">
<div>
<SmartItem
to="/settings"
@@ -144,7 +144,7 @@
<div class="my-1 text-secondaryLight">
{{ t("settings.sync_description") }}
</div>
<div class="space-y-4 py-4">
<div class="py-4 space-y-4">
<div class="flex items-center">
<SmartToggle
: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
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">
{{ $t("error.invalid_link") }}
</h1>
@@ -12,19 +12,19 @@
{{ $t("error.invalid_link_description") }}
</p>
</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
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 />
</div>
<div v-else>
<div
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">
{{ $t("error.invalid_link") }}
</h1>
@@ -43,7 +43,7 @@
</div>
<div
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">
{{ $t("state.loading") }}

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

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