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

refactor(ui): better spacing and font-weight

Browse Source
This commit is contained in:
liyasthomas
2021-11-06 21:15:28 +05:30
parent 0f07c47e9f
commit 40c88b3e35
44 changed files with 53 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/hoppscotch-app/components/app/Fuse.vue
View File

@@ -1,5 +1,5 @@
<template>
<div key="outputHash">
<div key="outputHash" class="flex flex-col">
<AppPowerSearchEntry
v-for="(shortcut, shortcutIndex) in searchResults"
:key="`shortcut-${shortcutIndex}`"

6
packages/hoppscotch-app/components/app/Header.vue
View File

@@ -39,7 +39,7 @@
svg="upload-cloud"
:label="$t('header.save_workspace')"
filled
class="hidden !font-semibold md:flex"
class="hidden md:flex"
@click.native="showLogin = true"
/>
<ButtonPrimary
@@ -56,8 +56,8 @@
class="
!bg-green-500
!text-green-500
!bg-opacity-10
!hover:bg-opacity-10 !hover:text-green-400 !hover:bg-green-400
!bg-opacity-15
!hover:bg-opacity-10 !hover:text-green-600 !hover:bg-green-400
"
@click.native="showTeamsModal = true"
/>

6
packages/hoppscotch-app/components/app/PowerSearch.vue
View File

@@ -39,7 +39,11 @@
hide-scrollbar
"
>
<div v-for="(map, mapIndex) in mappings" :key="`map-${mapIndex}`">
<div
v-for="(map, mapIndex) in mappings"
:key="`map-${mapIndex}`"
class="flex flex-col"
>
<h5 class="my-2 text-secondaryLight py-2 px-6">
{{ $t(map.section) }}
</h5>

25
packages/hoppscotch-app/components/app/PowerSearchEntry.vue
View File

@@ -1,29 +1,27 @@
<template>
<div
<button
class="
cursor-pointer
flex
flex flex-1
py-2
px-6
transition
items-center
group
focus:outline-none
focus-visible:bg-primaryLight
search-entry
focus:outline-none
"
:class="{ active, 'focus-visible': active }"
:class="{ active: active }"
tabindex="-1"
@click="$emit('action', shortcut.action)"
@keydown.enter="$emit('action', shortcut.action)"
>
<SmartIcon
class="mr-4 opacity-50 transition svg-icons group-focus:opacity-100"
class="mr-4 opacity-50 transition svg-icons"
:class="{ 'opacity-100 text-secondaryDark': active }"
:name="shortcut.icon"
/>
<span
class="flex flex-1 mr-4 transition"
class="flex flex-1 mr-4 font-medium transition"
:class="{ 'text-secondaryDark': active }"
>
{{ $t(shortcut.label) }}
@@ -35,7 +33,7 @@
>
{{ key }}
</span>
</div>
</button>
</template>
<script setup lang="ts">
@@ -62,8 +60,13 @@ defineProps<{
content: "";
}
&.active::after {
@apply bg-accentLight;
&.active {
@apply outline-none;
@apply bg-primaryLight;
&::after {
@apply bg-accentLight;
}
}
}

1
packages/hoppscotch-app/components/app/Share.vue
View File

