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

feat: replacing windicss by tailwindcss in hoppscotch-ui (#3076)

Browse Source 
Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>
Co-authored-by: Joel Jacob Stephen <70131076+JoelJacobStephen@users.noreply.github.com>
Co-authored-by: nivedin <nivedinp@gmail.com>
This commit is contained in:
Anwarul Islam
2023-11-01 21:25:08 +06:00
committed by GitHub
parent 59b5a50a97
commit a215860782
174 changed files with 6921 additions and 5185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,6 @@
<template>
<div
class="relative flex items-center px-4 py-2 transition bg-error text-tiny group"
class="group relative flex items-center bg-error px-4 py-2 text-tiny transition"
role="alert"
>
<icon-lucide-info class="mr-2" />

2
packages/hoppscotch-common/src/components/app/ContextMenu.vue
View File

@@ -1,7 +1,7 @@
<template>
<div
ref="contextMenuRef"
class="fixed bg-popover shadow-lg transform translate-y-8 border border-dividerDark p-2 rounded"
class="fixed translate-y-8 transform rounded border border-dividerDark bg-popover p-2 shadow-lg"
:style="`top: ${position.top}px; left: ${position.left}px; z-index: 1000;`"
>
<div v-if="contextMenuOptions" class="flex flex-col">

2
packages/hoppscotch-common/src/components/app/DeveloperOptions.vue
View File

@@ -6,7 +6,7 @@
@close="hideModal"
>
<template #body>
<p class="px-2 mb-4 text-secondaryLight">
<p class="mb-4 px-2 text-secondaryLight">
{{ t("app.developer_option_description") }}
</p>
<div class="flex flex-1">

2
packages/hoppscotch-common/src/components/app/Footer.vue
View File

@@ -175,7 +175,7 @@
@click="COLUMN_LAYOUT = !COLUMN_LAYOUT"
/>
<span
class="transition transform"
class="transform transition"
:class="{
'rotate-180': SIDEBAR_ON_LEFT,
}"

26
packages/hoppscotch-common/src/components/app/Header.vue
View File

