btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

refactor: sort windi class names

Browse Source
This commit is contained in:
liyasthomas
2021-11-23 08:47:09 +05:30
parent 4c5ca1b31d
commit fdf12a24ed
89 changed files with 1025 additions and 860 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
packages/hoppscotch-app/pages/documentation.vue
View File

@@ -11,18 +11,18 @@
<Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
<Pane class="hide-scrollbar !overflow-auto">
<AppSection label="import">
<div class="flex p-4 items-start justify-between">
<div class="flex items-start justify-between p-4">
<label>
{{ $t("documentation.generate_message") }}
</label>
<span
class="
bg-accentDark
rounded
text-accentContrast
py-1
px-2
inline-flex
px-2
py-1
rounded
"
>
BETA
@@ -31,13 +31,14 @@
<div
class="
bg-primary
border-b border-dividerLight
flex
border-dividerLight
sticky
top-0
z-10
flex
items-start
justify-between
sticky
border-b
"
>
<label for="collectionUpload">
@@ -67,21 +68,23 @@
<textarea-autosize
id="import-curl"
v-model="collectionJSON"
class="font-mono p-4 bg-primary"
class="p-4 font-mono bg-primary"
autofocus
rows="8"
/>
<div
class="
border-t
bg-primary
border-t border-b border-dividerLight
flex
p-4
border-dividerLight
sticky
bottom-0
z-10
justify-between
flex
items-start
sticky
justify-between
p-4
border-b
"
>
<ButtonPrimary
@@ -97,14 +100,15 @@
<div
v-if="items.length === 0"
class="
flex flex-col
flex
text-secondaryLight
p-4
flex-col
items-center
justify-center
p-4
"
>
<i class="opacity-75 pb-2 material-icons">topic</i>
<i class="pb-2 opacity-75 material-icons">topic</i>
<span class="text-center">
{{ $t("helpers.generate_documentation_first") }}
</span>
@@ -112,13 +116,15 @@
<div
v-else
class="
flex
bg-primary
border-b border-dividerLight
flex flex-1
p-4
border-dividerLight
sticky
top-0
z-10
sticky
flex-1
p-4
border-b
"
>
<span

2
packages/hoppscotch-app/pages/enter.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="flex flex-col min-h-screen items-center justify-center">
<div class="flex flex-col items-center justify-center min-h-screen">
<SmartSpinner v-if="signingInWithEmail" />
<SmartLoadingIndicator v-else />
<pre v-if="error">{{ error }}</pre>

41
packages/hoppscotch-app/pages/join-team.vue
View File

