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

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()"
>

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

@@ -1,14 +1,14 @@
<template>
<div
class="flex flex-col flex-1 border rounded border-divider"
class="flex flex-1 flex-col rounded border border-divider"
@contextmenu.prevent="!compact ? options.tippy.show() : null"
>
<div
class="flex items-start flex-1"
class="flex flex-1 items-start"
:class="
compact
? team.myRole === 'OWNER'
? 'cursor-pointer hover:bg-primaryDark transition hover:border-dividerDark focus-visible:border-dividerDark'
? 'cursor-pointer transition hover:border-dividerDark hover:bg-primaryDark focus-visible:border-dividerDark'
: 'cursor-not-allowed bg-primaryLight'
: ''
"
@@ -30,7 +30,7 @@
<TeamsMemberStack :team-members="team.teamMembers" class="mt-4" />
</div>
</div>
<div v-if="!compact" class="flex items-end justify-between flex-shrink-0">
<div v-if="!compact" class="flex flex-shrink-0 items-end justify-between">
<span>
<HoppButtonSecondary
v-if="team.myRole === 'OWNER'"

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

@@ -40,7 +40,7 @@
/>
</div>
<div v-if="!loading && adapterError" 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>