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

refactor(ui): better font weight, icon hover states, etc

Browse Source
This commit is contained in:
liyasthomas
2021-08-13 16:44:02 +05:30
parent 08e3cffff8
commit 11816111ea
94 changed files with 547 additions and 514 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
components/app/Announcement.vue
View File

@@ -1,54 +1,26 @@
<template>
<div class="bg-dividerLight border-b border-divider flex justify-between">
<span class="flex">
<SmartLink
to="https://forms.gle/8yFiEynXB7h477Ns6"
blank
class="
flex
py-2
px-4
transition
relative
items-center
justify-center
group
"
>
<i class="mr-4 material-icons">science</i>
<span class="text-secondaryDark">
<span class="md:hidden"> Beta Layout </span>
<span class="hidden md:inline">
You're currently viewing an experimental beta layout
</span>
<div class="bg-error flex justify-between">
<span
class="
flex
py-2
px-4
transition
relative
items-center
justify-center
group
"
>
<i class="mr-2 material-icons">info_outline</i>
<span class="text-secondaryDark">
<span class="md:hidden">
{{ $t("helpers.offline_short") }}
</span>
<span
class="
border-l border-divider
flex
font-semibold
text-accent
ml-4
pl-4
transition
items-center
justify-center
group-hover:text-accentDark
"
>
<span class="md:hidden"> Give Feedback </span>
<span class="hidden md:inline"> Report a problem </span>
<span class="hidden md:inline">
{{ $t("helpers.offline") }}
</span>
</SmartLink>
<SmartLink
to="https://hoppscotch.io"
class="flex transition items-center justify-center group"
>
<span class="text-secondaryDark">
Switch back to the Hoppscotch website
</span>
</SmartLink>
</span>
</span>
<ButtonSecondary icon="close" />
</div>
</template>

99
components/app/Header.vue
View File

@@ -1,53 +1,56 @@
<template>
<header class="flex flex-1 py-2 px-4 items-center justify-between">
<div class="font-bold flex-shrink-0 inline-flex items-center">
<AppLogo />
</div>
<div class="space-x-2 flex-shrink-0 inline-flex items-center">
<AppGitHubStarButton class="flex mx-2 mt-1" />
<ButtonSecondary
id="installPWA"
v-tippy="{ theme: 'tooltip' }"
:title="$t('header.install_pwa')"
icon="offline_bolt"
@click.native="showInstallPrompt()"
/>
<ButtonPrimary
v-if="currentUser === null"
label="Login"
@click.native="showLogin = true"
/>
<span v-else>
<tippy ref="user" interactive trigger="click" theme="popover" arrow>
<template #trigger>
<ProfilePicture
v-if="currentUser.photoURL"
v-tippy="{ theme: 'tooltip' }"
:url="currentUser.photoURL"
:alt="currentUser.displayName"
:title="currentUser.displayName"
indicator
:indicator-styles="isOnLine ? 'bg-green-500' : 'bg-red-500'"
<div>
<header class="flex flex-1 py-2 px-4 items-center justify-between">
<div class="font-bold flex-shrink-0 inline-flex items-center">
Hoppscotch
</div>
<div class="space-x-2 flex-shrink-0 inline-flex items-center">
<AppGitHubStarButton class="flex mx-2 mt-1" />
<ButtonSecondary
id="installPWA"
v-tippy="{ theme: 'tooltip' }"
:title="$t('header.install_pwa')"
icon="offline_bolt"
@click.native="showInstallPrompt()"
/>
<ButtonPrimary
v-if="currentUser === null"
label="Login"
@click.native="showLogin = true"
/>
<span v-else>
<tippy ref="user" interactive trigger="click" theme="popover" arrow>
<template #trigger>
<ProfilePicture
v-if="currentUser.photoURL"
v-tippy="{ theme: 'tooltip' }"
:url="currentUser.photoURL"
:alt="currentUser.displayName"
:title="currentUser.displayName"
indicator
:indicator-styles="isOnLine ? 'bg-green-500' : 'bg-red-500'"
/>
<ButtonSecondary
v-else
v-tippy="{ theme: 'tooltip' }"
:title="$t('account')"
icon="account_circle"
/>
</template>
<SmartItem
to="/settings"
icon="settings"
:label="$t('navigation.settings')"
@click.native="$refs.user.tippy().hide()"
/>
<ButtonSecondary
v-else
v-tippy="{ theme: 'tooltip' }"
:title="$t('account')"
icon="account_circle"
/>
</template>
<SmartItem
to="/settings"
icon="settings"
:label="$t('navigation.settings')"
@click.native="$refs.user.tippy().hide()"
/>
<FirebaseLogout @confirm-logout="$refs.user.tippy().hide()" />
</tippy>
</span>
</div>
<FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
</header>
<FirebaseLogout @confirm-logout="$refs.user.tippy().hide()" />
</tippy>
</span>
</div>
<FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
</header>
<AppAnnouncement v-if="!isOnLine" />
</div>
</template>
<script>

2
components/app/Search.vue
View File

@@ -34,7 +34,7 @@
v-for="(map, mapIndex) in filteredMappings"
:key="`map-${mapIndex}`"
>
<h5 class="font-normal my-2 text-secondaryLight py-2 px-4">
<h5 class="my-2 text-secondaryLight py-2 px-4">
{{ map.section }}
</h5>
<div

2
components/app/Section.vue
View File

@@ -1,5 +1,5 @@
<template>
<section :id="label.toLowerCase()" class="flex flex-col flex-1">
<section :id="label.toLowerCase()" class="flex flex-col flex-1 relative">
<slot></slot>
</section>
</template>

2
components/app/Share.vue
View File

@@ -24,7 +24,7 @@
</a>
<button class="share-link" @click="copyAppLink">
<span class="font-icon h-6 text-xl w-6">{{ copyIcon }}</span>
<span class="font-medium mt-3">
<span class="mt-3">
{{ $t("app.copy") }}
</span>
</button>

9
components/app/Shortcuts.vue
View File

@@ -15,7 +15,11 @@
>
<h3 class="ml-4 heading">{{ $t("shortcuts") }}</h3>
<div class="flex">
<ButtonSecondary icon="close" @click.native="close()" />
<ButtonSecondary
icon="close"
class="rounded"
@click.native="close()"
/>
</div>
</div>
<div class="border-b border-dividerLight">
@@ -28,7 +32,6 @@
border border-dividerLight
rounded
flex
font-semibold font-mono
w-full
py-2
pr-2
@@ -54,7 +57,7 @@
:key="`map-${mapIndex}`"
class="space-y-4 py-4 px-6"
>
<h5 class="font-bold text-secondaryDark">
<h5 class="font-semibold text-secondaryDark">
{{ map.section }}
</h5>
<div

2
components/app/Sidenav.vue
View File