@@ -1,26 +1,26 @@
<template>
<div class="flex flex-col min-h-screen items-center justify-between">
<div class="flex flex-col items-center justify-between min-h-screen">
<div
v-if="invalidLink"
class="flex flex-1 items-center justify-center flex-col"
class="flex flex-col items-center justify-center flex-1"
>
<i class="opacity-75 pb-2 material-icons">error_outline</i>
<h1 class="heading text-center">
<i class="pb-2 opacity-75 material-icons">error_outline</i>
<h1 class="text-center heading">
{{ $t("team.invalid_invite_link") }}
</h1>
<p class="text-center mt-2">
<p class="mt-2 text-center">
{{ $t("team.invalid_invite_link_description") }}
</p>
</div>
<div
v-else-if="loadingCurrentUser"
class="flex-col flex-1 p-4 flex items-center justify-center"
class="flex flex-col items-center justify-center flex-1 p-4"
>
<SmartSpinner />
</div>
<div
v-else-if="currentUser === null"
class="flex-col flex-1 p-4 flex items-center justify-center"
class="flex flex-col items-center justify-center flex-1 p-4"
>
<h1 class="heading">{{ $t("team.login_to_continue") }}</h1>
<p class="mt-2">{{ $t("team.login_to_continue_description") }}</p>
@@ -30,17 +30,17 @@
@click.native="showLogin = true"
/>
</div>
<div v-else class="flex-col flex-1 p-4 flex items-center justify-center">
<div v-else class="flex flex-col items-center justify-center flex-1 p-4">
<div
v-if="inviteDetails.loading"
class="flex-col flex-1 p-4 flex items-center justify-center"
class="flex flex-col items-center justify-center flex-1 p-4"
>
<SmartSpinner />
</div>
<div v-else>
<div
v-if="!inviteDetails.loading && E.isLeft(inviteDetails.data)"
class="flex flex-col p-4 items-center"
class="flex flex-col items-center p-4"
>
<i class="mb-4 material-icons">error_outline</i>
<p>
@@ -48,13 +48,14 @@
</p>
<p
class="
p-4
items-center
mt-8
rounded
flex-col
border border-dividerLight
flex
border-dividerLight
flex-col
items-center
p-4
mt-8
border
rounded
"
>
<span class="mb-4">
@@ -74,7 +75,7 @@
E.isRight(inviteDetails.data) &&
!joinTeamSuccess
"
class="flex-col flex-1 p-4 flex items-center justify-center"
class="flex flex-col items-center justify-center flex-1 p-4"
>
<h1 class="heading">
{{
@@ -83,7 +84,7 @@
})
}}
</h1>
<p class="text-secondaryLight mt-2">
<p class="mt-2 text-secondaryLight">
{{
$t("team.invited_to_team", {
owner:
@@ -111,7 +112,7 @@
E.isRight(inviteDetails.data) &&
joinTeamSuccess
"
class="flex-col flex-1 p-4 flex items-center justify-center"
class="flex flex-col items-center justify-center flex-1 p-4"
>
<h1 class="heading">
{{
@@ -120,7 +121,7 @@
})
}}
</h1>
<p class="text-secondaryLight mt-2">
<p class="mt-2 text-secondaryLight">
{{
$t("team.joined_team_description", {
team: inviteDetails.data.right.teamInvitation.team.name,

27
packages/hoppscotch-app/pages/profile.vue
View File

@@ -10,16 +10,17 @@
:src="`/images/states/${$colorMode.value}/login.svg`"
loading="lazy"
class="
flex-col
my-4
object-contain object-center
h-24
w-24
object-contain
inline-flex
flex-col
object-center
w-24
h-24
my-4
"
:alt="`${t('empty.parameters')}`"
/>
<p class="text-center pb-4 text-secondaryLight">
<p class="pb-4 text-center text-secondaryLight">
{{ t("empty.profile") }}
</p>
<ButtonPrimary
@@ -30,15 +31,15 @@
</div>
<div v-else class="space-y-8">
<div
class="bg-primaryLight h-24 md:h-32 -mb-11 rounded"
class="h-24 rounded bg-primaryLight md:h-32 -mb-11"
style="background-image: url('/images/cover.svg')"
></div>
<div class="flex px-4 flex-col md:flex-row space-y-8 justify-between">
<div class="flex flex-col justify-between px-4 md:flex-row space-y-8">
<div class="flex items-end">
<img
v-if="currentUser.photoURL"
:src="currentUser.photoURL"
class="rounded-lg ring-4 ring-primary h-16 w-16"
class="w-16 h-16 rounded-lg ring-4 ring-primary"
:alt="currentUser.displayName"
/>
<SmartIcon v-else name="user" class="svg-icons" />
@@ -46,7 +47,7 @@
<label class="heading">
{{ currentUser.displayName || t("state.nothing_found") }}
</label>
<p class="flex text-secondaryLight items-center">
<p class="flex items-center text-secondaryLight">
{{ currentUser.email }}
<SmartIcon
v-if="currentUser.emailVerified"
@@ -56,7 +57,7 @@
</p>
</div>
</div>
<div class="flex space-x-2 items-end">
<div class="flex items-end space-x-2">
<div>
<SmartItem
to="/settings"
@@ -86,7 +87,7 @@
{{ t("settings.profile_name") }}
</label>
<form
class="flex md:max-w-sm mt-2"
class="flex mt-2 md:max-w-sm"
@submit.prevent="updateDisplayName"
>
<input
@@ -114,7 +115,7 @@
<div class="mt-1 text-secondaryLight">
{{ t("settings.sync_description") }}
</div>
<div class="space-y-4 py-4">
<div class="py-4 space-y-4">
<div class="flex items-center">
<SmartToggle
:on="SYNC_COLLECTIONS"

18
packages/hoppscotch-app/pages/r/_id.vue
View File

@@ -2,33 +2,33 @@
<div class="flex flex-col items-center justify-between">
<div
v-if="invalidLink"
class="flex flex-1 items-center justify-center flex-col"
class="flex flex-col items-center justify-center flex-1"
>
<i class="opacity-75 pb-2 material-icons">error_outline</i>
<i class="material-icons pb-2 opacity-75">error_outline</i>
<h1 class="heading text-center">
{{ $t("error.invalid_link") }}
</h1>
<p class="text-center mt-2">
<p class="mt-2 text-center">
{{ $t("error.invalid_link_description") }}
</p>
</div>
<div v-else class="flex-col flex-1 p-4 flex items-center justify-center">
<div v-else class="flex flex-col items-center justify-center flex-1 p-4">
<div
v-if="shortcodeDetails.loading"
class="flex-col flex-1 p-4 flex items-center justify-center"
class="flex flex-col items-center justify-center flex-1 p-4"
>
<SmartSpinner />
</div>
<div v-else>
<div
v-if="!shortcodeDetails.loading && E.isLeft(shortcodeDetails.data)"
class="flex flex-col p-4 items-center"
class="flex flex-col items-center p-4"
>
<i class="opacity-75 pb-2 material-icons">error_outline</i>
<i class="material-icons pb-2 opacity-75">error_outline</i>
<h1 class="heading text-center">
{{ $t("error.invalid_link") }}
</h1>
<p class="text-center mt-2">
<p class="mt-2 text-center">
{{ $t("error.invalid_link_description") }}
</p>
<p class="mt-4">
@@ -43,7 +43,7 @@
</div>
<div
v-if="!shortcodeDetails.loading && E.isRight(shortcodeDetails.data)"
class="flex-col flex-1 p-4 flex items-center justify-center"
class="flex flex-col items-center justify-center flex-1 p-4"
>
<h1 class="heading">
{{ $t("state.loading") }}

18
packages/hoppscotch-app/pages/settings.vue
View File

@@ -1,6 +1,6 @@
<template>
<div>
<div class="divide-y divide-dividerLight container space-y-8">
<div class="container divide-dividerLight space-y-8 divide-y">
<div class="md:grid md:gap-4 md:grid-cols-3">
<div class="p-8 md:col-span-1">
<h3 class="heading">
@@ -10,7 +10,7 @@
{{ $t("settings.theme_description") }}
</p>
</div>
<div class="space-y-8 p-8 md:col-span-2">
<div class="p-8 md:col-span-2 space-y-8">
<section>
<h4 class="font-semibold text-secondaryDark">
{{ $t("settings.background") }}
@@ -68,7 +68,7 @@
{{ $t("app.contact_us") }} </SmartLink
>.
</div>
<div class="space-y-4 py-4">
<div class="py-4 space-y-4">
<div class="flex items-center">
<SmartToggle :on="TELEMETRY_ENABLED" @change="showConfirmModal">
{{ $t("settings.telemetry") }}
@@ -109,7 +109,7 @@
{{ $t("settings.interceptor_description") }}
</p>
</div>
<div class="space-y-8 p-8 md:col-span-2">
<div class="p-8 md:col-span-2 space-y-8">
<section>
<h4 class="font-semibold text-secondaryDark">
{{ $t("settings.extensions") }}
@@ -127,7 +127,7 @@
{{ $t("settings.extension_ver_not_reported") }}
</span>
</div>
<div class="flex flex-col space-y-2 py-4">
<div class="flex flex-col py-4 space-y-2">
<span>
<SmartItem
to="https://addons.mozilla.org/en-US/firefox/addon/hoppscotch"
@@ -151,7 +151,7 @@
/>
</span>
</div>
<div class="space-y-4 py-4">
<div class="py-4 space-y-4">
<div class="flex items-center">
<SmartToggle
:on="EXTENSIONS_ENABLED"
@@ -180,7 +180,7 @@
{{ $t("app.proxy_privacy_policy") }} </SmartLink
>.
</div>
<div class="space-y-4 py-4">
<div class="py-4 space-y-4">
<div class="flex items-center">
<SmartToggle
:on="PROXY_ENABLED"
@@ -190,8 +190,8 @@
</SmartToggle>
</div>
</div>
<div class="flex space-x-2 py-4 items-center">
<div class="flex flex-1 flex-col relative">
<div class="flex items-center py-4 space-x-2">
<div class="relative flex flex-col flex-1">
<input
id="url"
v-model="PROXY_URL"