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

refactor: sort windi class names

Browse Source
This commit is contained in:
liyasthomas
2021-12-01 22:59:01 +05:30
parent 520ac8ede5
commit a508909471
91 changed files with 518 additions and 512 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -19,7 +19,8 @@
@apply bg-divider bg-clip-content; @apply bg-divider bg-clip-content;
@apply rounded-full; @apply rounded-full;
@apply border-solid border-transparent border-4; @apply border-solid border-transparent border-4;
@apply hover:(bg-dividerDark bg-clip-content); @apply hover:bg-dividerDark;
@apply hover:bg-clip-content;
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
@@ -130,7 +131,8 @@ a {
@apply text-accent; @apply text-accent;
@apply rounded; @apply rounded;
@apply hover:text-accentDark; @apply hover:text-accentDark;
@apply focus-visible:(ring ring-accent); @apply focus-visible:ring;
@apply focus-visible:ring-accent;
} }
} }
@@ -336,7 +338,8 @@ pre.ace_editor {
@apply rounded; @apply rounded;
@apply text-current; @apply text-current;
@apply normal-case; @apply normal-case;
@apply hover:(bg-opacity-20 no-underline); @apply hover:bg-opacity-20;
@apply hover:no-underline;
@apply font-medium; @apply font-medium;
font-size: var(--body-font-size); font-size: var(--body-font-size);

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

@@ -1,14 +1,14 @@
<template> <template>
<div class="bg-error flex justify-between"> <div class="bg-error flex justify-between">
<span <span
class="group relative flex items-center justify-center px-4 py-2 transition" class="flex py-2 px-4 transition justify-center group relative items-center"
> >
<i class="material-icons mr-2">info_outline</i> <i class="mr-2 material-icons">info_outline</i>
<span class="text-secondaryDark"> <span class="text-secondaryDark">
<span class="md:hidden"> <span class="md:hidden">
{{ t("helpers.offline_short") }} {{ t("helpers.offline_short") }}
</span> </span>
<span class="md:inline hidden"> <span class="hidden md:inline">
{{ t("helpers.offline") }} {{ t("helpers.offline") }}
</span> </span>
</span> </span>

4
packages/hoppscotch-app/components/app/Footer.vue
View File

@@ -107,7 +107,7 @@
@click.native="$refs.options.tippy().hide()" @click.native="$refs.options.tippy().hide()"
/> />
<!-- <SmartItem :label="t('app.status')" /> --> <!-- <SmartItem :label="t('app.status')" /> -->
<div class="flex px-4 py-2 opacity-50"> <div class="flex opacity-50 py-2 px-4">
{{ `${t("app.name")} ${t("app.version")}` }} {{ `${t("app.name")} ${t("app.version")}` }}
</div> </div>
</div> </div>
@@ -135,7 +135,7 @@
@click.native="COLUMN_LAYOUT = !COLUMN_LAYOUT" @click.native="COLUMN_LAYOUT = !COLUMN_LAYOUT"
/> />
<span <span
class="transition transform" class="transform transition"
:class="{ :class="{
'rotate-180': SIDEBAR_ON_LEFT, 'rotate-180': SIDEBAR_ON_LEFT,
}" }"

4
packages/hoppscotch-app/components/app/Fuse.vue
View File

@@ -11,9 +11,9 @@
/> />
<div <div
v-if="searchResults.length === 0" v-if="searchResults.length === 0"
class="text-secondaryLight flex flex-col items-center justify-center p-4" class="flex flex-col text-secondaryLight p-4 items-center justify-center"
> >
<i class="material-icons pb-2 opacity-75">manage_search</i> <i class="opacity-75 pb-2 material-icons">manage_search</i>
<span class="text-center"> <span class="text-center">
{{ t("state.nothing_found") }} "{{ search }}" {{ t("state.nothing_found") }} "{{ search }}"
</span> </span>

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

@@ -1,9 +1,9 @@
<template> <template>
<div> <div>
<header <header
class="flex items-center justify-between flex-1 px-2 py-2 space-x-2" class="flex space-x-2 flex-1 py-2 px-2 items-center justify-between"
> >
<div class="inline-flex items-center space-x-2"> <div class="space-x-2 inline-flex items-center">
<ButtonSecondary <ButtonSecondary
class="tracking-wide !font-bold !text-secondaryDark" class="tracking-wide !font-bold !text-secondaryDark"
label="HOPPSCOTCH" label="HOPPSCOTCH"
@@ -11,7 +11,7 @@
/> />
<AppGitHubStarButton class="mt-1.5 transition hidden sm:flex" /> <AppGitHubStarButton class="mt-1.5 transition hidden sm:flex" />
</div> </div>
<div class="inline-flex items-center space-x-2"> <div class="space-x-2 inline-flex items-center">
<ButtonSecondary <ButtonSecondary
id="installPWA" id="installPWA"
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
@@ -39,7 +39,7 @@
svg="upload-cloud" svg="upload-cloud"
:label="t('header.save_workspace')" :label="t('header.save_workspace')"
filled filled
class="md:flex hidden" class="hidden md:flex"
@click.native="showLogin = true" @click.native="showLogin = true"
/> />
<ButtonPrimary <ButtonPrimary
@@ -47,13 +47,13 @@
:label="t('header.login')" :label="t('header.login')"
@click.native="showLogin = true" @click.native="showLogin = true"
/> />
<div v-else class="inline-flex items-center space-x-2"> <div v-else class="space-x-2 inline-flex items-center">
<ButtonPrimary <ButtonPrimary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="t('team.invite_tooltip')" :title="t('team.invite_tooltip')"
:label="t('team.invite')" :label="t('team.invite')"
svg="user-plus" svg="user-plus"
class="!bg-green-500 !text-green-500 !bg-opacity-15 !hover:bg-opacity-10 !hover:text-green-600 !hover:bg-green-400" class="!bg-green-500 !bg-opacity-15 !text-green-500 !hover:bg-opacity-10 !hover:bg-green-400 !hover:text-green-600"
@click.native="showTeamsModal = true" @click.native="showTeamsModal = true"
/> />
<span class="px-2"> <span class="px-2">

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

@@ -1,5 +1,5 @@
<template> <template>
<div class="flex flex-col items-start p-4 space-y-4"> <div class="flex flex-col space-y-4 p-4 items-start">
<SmartToggle <SmartToggle
:on="PROXY_ENABLED" :on="PROXY_ENABLED"
@change="toggleSettingKey('PROXY_ENABLED')" @change="toggleSettingKey('PROXY_ENABLED')"

6
packages/hoppscotch-app/components/app/PowerSearch.vue
View File

@@ -14,7 +14,7 @@
autocomplete="off" autocomplete="off"
name="command" name="command"
:placeholder="`${t('app.type_a_command_search')}`" :placeholder="`${t('app.type_a_command_search')}`"
class="border-dividerLight text-secondaryDark flex flex-shrink-0 p-6 text-base bg-transparent border-b" class="bg-transparent border-b border-dividerLight flex flex-shrink-0 text-base text-secondaryDark p-6"
/> />
<AppFuse <AppFuse
v-if="search && show" v-if="search && show"
@@ -24,14 +24,14 @@
/> />
<div <div
v-else v-else
class="divide-dividerLight hide-scrollbar flex flex-col flex-1 space-y-4 overflow-auto divide-y" class="divide-dividerLight divide-y flex flex-col space-y-4 flex-1 overflow-auto hide-scrollbar"
> >
<div <div
v-for="(map, mapIndex) in mappings" v-for="(map, mapIndex) in mappings"
:key="`map-${mapIndex}`" :key="`map-${mapIndex}`"
class="flex flex-col" class="flex flex-col"
> >
<h5 class="text-secondaryLight px-6 py-2 my-2"> <h5 class="my-2 text-secondaryLight py-2 px-6">
{{ t(map.section) }} {{ t(map.section) }}
</h5> </h5>
<AppPowerSearchEntry <AppPowerSearchEntry

6
packages/hoppscotch-app/components/app/PowerSearchEntry.vue
View File

@@ -1,18 +1,18 @@
<template> <template>
<button <button
class="search-entry focus:outline-none flex items-center flex-1 px-6 py-2 transition cursor-pointer" class="cursor-pointer flex flex-1 py-2 px-6 transition items-center search-entry focus:outline-none"
:class="{ active: active }" :class="{ active: active }"
tabindex="-1" tabindex="-1"
@click="$emit('action', shortcut.action)" @click="$emit('action', shortcut.action)"
@keydown.enter="$emit('action', shortcut.action)" @keydown.enter="$emit('action', shortcut.action)"
> >
<SmartIcon <SmartIcon
class="svg-icons mr-4 transition opacity-50" class="mr-4 opacity-50 transition svg-icons"
:class="{ 'opacity-100 text-secondaryDark': active }" :class="{ 'opacity-100 text-secondaryDark': active }"
:name="shortcut.icon" :name="shortcut.icon"
/> />
<span <span
class="flex flex-1 mr-4 font-medium transition" class="flex font-medium flex-1 mr-4 transition"
:class="{ 'text-secondaryDark': active }" :class="{ 'text-secondaryDark': active }"
> >
{{ t(shortcut.label) }} {{ t(shortcut.label) }}

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

@@ -1,5 +1,5 @@
<template> <template>
<section :id="label.toLowerCase()" class="relative flex flex-col flex-1"> <section :id="label.toLowerCase()" class="flex flex-col flex-1 relative">
<slot></slot> <slot></slot>
</section> </section>
</template> </template>

10
packages/hoppscotch-app/components/app/Share.vue
View File

@@ -5,11 +5,11 @@
@close="hideModal" @close="hideModal"
> >
<template #body> <template #body>
<p class="text-secondaryLight px-2 mb-8"> <p class="text-secondaryLight mb-8 px-2">
{{ t("app.invite_description") }} {{ t("app.invite_description") }}
</p> </p>
<div class="flex flex-col px-2 space-y-2"> <div class="flex flex-col space-y-2 px-2">
<div class="grid grid-cols-3 gap-4"> <div class="grid gap-4 grid-cols-3">
<a <a
v-for="(platform, index) in platforms" v-for="(platform, index) in platforms"
:key="`platform-${index}`" :key="`platform-${index}`"
@@ -17,13 +17,13 @@
target="_blank" target="_blank"
class="share-link" class="share-link"
> >
<SmartIcon :name="platform.icon" class="w-6 h-6" /> <SmartIcon :name="platform.icon" class="h-6 w-6" />
<span class="mt-3"> <span class="mt-3">
{{ platform.name }} {{ platform.name }}
</span> </span>
</a> </a>
<button class="share-link" @click="copyAppLink"> <button class="share-link" @click="copyAppLink">
<SmartIcon class="w-6 h-6 text-xl" :name="copyIcon" /> <SmartIcon class="h-6 text-xl w-6" :name="copyIcon" />
<span class="mt-3"> <span class="mt-3">
{{ t("app.copy") }} {{ t("app.copy") }}
</span> </span>

26
packages/hoppscotch-app/components/app/Shortcuts.vue
View File

@@ -2,34 +2,34 @@
<AppSlideOver :show="show" @close="close()"> <AppSlideOver :show="show" @close="close()">
<template #content> <template #content>
<div <div
class="bg-primary border-dividerLight sticky top-0 z-10 flex items-center justify-between p-2 border-b" class="bg-primary border-b border-dividerLight flex p-2 top-0 z-10 sticky items-center justify-between"
> >
<h3 class="heading ml-4">{{ t("app.shortcuts") }}</h3> <h3 class="ml-4 heading">{{ t("app.shortcuts") }}</h3>
<div class="flex"> <div class="flex">
<ButtonSecondary svg="x" class="rounded" @click.native="close()" /> <ButtonSecondary svg="x" class="rounded" @click.native="close()" />
</div> </div>
</div> </div>
<div class="bg-primary border-dividerLight border-b"> <div class="bg-primary border-b border-dividerLight">
<div class="flex flex-col mx-6 my-4"> <div class="flex flex-col my-4 mx-6">
<input <input
v-model="filterText" v-model="filterText"
type="search" type="search"
autocomplete="off" autocomplete="off"
class="bg-primaryLight border-dividerLight focus-visible:border-divider flex w-full px-4 py-2 border rounded" class="bg-primaryLight border border-dividerLight rounded flex w-full py-2 px-4 focus-visible:border-divider"
:placeholder="`${t('action.search')}`" :placeholder="`${t('action.search')}`"
/> />
</div> </div>
</div> </div>
<div <div
v-if="filterText" v-if="filterText"
class="divide-dividerLight hide-scrollbar flex flex-col flex-1 overflow-auto divide-y" class="divide-dividerLight divide-y flex flex-col flex-1 overflow-auto hide-scrollbar"
> >
<div <div
v-for="(map, mapIndex) in searchResults" v-for="(map, mapIndex) in searchResults"
:key="`map-${mapIndex}`" :key="`map-${mapIndex}`"
class="px-6 py-4 space-y-4" class="space-y-4 py-4 px-6"
> >
<h1 class="text-secondaryDark font-semibold"> <h1 class="font-semibold text-secondaryDark">
{{ t(map.item.section) }} {{ t(map.item.section) }}
</h1> </h1>
<AppShortcutsEntry <AppShortcutsEntry
@@ -40,9 +40,9 @@
</div> </div>
<div <div
v-if="searchResults.length === 0" v-if="searchResults.length === 0"
class="text-secondaryLight flex flex-col items-center justify-center p-4" class="flex flex-col text-secondaryLight p-4 items-center justify-center"
> >
<i class="material-icons pb-2 opacity-75">manage_search</i> <i class="opacity-75 pb-2 material-icons">manage_search</i>
<span class="text-center"> <span class="text-center">
{{ t("state.nothing_found") }} "{{ filterText }}" {{ t("state.nothing_found") }} "{{ filterText }}"
</span> </span>
@@ -50,14 +50,14 @@
</div> </div>
<div <div
v-else v-else
class="divide-dividerLight hide-scrollbar flex flex-col flex-1 overflow-auto divide-y" class="divide-dividerLight divide-y flex flex-col flex-1 overflow-auto hide-scrollbar"
> >
<div <div
v-for="(map, mapIndex) in mappings" v-for="(map, mapIndex) in mappings"
:key="`map-${mapIndex}`" :key="`map-${mapIndex}`"
class="px-6 py-4 space-y-4" class="space-y-4 py-4 px-6"
> >
<h1 class="text-secondaryDark font-semibold"> <h1 class="font-semibold text-secondaryDark">
{{ t(map.section) }} {{ t(map.section) }}
</h1> </h1>
<AppShortcutsEntry <AppShortcutsEntry

4
packages/hoppscotch-app/components/app/Sidenav.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<aside class="md:flex-col flex justify-between h-full"> <aside class="flex h-full justify-between md:flex-col">
<nav class="flex-nowrap md:flex-col md:flex-none flex flex-1"> <nav class="flex flex-nowrap flex-1 md:flex-col md:flex-none">
<NuxtLink <NuxtLink
v-for="(navigation, index) in primaryNavigation" v-for="(navigation, index) in primaryNavigation"
:key="`navigation-${index}`" :key="`navigation-${index}`"

6
packages/hoppscotch-app/components/app/SlideOver.vue
View File

@@ -1,16 +1,16 @@
<template> <template>
<div> <div>
<transition v-if="show" name="fade" appear> <transition v-if="show" name="fade" appear>
<div class="fixed inset-0 z-20 transition-opacity" @keydown.esc="close()"> <div class="inset-0 transition-opacity z-20 fixed" @keydown.esc="close()">
<div <div
class="bg-primaryLight opacity-90 absolute inset-0" class="bg-primaryLight opacity-90 inset-0 absolute"
tabindex="0" tabindex="0"
@click="close()" @click="close()"
></div> ></div>
</div> </div>
</transition> </transition>
<aside <aside
class="bg-primary w-96 fixed top-0 right-0 z-30 flex flex-col h-full max-w-full overflow-auto transition duration-300 ease-in-out transform" class="bg-primary flex flex-col h-full max-w-full transform transition top-0 ease-in-out right-0 w-96 z-30 duration-300 fixed overflow-auto"
:class="show ? 'shadow-xl translate-x-0' : 'translate-x-full'" :class="show ? 'shadow-xl translate-x-0' : 'translate-x-full'"
> >
<slot name="content"></slot> <slot name="content"></slot>

6
packages/hoppscotch-app/components/button/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="focus:outline-none focus-visible:bg-accentDark inline-flex items-center justify-center py-2 font-bold transition" class="font-bold py-2 transition inline-flex items-center justify-center focus:outline-none focus-visible:bg-accentDark"
:class="[ :class="[
color color
? `text-${color}-800 bg-${color}-200 hover:(text-${color}-900 bg-${color}-300) focus-visible:(text-${color}-900 bg-${color}-300)` ? `text-${color}-800 bg-${color}-200 hover:(text-${color}-900 bg-${color}-300) focus-visible:(text-${color}-900 bg-${color}-300)`
@@ -29,7 +29,7 @@
> >
<span <span
v-if="!loading" v-if="!loading"
class="whitespace-nowrap inline-flex items-center justify-center" class="inline-flex items-center justify-center whitespace-nowrap"
:class="{ 'flex-row-reverse': reverse }" :class="{ 'flex-row-reverse': reverse }"
> >
<i <i
@@ -56,7 +56,7 @@
<kbd <kbd
v-for="(key, index) in shortcut" v-for="(key, index) in shortcut"
:key="`key-${index}`" :key="`key-${index}`"
class="bg-accentLight inline-flex px-1 ml-1 rounded" class="bg-accentLight rounded ml-1 px-1 inline-flex"
> >
{{ key }} {{ key }}
</kbd> </kbd>

9
packages/hoppscotch-app/components/button/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="whitespace-nowrap hover:bg-primaryDark focus:outline-none focus-visible:bg-primaryDark inline-flex items-center justify-center py-2 font-semibold transition" class="font-semibold py-2 transition inline-flex items-center justify-center whitespace-nowrap hover:bg-primaryDark focus:outline-none focus-visible:bg-primaryDark"
:class="[ :class="[
color color
? `text-${color}-500 hover:(text-${color}-600 text-${color}-600)` ? `text-${color}-500 hover:(text-${color}-600 text-${color}-600)`
@@ -17,7 +17,10 @@
'border border-divider hover:border-dividerDark focus-visible:border-dividerDark': 'border border-divider hover:border-dividerDark focus-visible:border-dividerDark':
outline, outline,
}, },
{ '!bg-primaryLight !hover:bg-primaryDark': filled }, {
'!bg-primaryLight !hover:bg-primaryDark !focus-visible:bg-primaryDark':
filled,
},
]" ]"
:disabled="disabled" :disabled="disabled"
> >
@@ -45,7 +48,7 @@
<kbd <kbd
v-for="(key, index) in shortcut" v-for="(key, index) in shortcut"
:key="`key-${index}`" :key="`key-${index}`"
class="bg-dividerLight text-secondaryLight inline-flex px-1 ml-1 rounded" class="bg-dividerLight rounded text-secondaryLight ml-1 px-1 inline-flex"
> >
{{ key }} {{ key }}
</kbd> </kbd>