@@ -108,6 +108,7 @@ export default defineComponent({
@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;

1
packages/hoppscotch-app/components/app/Shortcuts.vue
View File

@@ -23,7 +23,6 @@
<div class="flex flex-col my-4 mx-6">
<input
v-model="filterText"
v-focus
type="search"
autocomplete="off"
class="

3
packages/hoppscotch-app/components/button/Secondary.vue
View File

@@ -4,7 +4,7 @@
:exact="exact"
:blank="blank"
class="
font-medium
font-semibold
py-2
transition
inline-flex
@@ -31,7 +31,6 @@
{ '!bg-primaryDark': filled },
]"
:disabled="disabled"
tabindex="0"
>
<i
v-if="icon"

2
packages/hoppscotch-app/components/collections/ChooseType.vue
View File

@@ -23,7 +23,7 @@
border-t border-dividerLight
cursor-pointer
flex
font-medium
font-semibold
w-full
py-2
px-4

2
packages/hoppscotch-app/components/collections/index.vue
View File

@@ -126,12 +126,14 @@
v-tippy="{ theme: 'tooltip' }"
:title="$t('team.no_access')"
:label="$t('add.new')"
class="mb-4"
filled
/>
<ButtonSecondary
v-else
:label="$t('add.new')"
filled
class="mb-4"
@click.native="displayModalAdd(true)"
/>
</div>

3
packages/hoppscotch-app/components/environments/Edit.vue
View File

@@ -87,7 +87,7 @@
loading="lazy"
class="
flex-col
mb-4
my-4
object-contain object-center
h-16
w-16
@@ -101,6 +101,7 @@
<ButtonSecondary
:label="`${$t('add.new')}`"
filled
class="mb-4"
@click.native="addEnvironmentVariable"
/>
</div>

1
packages/hoppscotch-app/components/environments/index.vue
View File

@@ -118,6 +118,7 @@
<ButtonSecondary
:label="`${$t('add.new')}`"
filled
class="mb-4"
@click.native="displayModalAdd(true)"
/>
</div>

1
packages/hoppscotch-app/components/graphql/Request.vue
View File

@@ -4,7 +4,6 @@
<input
id="url"
v-model="url"
v-focus
type="url"
autocomplete="off"
spellcheck="false"

1
packages/hoppscotch-app/components/graphql/RequestOptions.vue
View File

@@ -262,6 +262,7 @@
:label="`${$t('add.new')}`"
filled
svg="plus"
class="mb-4"
@click.native="addRequestHeader"
/>
</div>

2
packages/hoppscotch-app/components/graphql/Response.vue
View File

@@ -60,7 +60,7 @@
justify-center
"
>
<div class="flex space-x-2 pb-4">
<div class="flex space-x-2 pb-4 my-4">
<div class="flex flex-col space-y-4 text-right items-end">
<span class="flex flex-1 items-center">
{{ $t("shortcut.general.command_menu") }}

4
packages/hoppscotch-app/components/graphql/Sidebar.vue
View File

@@ -55,7 +55,7 @@
"
:alt="$t('empty.documentation')"
/>
<span class="text-center">
<span class="text-center mb-4">
{{ $t("empty.documentation") }}
</span>
</div>
@@ -223,7 +223,7 @@
"
:alt="$t('empty.schema')"
/>
<span class="text-center">
<span class="text-center mb-4">
{{ $t("empty.schema") }}
</span>
</div>

2
packages/hoppscotch-app/components/history/index.vue
View File

@@ -66,7 +66,7 @@
class="flex-col my-4 object-contain object-center h-16 w-16 inline-flex"
:alt="$t('empty.history')"
/>
<span class="text-center">
<span class="text-center mb-4">
{{ $t("empty.history") }}
</span>
</div>

1
packages/hoppscotch-app/components/http/Authorization.vue
View File

@@ -111,6 +111,7 @@
blank
svg="external-link"
reverse
class="mb-4"
/>
</div>
<div v-if="authType === 'basic'" class="border-b border-dividerLight flex">

1
packages/hoppscotch-app/components/http/Body.vue
View File

@@ -81,6 +81,7 @@
blank
svg="external-link"
reverse
class="mb-4"
/>
</div>
</div>

1
packages/hoppscotch-app/components/http/BodyParameters.vue
View File

@@ -166,6 +166,7 @@
:label="`${$t('add.new')}`"
filled
svg="plus"
class="mb-4"
@click.native="addBodyParam"
/>
</div>

1
packages/hoppscotch-app/components/http/Headers.vue
View File

@@ -163,6 +163,7 @@
filled
:label="`${$t('add.new')}`"
svg="plus"
class="mb-4"
@click.native="addHeader"
/>
</div>

1
packages/hoppscotch-app/components/http/Parameters.vue
View File

@@ -156,6 +156,7 @@
:label="`${$t('add.new')}`"
svg="plus"
filled
class="mb-4"
@click.native="addParam"
/>
</div>

3
packages/hoppscotch-app/components/http/ResponseMeta.vue
View File

@@ -9,7 +9,7 @@
justify-center
"
>
<div class="flex space-x-2 pb-4">
<div class="flex space-x-2 pb-4 my-4">
<div class="flex flex-col space-y-4 text-right items-end">
<span class="flex flex-1 items-center">
{{ $t("shortcut.request.send_request") }}
@@ -94,6 +94,7 @@
blank
svg="external-link"
reverse
class="my-4"
/>
</div>
<div

1
packages/hoppscotch-app/components/http/TestResult.vue
View File

@@ -97,6 +97,7 @@
blank
svg="external-link"
reverse
class="my-4"
/>
</div>
</AppSection>

1
packages/hoppscotch-app/components/realtime/Mqtt.vue
View File

@@ -16,7 +16,6 @@
<input
id="mqtt-url"
v-model="url"
v-focus
type="url"
autocomplete="off"
spellcheck="false"

1
packages/hoppscotch-app/components/realtime/Socketio.vue
View File

@@ -60,7 +60,6 @@
<input
id="socketio-url"
v-model="url"
v-focus
type="url"
autocomplete="off"
spellcheck="false"

1
packages/hoppscotch-app/components/realtime/Sse.vue
View File

@@ -7,7 +7,6 @@
<input
id="server"
v-model="server"
v-focus
type="url"
autocomplete="off"
:class="{ error: !serverValid }"

3
packages/hoppscotch-app/components/realtime/Websocket.vue
View File

@@ -16,7 +16,6 @@
<input
id="websocket-url"
v-model="url"
v-focus
class="
bg-primaryLight
border border-divider
@@ -158,7 +157,7 @@
"
:alt="$t('empty.protocols')"
/>
<span class="text-center">
<span class="text-center mb-4">
{{ $t("empty.protocols") }}
</span>
</div>

8
packages/hoppscotch-app/components/smart/Item.vue
View File

@@ -6,7 +6,6 @@
class="
rounded
transition
font-medium
flex-shrink-0
py-2
px-4
@@ -59,10 +58,13 @@
class="flex-1 inline-flex truncate items-start"
:class="{ 'flex-col': description }"
>
<div class="truncate">
<div class="truncate font-semibold">
{{ label }}
</div>
<p v-if="description" class="my-2 text-left text-secondaryLight">
<p
v-if="description"
class="my-2 font-medium text-left text-secondaryLight"
>
{{ description }}
</p>
</div>

2
packages/hoppscotch-app/components/smart/Modal.vue
View File

@@ -34,7 +34,7 @@
<div
class="
bg-primary
shadow-xl
shadow-lg
text-left
w-full
transform

1
packages/hoppscotch-app/components/smart/Tabs.vue
View File

@@ -18,7 +18,6 @@
:key="`tab-${index}`"
class="tab"
:class="[{ active: tab.active }, { vertical: vertical }]"
tabindex="0"
:aria-label="tab.label"
@keyup.enter="selectTab(tab)"
@click="selectTab(tab)"

2
packages/hoppscotch-app/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 pl-0 align-middle">
<label class="cursor-pointer pl-0 align-middle font-semibold">
<slot></slot>
</label>
</div>

2
packages/hoppscotch-app/components/tab/Secondary.vue
View File

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