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

2
packages/hoppscotch-common/src/components/app/Announcement.vue
View File

@@ -1,6 +1,6 @@
<template>
<div
class="relative flex items-center px-4 py-2 transition bg-error text-tiny group"
class="group relative flex items-center bg-error px-4 py-2 text-tiny transition"
role="alert"
>
<icon-lucide-info class="mr-2" />

2
packages/hoppscotch-common/src/components/app/ContextMenu.vue
View File

@@ -1,7 +1,7 @@
<template>
<div
ref="contextMenuRef"
class="fixed bg-popover shadow-lg transform translate-y-8 border border-dividerDark p-2 rounded"
class="fixed translate-y-8 transform rounded border border-dividerDark bg-popover p-2 shadow-lg"
:style="`top: ${position.top}px; left: ${position.left}px; z-index: 1000;`"
>
<div v-if="contextMenuOptions" class="flex flex-col">

2
packages/hoppscotch-common/src/components/app/DeveloperOptions.vue
View File

@@ -6,7 +6,7 @@
@close="hideModal"
>
<template #body>
<p class="px-2 mb-4 text-secondaryLight">
<p class="mb-4 px-2 text-secondaryLight">
{{ t("app.developer_option_description") }}
</p>
<div class="flex flex-1">

2
packages/hoppscotch-common/src/components/app/Footer.vue
View File

@@ -175,7 +175,7 @@
@click="COLUMN_LAYOUT = !COLUMN_LAYOUT"
/>
<span
class="transition transform"
class="transform transition"
:class="{
'rotate-180': SIDEBAR_ON_LEFT,
}"

26
packages/hoppscotch-common/src/components/app/Header.vue
View File