@@ -130,7 +130,7 @@ export default defineComponent({
span {
@apply mt-2;
@apply font-semibold;
@apply font-font-medium;
}
&.exact-active-link {

1
components/button/Primary.vue
View File

@@ -11,6 +11,7 @@
items-center
justify-center
focus:outline-none
focus-visible:bg-accentDark
"
:class="[
color

16
components/button/Secondary.vue
View File

@@ -4,7 +4,7 @@
:exact="exact"
:blank="blank"
class="
font-semibold
font-medium
py-2
transition
inline-flex
@@ -12,13 +12,14 @@
justify-center
hover:bg-primaryDark
focus:outline-none
focus-visible:bg-primaryDark
"
:class="[
color
? `text-${color}-500 hover:(text-${color}-600 text-${color}-600)`
: 'text-secondary hover:text-secondaryDark focus:text-secondaryDark',
label ? 'px-4' : 'px-2',
rounded ? 'rounded-full' : 'rounded',
label ? 'rounded px-4' : 'px-2',
{ 'rounded-full': rounded },
{ 'opacity-75 cursor-not-allowed': disabled },
{ 'flex-row-reverse': reverse },
{ 'px-6 py-4 text-lg': large },
@@ -53,14 +54,7 @@
<kbd
v-for="(key, index) in shortcut"
:key="`key-${index}`"
class="
bg-dividerLight
rounded
text-secondaryLight
ml-1
px-1
inline-flex
"
class="bg-dividerLight text-secondaryLight ml-1 px-1 inline-flex"
>
{{ key }}
</kbd>

1
components/collections/ChooseType.vue
View File

@@ -21,7 +21,6 @@
bg-primaryLight
border-b border-dividerLight
flex
font-semibold
w-full
py-2
px-4

2
components/collections/SaveRequest.vue
View File

@@ -16,7 +16,7 @@
{{ $t("request.name") }}
</label>
</div>
<label class="font-semibold px-4 pt-4 pb-4">
<label class="px-4 pt-4 pb-4">
{{ $t("collection.select_location") }}
</label>
<CollectionsGraphql

4
components/collections/graphql/Collection.vue
View File

@@ -20,9 +20,7 @@
<span
class="
cursor-pointer
flex
font-semibold
flex-1
flex flex-1
min-w-0
py-2
pr-2

4
components/collections/graphql/Folder.vue
View File

@@ -20,9 +20,7 @@
<span
class="
cursor-pointer
flex
font-semibold
flex-1
flex flex-1
min-w-0
py-2
pr-2

5
components/collections/graphql/Request.vue
View File

@@ -12,7 +12,6 @@
class="
cursor-pointer
flex
font-mono font-bold
mx-2
w-12
justify-center
@@ -28,9 +27,7 @@
<span
class="
cursor-pointer
flex
font-semibold
flex-1
flex flex-1
min-w-0
py-2
pr-2

2
components/collections/graphql/index.vue
View File

@@ -16,7 +16,6 @@
bg-primaryLight
border-b border-dividerLight
flex
font-semibold font-mono
w-full
py-2
pr-2
@@ -30,6 +29,7 @@
<ButtonSecondary
icon="add"
:label="$t('new')"
class="rounded-none"
@click.native="displayModalAdd(true)"
/>
<ButtonSecondary

35
components/collections/index.vue
View File

@@ -16,7 +16,6 @@
bg-primaryLight
border-b border-dividerLight
flex
font-semibold font-mono
w-full
py-2
pr-2
@@ -42,6 +41,7 @@
"
v-tippy="{ theme: 'tooltip' }"
disabled
class="rounded-none"
icon="add"
:title="$t('team.no_access')"
:label="$t('new')"
@@ -50,19 +50,29 @@
v-else
icon="add"
:label="$t('new')"
class="rounded-none"
@click.native="displayModalAdd(true)"
/>
<ButtonSecondary
v-if="!saveRequest"
v-tippy="{ theme: 'tooltip' }"
:disabled="
collectionsType.type == 'team-collections' &&
collectionsType.selectedTeam == undefined
"
icon="import_export"
:title="$t('modal.import_export')"
@click.native="displayModalImportExport(true)"
/>
<span class="flex">
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
to="https://docs.hoppscotch.io/"
blank
:title="$t('wiki')"
icon="help_outline"
/>
<ButtonSecondary
v-if="!saveRequest"
v-tippy="{ theme: 'tooltip' }"
:disabled="
collectionsType.type == 'team-collections' &&
collectionsType.selectedTeam == undefined
"
icon="import_export"
:title="$t('modal.import_export')"
@click.native="displayModalImportExport(true)"
/>
</span>
</div>
</div>
<div class="flex flex-col">
@@ -99,7 +109,6 @@
v-if="collections.length === 0"
class="flex flex-col text-secondaryLight p-4 items-center justify-center"
>
<i class="opacity-75 pb-2 material-icons">create_new_folder</i>
<span class="text-center pb-4">
{{ $t("empty.collections") }}
</span>

4
components/collections/my/Collection.vue
View File

@@ -20,9 +20,7 @@
<span
class="
cursor-pointer
flex
font-semibold
flex-1
flex flex-1
min-w-0
py-2
pr-2

4
components/collections/my/Folder.vue
View File

@@ -20,9 +20,7 @@
<span
class="
cursor-pointer
flex
font-semibold
flex-1
flex flex-1
min-w-0
py-2
pr-2

5
components/collections/my/Request.vue
View File

@@ -12,7 +12,6 @@
class="
cursor-pointer
flex
font-mono font-bold
mx-2
w-12
justify-center
@@ -36,9 +35,7 @@
<span
class="
cursor-pointer
flex
font-semibold
flex-1
flex flex-1
min-w-0
py-2
pr-2

4
components/collections/teams/Collection.vue
View File

@@ -12,9 +12,7 @@
<span
class="
cursor-pointer
flex
font-semibold
flex-1
flex flex-1
min-w-0
py-2
pr-2

4
components/collections/teams/Folder.vue
View File

@@ -12,9 +12,7 @@
<span
class="
cursor-pointer
flex
font-semibold
flex-1
flex flex-1
min-w-0
py-2
pr-2

5
components/collections/teams/Request.vue
View File

@@ -5,7 +5,6 @@
class="
cursor-pointer
flex
font-mono font-bold
mx-2
w-12
justify-center
@@ -29,9 +28,7 @@
<span
class="
cursor-pointer
flex
font-semibold
flex-1
flex flex-1
min-w-0
py-2
pr-2

12
components/environments/Edit.vue
View File

@@ -17,7 +17,7 @@
</label>
</div>
<div class="flex flex-1 justify-between items-center">
<label for="variableList" class="font-semibold p-4">
<label for="variableList" class="p-4">
{{ $t("env_variable_list") }}
</label>
<div class="flex">
@@ -25,12 +25,14 @@
v-tippy="{ theme: 'tooltip' }"
:title="$t('clear')"
:icon="clearIcon"
class="rounded"
@click.native="clearContent()"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
icon="add"
:title="$t('add.new')"
class="rounded"
@click.native="addEnvironmentVariable"
/>
</div>
@@ -45,9 +47,7 @@
v-model="variable.key"
class="
bg-primaryLight
flex
font-semibold font-mono
flex-1
flex flex-1
py-2
px-4
truncate
@@ -60,9 +60,7 @@
v-model="variable.value"
class="
bg-primaryLight
flex
font-semibold font-mono
flex-1
flex flex-1
py-2
px-4
truncate

4
components/environments/Environment.vue
View File

@@ -9,9 +9,7 @@
<span
class="
cursor-pointer
flex
font-semibold
flex-1
flex flex-1
min-w-0
py-2
pr-2

2
components/environments/index.vue
View File

@@ -18,7 +18,6 @@
bg-primaryLight
border-b border-dividerLight
flex
font-semibold
w-full
py-2
px-4
@@ -43,6 +42,7 @@
<ButtonSecondary
icon="add"
:label="$t('new')"
class="rounded-none"
@click.native="displayModalAdd(true)"
/>
<ButtonSecondary

2
components/firebase/Login.vue
View File

@@ -64,7 +64,7 @@
<i class="text-accent material-icons !text-4xl">
mark_email_unread
</i>
<h3 class="font-bold my-2 text-center text-lg">
<h3 class="my-2 text-center text-lg">
{{ $t("auth.we_sent_magic_link") }}
</h3>
<p class="text-center">

8
components/graphql/Field.vue
View File

@@ -1,9 +1,6 @@
<template>
<div>
<div
class="font-semibold field-title"
:class="{ 'field-highlighted': isHighlighted }"
>
<div class="field-title" :class="{ 'field-highlighted': isHighlighted }">
{{ fieldName }}
<span v-if="fieldArgs.length > 0">
(
@@ -32,7 +29,6 @@
v-if="gqlField.isDeprecated"
class="
rounded
font-semibold
bg-yellow-200
my-1
text-black
@@ -48,7 +44,7 @@
<h5 class="my-2">Arguments:</h5>
<div class="border-divider border-l-2 pl-4">
<div v-for="(field, index) in fieldArgs" :key="`field-${index}`">
<span class="font-semibold">
<span>
{{ field.name }}:
<GraphqlTypeLink
:gql-type="field.type"

1
components/graphql/Request.vue
View File

@@ -11,7 +11,6 @@
bg-primaryLight
border border-divider
rounded-l
font-semibold font-mono
text-secondaryDark
w-full
py-2

38
components/graphql/RequestOptions.vue
View File

@@ -17,7 +17,7 @@
gqlRunQuery
"
>
<label for="gqlQuery" class="font-semibold">
<label class="font-semibold text-secondaryLight">
{{ $t("query") }}
</label>
<div class="flex">
@@ -25,7 +25,7 @@
:label="$t('run')"
:shortcut="[getSpecialKey(), 'Enter']"
icon="play_arrow"
class="!text-accent"
class="rounded-none !text-accent"
@click.native="runQuery()"
/>
<ButtonSecondary
@@ -83,7 +83,7 @@
justify-between
"
>
<label class="font-semibold">
<label class="font-semibold text-secondaryLight">
{{ $t("variables") }}
</label>
<div class="flex">
@@ -126,7 +126,7 @@
justify-between
"
>
<label class="font-semibold">
<label class="font-semibold text-secondaryLight">
{{ $t("headers") }}
</label>
<div class="flex">
@@ -163,9 +163,8 @@
styles="
bg-primaryLight
flex
font-semibold font-mono
flex-1
py-2
py-1
px-4
truncate
focus:outline-none
@@ -181,9 +180,7 @@
<input
class="
bg-primaryLight
flex
font-semibold font-mono
w-full
flex flex-1
py-2
px-4
truncate
@@ -248,13 +245,13 @@
justify-center
"
>
<i class="opacity-75 pb-2 material-icons">post_add</i>
<span class="text-center pb-4">
{{ $t("empty.headers") }}
</span>
<ButtonSecondary
:label="$t('add.new')"
outline
icon="add"
@click.native="addRequestHeader"
/>
</div>
@@ -273,6 +270,7 @@
<script lang="ts">
import {
defineComponent,
onMounted,
PropType,
ref,
useContext,
@@ -335,8 +333,24 @@ export default defineComponent({
const showSaveRequestModal = ref(false)
const schema = useReadonlyStream(props.conn.schemaString$, "")
watch(schema, () => {
console.log(schema.value)
watch(
headers,
() => {
console.log("changed")
if (
(headers.value[headers.value.length - 1]?.key !== "" ||
headers.value[headers.value.length - 1]?.value !== "") &&
headers.value.length
)
addRequestHeader()
},
{ deep: true }
)
onMounted(() => {
if (!headers.value?.length) {
addRequestHeader()
}
})
const copyQuery = () => {

6
components/graphql/Response.vue
View File

@@ -14,7 +14,7 @@
justify-between
"
>
<label class="font-semibold" for="responseField">
<label class="font-semibold text-secondaryLight">
{{ $t("response") }}
</label>
<div class="flex">
@@ -59,7 +59,7 @@
justify-center
"
>
<div class="flex space-x-2 pb-8">
<div class="flex space-x-2 pb-4">
<div class="flex flex-col space-y-4 items-end">
<span class="flex flex-1 items-center">
{{ $t("shortcut.send_request") }}
@@ -94,8 +94,10 @@
<ButtonSecondary
:label="$t('documentation')"
to="https://docs.hoppscotch.io"
icon="open_in_new"
blank
outline
reverse
/>
</div>
</AppSection>

3
components/graphql/Sidebar.vue
View File

@@ -20,7 +20,6 @@
class="
bg-primaryLight
flex
font-semibold font-mono
w-full
py-2
pr-2
@@ -150,7 +149,7 @@
justify-between
"
>
<label class="font-semibold">
<label class="font-semibold text-secondaryLight">
{{ $t("schema") }}
</label>
<div class="flex">

5
components/graphql/Type.vue
View File

@@ -1,9 +1,6 @@
<template>
<div :id="`type_${gqlType.name}`" class="p-4">
<div
class="font-semibold type-title"
:class="{ 'text-accent': isHighlighted }"
>
<div class="type-title" :class="{ 'text-accent': isHighlighted }">
<span v-if="isInput" class="text-accent">input </span>
<span v-else-if="isInterface" class="text-accent">interface </span>
<span v-else-if="isEnum" class="text-accent">enum </span>

1
components/graphql/TypeLink.vue
View File

@@ -1,7 +1,6 @@
<template>
<span
:class="isScalar ? 'text-secondaryLight' : 'cursor-pointer text-accent'"
class="font-mono"
@click="jumpToType"
>
{{ typeString }}

13
components/history/graphql/Card.vue
View File

@@ -4,9 +4,7 @@
<span
class="
cursor-pointer
flex
font-semibold
flex-1
flex flex-1
min-w-0
py-2
pr-2
@@ -51,14 +49,7 @@
<span
v-for="(line, index) in query"
:key="`line-${index}`"
class="
cursor-pointer
font-mono
text-secondaryLight
px-4
whitespace-pre
truncate
"
class="cursor-pointer text-secondaryLight px-4 whitespace-pre truncate"
data-testid="restore_history_entry"
@click="useEntry"
>{{ line }}</span

1
components/history/index.vue
View File

@@ -17,7 +17,6 @@
class="
bg-primaryLight
flex
font-semibold font-mono
w-full
py-2
pr-2

15
components/history/rest/Card.vue
View File

@@ -1,16 +1,7 @@
<template>
<div class="flex items-center group">
<span
class="
cursor-pointer
flex
font-mono font-bold
mx-2
w-12
justify-center
items-center
truncate
"
class="cursor-pointer flex mx-2 w-12 justify-center items-center truncate"
:class="entryStatus.className"
data-testid="restore_history_entry"
:title="duration"
@@ -21,9 +12,7 @@
<span
class="
cursor-pointer
flex
font-semibold
flex-1
flex flex-1
min-w-0
py-2
pr-2

97
components/http/Auth.vue → components/http/Authorization.vue
View File

@@ -1,21 +1,22 @@
<template>
<div>
<div class="flex flex-1 p-2 items-center justify-between">
<span class="flex">
<span
class="
border
rounded-r-none rounded
border-divider border-r-0
font-semibold
text-secondaryLight
py-2
px-4
py-2
"
>
<div
class="
bg-primary
border-b border-dividerLight
flex flex-1
top-upperSecondaryStickyFold
pl-4
z-10
sticky
items-center
justify-between
"
>
<span class="flex items-center">
<label class="font-semibold text-secondaryLight">
{{ $t("authorization_type") }}
</span>
</label>
<tippy
ref="authTypeOptions"
interactive
@@ -27,9 +28,8 @@
<div class="flex">
<span class="select-wrapper">
<ButtonSecondary
class="rounded-l-none pr-8"
:label="authType.charAt(0).toUpperCase() + authType.slice(1)"
outline
class="rounded-none ml-2 pr-8"
:label="authName"
/>
</span>
</div>
@@ -38,20 +38,23 @@
label="None"
@click.native="
authType = 'none'
authName = 'None'
$refs.authTypeOptions.tippy().hide()
"
/>
<SmartItem
label="Basic"
label="Basic Auth"
@click.native="
authType = 'basic'
authName = 'Basic Auth'
$refs.authTypeOptions.tippy().hide()
"
/>
<SmartItem
label="Bearer"
label="Bearer Token"
@click.native="
authType = 'bearer'
authName = 'Bearer Token'
$refs.authTypeOptions.tippy().hide()
"
/>
@@ -60,11 +63,18 @@
<div class="flex">
<SmartToggle
:on="authActive"
class="mr-2 px-2"
class="px-2"
@change="authActive = !authActive"
>
{{ authActive ? $t("enabled") : $t("disabled") }}
</SmartToggle>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
to="https://docs.hoppscotch.io/"
blank
:title="$t('wiki')"
icon="help_outline"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('clear')"
@@ -73,6 +83,22 @@
/>
</div>
</div>
<div
v-if="authType === 'none'"
class="flex flex-col text-secondaryLight p-4 items-center justify-center"
>
<span class="text-center pb-4">
{{ $t("empty.authorization") }}
</span>
<ButtonSecondary
outline
:label="$t('action.learn_more')"
to="https://docs.hoppscotch.io"
blank
icon="open_in_new"
reverse
/>
</div>
<div v-if="authType === 'basic'" class="space-y-2 p-2">
<div class="flex relative">
<input
@@ -101,10 +127,21 @@
<ButtonSecondary
:icon="passwordFieldType === 'text' ? 'visibility' : 'visibility_off'"
outline
class="ml-2"
class="rounded ml-2"
@click.native="switchVisibility"
/>
</div>
<div class="p-2">
<div class="text-secondaryLight pb-2">
{{ $t("helpers.authorization") }}
</div>
<SmartAnchor
class="link"
:label="$t('action.learn_more')"
to="https://docs.hoppscotch.io/"
blank
/>
</div>
</div>
<div v-if="authType === 'bearer'" class="space-y-2 p-2">
<div class="flex relative">
@@ -117,6 +154,17 @@
/>
<label for="bearer_token"> Token </label>
</div>
<div class="p-2">
<div class="text-secondaryLight pb-2">
{{ $t("helpers.authorization") }}
</div>
<SmartAnchor
class="link"
:label="$t('action.learn_more')"
to="https://docs.hoppscotch.io/"
blank
/>
</div>
</div>
<!-- <button
v-if="authType === 'OAuth 2.0'"
@@ -157,11 +205,12 @@ export default defineComponent({
setup() {
const auth = useStream(
restAuth$,
{ authType: "none", authActive: true },
{ authType: "none", authName: "None", authActive: true },
setRESTAuth
)
const authType = pluckRef(auth, "authType")
const authName = pluckRef(auth, "authName")
const authActive = pluckRef(auth, "authActive")
const basicUsername = pluckRef(auth as Ref<HoppRESTAuthBasic>, "username")
@@ -176,6 +225,7 @@ export default defineComponent({
const clearContent = () => {
auth.value = {
authType: "none",
authName: "None",
authActive: true,
}
}
@@ -189,6 +239,7 @@ export default defineComponent({
return {
auth,
authType,
authName,
authActive,
basicUsername,
basicPassword,

31
components/http/Body.vue
View File

@@ -1,21 +1,19 @@
<template>
<div>
<div class="flex flex-1 p-2 items-center justify-between">
<span class="flex">
<span
class="
border
rounded-r-none rounded
border-divider border-r-0
font-semibold
text-secondaryLight
py-2
px-4
py-2
"
>
<div
class="
bg-primary
border-b border-dividerLight
flex flex-1
pl-4 pl-4
items-center
justify-between
"
>
<span class="flex items-center">
<label class="font-semibold text-secondaryLight">
{{ $t("content_type") }}
</span>
</label>
<tippy
ref="contentTypeOptions"
interactive
@@ -28,8 +26,7 @@
<span class="select-wrapper">
<ButtonSecondary
:label="contentType"
outline
class="rounded-l-none pr-8"
class="rounded-none ml-2 pr-8"
/>
</span>
</div>

25
components/http/BodyParameters.vue
View File

@@ -13,10 +13,17 @@
justify-between
"
>
<label class="font-semibold">
<label>
{{ $t("request_body") }}
</label>
<div class="flex">
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
to="https://docs.hoppscotch.io/"
blank
:title="$t('wiki')"
icon="help_outline"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('clear')"
@@ -44,7 +51,7 @@
styles="
bg-primaryLight
flex
font-semibold font-mono
flex-1
py-1
px-4
@@ -62,9 +69,7 @@
v-else
class="
bg-primaryLight
flex
font-semibold font-mono
flex-1
flex flex-1
py-2
px-4
truncate
@@ -89,7 +94,7 @@
styles="
bg-primaryLight
flex
font-semibold font-mono
flex-1
py-1
px-4
@@ -107,9 +112,7 @@
v-if="!EXPERIMENTAL_URL_BAR_ENABLED && !requestBodyParamIsFile(index)"
class="
bg-primaryLight
flex
font-semibold font-mono
flex-1
flex flex-1
py-2
px-4
truncate
@@ -195,13 +198,13 @@
v-if="bodyParams.length === 0"
class="flex flex-col text-secondaryLight p-4 items-center justify-center"
>
<i class="opacity-75 pb-2 material-icons">post_add</i>
<span class="text-center pb-4">
{{ $t("empty.parameters") }}
{{ $t("empty.body") }}
</span>
<ButtonSecondary
:label="$t('add.new')"
outline
icon="add"
@click.native="addBodyParam"
/>
</div>

6
components/http/CodegenModal.vue
View File

@@ -6,7 +6,7 @@
>
<template #body>
<div class="flex flex-col px-2">
<label for="requestType" class="font-semibold px-4 pb-4">
<label for="requestType" class="px-4 pb-4">
{{ $t("request.choose_language") }}
</label>
<div class="flex flex-1">
@@ -22,7 +22,7 @@
<ButtonSecondary
:label="codegens.find((x) => x.id === codegenType).name"
outline
class="w-full"
class="pr-8"
/>
</span>
</template>
@@ -40,7 +40,7 @@
</tippy>
</div>
<div class="flex flex-1 justify-between">
<label for="generatedCode" class="font-semibold px-4 pt-4 pb-4">
<label for="generatedCode" class="px-4 pt-4 pb-4">
{{ $t("request.generated_code") }}
</label>
</div>

18
components/http/Headers.vue
View File

@@ -13,10 +13,17 @@
justify-between
"
>
<label for="headerList" class="font-semibold">
<label class="font-semibold text-secondaryLight">
{{ $t("header_list") }}
</label>
<div class="flex">
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
to="https://docs.hoppscotch.io/"
blank
:title="$t('wiki')"
icon="help_outline"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('clear')"
@@ -46,13 +53,13 @@
styles="
bg-primaryLight
flex
font-semibold font-mono
flex-1
py-1
px-4
truncate
focus:outline-none
"
:class="{ '!flex flex-1': EXPERIMENTAL_URL_BAR_ENABLED }"
@input="
updateHeader(index, {
key: $event,
@@ -68,7 +75,6 @@
styles="
bg-primaryLight
flex
font-semibold font-mono
flex-1
py-1
px-4
@@ -86,9 +92,7 @@
v-else
class="
bg-primaryLight
flex
font-semibold font-mono
flex-1
flex flex-1
py-2
px-4
truncate
@@ -146,13 +150,13 @@
v-if="headers$.length === 0"
class="flex flex-col text-secondaryLight p-4 items-center justify-center"
>
<i class="opacity-75 pb-2 material-icons">post_add</i>
<span class="text-center pb-4">
{{ $t("empty.headers") }}
</span>
<ButtonSecondary
outline
:label="$t('add.new')"
icon="add"
@click.native="addHeader"
/>
</div>

3
components/http/ImportCurl.vue
View File

@@ -5,7 +5,7 @@
<textarea
id="import-curl"
v-model="curl"
class="font-mono textarea floating-input"
class="textarea floating-input"
autofocus
rows="8"
placeholder=" "
@@ -113,6 +113,7 @@ export default defineComponent({
testScript: "",
auth: {
authType: "none",
authName: "None",
authActive: true,
},
body: {

21
components/http/Parameters.vue
View File

@@ -13,10 +13,17 @@
justify-between
"
>
<label class="font-semibold">
<label class="font-semibold text-secondaryLight">
{{ $t("parameter_list") }}
</label>
<div class="flex">
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
to="https://docs.hoppscotch.io/"
blank
:title="$t('wiki')"
icon="help_outline"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('clear_all')"
@@ -44,7 +51,6 @@
styles="
bg-primaryLight
flex
font-semibold font-mono
flex-1
py-1
px-4
@@ -62,9 +68,7 @@
v-else
class="
bg-primaryLight
flex
font-semibold font-mono
flex-1
flex flex-1
py-2
px-4
truncate
@@ -89,7 +93,6 @@
styles="
bg-primaryLight
flex
font-semibold font-mono
flex-1
py-1
px-4
@@ -107,9 +110,7 @@
v-else
class="
bg-primaryLight
flex
font-semibold font-mono
flex-1
flex flex-1
py-2
px-4
truncate
@@ -167,12 +168,12 @@
v-if="params$.length === 0"
class="flex flex-col text-secondaryLight p-4 items-center justify-center"
>
<i class="opacity-75 pb-2 material-icons">post_add</i>
<span class="text-center pb-4">
{{ $t("empty.parameters") }}
</span>
<ButtonSecondary
:label="$t('add.new')"
icon="add"
outline
@click.native="addParam"
/>

52
components/http/PreRequestScript.vue
View File

@@ -13,7 +13,7 @@
justify-between
"
>
<label class="font-semibold">
<label>
{{ $t("javascript_code") }}
</label>
<ButtonSecondary
@@ -24,18 +24,44 @@
icon="help_outline"
/>
</div>
<SmartJsEditor
v-model="preRequestScript"
:options="{
maxLines: Infinity,
minLines: 16,
fontSize: '12px',
autoScrollEditorIntoView: true,
showPrintMargin: false,
useWorker: false,
}"
complete-mode="pre"
/>
<div class="flex">
<div class="border-r border-dividerLight w-2/3">
<SmartJsEditor
v-model="preRequestScript"
:options="{
maxLines: Infinity,
minLines: 16,
fontSize: '12px',
autoScrollEditorIntoView: true,
showPrintMargin: false,
useWorker: false,
}"
complete-mode="pre"
/>
</div>
<div
class="
h-full
max-w-1/3
top-upperTertiaryStickyFold
min-w-46
p-4
z-9
sticky
overflow-auto
"
>
<div class="text-secondaryLight pb-2">
{{ $t("helpers.pre_request_script") }}
</div>
<SmartAnchor
class="link"
:label="$t('action.learn_more')"
to="https://github.com/hoppscotch/hoppscotch/wiki/Pre-Request-Scripts"
blank
/>
</div>
</div>
</AppSection>
</template>

21
components/http/RawBody.vue
View File

@@ -13,10 +13,23 @@
justify-between
"
>
<label for="rawBody" class="font-semibold">
<label for="rawBody">
{{ $t("raw_request_body") }}
</label>
<div class="flex">
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
to="https://docs.hoppscotch.io/"
blank
:title="$t('wiki')"
icon="help_outline"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('clear')"
icon="clear_all"
@click.native="clearContent('rawParams', $event)"
/>
<ButtonSecondary
v-if="contentType.endsWith('json')"
ref="prettifyRequest"
@@ -40,12 +53,6 @@
type="file"
@change="uploadPayload"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('clear')"
icon="clear_all"
@click.native="clearContent('rawParams', $event)"
/>
</div>
</div>
<div class="relative">

16
components/http/Request.vue
View File

@@ -18,13 +18,14 @@
rounded-l
cursor-pointer
flex
font-semibold font-mono
font-semibold
text-secondaryDark
py-2
px-4
transition
w-28
truncate
hover:border-dividerDark
focus:border-accent focus:outline-none
"
:value="newMethod"
@@ -36,7 +37,6 @@
v-for="(method, index) in methods"
:key="`method-${index}`"
:label="method"
class="font-mono"
@click.native="onSelectMethod(method)"
/>
</tippy>
@@ -51,13 +51,13 @@
bg-primaryLight
border border-divider
flex
font-semibold font-mono
flex-1
text-secondaryDark
py-1
px-4
transition
truncate
hover:border-dividerDark
focus:outline-none focus:border-accent
"
@enter="newSendRequest()"
@@ -70,9 +70,7 @@
class="
bg-primaryLight
border border-divider
flex
font-semibold font-mono
flex-1
flex flex-1
text-secondaryDark
py-2
px-4
@@ -157,7 +155,7 @@
<ButtonSecondary
icon="keyboard_arrow_down"
outline
class="rounded-l-none"
class="rounded-r"
/>
</template>
<input
@@ -236,14 +234,14 @@ import { useSetting } from "~/newstore/settings"
const methods = [
"GET",
"HEAD",
"POST",
"PUT",
"PATCH",
"DELETE",
"HEAD",
"CONNECT",
"OPTIONS",
"TRACE",
"PATCH",
"CUSTOM",
]

12
components/http/ResponseMeta.vue
View File

@@ -9,7 +9,7 @@
justify-center
"
>
<div class="flex space-x-2 pb-8">
<div class="flex space-x-2 pb-4">
<div class="flex flex-col space-y-4 items-end">
<span class="flex flex-1 items-center">
{{ $t("shortcut.send_request") }}
@@ -44,8 +44,10 @@
<ButtonSecondary
:label="$t('documentation')"
to="https://docs.hoppscotch.io"
icon="open_in_new"
blank
outline
reverse
/>
</div>
<div v-else>
@@ -55,18 +57,18 @@
<div
v-else
:class="statusCategory.className"
class="font-mono font-semibold space-x-4"
class="font-semibold space-x-4"
>
<span v-if="response.statusCode">
<span class="text-secondaryDark"> Status: </span>
<span class="text-secondary"> Status: </span>
{{ response.statusCode || $t("waiting_send_req") }}
</span>
<span v-if="response.meta && response.meta.responseDuration">
<span class="text-secondaryDark"> Time: </span>
<span class="text-secondary"> Time: </span>
{{ `${response.meta.responseDuration} ms` }}
</span>
<span v-if="response.meta && response.meta.responseSize">
<span class="text-secondaryDark"> Size: </span>
<span class="text-secondary"> Size: </span>
{{ `${response.meta.responseSize} B` }}
</span>
</div>

14
components/http/TestResult.vue
View File

@@ -19,7 +19,7 @@
justify-between
"
>
<label class="font-semibold"> Test Report </label>
<label> Test Report </label>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('clear')"
@@ -35,13 +35,13 @@
:progress="(failedTests / totalTests) * 100"
/>
<div class="ml-2">
<span v-if="failedTests" class="font-semibold text-red-500">
<span v-if="failedTests" class="text-red-500">
{{ failedTests }} failing,
</span>
<span v-if="passedTests" class="font-semibold text-green-500">
<span v-if="passedTests" class="text-green-500">
{{ passedTests }} successful,
</span>
<span class="font-semibold"> out of {{ totalTests }} tests. </span>
<span> out of {{ totalTests }} tests. </span>
</div>
</div>
<div class="divide-y divide-dividerLight">
@@ -57,7 +57,6 @@
class="
border-b border-dividerLight
flex
font-semibold
text-secondaryDark
py-2
px-4
@@ -83,10 +82,7 @@
>
{{ result.status === "pass" ? "check" : "close" }}
</i>
<span
v-if="result.message"
class="font-semibold text-secondaryDark"
>
<span v-if="result.message" class="text-secondaryDark">
{{ result.message }}
</span>
<span class="text-secondaryLight">

52
components/http/Tests.vue
View File

@@ -13,7 +13,7 @@
justify-between
"
>
<label class="font-semibold">
<label>
{{ $t("javascript_code") }}
</label>
<ButtonSecondary
@@ -24,18 +24,44 @@
icon="help_outline"
/>
</div>
<SmartJsEditor
v-model="testScript"
:options="{
maxLines: Infinity,
minLines: 16,
fontSize: '12px',
autoScrollEditorIntoView: true,
showPrintMargin: false,
useWorker: false,
}"
complete-mode="test"
/>
<div class="flex">
<div class="border-r border-dividerLight w-2/3">
<SmartJsEditor
v-model="testScript"
:options="{
maxLines: Infinity,
minLines: 16,
fontSize: '12px',
autoScrollEditorIntoView: true,
showPrintMargin: false,
useWorker: false,
}"
complete-mode="test"
/>
</div>
<div
class="
h-full
max-w-1/3
top-upperTertiaryStickyFold
min-w-46
p-4
z-9
sticky
overflow-auto
"
>
<div class="text-secondaryLight pb-2">
{{ $t("helpers.post_request_tests") }}
</div>
<SmartAnchor
class="link"
:label="$t('action.learn_more')"
to="https://github.com/hoppscotch/hoppscotch/wiki/Post-Request-Tests"
blank
/>
</div>
</div>
</AppSection>
</template>

4
components/landing/CTA.vue
View File

@@ -19,9 +19,7 @@
>
<i class="text-accent text-3xl material-icons">{{ cta.icon }}</i>
<div class="flex-grow">
<h2
class="font-semibold mt-4 text-lg text-secondaryDark mb-2 transition"
>
<h2 class="mt-4 text-lg text-secondaryDark mb-2 transition">
{{ cta.title }}
</h2>
<p>

14
components/landing/Features.vue
View File

@@ -1,9 +1,7 @@
<template>
<div class="flex flex-col p-4">
<div class="flex flex-col items-center">
<p class="font-semibold my-4 text-center text-accent tracking-widest">
FEATURES
</p>
<p class="my-4 text-center text-accent tracking-widest">FEATURES</p>
</div>
<div class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
<div
@@ -13,15 +11,7 @@
>
<i class="text-accent text-4xl material-icons">{{ feature.icon }}</i>
<div class="flex-grow">
<h2
class="
font-semibold
mt-4
text-lg text-secondaryDark
mb-2
transition
"
>
<h2 class="mt-4 text-lg text-secondaryDark mb-2 transition">
{{ feature.title }}
</h2>
<p>

8
components/landing/Footer.vue
View File

@@ -2,7 +2,7 @@
<footer class="flex flex-col p-6">
<nav class="grid gap-4 grid-cols-2 md:grid-cols-4">
<div class="flex flex-col space-y-2">
<h4 class="font-semibold my-2">Hoppscotch</h4>
<h4 class="my-2">Hoppscotch</h4>
<ul class="space-y-4">
<li>
<SmartChangeLanguage />
@@ -13,7 +13,7 @@
</ul>
</div>
<div class="flex flex-col space-y-2">
<h4 class="font-semibold my-2">Solutions</h4>
<h4 class="my-2">Solutions</h4>
<ul class="space-y-2">
<li
v-for="(item, index) in navigation.solutions"
@@ -28,7 +28,7 @@
</ul>
</div>
<div class="flex flex-col space-y-2">
<h4 class="font-semibold my-2">Platform</h4>
<h4 class="my-2">Platform</h4>
<ul class="space-y-2">
<li
v-for="(item, index) in navigation.platform"
@@ -43,7 +43,7 @@
</ul>
</div>
<div class="flex flex-col space-y-2">
<h4 class="font-semibold my-2">Company</h4>
<h4 class="my-2">Company</h4>
<ul class="space-y-2">
<li
v-for="(item, index) in navigation.company"

2
components/landing/Hero.vue
View File

@@ -3,7 +3,6 @@
<div class="flex flex-col mt-16 items-center justify-center">
<h2
class="
font-extrabold
text-accent text-center
leading-none
tracking-tighter
@@ -16,7 +15,6 @@
</h2>
<h3
class="
font-extrabold
my-4
text-center text-secondaryDark
leading-none

4
components/landing/Stats.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="flex font-mono space-x-16 p-6">
<div class="flex space-x-16 p-6">
<div v-for="(stat, index) in stats" :key="`stat-${index}`">
<span class="font-bold text-xl">
<span class="text-xl">
{{ stat.count }}<span class="text-secondaryLight">+</span>
</span>
<br />

4
components/landing/Users.vue
View File

@@ -1,9 +1,7 @@
<template>
<div class="bg-primaryLight rounded flex flex-col mx-6 p-4">
<div class="flex flex-col items-center">
<p class="font-semibold my-4 text-center tracking-widest">
EMPOWERING DEVELOPERS FROM
</p>
<p class="my-4 text-center tracking-widest">EMPOWERING DEVELOPERS FROM</p>
</div>
<div class="grid gap-4 grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
<div

30
components/lenses/HeadersRenderer.vue
View File

@@ -1,41 +1,19 @@
<template>
<div class="font-mono p-2">
<div class="p-2">
<div
v-for="(header, index) in headers"
:key="`header-${index}`"
class="flex items-center"
>
<span
class="
flex
font-semibold
min-w-0
p-2
transition
group-hover:text-secondaryDark
"
>
<span class="flex min-w-0 p-2 transition group-hover:text-secondaryDark">
<span class="rounded select-all truncate">
{{ header.key }}
</span>
</span>
<span class="flex mx-2 justify-center items-center truncate"> → </span>
<span
class="
flex
font-mono font-bold
mx-2
justify-center
items-center
truncate
"
>
→
</span>
<span
class="
flex
font-semibold
flex-1
flex flex-1
min-w-0
p-2
transition

3
components/lenses/renderers/HTMLLensRenderer.vue
View File

@@ -6,13 +6,14 @@
border-b border-dividerLight
flex flex-1
top-lowerSecondaryStickyFold
pl-4
z-10
sticky
items-center
justify-between
"
>
<label for="body" class="font-semibold px-4">
<label class="font-semibold text-secondaryLight">
{{ $t("response_body") }}
</label>
<div class="flex">

3
components/lenses/renderers/ImageLensRenderer.vue
View File

@@ -6,13 +6,14 @@
border-b border-dividerLight
flex flex-1
top-lowerSecondaryStickyFold
pl-4
z-10
sticky
items-center
justify-between
"
>
<label for="body" class="font-semibold px-4">
<label class="font-semibold text-secondaryLight">
{{ $t("response_body") }}
</label>
<div class="flex">

3
components/lenses/renderers/JSONLensRenderer.vue
View File

@@ -6,13 +6,14 @@
border-b border-dividerLight
flex flex-1
top-lowerSecondaryStickyFold
pl-4
z-10
sticky
items-center
justify-between
"
>
<label for="body" class="font-semibold px-4">
<label class="font-semibold text-secondaryLight">
{{ $t("response_body") }}
</label>
<div class="flex">

3
components/lenses/renderers/RawLensRenderer.vue
View File

@@ -6,13 +6,14 @@
border-b border-dividerLight
flex flex-1
top-lowerSecondaryStickyFold
pl-4
z-10
sticky
items-center
justify-between
"
>
<label for="body" class="font-semibold px-4">
<label class="font-semibold text-secondaryLight">
{{ $t("response_body") }}
</label>
<div class="flex">

3
components/lenses/renderers/XMLLensRenderer.vue
View File

@@ -6,13 +6,14 @@
border-b border-dividerLight
flex flex-1
top-lowerSecondaryStickyFold
pl-4
z-10
sticky
items-center
justify-between
"
>
<label for="body" class="font-semibold px-4">
<label class="font-semibold text-secondaryLight">
{{ $t("response_body") }}
</label>
<div class="flex">

5
components/realtime/Log.vue
View File

@@ -13,7 +13,9 @@
justify-between
"
>
<label for="log" class="font-semibold py-2">{{ title }}</label>
<label for="log" class="font-semibold text-secondaryLight py-2">
{{ title }}
</label>
</div>
<div ref="log" name="log" class="realtime-log">
<span v-if="log" class="space-y-2">
@@ -65,7 +67,6 @@ export default {
&,
span {
@apply font-mono font-semibold;
@apply select-text;
}

7
components/realtime/Mqtt.vue
View File

@@ -16,7 +16,6 @@
bg-primaryLight
border border-divider
rounded-l
font-semibold font-mono
text-secondaryDark
w-full
py-2
@@ -56,7 +55,7 @@
>
<AppSection label="messages">
<div class="flex flex-col flex-1 p-4 inline-flex">
<label for="pub_topic" class="font-semibold">
<label for="pub_topic" class="font-semibold text-secondaryLight">
{{ $t("mqtt.topic") }}
</label>
</div>
@@ -71,7 +70,7 @@
/>
</div>
<div class="flex flex-1 p-4 items-center justify-between">
<label for="mqtt-message" class="font-semibold">{{
<label for="mqtt-message" class="font-semibold text-secondaryLight">{{
$t("communication")
}}</label>
</div>
@@ -102,7 +101,7 @@
inline-flex
"
>
<label for="sub_topic" class="font-semibold">{{
<label for="sub_topic" class="font-semibold text-secondaryLight">{{
$t("mqtt.topic")
}}</label>
</div>

14
components/realtime/Socketio.vue
View File

@@ -17,9 +17,7 @@
bg-primaryLight
border border-divider
rounded-l
flex
font-semibold font-mono
flex-1
flex flex-1
text-secondaryDark
w-full
py-2
@@ -38,9 +36,7 @@
class="
bg-primaryLight
border border-divider
flex
font-semibold font-mono
flex-1
flex flex-1
text-secondaryDark
w-full
py-2
@@ -81,7 +77,7 @@
>
<AppSection label="messages">
<div class="flex flex-col flex-1 p-4 inline-flex">
<label for="events" class="font-semibold">
<label for="events" class="font-semibold text-secondaryLight">
{{ $t("events") }}
</label>
</div>
@@ -97,7 +93,9 @@
/>
</div>
<div class="flex flex-1 p-4 items-center justify-between">
<label class="font-semibold">{{ $t("communication") }}</label>
<label class="font-semibold text-secondaryLight">{{
$t("communication")
}}</label>
<div class="flex">
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"

18
components/realtime/Sse.vue
View File

@@ -13,9 +13,7 @@
bg-primaryLight
border border-divider
rounded-l
flex
font-semibold font-mono
flex-1
flex flex-1
text-secondaryDark
w-full
py-2
@@ -30,7 +28,15 @@
/>
<label
for="url"
class="bg-primaryLight border border-divider py-2 px-4 truncate"
class="
bg-primaryLight
border-t border-b border-divider
font-semibold
text-secondaryLight
py-2
px-4
truncate
"
>
{{ $t("event_type") }}
</label>
@@ -40,9 +46,7 @@
class="
bg-primaryLight
border border-divider
flex
font-semibold font-mono
flex-1
flex flex-1
text-secondaryDark
w-full
py-2

12
components/realtime/Websocket.vue
View File

@@ -14,7 +14,6 @@
bg-primaryLight
border border-divider
rounded-l
font-semibold font-mono
text-secondaryDark
w-full
py-2
@@ -54,7 +53,7 @@
justify-between
"
>
<label class="font-semibold">
<label class="font-semibold text-secondaryLight">
{{ $t("websocket.protocols") }}
</label>
<div class="flex">
@@ -86,9 +85,7 @@
v-model="protocol.value"
class="
bg-primaryLight
flex
font-semibold font-mono
flex-1
flex flex-1
py-2
px-4
truncate
@@ -166,7 +163,10 @@
>
<AppSection label="messages">
<div class="flex flex-col flex-1 p-4 inline-flex">
<label for="websocket-message" class="font-semibold">
<label
for="websocket-message"
class="font-semibold text-secondaryLight"
>
{{ $t("communication") }}
</label>
</div>

1
components/smart/AccentModePicker.vue
View File

@@ -15,6 +15,7 @@
v-tippy="{ theme: 'tooltip' }"
:title="`${color.charAt(0).toUpperCase()}${color.slice(1)}`"
:class="[{ 'bg-primaryLight': color === active }]"
class="rounded"
icon="lens"
:color="color"
@click.native="setActiveColor(color)"

6
components/smart/AceEditor.vue
View File

@@ -6,9 +6,7 @@
class="
bg-primaryLight
border-t border-divider
flex flex-nowrap
font-mono
flex-1
flex flex-nowrap flex-1
py-1
px-4
bottom-0
@@ -23,7 +21,6 @@
:key="`p-${index}`"
class="
cursor-pointer
font-semibold
flex-grow-0 flex-shrink-0
text-secondaryLight
inline-flex
@@ -48,7 +45,6 @@
<SmartItem
v-for="(sibling, siblingIndex) in currentSibling"
:key="`p-${index}-sibling-${siblingIndex}`"
class="font-mono"
:label="sibling.key ? sibling.key.value : i"
@click.native="goToSibling(sibling)"
/>

7
components/smart/AutoComplete.vue
View File

@@ -186,9 +186,7 @@ export default {
<style scoped lang="scss">
.autocomplete-wrapper {
@apply relative;
@apply flex;
@apply w-full;
@apply contents;
input:focus + ul.suggestions,
ul.suggestions:hover {
@@ -211,8 +209,7 @@ export default {
@apply w-full;
@apply block;
@apply py-2 px-4;
@apply text-secondaryLight;
@apply font-semibold font-mono;
@apply text-secondary;
&:last-child {
border-radius: 0 0 8px 8px;

1
components/smart/ColorModePicker.vue
View File

@@ -8,6 +8,7 @@
:class="{
'bg-primaryLight !text-accent hover:text-accent': color === active,
}"
class="rounded"
:icon="getIcon(color)"
@click.native="setBGMode(color)"
/>

2
components/smart/ConfirmModal.vue
View File

@@ -2,7 +2,7 @@
<SmartModal v-if="show" :title="$t('modal.confirm')" @close="hideModal">
<template #body>
<div class="flex flex-col px-2">
<label class="font-semibold">
<label>
{{ title }}
</label>
</div>

4
components/smart/DeletableChip.vue
View File

@@ -2,7 +2,7 @@
<span class="chip">
<span><slot></slot></span>
<ButtonSecondary
class="p-2 close-button icon"
class="rounded p-2 close-button icon"
icon="close"
@click.native="$emit('chip-delete')"
/>
@@ -19,7 +19,7 @@
@apply pl-4;
@apply bg-primaryDark;
@apply text-secondary;
@apply font-mono font-semibold;
@apply border border-divider;
}

9
components/smart/EnvInput.vue
View File

@@ -464,12 +464,15 @@ export default defineComponent({
<style lang="scss" scoped>
[contenteditable="true"] {
@apply text-secondaryDark;
@apply font-medium;
&:empty {
line-height: 1.9;
&::before {
@apply text-secondary;
@apply opacity-75;
@apply text-secondaryDark;
@apply opacity-25;
@apply pointer-events-none;
content: attr(placeholder);
@@ -479,7 +482,7 @@ export default defineComponent({
.env-input-container {
@apply inline-grid;
@apply w-full;
@apply flex-1;
}
.env-input {

4
components/smart/Item.vue
View File

@@ -5,7 +5,7 @@
:blank="blank"
class="
rounded
font-semibold
font-medium
py-2
px-4
transition
@@ -60,7 +60,7 @@
class="flex-1 inline-flex items-start"
:class="{ 'flex-col': description }"
>
<div class="font-semibold">
<div>
{{ label }}
</div>
<p v-if="description" class="my-2 text-left text-secondaryLight">

1
components/smart/Modal.vue
View File

@@ -57,6 +57,7 @@
<slot name="actions"></slot>
<ButtonSecondary
v-if="dimissible"
class="rounded"
icon="close"
@click.native="close"
/>

2
components/smart/Tabs.vue
View File

@@ -97,7 +97,7 @@ export default {
@apply ml-2;
@apply text-8px;
@apply border border-divider;
@apply font-mono;
@apply rounded;
@apply text-secondaryLight;
}

2
components/smart/Toggle.vue
View File

@@ -6,7 +6,7 @@
<label ref="toggle" class="toggle" :class="{ on: on }">
<span class="handle"></span>
</label>
<label class="cursor-pointer font-semibold pl-0 align-middle truncate">
<label class="cursor-pointer pl-0 align-middle truncate">
<slot></slot>
</label>
</div>

1
components/tab/Primary.vue
View File

@@ -5,7 +5,6 @@
:blank="blank"
class="
rounded
font-semibold
py-2
px-4
transition

1
components/tab/Secondary.vue
View File

@@ -4,7 +4,6 @@
:exact="exact"
:blank="blank"
class="
font-semibold
flex-1
py-2
transform

18
components/teams/Edit.vue
View File

@@ -17,7 +17,7 @@
</label>
</div>
<div class="flex flex-1 justify-between items-center">
<label for="memberList" class="font-semibold p-4">
<label for="memberList" class="p-4">
{{ $t("team.members") }}
</label>
<div class="flex">
@@ -37,9 +37,7 @@
<input
class="
bg-primaryLight
flex
font-semibold font-mono
flex-1
flex flex-1
py-2
px-4
truncate
@@ -62,9 +60,7 @@
<input
class="
bg-primaryLight
flex
font-semibold font-mono
flex-1
flex flex-1
py-2
px-4
truncate
@@ -114,9 +110,7 @@
v-model="member.key"
class="
bg-primaryLight
flex
font-semibold font-mono
flex-1
flex flex-1
py-2
px-4
truncate
@@ -138,9 +132,7 @@
<input
class="
bg-primaryLight
flex
font-semibold font-mono
flex-1
flex flex-1
py-2
px-4
truncate

7
components/teams/Team.vue
View File

@@ -3,12 +3,7 @@
<div class="flex flex-1 items-start">
<div class="p-4">
<label
class="
cursor-pointer
font-semibold
transition
hover:text-secondaryDark
"
class="cursor-pointer transition hover:text-secondaryDark"
@click="team.myRole === 'OWNER' ? $emit('edit-team') : ''"
>
{{ team.name || $t("nothing_found") }}

2
components/teams/index.vue
View File

@@ -1,6 +1,6 @@
<template>
<AppSection label="teams">
<h4 class="font-bold text-secondaryDark">
<h4 class="text-secondaryDark">
{{ $t("team.title") }}
</h4>
<div class="mt-1 text-secondaryLight">