@@ -1,28 +1,28 @@
<template>
<div>
<header
class="flex items-center justify-between flex-1 flex-shrink-0 px-2 py-2 space-x-2 overflow-x-auto overflow-y-hidden"
class="flex flex-1 flex-shrink-0 items-center justify-between space-x-2 overflow-x-auto overflow-y-hidden px-2 py-2"
>
<div
class="inline-flex items-center justify-start flex-1 space-x-2"
class="inline-flex flex-1 items-center justify-start space-x-2"
:style="{
paddingTop: platform.ui?.appHeader?.paddingTop?.value,
paddingLeft: platform.ui?.appHeader?.paddingLeft?.value,
}"
>
<HoppButtonSecondary
class="tracking-wide !font-bold !text-secondaryDark hover:bg-primaryDark focus-visible:bg-primaryDark uppercase"
class="!font-bold uppercase tracking-wide !text-secondaryDark hover:bg-primaryDark focus-visible:bg-primaryDark"
:label="t('app.name')"
to="/"
/>
</div>
<div class="inline-flex items-center justify-center flex-1 space-x-2">
<div class="inline-flex flex-1 items-center justify-center space-x-2">
<button
class="flex flex-1 items-center justify-between px-2 py-1 self-stretch bg-primaryDark transition text-secondaryLight cursor-text rounded border border-dividerDark max-w-60 hover:border-dividerDark hover:bg-primaryLight hover:text-secondary focus-visible:border-dividerDark focus-visible:bg-primaryLight focus-visible:text-secondary"
class="flex max-w-[15rem] flex-1 cursor-text items-center justify-between self-stretch rounded border border-dividerDark bg-primaryDark px-2 py-1 text-secondaryLight transition hover:border-dividerDark hover:bg-primaryLight hover:text-secondary focus-visible:border-dividerDark focus-visible:bg-primaryLight focus-visible:text-secondary"
@click="invokeAction('modals.search.toggle')"
>
<span class="inline-flex flex-1 items-center">
<icon-lucide-search class="mr-2 svg-icons" />
<icon-lucide-search class="svg-icons mr-2" />
{{ t("app.search") }}
</span>
<span class="flex space-x-1">
@@ -48,7 +48,7 @@
@click="invokeAction('modals.support.toggle')"
/>
</div>
<div class="inline-flex items-center justify-end flex-1 space-x-2">
<div class="inline-flex flex-1 items-center justify-end space-x-2">
<div
v-if="currentUser === null"
class="inline-flex items-center space-x-2"
@@ -56,7 +56,7 @@
<HoppButtonSecondary
:icon="IconUploadCloud"
:label="t('header.save_workspace')"
class="hidden md:flex bg-green-500/15 py-1.75 border border-green-600/25 !text-green-500 hover:bg-green-400/10 focus-visible:bg-green-400/10 focus-visible:border-green-800/50 !focus-visible:text-green-600 hover:border-green-800/50 !hover:text-green-600"
class="py-1.75 !focus-visible:text-green-600 !hover:text-green-600 hidden border border-green-600/25 bg-green-500/[.15] !text-green-500 hover:border-green-800/50 hover:bg-green-400/10 focus-visible:border-green-800/50 focus-visible:bg-green-400/10 md:flex"
@click="invokeAction('modals.login.toggle')"
/>
<HoppButtonPrimary
@@ -77,13 +77,13 @@
@handle-click="handleTeamEdit()"
/>
<div
class="flex border divide-x rounded bg-green-500/15 divide-green-600/25 border-green-600/25 focus-within:bg-green-400/10 focus-within:border-green-800/50 focus-within:divide-green-800/50 hover:bg-green-400/10 hover:border-green-800/50 hover:divide-green-800/50"
class="flex divide-x divide-green-600/25 rounded border border-green-600/25 bg-green-500/[.15] focus-within:divide-green-800/50 focus-within:border-green-800/50 focus-within:bg-green-400/10 hover:divide-green-800/50 hover:border-green-800/50 hover:bg-green-400/10"
>
<HoppButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="t('team.invite_tooltip')"
:icon="IconUserPlus"
class="py-1.75 !text-green-500 !focus-visible:text-green-600 !hover:text-green-600"
class="py-1.75 !focus-visible:text-green-600 !hover:text-green-600 !text-green-500"
@click="handleInvite()"
/>
<HoppButtonSecondary
@@ -95,7 +95,7 @@
v-tippy="{ theme: 'tooltip' }"
:title="t('team.edit')"
:icon="IconSettings"
class="py-1.75 !text-green-500 !focus-visible:text-green-600 !hover:text-green-600"
class="py-1.75 !focus-visible:text-green-600 !hover:text-green-600 !text-green-500"
@click="handleTeamEdit()"
/>
</div>
@@ -110,7 +110,7 @@
:title="t('workspace.change')"
:label="mdAndLarger ? workspaceName : ``"
:icon="workspace.type === 'personal' ? IconUser : IconUsers"
class="pr-8 select-wrapper rounded bg-blue-500/15 py-1.75 border border-blue-600/25 !text-blue-500 focus-visible:bg-blue-400/10 focus-visible:border-blue-800/50 !focus-visible:text-blue-600 hover:bg-blue-400/10 hover:border-blue-800/50 !hover:text-blue-600"
class="select-wrapper !focus-visible:text-blue-600 !hover:text-blue-600 rounded border border-blue-600/25 bg-blue-500/[.15] py-[0.4375rem] pr-8 !text-blue-500 hover:border-blue-800/50 hover:bg-blue-400/10 focus-visible:border-blue-800/50 focus-visible:bg-blue-400/10"
/>
<template #content="{ hide }">
<div
@@ -176,7 +176,7 @@
@keyup.escape="hide()"
>
<div class="flex flex-col px-2 text-tiny">
<span class="inline-flex font-semibold truncate">
<span class="inline-flex truncate font-semibold">
{{
currentUser.displayName ||
t("profile.default_hopp_displayname")

18
packages/hoppscotch-common/src/components/app/Inspection.vue
View File

@@ -1,7 +1,7 @@
<template>
<div v-if="inspectionResults && inspectionResults.length > 0">
<tippy interactive trigger="click" theme="popover">
<div class="flex justify-center items-center flex-1 flex-col">
<div class="flex flex-1 flex-col items-center justify-center">
<HoppButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:icon="IconAlertTriangle"
@@ -10,12 +10,12 @@
/>
</div>
<template #content="{ hide }">
<div class="flex flex-col space-y-2 items-start flex-1">
<div class="flex flex-1 flex-col items-start space-y-2">
<div
class="flex justify-between border rounded pl-2 border-divider bg-popover sticky top-0 self-stretch"
class="sticky top-0 flex justify-between self-stretch rounded border border-divider bg-popover pl-2"
>
<span class="flex items-center flex-1">
<icon-lucide-activity class="mr-2 svg-icons text-accent" />
<span class="flex flex-1 items-center">
<icon-lucide-activity class="svg-icons mr-2 text-accent" />
<span class="font-bold">
{{ t("inspections.title") }}
</span>
@@ -31,10 +31,10 @@
<div
v-for="(inspector, index) in inspectionResults"
:key="index"
class="flex self-stretch max-w-md w-full"
class="flex w-full max-w-md self-stretch"
>
<div
class="flex flex-col flex-1 rounded border border-dashed border-dividerDark divide-y divide-dashed divide-dividerDark"
class="flex flex-1 flex-col divide-y divide-dashed divide-dividerDark rounded border border-dashed border-dividerDark"
>
<span
v-if="inspector.text.type === 'text'"
@@ -44,13 +44,13 @@
<HoppSmartLink
blank
:to="inspector.doc.link"
class="text-accent hover:text-accentDark transition"
class="text-accent transition hover:text-accentDark"
>
{{ inspector.doc.text }}
<icon-lucide-arrow-up-right class="svg-icons" />
</HoppSmartLink>
</span>
<span v-if="inspector.action" class="flex p-2 space-x-2">
<span v-if="inspector.action" class="flex space-x-2 p-2">
<HoppButtonSecondary
:label="inspector.action.text"
outline

4
packages/hoppscotch-common/src/components/app/Options.vue
View File

@@ -8,7 +8,7 @@
>
<template #body>
<div class="flex flex-col space-y-2">
<h2 class="p-4 font-semibold font-bold text-secondaryDark">
<h2 class="p-4 font-bold font-semibold text-secondaryDark">
{{ t("layout.name") }}
</h2>
<HoppSmartItem
@@ -27,7 +27,7 @@
active
@click="expandCollection"
/>
<h2 class="p-4 font-semibold font-bold text-secondaryDark">
<h2 class="p-4 font-bold font-semibold text-secondaryDark">
{{ t("support.title") }}
</h2>
<template

12
packages/hoppscotch-common/src/components/app/Share.vue
View File

@@ -16,13 +16,13 @@
class="share-link"
tabindex="0"
>
<component :is="platform.icon" class="w-6 h-6" />
<component :is="platform.icon" class="h-6 w-6" />
<span class="mt-3">
{{ platform.name }}
</span>
</a>
<button class="share-link" @click="copyAppLink">
<component :is="copyIcon" class="w-6 h-6 text-xl" />
<component :is="copyIcon" class="h-6 w-6 text-xl" />
<span class="mt-3">
{{ t("app.copy") }}
</span>
@@ -119,14 +119,14 @@ const hideModal = () => {
.share-link {
@apply border border-dividerLight;
@apply rounded;
@apply flex-col flex;
@apply flex flex-col;
@apply p-4;
@apply items-center;
@apply justify-center;
@apply font-semibold;
@apply hover: (bg-primaryLight text-secondaryDark);
@apply focus: outline-none;
@apply focus-visible: border-divider;
@apply hover:bg-primaryLight hover:text-secondaryDark;
@apply focus:outline-none;
@apply focus-visible:border-divider;
svg {
@apply opacity-80;

12
packages/hoppscotch-common/src/components/app/Shortcuts.vue
View File

@@ -2,7 +2,7 @@
<HoppSmartSlideOver :show="show" :title="t('app.shortcuts')" @close="close()">
<template #content>
<div
class="sticky top-0 z-10 flex flex-col flex-shrink-0 overflow-x-auto bg-primary"
class="sticky top-0 z-10 flex flex-shrink-0 flex-col overflow-x-auto bg-primary"
>
<HoppSmartInput
v-model="filterText"
@@ -17,7 +17,7 @@
v-if="isEmpty(shortcutsResults)"
:text="`${t('state.nothing_found')} ‟${filterText}”`"
>
<icon-lucide-search class="pb-2 opacity-75 svg-icons" />
<icon-lucide-search class="svg-icons pb-2 opacity-75" />
</HoppSmartPlaceholder>
<details
@@ -28,16 +28,16 @@
open
>
<summary
class="flex items-center flex-1 min-w-0 px-6 py-4 font-semibold transition cursor-pointer focus:outline-none text-secondaryLight hover:text-secondaryDark"
class="flex min-w-0 flex-1 cursor-pointer items-center px-6 py-4 font-semibold text-secondaryLight transition hover:text-secondaryDark focus:outline-none"
>
<icon-lucide-chevron-right class="mr-2 indicator" />
<icon-lucide-chevron-right class="indicator mr-2" />
<span
class="font-semibold truncate capitalize-first text-secondaryDark"
class="capitalize-first truncate font-semibold text-secondaryDark"
>
{{ sectionTitle }}
</span>
</summary>
<div class="flex flex-col px-6 pb-4 space-y-2">
<div class="flex flex-col space-y-2 px-6 pb-4">
<AppShortcutsEntry
v-for="(shortcut, index) in sectionResults"
:key="`shortcut-${index}`"

2
packages/hoppscotch-common/src/components/app/ShortcutsEntry.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="flex items-center py-1">
<span class="flex flex-1 mr-4">
<span class="mr-4 flex flex-1">
{{ shortcut.label }}
</span>
<kbd

10
packages/hoppscotch-common/src/components/app/ShortcutsPrompt.vue
View File

@@ -1,17 +1,17 @@
<template>
<div class="flex flex-col items-center justify-center text-secondaryLight">
<div class="flex mb-4 space-x-2">
<div class="mb-4 flex space-x-2">
<div class="flex flex-col items-end space-y-4 text-right">
<span class="flex items-center flex-1">
<span class="flex flex-1 items-center">
{{ t("shortcut.request.send_request") }}
</span>
<span class="flex items-center flex-1">
<span class="flex flex-1 items-center">
{{ t("shortcut.general.show_all") }}
</span>
<span class="flex items-center flex-1">
<span class="flex flex-1 items-center">
{{ t("shortcut.general.command_menu") }}
</span>
<span class="flex items-center flex-1">
<span class="flex flex-1 items-center">
{{ t("shortcut.general.help_menu") }}
</span>
</div>

32
packages/hoppscotch-common/src/components/app/Sidenav.vue
View File

@@ -1,6 +1,6 @@
<template>
<aside class="flex justify-between h-full md:flex-col">
<nav class="flex flex-1 flex-nowrap md:flex-col md:flex-none bg-primary">
<aside class="flex h-full justify-between md:flex-col">
<nav class="flex flex-1 flex-nowrap bg-primary md:flex-none md:flex-col">
<HoppSmartLink
v-for="(navigation, index) in primaryNavigation"
:key="`navigation-${index}`"
@@ -73,25 +73,25 @@ const primaryNavigation = [
.nav-link {
@apply relative;
@apply p-4;
@apply flex flex-col flex-1;
@apply flex flex-1 flex-col;
@apply items-center;
@apply justify-center;
@apply hover: (bg-primaryDark text-secondaryDark);
@apply focus-visible: text-secondaryDark;
@apply hover:bg-primaryDark hover:text-secondaryDark;
@apply focus-visible:text-secondaryDark;
@apply after:absolute;
@apply after:inset-x-0;
@apply after:md: inset-x-auto;
@apply after:md: inset-y-0;
@apply after:md:inset-x-auto;
@apply after:md:inset-y-0;
@apply after:bottom-0;
@apply after:md: bottom-auto;
@apply after:md: left-0;
@apply after:z-2;
@apply after:md:bottom-auto;
@apply after:md:left-0;
@apply after:z-10;
@apply after:h-0.5;
@apply after:md: h-full;
@apply after:md:h-full;
@apply after:w-full;
@apply after:md: w-0.5;
@apply after:content-DEFAULT;
@apply focus: after: bg-divider;
@apply after:md:w-0.5;
@apply after:content-[""];
@apply focus:after:bg-divider;
.svg-icons {
@apply opacity-75;
@@ -105,7 +105,7 @@ const primaryNavigation = [
&.router-link-active {
@apply text-secondaryDark;
@apply bg-primaryLight;
@apply hover: text-secondaryDark;
@apply hover:text-secondaryDark;
@apply after:bg-accent;
.svg-icons {
@@ -116,7 +116,7 @@ const primaryNavigation = [
&.exact-active-link {
@apply text-secondaryDark;
@apply bg-primaryLight;
@apply hover: text-secondaryDark;
@apply hover:text-secondaryDark;
@apply after:bg-accent;
.svg-icons {

8
packages/hoppscotch-common/src/components/app/spotlight/Entry.vue
View File

@@ -1,7 +1,7 @@
<template>
<button
ref="el"
class="flex items-center flex-1 px-6 py-4 font-medium space-x-4 transition cursor-pointer relative search-entry focus:outline-none"
class="search-entry relative flex flex-1 cursor-pointer items-center space-x-4 px-6 py-4 font-medium transition focus:outline-none"
:class="{ 'active bg-primaryLight text-secondaryDark': active }"
tabindex="-1"
@click="emit('action')"
@@ -9,7 +9,7 @@
>
<component
:is="entry.icon"
class="opacity-50 svg-icons"
class="svg-icons opacity-50"
:class="{ 'opacity-100': active }"
/>
<template
@@ -112,9 +112,9 @@ watch(
@apply after:left-0;
@apply after:bottom-0;
@apply after:bg-transparent;
@apply after:z-2;
@apply after:z-10;
@apply after:w-0.5;
@apply after:content-DEFAULT;
@apply after:content-[''];
&.active {
@apply after:bg-accentLight;

2
packages/hoppscotch-common/src/components/app/spotlight/entry/GQLHistory.vue
View File

@@ -8,7 +8,7 @@
{{ historyEntry.request.url }}
</span>
<span
class="font-semibold truncate text-tiny flex flex-shrink-0 border border-dividerDark rounded-md px-1"
class="flex flex-shrink-0 truncate rounded-md border border-dividerDark px-1 text-tiny font-semibold"
>
{{ historyEntry.request.query.split("\n")[0] }}
</span>

2
packages/hoppscotch-common/src/components/app/spotlight/entry/GQLRequest.vue
View File

@@ -1,5 +1,5 @@
<template>
<span class="flex flex-1 space-x-2 items-center">
<span class="flex flex-1 items-center space-x-2">
<template v-for="(folder, index) in pathFolders" :key="index">
<span class="block" :class="{ truncate: index !== 0 }">
{{ folder.name }}

2
packages/hoppscotch-common/src/components/app/spotlight/entry/RESTHistory.vue
View File

@@ -5,7 +5,7 @@
</span>
<icon-lucide-chevron-right class="flex flex-shrink-0" />
<span
class="font-semibold truncate text-tiny flex flex-shrink-0 border border-dividerDark rounded-md px-1"
class="flex flex-shrink-0 truncate rounded-md border border-dividerDark px-1 text-tiny font-semibold"
:class="entryStatus.className"
>
{{ historyEntry.request.method }}

4
packages/hoppscotch-common/src/components/app/spotlight/entry/RESTRequest.vue
View File

@@ -8,8 +8,8 @@
</template>
<span
v-if="request"
class="font-semibold truncate text-tiny flex flex-shrink-0 border border-dividerDark rounded-md px-1"
:class="getMethodLabelColorClassOf(request)"
class="flex flex-shrink-0 truncate rounded-md border border-dividerDark px-1 text-tiny font-semibold"
:style="{ color: getMethodLabelColorClassOf(request) }"
>
{{ request.method.toUpperCase() }}
</span>

12
packages/hoppscotch-common/src/components/app/spotlight/index.vue
View File

@@ -6,7 +6,7 @@
@close="emit('hide-modal')"
>
<template #body>
<div class="flex flex-col border-b transition border-divider">
<div class="flex flex-col border-b border-divider transition">
<div class="flex items-center">
<input
id="command"
@@ -16,14 +16,14 @@
autocomplete="off"
name="command"
:placeholder="`${t('app.type_a_command_search')}`"
class="flex flex-1 text-base bg-transparent text-secondaryDark px-6 py-5"
class="flex flex-1 bg-transparent px-6 py-5 text-base text-secondaryDark"
/>
<HoppSmartSpinner v-if="searchSession?.loading" class="mr-6" />
</div>
</div>
<div
v-if="searchSession && search.length > 0"
class="flex flex-col flex-1 overflow-y-auto border-b border-divider divide-y divide-dividerLight"
class="flex flex-1 flex-col divide-y divide-dividerLight overflow-y-auto border-b border-divider"
>
<div
v-for="([sectionID, sectionResult], sectionIndex) in scoredResults"
@@ -31,7 +31,7 @@
class="flex flex-col"
>
<h5
class="px-6 py-2 bg-primaryContrast z-10 text-secondaryLight sticky top-0"
class="sticky top-0 z-10 bg-primaryContrast px-6 py-2 text-secondaryLight"
>
{{ sectionResult.title }}
</h5>
@@ -49,7 +49,7 @@
:text="`${t('state.nothing_found')} ‟${search}”`"
>
<template #icon>
<icon-lucide-search class="pb-2 opacity-75 svg-icons" />
<icon-lucide-search class="svg-icons pb-2 opacity-75" />
</template>
<HoppButtonSecondary
:label="t('action.clear')"
@@ -59,7 +59,7 @@
</HoppSmartPlaceholder>
</div>
<div
class="flex flex-shrink-0 text-tiny text-secondaryLight p-4 justify-between whitespace-nowrap overflow-auto <sm:hidden"
class="flex flex-shrink-0 justify-between overflow-auto whitespace-nowrap p-4 text-tiny text-secondaryLight <sm:hidden"
>
<div class="flex items-center">
<kbd class="shortcut-key">↑</kbd>

12
packages/hoppscotch-common/src/components/collections/Collection.vue
View File

@@ -12,16 +12,16 @@
@dragleave="ordering = false"
@dragend="resetDragState"
></div>
<div class="flex flex-col relative">
<div class="relative flex flex-col">
<div
class="absolute bg-accent opacity-0 pointer-events-none inset-0 z-1 transition"
class="z-1 pointer-events-none absolute inset-0 bg-accent opacity-0 transition"
:class="{
'opacity-25':
dragging && notSameDestination && notSameParentDestination,
}"
></div>
<div
class="flex items-stretch group relative z-3 cursor-pointer pointer-events-auto"
class="z-3 group pointer-events-auto relative flex cursor-pointer items-stretch"
:draggable="!hasNoTeamAccess"
@dragstart="dragStart"
@drop="handelDrop($event)"
@@ -36,11 +36,11 @@
@contextmenu.prevent="options?.tippy.show()"
>
<div
class="flex items-center justify-center flex-1 min-w-0"
class="flex min-w-0 flex-1 items-center justify-center"
@click="emit('toggle-children')"
>
<span
class="flex items-center justify-center px-4 pointer-events-none"
class="pointer-events-none flex items-center justify-center px-4"
>
<HoppSmartSpinner v-if="isCollLoading" />
<component
@@ -51,7 +51,7 @@
/>
</span>
<span
class="flex flex-1 min-w-0 py-2 pr-2 transition pointer-events-none group-hover:text-secondaryDark"
class="pointer-events-none flex min-w-0 flex-1 py-2 pr-2 transition group-hover:text-secondaryDark"
>
<span class="truncate" :class="{ 'text-accent': isSelected }">
{{ collectionName }}

10
packages/hoppscotch-common/src/components/collections/ImportExport.vue
View File

@@ -26,7 +26,7 @@
<div v-if="step.name === 'FILE_IMPORT'" class="space-y-4">
<p class="flex items-center">
<span
class="inline-flex items-center justify-center flex-shrink-0 mr-4 border-4 rounded-full border-primary text-dividerDark"
class="mr-4 inline-flex flex-shrink-0 items-center justify-center rounded-full border-4 border-primary text-dividerDark"
:class="{
'!text-green-500': hasFile,
}"
@@ -38,14 +38,14 @@
</span>
</p>
<p
class="flex flex-col ml-10 border border-dashed rounded border-dividerDark"
class="ml-10 flex flex-col rounded border border-dashed border-dividerDark"
>
<input
id="inputChooseFileToImportFrom"
ref="inputChooseFileToImportFrom"
name="inputChooseFileToImportFrom"
type="file"
class="p-4 cursor-pointer transition file:transition file:cursor-pointer text-secondary hover:text-secondaryDark file:mr-2 file:py-2 file:px-4 file:rounded file:border-0 file:text-secondary hover:file:text-secondaryDark file:bg-primaryLight hover:file:bg-primaryDark"
class="cursor-pointer p-4 text-secondary transition file:mr-2 file:cursor-pointer file:rounded file:border-0 file:bg-primaryLight file:px-4 file:py-2 file:text-secondary file:transition hover:text-secondaryDark hover:file:bg-primaryDark hover:file:text-secondaryDark"
:accept="step.metadata.acceptedFileTypes"
@change="onFileChange"
/>
@@ -54,7 +54,7 @@
<div v-else-if="step.name === 'URL_IMPORT'" class="space-y-4">
<p class="flex items-center">
<span
class="inline-flex items-center justify-center flex-shrink-0 mr-4 border-4 rounded-full border-primary text-dividerDark"
class="mr-4 inline-flex flex-shrink-0 items-center justify-center rounded-full border-4 border-primary text-dividerDark"
:class="{
'!text-green-500': hasGist,
}"
@@ -65,7 +65,7 @@
{{ t(`${step.metadata.caption}`) }}
</span>
</p>
<p class="flex flex-col ml-10">
<p class="ml-10 flex flex-col">
<input
v-model="inputChooseGistToImportFrom"
type="url"

12
packages/hoppscotch-common/src/components/collections/MyCollections.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="flex flex-col flex-1">
<div class="flex flex-1 flex-col">
<div
class="sticky z-10 flex justify-between flex-1 border-b bg-primary border-dividerLight"
class="sticky z-10 flex flex-1 justify-between border-b border-dividerLight bg-primary"
:style="
saveRequest
? 'top: calc(var(--upper-primary-sticky-fold) - var(--line-height-body))'
@@ -31,7 +31,7 @@
/>
</span>
</div>
<div class="flex flex-col flex-1">
<div class="flex flex-1 flex-col">
<HoppSmartTree :adapter="myAdapter">
<template
#content="{ node, toggleChildren, isOpen, highlightChildren }"
@@ -248,7 +248,7 @@
:text="`${t('state.nothing_found')} ‟${filterText}”`"
>
<template #icon>
<icon-lucide-search class="pb-2 opacity-75 svg-icons" />
<icon-lucide-search class="svg-icons pb-2 opacity-75" />
</template>
</HoppSmartPlaceholder>
<HoppSmartPlaceholder
@@ -258,10 +258,10 @@
:text="t('empty.collections')"
>
<div class="flex flex-col items-center space-y-4">
<span class="text-secondaryLight text-center">
<span class="text-center text-secondaryLight">
{{ t("collection.import_or_create") }}
</span>
<div class="flex gap-4 flex-col items-stretch">
<div class="flex flex-col items-stretch gap-4">
<HoppButtonPrimary
:icon="IconImport"
:label="t('import.title')"

17
packages/hoppscotch-common/src/components/collections/Request.vue
View File

@@ -13,7 +13,7 @@
@dragend="resetDragState"
></div>
<div
class="flex items-stretch group"
class="group flex items-stretch"
:draggable="!hasNoTeamAccess"
@drop="handelDrop"
@dragstart="dragStart"
@@ -23,12 +23,13 @@
@contextmenu.prevent="options?.tippy.show()"
>
<div
class="flex items-center justify-center flex-1 min-w-0 cursor-pointer pointer-events-auto"
class="pointer-events-auto flex min-w-0 flex-1 cursor-pointer items-center justify-center"
@click="selectRequest()"
>
<span
class="flex items-center justify-center w-16 px-2 truncate pointer-events-none"
class="pointer-events-none flex w-16 items-center justify-center truncate px-2"
:class="requestLabelColor"
:style="{ color: requestLabelColor }"
>
<component
:is="IconCheckCircle"
@@ -37,12 +38,12 @@
:class="{ 'text-accent': isSelected }"
/>
<HoppSmartSpinner v-else-if="isRequestLoading" />
<span v-else class="font-semibold truncate text-tiny">
<span v-else class="truncate text-tiny font-semibold">
{{ request.method }}
</span>
</span>
<span
class="flex items-center flex-1 min-w-0 py-2 pr-2 pointer-events-none transition group-hover:text-secondaryDark"
class="pointer-events-none flex min-w-0 flex-1 items-center py-2 pr-2 transition group-hover:text-secondaryDark"
>
<span class="truncate" :class="{ 'text-accent': isSelected }">
{{ request.name }}
@@ -50,15 +51,15 @@
<span
v-if="isActive"
v-tippy="{ theme: 'tooltip' }"
class="relative h-1.5 w-1.5 flex flex-shrink-0 mx-3"
class="relative mx-3 flex h-1.5 w-1.5 flex-shrink-0"
:title="`${t('collection.request_in_use')}`"
>
<span
class="absolute inline-flex flex-shrink-0 w-full h-full bg-green-500 rounded-full opacity-75 animate-ping"
class="absolute inline-flex h-full w-full flex-shrink-0 animate-ping rounded-full bg-green-500 opacity-75"
>
</span>
<span
class="relative inline-flex flex-shrink-0 rounded-full h-1.5 w-1.5 bg-green-500"
class="relative inline-flex h-1.5 w-1.5 flex-shrink-0 rounded-full bg-green-500"
></span>
</span>
</span>

8
packages/hoppscotch-common/src/components/collections/TeamCollections.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="flex flex-col flex-1">
<div class="flex flex-1 flex-col">
<div
class="sticky z-10 flex justify-between flex-1 border-b bg-primary border-dividerLight"
class="sticky z-10 flex flex-1 justify-between border-b border-dividerLight bg-primary"
:style="
saveRequest
? 'top: calc(var(--upper-primary-sticky-fold) - var(--line-height-body))'
@@ -269,10 +269,10 @@
@drop.stop
>
<div class="flex flex-col items-center space-y-4">
<span class="text-secondaryLight text-center">
<span class="text-center text-secondaryLight">
{{ t("collection.import_or_create") }}
</span>
<div class="flex gap-4 flex-col items-stretch">
<div class="flex flex-col items-stretch gap-4">
<HoppButtonPrimary
:icon="IconImport"
:label="t('import.title')"

10
packages/hoppscotch-common/src/components/collections/graphql/Collection.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
<div
class="flex items-stretch group"
class="group flex items-stretch"
@dragover.prevent
@drop.prevent="dropEvent"
@dragover="dragging = true"
@@ -11,7 +11,7 @@
@contextmenu.prevent="options.tippy.show()"
>
<span
class="flex items-center justify-center px-4 cursor-pointer"
class="flex cursor-pointer items-center justify-center px-4"
@click="toggleShowChildren()"
>
<component
@@ -21,7 +21,7 @@
/>
</span>
<span
class="flex flex-1 min-w-0 py-2 pr-2 cursor-pointer transition group-hover:text-secondaryDark"
class="flex min-w-0 flex-1 cursor-pointer py-2 pr-2 transition group-hover:text-secondaryDark"
@click="toggleShowChildren()"
>
<span class="truncate" :class="{ 'text-accent': isSelected }">
@@ -136,10 +136,10 @@
</div>
<div v-if="showChildren || isFiltered" class="flex">
<div
class="bg-dividerLight cursor-nsResize flex ml-5.5 transform transition w-0.5 hover:bg-dividerDark hover:scale-x-125"
class="ml-[1.375rem] flex w-0.5 transform cursor-nsResize bg-dividerLight transition hover:scale-x-125 hover:bg-dividerDark"
@click="toggleShowChildren()"
></div>
<div class="flex flex-col flex-1 truncate">
<div class="flex flex-1 flex-col truncate">
<CollectionsGraphqlFolder
v-for="(folder, index) in collection.folders"
:key="`folder-${String(index)}`"

10
packages/hoppscotch-common/src/components/collections/graphql/Folder.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
<div
class="flex items-stretch group"
class="group flex items-stretch"
@dragover.prevent
@drop.prevent="dropEvent"
@dragover="dragging = true"
@@ -11,7 +11,7 @@
@contextmenu.prevent="options.tippy.show()"
>
<span
class="flex items-center justify-center px-4 cursor-pointer"
class="flex cursor-pointer items-center justify-center px-4"
@click="toggleShowChildren()"
>
<component
@@ -21,7 +21,7 @@
/>
</span>
<span
class="flex flex-1 min-w-0 py-2 pr-2 cursor-pointer transition group-hover:text-secondaryDark"
class="flex min-w-0 flex-1 cursor-pointer py-2 pr-2 transition group-hover:text-secondaryDark"
@click="toggleShowChildren()"
>
<span class="truncate" :class="{ 'text-accent': isSelected }">
@@ -128,10 +128,10 @@
</div>
<div v-if="showChildren || isFiltered" class="flex">
<div
class="bg-dividerLight cursor-nsResize flex ml-5.5 transform transition w-0.5 hover:bg-dividerDark hover:scale-x-125"
class="ml-[1.375rem] flex w-0.5 transform cursor-nsResize bg-dividerLight transition hover:scale-x-125 hover:bg-dividerDark"
@click="toggleShowChildren()"
></div>
<div class="flex flex-col flex-1 truncate">
<div class="flex flex-1 flex-col truncate">
<!-- Referring to this component only (this is recursive) -->
<Folder
v-for="(subFolder, subFolderIndex) in folder.folders"

12
packages/hoppscotch-common/src/components/collections/graphql/Request.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
<div
class="flex items-stretch group"
class="group flex items-stretch"
draggable="true"
@dragstart="dragStart"
@dragover.stop
@@ -10,7 +10,7 @@
@contextmenu.prevent="options.tippy.show()"
>
<span
class="flex items-center justify-center w-16 px-2 truncate cursor-pointer"
class="flex w-16 cursor-pointer items-center justify-center truncate px-2"
@click="selectRequest()"
>
<component
@@ -20,7 +20,7 @@
/>
</span>
<span
class="flex items-center flex-1 min-w-0 py-2 pr-2 cursor-pointer transition group-hover:text-secondaryDark"
class="flex min-w-0 flex-1 cursor-pointer items-center py-2 pr-2 transition group-hover:text-secondaryDark"
@click="selectRequest()"
>
<span class="truncate" :class="{ 'text-accent': isSelected }">
@@ -29,15 +29,15 @@
<span
v-if="isActive"
v-tippy="{ theme: 'tooltip' }"
class="relative h-1.5 w-1.5 flex flex-shrink-0 mx-3"
class="relative mx-3 flex h-1.5 w-1.5 flex-shrink-0"
:title="`${t('collection.request_in_use')}`"
>
<span
class="absolute inline-flex flex-shrink-0 w-full h-full bg-green-500 rounded-full opacity-75 animate-ping"
class="absolute inline-flex h-full w-full flex-shrink-0 animate-ping rounded-full bg-green-500 opacity-75"
>
</span>
<span
class="relative inline-flex flex-shrink-0 rounded-full h-1.5 w-1.5 bg-green-500"
class="relative inline-flex h-1.5 w-1.5 flex-shrink-0 rounded-full bg-green-500"
></span>
</span>
</span>

12
packages/hoppscotch-common/src/components/collections/graphql/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<div :class="{ 'rounded border border-divider': saveRequest }">
<div
class="sticky z-10 flex flex-col flex-shrink-0 overflow-x-auto rounded-t bg-primary"
class="sticky z-10 flex flex-shrink-0 flex-col overflow-x-auto rounded-t bg-primary"
:style="
saveRequest ? 'top: calc(-1 * var(--line-height-body))' : 'top: 0'
"
@@ -11,10 +11,10 @@
type="search"
autocomplete="off"
:placeholder="t('action.search')"
class="py-2 pl-4 pr-2 bg-transparent !border-0"
class="!border-0 bg-transparent py-2 pl-4 pr-2"
/>
<div
class="flex justify-between flex-1 flex-shrink-0 border-y bg-primary border-dividerLight"
class="flex flex-1 flex-shrink-0 justify-between border-y border-dividerLight bg-primary"
>
<HoppButtonSecondary
:icon="IconPlus"
@@ -67,10 +67,10 @@
:text="t('empty.collections')"
>
<div class="flex flex-col items-center space-y-4">
<span class="text-secondaryLight text-center">
<span class="text-center text-secondaryLight">
{{ t("collection.import_or_create") }}
</span>
<div class="flex gap-4 flex-col items-stretch">
<div class="flex flex-col items-stretch gap-4">
<HoppButtonPrimary
:icon="IconImport"
:label="t('import.title')"
@@ -93,7 +93,7 @@
:text="`${t('state.nothing_found')} ‟${filterText}”`"
>
<template #icon>
<icon-lucide-search class="pb-2 opacity-75 svg-icons" />
<icon-lucide-search class="svg-icons pb-2 opacity-75" />
</template>
</HoppSmartPlaceholder>
<CollectionsGraphqlAdd

6
packages/hoppscotch-common/src/components/collections/index.vue
View File

@@ -11,7 +11,7 @@
@dragend="draggingToRoot = false"
>
<div
class="sticky z-10 flex flex-col flex-shrink-0 overflow-x-auto border-b bg-primary border-dividerLight"
class="sticky z-10 flex flex-shrink-0 flex-col overflow-x-auto border-b border-dividerLight bg-primary"
:class="{ 'rounded-t': saveRequest }"
:style="
saveRequest ? 'top: calc(-1 * var(--line-height-body))' : 'top: 0'
@@ -86,12 +86,12 @@
@display-modal-import-export="displayModalImportExport(true)"
/>
<div
class="hidden bg-primaryDark flex-col flex-1 items-center py-15 justify-center px-4 text-secondaryLight"
class="py-15 hidden flex-1 flex-col items-center justify-center bg-primaryDark px-4 text-secondaryLight"
:class="{
'!flex': draggingToRoot && currentReorderingStatus.type !== 'request',
}"
>
<icon-lucide-list-end class="svg-icons !w-8 !h-8" />
<icon-lucide-list-end class="svg-icons !h-8 !w-8" />
</div>
<CollectionsAdd
:show="showModalAdd"

18
packages/hoppscotch-common/src/components/environments/Add.vue
View File

@@ -5,9 +5,9 @@
@close="hideModal"
>
<template #body>
<div class="flex space-y-4 flex-1 flex-col">
<div class="flex items-center space-x-8 ml-2">
<label for="name" class="font-semibold min-w-10">{{
<div class="flex flex-1 flex-col space-y-4">
<div class="ml-2 flex items-center space-x-8">
<label for="name" class="min-w-10 font-semibold">{{
t("environment.name")
}}</label>
<input
@@ -17,8 +17,8 @@
class="input"
/>
</div>
<div class="flex items-center space-x-8 ml-2">
<label for="value" class="font-semibold min-w-10">{{
<div class="ml-2 flex items-center space-x-8">
<label for="value" class="min-w-10 font-semibold">{{
t("environment.value")
}}</label>
<input
@@ -28,17 +28,17 @@
:placeholder="t('environment.value')"
/>
</div>
<div class="flex items-center space-x-8 ml-2">
<label for="scope" class="font-semibold min-w-10">
<div class="ml-2 flex items-center space-x-8">
<label for="scope" class="min-w-10 font-semibold">
{{ t("environment.scope") }}
</label>
<div
class="relative flex flex-1 flex-col border border-divider rounded focus-visible:border-dividerDark"
class="relative flex flex-1 flex-col rounded border border-divider focus-visible:border-dividerDark"
>
<EnvironmentsSelector v-model="scope" :is-scope-selector="true" />
</div>
</div>
<div v-if="replaceWithVariable" class="flex space-x-2 mt-3">
<div v-if="replaceWithVariable" class="mt-3 flex space-x-2">
<div class="min-w-18" />
<HoppSmartCheckbox
:on="replaceWithVariable"

34
packages/hoppscotch-common/src/components/environments/Selector.vue
View File

@@ -20,7 +20,7 @@
: `${t('environment.select')}`
: ''
"
class="flex-1 !justify-start pr-8 rounded-none"
class="flex-1 !justify-start rounded-none pr-8"
/>
</span>
<template #content="{ hide }">
@@ -101,7 +101,7 @@
<img
:src="`/images/states/${colorMode.value}/blockchain.svg`"
loading="lazy"
class="inline-flex flex-col object-contain object-center w-16 h-16 mb-2"
class="mb-2 inline-flex h-16 w-16 flex-col object-contain object-center"
:alt="`${t('empty.environments')}`"
/>
<span class="pb-2 text-center">
@@ -148,7 +148,7 @@
<img
:src="`/images/states/${colorMode.value}/blockchain.svg`"
loading="lazy"
class="inline-flex flex-col object-contain object-center w-16 h-16 mb-2"
class="mb-2 inline-flex h-16 w-16 flex-col object-contain object-center"
:alt="`${t('empty.environments')}`"
/>
<span class="pb-2 text-center">
@@ -160,7 +160,7 @@
v-if="!teamListLoading && teamAdapterError"
class="flex flex-col items-center py-4"
>
<icon-lucide-help-circle class="mb-4 svg-icons" />
<icon-lucide-help-circle class="svg-icons mb-4" />
{{ getErrorMessage(teamAdapterError) }}
</div>
</HoppSmartTab>
@@ -190,7 +190,7 @@
@keyup.escape="hide()"
>
<div
class="sticky top-0 font-semibold truncate flex items-center justify-between text-secondaryDark bg-primary border border-divider rounded pl-4"
class="sticky top-0 flex items-center justify-between truncate rounded border border-divider bg-primary pl-4 font-semibold text-secondaryDark"
>
{{ t("environment.global_variables") }}
<HoppButtonSecondary
@@ -205,12 +205,12 @@
"
/>
</div>
<div class="my-2 flex flex-col flex-1 space-y-2 pl-4 pr-2">
<div class="my-2 flex flex-1 flex-col space-y-2 pl-4 pr-2">
<div class="flex flex-1 space-x-4">
<span class="w-1/4 min-w-32 truncate text-tiny font-semibold">
<span class="min-w-32 w-1/4 truncate text-tiny font-semibold">
{{ t("environment.name") }}
</span>
<span class="w-full min-w-32 truncate text-tiny font-semibold">
<span class="min-w-32 w-full truncate text-tiny font-semibold">
{{ t("environment.value") }}
</span>
</div>
@@ -219,10 +219,10 @@
:key="index"
class="flex flex-1 space-x-4"
>
<span class="text-secondaryLight w-1/4 min-w-32 truncate">
<span class="min-w-32 w-1/4 truncate text-secondaryLight">
{{ variable.key }}
</span>
<span class="text-secondaryLight w-full min-w-32 truncate">
<span class="min-w-32 w-full truncate text-secondaryLight">
{{ variable.value }}
</span>
</div>
@@ -231,7 +231,7 @@
</div>
</div>
<div
class="sticky top-0 mt-2 font-semibold truncate flex items-center justify-between text-secondaryDark bg-primary border border-divider rounded pl-4"
class="sticky top-0 mt-2 flex items-center justify-between truncate rounded border border-divider bg-primary pl-4 font-semibold text-secondaryDark"
:class="{
'bg-primaryLight': !selectedEnv.variables,
}"
@@ -252,16 +252,16 @@
</div>
<div
v-if="selectedEnv.type === 'NO_ENV_SELECTED'"
class="text-secondaryLight my-2 flex flex-col flex-1 pl-4"
class="my-2 flex flex-1 flex-col pl-4 text-secondaryLight"
>
{{ t("environment.no_active_environment") }}
</div>
<div v-else class="my-2 flex flex-col flex-1 space-y-2 pl-4 pr-2">
<div v-else class="my-2 flex flex-1 flex-col space-y-2 pl-4 pr-2">
<div class="flex flex-1 space-x-4">
<span class="w-1/4 min-w-32 truncate text-tiny font-semibold">
<span class="min-w-32 w-1/4 truncate text-tiny font-semibold">
{{ t("environment.name") }}
</span>
<span class="w-full min-w-32 truncate text-tiny font-semibold">
<span class="min-w-32 w-full truncate text-tiny font-semibold">
{{ t("environment.value") }}
</span>
</div>
@@ -270,10 +270,10 @@
:key="index"
class="flex flex-1 space-x-4"
>
<span class="text-secondaryLight w-1/4 min-w-32 truncate">
<span class="min-w-32 w-1/4 truncate text-secondaryLight">
{{ variable.key }}
</span>
<span class="text-secondaryLight w-full min-w-32 truncate">
<span class="min-w-32 w-full truncate text-secondaryLight">
{{ variable.value }}
</span>
</div>

2
packages/hoppscotch-common/src/components/environments/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<div>
<div
class="sticky top-0 z-10 flex flex-col flex-shrink-0 overflow-x-auto bg-primary"
class="sticky top-0 z-10 flex flex-shrink-0 flex-col overflow-x-auto bg-primary"
>
<WorkspaceCurrent :section="t('tab.environments')" />
<EnvironmentsMyEnvironment

8
packages/hoppscotch-common/src/components/environments/my/Details.vue
View File

@@ -16,7 +16,7 @@
@submit="saveEnvironment"
/>
<div class="flex items-center justify-between flex-1">
<div class="flex flex-1 items-center justify-between">
<label for="variableList" class="p-4">
{{ t("environment.variable_list") }}
</label>
@@ -37,11 +37,11 @@
</div>
<div
v-if="evnExpandError"
class="w-full px-4 py-2 mb-2 overflow-auto font-mono text-red-400 whitespace-normal rounded bg-primaryLight"
class="mb-2 w-full overflow-auto whitespace-normal rounded bg-primaryLight px-4 py-2 font-mono text-red-400"
>
{{ t("environment.nested_overflow") }}
</div>
<div class="border rounded divide-y divide-dividerLight border-divider">
<div class="divide-y divide-dividerLight rounded border border-divider">
<div
v-for="({ id, env }, index) in vars"
:key="`variable-${id}-${index}`"
@@ -50,7 +50,7 @@
<input
v-model="env.key"
v-focus
class="flex flex-1 px-4 py-2 bg-transparent"
class="flex flex-1 bg-transparent px-4 py-2"
:placeholder="`${t('count.variable', { count: index + 1 })}`"
:name="'param' + index"
/>

8
packages/hoppscotch-common/src/components/environments/my/Environment.vue
View File

@@ -1,24 +1,24 @@
<template>
<div
class="flex items-stretch group"
class="group flex items-stretch"
@contextmenu.prevent="options!.tippy.show()"
>
<span
v-if="environmentIndex === 'Global'"
class="flex items-center justify-center px-4 cursor-pointer"
class="flex cursor-pointer items-center justify-center px-4"
@click="emit('edit-environment')"
>
<icon-lucide-globe class="svg-icons" />
</span>
<span
v-else
class="flex items-center justify-center px-4 cursor-pointer"
class="flex cursor-pointer items-center justify-center px-4"
@click="emit('edit-environment')"
>
<icon-lucide-layers class="svg-icons" />
</span>
<span
class="flex flex-1 min-w-0 py-2 pr-2 cursor-pointer transition group-hover:text-secondaryDark"
class="flex min-w-0 flex-1 cursor-pointer py-2 pr-2 transition group-hover:text-secondaryDark"
@click="emit('edit-environment')"
>
<span class="truncate">

6
packages/hoppscotch-common/src/components/environments/my/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<div>
<div
class="sticky z-10 flex justify-between flex-1 flex-shrink-0 overflow-x-auto border-b top-upperPrimaryStickyFold border-dividerLight bg-primary"
class="sticky top-upperPrimaryStickyFold z-10 flex flex-1 flex-shrink-0 justify-between overflow-x-auto border-b border-dividerLight bg-primary"
>
<HoppButtonSecondary
:icon="IconPlus"
@@ -39,10 +39,10 @@
:text="t('empty.environments')"
>
<div class="flex flex-col items-center space-y-4">
<span class="text-secondaryLight text-center">
<span class="text-center text-secondaryLight">
{{ t("environment.import_or_create") }}
</span>
<div class="flex gap-4 flex-col items-stretch">
<div class="flex flex-col items-stretch gap-4">
<HoppButtonPrimary
:icon="IconImport"
:label="t('import.title')"

8
packages/hoppscotch-common/src/components/environments/teams/Details.vue
View File

@@ -16,7 +16,7 @@
@submit="saveEnvironment"
/>
<div class="flex items-center justify-between flex-1">
<div class="flex flex-1 items-center justify-between">
<label for="variableList" class="p-4">
{{ t("environment.variable_list") }}
</label>
@@ -37,11 +37,11 @@
</div>
<div
v-if="evnExpandError"
class="w-full px-4 py-2 mb-2 overflow-auto font-mono text-red-400 whitespace-normal rounded bg-primaryLight"
class="mb-2 w-full overflow-auto whitespace-normal rounded bg-primaryLight px-4 py-2 font-mono text-red-400"
>
{{ t("environment.nested_overflow") }}
</div>
<div class="border rounded divide-y divide-dividerLight border-divider">
<div class="divide-y divide-dividerLight rounded border border-divider">
<div
v-for="({ id, env }, index) in vars"
:key="`variable-${id}-${index}`"
@@ -50,7 +50,7 @@
<input
v-model="env.key"
v-focus
class="flex flex-1 px-4 py-2 bg-transparent"
class="flex flex-1 bg-transparent px-4 py-2"
:class="isViewer && 'opacity-25'"
:placeholder="`${t('count.variable', { count: index + 1 })}`"
:name="'param' + index"

6
packages/hoppscotch-common/src/components/environments/teams/Environment.vue
View File

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

8
packages/hoppscotch-common/src/components/environments/teams/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<div>
<div
class="sticky z-10 flex justify-between flex-1 flex-shrink-0 overflow-x-auto border-b top-upperPrimaryStickyFold border-dividerLight bg-primary"
class="sticky top-upperPrimaryStickyFold z-10 flex flex-1 flex-shrink-0 justify-between overflow-x-auto border-b border-dividerLight bg-primary"
>
<HoppButtonSecondary
v-if="team === undefined || team.myRole === 'VIEWER'"
@@ -50,10 +50,10 @@
:text="t('empty.environments')"
>
<div class="flex flex-col items-center space-y-4">
<span class="text-secondaryLight text-center">
<span class="text-center text-secondaryLight">
{{ t("environment.import_or_create") }}
</span>
<div class="flex gap-4 flex-col items-stretch">
<div class="flex flex-col items-stretch gap-4">
<HoppButtonPrimary
:icon="IconImport"
:label="t('import.title')"
@@ -94,7 +94,7 @@
v-if="!loading && adapterError"
class="flex flex-col items-center py-4"
>
<icon-lucide-help-circle class="mb-4 svg-icons" />
<icon-lucide-help-circle class="svg-icons mb-4" />
{{ getErrorMessage(adapterError) }}
</div>
<EnvironmentsTeamsDetails

10
packages/hoppscotch-common/src/components/firebase/Login.vue
View File

@@ -47,9 +47,9 @@
/>
</form>
<div v-if="mode === 'email-sent'" class="flex flex-col px-4">
<div class="flex flex-col items-center justify-center max-w-md">
<icon-lucide-inbox class="w-6 h-6 text-accent" />
<h3 class="my-2 text-lg text-center">
<div class="flex max-w-md flex-col items-center justify-center">
<icon-lucide-inbox class="h-6 w-6 text-accent" />
<h3 class="my-2 text-center text-lg">
{{ t("auth.we_sent_magic_link") }}
</h3>
<p class="text-center">
@@ -63,7 +63,7 @@
<template #footer>
<div
v-if="mode === 'sign-in' && tosLink && privacyPolicyLink"
class="text-secondaryLight text-tiny"
class="text-tiny text-secondaryLight"
>
By signing in, you are agreeing to our
<HoppSmartAnchor
@@ -90,7 +90,7 @@
</div>
<div
v-if="mode === 'email-sent'"
class="flex justify-between flex-1 text-secondaryLight"
class="flex flex-1 justify-between text-secondaryLight"
>
<HoppSmartAnchor
class="link"

10
packages/hoppscotch-common/src/components/graphql/Authorization.vue
View File

@@ -1,10 +1,10 @@
<template>
<div class="flex flex-col flex-1">
<div class="flex flex-1 flex-col">
<div
class="sticky top-sidebarPrimaryStickyFold z-10 flex items-center justify-between pl-4 border-y bg-primary border-dividerLight"
class="sticky top-sidebarPrimaryStickyFold z-10 flex items-center justify-between border-y border-dividerLight bg-primary pl-4"
>
<span class="flex items-center">
<label class="font-semibold truncate text-secondaryLight">
<label class="truncate font-semibold text-secondaryLight">
{{ t("authorization.type") }}
</label>
<tippy
@@ -15,7 +15,7 @@
>
<span class="select-wrapper">
<HoppButtonSecondary
class="pr-8 ml-2 rounded-none"
class="ml-2 rounded-none pr-8"
:label="authName"
/>
</span>
@@ -171,7 +171,7 @@
</div>
</div>
<div
class="sticky flex-shrink-0 h-full p-4 overflow-auto overflow-x-auto bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9"
class="z-9 sticky top-upperTertiaryStickyFold h-full min-w-46 max-w-1/3 flex-shrink-0 overflow-auto overflow-x-auto bg-primary p-4"
>
<div class="pb-2 text-secondaryLight">
{{ t("helpers.authorization") }}

10
packages/hoppscotch-common/src/components/graphql/Field.vue
View File

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

12
packages/hoppscotch-common/src/components/graphql/Headers.vue
View File

@@ -1,6 +1,6 @@
<template>
<div
class="sticky top-sidebarPrimaryStickyFold z-10 flex items-center justify-between pl-4 border-y bg-primary border-dividerLight"
class="sticky top-sidebarPrimaryStickyFold z-10 flex items-center justify-between border-y border-dividerLight bg-primary pl-4"
>
<label class="font-semibold text-secondaryLight">
{{ t("tab.headers") }}
@@ -42,7 +42,7 @@
/>
</div>
</div>
<div v-if="bulkMode" ref="bulkEditor" class="flex flex-col flex-1"></div>
<div v-if="bulkMode" ref="bulkEditor" class="flex flex-1 flex-col"></div>
<div v-else>
<draggable
v-model="workingHeaders"
@@ -56,7 +56,7 @@
>
<template #item="{ element: header, index }">
<div
class="flex border-b divide-x divide-dividerLight border-dividerLight draggable-content group"
class="draggable-content group flex divide-x divide-dividerLight border-b border-dividerLight"
>
<span>
<HoppButtonSecondary
@@ -71,7 +71,7 @@
:icon="IconGripVertical"
class="cursor-auto text-primary hover:text-primary"
:class="{
'draggable-handle group-hover:text-secondaryLight !cursor-grab':
'draggable-handle !cursor-grab group-hover:text-secondaryLight':
index !== workingHeaders?.length - 1,
}"
tabindex="-1"
@@ -91,7 +91,7 @@
px-4
truncate
"
class="flex-1 !flex"
class="!flex flex-1"
@input="
updateHeader(index, {
id: header.id,
@@ -102,7 +102,7 @@
"
/>
<input
class="flex flex-1 px-4 py-2 bg-transparent"
class="flex flex-1 bg-transparent px-4 py-2"
:placeholder="`${t('count.value', { count: index + 1 })}`"
:name="`value ${String(index)}`"
:value="header.value"

8
packages/hoppscotch-common/src/components/graphql/Query.vue
View File

@@ -1,6 +1,6 @@
<template>
<div
class="sticky top-sidebarPrimaryStickyFold z-10 flex items-center justify-between pl-4 border-y bg-primary border-dividerLight"
class="sticky top-sidebarPrimaryStickyFold z-10 flex items-center justify-between border-y border-dividerLight bg-primary pl-4"
>
<label class="font-semibold text-secondaryLight">
{{ t("request.query") }}
@@ -16,7 +16,7 @@
:title="`${t('request.stop')}`"
:label="`${t('request.stop')}`"
:icon="IconStop"
class="rounded-none !text-accent !hover:text-accentDark"
class="!hover:text-accentDark rounded-none !text-accent"
@click="unsubscribe()"
/>
@@ -31,7 +31,7 @@
:label="`${selectedOperation.name?.value ?? t('request.run')}`"
:icon="IconPlay"
:disabled="!selectedOperation"
class="rounded-none !text-accent !hover:text-accentDark"
class="!hover:text-accentDark rounded-none !text-accent"
@click="runQuery(selectedOperation)"
/>
@@ -79,7 +79,7 @@
/>
</div>
</div>
<div ref="queryEditor" class="flex flex-col flex-1"></div>
<div ref="queryEditor" class="flex flex-1 flex-col"></div>
</template>
<script setup lang="ts">

4
packages/hoppscotch-common/src/components/graphql/Request.vue
View File

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

2
packages/hoppscotch-common/src/components/graphql/RequestOptions.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="flex flex-col flex-1 h-full">
<div class="flex h-full flex-1 flex-col">
<HoppSmartTabs
v-model="selectedOptionTab"
styles="sticky top-0 bg-primary z-10 border-b-0"

12
packages/hoppscotch-common/src/components/graphql/Response.vue
View File

@@ -1,10 +1,10 @@
<template>
<div class="flex flex-col flex-1 overflow-auto whitespace-nowrap">
<div v-if="response?.length === 1" class="flex flex-col flex-1">
<div class="flex flex-1 flex-col overflow-auto whitespace-nowrap">
<div v-if="response?.length === 1" class="flex flex-1 flex-col">
<div
class="sticky top-0 z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight"
class="sticky top-0 z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4"
>
<label class="font-semibold truncate text-secondaryLight">
<label class="truncate font-semibold text-secondaryLight">
{{ t("response.title") }}
</label>
<div class="flex items-center">
@@ -33,11 +33,11 @@
/>
</div>
</div>
<div ref="schemaEditor" class="flex flex-col flex-1"></div>
<div ref="schemaEditor" class="flex flex-1 flex-col"></div>
</div>
<div
v-else-if="response && response?.length > 1"
class="flex flex-col flex-1"
class="flex flex-1 flex-col"
>
<GraphqlSubscriptionLog :log="response" />
</div>

8
packages/hoppscotch-common/src/components/graphql/Sidebar.vue
View File

@@ -31,7 +31,7 @@
type="search"
autocomplete="off"
:placeholder="`${t('action.search')}`"
class="flex flex-1 p-4 py-2 bg-transparent"
class="flex flex-1 bg-transparent p-4 py-2"
/>
<div class="flex">
<HoppButtonSecondary
@@ -112,9 +112,9 @@
<HoppSmartTab :id="'schema'" :icon="IconBox" :label="`${t('tab.schema')}`">
<div
v-if="schemaString"
class="sticky top-0 z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight"
class="sticky top-0 z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4"
>
<label class="font-semibold truncate text-secondaryLight">
<label class="truncate font-semibold text-secondaryLight">
{{ t("graphql.schema") }}
</label>
<div class="flex">
@@ -149,7 +149,7 @@
<div
v-if="schemaString"
ref="schemaEditor"
class="flex flex-col flex-1"
class="flex flex-1 flex-col"
></div>
<HoppSmartPlaceholder
v-else

6
packages/hoppscotch-common/src/components/graphql/SubscriptionLog.vue
View File

@@ -1,7 +1,7 @@
<template>
<div ref="container" class="flex flex-col flex-1">
<div ref="container" class="flex flex-1 flex-col">
<div
class="sticky top-0 z-10 flex items-center justify-between flex-none pl-4 border-b bg-primary border-dividerLight"
class="sticky top-0 z-10 flex flex-none items-center justify-between border-b border-dividerLight bg-primary pl-4"
>
<label for="log" class="py-2 font-semibold text-secondaryLight">
{{ "Subscription Log" }}
@@ -43,7 +43,7 @@
class="overflow-y-auto border-b border-dividerLight"
>
<div
class="flex flex-col h-auto h-full border-r divide-y divide-dividerLight border-dividerLight"
class="flex h-auto h-full flex-col divide-y divide-dividerLight border-r border-dividerLight"
>
<RealtimeLogEntry
v-for="(entry, index) in log"

4
packages/hoppscotch-common/src/components/graphql/TabHead.vue
View File

@@ -2,7 +2,7 @@
<div
v-tippy="{ theme: 'tooltip', delay: [500, 20] }"
:title="tab.document.request.name"
class="truncate px-2 flex items-center"
class="flex items-center truncate px-2"
@dblclick="emit('open-rename-modal')"
@contextmenu.prevent="options?.tippy?.show()"
@click.middle="emit('close-tab')"
@@ -14,7 +14,7 @@
theme="popover"
:on-shown="() => tippyActions!.focus()"
>
<span class="leading-8 px-2 truncate">
<span class="truncate px-2 leading-8">
{{ tab.document.request.name }}
</span>
<template #content="{ hide }">

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

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

8
packages/hoppscotch-common/src/components/graphql/Variable.vue
View File

@@ -1,6 +1,6 @@
<template>
<div
class="sticky top-sidebarPrimaryStickyFold z-10 flex items-center justify-between pl-4 border-y bg-primary border-dividerLight"
class="sticky top-sidebarPrimaryStickyFold z-10 flex items-center justify-between border-y border-dividerLight bg-primary pl-4"
>
<label class="font-semibold text-secondaryLight">
{{ t("request.variables") }}
@@ -16,7 +16,7 @@
:title="`${t('request.stop')}`"
:label="`${t('request.stop')}`"
:icon="IconStop"
class="rounded-none !text-accent !hover:text-accentDark"
class="!hover:text-accentDark rounded-none !text-accent"
@click="unsubscribe()"
/>
<HoppButtonSecondary
@@ -30,7 +30,7 @@
:label="`${selectedOperation.name?.value ?? t('request.run')}`"
:icon="IconPlay"
:disabled="!selectedOperation"
class="rounded-none !text-accent !hover:text-accentDark"
class="!hover:text-accentDark rounded-none !text-accent"
@click="runQuery(selectedOperation)"
/>
<HoppButtonSecondary
@@ -67,7 +67,7 @@
/>
</div>
</div>
<div ref="variableEditor" class="flex flex-col flex-1"></div>
<div ref="variableEditor" class="flex flex-1 flex-col"></div>
</template>
<script setup lang="ts">

8
packages/hoppscotch-common/src/components/history/graphql/Card.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="flex flex-col group">
<div class="group flex flex-col">
<div class="flex items-center">
<span
v-tippy="{
@@ -7,7 +7,7 @@
delay: [500, 20],
content: entry.updatedOn ? shortDateTime(entry.updatedOn) : null,
}"
class="flex flex-1 min-w-0 py-2 pl-4 pr-2 cursor-pointer transition group-hover:text-secondaryDark"
class="flex min-w-0 flex-1 cursor-pointer py-2 pl-4 pr-2 transition group-hover:text-secondaryDark"
data-testid="restore_history_entry"
@click="useEntry"
>
@@ -36,7 +36,7 @@
:title="!entry.star ? t('add.star') : t('remove.star')"
:icon="entry.star ? IconStarOff : IconStar"
color="yellow"
:class="{ 'group-hover:inline-flex hidden': !entry.star }"
:class="{ 'hidden group-hover:inline-flex': !entry.star }"
data-testid="star_button"
@click="emit('toggle-star')"
/>
@@ -45,7 +45,7 @@
<span
v-for="(line, index) in query"
:key="`line-${index}`"
class="px-4 font-mono truncate whitespace-pre cursor-pointer text-secondaryLight"
class="cursor-pointer truncate whitespace-pre px-4 font-mono text-secondaryLight"
data-testid="restore_history_entry"
@click="useEntry"
>{{ line }}</span

12
packages/hoppscotch-common/src/components/history/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<div>
<div
class="sticky top-0 z-10 flex flex-col flex-shrink-0 overflow-x-auto border-b bg-primary border-dividerLight"
class="sticky top-0 z-10 flex flex-shrink-0 flex-col overflow-x-auto border-b border-dividerLight bg-primary"
>
<WorkspaceCurrent :section="t('tab.history')" />
<div class="flex">
@@ -9,7 +9,7 @@
v-model="filterText"
type="search"
autocomplete="off"
class="flex flex-1 p-4 py-2 bg-transparent"
class="flex flex-1 bg-transparent p-4 py-2"
:placeholder="`${t('action.search')}`"
/>
<div class="flex">
@@ -69,13 +69,13 @@
open
>
<summary
class="flex items-center justify-between flex-1 min-w-0 transition cursor-pointer focus:outline-none text-secondaryLight text-tiny group"
class="group flex min-w-0 flex-1 cursor-pointer items-center justify-between text-tiny text-secondaryLight transition focus:outline-none"
>
<span
class="inline-flex items-center justify-center px-4 py-2 transition group-hover:text-secondary truncate"
class="inline-flex items-center justify-center truncate px-4 py-2 transition group-hover:text-secondary"
>
<icon-lucide-chevron-right
class="mr-2 indicator flex flex-shrink-0"
class="indicator mr-2 flex flex-shrink-0"
/>
<span
:class="[
@@ -124,7 +124,7 @@
:text="`${t('state.nothing_found')} ‟${filterText || filterSelection}”`"
>
<template #icon>
<icon-lucide-search class="pb-2 opacity-75 svg-icons" />
<icon-lucide-search class="svg-icons pb-2 opacity-75" />
</template>
<HoppButtonSecondary
:label="t('action.clear')"

10
packages/hoppscotch-common/src/components/history/rest/Card.vue
View File

@@ -1,17 +1,17 @@
<template>
<div
class="flex items-stretch group"
class="group flex items-stretch"
@contextmenu.prevent="options!.tippy.show()"
>
<span
v-tippy="{ theme: 'tooltip', delay: [500, 20] }"
class="flex items-center justify-center w-16 px-2 truncate cursor-pointer"
class="flex w-16 cursor-pointer items-center justify-center truncate px-2"
:class="entryStatus.className"
data-testid="restore_history_entry"
:title="`${duration}`"
@click="emit('use-entry')"
>
<span class="font-semibold truncate text-tiny">
<span class="truncate text-tiny font-semibold">
{{ entry.request.method }}
</span>
</span>
@@ -21,7 +21,7 @@
delay: [500, 20],
content: entry.updatedOn ? shortDateTime(entry.updatedOn) : null,
}"
class="flex flex-1 min-w-0 py-2 pr-2 cursor-pointer transition group-hover:text-secondaryDark"
class="flex min-w-0 flex-1 cursor-pointer py-2 pr-2 transition group-hover:text-secondaryDark"
data-testid="restore_history_entry"
@click="emit('use-entry')"
>
@@ -74,7 +74,7 @@
<HoppButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="!entry.star ? t('add.star') : t('remove.star')"
:class="{ 'group-hover:inline-flex hidden': !entry.star }"
:class="{ 'hidden group-hover:inline-flex': !entry.star }"
:icon="entry.star ? IconStarOff : IconStar"
color="yellow"
data-testid="star_button"

10
packages/hoppscotch-common/src/components/http/Authorization.vue
View File

@@ -1,10 +1,10 @@
<template>
<div class="flex flex-col flex-1">
<div class="flex flex-1 flex-col">
<div
class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
class="sticky top-upperMobileSecondaryStickyFold z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4 sm:top-upperSecondaryStickyFold"
>
<span class="flex items-center">
<label class="font-semibold truncate text-secondaryLight">
<label class="truncate font-semibold text-secondaryLight">
{{ t("authorization.type") }}
</label>
<tippy
@@ -15,7 +15,7 @@
>
<span class="select-wrapper">
<HoppButtonSecondary
class="pr-8 ml-2 rounded-none"
class="ml-2 rounded-none pr-8"
:label="authName"
/>
</span>
@@ -149,7 +149,7 @@
</div>
</div>
<div
class="sticky flex-shrink-0 h-full p-4 overflow-auto overflow-x-auto bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9"
class="z-9 sticky top-upperTertiaryStickyFold h-full min-w-46 max-w-1/3 flex-shrink-0 overflow-auto overflow-x-auto bg-primary p-4"
>
<div class="pb-2 text-secondaryLight">
{{ t("helpers.authorization") }}

14
packages/hoppscotch-common/src/components/http/Body.vue
View File

@@ -1,10 +1,10 @@
<template>
<div class="flex flex-col flex-1">
<div class="flex flex-1 flex-col">
<div
class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
class="sticky top-upperMobileSecondaryStickyFold z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4 sm:top-upperSecondaryStickyFold"
>
<span class="flex items-center">
<label class="font-semibold truncate text-secondaryLight">
<label class="truncate font-semibold text-secondaryLight">
{{ t("request.content_type") }}
</label>
<tippy
@@ -16,13 +16,13 @@
<span class="select-wrapper">
<HoppButtonSecondary
:label="body.contentType || t('state.none')"
class="pr-8 ml-2 rounded-none"
class="ml-2 rounded-none pr-8"
/>
</span>
<template #content="{ hide }">
<div
ref="tippyActions"
class="flex flex-col space-y-2 divide-y focus:outline-none divide-dividerLight"
class="flex flex-col space-y-2 divide-y divide-dividerLight focus:outline-none"
tabindex="0"
@keyup.escape="hide()"
>
@@ -46,8 +46,8 @@
:key="`contentTypeItems-${contentTypeItemsIndex}`"
class="flex flex-col text-left"
>
<div class="flex px-4 py-2 rounded">
<span class="font-bold text-tiny text-secondaryLight">
<div class="flex rounded px-4 py-2">
<span class="text-tiny font-bold text-secondaryLight">
{{ t(contentTypeItems.title) }}
</span>
</div>

12
packages/hoppscotch-common/src/components/http/BodyParameters.vue
View File

@@ -1,9 +1,9 @@
<template>
<div>
<div
class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperMobileStickyFold sm:top-upperMobileTertiaryStickyFold"
class="sticky top-upperMobileStickyFold z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4 sm:top-upperMobileTertiaryStickyFold"
>
<label class="font-semibold truncate text-secondaryLight">
<label class="truncate font-semibold text-secondaryLight">
{{ t("request.body") }}
</label>
<div class="flex">
@@ -41,7 +41,7 @@
>
<template #item="{ element: { entry }, index }">
<div
class="flex border-b divide-x divide-dividerLight border-dividerLight draggable-content group"
class="draggable-content group flex divide-x divide-dividerLight border-b border-dividerLight"
>
<span>
<HoppButtonSecondary
@@ -56,7 +56,7 @@
:icon="IconGripVertical"
class="cursor-auto text-primary hover:text-primary"
:class="{
'draggable-handle group-hover:text-secondaryLight !cursor-grab':
'draggable-handle !cursor-grab group-hover:text-secondaryLight':
index !== workingParams?.length - 1,
}"
tabindex="-1"
@@ -75,7 +75,7 @@
"
/>
<div v-if="entry.isFile" class="file-chips-container">
<div class="space-x-2 file-chips-wrapper">
<div class="file-chips-wrapper space-x-2">
<HoppSmartFileChip
v-for="(file, fileIndex) in entry.value"
:key="`param-${index}-file-${fileIndex}`"
@@ -104,7 +104,7 @@
:name="`attachment${index}`"
type="file"
multiple
class="p-1 transition cursor-pointer file:transition file:cursor-pointer text-secondaryLight hover:text-secondaryDark file:mr-2 file:py-1 file:px-4 file:rounded file:border-0 file:text-tiny text-tiny file:text-secondary hover:file:text-secondaryDark file:bg-primaryLight hover:file:bg-primaryDark"
class="cursor-pointer p-1 text-tiny text-secondaryLight transition file:mr-2 file:cursor-pointer file:rounded file:border-0 file:bg-primaryLight file:px-4 file:py-1 file:text-tiny file:text-secondary file:transition hover:text-secondaryDark hover:file:bg-primaryDark hover:file:text-secondaryDark"
@change="setRequestAttachment(index, entry, $event)"
/>
</label>

14
packages/hoppscotch-common/src/components/http/CodegenModal.vue
View File

@@ -28,12 +28,12 @@
</span>
<template #content="{ hide }">
<div class="flex flex-col space-y-2">
<div class="sticky z-10 top-0 flex-shrink-0 overflow-x-auto">
<div class="sticky top-0 z-10 flex-shrink-0 overflow-x-auto">
<input
v-model="searchQuery"
type="search"
autocomplete="off"
class="flex w-full p-4 py-2 input !bg-primaryContrast"
class="input flex w-full !bg-primaryContrast p-4 py-2"
:placeholder="`${t('action.search')}`"
/>
</div>
@@ -61,7 +61,7 @@
:text="`${t('state.nothing_found')} ‟${searchQuery}”`"
>
<template #icon>
<icon-lucide-search class="pb-2 opacity-75 svg-icons" />
<icon-lucide-search class="svg-icons pb-2 opacity-75" />
</template>
</HoppSmartPlaceholder>
</div>
@@ -70,16 +70,16 @@
</tippy>
<div
v-if="errorState"
class="w-full px-4 py-2 mt-4 overflow-auto font-mono text-red-400 whitespace-normal rounded bg-primaryLight"
class="mt-4 w-full overflow-auto whitespace-normal rounded bg-primaryLight px-4 py-2 font-mono text-red-400"
>
{{ t("error.something_went_wrong") }}
</div>
<div
v-else-if="codegenType"
class="mt-4 border rounded border-dividerLight"
class="mt-4 rounded border border-dividerLight"
>
<div class="flex items-center justify-between pl-4">
<label class="font-semibold truncate text-secondaryLight">
<label class="truncate font-semibold text-secondaryLight">
{{ t("request.generated_code") }}
</label>
<div class="flex items-center">
@@ -106,7 +106,7 @@
</div>
<div
ref="generatedCode"
class="border-t rounded-b border-dividerLight"
class="rounded-b border-t border-dividerLight"
></div>
</div>
</div>

16
packages/hoppscotch-common/src/components/http/Headers.vue
View File

@@ -1,9 +1,9 @@
<template>
<div class="flex flex-col flex-1">
<div class="flex flex-1 flex-col">
<div
class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
class="sticky top-upperMobileSecondaryStickyFold z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4 sm:top-upperSecondaryStickyFold"
>
<label class="font-semibold truncate text-secondaryLight">
<label class="truncate font-semibold text-secondaryLight">
{{ t("request.header_list") }}
</label>
<div class="flex">
@@ -44,7 +44,7 @@
/>
</div>
</div>
<div v-if="bulkMode" ref="bulkEditor" class="flex flex-col flex-1"></div>
<div v-if="bulkMode" ref="bulkEditor" class="flex flex-1 flex-col"></div>
<div v-else>
<draggable
v-model="workingHeaders"
@@ -58,7 +58,7 @@
>
<template #item="{ element: header, index }">
<div
class="flex border-b divide-x divide-dividerLight border-dividerLight draggable-content group"
class="draggable-content group flex divide-x divide-dividerLight border-b border-dividerLight"
>
<span>
<HoppButtonSecondary
@@ -73,7 +73,7 @@
:icon="IconGripVertical"
class="cursor-auto text-primary hover:text-primary"
:class="{
'draggable-handle group-hover:text-secondaryLight !cursor-grab':
'draggable-handle !cursor-grab group-hover:text-secondaryLight':
index !== workingHeaders?.length - 1,
}"
tabindex="-1"
@@ -163,12 +163,12 @@
>
<template #item="{ element: header, index }">
<div
class="flex border-b divide-x divide-dividerLight border-dividerLight draggable-content group"
class="draggable-content group flex divide-x divide-dividerLight border-b border-dividerLight"
>
<span>
<HoppButtonSecondary
:icon="IconLock"
class="opacity-25 cursor-auto text-secondaryLight bg-divider"
class="cursor-auto bg-divider text-secondaryLight opacity-25"
tabindex="-1"
/>
</span>

6
packages/hoppscotch-common/src/components/http/ImportCurl.vue
View File

@@ -6,10 +6,10 @@
@close="hideModal"
>
<template #body>
<div class="border rounded border-dividerLight">
<div class="rounded border border-dividerLight">
<div class="flex flex-col">
<div class="flex items-center justify-between pl-4">
<label class="font-semibold truncate text-secondaryLight">
<label class="truncate font-semibold text-secondaryLight">
cURL
</label>
<div class="flex items-center">
@@ -43,7 +43,7 @@
<div class="h-46">
<div
ref="curlEditor"
class="h-full border-t rounded-b border-dividerLight"
class="h-full rounded-b border-t border-dividerLight"
></div>
</div>
</div>

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

@@ -1,9 +1,9 @@
<template>
<div class="flex flex-col flex-1">
<div class="flex flex-1 flex-col">
<div
class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
class="sticky top-upperMobileSecondaryStickyFold z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4 sm:top-upperSecondaryStickyFold"
>
<label class="font-semibold truncate text-secondaryLight">
<label class="truncate font-semibold text-secondaryLight">
{{ t("request.parameter_list") }}
</label>
<div class="flex">
@@ -44,7 +44,7 @@
/>
</div>
</div>
<div v-if="bulkMode" ref="bulkEditor" class="flex flex-col flex-1"></div>
<div v-if="bulkMode" ref="bulkEditor" class="flex flex-1 flex-col"></div>
<div v-else>
<draggable
v-model="workingParams"
@@ -58,7 +58,7 @@
>
<template #item="{ element: param, index }">
<div
class="flex border-b divide-x divide-dividerLight border-dividerLight draggable-content group"
class="draggable-content group flex divide-x divide-dividerLight border-b border-dividerLight"
>
<span>
<HoppButtonSecondary
@@ -73,7 +73,7 @@
:icon="IconGripVertical"
class="cursor-auto text-primary hover:text-primary"
:class="{
'draggable-handle group-hover:text-secondaryLight !cursor-grab':
'draggable-handle !cursor-grab group-hover:text-secondaryLight':
index !== workingParams?.length - 1,
}"
tabindex="-1"

8
packages/hoppscotch-common/src/components/http/PreRequestScript.vue
View File

@@ -1,9 +1,9 @@
<template>
<div class="flex flex-col flex-1">
<div class="flex flex-1 flex-col">
<div
class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
class="sticky top-upperMobileSecondaryStickyFold z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4 sm:top-upperSecondaryStickyFold"
>
<label class="font-semibold truncate text-secondaryLight">
<label class="truncate font-semibold text-secondaryLight">
{{ t("preRequest.javascript_code") }}
</label>
<div class="flex">
@@ -34,7 +34,7 @@
<div ref="preRequestEditor" class="h-full"></div>
</div>
<div
class="sticky flex-shrink-0 h-full p-4 overflow-auto overflow-x-auto bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9"
class="z-9 sticky top-upperTertiaryStickyFold h-full min-w-46 max-w-1/3 flex-shrink-0 overflow-auto overflow-x-auto bg-primary p-4"
>
<div class="pb-2 text-secondaryLight">
{{ t("helpers.pre_request_script") }}

8
packages/hoppscotch-common/src/components/http/RawBody.vue
View File

@@ -1,9 +1,9 @@
<template>
<div class="flex flex-col flex-1">
<div class="flex flex-1 flex-col">
<div
class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperMobileStickyFold sm:top-upperMobileTertiaryStickyFold"
class="sticky top-upperMobileStickyFold z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4 sm:top-upperMobileTertiaryStickyFold"
>
<label class="font-semibold truncate text-secondaryLight">
<label class="truncate font-semibold text-secondaryLight">
{{ t("request.raw_body") }}
</label>
<div class="flex">
@@ -59,7 +59,7 @@
/>
</div>
</div>
<div ref="rawBodyParameters" class="flex flex-col flex-1"></div>
<div ref="rawBodyParameters" class="flex flex-1 flex-col"></div>
</div>
</template>

16
packages/hoppscotch-common/src/components/http/Request.vue
View File

@@ -1,9 +1,9 @@
<template>
<div
class="sticky top-0 z-20 flex-none flex-shrink-0 p-4 sm:flex sm:flex-shrink-0 sm:space-x-2 bg-primary"
class="sticky top-0 z-20 flex-none flex-shrink-0 bg-primary p-4 sm:flex sm:flex-shrink-0 sm:space-x-2"
>
<div
class="flex flex-1 border rounded min-w-52 border-divider whitespace-nowrap"
class="min-w-52 flex flex-1 whitespace-nowrap rounded border border-divider"
>
<div class="relative flex">
<label for="method">
@@ -16,7 +16,7 @@
<span class="select-wrapper">
<input
id="method"
class="flex px-4 py-2 font-semibold transition rounded-l cursor-pointer text-secondaryDark w-26 bg-primaryLight"
class="flex w-26 cursor-pointer rounded-l bg-primaryLight px-4 py-2 font-semibold text-secondaryDark transition"
:value="tab.document.request.method"
:readonly="!isCustomMethod"
:placeholder="`${t('request.method')}`"
@@ -47,7 +47,7 @@
</label>
</div>
<div
class="flex flex-1 transition border-l rounded-r border-divider bg-primaryLight whitespace-nowrap"
class="flex flex-1 whitespace-nowrap rounded-r border-l border-divider bg-primaryLight transition"
>
<SmartEnvInput
v-model="tab.document.request.endpoint"
@@ -59,7 +59,7 @@
/>
</div>
</div>
<div class="flex mt-2 sm:mt-0">
<div class="mt-2 flex sm:mt-0">
<HoppButtonPrimary
id="send"
v-tippy="{ theme: 'tooltip', delay: [500, 20], allowHTML: true }"
@@ -67,7 +67,7 @@
'action.send'
)} <kbd>${getSpecialKey()}</kbd><kbd>↩</kbd>`"
:label="`${!loading ? t('action.send') : t('action.cancel')}`"
class="flex-1 rounded-r-none min-w-20"
class="min-w-20 flex-1 rounded-r-none"
@click="!loading ? newSendRequest() : cancelRequest()"
/>
<span class="flex">
@@ -134,7 +134,7 @@
</template>
</tippy>
</span>
<span class="flex ml-2 transition border rounded border-divider">
<span class="ml-2 flex rounded border border-divider transition">
<HoppButtonSecondary
v-tippy="{ theme: 'tooltip', delay: [500, 20], allowHTML: true }"
:title="`${t(
@@ -174,7 +174,7 @@
name="request-name"
type="text"
autocomplete="off"
class="mb-2 input !bg-primaryContrast"
class="input mb-2 !bg-primaryContrast"
@keyup.enter="hide()"
/>
<HoppSmartItem

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

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

12
packages/hoppscotch-common/src/components/http/ResponseMeta.vue
View File

@@ -1,9 +1,9 @@
<template>
<div
class="sticky top-0 z-10 flex items-center justify-center flex-shrink-0 p-4 overflow-auto overflow-x-auto bg-primary whitespace-nowrap"
class="sticky top-0 z-10 flex flex-shrink-0 items-center justify-center overflow-auto overflow-x-auto whitespace-nowrap bg-primary p-4"
>
<AppShortcutsPrompt v-if="response == null" class="flex-1" />
<div v-else class="flex flex-col flex-1">
<div v-else class="flex flex-1 flex-col">
<div
v-if="response.type === 'loading'"
class="flex flex-col items-center justify-center"
@@ -19,7 +19,7 @@
:text="t('helpers.network_fail')"
large
>
<AppInterceptor class="p-2 border rounded border-dividerLight" />
<AppInterceptor class="rounded border border-dividerLight p-2" />
</HoppSmartPlaceholder>
<HoppSmartPlaceholder
v-if="response.type === 'script_fail'"
@@ -30,7 +30,7 @@
large
>
<div
class="mt-2 w-full px-4 py-2 overflow-auto font-mono text-red-400 whitespace-normal rounded bg-primaryLight"
class="mt-2 w-full overflow-auto whitespace-normal rounded bg-primaryLight px-4 py-2 font-mono text-red-400"
>
{{ response.error.name }}: {{ response.error.message }}<br />
{{ response.error.stack }}
@@ -38,7 +38,7 @@
</HoppSmartPlaceholder>
<div
v-if="response.type === 'success' || response.type === 'fail'"
class="flex items-center font-semibold text-tiny"
class="flex items-center text-tiny font-semibold"
>
<div
:class="statusCategory.className"
@@ -78,7 +78,7 @@
:class="[
response === null || response?.type === 'network_fail'
? 'absolute right-2 top-2'
: 'ml-2 -m-2',
: '-m-2 ml-2',
]"
/>
</div>

8
packages/hoppscotch-common/src/components/http/TabHead.vue
View File

@@ -2,14 +2,14 @@
<div
v-tippy="{ theme: 'tooltip', delay: [500, 20] }"
:title="tab.document.request.name"
class="truncate px-2 flex items-center"
class="flex items-center truncate px-2"
@dblclick="emit('open-rename-modal')"
@contextmenu.prevent="options?.tippy?.show()"
@click.middle="emit('close-tab')"
>
<span
class="font-semibold text-tiny"
:class="getMethodLabelColorClassOf(tab.document.request)"
class="text-tiny font-semibold"
:style="{ color: getMethodLabelColorClassOf(tab.document.request) }"
>
{{ tab.document.request.method }}
</span>
@@ -21,7 +21,7 @@
theme="popover"
:on-shown="() => tippyActions!.focus()"
>
<span class="leading-8 px-2 truncate">
<span class="truncate px-2 leading-8">
{{ tab.document.request.name }}
</span>
<template #content="{ hide }">

32
packages/hoppscotch-common/src/components/http/TestResult.vue
View File

@@ -9,9 +9,9 @@
"
>
<div
class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
class="sticky top-lowerSecondaryStickyFold z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4"
>
<label class="font-semibold truncate text-secondaryLight">
<label class="truncate font-semibold text-secondaryLight">
{{ t("test.report") }}
</label>
<HoppButtonSecondary
@@ -21,19 +21,19 @@
@click="clearContent()"
/>
</div>
<div class="border-b divide-y-4 divide-dividerLight border-dividerLight">
<div class="divide-y-4 divide-dividerLight border-b border-dividerLight">
<div v-if="haveEnvVariables" class="flex flex-col">
<details class="flex flex-col divide-y divide-dividerLight" open>
<summary
class="flex items-center justify-between flex-1 min-w-0 transition cursor-pointer focus:outline-none text-secondaryLight text-tiny group"
class="group flex min-w-0 flex-1 cursor-pointer items-center justify-between text-tiny text-secondaryLight transition focus:outline-none"
>
<span
class="inline-flex items-center justify-center px-4 py-2 transition group-hover:text-secondary truncate"
class="inline-flex items-center justify-center truncate px-4 py-2 transition group-hover:text-secondary"
>
<icon-lucide-chevron-right
class="mr-2 indicator flex flex-shrink-0"
class="indicator mr-2 flex flex-shrink-0"
/>
<span class="truncate capitalize-first">
<span class="capitalize-first truncate">
{{ t("environment.title") }}
</span>
</span>
@@ -41,24 +41,24 @@
<div class="divide-y divide-dividerLight">
<div
v-if="noEnvSelected && !globalHasAdditions"
class="flex p-4 bg-error text-secondaryDark"
class="flex bg-error p-4 text-secondaryDark"
role="alert"
>
<icon-lucide-alert-triangle class="mr-4 svg-icons" />
<icon-lucide-alert-triangle class="svg-icons mr-4" />
<div class="flex flex-col">
<p>
{{ t("environment.no_environment_description") }}
</p>
<p class="flex mt-3 space-x-2">
<p class="mt-3 flex space-x-2">
<HoppButtonSecondary
:label="t('environment.add_to_global')"
class="text-tiny !bg-primary"
class="!bg-primary text-tiny"
filled
@click="addEnvToGlobal()"
/>
<HoppButtonSecondary
:label="t('environment.create_new')"
class="text-tiny !bg-primary"
class="!bg-primary text-tiny"
filled
@click="displayModalAdd(true)"
/>
@@ -121,17 +121,17 @@
class="flex items-center px-4 py-2"
>
<div
class="flex items-center flex-shrink flex-shrink-0 overflow-x-auto"
class="flex flex-shrink flex-shrink-0 items-center overflow-x-auto"
>
<component
:is="result.status === 'pass' ? IconCheck : IconClose"
class="mr-4 svg-icons"
class="svg-icons mr-4"
:class="
result.status === 'pass' ? 'text-green-500' : 'text-red-500'
"
/>
<div
class="flex items-center flex-shrink flex-shrink-0 space-x-2 overflow-x-auto"
class="flex flex-shrink flex-shrink-0 items-center space-x-2 overflow-x-auto"
>
<span
v-if="result.message"
@@ -140,7 +140,7 @@
{{ result.message }}
</span>
<span class="inline-flex text-secondaryLight">
<icon-lucide-minus class="mr-2 svg-icons" />
<icon-lucide-minus class="svg-icons mr-2" />
{{
result.status === "pass"
? t("test.passed")

8
packages/hoppscotch-common/src/components/http/TestResultEntry.vue
View File

@@ -17,23 +17,23 @@
class="flex items-center px-4 py-2"
>
<div
class="flex items-center flex-shrink flex-shrink-0 overflow-x-auto"
class="flex flex-shrink flex-shrink-0 items-center overflow-x-auto"
>
<component
:is="result.status === 'pass' ? IconCheck : IconClose"
class="mr-4 svg-icons"
class="svg-icons mr-4"
:class="
result.status === 'pass' ? 'text-green-500' : 'text-red-500'
"
/>
<div
class="flex items-center flex-shrink flex-shrink-0 space-x-2 overflow-x-auto"
class="flex flex-shrink flex-shrink-0 items-center space-x-2 overflow-x-auto"
>
<span v-if="result.message" class="inline-flex text-secondaryDark">
{{ result.message }}
</span>
<span class="inline-flex text-secondaryLight">
<icon-lucide-minus class="mr-2 svg-icons" />
<icon-lucide-minus class="svg-icons mr-2" />
{{
result.status === "pass" ? t("test.passed") : t("test.failed")
}}

12
packages/hoppscotch-common/src/components/http/TestResultEnv.vue
View File

@@ -1,35 +1,35 @@
<template>
<div class="flex items-center justify-between px-4 py-2">
<div class="flex items-center flex-shrink flex-shrink-0 overflow-x-auto">
<div class="flex flex-shrink flex-shrink-0 items-center overflow-x-auto">
<component
:is="getIcon(status)"
v-tippy="{ theme: 'tooltip' }"
class="mr-4 svg-icons cursor-help"
class="svg-icons mr-4 cursor-help"
:class="getStyle(status)"
:title="`${t(getTooltip(status))}`"
/>
<div
class="flex items-center flex-shrink flex-shrink-0 space-x-2 overflow-x-auto"
class="flex flex-shrink flex-shrink-0 items-center space-x-2 overflow-x-auto"
>
<span class="inline-flex text-secondaryDark">
{{ env.key }}
</span>
<span class="inline-flex text-secondaryDark">
<icon-lucide-minus class="mr-2 svg-icons" />
<icon-lucide-minus class="svg-icons mr-2" />
{{ env.value }}
</span>
<span
v-if="status === 'updations'"
class="inline-flex text-secondaryLight"
>
<icon-lucide-arrow-left class="mr-2 svg-icons" />
<icon-lucide-arrow-left class="svg-icons mr-2" />
{{ env.previousValue }}
</span>
</div>
</div>
<span
v-if="global"
class="px-1 ml-4 rounded bg-accentLight text-accentContrast text-tiny"
class="ml-4 rounded bg-accentLight px-1 text-tiny text-accentContrast"
>
Global
</span>

8
packages/hoppscotch-common/src/components/http/Tests.vue
View File

@@ -1,9 +1,9 @@
<template>
<div class="flex flex-col flex-1">
<div class="flex flex-1 flex-col">
<div
class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
class="sticky top-upperMobileSecondaryStickyFold z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4 sm:top-upperSecondaryStickyFold"
>
<label class="font-semibold truncate text-secondaryLight">
<label class="truncate font-semibold text-secondaryLight">
{{ t("test.javascript_code") }}
</label>
<div class="flex">
@@ -34,7 +34,7 @@
<div ref="testScriptEditor" class="h-full"></div>
</div>
<div
class="sticky flex-shrink-0 h-full p-4 overflow-auto overflow-x-auto bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9"
class="z-9 sticky top-upperTertiaryStickyFold h-full min-w-46 max-w-1/3 flex-shrink-0 overflow-auto overflow-x-auto bg-primary p-4"
>
<div class="pb-2 text-secondaryLight">
{{ t("helpers.post_request_tests") }}

12
packages/hoppscotch-common/src/components/http/URLEncodedParams.vue
View File

@@ -1,9 +1,9 @@
<template>
<div class="flex flex-col flex-1">
<div class="flex flex-1 flex-col">
<div
class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperMobileStickyFold sm:top-upperMobileTertiaryStickyFold"
class="sticky top-upperMobileStickyFold z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4 sm:top-upperMobileTertiaryStickyFold"
>
<label class="font-semibold truncate text-secondaryLight">
<label class="truncate font-semibold text-secondaryLight">
{{ t("request.body") }}
</label>
<div class="flex">
@@ -44,7 +44,7 @@
/>
</div>
</div>
<div v-if="bulkMode" ref="bulkEditor" class="flex flex-col flex-1"></div>
<div v-if="bulkMode" ref="bulkEditor" class="flex flex-1 flex-col"></div>
<div v-else>
<draggable
v-model="workingUrlEncodedParams"
@@ -58,7 +58,7 @@
>
<template #item="{ element: param, index }">
<div
class="flex border-b divide-x divide-dividerLight border-dividerLight draggable-content group"
class="draggable-content group flex divide-x divide-dividerLight border-b border-dividerLight"
>
<span>
<HoppButtonSecondary
@@ -73,7 +73,7 @@
:icon="IconGripVertical"
class="cursor-auto text-primary hover:text-primary"
:class="{
'draggable-handle group-hover:text-secondaryLight !cursor-grab':
'draggable-handle !cursor-grab group-hover:text-secondaryLight':
index !== workingUrlEncodedParams?.length - 1,
}"
tabindex="-1"

2
packages/hoppscotch-common/src/components/http/authorization/ApiKey.vue
View File

@@ -19,7 +19,7 @@
<span class="select-wrapper">
<HoppButtonSecondary
:label="auth.addTo || t('state.none')"
class="pr-8 ml-2 rounded-none"
class="ml-2 rounded-none pr-8"
/>
</span>
<template #content="{ hide }">

4
packages/hoppscotch-common/src/components/lenses/HeadersRenderer.vue
View File

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

12
packages/hoppscotch-common/src/components/lenses/HeadersRendererEntry.vue
View File

@@ -1,25 +1,25 @@
<template>
<div
class="flex border-b divide-x divide-dividerLight border-dividerLight group"
class="group flex divide-x divide-dividerLight border-b border-dividerLight"
>
<span
class="flex flex-1 min-w-0 px-4 py-2 transition group-hover:text-secondaryDark"
class="flex min-w-0 flex-1 px-4 py-2 transition group-hover:text-secondaryDark"
>
<span class="truncate rounded-sm select-all">
<span class="select-all truncate rounded-sm">
{{ header.key }}
</span>
</span>
<span
class="flex justify-between flex-1 min-w-0 py-2 pl-4 transition group-hover:text-secondaryDark"
class="flex min-w-0 flex-1 justify-between py-2 pl-4 transition group-hover:text-secondaryDark"
>
<span class="truncate rounded-sm select-all">
<span class="select-all truncate rounded-sm">
{{ header.value }}
</span>
<HoppButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="t('action.copy')"
:icon="copyIcon"
class="hidden group-hover:inline-flex !py-0"
class="hidden !py-0 group-hover:inline-flex"
@click="copyHeader(header.value)"
/>
</span>

6
packages/hoppscotch-common/src/components/lenses/ResponseBodyRenderer.vue
View File

@@ -9,7 +9,7 @@
:id="lens.renderer"
:key="`lens-${index}`"
:label="t(lens.lensName)"
class="flex flex-col flex-1 w-full h-full"
class="flex h-full w-full flex-1 flex-col"
>
<component
:is="lensRendererFor(lens.renderer)"
@@ -21,7 +21,7 @@
id="headers"
:label="t('response.headers')"
:info="`${maybeHeaders.length}`"
class="flex flex-col flex-1"
class="flex flex-1 flex-col"
>
<LensesHeadersRenderer :headers="maybeHeaders" />
</HoppSmartTab>
@@ -29,7 +29,7 @@
id="results"
:label="t('test.results')"
:indicator="showIndicator"
class="flex flex-col flex-1"
class="flex flex-1 flex-col"
>
<HttpTestResult v-model="doc.testResults" />
</HoppSmartTab>

6
packages/hoppscotch-common/src/components/lenses/renderers/AudioLensRenderer.vue
View File

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

10
packages/hoppscotch-common/src/components/lenses/renderers/HTMLLensRenderer.vue
View File

@@ -1,9 +1,9 @@
<template>
<div class="flex flex-col flex-1">
<div class="flex flex-1 flex-col">
<div
class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
class="sticky top-lowerSecondaryStickyFold z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4"
>
<label class="font-semibold truncate text-secondaryLight">
<label class="truncate font-semibold text-secondaryLight">
{{ t("response.body") }}
</label>
<div class="flex">
@@ -47,7 +47,7 @@
<div
v-show="!previewEnabled"
ref="htmlResponse"
class="flex flex-col flex-1"
class="flex flex-1 flex-col"
></div>
<iframe
v-show="previewEnabled"
@@ -124,6 +124,6 @@ defineActionHandler("response.copy", () => copyResponse())
@apply w-full;
@apply border;
@apply border-dividerLight;
@apply z-5;
@apply z-10;
}
</style>

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

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

26
packages/hoppscotch-common/src/components/lenses/renderers/JSONLensRenderer.vue
View File

@@ -1,12 +1,12 @@
<template>
<div
v-if="response.type === 'success' || response.type === 'fail'"
class="flex flex-col flex-1"
class="flex flex-1 flex-col"
>
<div
class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
class="sticky top-lowerSecondaryStickyFold z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4"
>
<label class="font-semibold truncate text-secondaryLight">
<label class="truncate font-semibold text-secondaryLight">
{{ t("response.body") }}
</label>
<div class="flex items-center">
@@ -48,13 +48,13 @@
</div>
<div
v-if="toggleFilter"
class="sticky z-10 flex flex-shrink-0 overflow-x-auto border-b bg-primary top-lowerTertiaryStickyFold border-dividerLight"
class="sticky top-lowerTertiaryStickyFold z-10 flex flex-shrink-0 overflow-x-auto border-b border-dividerLight bg-primary"
>
<div
class="inline-flex items-center flex-1 bg-primaryLight border-divider text-secondaryDark"
class="inline-flex flex-1 items-center border-divider bg-primaryLight text-secondaryDark"
>
<span class="inline-flex items-center flex-1 px-4">
<icon-lucide-search class="w-4 h-4 text-secondaryLight" />
<span class="inline-flex flex-1 items-center px-4">
<icon-lucide-search class="h-4 w-4 text-secondaryLight" />
<input
v-model="filterQueryText"
v-focus
@@ -65,7 +65,7 @@
</span>
<div
v-if="filterResponseError"
class="flex items-center justify-center px-2 py-1 rounded text-tiny text-accentContrast"
class="flex items-center justify-center rounded px-2 py-1 text-tiny text-accentContrast"
:class="{
'bg-red-500':
filterResponseError.type === 'JSON_PARSE_FAILED' ||
@@ -88,12 +88,12 @@
</div>
<div
ref="jsonResponse"
class="flex flex-col flex-1 h-auto h-full"
class="flex h-auto h-full flex-1 flex-col"
:class="toggleFilter ? 'responseToggleOn' : 'responseToggleOff'"
></div>
<div
v-if="outlinePath"
class="sticky bottom-0 z-10 flex flex-shrink-0 px-2 overflow-auto overflow-x-auto border-t bg-primaryLight border-dividerLight flex-nowrap"
class="sticky bottom-0 z-10 flex flex-shrink-0 flex-nowrap overflow-auto overflow-x-auto border-t border-dividerLight bg-primaryLight px-2"
>
<div
v-for="(item, index) in outlinePath"
@@ -191,7 +191,7 @@
</tippy>
<icon-lucide-chevron-right
v-if="index + 1 !== outlinePath.length"
class="opacity-50 text-secondaryLight svg-icons"
class="svg-icons text-secondaryLight opacity-50"
/>
</div>
</div>
@@ -376,14 +376,14 @@ defineActionHandler("response.copy", () => copyResponse())
<style lang="scss" scoped>
.outline-item {
@apply cursor-pointer;
@apply flex-grow-0 flex-shrink-0;
@apply flex-shrink-0 flex-grow-0;
@apply text-secondaryLight;
@apply inline-flex;
@apply items-center;
@apply px-2;
@apply py-1;
@apply transition;
@apply hover: text-secondary;
@apply hover:text-secondary;
}
:deep(.responseToggleOff .cm-panels) {

6
packages/hoppscotch-common/src/components/lenses/renderers/PDFLensRenderer.vue
View File

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

8
packages/hoppscotch-common/src/components/lenses/renderers/RawLensRenderer.vue
View File

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

6
packages/hoppscotch-common/src/components/lenses/renderers/VideoLensRenderer.vue
View File

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

8
packages/hoppscotch-common/src/components/lenses/renderers/XMLLensRenderer.vue
View File

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

8
packages/hoppscotch-common/src/components/profile/Shortcode.vue
View File

@@ -1,8 +1,8 @@
<template>
<div
class="block w-full my-6 border divide-y lg:flex lg:my-0 lg:border-0 lg:divide-y-0 lg:divide-x divide-dividerLight border-dividerLight"
class="my-6 block w-full divide-y divide-dividerLight border border-dividerLight lg:my-0 lg:flex lg:divide-x lg:divide-y-0 lg:border-0"
>
<div class="font-mono text-tiny table-box">
<div class="table-box font-mono text-tiny">
{{ shortcode.id }}
</div>
<div class="table-box" :class="requestLabelColor">
@@ -14,7 +14,7 @@
<div ref="timeStampRef" class="table-box">
{{ dateStamp }}
</div>
<div class="justify-center table-box">
<div class="table-box justify-center">
<HoppButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="t('action.open_workspace')"
@@ -117,6 +117,6 @@ const copyShortcode = (codeID: string) => {
<style lang="scss" scoped>
.table-box {
@apply flex flex-1 items-center px-4 py-1 truncate;
@apply flex flex-1 items-center truncate px-4 py-1;
}
</style>

12
packages/hoppscotch-common/src/components/profile/Shortcodes.vue
View File

@@ -6,7 +6,7 @@
<div class="my-1 text-secondaryLight">
{{ t("settings.short_codes_description") }}
</div>
<div class="relative py-4 overflow-x-auto">
<div class="relative overflow-x-auto py-4">
<div v-if="loading" class="flex flex-col items-center justify-center">
<HoppSmartSpinner class="mb-4" />
<span class="text-secondaryLight">{{ t("state.loading") }}</span>
@@ -20,7 +20,7 @@
</HoppSmartPlaceholder>
<div v-else-if="!loading">
<div
class="hidden w-full border-t rounded-t bg-primaryLight lg:flex border-x border-dividerLight"
class="hidden w-full rounded-t border-x border-t border-dividerLight bg-primaryLight lg:flex"
>
<div class="flex w-full overflow-y-scroll">
<div class="table-box">
@@ -35,13 +35,13 @@
<div class="table-box">
{{ t("shortcodes.created_on") }}
</div>
<div class="justify-center table-box">
<div class="table-box justify-center">
{{ t("shortcodes.actions") }}
</div>
</div>
</div>
<div
class="flex flex-col items-center justify-between w-full overflow-y-scroll border rounded max-h-sm lg:rounded-t-none lg:divide-y border-dividerLight divide-dividerLight"
class="flex max-h-sm w-full flex-col items-center justify-between divide-dividerLight overflow-y-scroll rounded border border-dividerLight lg:divide-y lg:rounded-t-none"
>
<ProfileShortcode
v-for="(shortcode, shortcodeIndex) in myShortcodes"
@@ -63,7 +63,7 @@
v-if="!loading && adapterError"
class="flex flex-col items-center py-4"
>
<icon-lucide-help-circle class="mb-4 svg-icons" />
<icon-lucide-help-circle class="svg-icons mb-4" />
{{ getErrorMessage(adapterError) }}
</div>
</div>
@@ -163,6 +163,6 @@ const getErrorMessage = (err: GQLError<string>) => {
<style lang="scss" scoped>
.table-box {
@apply flex flex-1 items-center px-4 py-2 truncate;
@apply flex flex-1 items-center truncate px-4 py-2;
}
</style>

8
packages/hoppscotch-common/src/components/profile/UserDelete.vue
View File

@@ -26,14 +26,14 @@
</div>
<div
v-else-if="myTeams.length"
class="flex flex-col p-4 space-y-2 border border-red-500 rounded-lg text-secondaryDark bg-error"
class="flex flex-col space-y-2 rounded-lg border border-red-500 bg-error p-4 text-secondaryDark"
>
<h2 class="font-bold text-red-500">
{{ t("error.danger_zone") }}
</h2>
<div>
{{ t("error.delete_account") }}
<ul class="my-4 ml-8 space-y-2 list-disc">
<ul class="my-4 ml-8 list-disc space-y-2">
<li v-for="team in myTeams" :key="team.id">
{{ team.name }}
</li>
@@ -45,7 +45,7 @@
</div>
<div v-else>
<div
class="flex flex-col p-4 mb-4 space-y-2 border border-red-500 rounded-lg text-secondaryDark bg-error"
class="mb-4 flex flex-col space-y-2 rounded-lg border border-red-500 bg-error p-4 text-secondaryDark"
>
<h2 class="font-bold text-red-500">
{{ t("error.danger_zone") }}
@@ -83,7 +83,7 @@
myTeams.length > 0 ||
userVerificationInput !== 'delete my account'
"
class="!bg-red-500 !hover:bg-red-600 !border-red-500 !hover:border-red-600"
class="!hover:bg-red-600 !hover:border-red-600 !border-red-500 !bg-red-500"
@click="deleteUserAccount"
/>
<HoppButtonSecondary

18
packages/hoppscotch-common/src/components/realtime/Communication.vue
View File

@@ -1,18 +1,18 @@
<template>
<div
class="flex flex-col flex-1"
class="flex flex-1 flex-col"
:class="{ eventFeildShown: showEventField }"
>
<div
v-if="showEventField"
class="sticky z-10 flex items-center justify-center flex-shrink-0 overflow-x-auto border-b bg-primary border-dividerLight"
class="sticky z-10 flex flex-shrink-0 items-center justify-center overflow-x-auto border-b border-dividerLight bg-primary"
:class="eventFieldStyles"
>
<icon-lucide-rss class="mx-4 svg-icons text-accentLight" />
<icon-lucide-rss class="svg-icons mx-4 text-accentLight" />
<input
id="event_name"
v-model="eventName"
class="w-full py-2 pr-4 truncate bg-primary"
class="w-full truncate bg-primary py-2 pr-4"
name="event_name"
:placeholder="`${t('socketio.event_name')}`"
type="text"
@@ -20,11 +20,11 @@
/>
</div>
<div
class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight"
class="sticky z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4"
:class="stickyHeaderStyles"
>
<span class="flex items-center">
<label class="font-semibold truncate text-secondaryLight">
<label class="truncate font-semibold text-secondaryLight">
{{ t("websocket.message") }}
</label>
<tippy
@@ -36,7 +36,7 @@
<span class="select-wrapper">
<HoppButtonSecondary
:label="contentType || t('state.none').toLowerCase()"
class="pr-8 ml-2 rounded-none"
class="ml-2 rounded-none pr-8"
/>
</span>
<template #content="{ hide }">
@@ -74,7 +74,7 @@
:label="`${t('action.send')}`"
:disabled="!communicationBody || !isConnected"
:icon="IconSend"
class="rounded-none !text-accent !hover:text-accentDark"
class="!hover:text-accentDark rounded-none !text-accent"
@click="sendMessage()"
/>
<HoppSmartCheckbox
@@ -130,7 +130,7 @@
/>
</div>
</div>
<div ref="wsCommunicationBody" class="flex flex-col flex-1"></div>
<div ref="wsCommunicationBody" class="flex flex-1 flex-col"></div>
</div>
</template>
<script setup lang="ts">

14
packages/hoppscotch-common/src/components/realtime/ConnectionConfig.vue
View File

@@ -1,10 +1,10 @@
<template>
<div class="flex flex-col flex-1">
<div class="flex flex-1 flex-col">
<div
class="sticky z-10 flex items-center justify-between flex-shrink-0 py-2 pl-4 pr-2 overflow-x-auto border-b bg-primary border-dividerLight top-upperPrimaryStickyFold"
class="sticky top-upperPrimaryStickyFold z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary py-2 pl-4 pr-2"
>
<span class="flex items-center">
<label class="font-semibold truncate text-secondaryLight">
<label class="truncate font-semibold text-secondaryLight">
{{ t("mqtt.connection_config") }}
</label>
</span>
@@ -17,7 +17,7 @@
</HoppSmartCheckbox>
</div>
</div>
<div class="flex flex-1 h-full border-dividerLight">
<div class="flex h-full flex-1 border-dividerLight">
<div class="w-1/3 border-r border-dividerLight">
<div class="flex flex-1 border-b border-dividerLight">
<SmartEnvInput
@@ -55,16 +55,16 @@
/>
</div>
<div
class="flex items-center justify-between px-4 border-b border-dividerLight"
class="flex items-center justify-between border-b border-dividerLight px-4"
>
<div class="flex items-center">
<label class="font-semibold truncate text-secondaryLight">
<label class="truncate font-semibold text-secondaryLight">
{{ t("mqtt.lw_qos") }}
</label>
<tippy interactive trigger="click" theme="popover">
<span class="select-wrapper">
<HoppButtonSecondary
class="pr-8 ml-2 rounded-none"
class="ml-2 rounded-none pr-8"
:label="`${config.lwQos}`"
/>
</span>

8
packages/hoppscotch-common/src/components/realtime/Log.vue
View File

@@ -1,10 +1,10 @@
<template>
<div class="flex flex-col flex-1 overflow-auto whitespace-nowrap">
<div class="flex flex-1 flex-col overflow-auto whitespace-nowrap">
<div
v-if="log.length !== 0"
class="sticky top-0 z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight"
class="sticky top-0 z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4"
>
<label for="log" class="font-semibold truncate text-secondaryLight">
<label for="log" class="truncate font-semibold text-secondaryLight">
{{ title }}
</label>
<div class="flex">
@@ -43,7 +43,7 @@
<div
v-if="log.length !== 0"
ref="logs"
class="flex flex-col flex-1 overflow-y-auto"
class="flex flex-1 flex-col overflow-y-auto"
>
<div class="border-b border-dividerLight">
<div class="flex flex-col divide-y divide-dividerLight">

20
packages/hoppscotch-common/src/components/realtime/LogEntry.vue
View File

@@ -1,7 +1,7 @@
<template>
<div v-if="entry" class="divide-y divide-dividerLight">
<div :style="{ color: entryColor }" class="realtime-log">
<div class="flex group">
<div class="group flex">
<div class="flex flex-1 divide-x divide-dividerLight">
<div class="inline-flex items-center p-2">
<component
@@ -12,18 +12,18 @@
</div>
<div
v-if="entry.ts !== undefined"
class="items-center hidden px-1 w-34 sm:inline-flex"
class="w-34 hidden items-center px-1 sm:inline-flex"
>
<span
v-tippy="{ theme: 'tooltip' }"
:title="relativeTime"
class="mx-auto truncate text-tiny text-secondaryLight hover:text-secondary hover:text-center"
class="mx-auto truncate text-tiny text-secondaryLight hover:text-center hover:text-secondary"
>
{{ shortDateTime(entry.ts) }}
</span>
</div>
<div
class="inline-grid items-center flex-1 min-w-0 p-2"
class="inline-grid min-w-0 flex-1 items-center p-2"
@click="toggleExpandPayload()"
>
<div class="truncate">
@@ -59,9 +59,9 @@
<HoppSmartTab id="raw" label="Raw" />
</HoppSmartTabs>
<div
class="z-10 flex items-center justify-between pl-4 border-b border-dividerLight top-lowerSecondaryStickyFold"
class="top-lowerSecondaryStickyFold z-10 flex items-center justify-between border-b border-dividerLight pl-4"
>
<label class="font-semibold truncate text-secondaryLight">
<label class="truncate font-semibold text-secondaryLight">
{{ t("response.body") }}
</label>
<div class="flex">
@@ -89,7 +89,7 @@
<div ref="editor"></div>
<div
v-if="outlinePath && selectedTab === 'json'"
class="sticky bottom-0 z-10 flex flex-shrink-0 px-2 overflow-auto overflow-x-auto border-t bg-primaryLight border-dividerLight flex-nowrap"
class="sticky bottom-0 z-10 flex flex-shrink-0 flex-nowrap overflow-auto overflow-x-auto border-t border-dividerLight bg-primaryLight px-2"
>
<div
v-for="(item, index) in outlinePath"
@@ -189,7 +189,7 @@
</tippy>
<icon-lucide-chevron-right
v-if="index + 1 !== outlinePath.length"
class="opacity-50 text-secondaryLight svg-icons"
class="svg-icons text-secondaryLight opacity-50"
/>
</div>
</div>
@@ -397,13 +397,13 @@ const icon = computed(() => markRaw(ICONS[props.entry.source].icon))
.outline-item {
@apply cursor-pointer;
@apply flex-grow-0 flex-shrink-0;
@apply flex-shrink-0 flex-grow-0;
@apply text-secondaryLight;
@apply inline-flex;
@apply items-center;
@apply px-2;
@apply py-1;
@apply transition;
@apply hover: text-secondary;
@apply hover:text-secondary;
}
</style>

10
packages/hoppscotch-common/src/components/realtime/Subscription.vue
View File

@@ -1,9 +1,9 @@
<template>
<HoppSmartModal v-if="show" dialog :title="t('mqtt.new')" @close="hideModal">
<template #body>
<div class="flex justify-between mb-4">
<div class="mb-4 flex justify-between">
<div
class="flex items-center border divide-x rounded border-divider divide-divider"
class="flex items-center divide-x divide-divider rounded border border-divider"
>
<label class="mx-4">
{{ t("mqtt.qos") }}
@@ -51,17 +51,17 @@
v-tippy="{ theme: 'tooltip' }"
:title="t('mqtt.color')"
for="select-color"
class="absolute inset-0 flex items-center justify-center group hover:cursor-pointer"
class="group absolute inset-0 flex items-center justify-center hover:cursor-pointer"
>
<icon-lucide-brush
class="transition opacity-80 svg-icons group-hover:opacity-100 text-accentContrast"
class="svg-icons text-accentContrast opacity-80 transition group-hover:opacity-100"
/>
</label>
<input
id="select-color"
v-model="color"
type="color"
class="w-8 h-8 p-1 rounded bg-primary color-picker"
class="color-picker h-8 w-8 rounded bg-primary p-1"
/>
</span>
</div>

4
packages/hoppscotch-common/src/components/settings/Extension.vue
View File

@@ -12,7 +12,7 @@
{{ t("settings.extension_ver_not_reported") }}
</span>
</div>
<div class="flex flex-col py-4 space-y-2">
<div class="flex flex-col space-y-2 py-4">
<span>
<HoppSmartItem
to="https://chrome.google.com/webstore/detail/hoppscotch-browser-extens/amknoiejhlmhancpahfcfcfhllgkpbld"
@@ -36,7 +36,7 @@
/>
</span>
</div>
<div class="py-4 space-y-4">
<div class="space-y-4 py-4">
<div class="flex items-center">
<HoppSmartToggle
:on="extensionEnabled"

4
packages/hoppscotch-common/src/components/settings/Proxy.vue
View File

@@ -8,7 +8,7 @@
:label="t('app.proxy_privacy_policy')"
/>.
</div>
<div class="py-4 space-y-4">
<div class="space-y-4 py-4">
<div class="flex items-center">
<HoppSmartToggle
:on="proxyEnabled"
@@ -18,7 +18,7 @@
</HoppSmartToggle>
</div>
</div>
<div class="flex items-center py-4 space-x-2">
<div class="flex items-center space-x-2 py-4">
<HoppSmartInput
v-model="PROXY_URL"
:autofocus="false"

2
packages/hoppscotch-common/src/components/smart/ChangeLanguage.vue
View File

@@ -60,7 +60,7 @@
:text="`${t('state.nothing_found')} ‟${searchQuery}”`"
>
<template #icon>
<icon-lucide-search class="pb-2 opacity-75 svg-icons" />
<icon-lucide-search class="svg-icons pb-2 opacity-75" />
</template>
</HoppSmartPlaceholder>
</div>

10
packages/hoppscotch-common/src/components/smart/EnvInput.vue
View File

@@ -1,7 +1,7 @@
<template>
<div ref="autoCompleteWrapper" class="autocomplete-wrapper">
<div
class="absolute inset-0 flex flex-1 divide-x divide-dividerLight overflow-x-auto no-scrollbar"
class="no-scrollbar absolute inset-0 flex flex-1 divide-x divide-dividerLight overflow-x-auto"
>
<div
ref="editor"
@@ -14,7 +14,7 @@
></div>
<AppInspection
:inspection-results="inspectionResults"
class="sticky inset-y-0 right-0 bg-primary rounded-r"
class="sticky inset-y-0 right-0 rounded-r bg-primary"
/>
</div>
<ul
@@ -35,7 +35,7 @@
</span>
<div
v-if="currentSuggestionIndex === index"
class="hidden md:flex text-secondary items-center"
class="hidden items-center text-secondary md:flex"
>
<kbd class="shortcut-key">TAB</kbd>
<span class="ml-2 truncate">to select</span>
@@ -499,7 +499,7 @@ watch(editor, () => {
@apply z-50;
@apply shadow-lg;
@apply max-h-46;
@apply border-b border-x border-divider;
@apply border-x border-b border-divider;
@apply overflow-y-auto;
@apply -left-[1px];
@apply -right-[1px];
@@ -512,7 +512,7 @@ watch(editor, () => {
@apply items-center;
@apply justify-between;
@apply w-full;
@apply py-2 px-4;
@apply px-4 py-2;
@apply text-secondary;
@apply cursor-pointer;

8
packages/hoppscotch-common/src/components/tab/Primary.vue
View File

@@ -3,12 +3,12 @@
:to="to"
:exact="exact"
:blank="blank"
class="inline-flex items-center px-4 py-2 truncate transition rounded focus:outline-none"
class="inline-flex items-center truncate rounded px-4 py-2 transition focus:outline-none"
:class="[
color
? `text-${color}-500 hover:text-${color}-600 focus-visible:text-${color}-600`
: 'hover:text-secondaryDark focus-visible:text-accent',
{ 'opacity-75 cursor-not-allowed': disabled },
{ 'cursor-not-allowed opacity-75': disabled },
{ 'flex-row-reverse': reverse },
]"
:disabled="disabled"
@@ -16,10 +16,10 @@
<component
:is="icon"
v-if="icon"
class="opacity-75 svg-icons"
class="svg-icons opacity-75"
:class="label ? (reverse ? 'ml-4' : 'mr-4') : ''"
/>
<div class="truncate max-w-54">
<div class="max-w-54 truncate">
{{ label }}
</div>
</HoppSmartLink>

6
packages/hoppscotch-common/src/components/tab/Secondary.vue
View File

@@ -3,7 +3,7 @@
:to="to"
:exact="exact"
:blank="blank"
class="inline-flex items-center py-2 font-semibold transition transform hover:translate-x-2 focus:outline-none focus-visible:translate-x-2"
class="inline-flex transform items-center py-2 font-semibold transition hover:translate-x-2 focus:outline-none focus-visible:translate-x-2"
:class="[
label ? 'px-4' : 'px-2',
active
@@ -14,7 +14,7 @@
color
? `text-${color}-500 hover:text-${color}-600 focus-visible:text-${color}-600`
: '',
{ 'opacity-75 cursor-not-allowed': disabled },
{ 'cursor-not-allowed opacity-75': disabled },
]"
:disabled="disabled"
type="button"
@@ -25,7 +25,7 @@
class="svg-icons"
:class="label ? 'mr-4 opacity-75' : ''"
/>
<div class="truncate max-w-54">
<div class="max-w-54 truncate">
{{ label }}
</div>
</HoppSmartLink>

12
packages/hoppscotch-common/src/components/teams/Edit.vue
View File

@@ -9,7 +9,7 @@
input-styles="floating-input"
@submit="saveTeam"
/>
<div class="flex items-center justify-between flex-1 pt-4">
<div class="flex flex-1 items-center justify-between pt-4">
<label for="memberList" class="p-4">
{{ t("team.members") }}
</label>
@@ -26,7 +26,7 @@
/>
</div>
</div>
<div v-if="teamDetails.loading" class="border rounded border-divider">
<div v-if="teamDetails.loading" class="rounded border border-divider">
<div class="flex items-center justify-center p-4">
<HoppSmartSpinner />
</div>
@@ -37,7 +37,7 @@
E.isRight(teamDetails.data) &&
teamDetails.data.right.team.teamMembers
"
class="border rounded border-divider"
class="rounded border border-divider"
>
<HoppSmartPlaceholder
v-if="teamDetails.data.right.team.teamMembers === 0"
@@ -62,7 +62,7 @@
class="flex divide-x divide-dividerLight"
>
<input
class="flex flex-1 px-4 py-2 bg-transparent"
class="flex flex-1 bg-transparent px-4 py-2"
:placeholder="`${t('team.email')}`"
:name="'param' + index"
:value="member.email"
@@ -77,7 +77,7 @@
>
<span class="select-wrapper">
<input
class="flex flex-1 px-4 py-2 bg-transparent cursor-pointer"
class="flex flex-1 cursor-pointer bg-transparent px-4 py-2"
:placeholder="`${t('team.permissions')}`"
:name="'value' + index"
:value="member.role"
@@ -152,7 +152,7 @@
v-if="!teamDetails.loading && E.isLeft(teamDetails.data)"
class="flex flex-col items-center"
>
<icon-lucide-help-circle class="mb-4 svg-icons" />
<icon-lucide-help-circle class="svg-icons mb-4" />
{{ t("error.something_went_wrong") }}
</div>
</div>

48
packages/hoppscotch-common/src/components/teams/Invite.vue
View File

@@ -7,9 +7,9 @@
>
<template #body>
<div v-if="sendInvitesResult.length" class="flex flex-col px-4">
<div class="flex flex-col items-center justify-center max-w-md mb-8">
<icon-lucide-users class="w-6 h-6 text-accent" />
<h3 class="my-2 text-lg text-center">
<div class="mb-8 flex max-w-md flex-col items-center justify-center">
<icon-lucide-users class="h-6 w-6 text-accent" />
<h3 class="my-2 text-center text-lg">
{{ t("team.we_sent_invite_link") }}
</h3>
<p class="text-center">
@@ -21,7 +21,7 @@
{{ t("team.success_invites") }}
</label>
<div
class="flex flex-col p-4 border rounded space-y-6 border-dividerLight"
class="flex flex-col space-y-6 rounded border border-dividerLight p-4"
>
<div
v-for="(invitee, index) in successInvites"
@@ -30,7 +30,7 @@
<p class="flex items-center">
<component
:is="IconMailCheck"
class="mr-4 svg-icons text-green-500"
class="svg-icons mr-4 text-green-500"
/>
<span class="truncate">{{ invitee.email }}</span>
</p>
@@ -42,7 +42,7 @@
{{ t("team.failed_invites") }}
</label>
<div
class="flex flex-col p-4 border rounded space-y-6 border-dividerLight"
class="flex flex-col space-y-6 rounded border border-dividerLight p-4"
>
<div
v-for="(invitee, index) in failedInvites"
@@ -51,11 +51,11 @@
<p class="flex items-center">
<component
:is="IconAlertTriangle"
class="mr-4 svg-icons text-red-500"
class="svg-icons mr-4 text-red-500"
/>
<span class="truncate">{{ invitee.email }}</span>
</p>
<p class="mt-2 ml-8 text-red-500">
<p class="ml-8 mt-2 text-red-500">
{{ getErrorMessage(invitee.error) }}
</p>
</div>
@@ -69,12 +69,12 @@
<HoppSmartSpinner />
</div>
<div v-else class="flex flex-col">
<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">
{{ t("team.pending_invites") }}
</label>
</div>
<div class="border rounded divide-y divide-dividerLight border-divider">
<div class="divide-y divide-dividerLight rounded border border-divider">
<div
v-if="pendingInvites.loading"
class="flex items-center justify-center p-4"
@@ -94,14 +94,14 @@
>
<input
v-if="invitee"
class="flex flex-1 px-4 py-2 bg-transparent text-secondaryLight"
class="flex flex-1 bg-transparent px-4 py-2 text-secondaryLight"
:placeholder="`${t('team.email')}`"
:name="'param' + index"
:value="invitee.inviteeEmail"
readonly
/>
<input
class="flex flex-1 px-4 py-2 bg-transparent text-secondaryLight"
class="flex flex-1 bg-transparent px-4 py-2 text-secondaryLight"
:placeholder="`${t('team.permissions')}`"
:name="'value' + index"
:value="invitee.inviteeRole"
@@ -131,12 +131,12 @@
v-if="!pendingInvites.loading && E.isLeft(pendingInvites.data)"
class="flex flex-col items-center p-4"
>
<icon-lucide-help-circle class="mb-4 svg-icons" />
<icon-lucide-help-circle class="svg-icons mb-4" />
{{ t("error.something_went_wrong") }}
</div>
</div>
</div>
<div class="flex items-center justify-between flex-1 pt-4">
<div class="flex flex-1 items-center justify-between pt-4">
<label for="memberList" class="p-4">
{{ t("team.invite_tooltip") }}
</label>
@@ -149,7 +149,7 @@
/>
</div>
</div>
<div class="border rounded divide-y divide-dividerLight border-divider">
<div class="divide-y divide-dividerLight rounded border border-divider">
<div
v-for="(invitee, index) in newInvites"
:key="`new-invitee-${index}`"
@@ -157,7 +157,7 @@
>
<input
v-model="invitee.key"
class="flex flex-1 px-4 py-2 bg-transparent"
class="flex flex-1 bg-transparent px-4 py-2"
:placeholder="`${t('team.email')}`"
:name="'invitee' + index"
autofocus
@@ -171,7 +171,7 @@
>
<span class="select-wrapper">
<input
class="flex flex-1 px-4 py-2 bg-transparent cursor-pointer"
class="flex flex-1 cursor-pointer bg-transparent px-4 py-2"
:placeholder="`${t('team.permissions')}`"
:name="'value' + index"
:value="invitee.value"
@@ -254,13 +254,13 @@
</div>
<div
v-if="newInvites.length"
class="flex flex-col items-start px-4 py-4 mt-4 border rounded border-dividerLight"
class="mt-4 flex flex-col items-start rounded border border-dividerLight px-4 py-4"
>
<span
class="flex items-center justify-center px-2 py-1 mb-4 font-semibold border rounded-full bg-primaryDark border-divider"
class="mb-4 flex items-center justify-center rounded-full border border-divider bg-primaryDark px-2 py-1 font-semibold"
>
<icon-lucide-help-circle
class="mr-2 text-secondaryLight svg-icons"
class="svg-icons mr-2 text-secondaryLight"
/>
{{ t("profile.roles") }}
</span>
@@ -272,7 +272,7 @@
<ul class="mt-4 space-y-4">
<li class="flex">
<span
class="w-1/4 font-semibold uppercase truncate text-secondaryDark max-w-16"
class="max-w-16 w-1/4 truncate font-semibold uppercase text-secondaryDark"
>
{{ t("profile.owner") }}
</span>
@@ -282,7 +282,7 @@
</li>
<li class="flex">
<span
class="w-1/4 font-semibold uppercase truncate text-secondaryDark max-w-16"
class="max-w-16 w-1/4 truncate font-semibold uppercase text-secondaryDark"
>
{{ t("profile.editor") }}
</span>
@@ -292,7 +292,7 @@
</li>
<li class="flex">
<span
class="w-1/4 font-semibold uppercase truncate text-secondaryDark max-w-16"
class="max-w-16 w-1/4 truncate font-semibold uppercase text-secondaryDark"
>
{{ t("profile.viewer") }}
</span>
@@ -307,7 +307,7 @@
<template #footer>
<p
v-if="sendInvitesResult.length"
class="flex justify-between flex-1 text-secondaryLight"
class="flex flex-1 justify-between text-secondaryLight"
>
<HoppButtonSecondary
class="link !p-0"

6
packages/hoppscotch-common/src/components/teams/MemberStack.vue
View File

@@ -11,7 +11,7 @@
:url="member.user.photoURL"
:title="getUserName(member)"
:alt="getUserName(member)"
class="ring-primary ring-2"
class="ring-2 ring-primary"
@click="handleClick()"
/>
<HoppSmartPicture
@@ -19,7 +19,7 @@
v-tippy="{ theme: 'tooltip' }"
:title="getUserName(member)"
:initial="getUserName(member)"
class="ring-primary ring-2"
class="ring-2 ring-primary"
@click="handleClick()"
/>
</div>
@@ -27,7 +27,7 @@
v-if="props.showCount && props.teamMembers.length > maxMembersSoftLimit"
v-tippy="{ theme: 'tooltip', allowHTML: true }"
:title="remainingSlicedMembers"
class="z-10 inline-flex items-center justify-center w-5 h-5 rounded-full cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-primaryDark font- text-8px text-secondaryDark bg-dividerDark ring-2 ring-primary"
class="font- text-8px z-10 inline-flex h-5 w-5 cursor-pointer items-center justify-center rounded-full bg-dividerDark text-secondaryDark ring-2 ring-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-primaryDark"
tabindex="0"
@click="handleClick()"
>

Some files were not shown because too many files have changed in this diff Show More