@@ -1,28 +1,28 @@
<template>
<div>
<header
class="flex items-center justify-between flex-1 flex-shrink-0 px-2 py-2 space-x-2 overflow-x-auto overflow-y-hidden"
class="flex flex-1 flex-shrink-0 items-center justify-between space-x-2 overflow-x-auto overflow-y-hidden px-2 py-2"
>
<div
class="inline-flex items-center justify-start flex-1 space-x-2"
class="inline-flex flex-1 items-center justify-start space-x-2"
:style="{
paddingTop: platform.ui?.appHeader?.paddingTop?.value,
paddingLeft: platform.ui?.appHeader?.paddingLeft?.value,
}"
>
<HoppButtonSecondary
class="tracking-wide !font-bold !text-secondaryDark hover:bg-primaryDark focus-visible:bg-primaryDark uppercase"
class="!font-bold uppercase tracking-wide !text-secondaryDark hover:bg-primaryDark focus-visible:bg-primaryDark"
:label="t('app.name')"
to="/"
/>
</div>
<div class="inline-flex items-center justify-center flex-1 space-x-2">
<div class="inline-flex flex-1 items-center justify-center space-x-2">
<button
class="flex flex-1 items-center justify-between px-2 py-1 self-stretch bg-primaryDark transition text-secondaryLight cursor-text rounded border border-dividerDark max-w-60 hover:border-dividerDark hover:bg-primaryLight hover:text-secondary focus-visible:border-dividerDark focus-visible:bg-primaryLight focus-visible:text-secondary"
class="flex max-w-[15rem] flex-1 cursor-text items-center justify-between self-stretch rounded border border-dividerDark bg-primaryDark px-2 py-1 text-secondaryLight transition hover:border-dividerDark hover:bg-primaryLight hover:text-secondary focus-visible:border-dividerDark focus-visible:bg-primaryLight focus-visible:text-secondary"
@click="invokeAction('modals.search.toggle')"
>
<span class="inline-flex flex-1 items-center">
<icon-lucide-search class="mr-2 svg-icons" />
<icon-lucide-search class="svg-icons mr-2" />
{{ t("app.search") }}
</span>
<span class="flex space-x-1">
@@ -48,7 +48,7 @@
@click="invokeAction('modals.support.toggle')"
/>
</div>
<div class="inline-flex items-center justify-end flex-1 space-x-2">
<div class="inline-flex flex-1 items-center justify-end space-x-2">
<div
v-if="currentUser === null"
class="inline-flex items-center space-x-2"
@@ -56,7 +56,7 @@
<HoppButtonSecondary
:icon="IconUploadCloud"
:label="t('header.save_workspace')"
class="hidden md:flex bg-green-500/15 py-1.75 border border-green-600/25 !text-green-500 hover:bg-green-400/10 focus-visible:bg-green-400/10 focus-visible:border-green-800/50 !focus-visible:text-green-600 hover:border-green-800/50 !hover:text-green-600"
class="py-1.75 !focus-visible:text-green-600 !hover:text-green-600 hidden border border-green-600/25 bg-green-500/[.15] !text-green-500 hover:border-green-800/50 hover:bg-green-400/10 focus-visible:border-green-800/50 focus-visible:bg-green-400/10 md:flex"
@click="invokeAction('modals.login.toggle')"
/>
<HoppButtonPrimary
@@ -77,13 +77,13 @@
@handle-click="handleTeamEdit()"
/>
<div
class="flex border divide-x rounded bg-green-500/15 divide-green-600/25 border-green-600/25 focus-within:bg-green-400/10 focus-within:border-green-800/50 focus-within:divide-green-800/50 hover:bg-green-400/10 hover:border-green-800/50 hover:divide-green-800/50"
class="flex divide-x divide-green-600/25 rounded border border-green-600/25 bg-green-500/[.15] focus-within:divide-green-800/50 focus-within:border-green-800/50 focus-within:bg-green-400/10 hover:divide-green-800/50 hover:border-green-800/50 hover:bg-green-400/10"
>
<HoppButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="t('team.invite_tooltip')"
:icon="IconUserPlus"
class="py-1.75 !text-green-500 !focus-visible:text-green-600 !hover:text-green-600"
class="py-1.75 !focus-visible:text-green-600 !hover:text-green-600 !text-green-500"
@click="handleInvite()"
/>
<HoppButtonSecondary
@@ -95,7 +95,7 @@
v-tippy="{ theme: 'tooltip' }"
:title="t('team.edit')"
:icon="IconSettings"
class="py-1.75 !text-green-500 !focus-visible:text-green-600 !hover:text-green-600"
class="py-1.75 !focus-visible:text-green-600 !hover:text-green-600 !text-green-500"
@click="handleTeamEdit()"
/>
</div>
@@ -110,7 +110,7 @@
:title="t('workspace.change')"
:label="mdAndLarger ? workspaceName : ``"
:icon="workspace.type === 'personal' ? IconUser : IconUsers"
class="pr-8 select-wrapper rounded bg-blue-500/15 py-1.75 border border-blue-600/25 !text-blue-500 focus-visible:bg-blue-400/10 focus-visible:border-blue-800/50 !focus-visible:text-blue-600 hover:bg-blue-400/10 hover:border-blue-800/50 !hover:text-blue-600"
class="select-wrapper !focus-visible:text-blue-600 !hover:text-blue-600 rounded border border-blue-600/25 bg-blue-500/[.15] py-[0.4375rem] pr-8 !text-blue-500 hover:border-blue-800/50 hover:bg-blue-400/10 focus-visible:border-blue-800/50 focus-visible:bg-blue-400/10"
/>
<template #content="{ hide }">
<div
@@ -176,7 +176,7 @@
@keyup.escape="hide()"
>
<div class="flex flex-col px-2 text-tiny">
<span class="inline-flex font-semibold truncate">
<span class="inline-flex truncate font-semibold">
{{
currentUser.displayName ||
t("profile.default_hopp_displayname")

18
packages/hoppscotch-common/src/components/app/Inspection.vue
View File

@@ -1,7 +1,7 @@
<template>
<div v-if="inspectionResults && inspectionResults.length > 0">
<tippy interactive trigger="click" theme="popover">
<div class="flex justify-center items-center flex-1 flex-col">
<div class="flex flex-1 flex-col items-center justify-center">
<HoppButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:icon="IconAlertTriangle"
@@ -10,12 +10,12 @@
/>
</div>
<template #content="{ hide }">
<div class="flex flex-col space-y-2 items-start flex-1">
<div class="flex flex-1 flex-col items-start space-y-2">
<div
class="flex justify-between border rounded pl-2 border-divider bg-popover sticky top-0 self-stretch"
class="sticky top-0 flex justify-between self-stretch rounded border border-divider bg-popover pl-2"
>
<span class="flex items-center flex-1">
<icon-lucide-activity class="mr-2 svg-icons text-accent" />
<span class="flex flex-1 items-center">
<icon-lucide-activity class="svg-icons mr-2 text-accent" />
<span class="font-bold">
{{ t("inspections.title") }}
</span>
@@ -31,10 +31,10 @@
<div
v-for="(inspector, index) in inspectionResults"
:key="index"
class="flex self-stretch max-w-md w-full"
class="flex w-full max-w-md self-stretch"
>
<div
class="flex flex-col flex-1 rounded border border-dashed border-dividerDark divide-y divide-dashed divide-dividerDark"
class="flex flex-1 flex-col divide-y divide-dashed divide-dividerDark rounded border border-dashed border-dividerDark"
>
<span
v-if="inspector.text.type === 'text'"
@@ -44,13 +44,13 @@
<HoppSmartLink
blank
:to="inspector.doc.link"
class="text-accent hover:text-accentDark transition"
class="text-accent transition hover:text-accentDark"
>
{{ inspector.doc.text }}
<icon-lucide-arrow-up-right class="svg-icons" />
</HoppSmartLink>
</span>
<span v-if="inspector.action" class="flex p-2 space-x-2">
<span v-if="inspector.action" class="flex space-x-2 p-2">
<HoppButtonSecondary
:label="inspector.action.text"
outline

4
packages/hoppscotch-common/src/components/app/Options.vue
View File

@@ -8,7 +8,7 @@
>
<template #body>
<div class="flex flex-col space-y-2">
<h2 class="p-4 font-semibold font-bold text-secondaryDark">
<h2 class="p-4 font-bold font-semibold text-secondaryDark">
{{ t("layout.name") }}
</h2>
<HoppSmartItem
@@ -27,7 +27,7 @@
active
@click="expandCollection"
/>
<h2 class="p-4 font-semibold font-bold text-secondaryDark">
<h2 class="p-4 font-bold font-semibold text-secondaryDark">
{{ t("support.title") }}
</h2>
<template

12
packages/hoppscotch-common/src/components/app/Share.vue
View File

@@ -16,13 +16,13 @@
class="share-link"
tabindex="0"
>
<component :is="platform.icon" class="w-6 h-6" />
<component :is="platform.icon" class="h-6 w-6" />
<span class="mt-3">
{{ platform.name }}
</span>
</a>
<button class="share-link" @click="copyAppLink">
<component :is="copyIcon" class="w-6 h-6 text-xl" />
<component :is="copyIcon" class="h-6 w-6 text-xl" />
<span class="mt-3">
{{ t("app.copy") }}
</span>
@@ -119,14 +119,14 @@ const hideModal = () => {
.share-link {
@apply border border-dividerLight;
@apply rounded;
@apply flex-col flex;
@apply flex flex-col;
@apply p-4;
@apply items-center;
@apply justify-center;
@apply font-semibold;
@apply hover: (bg-primaryLight text-secondaryDark);
@apply focus: outline-none;
@apply focus-visible: border-divider;
@apply hover:bg-primaryLight hover:text-secondaryDark;
@apply focus:outline-none;
@apply focus-visible:border-divider;
svg {
@apply opacity-80;

12
packages/hoppscotch-common/src/components/app/Shortcuts.vue
View File

@@ -2,7 +2,7 @@
<HoppSmartSlideOver :show="show" :title="t('app.shortcuts')" @close="close()">
<template #content>
<div
class="sticky top-0 z-10 flex flex-col flex-shrink-0 overflow-x-auto bg-primary"
class="sticky top-0 z-10 flex flex-shrink-0 flex-col overflow-x-auto bg-primary"
>
<HoppSmartInput
v-model="filterText"
@@ -17,7 +17,7 @@
v-if="isEmpty(shortcutsResults)"
:text="`${t('state.nothing_found')} ‟${filterText}”`"
>
<icon-lucide-search class="pb-2 opacity-75 svg-icons" />
<icon-lucide-search class="svg-icons pb-2 opacity-75" />
</HoppSmartPlaceholder>
<details
@@ -28,16 +28,16 @@
open
>
<summary
class="flex items-center flex-1 min-w-0 px-6 py-4 font-semibold transition cursor-pointer focus:outline-none text-secondaryLight hover:text-secondaryDark"
class="flex min-w-0 flex-1 cursor-pointer items-center px-6 py-4 font-semibold text-secondaryLight transition hover:text-secondaryDark focus:outline-none"
>
<icon-lucide-chevron-right class="mr-2 indicator" />
<icon-lucide-chevron-right class="indicator mr-2" />
<span
class="font-semibold truncate capitalize-first text-secondaryDark"
class="capitalize-first truncate font-semibold text-secondaryDark"
>
{{ sectionTitle }}
</span>
</summary>
<div class="flex flex-col px-6 pb-4 space-y-2">
<div class="flex flex-col space-y-2 px-6 pb-4">
<AppShortcutsEntry
v-for="(shortcut, index) in sectionResults"
:key="`shortcut-${index}`"

2
packages/hoppscotch-common/src/components/app/ShortcutsEntry.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="flex items-center py-1">
<span class="flex flex-1 mr-4">
<span class="mr-4 flex flex-1">
{{ shortcut.label }}
</span>
<kbd

10
packages/hoppscotch-common/src/components/app/ShortcutsPrompt.vue
View File

@@ -1,17 +1,17 @@
<template>
<div class="flex flex-col items-center justify-center text-secondaryLight">
<div class="flex mb-4 space-x-2">
<div class="mb-4 flex space-x-2">
<div class="flex flex-col items-end space-y-4 text-right">
<span class="flex items-center flex-1">
<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>

32
packages/hoppscotch-common/src/components/app/Sidenav.vue
View File

@@ -1,6 +1,6 @@
<template>
<aside class="flex justify-between h-full md:flex-col">
<nav class="flex flex-1 flex-nowrap md:flex-col md:flex-none bg-primary">
<aside class="flex h-full justify-between md:flex-col">
<nav class="flex flex-1 flex-nowrap bg-primary md:flex-none md:flex-col">
<HoppSmartLink
v-for="(navigation, index) in primaryNavigation"
:key="`navigation-${index}`"
@@ -73,25 +73,25 @@ const primaryNavigation = [
.nav-link {
@apply relative;
@apply p-4;
@apply flex flex-col flex-1;
@apply flex flex-1 flex-col;
@apply items-center;
@apply justify-center;
@apply hover: (bg-primaryDark text-secondaryDark);
@apply focus-visible: text-secondaryDark;
@apply hover:bg-primaryDark hover:text-secondaryDark;
@apply focus-visible:text-secondaryDark;
@apply after:absolute;
@apply after:inset-x-0;
@apply after:md: inset-x-auto;
@apply after:md: inset-y-0;
@apply after:md:inset-x-auto;
@apply after:md:inset-y-0;
@apply after:bottom-0;
@apply after:md: bottom-auto;
@apply after:md: left-0;
@apply after:z-2;
@apply after:md:bottom-auto;
@apply after:md:left-0;
@apply after:z-10;
@apply after:h-0.5;
@apply after:md: h-full;
@apply after:md:h-full;
@apply after:w-full;
@apply after:md: w-0.5;
@apply after:content-DEFAULT;
@apply focus: after: bg-divider;
@apply after:md:w-0.5;
@apply after:content-[""];
@apply focus:after:bg-divider;
.svg-icons {
@apply opacity-75;
@@ -105,7 +105,7 @@ const primaryNavigation = [
&.router-link-active {
@apply text-secondaryDark;
@apply bg-primaryLight;
@apply hover: text-secondaryDark;
@apply hover:text-secondaryDark;
@apply after:bg-accent;
.svg-icons {
@@ -116,7 +116,7 @@ const primaryNavigation = [
&.exact-active-link {
@apply text-secondaryDark;
@apply bg-primaryLight;
@apply hover: text-secondaryDark;
@apply hover:text-secondaryDark;
@apply after:bg-accent;
.svg-icons {

8
packages/hoppscotch-common/src/components/app/spotlight/Entry.vue
View File

@@ -1,7 +1,7 @@
<template>
<button
ref="el"
class="flex items-center flex-1 px-6 py-4 font-medium space-x-4 transition cursor-pointer relative search-entry focus:outline-none"
class="search-entry relative flex flex-1 cursor-pointer items-center space-x-4 px-6 py-4 font-medium transition focus:outline-none"
:class="{ 'active bg-primaryLight text-secondaryDark': active }"
tabindex="-1"
@click="emit('action')"
@@ -9,7 +9,7 @@
>
<component
:is="entry.icon"
class="opacity-50 svg-icons"
class="svg-icons opacity-50"
:class="{ 'opacity-100': active }"
/>
<template
@@ -112,9 +112,9 @@ watch(
@apply after:left-0;
@apply after:bottom-0;
@apply after:bg-transparent;
@apply after:z-2;
@apply after:z-10;
@apply after:w-0.5;
@apply after:content-DEFAULT;
@apply after:content-[''];
&.active {
@apply after:bg-accentLight;

2
packages/hoppscotch-common/src/components/app/spotlight/entry/GQLHistory.vue
View File

@@ -8,7 +8,7 @@
{{ historyEntry.request.url }}
</span>
<span
class="font-semibold truncate text-tiny flex flex-shrink-0 border border-dividerDark rounded-md px-1"
class="flex flex-shrink-0 truncate rounded-md border border-dividerDark px-1 text-tiny font-semibold"
>
{{ historyEntry.request.query.split("\n")[0] }}
</span>

2
packages/hoppscotch-common/src/components/app/spotlight/entry/GQLRequest.vue
View File

@@ -1,5 +1,5 @@
<template>
<span class="flex flex-1 space-x-2 items-center">
<span class="flex flex-1 items-center space-x-2">
<template v-for="(folder, index) in pathFolders" :key="index">
<span class="block" :class="{ truncate: index !== 0 }">
{{ folder.name }}

2
packages/hoppscotch-common/src/components/app/spotlight/entry/RESTHistory.vue
View File

@@ -5,7 +5,7 @@
</span>
<icon-lucide-chevron-right class="flex flex-shrink-0" />
<span
class="font-semibold truncate text-tiny flex flex-shrink-0 border border-dividerDark rounded-md px-1"
class="flex flex-shrink-0 truncate rounded-md border border-dividerDark px-1 text-tiny font-semibold"
:class="entryStatus.className"
>
{{ historyEntry.request.method }}

4
packages/hoppscotch-common/src/components/app/spotlight/entry/RESTRequest.vue
View File

@@ -8,8 +8,8 @@
</template>
<span
v-if="request"
class="font-semibold truncate text-tiny flex flex-shrink-0 border border-dividerDark rounded-md px-1"
:class="getMethodLabelColorClassOf(request)"
class="flex flex-shrink-0 truncate rounded-md border border-dividerDark px-1 text-tiny font-semibold"
:style="{ color: getMethodLabelColorClassOf(request) }"
>
{{ request.method.toUpperCase() }}
</span>

12
packages/hoppscotch-common/src/components/app/spotlight/index.vue
View File

@@ -6,7 +6,7 @@
@close="emit('hide-modal')"
>
<template #body>
<div class="flex flex-col border-b transition border-divider">
<div class="flex flex-col border-b border-divider transition">
<div class="flex items-center">
<input
id="command"
@@ -16,14 +16,14 @@
autocomplete="off"
name="command"
:placeholder="`${t('app.type_a_command_search')}`"
class="flex flex-1 text-base bg-transparent text-secondaryDark px-6 py-5"
class="flex flex-1 bg-transparent px-6 py-5 text-base text-secondaryDark"
/>
<HoppSmartSpinner v-if="searchSession?.loading" class="mr-6" />
</div>
</div>
<div
v-if="searchSession && search.length > 0"
class="flex flex-col flex-1 overflow-y-auto border-b border-divider divide-y divide-dividerLight"
class="flex flex-1 flex-col divide-y divide-dividerLight overflow-y-auto border-b border-divider"
>
<div
v-for="([sectionID, sectionResult], sectionIndex) in scoredResults"
@@ -31,7 +31,7 @@
class="flex flex-col"
>
<h5
class="px-6 py-2 bg-primaryContrast z-10 text-secondaryLight sticky top-0"
class="sticky top-0 z-10 bg-primaryContrast px-6 py-2 text-secondaryLight"
>
{{ sectionResult.title }}
</h5>
@@ -49,7 +49,7 @@
:text="`${t('state.nothing_found')} ‟${search}”`"
>
<template #icon>
<icon-lucide-search class="pb-2 opacity-75 svg-icons" />
<icon-lucide-search class="svg-icons pb-2 opacity-75" />
</template>
<HoppButtonSecondary
:label="t('action.clear')"
@@ -59,7 +59,7 @@
</HoppSmartPlaceholder>
</div>
<div
class="flex flex-shrink-0 text-tiny text-secondaryLight p-4 justify-between whitespace-nowrap overflow-auto <sm:hidden"
class="flex flex-shrink-0 justify-between overflow-auto whitespace-nowrap p-4 text-tiny text-secondaryLight <sm:hidden"
>
<div class="flex items-center">
<kbd class="shortcut-key">↑</kbd>