From e9011a6b447f408dffa3f4fc7aabebc15d53f916 Mon Sep 17 00:00:00 2001 From: liyasthomas Date: Mon, 14 Feb 2022 05:52:44 +0530 Subject: [PATCH] refactor: improve ui consistency --- packages/hoppscotch-app/assets/scss/styles.scss | 7 +++++++ packages/hoppscotch-app/components/app/Header.vue | 4 ++-- .../hoppscotch-app/components/graphql/Request.vue | 2 +- .../components/graphql/RequestOptions.vue | 13 +++++++++++-- .../components/http/OAuth2Authorization.vue | 2 +- .../hoppscotch-app/components/realtime/Mqtt.vue | 2 +- .../hoppscotch-app/components/realtime/Socketio.vue | 6 +++--- packages/hoppscotch-app/components/realtime/Sse.vue | 4 ++-- .../components/realtime/Websocket.vue | 2 +- .../hoppscotch-app/components/smart/EnvInput.vue | 2 +- .../helpers/editor/themes/baseTheme.ts | 8 +++++++- packages/hoppscotch-app/locales/af.json | 9 +++++---- packages/hoppscotch-app/locales/ar.json | 9 +++++---- packages/hoppscotch-app/locales/ca.json | 9 +++++---- packages/hoppscotch-app/locales/cn.json | 9 +++++---- packages/hoppscotch-app/locales/cs.json | 9 +++++---- packages/hoppscotch-app/locales/da.json | 9 +++++---- packages/hoppscotch-app/locales/de.json | 9 +++++---- packages/hoppscotch-app/locales/el.json | 9 +++++---- packages/hoppscotch-app/locales/en.json | 9 +++++---- packages/hoppscotch-app/locales/es.json | 9 +++++---- packages/hoppscotch-app/locales/fi.json | 9 +++++---- packages/hoppscotch-app/locales/fr.json | 9 +++++---- packages/hoppscotch-app/locales/he.json | 9 +++++---- packages/hoppscotch-app/locales/hu.json | 9 +++++---- packages/hoppscotch-app/locales/it.json | 9 +++++---- packages/hoppscotch-app/locales/ja.json | 9 +++++---- packages/hoppscotch-app/locales/ko.json | 9 +++++---- packages/hoppscotch-app/locales/nl.json | 9 +++++---- packages/hoppscotch-app/locales/no.json | 9 +++++---- packages/hoppscotch-app/locales/pl.json | 9 +++++---- packages/hoppscotch-app/locales/pt-br.json | 9 +++++---- packages/hoppscotch-app/locales/pt.json | 9 +++++---- packages/hoppscotch-app/locales/ro.json | 9 +++++---- packages/hoppscotch-app/locales/ru.json | 9 +++++---- packages/hoppscotch-app/locales/sr.json | 9 +++++---- packages/hoppscotch-app/locales/sv.json | 9 +++++---- packages/hoppscotch-app/locales/tr.json | 9 +++++---- packages/hoppscotch-app/locales/tw.json | 9 +++++---- packages/hoppscotch-app/locales/uk.json | 9 +++++---- packages/hoppscotch-app/locales/vi.json | 9 +++++---- 41 files changed, 187 insertions(+), 135 deletions(-) diff --git a/packages/hoppscotch-app/assets/scss/styles.scss b/packages/hoppscotch-app/assets/scss/styles.scss index f25e70da1..831fa4705 100644 --- a/packages/hoppscotch-app/assets/scss/styles.scss +++ b/packages/hoppscotch-app/assets/scss/styles.scss @@ -135,6 +135,13 @@ a { } } +.cm-tooltip { + .tooltip-theme { + @apply fixed; + @apply -mt-6; + } +} + .tooltip-theme { @apply bg-tooltip; @apply text-primary; diff --git a/packages/hoppscotch-app/components/app/Header.vue b/packages/hoppscotch-app/components/app/Header.vue index f3572dd7a..91c90c516 100644 --- a/packages/hoppscotch-app/components/app/Header.vue +++ b/packages/hoppscotch-app/components/app/Header.vue @@ -22,14 +22,14 @@ /> ${getSpecialKey()}G`" :label="`${t('request.run')}`" svg="play" class="rounded-none !text-accent !hover:text-accentDark" @@ -29,7 +29,7 @@ v-tippy="{ theme: 'tooltip', delay: [500, 20], allowHTML: true }" :title="`${t( 'request.save' - )} ${getSpecialKey()}S`" + )} ${getSpecialKey()}S`" :label="`${t('request.save')}`" svg="save" class="rounded-none" @@ -166,6 +166,15 @@ :spellcheck="false" :value="header.key" autofocus + styles=" + bg-transparent + flex + flex-1 + py-1 + px-4 + truncate + " + class="flex-1 !flex" @input=" updateHeader(index, { key: $event, diff --git a/packages/hoppscotch-app/components/http/OAuth2Authorization.vue b/packages/hoppscotch-app/components/http/OAuth2Authorization.vue index 1396ecb7d..ddf23de4f 100644 --- a/packages/hoppscotch-app/components/http/OAuth2Authorization.vue +++ b/packages/hoppscotch-app/components/http/OAuth2Authorization.vue @@ -99,7 +99,7 @@ export default { oidcDiscoveryURL.value === "" && (authURL.value === "" || accessTokenURL.value === "") ) { - toast.error(`${t("complete_config_urls")}`) + toast.error(`${t("error.incomplete_config_urls")}`) return } try { diff --git a/packages/hoppscotch-app/components/realtime/Mqtt.vue b/packages/hoppscotch-app/components/realtime/Mqtt.vue index 7eac5e47b..c7144b339 100644 --- a/packages/hoppscotch-app/components/realtime/Mqtt.vue +++ b/packages/hoppscotch-app/components/realtime/Mqtt.vue @@ -27,7 +27,7 @@ type="url" autocomplete="off" spellcheck="false" - class="w-full px-4 py-2 border rounded bg-primaryLight border-divider text-secondaryDark hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark" + class="w-full px-4 py-2 border rounded bg-primaryLight border-divider text-secondaryDark" :placeholder="$t('mqtt.url')" :disabled="connectionState" @keyup.enter="validUrl ? toggleConnection() : null" diff --git a/packages/hoppscotch-app/components/realtime/Socketio.vue b/packages/hoppscotch-app/components/realtime/Socketio.vue index c2f52b1c0..e21adb52b 100644 --- a/packages/hoppscotch-app/components/realtime/Socketio.vue +++ b/packages/hoppscotch-app/components/realtime/Socketio.vue @@ -36,7 +36,7 @@ id="client-version" v-tippy="{ theme: 'tooltip' }" title="socket.io-client version" - class="flex px-4 py-2 font-semibold border rounded-l cursor-pointer bg-primaryLight border-divider text-secondaryDark w-26 hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark" + class="flex px-4 py-2 font-semibold border rounded-l cursor-pointer bg-primaryLight border-divider text-secondaryDark w-26" :value="`Client ${clientVersion}`" readonly :disabled="connectionState" @@ -58,7 +58,7 @@ autocomplete="off" spellcheck="false" :class="{ error: !urlValid }" - class="flex flex-1 w-full px-4 py-2 border bg-primaryLight border-divider text-secondaryDark hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark" + class="flex flex-1 w-full px-4 py-2 border bg-primaryLight border-divider text-secondaryDark" :placeholder="$t('socketio.url')" :disabled="connectionState" @keyup.enter="urlValid ? toggleConnection() : null" @@ -66,7 +66,7 @@