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

refactor(ui): minor inconsistency fixes

Browse Source
This commit is contained in:
liyasthomas
2021-07-18 18:53:51 +05:30
parent 393e6896ec
commit e52ed7a5ce
10 changed files with 72 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
assets/scss/styles.scss
View File

@@ -304,23 +304,31 @@ input[type="checkbox"] {
} }
.toasted-container { .toasted-container {
margin-bottom: 68px;
.toasted { .toasted {
justify-content: space-between !important; &.toasted-primary {
@apply px-6;
@apply py-1;
@apply bg-tooltip;
@apply text-primary;
@apply text-xs;
@apply !font-semibold;
.material-icons {
@apply !text-md;
}
.action {
@apply transition;
@apply text-current;
@apply text-xs;
@apply hover:opacity-75;
@apply hover:no-underline;
}
}
&.info { &.info {
background-color: var(--accent-color) !important; @apply !bg-accent;
color: var(--primary-color) !important; @apply !text-primary;
font-weight: 700 !important;
}
&.bubble .action {
color: inherit !important;
}
.action {
margin-left: auto !important;
} }
} }
} }

42
assets/scss/themes.scss
View File

@@ -26,7 +26,7 @@
// Error color // Error color
--error-color: theme("colors.true-gray.600"); --error-color: theme("colors.true-gray.600");
// Tooltip color // Tooltip color
--tooltip-color: theme("colors.true-gray.800"); --tooltip-color: theme("colors.true-gray.200");
// Editor theme // Editor theme
--editor-theme: "merbivore_soft"; --editor-theme: "merbivore_soft";
} }
@@ -80,16 +80,16 @@
// Error color // Error color
--error-color: theme("colors.dark.800"); --error-color: theme("colors.dark.800");
// Tooltip color // Tooltip color
--tooltip-color: theme("colors.dark.500"); --tooltip-color: theme("colors.true-gray.300");
// Editor theme // Editor theme
--editor-theme: "vibrant_ink"; --editor-theme: "vibrant_ink";
} }
@mixin blueTheme { @mixin blueTheme {
// Accent color // Accent color
--accent-color: theme("colors.blue.400"); --accent-color: theme("colors.blue.500");
// Light Accent color // Light Accent color
--accent-light-color: theme("colors.blue.200"); --accent-light-color: theme("colors.blue.400");
// Dark Accent color // Dark Accent color
--accent-dark-color: theme("colors.blue.600"); --accent-dark-color: theme("colors.blue.600");
// Gradient from // Gradient from
@@ -102,11 +102,11 @@
@mixin greenTheme { @mixin greenTheme {
// Accent color // Accent color
--accent-color: rgb(97, 207, 123); --accent-color: theme("colors.green.500");
// Light Accent color // Light Accent color
--accent-light-color: rgba(73, 204, 104, 1); --accent-light-color: theme("colors.green.400");
// Dark Accent color // Dark Accent color
--accent-dark-color: rgb(0, 71, 17); --accent-dark-color: theme("colors.green.600");
// Gradient from // Gradient from
--gradient-from-color: theme("colors.green.200"); --gradient-from-color: theme("colors.green.200");
// Gradient via // Gradient via
@@ -117,9 +117,9 @@
@mixin tealTheme { @mixin tealTheme {
// Accent color // Accent color
--accent-color: theme("colors.teal.400"); --accent-color: theme("colors.teal.500");
// Light Accent color // Light Accent color
--accent-light-color: theme("colors.teal.200"); --accent-light-color: theme("colors.teal.400");
// Dark Accent color // Dark Accent color
--accent-dark-color: theme("colors.teal.600"); --accent-dark-color: theme("colors.teal.600");
// Gradient from // Gradient from
@@ -132,9 +132,9 @@
@mixin indigoTheme { @mixin indigoTheme {
// Accent color // Accent color
--accent-color: theme("colors.indigo.400"); --accent-color: theme("colors.indigo.500");
// Light Accent color // Light Accent color
--accent-light-color: theme("colors.indigo.200"); --accent-light-color: theme("colors.indigo.400");
// Dark Accent color // Dark Accent color
--accent-dark-color: theme("colors.indigo.600"); --accent-dark-color: theme("colors.indigo.600");
// Gradient from // Gradient from
@@ -147,9 +147,9 @@
@mixin purpleTheme { @mixin purpleTheme {
// Accent color // Accent color
--accent-color: theme("colors.purple.400"); --accent-color: theme("colors.purple.500");
// Light Accent color // Light Accent color
--accent-light-color: theme("colors.purple.200"); --accent-light-color: theme("colors.purple.400");
// Dark Accent color // Dark Accent color
--accent-dark-color: theme("colors.purple.600"); --accent-dark-color: theme("colors.purple.600");
// Gradient from // Gradient from
@@ -162,9 +162,9 @@
@mixin orangeTheme { @mixin orangeTheme {
// Accent color // Accent color
--accent-color: theme("colors.orange.400"); --accent-color: theme("colors.orange.500");
// Light Accent color // Light Accent color
--accent-light-color: theme("colors.orange.200"); --accent-light-color: theme("colors.orange.400");
// Dark Accent color // Dark Accent color
--accent-dark-color: theme("colors.orange.600"); --accent-dark-color: theme("colors.orange.600");
// Gradient from // Gradient from
@@ -177,9 +177,9 @@
@mixin pinkTheme { @mixin pinkTheme {
// Accent color // Accent color
--accent-color: theme("colors.pink.400"); --accent-color: theme("colors.pink.500");
// Light Accent color // Light Accent color
--accent-light-color: theme("colors.pink.200"); --accent-light-color: theme("colors.pink.400");
// Dark Accent color // Dark Accent color
--accent-dark-color: theme("colors.pink.600"); --accent-dark-color: theme("colors.pink.600");
// Gradient from // Gradient from
@@ -192,9 +192,9 @@
@mixin redTheme { @mixin redTheme {
// Accent color // Accent color
--accent-color: theme("colors.red.400"); --accent-color: theme("colors.red.500");
// Light Accent color // Light Accent color
--accent-light-color: theme("colors.red.200"); --accent-light-color: theme("colors.red.400");
// Dark Accent color // Dark Accent color
--accent-dark-color: theme("colors.red.600"); --accent-dark-color: theme("colors.red.600");
// Gradient from // Gradient from
@@ -207,9 +207,9 @@
@mixin yellowTheme { @mixin yellowTheme {
// Accent color // Accent color
--accent-color: theme("colors.yellow.400"); --accent-color: theme("colors.yellow.500");
// Light Accent color // Light Accent color
--accent-light-color: theme("colors.yellow.200"); --accent-light-color: theme("colors.yellow.400");
// Dark Accent color // Dark Accent color
--accent-dark-color: theme("colors.yellow.600"); --accent-dark-color: theme("colors.yellow.600");
// Gradient from // Gradient from

9
components/app/Announcement.vue
View File

@@ -1,5 +1,12 @@
<template> <template>
<div class="bg-primary border-b border-dividerLight flex justify-between"> <div
class="
bg-primary bg-dividerLight
border-b border-divider
flex
justify-between
"
>
<span class="flex"> <span class="flex">
<SmartLink <SmartLink
to="https://forms.gle/8yFiEynXB7h477Ns6" to="https://forms.gle/8yFiEynXB7h477Ns6"

4
components/button/Primary.vue
View File

@@ -15,7 +15,7 @@
:class="[ :class="[
color color
? `text-${color}-800 bg-${color}-200 hover:text-${color}-900 hover:bg-${color}-300 focus:text-${color}-900 focus:bg-${color}-300` ? `text-${color}-800 bg-${color}-200 hover:text-${color}-900 hover:bg-${color}-300 focus:text-${color}-900 focus:bg-${color}-300`
: `text-white dark:text-accentDark bg-accent hover:bg-accentDark focus:bg-accentDark`, : `text-white bg-accent hover:bg-accentDark focus:bg-accentDark`,
label ? 'px-3' : 'px-2', label ? 'px-3' : 'px-2',
rounded ? 'rounded-full' : 'rounded-lg', rounded ? 'rounded-full' : 'rounded-lg',
{ 'opacity-50 cursor-not-allowed': disabled }, { 'opacity-50 cursor-not-allowed': disabled },
@@ -27,7 +27,7 @@
gradient, gradient,
}, },
{ {
'border border-divider hover:border-dividerDark focus:border-dividerDark': 'border border-accent hover:border-accentDark focus:border-accentDark':
outline, outline,
}, },
]" ]"

11
components/http/Request.vue
View File

@@ -68,14 +68,15 @@
:placeholder="$t('url')" :placeholder="$t('url')"
@keyup.enter="newSendRequest()" @keyup.enter="newSendRequest()"
/> />
<!-- <SmartUrlField v-else v-model="uri" /> -->
</div> </div>
<!-- <SmartUrlField v-else v-model="uri" /> -->
<div class="flex"> <div class="flex">
<ButtonPrimary <ButtonPrimary
id="send" id="send"
class="rounded-none font-bold" class="rounded-none"
:label="!loading ? $t('send') : $('cancel')" :label="!loading ? $t('send') : $('cancel')"
:shortcuts="[getSpecialKey(), 'G']" :shortcuts="[getSpecialKey(), 'G']"
outline
@click.native="!loading ? newSendRequest() : cancelRequest()" @click.native="!loading ? newSendRequest() : cancelRequest()"
/> />
<span class="inline-flex"> <span class="inline-flex">
@@ -88,7 +89,11 @@
arrow arrow
> >
<template #trigger> <template #trigger>
<ButtonPrimary class="rounded-l-none" icon="keyboard_arrow_down" /> <ButtonPrimary
class="rounded-l-none"
icon="keyboard_arrow_down"
outline
/>
</template> </template>
<SmartItem <SmartItem
:label="$t('import_curl')" :label="$t('import_curl')"

3
components/smart/AccentModePicker.vue
View File

@@ -14,8 +14,9 @@
:key="`color-${index}`" :key="`color-${index}`"
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="`${color.charAt(0).toUpperCase()}${color.slice(1)}`" :title="`${color.charAt(0).toUpperCase()}${color.slice(1)}`"
:class="[`text-${color}-400`, { 'bg-primary': color === active }]" :class="[{ 'bg-primaryLight': color === active }]"
icon="lens" icon="lens"
:color="color"
@click.native="setActiveColor(color)" @click.native="setActiveColor(color)"
/> />
</div> </div>

7
components/smart/ColorModePicker.vue
View File

@@ -5,10 +5,9 @@
:key="`color-${index}`" :key="`color-${index}`"
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="`${color.charAt(0).toUpperCase()}${color.slice(1)}`" :title="`${color.charAt(0).toUpperCase()}${color.slice(1)}`"
:class="[ :class="{
{ 'bg-primary': color === activeColor }, 'bg-primaryLight !text-accent hover:text-accent': color === activeColor,
{ 'text-accent hover:text-accent': color === activeColor }, }"
]"
:icon="getIcon(color)" :icon="getIcon(color)"
@click.native="setBGMode(color)" @click.native="setBGMode(color)"
/> />

4
components/smart/Toggle.vue
View File

@@ -24,9 +24,9 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
$useBorder: false; $useBorder: false;
$borderColor: var(--secondary-light-color); $borderColor: var(--divider-dark-color);
$activeColor: var(--accent-color); $activeColor: var(--accent-color);
$inactiveColor: var(--secondary-light-color); $inactiveColor: var(--divider-dark-color);
$inactiveHandleColor: var(--primary-color); $inactiveHandleColor: var(--primary-color);
$activeHandleColor: var(--primary-color); $activeHandleColor: var(--primary-color);
$width: 32px; $width: 32px;

1
nuxt.config.js
View File

@@ -175,7 +175,6 @@ export default {
toast: { toast: {
position: "bottom-center", position: "bottom-center",
duration: 3000, duration: 3000,
theme: "bubble",
keepOnHover: true, keepOnHover: true,
}, },

12
pages/settings.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<div class="space-y-8"> <div class="divide-y divide-dividerLight space-y-8">
<div class="md:grid md:grid-cols-3 md:gap-4"> <div class="md:grid md:grid-cols-3 md:gap-4">
<div class="p-8 md:col-span-1"> <div class="p-8 md:col-span-1">
<h3 class="heading"> <h3 class="heading">
@@ -10,7 +10,7 @@
Customize your account settings. Customize your account settings.
</p> </p>
</div> </div>
<div class="border border-divider rounded-lg p-8 md:col-span-2"> <div class="p-8 md:col-span-2">
<div v-if="currentUser === null"> <div v-if="currentUser === null">
<ButtonPrimary label="Log in" @click.native="showLogin = true" /> <ButtonPrimary label="Log in" @click.native="showLogin = true" />
<div class="mt-4 text-xs text-secondaryLight"> <div class="mt-4 text-xs text-secondaryLight">
@@ -103,9 +103,7 @@
Customize your application theme. Customize your application theme.
</p> </p>
</div> </div>
<div <div class="space-y-8 p-8 md:col-span-2">
class="border border-divider rounded-lg space-y-8 p-8 md:col-span-2"
>
<fieldset> <fieldset>
<legend class="font-bold text-secondaryDark"> <legend class="font-bold text-secondaryDark">
{{ $t("background") }} {{ $t("background") }}
@@ -187,9 +185,7 @@
Middleware between application and APIs. Middleware between application and APIs.
</p> </p>
</div> </div>
<div <div class="space-y-8 p-8 md:col-span-2">
class="border border-divider rounded-lg space-y-8 p-8 md:col-span-2"
>
<fieldset> <fieldset>
<legend class="font-bold text-secondaryDark"> <legend class="font-bold text-secondaryDark">
{{ $t("extensions") }} {{ $t("extensions") }}