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 {
margin-bottom: 68px;
.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 {
background-color: var(--accent-color) !important;
color: var(--primary-color) !important;
font-weight: 700 !important;
}
&.bubble .action {
color: inherit !important;
}
.action {
margin-left: auto !important;
@apply !bg-accent;
@apply !text-primary;
}
}
}

42
assets/scss/themes.scss
View File

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

9
components/app/Announcement.vue
View File

@@ -1,5 +1,12 @@
<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">
<SmartLink
to="https://forms.gle/8yFiEynXB7h477Ns6"

4
components/button/Primary.vue
View File

@@ -15,7 +15,7 @@
:class="[
color
? `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',
rounded ? 'rounded-full' : 'rounded-lg',
{ 'opacity-50 cursor-not-allowed': disabled },
@@ -27,7 +27,7 @@
gradient,
},
{
'border border-divider hover:border-dividerDark focus:border-dividerDark':
'border border-accent hover:border-accentDark focus:border-accentDark':
outline,
},
]"

11
components/http/Request.vue
View File

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

3
components/smart/AccentModePicker.vue
View File

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

7
components/smart/ColorModePicker.vue
View File

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

4
components/smart/Toggle.vue
View File

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

1
nuxt.config.js
View File

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

12
pages/settings.vue
View File

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