refactor: sort windi class names

This commit is contained in:
liyasthomas
2021-12-01 22:59:01 +05:30
parent 520ac8ede5
commit a508909471
91 changed files with 518 additions and 512 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -1,23 +1,23 @@
<template>
<div
class="bg-primary hide-scrollbar whitespace-nowrap sticky top-0 z-10 flex items-center p-4 overflow-auto"
class="bg-primary flex p-4 top-0 z-10 sticky items-center overflow-auto hide-scrollbar whitespace-nowrap"
>
<div
v-if="response == null"
class="text-secondaryLight flex flex-col items-center justify-center flex-1"
class="flex flex-col flex-1 text-secondaryLight items-center justify-center"
>
<div class="flex pb-4 my-4 space-x-2">
<div class="flex flex-col items-end space-y-4 text-right">
<span class="flex items-center flex-1">
<div class="flex space-x-2 my-4 pb-4">
<div class="flex flex-col space-y-4 text-right items-end">
<span class="flex flex-1 items-center">
{{ 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>
@@ -57,18 +57,18 @@
</div>
<div
v-if="response.type === 'network_fail'"
class="flex flex-col items-center justify-center flex-1 p-4"
class="flex flex-col flex-1 p-4 items-center justify-center"
>
<img
:src="`/images/states/${$colorMode.value}/youre_lost.svg`"
loading="lazy"
class="inline-flex flex-col object-contain object-center w-32 h-32 my-4"
class="flex-col object-contain object-center h-32 my-4 w-32 inline-flex"
:alt="`${t('error.network_fail')}`"
/>
<span class="mb-2 font-semibold text-center">
<span class="font-semibold text-center mb-2">
{{ t("error.network_fail") }}
</span>
<span class="text-secondaryLight max-w-sm mb-4 text-center">
<span class="max-w-sm text-center text-secondaryLight mb-4">
{{ t("helpers.network_fail") }}
</span>
<AppInterceptor />
@@ -76,7 +76,7 @@
<div
v-if="response.type === 'success' || 'fail'"
:class="statusCategory.className"
class="space-x-4 font-semibold"
class="font-semibold space-x-4"
>
<span v-if="response.statusCode">
<span class="text-secondary"> {{ t("response.status") }}: </span>

View File

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

View File

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

View File

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

View File

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