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

4
packages/hoppscotch-common/src/pages/_.vue
View File

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

4
packages/hoppscotch-common/src/pages/enter.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="flex flex-col items-center justify-center min-h-screen">
<div class="flex min-h-screen flex-col items-center justify-center">
<HoppSmartSpinner v-if="signingInWithEmail" />
<AppLogo v-else class="w-16 h-16 rounded" />
<AppLogo v-else class="h-16 w-16 rounded" />
<pre v-if="error" class="mt-4 text-secondaryLight">{{ error }}</pre>
</div>
</template>

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

@@ -35,7 +35,7 @@
<template #suffix>
<span
v-if="tab.document.isDirty"
class="flex items-center justify-center text-secondary group-hover:hidden w-4"
class="flex w-4 items-center justify-center text-secondary group-hover:hidden"
>
<svg
viewBox="0 0 24 24"

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

@@ -31,7 +31,7 @@
<template #suffix>
<span
v-if="tab.document.isDirty"
class="flex items-center justify-center text-secondary group-hover:hidden w-4"
class="flex w-4 items-center justify-center text-secondary group-hover:hidden"
>
<svg
viewBox="0 0 24 24"

26
packages/hoppscotch-common/src/pages/join-team.vue
View File

@@ -1,11 +1,11 @@
<template>
<div class="flex flex-col items-center justify-between min-h-screen">
<div class="flex min-h-screen flex-col items-center justify-between">
<div
v-if="invalidLink"
class="flex flex-col items-center justify-center flex-1"
class="flex flex-1 flex-col items-center justify-center"
>
<icon-lucide-alert-triangle class="mb-2 opacity-75 svg-icons" />
<h1 class="text-center heading">
<icon-lucide-alert-triangle class="svg-icons mb-2 opacity-75" />
<h1 class="heading text-center">
{{ t("team.invalid_invite_link") }}
</h1>
<p class="mt-2 text-center">
@@ -14,13 +14,13 @@
</div>
<div
v-else-if="loadingCurrentUser"
class="flex flex-col items-center justify-center flex-1 p-4"
class="flex flex-1 flex-col items-center justify-center p-4"
>
<HoppSmartSpinner />
</div>
<div
v-else-if="currentUser === null"
class="flex flex-col items-center justify-center flex-1 p-4"
class="flex flex-1 flex-col items-center justify-center p-4"
>
<h1 class="heading">{{ t("team.login_to_continue") }}</h1>
<p class="mt-2">{{ t("team.login_to_continue_description") }}</p>
@@ -30,10 +30,10 @@
@click="invokeAction('modals.login.toggle')"
/>
</div>
<div v-else class="flex flex-col items-center justify-center flex-1 p-4">
<div v-else class="flex flex-1 flex-col items-center justify-center p-4">
<div
v-if="inviteDetails.loading"
class="flex flex-col items-center justify-center flex-1 p-4"
class="flex flex-1 flex-col items-center justify-center p-4"
>
<HoppSmartSpinner />
</div>
@@ -42,12 +42,12 @@
v-if="!inviteDetails.loading && E.isLeft(inviteDetails.data)"
class="flex flex-col items-center p-4"
>
<icon-lucide-alert-triangle class="mb-4 svg-icons" />
<icon-lucide-alert-triangle class="svg-icons mb-4" />
<p>
{{ getErrorMessage(inviteDetails.data.left) }}
</p>
<p
class="flex flex-col items-center p-4 mt-8 border rounded border-dividerLight"
class="mt-8 flex flex-col items-center rounded border border-dividerLight p-4"
>
<span class="mb-4">
{{ t("team.logout_and_try_again") }}
@@ -66,7 +66,7 @@
E.isRight(inviteDetails.data) &&
!joinTeamSuccess
"
class="flex flex-col items-center justify-center flex-1 p-4"
class="flex flex-1 flex-col items-center justify-center p-4"
>
<h1 class="heading">
{{
@@ -104,7 +104,7 @@
E.isRight(inviteDetails.data) &&
joinTeamSuccess
"
class="flex flex-col items-center justify-center flex-1 p-4"
class="flex flex-1 flex-col items-center justify-center p-4"
>
<h1 class="heading">
{{
@@ -133,7 +133,7 @@
</div>
<div class="p-4">
<HoppButtonSecondary
class="tracking-wide !font-bold !text-secondaryDark"
class="!font-bold tracking-wide !text-secondaryDark"
label="HOPPSCOTCH"
to="/"
/>

20
packages/hoppscotch-common/src/pages/profile.vue
View File

@@ -4,7 +4,7 @@
<div class="p-4">
<div
v-if="loadingCurrentUser"
class="flex flex-col items-center justify-center flex-1 p-4"
class="flex flex-1 flex-col items-center justify-center p-4"
>
<HoppSmartSpinner class="mb-4" />
</div>
@@ -21,10 +21,10 @@
</HoppSmartPlaceholder>
<div v-else class="space-y-8">
<div
class="h-24 rounded bg-primaryLight -mb-11 md:h-32"
class="-mb-11 h-24 rounded bg-primaryLight md:h-32"
style="background-image: url(/images/cover.svg)"
></div>
<div class="flex flex-col justify-between px-4 space-y-8 md:flex-row">
<div class="flex flex-col justify-between space-y-8 px-4 md:flex-row">
<div class="flex items-end">
<HoppSmartPicture
v-if="currentUser.photoURL"
@@ -32,7 +32,7 @@
:alt="
currentUser.displayName || t('profile.default_displayname')
"
class="ring-primary ring-4"
class="ring-4 ring-primary"
size="16"
rounded="lg"
/>
@@ -41,7 +41,7 @@
:initial="currentUser.displayName || currentUser.email"
rounded="lg"
size="16"
class="ring-primary ring-4"
class="ring-4 ring-primary"
/>
<div class="ml-4">
<label class="heading">
@@ -56,13 +56,13 @@
v-if="currentUser.emailVerified"
v-tippy="{ theme: 'tooltip' }"
:title="t('settings.verified_email')"
class="ml-2 text-green-500 svg-icons focus:outline-none cursor-help"
class="svg-icons ml-2 cursor-help text-green-500 focus:outline-none"
/>
<HoppButtonSecondary
v-else
:label="t('settings.verify_email')"
:icon="IconVerified"
class="px-1 py-0 ml-2"
class="ml-2 px-1 py-0"
:loading="verifyingEmailAddress"
@click="sendEmailVerification"
/>
@@ -110,7 +110,7 @@
filled
outline
:label="t('action.save')"
class="ml-2 min-w-16"
class="min-w-16 ml-2"
type="submit"
:loading="updatingDisplayName"
@click="updateDisplayName"
@@ -133,7 +133,7 @@
filled
outline
:label="t('action.save')"
class="ml-2 min-w-16"
class="min-w-16 ml-2"
type="submit"
:loading="updatingEmailAddress"
@click="updateEmailAddress"
@@ -152,7 +152,7 @@
<div class="my-1 text-secondaryLight">
{{ t("settings.sync_description") }}
</div>
<div class="py-4 space-y-4">
<div class="space-y-4 py-4">
<div class="flex items-center">
<HoppSmartToggle
:on="SYNC_COLLECTIONS"

16
packages/hoppscotch-common/src/pages/r/_id.vue
View File

@@ -2,10 +2,10 @@
<div class="flex flex-col items-center justify-between">
<div
v-if="invalidLink"
class="flex flex-col items-center justify-center flex-1"
class="flex flex-1 flex-col items-center justify-center"
>
<icon-lucide-alert-triangle class="mb-2 opacity-75 svg-icons" />
<h1 class="text-center heading">
<icon-lucide-alert-triangle class="svg-icons mb-2 opacity-75" />
<h1 class="heading text-center">
{{ t("error.invalid_link") }}
</h1>
<p class="mt-2 text-center">
@@ -20,10 +20,10 @@
/>
</p>
</div>
<div v-else class="flex flex-col items-center justify-center flex-1 p-4">
<div v-else class="flex flex-1 flex-col items-center justify-center p-4">
<div
v-if="shortcodeDetails.loading"
class="flex flex-col items-center justify-center flex-1 p-4"
class="flex flex-1 flex-col items-center justify-center p-4"
>
<HoppSmartSpinner />
</div>
@@ -32,8 +32,8 @@
v-if="!shortcodeDetails.loading && E.isLeft(shortcodeDetails.data)"
class="flex flex-col items-center p-4"
>
<icon-lucide-alert-triangle class="mb-2 opacity-75 svg-icons" />
<h1 class="text-center heading">
<icon-lucide-alert-triangle class="svg-icons mb-2 opacity-75" />
<h1 class="heading text-center">
{{ t("error.invalid_link") }}
</h1>
<p class="mt-2 text-center">
@@ -56,7 +56,7 @@
</div>
<div
v-if="!shortcodeDetails.loading && E.isRight(shortcodeDetails.data)"
class="flex flex-col items-center justify-center flex-1 p-4"
class="flex flex-1 flex-col items-center justify-center p-4"
>
<h1 class="heading">
{{ t("state.loading") }}

24
packages/hoppscotch-common/src/pages/realtime/mqtt.vue
View File

@@ -2,7 +2,7 @@
<AppPaneLayout layout-id="mqtt">
<template #primary>
<div
class="sticky top-0 z-10 flex flex-shrink-0 p-4 space-x-2 overflow-x-auto 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">
<div class="flex flex-1">
@@ -12,7 +12,7 @@
type="url"
autocomplete="off"
:class="{ error: !isUrlValid }"
class="flex flex-1 w-full px-4 py-2 border rounded-l bg-primaryLight border-divider text-secondaryDark"
class="flex w-full flex-1 rounded-l border border-divider bg-primaryLight px-4 py-2 text-secondaryDark"
:placeholder="`${t('mqtt.url')}`"
:disabled="
connectionState === 'CONNECTED' ||
@@ -22,14 +22,14 @@
/>
<label
for="client-id"
class="px-4 py-2 font-semibold truncate border-t border-b bg-primaryLight border-divider text-secondaryLight"
class="truncate border-b border-t border-divider bg-primaryLight px-4 py-2 font-semibold text-secondaryLight"
>
{{ t("mqtt.client_id") }}
</label>
<input
id="client-id"
v-model="clientID"
class="flex flex-1 w-full px-4 py-2 border rounded-r bg-primaryLight border-divider text-secondaryDark"
class="flex w-full flex-1 rounded-r border border-divider bg-primaryLight px-4 py-2 text-secondaryDark"
spellcheck="false"
:disabled="
connectionState === 'CONNECTED' ||
@@ -56,7 +56,7 @@
</div>
<div
class="flex flex-col flex-1"
class="flex flex-1 flex-col"
:class="{ '!hidden': connectionState === 'CONNECTED' }"
>
<RealtimeConnectionConfig @change="onChangeConfig" />
@@ -103,7 +103,7 @@
:style="{
color: tab.color,
}"
class="w-4 h-4 svg-icons"
class="svg-icons h-4 w-4"
/>
</template>
<RealtimeLog
@@ -116,9 +116,9 @@
</template>
<template #sidebar>
<div
class="sticky z-10 flex flex-col flex-shrink-0 overflow-x-auto border-b divide-y rounded-t divide-dividerLight bg-primary border-dividerLight"
class="sticky z-10 flex flex-shrink-0 flex-col divide-y divide-dividerLight overflow-x-auto rounded-t border-b border-dividerLight bg-primary"
>
<div class="flex justify-between flex-1">
<div class="flex flex-1 justify-between">
<HoppButtonSecondary
:icon="IconPlus"
:label="t('mqtt.new')"
@@ -155,17 +155,17 @@
:key="`subscription-${index}`"
class="flex flex-col"
>
<div class="flex items-stretch group">
<span class="flex items-center justify-center px-4 cursor-pointer">
<div class="group flex items-stretch">
<span class="flex cursor-pointer items-center justify-center px-4">
<icon-lucide-rss
:style="{
color: topic.color,
}"
class="w-4 h-4 svg-icons"
class="svg-icons h-4 w-4"
/>
</span>
<span
class="flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer group-hover:text-secondaryDark"
class="flex min-w-0 flex-1 cursor-pointer py-2 pr-2 transition group-hover:text-secondaryDark"
@click="openTopicAsTab(topic)"
>
<span class="truncate">

16
packages/hoppscotch-common/src/pages/realtime/socketio.vue
View File

@@ -2,7 +2,7 @@
<AppPaneLayout layout-id="socketio">
<template #primary>
<div
class="sticky top-0 z-10 flex flex-shrink-0 p-4 space-x-2 overflow-x-auto 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">
<div class="flex flex-1">
@@ -18,7 +18,7 @@
id="client-version"
v-tippy="{ theme: 'tooltip' }"
title="socket.io-client version"
class="flex px-4 py-2 font-semibold border rounded-l cursor-pointer bg-primaryLight border-divider text-secondaryDark w-26"
class="flex w-26 cursor-pointer rounded-l border border-divider bg-primaryLight px-4 py-2 font-semibold text-secondaryDark"
:value="`Client ${clientVersion}`"
readonly
:disabled="
@@ -56,7 +56,7 @@
autocomplete="off"
spellcheck="false"
:class="{ error: !isUrlValid }"
class="flex flex-1 w-full px-4 py-2 border bg-primaryLight border-divider text-secondaryDark"
class="flex w-full flex-1 border border-divider bg-primaryLight px-4 py-2 text-secondaryDark"
:placeholder="`${t('socketio.url')}`"
:disabled="
connectionState === 'CONNECTED' ||
@@ -67,7 +67,7 @@
<input
id="socketio-path"
v-model="path"
class="flex flex-1 w-full px-4 py-2 border rounded-r bg-primaryLight border-divider text-secondaryDark"
class="flex w-full flex-1 rounded-r border border-divider bg-primaryLight px-4 py-2 text-secondaryDark"
spellcheck="false"
:disabled="
connectionState === 'CONNECTED' ||
@@ -117,10 +117,10 @@
:label="`${t('request.authorization')}`"
>
<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-upperSecondaryStickyFold"
class="sticky top-upperSecondaryStickyFold z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b 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
@@ -131,7 +131,7 @@
>
<span class="select-wrapper">
<HoppButtonSecondary
class="pr-8 ml-2 rounded-none"
class="ml-2 rounded-none pr-8"
:label="authType"
/>
</span>
@@ -216,7 +216,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="p-2">
<div class="pb-2 text-secondaryLight">

8
packages/hoppscotch-common/src/pages/realtime/sse.vue
View File

@@ -2,7 +2,7 @@
<AppPaneLayout layout-id="sse">
<template #primary>
<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">
<div class="flex flex-1">
@@ -12,7 +12,7 @@
type="url"
autocomplete="off"
:class="{ error: !isUrlValid }"
class="flex flex-1 w-full px-4 py-2 border rounded-l bg-primaryLight border-divider text-secondaryDark"
class="flex w-full flex-1 rounded-l border border-divider bg-primaryLight px-4 py-2 text-secondaryDark"
:placeholder="t('sse.url')"
:disabled="
connectionState === 'STARTED' || connectionState === 'STARTING'
@@ -21,14 +21,14 @@
/>
<label
for="event-type"
class="px-4 py-2 font-semibold truncate border-t border-b bg-primaryLight border-divider text-secondaryLight"
class="truncate border-b border-t border-divider bg-primaryLight px-4 py-2 font-semibold text-secondaryLight"
>
{{ t("sse.event_type") }}
</label>
<input
id="event-type"
v-model="eventType"
class="flex flex-1 w-full px-4 py-2 border rounded-r bg-primaryLight border-divider text-secondaryDark"
class="flex w-full flex-1 rounded-r border border-divider bg-primaryLight px-4 py-2 text-secondaryDark"
spellcheck="false"
:disabled="
connectionState === 'STARTED' || connectionState === 'STARTING'

12
packages/hoppscotch-common/src/pages/realtime/websocket.vue
View File

@@ -2,7 +2,7 @@
<AppPaneLayout layout-id="websocket">
<template #primary>
<div
class="sticky top-0 z-10 flex flex-shrink-0 p-4 space-x-2 overflow-x-auto bg-primary"
class="sticky top-0 z-10 flex flex-shrink-0 space-x-2 overflow-x-auto bg-primary p-4"
>
<HoppSmartInput
v-model="url"
@@ -53,9 +53,9 @@
</HoppSmartTab>
<HoppSmartTab :id="'protocols'" :label="`${t('websocket.protocols')}`">
<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-upperSecondaryStickyFold"
class="sticky top-upperSecondaryStickyFold 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("websocket.protocols") }}
</label>
<div class="flex">
@@ -85,7 +85,7 @@
>
<template #item="{ element: { protocol }, 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
@@ -100,7 +100,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 !== protocols?.length - 1,
}"
tabindex="-1"
@@ -108,7 +108,7 @@
</span>
<input
v-model="protocol.value"
class="flex flex-1 px-4 py-2 bg-transparent"
class="flex flex-1 bg-transparent px-4 py-2"
:placeholder="`${t('count.protocol', { count: index + 1 })}`"
name="message"
type="text"

10
packages/hoppscotch-common/src/pages/settings.vue
View File

@@ -1,7 +1,7 @@
<template>
<div>
<div class="container divide-y divide-dividerLight">
<div class="md:grid md:gap-4 md:grid-cols-3">
<div class="md:grid md:grid-cols-3 md:gap-4">
<div class="p-8 md:col-span-1">
<h3 class="heading">
{{ t("settings.theme") }}
@@ -10,7 +10,7 @@
{{ t("settings.theme_description") }}
</p>
</div>
<div class="p-8 space-y-8 md:col-span-2">
<div class="space-y-8 p-8 md:col-span-2">
<section>
<h4 class="font-semibold text-secondaryDark">
{{ t("settings.background") }}
@@ -57,7 +57,7 @@
:label="t('app.contact_us')"
/>.
</div>
<div class="py-4 space-y-4">
<div class="space-y-4 py-4">
<div class="flex items-center">
<HoppSmartToggle
:on="TELEMETRY_ENABLED"
@@ -87,7 +87,7 @@
</div>
</div>
<div class="md:grid md:gap-4 md:grid-cols-3">
<div class="md:grid md:grid-cols-3 md:gap-4">
<div class="p-8 md:col-span-1">
<h3 class="heading">
{{ t("settings.interceptor") }}
@@ -96,7 +96,7 @@
{{ t("settings.interceptor_description") }}
</p>
</div>
<div class="p-8 space-y-8 md:col-span-2">
<div class="space-y-8 p-8 md:col-span-2">
<section v-for="[id, settings] in interceptorsWithSettings" :key="id">
<h4 class="font-semibold text-secondaryDark">
{{ settings.entryTitle(t) }}