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

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 }">