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

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

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"