2
packages/hoppscotch-app/components/collections/ChooseType.vue
View File

@@ -18,7 +18,7 @@
type="text" type="text"
autocomplete="off" autocomplete="off"
autofocus autofocus
class="border-dividerLight hover:bg-primaryDark flex w-full px-4 py-2 font-semibold bg-transparent border-t appearance-none cursor-pointer" class="bg-transparent border-t border-dividerLight cursor-pointer flex font-semibold w-full py-2 px-4 appearance-none hover:bg-primaryDark"
@change="updateSelectedTeam(myTeams[$event.target.value])" @change="updateSelectedTeam(myTeams[$event.target.value])"
> >
<option <option

2
packages/hoppscotch-app/components/collections/SaveRequest.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="relative flex"> <div class="flex relative">
<input <input
id="selectLabelSaveReq" id="selectLabelSaveReq"
v-model="requestName" v-model="requestName"

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

@@ -1,7 +1,7 @@
<template> <template>
<div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]"> <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
<div <div
class="group flex items-center" class="flex items-center group"
@dragover.prevent @dragover.prevent
@drop.prevent="dropEvent" @drop.prevent="dropEvent"
@dragover="dragging = true" @dragover="dragging = true"
@@ -10,7 +10,7 @@
@dragend="dragging = false" @dragend="dragging = false"
> >
<span <span
class="flex items-center justify-center px-4 cursor-pointer" class="cursor-pointer flex px-4 items-center justify-center"
@click="toggleShowChildren()" @click="toggleShowChildren()"
> >
<SmartIcon <SmartIcon
@@ -20,7 +20,7 @@
/> />
</span> </span>
<span <span
class="group-hover:text-secondaryDark flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer" class="cursor-pointer flex flex-1 min-w-0 py-2 pr-2 transition group-hover:text-secondaryDark"
@click="toggleShowChildren()" @click="toggleShowChildren()"
> >
<span class="truncate"> {{ collection.name }} </span> <span class="truncate"> {{ collection.name }} </span>
@@ -30,7 +30,7 @@
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
svg="folder-plus" svg="folder-plus"
:title="$t('folder.new')" :title="$t('folder.new')"
class="group-hover:inline-flex hidden" class="hidden group-hover:inline-flex"
@click.native=" @click.native="
$emit('add-folder', { $emit('add-folder', {
path: `${collectionIndex}`, path: `${collectionIndex}`,
@@ -91,7 +91,7 @@
</div> </div>
<div v-if="showChildren || isFiltered" class="flex"> <div v-if="showChildren || isFiltered" class="flex">
<div <div
class="flex w-1 transform transition cursor-nsResize ml-5.5 bg-dividerLight hover:scale-x-125 hover:bg-dividerDark" class="bg-dividerLight cursor-nsResize flex ml-5.5 transform transition w-1 hover:bg-dividerDark hover:scale-x-125"
@click="toggleShowChildren()" @click="toggleShowChildren()"
></div> ></div>
<div class="flex flex-col flex-1 truncate"> <div class="flex flex-col flex-1 truncate">
@@ -132,12 +132,12 @@
v-if=" v-if="
collection.folders.length === 0 && collection.requests.length === 0 collection.folders.length === 0 && collection.requests.length === 0
" "
class="text-secondaryLight flex flex-col items-center justify-center p-4" class="flex flex-col text-secondaryLight p-4 items-center justify-center"
> >
<img <img
:src="`/images/states/${$colorMode.value}/pack.svg`" :src="`/images/states/${$colorMode.value}/pack.svg`"
loading="lazy" loading="lazy"
class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4" class="flex-col object-contain object-center h-16 mb-4 w-16 inline-flex"
:alt="$t('empty.collection')" :alt="$t('empty.collection')"
/> />
<span class="text-center"> <span class="text-center">

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

@@ -1,7 +1,7 @@
<template> <template>
<div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]"> <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
<div <div
class="group flex items-center" class="flex items-center group"
@dragover.prevent @dragover.prevent
@drop.prevent="dropEvent" @drop.prevent="dropEvent"
@dragover="dragging = true" @dragover="dragging = true"
@@ -10,7 +10,7 @@
@dragend="dragging = false" @dragend="dragging = false"
> >
<span <span
class="flex items-center justify-center px-4 cursor-pointer" class="cursor-pointer flex px-4 items-center justify-center"
@click="toggleShowChildren()" @click="toggleShowChildren()"
> >
<SmartIcon <SmartIcon
@@ -20,7 +20,7 @@
/> />
</span> </span>
<span <span
class="group-hover:text-secondaryDark flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer" class="cursor-pointer flex flex-1 min-w-0 py-2 pr-2 transition group-hover:text-secondaryDark"
@click="toggleShowChildren()" @click="toggleShowChildren()"
> >
<span class="truncate"> <span class="truncate">
@@ -32,7 +32,7 @@
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
svg="folder-plus" svg="folder-plus"
:title="$t('folder.new')" :title="$t('folder.new')"
class="group-hover:inline-flex hidden" class="hidden group-hover:inline-flex"
@click.native="$emit('add-folder', { folder, path: folderPath })" @click.native="$emit('add-folder', { folder, path: folderPath })"
/> />
<span> <span>
@@ -87,7 +87,7 @@
</div> </div>
<div v-if="showChildren || isFiltered" class="flex"> <div v-if="showChildren || isFiltered" class="flex">
<div <div
class="flex w-1 transform transition cursor-nsResize ml-5.5 bg-dividerLight hover:scale-x-125 hover:bg-dividerDark" class="bg-dividerLight cursor-nsResize flex ml-5.5 transform transition w-1 hover:bg-dividerDark hover:scale-x-125"
@click="toggleShowChildren()" @click="toggleShowChildren()"
></div> ></div>
<div class="flex flex-col flex-1 truncate"> <div class="flex flex-col flex-1 truncate">
@@ -131,12 +131,12 @@
folder.requests && folder.requests &&
folder.requests.length === 0 folder.requests.length === 0
" "
class="text-secondaryLight flex flex-col items-center justify-center p-4" class="flex flex-col text-secondaryLight p-4 items-center justify-center"
> >
<img <img
:src="`/images/states/${$colorMode.value}/pack.svg`" :src="`/images/states/${$colorMode.value}/pack.svg`"
loading="lazy" loading="lazy"
class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4" class="flex-col object-contain object-center h-16 mb-4 w-16 inline-flex"
:alt="$t('empty.folder')" :alt="$t('empty.folder')"
/> />
<span class="text-center"> <span class="text-center">

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

@@ -1,7 +1,7 @@
<template> <template>
<div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]"> <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
<div <div
class="group flex items-center" class="flex items-center group"
draggable="true" draggable="true"
@dragstart="dragStart" @dragstart="dragStart"
@dragover.stop @dragover.stop
@@ -9,7 +9,7 @@
@dragend="dragging = false" @dragend="dragging = false"
> >
<span <span
class="flex items-center justify-center w-16 px-2 truncate cursor-pointer" class="cursor-pointer flex px-2 w-16 items-center justify-center truncate"
@click="!doc ? selectRequest() : {}" @click="!doc ? selectRequest() : {}"
> >
<SmartIcon <SmartIcon
@@ -19,7 +19,7 @@
/> />
</span> </span>
<span <span
class="group-hover:text-secondaryDark flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer" class="cursor-pointer flex flex-1 min-w-0 py-2 pr-2 transition group-hover:text-secondaryDark"
@click="!doc ? selectRequest() : {}" @click="!doc ? selectRequest() : {}"
> >
<span class="truncate"> {{ request.name }} </span> <span class="truncate"> {{ request.name }} </span>
@@ -30,7 +30,7 @@
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
svg="rotate-ccw" svg="rotate-ccw"
:title="$t('action.restore')" :title="$t('action.restore')"
class="group-hover:inline-flex hidden" class="hidden group-hover:inline-flex"
@click.native="!doc ? selectRequest() : {}" @click.native="!doc ? selectRequest() : {}"
/> />
<span> <span>

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

@@ -4,7 +4,7 @@
:class="{ 'rounded border border-divider': savingMode }" :class="{ 'rounded border border-divider': savingMode }"
> >
<div <div
class="divide-dividerLight border-dividerLight sticky top-0 z-10 flex flex-col border-b divide-y" class="divide-dividerLight divide-y border-b border-dividerLight flex flex-col top-0 z-10 sticky"
:class="{ 'bg-primary': !savingMode }" :class="{ 'bg-primary': !savingMode }"
> >
<input <input
@@ -13,9 +13,9 @@
type="search" type="search"
autocomplete="off" autocomplete="off"
:placeholder="$t('action.search')" :placeholder="$t('action.search')"
class="flex w-full px-4 py-2 bg-transparent" class="bg-transparent flex w-full py-2 px-4"
/> />
<div class="flex justify-between flex-1"> <div class="flex flex-1 justify-between">
<ButtonSecondary <ButtonSecondary
svg="plus" svg="plus"
:label="$t('action.new')" :label="$t('action.new')"
@@ -62,15 +62,15 @@
</div> </div>
<div <div
v-if="collections.length === 0" v-if="collections.length === 0"
class="text-secondaryLight flex flex-col items-center justify-center p-4" class="flex flex-col text-secondaryLight p-4 items-center justify-center"
> >
<img <img
:src="`/images/states/${$colorMode.value}/pack.svg`" :src="`/images/states/${$colorMode.value}/pack.svg`"
loading="lazy" loading="lazy"
class="inline-flex flex-col object-contain object-center w-16 h-16 my-4" class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
:alt="$t('empty.collections')" :alt="$t('empty.collections')"
/> />
<span class="pb-4 text-center"> <span class="text-center pb-4">
{{ $t("empty.collections") }} {{ $t("empty.collections") }}
</span> </span>
<ButtonSecondary <ButtonSecondary
@@ -81,9 +81,9 @@
</div> </div>
<div <div
v-if="!(filteredCollections.length !== 0 || collections.length === 0)" v-if="!(filteredCollections.length !== 0 || collections.length === 0)"
class="text-secondaryLight flex flex-col items-center justify-center p-4" class="flex flex-col text-secondaryLight p-4 items-center justify-center"
> >
<i class="material-icons pb-2 opacity-75">manage_search</i> <i class="opacity-75 pb-2 material-icons">manage_search</i>
<span class="text-center"> <span class="text-center">
{{ $t("state.nothing_found") }} "{{ filterText }}" {{ $t("state.nothing_found") }} "{{ filterText }}"
</span> </span>

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

@@ -4,7 +4,7 @@
:class="{ 'rounded border border-divider': saveRequest }" :class="{ 'rounded border border-divider': saveRequest }"
> >
<div <div
class="divide-dividerLight bg-primary border-dividerLight sticky top-0 z-10 flex flex-col border-b divide-y rounded-t" class="divide-dividerLight divide-y bg-primary border-b border-dividerLight rounded-t flex flex-col top-0 z-10 sticky"
> >
<div v-if="!saveRequest" class="search-wrappe"> <div v-if="!saveRequest" class="search-wrappe">
<input <input
@@ -12,7 +12,7 @@
type="search" type="search"
autocomplete="off" autocomplete="off"
:placeholder="$t('action.search')" :placeholder="$t('action.search')"
class="flex w-full py-2 pl-4 pr-2 bg-transparent" class="bg-transparent flex w-full py-2 pr-2 pl-4"
/> />
</div> </div>
<CollectionsChooseType <CollectionsChooseType
@@ -22,7 +22,7 @@
@update-collection-type="updateCollectionType" @update-collection-type="updateCollectionType"
@update-selected-team="updateSelectedTeam" @update-selected-team="updateSelectedTeam"
/> />
<div class="flex justify-between flex-1"> <div class="flex flex-1 justify-between">
<ButtonSecondary <ButtonSecondary
v-if=" v-if="
collectionsType.type == 'team-collections' && collectionsType.type == 'team-collections' &&
@@ -98,15 +98,15 @@
</div> </div>
<div <div
v-if="filteredCollections.length === 0 && filterText.length === 0" v-if="filteredCollections.length === 0 && filterText.length === 0"
class="text-secondaryLight flex flex-col items-center justify-center p-4" class="flex flex-col text-secondaryLight p-4 items-center justify-center"
> >
<img <img
:src="`/images/states/${$colorMode.value}/pack.svg`" :src="`/images/states/${$colorMode.value}/pack.svg`"
loading="lazy" loading="lazy"
class="inline-flex flex-col object-contain object-center w-16 h-16 my-4" class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
:alt="$t('empty.collections')" :alt="$t('empty.collections')"
/> />
<span class="pb-4 text-center"> <span class="text-center pb-4">
{{ $t("empty.collections") }} {{ $t("empty.collections") }}
</span> </span>
<ButtonSecondary <ButtonSecondary
@@ -131,9 +131,9 @@
</div> </div>
<div <div
v-if="filterText.length !== 0 && filteredCollections.length === 0" v-if="filterText.length !== 0 && filteredCollections.length === 0"
class="text-secondaryLight flex flex-col items-center justify-center p-4" class="flex flex-col text-secondaryLight p-4 items-center justify-center"
> >
<i class="material-icons pb-2 opacity-75">manage_search</i> <i class="opacity-75 pb-2 material-icons">manage_search</i>
<span class="text-center"> <span class="text-center">
{{ $t("state.nothing_found") }} "{{ filterText }}" {{ $t("state.nothing_found") }} "{{ filterText }}"
</span> </span>

14
packages/hoppscotch-app/components/collections/my/Collection.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]"> <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
<div <div
class="group flex items-center" class="flex items-center group"
@dragover.prevent @dragover.prevent
@drop.prevent="dropEvent" @drop.prevent="dropEvent"
@dragover="dragging = true" @dragover="dragging = true"
@@ -10,7 +10,7 @@
@dragend="dragging = false" @dragend="dragging = false"
> >
<span <span
class="flex items-center justify-center px-4 cursor-pointer" class="cursor-pointer flex px-4 items-center justify-center"
@click="toggleShowChildren()" @click="toggleShowChildren()"
> >
<SmartIcon <SmartIcon
@@ -20,7 +20,7 @@
/> />
</span> </span>
<span <span
class="group-hover:text-secondaryDark flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer" class="cursor-pointer flex flex-1 min-w-0 py-2 pr-2 transition group-hover:text-secondaryDark"
@click="toggleShowChildren()" @click="toggleShowChildren()"
> >
<span class="truncate"> {{ collection.name }} </span> <span class="truncate"> {{ collection.name }} </span>
@@ -47,7 +47,7 @@
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
svg="folder-plus" svg="folder-plus"
:title="$t('folder.new')" :title="$t('folder.new')"
class="group-hover:inline-flex hidden" class="hidden group-hover:inline-flex"
@click.native=" @click.native="
$emit('add-folder', { $emit('add-folder', {
folder: collection, folder: collection,
@@ -110,7 +110,7 @@
</div> </div>
<div v-if="showChildren || isFiltered" class="flex"> <div v-if="showChildren || isFiltered" class="flex">
<div <div
class="flex w-1 transform transition cursor-nsResize ml-5.5 bg-dividerLight hover:scale-x-125 hover:bg-dividerDark" class="bg-dividerLight cursor-nsResize flex ml-5.5 transform transition w-1 hover:bg-dividerDark hover:scale-x-125"
@click="toggleShowChildren()" @click="toggleShowChildren()"
></div> ></div>
<div class="flex flex-col flex-1 truncate"> <div class="flex flex-col flex-1 truncate">
@@ -158,12 +158,12 @@
(collection.requests == undefined || (collection.requests == undefined ||
collection.requests.length === 0) collection.requests.length === 0)
" "
class="text-secondaryLight flex flex-col items-center justify-center p-4" class="flex flex-col text-secondaryLight p-4 items-center justify-center"
> >
<img <img
:src="`/images/states/${$colorMode.value}/pack.svg`" :src="`/images/states/${$colorMode.value}/pack.svg`"
loading="lazy" loading="lazy"
class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4" class="flex-col object-contain object-center h-16 mb-4 w-16 inline-flex"
:alt="$t('empty.collection')" :alt="$t('empty.collection')"
/> />
<span class="text-center"> <span class="text-center">

14
packages/hoppscotch-app/components/collections/my/Folder.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]"> <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
<div <div
class="group flex items-center" class="flex items-center group"
@dragover.prevent @dragover.prevent
@drop.prevent="dropEvent" @drop.prevent="dropEvent"
@dragover="dragging = true" @dragover="dragging = true"
@@ -10,7 +10,7 @@
@dragend="dragging = false" @dragend="dragging = false"
> >
<span <span
class="flex items-center justify-center px-4 cursor-pointer" class="cursor-pointer flex px-4 items-center justify-center"
@click="toggleShowChildren()" @click="toggleShowChildren()"
> >
<SmartIcon <SmartIcon
@@ -20,7 +20,7 @@
/> />
</span> </span>
<span <span
class="group-hover:text-secondaryDark flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer" class="cursor-pointer flex flex-1 min-w-0 py-2 pr-2 transition group-hover:text-secondaryDark"
@click="toggleShowChildren()" @click="toggleShowChildren()"
> >
<span class="truncate"> <span class="truncate">
@@ -32,7 +32,7 @@
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
svg="folder-plus" svg="folder-plus"
:title="$t('folder.new')" :title="$t('folder.new')"
class="group-hover:inline-flex hidden" class="hidden group-hover:inline-flex"
@click.native="$emit('add-folder', { folder, path: folderPath })" @click.native="$emit('add-folder', { folder, path: folderPath })"
/> />
<span> <span>
@@ -92,7 +92,7 @@
</div> </div>
<div v-if="showChildren || isFiltered" class="flex"> <div v-if="showChildren || isFiltered" class="flex">
<div <div
class="flex w-1 transform transition cursor-nsResize ml-5.5 bg-dividerLight hover:scale-x-125 hover:bg-dividerDark" class="bg-dividerLight cursor-nsResize flex ml-5.5 transform transition w-1 hover:bg-dividerDark hover:scale-x-125"
@click="toggleShowChildren()" @click="toggleShowChildren()"
></div> ></div>
<div class="flex flex-col flex-1 truncate"> <div class="flex flex-col flex-1 truncate">
@@ -140,12 +140,12 @@
folder.requests && folder.requests &&
folder.requests.length === 0 folder.requests.length === 0
" "
class="text-secondaryLight flex flex-col items-center justify-center p-4" class="flex flex-col text-secondaryLight p-4 items-center justify-center"
> >
<img <img
:src="`/images/states/${$colorMode.value}/pack.svg`" :src="`/images/states/${$colorMode.value}/pack.svg`"
loading="lazy" loading="lazy"
class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4" class="flex-col object-contain object-center h-16 mb-4 w-16 inline-flex"
:alt="$t('empty.folder')" :alt="$t('empty.folder')"
/> />
<span class="text-center"> <span class="text-center">

8
packages/hoppscotch-app/components/collections/my/Request.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]"> <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
<div <div
class="group flex items-center" class="flex items-center group"
draggable="true" draggable="true"
@dragstart="dragStart" @dragstart="dragStart"
@dragover.stop @dragover.stop
@@ -9,7 +9,7 @@
@dragend="dragging = false" @dragend="dragging = false"
> >
<span <span
class="flex items-center justify-center w-16 px-2 truncate cursor-pointer" class="cursor-pointer flex px-2 w-16 items-center justify-center truncate"
:class="getRequestLabelColor(request.method)" :class="getRequestLabelColor(request.method)"
@click="!doc ? selectRequest() : {}" @click="!doc ? selectRequest() : {}"
> >
@@ -24,7 +24,7 @@
</span> </span>
</span> </span>
<span <span
class="group-hover:text-secondaryDark flex items-center flex-1 min-w-0 py-2 pr-2 transition cursor-pointer" class="cursor-pointer flex flex-1 min-w-0 py-2 pr-2 transition items-center group-hover:text-secondaryDark"
@click="!doc ? selectRequest() : {}" @click="!doc ? selectRequest() : {}"
> >
<span class="truncate"> {{ request.name }} </span> <span class="truncate"> {{ request.name }} </span>
@@ -44,7 +44,7 @@
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
svg="rotate-ccw" svg="rotate-ccw"
:title="$t('action.restore')" :title="$t('action.restore')"
class="group-hover:inline-flex hidden" class="hidden group-hover:inline-flex"
@click.native="!doc ? selectRequest() : {}" @click.native="!doc ? selectRequest() : {}"
/> />
<span> <span>

14
packages/hoppscotch-app/components/collections/teams/Collection.vue
View File

@@ -1,8 +1,8 @@
<template> <template>
<div class="flex flex-col"> <div class="flex flex-col">
<div class="group flex items-center"> <div class="flex items-center group">
<span <span
class="flex items-center justify-center px-4 cursor-pointer" class="cursor-pointer flex px-4 items-center justify-center"
@click="toggleShowChildren()" @click="toggleShowChildren()"
> >
<SmartIcon <SmartIcon
@@ -12,7 +12,7 @@
/> />
</span> </span>
<span <span
class="group-hover:text-secondaryDark flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer" class="cursor-pointer flex flex-1 min-w-0 py-2 pr-2 transition group-hover:text-secondaryDark"
@click="toggleShowChildren()" @click="toggleShowChildren()"
> >
<span class="truncate"> {{ collection.title }} </span> <span class="truncate"> {{ collection.title }} </span>
@@ -39,7 +39,7 @@
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
svg="folder-plus" svg="folder-plus"
:title="$t('folder.new')" :title="$t('folder.new')"
class="group-hover:inline-flex hidden" class="hidden group-hover:inline-flex"
@click.native=" @click.native="
$emit('add-folder', { $emit('add-folder', {
folder: collection, folder: collection,
@@ -106,7 +106,7 @@
</div> </div>
<div v-if="showChildren || isFiltered" class="flex"> <div v-if="showChildren || isFiltered" class="flex">
<div <div
class="flex w-1 transform transition cursor-nsResize ml-5.5 bg-dividerLight hover:scale-x-125 hover:bg-dividerDark" class="bg-dividerLight cursor-nsResize flex ml-5.5 transform transition w-1 hover:bg-dividerDark hover:scale-x-125"
@click="toggleShowChildren()" @click="toggleShowChildren()"
></div> ></div>
<div class="flex flex-col flex-1 truncate"> <div class="flex flex-col flex-1 truncate">
@@ -152,12 +152,12 @@
(collection.requests == undefined || (collection.requests == undefined ||
collection.requests.length === 0) collection.requests.length === 0)
" "
class="text-secondaryLight flex flex-col items-center justify-center p-4" class="flex flex-col text-secondaryLight p-4 items-center justify-center"
> >
<img <img
:src="`/images/states/${$colorMode.value}/pack.svg`" :src="`/images/states/${$colorMode.value}/pack.svg`"
loading="lazy" loading="lazy"
class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4" class="flex-col object-contain object-center h-16 mb-4 w-16 inline-flex"
:alt="$t('empty.collection')" :alt="$t('empty.collection')"
/> />
<span class="text-center"> <span class="text-center">

14
packages/hoppscotch-app/components/collections/teams/Folder.vue
View File

@@ -1,8 +1,8 @@
<template> <template>
<div class="flex flex-col"> <div class="flex flex-col">
<div class="group flex items-center"> <div class="flex items-center group">
<span <span
class="flex items-center justify-center px-4 cursor-pointer" class="cursor-pointer flex px-4 items-center justify-center"
@click="toggleShowChildren()" @click="toggleShowChildren()"
> >
<SmartIcon <SmartIcon
@@ -12,7 +12,7 @@
/> />
</span> </span>
<span <span
class="group-hover:text-secondaryDark flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer" class="cursor-pointer flex flex-1 min-w-0 py-2 pr-2 transition group-hover:text-secondaryDark"
@click="toggleShowChildren()" @click="toggleShowChildren()"
> >
<span class="truncate"> <span class="truncate">
@@ -25,7 +25,7 @@
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
svg="folder-plus" svg="folder-plus"
:title="$t('folder.new')" :title="$t('folder.new')"
class="group-hover:inline-flex hidden" class="hidden group-hover:inline-flex"
@click.native="$emit('add-folder', { folder, path: folderPath })" @click.native="$emit('add-folder', { folder, path: folderPath })"
/> />
<span> <span>
@@ -89,7 +89,7 @@
</div> </div>
<div v-if="showChildren || isFiltered" class="flex"> <div v-if="showChildren || isFiltered" class="flex">
<div <div
class="flex w-1 transform transition cursor-nsResize ml-5.5 bg-dividerLight hover:scale-x-125 hover:bg-dividerDark" class="bg-dividerLight cursor-nsResize flex ml-5.5 transform transition w-1 hover:bg-dividerDark hover:scale-x-125"
@click="toggleShowChildren()" @click="toggleShowChildren()"
></div> ></div>
<div class="flex flex-col flex-1 truncate"> <div class="flex flex-col flex-1 truncate">
@@ -133,12 +133,12 @@
(folder.children == undefined || folder.children.length === 0) && (folder.children == undefined || folder.children.length === 0) &&
(folder.requests == undefined || folder.requests.length === 0) (folder.requests == undefined || folder.requests.length === 0)
" "
class="text-secondaryLight flex flex-col items-center justify-center p-4" class="flex flex-col text-secondaryLight p-4 items-center justify-center"
> >
<img <img
:src="`/images/states/${$colorMode.value}/pack.svg`" :src="`/images/states/${$colorMode.value}/pack.svg`"
loading="lazy" loading="lazy"
class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4" class="flex-col object-contain object-center h-16 mb-4 w-16 inline-flex"
:alt="$t('empty.folder')" :alt="$t('empty.folder')"
/> />
<span class="text-center"> <span class="text-center">

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

@@ -1,8 +1,8 @@
<template> <template>
<div class="flex flex-col"> <div class="flex flex-col">
<div class="group flex items-center"> <div class="flex items-center group">
<span <span
class="flex items-center justify-center w-16 px-2 truncate cursor-pointer" class="cursor-pointer flex px-2 w-16 items-center justify-center truncate"
:class="getRequestLabelColor(request.method)" :class="getRequestLabelColor(request.method)"
@click="!doc ? selectRequest() : {}" @click="!doc ? selectRequest() : {}"
> >
@@ -17,7 +17,7 @@
</span> </span>
</span> </span>
<span <span
class="group-hover:text-secondaryDark flex items-center flex-1 min-w-0 py-2 pr-2 transition cursor-pointer" class="cursor-pointer flex flex-1 min-w-0 py-2 pr-2 transition items-center group-hover:text-secondaryDark"
@click="!doc ? selectRequest() : {}" @click="!doc ? selectRequest() : {}"
> >
<span class="truncate"> {{ request.name }} </span> <span class="truncate"> {{ request.name }} </span>
@@ -36,7 +36,7 @@
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
svg="rotate-ccw" svg="rotate-ccw"
:title="$t('action.restore')" :title="$t('action.restore')"
class="group-hover:inline-flex hidden" class="hidden group-hover:inline-flex"
@click.native="!doc ? selectRequest() : {}" @click.native="!doc ? selectRequest() : {}"
/> />
<span> <span>

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

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

@@ -1,13 +1,13 @@
<template> <template>
<div class="group flex items-center"> <div class="flex items-center group">
<span <span
class="flex items-center justify-center px-4 cursor-pointer" class="cursor-pointer flex px-4 items-center justify-center"
@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="group-hover:text-secondaryDark flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer" class="cursor-pointer flex flex-1 min-w-0 py-2 pr-2 transition group-hover:text-secondaryDark"
@click="$emit('edit-environment')" @click="$emit('edit-environment')"
> >
<span class="truncate"> <span class="truncate">

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

@@ -1,22 +1,22 @@
<template> <template>
<AppSection :label="`${$t('environment.title')}`"> <AppSection :label="`${$t('environment.title')}`">
<div class="bg-primary sticky top-0 z-10 flex flex-col rounded-t"> <div class="bg-primary rounded-t flex flex-col top-0 z-10 sticky">
<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="border-dividerLight select-wrapper flex-1 bg-transparent border-b" class="bg-transparent border-b border-dividerLight flex-1 select-wrapper"
> >
<ButtonSecondary <ButtonSecondary
v-if="selectedEnvironmentIndex !== -1" v-if="selectedEnvironmentIndex !== -1"
:label="environments[selectedEnvironmentIndex].name" :label="environments[selectedEnvironmentIndex].name"
class="flex-1 pr-8 rounded-none" class="rounded-none flex-1 pr-8"
/> />
<ButtonSecondary <ButtonSecondary
v-else v-else
:label="`${$t('environment.no_environment')}`" :label="`${$t('environment.no_environment')}`"
class="flex-1 pr-8 rounded-none" class="rounded-none flex-1 pr-8"
/> />
</span> </span>
</template> </template>
@@ -45,7 +45,7 @@
" "
/> />
</tippy> </tippy>
<div class="border-dividerLight flex justify-between flex-1 border-b"> <div class="border-b border-dividerLight flex flex-1 justify-between">
<ButtonSecondary <ButtonSecondary
svg="plus" svg="plus"
:label="`${$t('action.new')}`" :label="`${$t('action.new')}`"
@@ -86,7 +86,7 @@
<EnvironmentsEnvironment <EnvironmentsEnvironment
environment-index="Global" environment-index="Global"
:environment="globalEnvironment" :environment="globalEnvironment"
class="border-dividerLight border-b border-dashed" class="border-b border-dashed border-dividerLight"
@edit-environment="editEnvironment('Global')" @edit-environment="editEnvironment('Global')"
/> />
<EnvironmentsEnvironment <EnvironmentsEnvironment
@@ -99,15 +99,15 @@
</div> </div>
<div <div
v-if="environments.length === 0" v-if="environments.length === 0"
class="text-secondaryLight flex flex-col items-center justify-center p-4" class="flex flex-col text-secondaryLight p-4 items-center justify-center"
> >
<img <img
:src="`/images/states/${$colorMode.value}/blockchain.svg`" :src="`/images/states/${$colorMode.value}/blockchain.svg`"
loading="lazy" loading="lazy"
class="inline-flex flex-col object-contain object-center w-16 h-16 my-4" class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
:alt="$t('empty.environments')" :alt="$t('empty.environments')"
/> />
<span class="pb-4 text-center"> <span class="text-center pb-4">
{{ $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 px-2 space-y-2"> <div v-if="mode === 'sign-in'" class="flex flex-col space-y-2 px-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 items-center justify-center max-w-md"> <div class="flex flex-col max-w-md items-center justify-center">
<SmartIcon class="text-accent w-6 h-6" name="inbox" /> <SmartIcon class="h-6 text-accent w-6" 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="text-secondaryLight flex justify-between flex-1" class="flex flex-1 text-secondaryLight justify-between"
> >
<SmartAnchor <SmartAnchor
class="link" class="link"

10
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 field-desc py-2" class="text-secondaryLight py-2 field-desc"
> >
{{ gqlField.description }} {{ gqlField.description }}
</div> </div>
<div <div
v-if="gqlField.isDeprecated" v-if="gqlField.isDeprecated"
class="field-deprecated inline-block px-2 py-1 my-1 text-black bg-yellow-200 rounded" class="rounded bg-yellow-200 my-1 text-black py-1 px-2 inline-block 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 pl-4 border-l-2"> <div class="border-divider border-l-2 pl-4">
<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 field-desc py-2" class="text-secondaryLight py-2 field-desc"
> >
{{ field.description }} {{ field.description }}
</div> </div>
@@ -77,7 +77,7 @@ export default defineComponent({
<style scoped lang="scss"> <style scoped lang="scss">
.field-highlighted { .field-highlighted {
@apply border-b-2 border-accent; @apply border-accent border-b-2;
} }
.field-title { .field-title {

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

@@ -1,13 +1,13 @@
<template> <template>
<div class="bg-primary sticky top-0 z-10 flex p-4"> <div class="bg-primary flex p-4 top-0 z-10 sticky">
<div class="inline-flex flex-1 space-x-2"> <div class="space-x-2 flex-1 inline-flex">
<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-divider text-secondaryDark hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark w-full px-4 py-2 border rounded" 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"
:placeholder="`${t('request.url')}`" :placeholder="`${t('request.url')}`"
:disabled="connected" :disabled="connected"
@keyup.enter="onConnectClick" @keyup.enter="onConnectClick"

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

@@ -19,9 +19,9 @@
<SmartTab :id="'query'" :label="`${t('tab.query')}`" :selected="true"> <SmartTab :id="'query'" :label="`${t('tab.query')}`" :selected="true">
<AppSection label="query"> <AppSection label="query">
<div <div
class="bg-primary border-dividerLight top-upperSecondaryStickyFold gqlRunQuery sticky z-10 flex items-center justify-between flex-1 pl-4 border-b" class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between gqlRunQuery"
> >
<label class="text-secondaryLight font-semibold"> <label class="font-semibold text-secondaryLight">
{{ t("request.query") }} {{ t("request.query") }}
</label> </label>
<div class="flex"> <div class="flex">
@@ -53,9 +53,9 @@
<SmartTab :id="'variables'" :label="`${t('tab.variables')}`"> <SmartTab :id="'variables'" :label="`${t('tab.variables')}`">
<AppSection label="variables"> <AppSection label="variables">
<div <div
class="bg-primary border-dividerLight top-upperSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b" class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
> >
<label class="text-secondaryLight font-semibold"> <label class="font-semibold text-secondaryLight">
{{ t("request.variables") }} {{ t("request.variables") }}
</label> </label>
<div class="flex"> <div class="flex">
@@ -81,9 +81,9 @@
<SmartTab :id="'headers'" :label="`${t('tab.headers')}`"> <SmartTab :id="'headers'" :label="`${t('tab.headers')}`">
<AppSection label="headers"> <AppSection label="headers">
<div <div
class="bg-primary border-dividerLight top-upperSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b" class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
> >
<label class="text-secondaryLight font-semibold"> <label class="font-semibold text-secondaryLight">
{{ t("tab.headers") }} {{ t("tab.headers") }}
</label> </label>
<div class="flex"> <div class="flex">
@@ -121,7 +121,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 border-dividerLight flex border-b divide-x" class="divide-dividerLight divide-x border-b border-dividerLight flex"
> >
<SmartAutoComplete <SmartAutoComplete
:placeholder="`${t('count.header', { count: index + 1 })}`" :placeholder="`${t('count.header', { count: index + 1 })}`"
@@ -137,7 +137,7 @@
px-4 px-4
truncate truncate
" "
class="!flex flex-1" class="flex-1 !flex"
@input=" @input="
updateRequestHeader(index, { updateRequestHeader(index, {
key: $event, key: $event,
@@ -147,7 +147,7 @@
" "
/> />
<input <input
class="flex flex-1 px-4 py-2 bg-transparent" class="bg-transparent flex flex-1 py-2 px-4"
: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"
@@ -199,15 +199,15 @@
</div> </div>
<div <div
v-if="headers.length === 0" v-if="headers.length === 0"
class="text-secondaryLight flex flex-col items-center justify-center p-4" class="flex flex-col text-secondaryLight p-4 items-center justify-center"
> >
<img <img
:src="`/images/states/${$colorMode.value}/add_category.svg`" :src="`/images/states/${$colorMode.value}/add_category.svg`"
loading="lazy" loading="lazy"
class="inline-flex flex-col object-contain object-center w-16 h-16 my-4" class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
:alt="`${t('empty.headers')}`" :alt="`${t('empty.headers')}`"
/> />
<span class="pb-4 text-center"> <span class="text-center pb-4">
{{ t("empty.headers") }} {{ t("empty.headers") }}
</span> </span>
<ButtonSecondary <ButtonSecondary

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

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

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

@@ -34,26 +34,26 @@
subscriptionFields.length === 0 && subscriptionFields.length === 0 &&
graphqlTypes.length === 0 graphqlTypes.length === 0
" "
class="text-secondaryLight flex flex-col items-center justify-center p-4" class="flex flex-col text-secondaryLight p-4 items-center justify-center"
> >
<img <img
:src="`/images/states/${$colorMode.value}/add_comment.svg`" :src="`/images/states/${$colorMode.value}/add_comment.svg`"
loading="lazy" loading="lazy"
class="inline-flex flex-col object-contain object-center w-16 h-16 my-4" class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
:alt="`${t('empty.documentation')}`" :alt="`${t('empty.documentation')}`"
/> />
<span class="mb-4 text-center"> <span class="text-center mb-4">
{{ t("empty.documentation") }} {{ t("empty.documentation") }}
</span> </span>
</div> </div>
<div v-else> <div v-else>
<div class="bg-primary sticky top-0 z-10 flex"> <div class="bg-primary flex top-0 z-10 sticky">
<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="flex w-full p-4 py-2 bg-transparent" class="bg-transparent flex w-full p-4 py-2"
/> />
<div class="flex"> <div class="flex">
<ButtonSecondary <ButtonSecondary
@@ -140,9 +140,9 @@
<AppSection ref="schema" label="schema"> <AppSection ref="schema" label="schema">
<div <div
v-if="schemaString" v-if="schemaString"
class="bg-primary border-dividerLight sticky top-0 z-10 flex items-center justify-between flex-1 pl-4 border-b" class="bg-primary border-b border-dividerLight flex flex-1 pl-4 top-0 z-10 sticky items-center justify-between"
> >
<label class="text-secondaryLight font-semibold"> <label class="font-semibold text-secondaryLight">
{{ t("graphql.schema") }} {{ t("graphql.schema") }}
</label> </label>
<div class="flex"> <div class="flex">
@@ -179,15 +179,15 @@
<div v-if="schemaString" ref="schemaEditor"></div> <div v-if="schemaString" ref="schemaEditor"></div>
<div <div
v-else v-else
class="text-secondaryLight flex flex-col items-center justify-center p-4" class="flex flex-col text-secondaryLight p-4 items-center justify-center"
> >
<img <img
:src="`/images/states/${$colorMode.value}/blockchain.svg`" :src="`/images/states/${$colorMode.value}/blockchain.svg`"
loading="lazy" loading="lazy"
class="inline-flex flex-col object-contain object-center w-16 h-16 my-4" class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
:alt="`${t('empty.schema')}`" :alt="`${t('empty.schema')}`"
/> />
<span class="mb-4 text-center"> <span class="text-center mb-4">
{{ 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="py-2 text-secondaryLight type-desc"> <div v-if="gqlType.description" class="text-secondaryLight py-2 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="pl-4 border-l-2 border-divider" class="border-divider border-l-2 pl-4"
/> />
</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="pl-4 border-l-2 border-divider" class="border-divider border-l-2 pl-4"
/> />
</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="pl-4 border-l-2 border-divider" class="border-divider border-l-2 pl-4"
: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="pl-4 border-l-2 border-divider" class="border-divider border-l-2 pl-4"
v-text="value.name" v-text="value.name"
></div> ></div>
</div> </div>

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

@@ -1,8 +1,8 @@
<template> <template>
<div class="group flex flex-col"> <div class="flex flex-col group">
<div class="flex items-center"> <div class="flex items-center">
<span <span
class="group-hover:text-secondaryDark flex flex-1 min-w-0 py-2 pl-4 pr-2 transition cursor-pointer" class="cursor-pointer flex flex-1 min-w-0 py-2 pr-2 pl-4 transition group-hover:text-secondaryDark"
data-testid="restore_history_entry" data-testid="restore_history_entry"
@click="useEntry" @click="useEntry"
> >
@@ -15,7 +15,7 @@
svg="trash" svg="trash"
color="red" color="red"
:title="$t('action.remove')" :title="$t('action.remove')"
class="group-hover:inline-flex hidden" class="hidden group-hover:inline-flex"
data-testid="delete_history_entry" data-testid="delete_history_entry"
@click.native="$emit('delete-entry')" @click.native="$emit('delete-entry')"
/> />
@@ -23,7 +23,7 @@
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="expand ? $t('hide.more') : $t('show.more')" :title="expand ? $t('hide.more') : $t('show.more')"
:svg="expand ? 'minimize-2' : 'maximize-2'" :svg="expand ? 'minimize-2' : 'maximize-2'"
class="group-hover:inline-flex hidden" class="hidden group-hover:inline-flex"
@click.native="expand = !expand" @click.native="expand = !expand"
/> />
<ButtonSecondary <ButtonSecondary
@@ -40,7 +40,7 @@
<span <span
v-for="(line, index) in query" v-for="(line, index) in query"
:key="`line-${index}`" :key="`line-${index}`"
class="text-secondaryLight px-4 truncate whitespace-pre cursor-pointer" class="cursor-pointer text-secondaryLight px-4 truncate whitespace-pre"
data-testid="restore_history_entry" data-testid="restore_history_entry"
@click="useEntry" @click="useEntry"
>{{ line }}</span >{{ line }}</span

14
packages/hoppscotch-app/components/history/index.vue
View File

@@ -1,11 +1,11 @@
<template> <template>
<AppSection label="history"> <AppSection label="history">
<div class="sticky top-0 z-10 flex border-b bg-primary border-dividerLight"> <div class="bg-primary border-b border-dividerLight flex top-0 z-10 sticky">
<input <input
v-model="filterText" v-model="filterText"
type="search" type="search"
autocomplete="off" autocomplete="off"
class="flex w-full p-4 py-2 bg-transparent" class="bg-transparent flex w-full p-4 py-2"
:placeholder="`${$t('action.search')}`" :placeholder="`${$t('action.search')}`"
/> />
<div class="flex"> <div class="flex">
@@ -49,24 +49,24 @@
</div> </div>
<div <div
v-if="!(filteredHistory.length !== 0 || history.length === 0)" v-if="!(filteredHistory.length !== 0 || history.length === 0)"
class="flex flex-col items-center justify-center p-4 text-secondaryLight" class="flex flex-col text-secondaryLight p-4 items-center justify-center"
> >
<i class="pb-2 opacity-75 material-icons">manage_search</i> <i class="opacity-75 pb-2 material-icons">manage_search</i>
<span class="text-center"> <span class="text-center">
{{ $t("state.nothing_found") }} "{{ filterText }}" {{ $t("state.nothing_found") }} "{{ filterText }}"
</span> </span>
</div> </div>
<div <div
v-if="history.length === 0" v-if="history.length === 0"
class="flex flex-col items-center justify-center p-4 text-secondaryLight" class="flex flex-col text-secondaryLight p-4 items-center justify-center"
> >
<img <img
:src="`/images/states/${$colorMode.value}/history.svg`" :src="`/images/states/${$colorMode.value}/history.svg`"
loading="lazy" loading="lazy"
class="inline-flex flex-col object-contain object-center w-16 h-16 my-4" class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
:alt="$t('empty.history')" :alt="$t('empty.history')"
/> />
<span class="mb-4 text-center"> <span class="text-center mb-4">
{{ $t("empty.history") }} {{ $t("empty.history") }}
</span> </span>
</div> </div>

8
packages/hoppscotch-app/components/history/rest/Card.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="group flex items-center"> <div class="flex items-center group">
<span <span
class="flex items-center justify-center w-16 px-2 truncate cursor-pointer" class="cursor-pointer flex px-2 w-16 items-center justify-center truncate"
:class="entryStatus.className" :class="entryStatus.className"
data-testid="restore_history_entry" data-testid="restore_history_entry"
:title="`${duration}`" :title="`${duration}`"
@@ -10,7 +10,7 @@
{{ entry.request.method }} {{ entry.request.method }}
</span> </span>
<span <span
class="group-hover:text-secondaryDark flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer" class="cursor-pointer flex flex-1 min-w-0 py-2 pr-2 transition group-hover:text-secondaryDark"
data-testid="restore_history_entry" data-testid="restore_history_entry"
:title="`${duration}`" :title="`${duration}`"
@click="$emit('use-entry')" @click="$emit('use-entry')"
@@ -24,7 +24,7 @@
svg="trash" svg="trash"
color="red" color="red"
:title="$t('action.remove')" :title="$t('action.remove')"
class="group-hover:inline-flex hidden" class="hidden group-hover:inline-flex"
data-testid="delete_history_entry" data-testid="delete_history_entry"
@click.native="$emit('delete-entry')" @click.native="$emit('delete-entry')"
/> />

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

@@ -1,10 +1,10 @@
<template> <template>
<div> <div>
<div <div
class="bg-primary border-dividerLight top-upperSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b" class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
> >
<span class="flex items-center"> <span class="flex items-center">
<label class="text-secondaryLight font-semibold"> <label class="font-semibold text-secondaryLight">
{{ $t("authorization.type") }} {{ $t("authorization.type") }}
</label> </label>
<tippy <tippy
@@ -17,7 +17,7 @@
<template #trigger> <template #trigger>
<span class="select-wrapper"> <span class="select-wrapper">
<ButtonSecondary <ButtonSecondary
class="pr-8 ml-2 rounded-none" class="rounded-none ml-2 pr-8"
:label="authName" :label="authName"
/> />
</span> </span>
@@ -83,15 +83,15 @@
</div> </div>
<div <div
v-if="authType === 'none'" v-if="authType === 'none'"
class="text-secondaryLight flex flex-col items-center justify-center p-4" class="flex flex-col text-secondaryLight p-4 items-center justify-center"
> >
<img <img
:src="`/images/states/${$colorMode.value}/login.svg`" :src="`/images/states/${$colorMode.value}/login.svg`"
loading="lazy" loading="lazy"
class="inline-flex flex-col object-contain object-center w-16 h-16 my-4" class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
:alt="$t('empty.authorization')" :alt="$t('empty.authorization')"
/> />
<span class="pb-4 text-center"> <span class="text-center pb-4">
{{ $t("empty.authorization") }} {{ $t("empty.authorization") }}
</span> </span>
<ButtonSecondary <ButtonSecondary
@@ -104,16 +104,16 @@
class="mb-4" class="mb-4"
/> />
</div> </div>
<div v-if="authType === 'basic'" class="border-dividerLight flex border-b"> <div v-if="authType === 'basic'" class="border-b border-dividerLight flex">
<div class="border-dividerLight w-2/3 border-r"> <div class="border-r border-dividerLight w-2/3">
<div class="border-dividerLight flex border-b"> <div class="border-b border-dividerLight flex">
<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-dividerLight flex border-b"> <div class="border-b border-dividerLight flex">
<SmartEnvInput <SmartEnvInput
v-model="basicPassword" v-model="basicPassword"
:placeholder="$t('authorization.password')" :placeholder="$t('authorization.password')"
@@ -122,7 +122,7 @@
</div> </div>
</div> </div>
<div <div
class="bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9 sticky h-full p-4 overflow-auto" class="bg-primary h-full top-upperTertiaryStickyFold min-w-46 max-w-1/3 p-4 z-9 sticky overflow-auto"
> >
<div class="p-2"> <div class="p-2">
<div class="text-secondaryLight pb-2"> <div class="text-secondaryLight pb-2">
@@ -137,9 +137,9 @@
</div> </div>
</div> </div>
</div> </div>
<div v-if="authType === 'bearer'" class="border-dividerLight flex border-b"> <div v-if="authType === 'bearer'" class="border-b border-dividerLight flex">
<div class="border-dividerLight w-2/3 border-r"> <div class="border-r border-dividerLight w-2/3">
<div class="border-dividerLight flex border-b"> <div class="border-b border-dividerLight flex">
<SmartEnvInput <SmartEnvInput
v-model="bearerToken" v-model="bearerToken"
placeholder="Token" placeholder="Token"
@@ -148,7 +148,7 @@
</div> </div>
</div> </div>
<div <div
class="bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9 sticky h-full p-4 overflow-auto" class="bg-primary h-full top-upperTertiaryStickyFold min-w-46 max-w-1/3 p-4 z-9 sticky overflow-auto"
> >
<div class="p-2"> <div class="p-2">
<div class="text-secondaryLight pb-2"> <div class="text-secondaryLight pb-2">
@@ -165,10 +165,10 @@
</div> </div>
<div <div
v-if="authType === 'oauth-2'" v-if="authType === 'oauth-2'"
class="border-dividerLight flex border-b" class="border-b border-dividerLight flex"
> >
<div class="border-dividerLight w-2/3 border-r"> <div class="border-r border-dividerLight w-2/3">
<div class="border-dividerLight flex border-b"> <div class="border-b border-dividerLight flex">
<SmartEnvInput <SmartEnvInput
v-model="oauth2Token" v-model="oauth2Token"
placeholder="Token" placeholder="Token"
@@ -178,7 +178,7 @@
<HttpOAuth2Authorization /> <HttpOAuth2Authorization />
</div> </div>
<div <div
class="bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9 sticky h-full p-4 overflow-auto" class="bg-primary h-full top-upperTertiaryStickyFold min-w-46 max-w-1/3 p-4 z-9 sticky overflow-auto"
> >
<div class="p-2"> <div class="p-2">
<div class="text-secondaryLight pb-2"> <div class="text-secondaryLight pb-2">

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

@@ -1,10 +1,10 @@
<template> <template>
<div> <div>
<div <div
class="bg-primary border-dividerLight top-upperSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b" class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
> >
<span class="flex items-center"> <span class="flex items-center">
<label class="text-secondaryLight font-semibold"> <label class="font-semibold text-secondaryLight">
{{ $t("request.content_type") }} {{ $t("request.content_type") }}
</label> </label>
<tippy <tippy
@@ -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="pr-8 ml-2 rounded-none" class="rounded-none ml-2 pr-8"
/> />
</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="text-secondaryLight flex flex-col items-center justify-center p-4" class="flex flex-col text-secondaryLight p-4 items-center justify-center"
> >
<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="inline-flex flex-col object-contain object-center w-16 h-16 my-4" class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
:alt="$t('empty.body')" :alt="$t('empty.body')"
/> />
<span class="pb-4 text-center"> <span class="text-center pb-4">
{{ $t("empty.body") }} {{ $t("empty.body") }}
</span> </span>
<ButtonSecondary <ButtonSecondary

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

@@ -1,9 +1,9 @@
<template> <template>
<AppSection label="bodyParameters"> <AppSection label="bodyParameters">
<div <div
class="bg-primary border-dividerLight top-upperTertiaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b" class="bg-primary border-b border-dividerLight flex flex-1 top-upperTertiaryStickyFold pl-4 z-10 sticky items-center justify-between"
> >
<label class="text-secondaryLight font-semibold"> <label class="font-semibold text-secondaryLight">
{{ $t("request.body") }} {{ $t("request.body") }}
</label> </label>
<div class="flex"> <div class="flex">
@@ -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 border-dividerLight flex border-b divide-x" class="divide-dividerLight divide-x border-b border-dividerLight flex"
> >
<SmartEnvInput <SmartEnvInput
v-model="param.key" v-model="param.key"
@@ -53,7 +53,7 @@
" "
/> />
<div v-if="param.isFile" class="file-chips-container hide-scrollbar"> <div v-if="param.isFile" class="file-chips-container hide-scrollbar">
<div class="file-chips-wrapper space-x-2"> <div class="space-x-2 file-chips-wrapper">
<SmartDeletableChip <SmartDeletableChip
v-for="(file, fileIndex) in param.value" v-for="(file, fileIndex) in param.value"
:key="`param-${index}-file-${fileIndex}`" :key="`param-${index}-file-${fileIndex}`"
@@ -141,15 +141,15 @@
</div> </div>
<div <div
v-if="bodyParams.length === 0" v-if="bodyParams.length === 0"
class="text-secondaryLight flex flex-col items-center justify-center p-4" class="flex flex-col text-secondaryLight p-4 items-center justify-center"
> >
<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="inline-flex flex-col object-contain object-center w-16 h-16 my-4" class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
:alt="$t('empty.body')" :alt="$t('empty.body')"
/> />
<span class="pb-4 text-center"> <span class="text-center pb-4">
{{ $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 justify-between flex-1"> <div class="flex flex-1 justify-between">
<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 rounded border-dividerLight" class="border border-dividerLight rounded"
></div> ></div>
</div> </div>
</template> </template>

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

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

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

@@ -2,7 +2,7 @@
<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="flex flex-col px-2"> <div class="flex flex-col px-2">
<div ref="curlEditor" class="border rounded border-dividerLight"></div> <div ref="curlEditor" class="border border-dividerLight rounded"></div>
</div> </div>
</template> </template>
<template #footer> <template #footer>

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="flex border-b border-dividerLight"> <div class="border-b border-dividerLight flex">
<input <input
id="oidcDiscoveryURL" id="oidcDiscoveryURL"
v-model="oidcDiscoveryURL" v-model="oidcDiscoveryURL"
class="flex flex-1 px-4 py-2 bg-transparent" class="bg-transparent flex flex-1 py-2 px-4"
placeholder="OpenID Connect Discovery URL" placeholder="OpenID Connect Discovery URL"
name="oidcDiscoveryURL" name="oidcDiscoveryURL"
/> />
</div> </div>
<div class="flex border-b border-dividerLight"> <div class="border-b border-dividerLight flex">
<input <input
id="authURL" id="authURL"
v-model="authURL" v-model="authURL"
class="flex flex-1 px-4 py-2 bg-transparent" class="bg-transparent flex flex-1 py-2 px-4"
placeholder="Authentication URL" placeholder="Authentication URL"
name="authURL" name="authURL"
/> />
</div> </div>
<div class="flex border-b border-dividerLight"> <div class="border-b border-dividerLight flex">
<input <input
id="accessTokenURL" id="accessTokenURL"
v-model="accessTokenURL" v-model="accessTokenURL"
class="flex flex-1 px-4 py-2 bg-transparent" class="bg-transparent flex flex-1 py-2 px-4"
placeholder="Access Token URL" placeholder="Access Token URL"
name="accessTokenURL" name="accessTokenURL"
/> />
</div> </div>
<div class="flex border-b border-dividerLight"> <div class="border-b border-dividerLight flex">
<input <input
id="clientID" id="clientID"
v-model="clientID" v-model="clientID"
class="flex flex-1 px-4 py-2 bg-transparent" class="bg-transparent flex flex-1 py-2 px-4"
placeholder="Client ID" placeholder="Client ID"
name="clientID" name="clientID"
/> />
</div> </div>
<div class="flex border-b border-dividerLight"> <div class="border-b border-dividerLight flex">
<input <input
id="scope" id="scope"
v-model="scope" v-model="scope"
class="flex flex-1 px-4 py-2 bg-transparent" class="bg-transparent flex flex-1 py-2 px-4"
placeholder="Scope" placeholder="Scope"
name="scope" name="scope"
/> />

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

@@ -1,9 +1,9 @@
<template> <template>
<AppSection label="parameters"> <AppSection label="parameters">
<div <div
class="bg-primary border-dividerLight top-upperSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b" class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
> >
<label class="text-secondaryLight font-semibold"> <label class="font-semibold text-secondaryLight">
{{ t("request.parameter_list") }} {{ t("request.parameter_list") }}
</label> </label>
<div class="flex"> <div class="flex">
@@ -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 border-dividerLight flex border-b divide-x" class="divide-dividerLight divide-x border-b border-dividerLight flex"
> >
<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="text-secondaryLight flex flex-col items-center justify-center p-4" class="flex flex-col text-secondaryLight p-4 items-center justify-center"
> >
<img <img
:src="`/images/states/${$colorMode.value}/add_files.svg`" :src="`/images/states/${$colorMode.value}/add_files.svg`"
loading="lazy" loading="lazy"
class="inline-flex flex-col object-contain object-center w-16 h-16 my-4" class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
:alt="`${t('empty.parameters')}`" :alt="`${t('empty.parameters')}`"
/> />
<span class="pb-4 text-center"> <span class="text-center pb-4">
{{ t("empty.parameters") }} {{ t("empty.parameters") }}
</span> </span>
<ButtonSecondary <ButtonSecondary

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

@@ -1,9 +1,9 @@
<template> <template>
<AppSection id="script" :label="`${t('preRequest.script')}`"> <AppSection id="script" :label="`${t('preRequest.script')}`">
<div <div
class="bg-primary border-dividerLight top-upperSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b" class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
> >
<label class="text-secondaryLight font-semibold"> <label class="font-semibold text-secondaryLight">
{{ t("preRequest.javascript_code") }} {{ t("preRequest.javascript_code") }}
</label> </label>
<div class="flex"> <div class="flex">
@@ -29,12 +29,12 @@
/> />
</div> </div>
</div> </div>
<div class="border-dividerLight flex border-b"> <div class="border-b border-dividerLight flex">
<div class="border-dividerLight w-2/3 border-r"> <div class="border-r border-dividerLight w-2/3">
<div ref="preRrequestEditor"></div> <div ref="preRrequestEditor"></div>
</div> </div>
<div <div
class="bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9 sticky h-full p-4 overflow-auto" class="bg-primary h-full top-upperTertiaryStickyFold min-w-46 max-w-1/3 p-4 z-9 sticky overflow-auto"
> >
<div class="text-secondaryLight pb-2"> <div class="text-secondaryLight pb-2">
{{ t("helpers.pre_request_script") }} {{ t("helpers.pre_request_script") }}
@@ -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="text-secondaryLight pt-6 font-bold"> <h4 class="font-bold text-secondaryLight pt-6">
{{ t("preRequest.snippets") }} {{ t("preRequest.snippets") }}
</h4> </h4>
<div class="flex flex-col pt-4"> <div class="flex flex-col pt-4">

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

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

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

@@ -1,9 +1,9 @@
<template> <template>
<div <div
class="bg-primary hide-scrollbar sticky top-0 z-10 flex p-4 space-x-2 overflow-x-auto" class="bg-primary flex space-x-2 p-4 top-0 z-10 sticky overflow-x-auto hide-scrollbar"
> >
<div class="flex flex-1"> <div class="flex flex-1">
<div class="relative flex"> <div class="flex relative">
<label for="method"> <label for="method">
<tippy <tippy
ref="methodOptions" ref="methodOptions"
@@ -16,7 +16,7 @@
<span class="select-wrapper"> <span class="select-wrapper">
<input <input
id="method" id="method"
class="bg-primaryLight border-divider text-secondaryDark w-26 hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark flex px-4 py-2 font-semibold border rounded-l cursor-pointer" 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"
:value="newMethod" :value="newMethod"
:readonly="!isCustomMethod" :readonly="!isCustomMethod"
:placeholder="`${t('request.method')}`" :placeholder="`${t('request.method')}`"
@@ -58,7 +58,7 @@
<div class="flex"> <div class="flex">
<ButtonPrimary <ButtonPrimary
id="send" id="send"
class="min-w-20 flex-1 rounded-r-none" class="rounded-r-none flex-1 min-w-20"
:label="`${!loading ? t('action.send') : t('action.cancel')}`" :label="`${!loading ? t('action.send') : t('action.cancel')}`"
@click.native="!loading ? newSendRequest() : cancelRequest()" @click.native="!loading ? newSendRequest() : cancelRequest()"
/> />
@@ -107,7 +107,7 @@
</tippy> </tippy>
</span> </span>
<ButtonSecondary <ButtonSecondary
class="ml-2 rounded rounded-r-none" class="rounded rounded-r-none ml-2"
:label=" :label="
windowInnerWidth.x.value >= 768 && COLUMN_LAYOUT windowInnerWidth.x.value >= 768 && COLUMN_LAYOUT
? `${t('request.save')}` ? `${t('request.save')}`
@@ -139,7 +139,7 @@
name="request-name" name="request-name"
type="text" type="text"
autocomplete="off" autocomplete="off"
class="input mb-2" class="mb-2 input"
@keyup.enter="saveOptions.tippy().hide()" @keyup.enter="saveOptions.tippy().hide()"
/> />
<SmartItem <SmartItem

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

@@ -1,23 +1,23 @@
<template> <template>
<div <div
class="bg-primary hide-scrollbar whitespace-nowrap sticky top-0 z-10 flex items-center p-4 overflow-auto" class="bg-primary flex p-4 top-0 z-10 sticky items-center overflow-auto hide-scrollbar whitespace-nowrap"
> >
<div <div
v-if="response == null" v-if="response == null"
class="text-secondaryLight flex flex-col items-center justify-center flex-1" class="flex flex-col flex-1 text-secondaryLight items-center justify-center"
> >
<div class="flex pb-4 my-4 space-x-2"> <div class="flex space-x-2 my-4 pb-4">
<div class="flex flex-col items-end space-y-4 text-right"> <div class="flex flex-col space-y-4 text-right items-end">
<span class="flex items-center flex-1"> <span class="flex flex-1 items-center">
{{ t("shortcut.request.send_request") }} {{ t("shortcut.request.send_request") }}
</span> </span>
<span class="flex items-center flex-1"> <span class="flex flex-1 items-center">
{{ t("shortcut.general.show_all") }} {{ t("shortcut.general.show_all") }}
</span> </span>
<span class="flex items-center flex-1"> <span class="flex flex-1 items-center">
{{ t("shortcut.general.command_menu") }} {{ t("shortcut.general.command_menu") }}
</span> </span>
<span class="flex items-center flex-1"> <span class="flex flex-1 items-center">
{{ t("shortcut.general.help_menu") }} {{ t("shortcut.general.help_menu") }}
</span> </span>
</div> </div>
@@ -57,18 +57,18 @@
</div> </div>
<div <div
v-if="response.type === 'network_fail'" v-if="response.type === 'network_fail'"
class="flex flex-col items-center justify-center flex-1 p-4" class="flex flex-col flex-1 p-4 items-center justify-center"
> >
<img <img
:src="`/images/states/${$colorMode.value}/youre_lost.svg`" :src="`/images/states/${$colorMode.value}/youre_lost.svg`"
loading="lazy" loading="lazy"
class="inline-flex flex-col object-contain object-center w-32 h-32 my-4" class="flex-col object-contain object-center h-32 my-4 w-32 inline-flex"
:alt="`${t('error.network_fail')}`" :alt="`${t('error.network_fail')}`"
/> />
<span class="mb-2 font-semibold text-center"> <span class="font-semibold text-center mb-2">
{{ t("error.network_fail") }} {{ t("error.network_fail") }}
</span> </span>
<span class="text-secondaryLight max-w-sm mb-4 text-center"> <span class="max-w-sm text-center text-secondaryLight mb-4">
{{ t("helpers.network_fail") }} {{ t("helpers.network_fail") }}
</span> </span>
<AppInterceptor /> <AppInterceptor />
@@ -76,7 +76,7 @@
<div <div
v-if="response.type === 'success' || 'fail'" v-if="response.type === 'success' || 'fail'"
:class="statusCategory.className" :class="statusCategory.className"
class="space-x-4 font-semibold" class="font-semibold 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,9 +7,9 @@
" "
> >
<div <div
class="bg-primary border-dividerLight top-lowerSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b" class="bg-primary border-b border-dividerLight flex flex-1 top-lowerSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
> >
<label class="text-secondaryLight font-semibold"> <label class="font-semibold text-secondaryLight">
{{ t("test.report") }} {{ t("test.report") }}
</label> </label>
<ButtonSecondary <ButtonSecondary
@@ -19,7 +19,7 @@
@click.native="clearContent()" @click.native="clearContent()"
/> />
</div> </div>
<div class="divide-dividerLight border-dividerLight border-b divide-y-4"> <div class="divide-dividerLight border-b border-dividerLight divide-y-4">
<div v-if="testResults.tests" class="divide-dividerLight divide-y-4"> <div v-if="testResults.tests" class="divide-dividerLight divide-y-4">
<HttpTestResultEntry <HttpTestResultEntry
v-for="(result, index) in testResults.tests" v-for="(result, index) in testResults.tests"
@@ -38,10 +38,10 @@
<div <div
v-for="(result, index) in testResults.expectResults" v-for="(result, index) in testResults.expectResults"
:key="`result-${index}`" :key="`result-${index}`"
class="flex items-center px-4 py-2" class="flex py-2 px-4 items-center"
> >
<i <i
class="material-icons mr-4" class="mr-4 material-icons"
:class=" :class="
result.status === 'pass' ? 'text-green-500' : 'text-red-500' result.status === 'pass' ? 'text-green-500' : 'text-red-500'
" "
@@ -64,18 +64,18 @@
</div> </div>
<div <div
v-else v-else
class="text-secondaryLight flex flex-col items-center justify-center p-4" class="flex flex-col text-secondaryLight p-4 items-center justify-center"
> >
<img <img
:src="`/images/states/${$colorMode.value}/validation.svg`" :src="`/images/states/${$colorMode.value}/validation.svg`"
loading="lazy" loading="lazy"
class="inline-flex flex-col object-contain object-center w-16 h-16 my-4" class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
:alt="`${t('empty.tests')}`" :alt="`${t('empty.tests')}`"
/> />
<span class="pb-2 text-center"> <span class="text-center pb-2">
{{ t("empty.tests") }} {{ t("empty.tests") }}
</span> </span>
<span class="pb-4 text-center"> <span class="text-center pb-4">
{{ t("helpers.tests") }} {{ t("helpers.tests") }}
</span> </span>
<ButtonSecondary <ButtonSecondary

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

@@ -2,7 +2,7 @@
<div> <div>
<span <span
v-if="testResults.description" v-if="testResults.description"
class="flex items-center px-4 py-2 font-bold text-secondaryDark" class="flex font-bold text-secondaryDark py-2 px-4 items-center"
> >
{{ testResults.description }} {{ testResults.description }}
</span> </span>
@@ -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 items-center px-4 py-2" class="flex py-2 px-4 items-center"
> >
<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 items-center p-2"> <div class="flex p-2 items-center">
<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,9 +1,9 @@
<template> <template>
<AppSection id="script" :label="`${t('test.script')}`"> <AppSection id="script" :label="`${t('test.script')}`">
<div <div
class="bg-primary border-dividerLight top-upperSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b" class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
> >
<label class="text-secondaryLight font-semibold"> <label class="font-semibold text-secondaryLight">
{{ t("test.javascript_code") }} {{ t("test.javascript_code") }}
</label> </label>
<div class="flex"> <div class="flex">
@@ -29,12 +29,12 @@
/> />
</div> </div>
</div> </div>
<div class="border-dividerLight flex border-b"> <div class="border-b border-dividerLight flex">
<div class="border-dividerLight w-2/3 border-r"> <div class="border-r border-dividerLight w-2/3">
<div ref="testScriptEditor"></div> <div ref="testScriptEditor"></div>
</div> </div>
<div <div
class="bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9 sticky h-full p-4 overflow-auto" class="bg-primary h-full top-upperTertiaryStickyFold min-w-46 max-w-1/3 p-4 z-9 sticky overflow-auto"
> >
<div class="text-secondaryLight pb-2"> <div class="text-secondaryLight pb-2">
{{ t("helpers.post_request_tests") }} {{ t("helpers.post_request_tests") }}
@@ -44,7 +44,7 @@
to="https://docs.hoppscotch.io/features/tests" to="https://docs.hoppscotch.io/features/tests"
blank blank
/> />
<h4 class="text-secondaryLight pt-6 font-bold"> <h4 class="font-bold text-secondaryLight pt-6">
{{ t("test.snippets") }} {{ t("test.snippets") }}
</h4> </h4>
<div class="flex flex-col pt-4"> <div class="flex flex-col pt-4">

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,12 +1,12 @@
<template> <template>
<div class="relative flex items-center justify-center w-5 h-5 cursor-pointer"> <div class="cursor-pointer flex h-5 w-5 relative items-center justify-center">
<img <img
class="bg-primaryDark absolute object-cover object-center w-5 h-5 transition rounded-full" class="bg-primaryDark rounded-full object-cover object-center h-5 transition w-5 absolute"
:src="url" :src="url"
:alt="alt" :alt="alt"
loading="lazy" loading="lazy"
/> />
<div class="absolute inset-0 rounded-full shadow-inner"></div> <div class="rounded-full shadow-inner inset-0 absolute"></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-dividerLight sticky top-0 z-10 flex items-center justify-between flex-1 pl-4 border-b" class="bg-primary border-b border-dividerLight flex flex-1 pl-4 top-0 z-10 sticky items-center justify-between"
> >
<label for="log" class="text-secondaryLight py-2 font-semibold"> <label for="log" class="font-semibold text-secondaryLight py-2">
{{ title }} {{ title }}
</label> </label>
</div> </div>

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

@@ -15,16 +15,16 @@
> >
<AppSection label="request"> <AppSection label="request">
<div <div
class="bg-primary sticky top-0 z-10 flex flex-col p-4 space-y-4" class="bg-primary flex flex-col space-y-4 p-4 top-0 z-10 sticky"
> >
<div class="inline-flex flex-1 space-x-2"> <div class="space-x-2 flex-1 inline-flex">
<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-divider text-secondaryDark hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark w-full px-4 py-2 border rounded" 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"
:placeholder="$t('mqtt.url')" :placeholder="$t('mqtt.url')"
:disabled="connectionState" :disabled="connectionState"
@keyup.enter="validUrl ? toggleConnection() : null" @keyup.enter="validUrl ? toggleConnection() : null"
@@ -80,8 +80,8 @@
class="hide-scrollbar !overflow-auto" class="hide-scrollbar !overflow-auto"
> >
<AppSection label="messages"> <AppSection label="messages">
<div class="flex inline-flex flex-col flex-1 p-4"> <div class="flex flex-col flex-1 p-4 inline-flex">
<label for="pub_topic" class="text-secondaryLight font-semibold"> <label for="pub_topic" class="font-semibold text-secondaryLight">
{{ $t("mqtt.topic") }} {{ $t("mqtt.topic") }}
</label> </label>
</div> </div>
@@ -96,12 +96,12 @@
spellcheck="false" spellcheck="false"
/> />
</div> </div>
<div class="flex items-center justify-between flex-1 p-4"> <div class="flex flex-1 p-4 items-center justify-between">
<label for="mqtt-message" class="text-secondaryLight font-semibold"> <label for="mqtt-message" class="font-semibold text-secondaryLight">
{{ $t("mqtt.communication") }} {{ $t("mqtt.communication") }}
</label> </label>
</div> </div>
<div class="flex px-4 space-x-2"> <div class="flex space-x-2 px-4">
<input <input
id="mqtt-message" id="mqtt-message"
v-model="msg" v-model="msg"
@@ -120,13 +120,13 @@
/> />
</div> </div>
<div <div
class="border-dividerLight flex inline-flex flex-col flex-1 p-4 mt-4 border-t" class="border-t border-dividerLight flex flex-col flex-1 mt-4 p-4 inline-flex"
> >
<label for="sub_topic" class="text-secondaryLight font-semibold"> <label for="sub_topic" class="font-semibold text-secondaryLight">
{{ $t("mqtt.topic") }} {{ $t("mqtt.topic") }}
</label> </label>
</div> </div>
<div class="flex px-4 space-x-2"> <div class="flex space-x-2 px-4">
<input <input
id="sub_topic" id="sub_topic"
v-model="sub_topic" v-model="sub_topic"

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

@@ -14,8 +14,8 @@
class="hide-scrollbar !overflow-auto" class="hide-scrollbar !overflow-auto"
> >
<AppSection label="request"> <AppSection label="request">
<div class="bg-primary sticky top-0 z-10 flex p-4"> <div class="bg-primary flex p-4 top-0 z-10 sticky">
<div class="inline-flex flex-1 space-x-2"> <div class="space-x-2 flex-1 inline-flex">
<div class="flex flex-1"> <div class="flex flex-1">
<label for="client-version"> <label for="client-version">
<tippy <tippy
@@ -31,7 +31,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-divider text-secondaryDark w-26 hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark flex px-4 py-2 font-semibold border rounded-l cursor-pointer" 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"
:value="`Client ${clientVersion}`" :value="`Client ${clientVersion}`"
readonly readonly
:disabled="connectionState" :disabled="connectionState"
@@ -53,7 +53,7 @@
autocomplete="off" autocomplete="off"
spellcheck="false" spellcheck="false"
:class="{ error: !urlValid }" :class="{ error: !urlValid }"
class="bg-primaryLight border-divider text-secondaryDark hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark flex flex-1 w-full px-4 py-2 border" 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"
:placeholder="$t('socketio.url')" :placeholder="$t('socketio.url')"
:disabled="connectionState" :disabled="connectionState"
@keyup.enter="urlValid ? toggleConnection() : null" @keyup.enter="urlValid ? toggleConnection() : null"
@@ -61,7 +61,7 @@
<input <input
id="socketio-path" id="socketio-path"
v-model="path" v-model="path"
class="bg-primaryLight border-divider text-secondaryDark hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark flex flex-1 w-full px-4 py-2 border rounded-r" 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"
spellcheck="false" spellcheck="false"
:disabled="connectionState" :disabled="connectionState"
@keyup.enter="urlValid ? toggleConnection() : null" @keyup.enter="urlValid ? toggleConnection() : null"
@@ -101,8 +101,8 @@
class="hide-scrollbar !overflow-auto" class="hide-scrollbar !overflow-auto"
> >
<AppSection label="messages"> <AppSection label="messages">
<div class="flex inline-flex flex-col flex-1 p-4"> <div class="flex flex-col flex-1 p-4 inline-flex">
<label for="events" class="text-secondaryLight font-semibold"> <label for="events" class="font-semibold text-secondaryLight">
{{ $t("socketio.events") }} {{ $t("socketio.events") }}
</label> </label>
</div> </div>
@@ -118,8 +118,8 @@
:disabled="!connectionState" :disabled="!connectionState"
/> />
</div> </div>
<div class="flex items-center justify-between flex-1 p-4"> <div class="flex flex-1 p-4 items-center justify-between">
<label class="text-secondaryLight font-semibold"> <label class="font-semibold text-secondaryLight">
{{ $t("socketio.communication") }} {{ $t("socketio.communication") }}
</label> </label>
<div class="flex"> <div class="flex">
@@ -132,7 +132,7 @@
/> />
</div> </div>
</div> </div>
<div class="flex flex-col px-4 pb-4 space-y-2"> <div class="flex flex-col space-y-2 px-4 pb-4">
<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 sticky top-0 z-10 flex p-4"> <div class="bg-primary flex p-4 top-0 z-10 sticky">
<div class="inline-flex flex-1 space-x-2"> <div class="space-x-2 flex-1 inline-flex">
<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-divider text-secondaryDark hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark flex flex-1 w-full px-4 py-2 border rounded-l" 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"
: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-divider text-secondaryLight px-4 py-2 font-semibold truncate border-t border-b" class="bg-primaryLight border-t border-b border-divider font-semibold text-secondaryLight py-2 px-4 truncate"
> >
{{ $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-divider text-secondaryDark hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark flex flex-1 w-full px-4 py-2 border rounded-r" 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"
spellcheck="false" spellcheck="false"
:disabled="connectionSSEState" :disabled="connectionSSEState"
@keyup.enter="serverValid ? toggleSSEConnection() : null" @keyup.enter="serverValid ? toggleSSEConnection() : null"

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

@@ -14,12 +14,12 @@
class="hide-scrollbar !overflow-auto" class="hide-scrollbar !overflow-auto"
> >
<AppSection label="request"> <AppSection label="request">
<div class="bg-primary sticky top-0 z-10 flex p-4"> <div class="bg-primary flex p-4 top-0 z-10 sticky">
<div class="inline-flex flex-1 space-x-2"> <div class="space-x-2 flex-1 inline-flex">
<input <input
id="websocket-url" id="websocket-url"
v-model="url" v-model="url"
class="bg-primaryLight border-divider text-secondaryDark hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark w-full px-4 py-2 border rounded" 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"
type="url" type="url"
autocomplete="off" autocomplete="off"
spellcheck="false" spellcheck="false"
@@ -44,9 +44,9 @@
</div> </div>
</div> </div>
<div <div
class="bg-primary border-dividerLight top-upperPrimaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b" class="bg-primary border-b border-dividerLight flex flex-1 top-upperPrimaryStickyFold pl-4 z-10 sticky items-center justify-between"
> >
<label class="text-secondaryLight font-semibold"> <label class="font-semibold text-secondaryLight">
{{ $t("websocket.protocols") }} {{ $t("websocket.protocols") }}
</label> </label>
<div class="flex"> <div class="flex">
@@ -67,11 +67,11 @@
<div <div
v-for="(protocol, index) of protocols" v-for="(protocol, index) of protocols"
:key="`protocol-${index}`" :key="`protocol-${index}`"
class="divide-dividerLight border-dividerLight flex border-b divide-x" class="divide-dividerLight divide-x border-b border-dividerLight flex"
> >
<input <input
v-model="protocol.value" v-model="protocol.value"
class="flex flex-1 px-4 py-2 bg-transparent" class="bg-transparent flex flex-1 py-2 px-4"
:placeholder="$t('count.protocol', { count: index + 1 })" :placeholder="$t('count.protocol', { count: index + 1 })"
name="message" name="message"
type="text" type="text"
@@ -114,15 +114,15 @@
</div> </div>
<div <div
v-if="protocols.length === 0" v-if="protocols.length === 0"
class="text-secondaryLight flex flex-col items-center justify-center p-4" class="flex flex-col text-secondaryLight p-4 items-center justify-center"
> >
<img <img
:src="`/images/states/${$colorMode.value}/add_category.svg`" :src="`/images/states/${$colorMode.value}/add_category.svg`"
loading="lazy" loading="lazy"
class="inline-flex flex-col object-contain object-center w-16 h-16 my-4" class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
:alt="$t('empty.protocols')" :alt="$t('empty.protocols')"
/> />
<span class="mb-4 text-center"> <span class="text-center mb-4">
{{ $t("empty.protocols") }} {{ $t("empty.protocols") }}
</span> </span>
</div> </div>
@@ -148,15 +148,15 @@
class="hide-scrollbar !overflow-auto" class="hide-scrollbar !overflow-auto"
> >
<AppSection label="messages"> <AppSection label="messages">
<div class="flex inline-flex flex-col flex-1 p-4"> <div class="flex flex-col flex-1 p-4 inline-flex">
<label <label
for="websocket-message" for="websocket-message"
class="text-secondaryLight font-semibold" class="font-semibold text-secondaryLight"
> >
{{ $t("websocket.communication") }} {{ $t("websocket.communication") }}
</label> </label>
</div> </div>
<div class="flex px-4 space-x-2"> <div class="flex space-x-2 px-4">
<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="flex-nowrap group hover:text-secondaryDark inline-flex items-center justify-center transition cursor-pointer" class="cursor-pointer flex-nowrap transition inline-flex items-center justify-center group hover:text-secondaryDark"
@click="$emit('change')" @click="$emit('change')"
> >
<input <input
@@ -12,7 +12,7 @@
/> />
<label <label
for="checkbox" for="checkbox"
class="pl-0 font-semibold align-middle cursor-pointer" class="cursor-pointer font-semibold pl-0 align-middle"
> >
<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="px-2 truncate max-w-64"><slot></slot></span> <span class="max-w-64 px-2 truncate"><slot></slot></span>
<ButtonSecondary <ButtonSecondary
class="rounded close-button" class="rounded close-button"
svg="x" svg="x"

10
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="hover:bg-primaryDark hover:text-secondaryDark focus:outline-none focus-visible:bg-primaryDark focus-visible:text-secondaryDark inline-flex items-center flex-shrink-0 px-4 py-2 transition rounded" 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="[ :class="[
{ 'opacity-75 cursor-not-allowed': disabled }, { 'opacity-75 cursor-not-allowed': disabled },
{ 'pointer-events-none': loading }, { 'pointer-events-none': loading },
@@ -42,9 +42,9 @@
class="svg-icons" class="svg-icons"
/> />
</span> </span>
<SmartSpinner v-else class="text-secondaryDark mr-4" /> <SmartSpinner v-else class="mr-4 text-secondaryDark" />
<div <div
class="inline-flex items-start flex-1 truncate" class="flex-1 inline-flex items-start truncate"
:class="{ 'flex-col': description }" :class="{ 'flex-col': description }"
> >
<div class="font-semibold truncate"> <div class="font-semibold truncate">
@@ -52,14 +52,14 @@
</div> </div>
<p <p
v-if="description" v-if="description"
class="text-secondaryLight my-2 font-medium text-left" class="font-medium my-2 text-left text-secondaryLight"
> >
{{ description }} {{ description }}
</p> </p>
</div> </div>
<i <i
v-if="infoIcon" v-if="infoIcon"
class="material-icons items-center self-center ml-6" class="ml-6 items-center self-center material-icons"
:class="{ 'text-accent': activeInfoIcon }" :class="{ 'text-accent': activeInfoIcon }"
> >
{{ infoIcon }} {{ infoIcon }}

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="w-8 h-8" /> <AppLogo class="h-8 w-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="hide-scrollbar fixed inset-0 z-10 z-50 overflow-y-auto transition" class="inset-0 transition z-10 z-50 fixed overflow-y-auto hide-scrollbar"
> >
<div <div
class="sm:block flex items-end justify-center min-h-screen text-center" class="flex min-h-screen text-center items-end justify-center sm:block"
> >
<transition name="fade" appear> <transition name="fade" appear>
<div <div
class="bg-primaryLight opacity-90 fixed inset-0 transition" class="bg-primaryLight opacity-90 inset-0 transition fixed"
@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="sm:h-screen sm:inline-block sm:align-middle hidden" class="hidden sm:h-screen sm:inline-block 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 sm:align-middle sm:rounded-xl inline-block w-full overflow-hidden text-left align-bottom transition-all transform shadow-lg" 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="[ :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 items-center justify-between pl-2 mb-4" class="flex mb-4 pl-2 items-center justify-between"
> >
<h3 class="heading">{{ title }}</h3> <h3 class="heading">{{ title }}</h3>
<span class="flex"> <span class="flex">
@@ -55,14 +55,14 @@
</span> </span>
</div> </div>
<div <div
class="max-h-md hide-scrollbar flex flex-col overflow-y-auto" class="flex flex-col max-h-md overflow-y-auto 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 items-center justify-between flex-1 p-2 mt-4" class="flex flex-1 mt-4 p-2 items-center justify-between"
> >
<slot name="footer"></slot> <slot name="footer"></slot>
</div> </div>

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

@@ -1,6 +1,6 @@
<template> <template>
<div <div
class="flex flex-1 h-full flex-nowrap" class="flex flex-nowrap h-full flex-1"
: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 justify-between flex-1" class="flex flex-1 justify-between"
: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="w-1 h-1 ml-2 rounded-full bg-accentLight" class="bg-accentLight rounded-full h-1 ml-2 w-1"
></span> ></span>
</button> </button>
</div> </div>
@@ -46,7 +46,7 @@
</div> </div>
</div> </div>
<div <div
class="w-full h-full contents" class="h-full w-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,
}" }"
@@ -128,7 +128,7 @@ export default defineComponent({
@apply flex-shrink-0; @apply flex-shrink-0;
@apply items-center; @apply items-center;
@apply justify-center; @apply justify-center;
@apply px-4 py-2; @apply py-2 px-4;
@apply text-secondary; @apply text-secondary;
@apply font-semibold; @apply font-semibold;
@apply cursor-pointer; @apply cursor-pointer;

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

@@ -1,12 +1,12 @@
<template> <template>
<div <div
class="inline-flex items-center justify-center cursor-pointer flex-nowrap" class="cursor-pointer flex-nowrap inline-flex items-center justify-center"
@click="$emit('change')" @click="$emit('change')"
> >
<label ref="toggle" class="toggle" :class="{ on: on }"> <label ref="toggle" class="toggle" :class="{ on: on }">
<span class="handle"></span> <span class="handle"></span>
</label> </label>
<label class="pl-0 font-semibold align-middle cursor-pointer"> <label class="cursor-pointer font-semibold pl-0 align-middle">
<slot></slot> <slot></slot>
</label> </label>
</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="focus:outline-none inline-flex items-center px-4 py-2 truncate transition rounded" class="rounded py-2 px-4 transition inline-flex items-center truncate 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="hover:translate-x-2 focus:outline-none focus-visible:translate-x-2 inline-flex items-center flex-1 py-2 font-semibold truncate transition transform" class="font-semibold flex-1 py-2 transform transition inline-flex items-center truncate hover:translate-x-2 focus:outline-none focus-visible:translate-x-2"
:class="[ :class="[
label ? 'px-3' : 'px-2', label ? 'px-3' : 'px-2',
active active

20
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="relative flex"> <div class="flex relative">
<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 items-center justify-between flex-1 pt-4"> <div class="flex flex-1 pt-4 items-center justify-between">
<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 border-divider border divide-y rounded" class="divide-dividerLight divide-y border border-divider rounded"
> >
<div <div
v-if="teamDetails.data.right.team.teamMembers === 0" v-if="teamDetails.data.right.team.teamMembers === 0"
class="text-secondaryLight flex flex-col items-center justify-center p-4" class="flex flex-col text-secondaryLight p-4 items-center justify-center"
> >
<img <img
:src="`/images/states/${$colorMode.value}/add_group.svg`" :src="`/images/states/${$colorMode.value}/add_group.svg`"
loading="lazy" loading="lazy"
class="inline-flex flex-col object-contain object-center w-16 h-16 my-4" class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
:alt="`${t('empty.members')}`" :alt="`${t('empty.members')}`"
/> />
<span class="pb-4 text-center"> <span class="text-center pb-4">
{{ 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 flex divide-x" class="divide-dividerLight divide-x flex"
> >
<input <input
class="flex flex-1 px-4 py-2 bg-transparent" class="bg-transparent flex flex-1 py-2 px-4"
: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="flex flex-1 px-4 py-2 bg-transparent cursor-pointer" class="bg-transparent cursor-pointer flex flex-1 py-2 px-4"
:placeholder="`${t('team.permissions')}`" :placeholder="`${t('team.permissions')}`"
:name="'value' + index" :name="'value' + index"
:value=" :value="
@@ -154,7 +154,7 @@
v-if="!teamDetails.loading && E.isLeft(teamDetails.data)" v-if="!teamDetails.loading && E.isLeft(teamDetails.data)"
class="flex flex-col items-center" class="flex flex-col items-center"
> >
<i class="material-icons mb-4">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>

60
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 items-center justify-center max-w-md"> <div class="flex flex-col max-w-md items-center justify-center">
<SmartIcon class="text-accent w-6 h-6" name="users" /> <SmartIcon class="h-6 text-accent w-6" 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-dividerLight flex flex-col p-4 mt-8 space-y-6 border rounded" class="border border-dividerLight rounded flex flex-col space-y-6 mt-8 p-4"
> >
<div <div
v-for="(invitee, index) in sendInvitesResult" v-for="(invitee, index) in sendInvitesResult"
@@ -20,7 +20,7 @@
> >
<p class="flex items-center"> <p class="flex items-center">
<i <i
class="material-icons mr-4" class="mr-4 material-icons"
:class=" :class="
invitee.status === 'error' ? 'text-red-500' : 'text-green-500' invitee.status === 'error' ? 'text-red-500' : 'text-green-500'
" "
@@ -41,20 +41,20 @@
</div> </div>
<div <div
v-else-if="sendingInvites" v-else-if="sendingInvites"
class="flex items-center justify-center p-4" class="flex p-4 items-center justify-center"
> >
<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 items-center justify-between flex-1"> <div class="flex flex-1 items-center justify-between">
<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 border-divider border divide-y rounded"> <div class="divide-dividerLight divide-y border border-divider rounded">
<div <div
v-if="pendingInvites.loading" v-if="pendingInvites.loading"
class="flex items-center justify-center p-4" class="flex p-4 items-center justify-center"
> >
<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 flex divide-x" class="divide-dividerLight divide-x flex"
> >
<input <input
v-if="invitee" v-if="invitee"
class="text-secondaryLight flex flex-1 px-4 py-2 bg-transparent" class="bg-transparent flex flex-1 text-secondaryLight py-2 px-4"
: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="text-secondaryLight flex flex-1 px-4 py-2 bg-transparent" class="bg-transparent flex flex-1 text-secondaryLight py-2 px-4"
:placeholder="`${t('team.permissions')}`" :placeholder="`${t('team.permissions')}`"
:name="'value' + index" :name="'value' + index"
:value=" :value="
@@ -103,7 +103,7 @@
E.isRight(pendingInvites.data) && E.isRight(pendingInvites.data) &&
pendingInvites.data.right.team.teamInvitations.length === 0 pendingInvites.data.right.team.teamInvitations.length === 0
" "
class="text-secondaryLight flex flex-col items-center justify-center p-4" class="flex flex-col text-secondaryLight p-4 items-center justify-center"
> >
<span class="text-center"> <span class="text-center">
{{ t("empty.pending_invites") }} {{ t("empty.pending_invites") }}
@@ -111,14 +111,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 items-center p-4" class="flex flex-col p-4 items-center"
> >
<i class="material-icons mb-4">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 items-center justify-between flex-1 pt-4"> <div class="flex flex-1 pt-4 items-center justify-between">
<label for="memberList" class="p-4"> <label for="memberList" class="p-4">
{{ t("team.invite_tooltip") }} {{ t("team.invite_tooltip") }}
</label> </label>
@@ -131,15 +131,15 @@
/> />
</div> </div>
</div> </div>
<div class="divide-dividerLight border-divider border divide-y rounded"> <div class="divide-dividerLight divide-y border border-divider rounded">
<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 flex divide-x" class="divide-dividerLight divide-x flex"
> >
<input <input
v-model="invitee.key" v-model="invitee.key"
class="flex flex-1 px-4 py-2 bg-transparent" class="bg-transparent flex flex-1 py-2 px-4"
:placeholder="`${t('team.email')}`" :placeholder="`${t('team.email')}`"
:name="'invitee' + index" :name="'invitee' + index"
autofocus autofocus
@@ -155,7 +155,7 @@
<template #trigger> <template #trigger>
<span class="select-wrapper"> <span class="select-wrapper">
<input <input
class="flex flex-1 px-4 py-2 bg-transparent cursor-pointer" class="bg-transparent cursor-pointer flex flex-1 py-2 px-4"
:placeholder="`${t('team.permissions')}`" :placeholder="`${t('team.permissions')}`"
:name="'value' + index" :name="'value' + index"
:value=" :value="
@@ -209,15 +209,15 @@
</div> </div>
<div <div
v-if="newInvites.length === 0" v-if="newInvites.length === 0"
class="text-secondaryLight flex flex-col items-center justify-center p-4" class="flex flex-col text-secondaryLight p-4 items-center justify-center"
> >
<img <img
:src="`/images/states/${$colorMode.value}/add_group.svg`" :src="`/images/states/${$colorMode.value}/add_group.svg`"
loading="lazy" loading="lazy"
class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4" class="flex-col object-contain object-center h-16 mb-4 w-16 inline-flex"
:alt="`${t('empty.invites')}`" :alt="`${t('empty.invites')}`"
/> />
<span class="pb-4 text-center"> <span class="text-center pb-4">
{{ t("empty.invites") }} {{ t("empty.invites") }}
</span> </span>
<ButtonSecondary <ButtonSecondary
@@ -229,12 +229,12 @@
</div> </div>
<div <div
v-if="newInvites.length" v-if="newInvites.length"
class="border-dividerLight flex flex-col items-start px-4 py-4 mt-4 border rounded" class="border border-dividerLight rounded flex flex-col mt-4 py-4 px-4 items-start"
> >
<span <span
class="bg-primaryDark border-divider flex items-center justify-center px-2 py-1 mb-4 font-semibold border rounded-full" class="bg-primaryDark border border-divider rounded-full flex font-semibold mb-4 py-1 px-2 items-center justify-center"
> >
<i class="text-secondaryLight material-icons mr-2">help_outline</i> <i class="mr-2 text-secondaryLight material-icons">help_outline</i>
{{ t("profile.roles") }} {{ t("profile.roles") }}
</span> </span>
<p> <p>
@@ -242,10 +242,10 @@
{{ t("profile.roles_description") }} {{ t("profile.roles_description") }}
</span> </span>
</p> </p>
<ul class="mt-4 space-y-4"> <ul class="space-y-4 mt-4">
<li class="flex"> <li class="flex">
<span <span
class="text-secondaryDark max-w-16 w-1/4 font-semibold uppercase truncate" class="font-semibold text-secondaryDark max-w-16 w-1/4 uppercase truncate"
> >
{{ t("profile.owner") }} {{ t("profile.owner") }}
</span> </span>
@@ -255,7 +255,7 @@
</li> </li>
<li class="flex"> <li class="flex">
<span <span
class="text-secondaryDark max-w-16 w-1/4 font-semibold uppercase truncate" class="font-semibold text-secondaryDark max-w-16 w-1/4 uppercase truncate"
> >
{{ t("profile.editor") }} {{ t("profile.editor") }}
</span> </span>
@@ -265,7 +265,7 @@
</li> </li>
<li class="flex"> <li class="flex">
<span <span
class="text-secondaryDark max-w-16 w-1/4 font-semibold uppercase truncate" class="font-semibold text-secondaryDark max-w-16 w-1/4 uppercase truncate"
> >
{{ t("profile.viewer") }} {{ t("profile.viewer") }}
</span> </span>
@@ -280,7 +280,7 @@
<template #footer> <template #footer>
<p <p
v-if="sendInvitesResult.length" v-if="sendInvitesResult.length"
class="text-secondaryLight flex justify-between flex-1" class="flex flex-1 text-secondaryLight justify-between"
> >
<SmartAnchor <SmartAnchor
class="link" class="link"

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

@@ -1,7 +1,7 @@
<template> <template>
<div class="flex flex-col flex-1 border rounded border-divider"> <div class="border border-divider rounded flex flex-col flex-1">
<div <div
class="flex items-start flex-1" class="flex flex-1 items-start"
:class=" :class="
compact compact
? team.myRole === 'OWNER' ? team.myRole === 'OWNER'
@@ -24,7 +24,7 @@
> >
{{ team.name || t("state.nothing_found") }} {{ team.name || t("state.nothing_found") }}
</label> </label>
<div class="flex mt-2 overflow-hidden -space-x-1"> <div class="flex -space-x-1 mt-2 overflow-hidden">
<img <img
v-for="(member, index) in team.teamMembers" v-for="(member, index) in team.teamMembers"
:key="`member-${index}`" :key="`member-${index}`"
@@ -32,13 +32,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="inline-block w-5 h-5 rounded-full ring-primary ring-2" class="rounded-full h-5 ring-primary ring-2 w-5 inline-block"
loading="lazy" loading="lazy"
/> />
</div> </div>
</div> </div>
</div> </div>
<div v-if="!compact" class="flex items-end justify-between flex-shrink-0"> <div v-if="!compact" class="flex flex-shrink-0 items-end justify-between">
<span> <span>
<ButtonSecondary <ButtonSecondary
v-if="team.myRole === 'OWNER'" v-if="team.myRole === 'OWNER'"

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

@@ -1,6 +1,6 @@
<template> <template>
<AppSection label="teams"> <AppSection label="teams">
<div class="p-4 space-y-4"> <div class="space-y-4 p-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="text-secondaryLight flex flex-col items-center justify-center p-4" class="flex flex-col text-secondaryLight p-4 items-center justify-center"
> >
<img <img
:src="`/images/states/${$colorMode.value}/add_group.svg`" :src="`/images/states/${$colorMode.value}/add_group.svg`"
loading="lazy" loading="lazy"
class="inline-flex flex-col object-contain object-center w-16 h-16 mb-8" class="flex-col object-contain object-center h-16 mb-8 w-16 inline-flex"
:alt="`${t('empty.teams')}`" :alt="`${t('empty.teams')}`"
/> />
<span class="mb-4 text-center"> <span class="text-center mb-4">
{{ t("empty.teams") }} {{ t("empty.teams") }}
</span> </span>
<ButtonSecondary <ButtonSecondary
@@ -57,7 +57,7 @@
v-if="!myTeams.loading && E.isLeft(myTeams.data)" v-if="!myTeams.loading && E.isLeft(myTeams.data)"
class="flex flex-col items-center" class="flex flex-col items-center"
> >
<i class="material-icons mb-4">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>

2
packages/hoppscotch-app/layouts/default.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="flex w-screen h-screen"> <div class="flex h-screen w-screen">
<Splitpanes class="no-splitter" :dbl-click-splitter="false" horizontal> <Splitpanes class="no-splitter" :dbl-click-splitter="false" horizontal>
<Pane v-if="!ZEN_MODE" style="height: auto"> <Pane v-if="!ZEN_MODE" style="height: auto">
<AppHeader /> <AppHeader />

2
packages/hoppscotch-app/layouts/error.vue
View File

@@ -3,7 +3,7 @@
<img <img
:src="`/images/states/${$colorMode.value}/youre_lost.svg`" :src="`/images/states/${$colorMode.value}/youre_lost.svg`"
loading="lazy" loading="lazy"
class="inline-flex flex-col object-contain object-center my-4 h-46 w-46" class="flex-col object-contain object-center h-46 my-4 w-46 inline-flex"
:alt="message" :alt="message"
/> />
<h1 class="mb-4 text-4xl heading">{{ statusCode }}</h1> <h1 class="mb-4 text-4xl heading">{{ statusCode }}</h1>

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

@@ -14,18 +14,18 @@
class="hide-scrollbar !overflow-auto" class="hide-scrollbar !overflow-auto"
> >
<AppSection label="import"> <AppSection label="import">
<div class="flex items-start justify-between p-4"> <div class="flex p-4 items-start justify-between">
<label> <label>
{{ $t("documentation.generate_message") }} {{ $t("documentation.generate_message") }}
</label> </label>
<span <span
class="bg-accentDark text-accentContrast inline-flex px-2 py-1 rounded" class="bg-accentDark rounded text-accentContrast py-1 px-2 inline-flex"
> >
BETA BETA
</span> </span>
</div> </div>
<div <div
class="bg-primary border-dividerLight sticky top-0 z-10 flex items-start justify-between border-b" class="bg-primary border-b border-dividerLight flex top-0 z-10 sticky items-start justify-between"
> >
<label for="collectionUpload"> <label for="collectionUpload">
<ButtonSecondary <ButtonSecondary
@@ -54,12 +54,12 @@
<textarea-autosize <textarea-autosize
id="import-curl" id="import-curl"
v-model="collectionJSON" v-model="collectionJSON"
class="bg-primary p-4 font-mono" class="bg-primary font-mono p-4"
autofocus autofocus
rows="8" rows="8"
/> />
<div <div
class="bg-primary border-dividerLight sticky bottom-0 z-10 flex items-start justify-between p-4 border-t border-b" class="bg-primary border-t border-b border-dividerLight flex p-4 bottom-0 z-10 sticky items-start justify-between"
> >
<ButtonPrimary <ButtonPrimary
:label="$t('documentation.generate')" :label="$t('documentation.generate')"
@@ -76,16 +76,16 @@
<div class="flex flex-col"> <div class="flex flex-col">
<div <div
v-if="items.length === 0" v-if="items.length === 0"
class="text-secondaryLight flex flex-col items-center justify-center p-4" class="flex flex-col text-secondaryLight p-4 items-center justify-center"
> >
<i class="material-icons pb-2 opacity-75">topic</i> <i class="opacity-75 pb-2 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-dividerLight sticky top-0 z-10 flex flex-1 p-4 border-b" class="bg-primary border-b border-dividerLight flex flex-1 p-4 top-0 z-10 sticky"
> >
<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 items-center justify-center min-h-screen"> <div class="flex flex-col min-h-screen items-center justify-center">
<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>

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

@@ -57,7 +57,7 @@
</Pane> </Pane>
<Pane <Pane
:size="COLUMN_LAYOUT ? 65 : 50" :size="COLUMN_LAYOUT ? 65 : 50"
class="hide-scrollbar !overflow-auto flex flex-col" class="flex flex-col hide-scrollbar !overflow-auto"
> >
<HttpResponse ref="response" /> <HttpResponse ref="response" />
</Pane> </Pane>

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

@@ -1,11 +1,11 @@
<template> <template>
<div class="flex flex-col items-center justify-between min-h-screen"> <div class="flex flex-col min-h-screen items-center justify-between">
<div <div
v-if="invalidLink" v-if="invalidLink"
class="flex flex-col items-center justify-center flex-1" class="flex flex-col flex-1 items-center justify-center"
> >
<i class="material-icons pb-2 opacity-75">error_outline</i> <i class="opacity-75 pb-2 material-icons">error_outline</i>
<h1 class="heading text-center"> <h1 class="text-center heading">
{{ $t("team.invalid_invite_link") }} {{ $t("team.invalid_invite_link") }}
</h1> </h1>
<p class="mt-2 text-center"> <p class="mt-2 text-center">
@@ -14,13 +14,13 @@
</div> </div>
<div <div
v-else-if="loadingCurrentUser" v-else-if="loadingCurrentUser"
class="flex flex-col items-center justify-center flex-1 p-4" class="flex flex-col flex-1 p-4 items-center justify-center"
> >
<SmartSpinner /> <SmartSpinner />
</div> </div>
<div <div
v-else-if="currentUser === null" v-else-if="currentUser === null"
class="flex flex-col items-center justify-center flex-1 p-4" class="flex flex-col flex-1 p-4 items-center justify-center"
> >
<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 items-center justify-center flex-1 p-4"> <div v-else class="flex flex-col flex-1 p-4 items-center justify-center">
<div <div
v-if="inviteDetails.loading" v-if="inviteDetails.loading"
class="flex flex-col items-center justify-center flex-1 p-4" class="flex flex-col flex-1 p-4 items-center justify-center"
> >
<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 items-center p-4" class="flex flex-col p-4 items-center"
> >
<i class="material-icons mb-4">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-dividerLight flex flex-col items-center p-4 mt-8 border rounded" class="border border-dividerLight rounded flex flex-col mt-8 p-4 items-center"
> >
<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 items-center justify-center flex-1 p-4" class="flex flex-col flex-1 p-4 items-center justify-center"
> >
<h1 class="heading"> <h1 class="heading">
{{ {{
@@ -75,7 +75,7 @@
}) })
}} }}
</h1> </h1>
<p class="text-secondaryLight mt-2"> <p class="mt-2 text-secondaryLight">
{{ {{
$t("team.invited_to_team", { $t("team.invited_to_team", {
owner: owner:
@@ -103,7 +103,7 @@
E.isRight(inviteDetails.data) && E.isRight(inviteDetails.data) &&
joinTeamSuccess joinTeamSuccess
" "
class="flex flex-col items-center justify-center flex-1 p-4" class="flex flex-col flex-1 p-4 items-center justify-center"
> >
<h1 class="heading"> <h1 class="heading">
{{ {{
@@ -112,7 +112,7 @@
}) })
}} }}
</h1> </h1>
<p class="text-secondaryLight mt-2"> <p class="mt-2 text-secondaryLight">
{{ {{
$t("team.joined_team_description", { $t("team.joined_team_description", {
team: inviteDetails.data.right.teamInvitation.team.name, team: inviteDetails.data.right.teamInvitation.team.name,

30
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="inline-flex flex-col object-contain object-center w-24 h-24 my-4" class="flex-col object-contain object-center h-24 my-4 w-24 inline-flex"
:alt="`${t('empty.parameters')}`" :alt="`${t('empty.parameters')}`"
/> />
<p class="text-secondaryLight pb-4 text-center"> <p class="text-center text-secondaryLight pb-4">
{{ 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 md:h-32 -mb-11 h-24 rounded" class="bg-primaryLight rounded h-24 -mb-11 md:h-32"
style="background-image: url('/images/cover.svg')" style="background-image: url('/images/cover.svg')"
></div> ></div>
<div class="md:flex-row flex flex-col justify-between px-4 space-y-8"> <div class="flex flex-col space-y-8 px-4 justify-between 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="ring-4 ring-primary w-16 h-16 rounded-lg" class="rounded-lg h-16 ring-primary ring-4 w-16"
:alt="currentUser.displayName" :alt="currentUser.displayName"
/> />
<SmartIcon v-else name="user" class="svg-icons" /> <SmartIcon v-else name="user" class="svg-icons" />
@@ -39,17 +39,17 @@
<label class="heading"> <label class="heading">
{{ currentUser.displayName || t("state.nothing_found") }} {{ currentUser.displayName || t("state.nothing_found") }}
</label> </label>
<p class="text-secondaryLight flex items-center"> <p class="flex text-secondaryLight items-center">
{{ currentUser.email }} {{ currentUser.email }}
<SmartIcon <SmartIcon
v-if="currentUser.emailVerified" v-if="currentUser.emailVerified"
name="verified" name="verified"
class="svg-icons ml-2 text-green-500" class="ml-2 text-green-500 svg-icons"
/> />
</p> </p>
</div> </div>
</div> </div>
<div class="flex items-end space-x-2"> <div class="flex space-x-2 items-end">
<div> <div>
<SmartItem <SmartItem
to="/settings" to="/settings"
@@ -68,10 +68,10 @@
:selected="true" :selected="true"
> >
<section class="p-4"> <section class="p-4">
<h4 class="text-secondaryDark font-semibold"> <h4 class="font-semibold text-secondaryDark">
{{ t("settings.profile") }} {{ t("settings.profile") }}
</h4> </h4>
<div class="text-secondaryLight mt-1"> <div class="mt-1 text-secondaryLight">
{{ t("settings.profile_description") }} {{ t("settings.profile_description") }}
</div> </div>
<div class="py-4"> <div class="py-4">
@@ -79,7 +79,7 @@
{{ t("settings.profile_name") }} {{ t("settings.profile_name") }}
</label> </label>
<form <form
class="md:max-w-sm flex mt-2" class="flex mt-2 md:max-w-sm"
@submit.prevent="updateDisplayName" @submit.prevent="updateDisplayName"
> >
<input <input
@@ -93,7 +93,7 @@
/> />
<ButtonPrimary <ButtonPrimary
:label="t('action.save')" :label="t('action.save')"
class="min-w-16 ml-2" class="ml-2 min-w-16"
type="submit" type="submit"
:loading="updatingDisplayName" :loading="updatingDisplayName"
/> />
@@ -101,13 +101,13 @@
</div> </div>
</section> </section>
<section class="p-4"> <section class="p-4">
<h4 class="text-secondaryDark font-semibold"> <h4 class="font-semibold text-secondaryDark">
{{ t("settings.sync") }} {{ t("settings.sync") }}
</h4> </h4>
<div class="text-secondaryLight mt-1"> <div class="mt-1 text-secondaryLight">
{{ t("settings.sync_description") }} {{ t("settings.sync_description") }}
</div> </div>
<div class="py-4 space-y-4"> <div class="space-y-4 py-4">
<div class="flex items-center"> <div class="flex items-center">
<SmartToggle <SmartToggle
:on="SYNC_COLLECTIONS" :on="SYNC_COLLECTIONS"

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

@@ -2,30 +2,30 @@
<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 items-center justify-center flex-1" class="flex flex-col flex-1 items-center justify-center"
> >
<i class="material-icons pb-2 opacity-75">error_outline</i> <i class="opacity-75 pb-2 material-icons">error_outline</i>
<h1 class="heading text-center"> <h1 class="text-center heading">
{{ $t("error.invalid_link") }} {{ $t("error.invalid_link") }}
</h1> </h1>
<p class="mt-2 text-center"> <p class="mt-2 text-center">
{{ $t("error.invalid_link_description") }} {{ $t("error.invalid_link_description") }}
</p> </p>
</div> </div>
<div v-else class="flex flex-col items-center justify-center flex-1 p-4"> <div v-else class="flex flex-col flex-1 p-4 items-center justify-center">
<div <div
v-if="shortcodeDetails.loading" v-if="shortcodeDetails.loading"
class="flex flex-col items-center justify-center flex-1 p-4" class="flex flex-col flex-1 p-4 items-center justify-center"
> >
<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 items-center p-4" class="flex flex-col p-4 items-center"
> >
<i class="material-icons pb-2 opacity-75">error_outline</i> <i class="opacity-75 pb-2 material-icons">error_outline</i>
<h1 class="heading text-center"> <h1 class="text-center heading">
{{ $t("error.invalid_link") }} {{ $t("error.invalid_link") }}
</h1> </h1>
<p class="mt-2 text-center"> <p class="mt-2 text-center">
@@ -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 items-center justify-center flex-1 p-4" class="flex flex-col flex-1 p-4 items-center justify-center"
> >
<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 space-y-8 divide-y"> <div class="container divide-dividerLight divide-y space-y-8">
<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="p-8 md:col-span-2 space-y-8"> <div class="space-y-8 p-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="py-4 space-y-4"> <div class="space-y-4 py-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="p-8 md:col-span-2 space-y-8"> <div class="space-y-8 p-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 py-4 space-y-2"> <div class="flex flex-col space-y-2 py-4">
<span> <span>
<SmartItem <SmartItem
to="https://addons.mozilla.org/en-US/firefox/addon/hoppscotch" to="https://addons.mozilla.org/en-US/firefox/addon/hoppscotch"
@@ -151,7 +151,7 @@
/> />
</span> </span>
</div> </div>
<div class="py-4 space-y-4"> <div class="space-y-4 py-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="py-4 space-y-4"> <div class="space-y-4 py-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 items-center py-4 space-x-2"> <div class="flex space-x-2 py-4 items-center">
<div class="relative flex flex-col flex-1"> <div class="flex flex-col flex-1 relative">
<input <input
id="url" id="url"
v-model="PROXY_URL" v-model="PROXY_URL"