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

refactor(ui): better color names

Browse Source
This commit is contained in:
liyasthomas
2021-06-12 22:16:17 +05:30
parent 58296505a8
commit 2ffd0be03f
55 changed files with 248 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
assets/scss/styles.scss
View File

@@ -13,8 +13,8 @@ $responsiveWidth: 768px;
}
::selection {
@apply bg-acColor;
@apply text-actColor;
@apply bg-accent;
@apply text-primary;
}
::-webkit-scrollbar {
@@ -22,20 +22,20 @@ $responsiveWidth: 768px;
@apply w-2;
&:hover {
@apply bg-bgDarkColor;
@apply bg-primaryDark;
}
}
::-webkit-scrollbar-thumb {
@apply bg-fgLightColor;
@apply bg-secondaryLight;
&:hover {
@apply bg-fgColor;
@apply bg-secondary;
}
}
::placeholder {
@apply text-fgLightColor;
@apply text-secondaryLight;
@apply opacity-25;
}
@@ -44,8 +44,8 @@ html {
}
body {
@apply bg-bgColor;
@apply text-fgColor;
@apply bg-primary;
@apply text-secondary;
@apply text-base;
@apply font-medium;
@apply select-none;
@@ -89,7 +89,7 @@ a {
@apply outline-none;
&.link {
@apply text-acColor;
@apply text-accent;
}
}
@@ -169,7 +169,7 @@ p {
hr {
@apply border-b;
@apply border-dashed;
@apply border-brdColor;
@apply border-divider;
@apply my-4;
}
@@ -187,8 +187,8 @@ hr {
@apply transition;
@apply ease-in-out;
@apply duration-150;
@apply bg-ttColor;
@apply text-fgColor;
@apply bg-tooltip;
@apply text-secondary;
}
.tooltip-arrow {
@@ -197,7 +197,7 @@ hr {
@apply border-solid;
@apply absolute;
@apply m-2;
@apply border-ttColor;
@apply border-tooltip;
@apply z-30;
@apply transition;
@apply ease-in-out;
@@ -274,8 +274,8 @@ hr {
}
.popover-inner {
@apply bg-ttColor;
@apply text-fgColor;
@apply bg-tooltip;
@apply text-secondary;
@apply text-base;
@apply p-2;
@apply rounded-lg;
@@ -301,7 +301,7 @@ hr {
}
.popover-arrow {
@apply border-ttColor;
@apply border-tooltip;
}
}
@@ -324,7 +324,7 @@ hr {
.info:not(.toasted) {
@apply m-4;
@apply text-fgLightColor;
@apply text-secondaryLight;
.material-icons {
@apply align-middle;
@@ -337,8 +337,8 @@ button {
@apply items-center;
@apply justify-center;
@apply p-4;
@apply bg-acColor;
@apply text-actColor;
@apply bg-accent;
@apply text-primary;
@apply font-bold;
@apply transition;
@apply ease-in-out;
@@ -357,16 +357,16 @@ button {
&:not([disabled]):hover,
&:not([disabled]):active,
&:not([disabled]):focus {
@apply text-actColor;
@apply text-primary;
@apply fill-current;
@apply outline-none;
box-shadow: inset 0 0 0 2px var(--fg-color);
box-shadow: inset 0 0 0 2px var(--secondary-color);
}
&.icon {
@apply bg-transparent;
@apply text-fgLightColor;
@apply text-secondaryLight;
@apply fill-current;
@apply outline-none;
@apply border-none;
@@ -375,21 +375,21 @@ button {
&:not([disabled]):hover,
&:not([disabled]):active,
&:not([disabled]):focus {
@apply text-fgColor;
@apply text-secondary;
@apply fill-current;
@apply shadow-none;
}
}
&.primary {
@apply text-acColor;
@apply text-accent;
@apply px-6;
&:not([disabled]):hover,
&:not([disabled]):active,
&:not([disabled]):focus {
@apply bg-acColor;
@apply text-actColor;
@apply bg-accent;
@apply text-primary;
}
}
}
@@ -422,7 +422,7 @@ section:target {
@keyframes highlight {
50% {
box-shadow: 0 0 0 2px var(--ac-color);
box-shadow: 0 0 0 2px var(--accent-color);
}
}
@@ -451,8 +451,8 @@ pre,
code {
@apply flex;
@apply p-4;
@apply bg-bgDarkColor;
@apply text-fgColor;
@apply bg-primaryDark;
@apply text-secondary;
@apply font-mono;
@apply font-normal;
@apply transition;
@@ -466,7 +466,7 @@ code {
&:not([readonly]):not(.ace_editor):hover,
&:not([readonly]):not(.ace_editor):active,
&:not([readonly]):not(.ace_editor):focus {
box-shadow: inset 0 0 0 2px var(--fg-light-color);
box-shadow: inset 0 0 0 2px var(--secondary-light-color);
}
}
@@ -479,7 +479,7 @@ code {
&:hover,
&:active,
&:focus {
box-shadow: inset 0 0 0 2px var(--fg-light-color);
box-shadow: inset 0 0 0 2px var(--secondary-light-color);
}
}
@@ -518,7 +518,7 @@ pre {
@apply absolute;
@apply pointer-events-none;
@apply font-icon;
@apply text-fgLightColor;
@apply text-secondaryLight;
content: "\e313";
top: 16px;
@@ -538,7 +538,7 @@ select {
}
option {
@apply bg-bgColor;
@apply bg-primary;
}
input[type="checkbox"] {
@@ -551,7 +551,7 @@ input[type="checkbox"] {
&::before {
@apply border;
@apply border-fgColor;
@apply border-secondary;
@apply rounded-lg;
@apply inline-flex;
@apply items-center;
@@ -569,29 +569,29 @@ input[type="checkbox"] {
}
&:checked + label::before {
@apply bg-acColor;
@apply border-acColor;
@apply text-actColor;
@apply bg-accent;
@apply border-accent;
@apply text-primary;
}
}
.error:not(input),
.disabled:not(input),
[disabled] {
@apply bg-errColor;
@apply text-fgLightColor;
@apply bg-error;
@apply text-secondaryLight;
@apply fill-current;
@apply cursor-not-allowed;
&.icon {
@apply text-errColor;
@apply text-error;
@apply fill-current;
}
}
label {
@apply p-4;
@apply text-fgLightColor;
@apply text-secondaryLight;
@apply text-sm;
@apply transition;
@apply ease-in-out;
@@ -653,7 +653,7 @@ ol li {
}
.missing-data-response {
@apply text-fgLightColor;
@apply text-secondaryLight;
}
#response-details-wrapper {
@@ -707,8 +707,8 @@ section {
}
.toasted.info {
background-color: var(--ac-color) !important;
color: var(--act-color) !important;
background-color: var(--accent-color) !important;
color: var(--primary-color) !important;
font-weight: 700 !important;
}

90
assets/scss/themes.scss
View File

@@ -6,116 +6,110 @@
@mixin darkTheme {
// Background color
--bg-color: rgba(32, 33, 36, 1);
--primary-color: rgba(32, 33, 36, 1);
// Light Background color
--bg-light-color: rgba(255, 255, 255, 0.04);
--primary-light-color: rgba(255, 255, 255, 0.04);
// Dark Background color
--bg-dark-color: rgba(0, 0, 0, 0.2);
--primary-dark-color: rgba(0, 0, 0, 0.2);
// Text color
--fg-color: rgba(255, 255, 255, 0.9);
--secondary-color: rgba(255, 255, 255, 0.9);
// Light Text color
--fg-light-color: rgba(255, 255, 255, 0.5);
--secondary-light-color: rgba(255, 255, 255, 0.5);
// Border color
--brd-color: rgba(255, 255, 255, 0.05);
--divider-color: rgba(255, 255, 255, 0.05);
// Error color
--err-color: rgba(255, 255, 255, 0.05);
--error-color: rgba(255, 255, 255, 0.05);
// Tooltip color
--tt-color: rgba(48, 48, 48, 1);
--tooltip-color: rgba(48, 48, 48, 1);
// Editor theme
--editor-theme: "twilight";
// Active text color
--act-color: rgba(32, 33, 36, 1);
}
@mixin lightTheme {
// Background color
--bg-color: rgba(255, 255, 255, 1);
--primary-color: rgba(255, 255, 255, 1);
// Light Background color
--bg-light-color: rgba(0, 0, 0, 0.05);
--primary-light-color: rgba(0, 0, 0, 0.05);
// Dark Background color
--bg-dark-color: rgba(0, 0, 0, 0.02);
--primary-dark-color: rgba(0, 0, 0, 0.02);
// Text color
--fg-color: rgba(0, 0, 0, 0.9);
--secondary-color: rgba(0, 0, 0, 0.9);
// Light Text color
--fg-light-color: rgba(0, 0, 0, 0.6);
--secondary-light-color: rgba(0, 0, 0, 0.6);
// Border color
--brd-color: rgba(0, 0, 0, 0.1);
--divider-color: rgba(0, 0, 0, 0.1);
// Error color
--err-color: rgba(0, 0, 0, 0.1);
--error-color: rgba(0, 0, 0, 0.1);
// Tooltip color
--tt-color: rgba(255, 255, 255, 1);
--tooltip-color: rgba(255, 255, 255, 1);
// Editor theme
--editor-theme: "iplastic";
// Active text color
--act-color: rgba(255, 255, 255, 1);
}
@mixin blackTheme {
// Background color
--bg-color: rgba(0, 0, 0, 1);
--primary-color: rgba(0, 0, 0, 1);
// Light Background color
--bg-light-color: rgba(255, 255, 255, 0.02);
--primary-light-color: rgba(255, 255, 255, 0.02);
// Dark Background color
--bg-dark-color: rgba(255, 255, 255, 0.07);
--primary-dark-color: rgba(255, 255, 255, 0.07);
// Text color
--fg-color: rgba(255, 255, 255, 0.9);
--secondary-color: rgba(255, 255, 255, 0.9);
// Light Text color
--fg-light-color: rgba(255, 255, 255, 0.5);
--secondary-light-color: rgba(255, 255, 255, 0.5);
// Border color
--brd-color: rgba(255, 255, 255, 0.11);
--divider-color: rgba(255, 255, 255, 0.11);
// Error color
--err-color: rgba(255, 255, 255, 0.05);
--error-color: rgba(255, 255, 255, 0.05);
// Tooltip color
--tt-color: rgba(32, 32, 32, 1);
--tooltip-color: rgba(32, 32, 32, 1);
// Editor theme
--editor-theme: "vibrant_ink";
// Active text color
--act-color: rgba(0, 0, 0, 1);
}
@mixin blueTheme {
// Acent color
--ac-color: theme("colors.blue.400");
// Accent color
--accent-color: theme("colors.blue.400");
}
@mixin greenTheme {
// Acent color
--ac-color: theme("colors.green.400");
// Accent color
--accent-color: theme("colors.green.400");
}
@mixin tealTheme {
// Acent color
--ac-color: theme("colors.teal.400");
// Accent color
--accent-color: theme("colors.teal.400");
}
@mixin indigoTheme {
// Acent color
--ac-color: theme("colors.indigo.400");
// Accent color
--accent-color: theme("colors.indigo.400");
}
@mixin purpleTheme {
// Acent color
--ac-color: theme("colors.purple.400");
// Accent color
--accent-color: theme("colors.purple.400");
}
@mixin orangeTheme {
// Acent color
--ac-color: theme("colors.orange.400");
// Accent color
--accent-color: theme("colors.orange.400");
}
@mixin pinkTheme {
// Acent color
--ac-color: theme("colors.pink.400");
// Accent color
--accent-color: theme("colors.pink.400");
}
@mixin redTheme {
// Acent color
--ac-color: theme("colors.red.400");
// Accent color
--accent-color: theme("colors.red.400");
}
@mixin yellowTheme {
// Acent color
--ac-color: theme("colors.yellow.400");
// Accent color
--accent-color: theme("colors.yellow.400");
}
:root {

4
components/app/Footer.vue
View File

@@ -87,11 +87,11 @@ export default {
@apply flex-shrink-0;
@apply my-2;
@apply mx-4;
@apply text-fgLightColor;
@apply text-secondaryLight;
@apply text-sm;
&:hover {
@apply text-fgColor;
@apply text-secondary;
}
}
</style>

4
components/app/Header.vue
View File

@@ -30,7 +30,7 @@
font-mono
text-sm
rounded-md
bg-bgDarkColor
bg-primaryDark
hide-on-small-screen
"
>
@@ -309,7 +309,7 @@ $responsiveWidth: 768px;
@apply duration-150;
&:hover {
@apply text-acColor;
@apply text-accent;
}
}

4
components/app/Section.vue
View File

@@ -55,7 +55,7 @@ export default Vue.extend({
fieldset {
@apply my-4;
@apply rounded-lg;
@apply bg-bgDarkColor;
@apply bg-primaryDark;
@apply transition;
@apply ease-in-out;
@apply duration-150;
@@ -63,7 +63,7 @@ fieldset {
legend {
@apply px-4;
@apply text-fgColor;
@apply text-secondary;
@apply font-bold;
@apply cursor-pointer;
@apply transition;

31
components/app/Sidenav.vue
View File

@@ -160,7 +160,7 @@ $responsiveWidth: 768px;
@apply z-10;
@apply h-screen;
@apply p-2;
@apply bg-bgDarkColor;
@apply bg-primaryDark;
@apply transition;
@apply ease-in-out;
@apply duration-150;
@@ -187,16 +187,19 @@ nav.primary-nav {
@apply flex-shrink-0;
@apply p-4;
@apply rounded-full;
@apply bg-bgLightColor;
@apply text-fgLightColor;
@apply bg-primaryLight;
@apply text-secondaryLight;
@apply fill-current;
@apply outline-none;
@apply transition;
@apply ease-in-out;
@apply duration-150;
border-radius: 50%;
transition-property: all !important;
&:hover {
@apply text-fgColor;
@apply text-secondary;
@apply fill-current;
svg {
@@ -205,8 +208,8 @@ nav.primary-nav {
}
&.nuxt-link-exact-active {
@apply bg-acColor;
@apply text-actColor;
@apply bg-accent;
@apply text-primary;
@apply fill-current;
border-radius: 16px;
@@ -231,7 +234,7 @@ nav.secondary-nav {
@apply justify-center;
@apply border-t-2;
@apply border-dashed;
@apply border-brdColor;
@apply border-divider;
@apply pt-2;
@apply space-y-2;
@@ -242,8 +245,8 @@ nav.secondary-nav {
@apply flex-shrink-0;
@apply p-4;
@apply rounded-full;
@apply bg-bgDarkColor;
@apply text-fgLightColor;
@apply bg-primaryDark;
@apply text-secondaryLight;
@apply fill-current;
@apply outline-none;
@apply transition;
@@ -251,12 +254,12 @@ nav.secondary-nav {
@apply duration-150;
&:hover {
@apply text-fgColor;
@apply text-secondary;
@apply fill-current;
}
&.current {
@apply text-acColor;
@apply text-accent;
@apply fill-current;
}
}
@@ -270,7 +273,7 @@ nav.secondary-nav {
@apply h-auto;
@apply p-0;
@apply w-full;
@apply bg-bgColor;
@apply bg-primary;
@apply shadow-2xl;
}
@@ -278,7 +281,7 @@ nav.secondary-nav {
@apply flex-row;
@apply flex-nowrap;
@apply overflow-auto;
@apply bg-bgDarkColor;
@apply bg-primaryDark;
@apply space-y-0;
padding-bottom: env(safe-area-inset-bottom);
@@ -290,7 +293,7 @@ nav.secondary-nav {
&.nuxt-link-exact-active {
@apply bg-transparent;
@apply text-acColor;
@apply text-accent;
@apply fill-current;
svg {

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

@@ -3,7 +3,7 @@
<div
:class="[
'row-wrapper transition duration-150 ease-in-out',
{ 'bg-bgDarkColor': dragging },
{ 'bg-primaryDark': dragging },
]"
@dragover.prevent
@drop.prevent="dropEvent"
@@ -84,7 +84,7 @@
<li
v-for="(folder, index) in collection.folders"
:key="folder.name"
class="ml-8 border-l border-brdColor"
class="ml-8 border-l border-divider"
>
<CollectionsGraphqlFolder
:picked="picked"
@@ -106,7 +106,7 @@
<li
v-for="(request, index) in collection.requests"
:key="index"
class="ml-8 border-l border-brdColor"
class="ml-8 border-l border-divider"
>
<CollectionsGraphqlRequest
:picked="picked"
@@ -128,7 +128,7 @@
v-if="
collection.folders.length === 0 && collection.requests.length === 0
"
class="flex ml-8 border-l border-brdColor"
class="flex ml-8 border-l border-divider"
>
<p class="info">
<i class="material-icons">not_interested</i>

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

@@ -3,7 +3,7 @@
<div
:class="[
'row-wrapper transition duration-150 ease-in-out',
{ 'bg-bgDarkColor': dragging },
{ 'bg-primaryDark': dragging },
]"
@dragover.prevent
@drop.prevent="dropEvent"
@@ -67,7 +67,7 @@
<li
v-for="(subFolder, subFolderIndex) in folder.folders"
:key="subFolder.name"
class="ml-8 border-l border-brdColor"
class="ml-8 border-l border-divider"
>
<CollectionsGraphqlFolder
:picked="picked"
@@ -89,7 +89,7 @@
<li
v-for="(request, index) in folder.requests"
:key="index"
class="flex ml-8 border-l border-brdColor"
class="flex ml-8 border-l border-divider"
>
<CollectionsGraphqlRequest
:picked="picked"
@@ -114,7 +114,7 @@
folder.requests.length === 0
"
>
<li class="flex ml-8 border-l border-brdColor">
<li class="flex ml-8 border-l border-divider">
<p class="info">
<i class="material-icons">not_interested</i>
{{ $t("folder_empty") }}

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

@@ -3,7 +3,7 @@
<div
:class="[
'row-wrapper transition duration-150 ease-in-out',
{ 'bg-bgDarkColor': dragging },
{ 'bg-primaryDark': dragging },
]"
draggable="true"
@dragstart="dragStart"

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

@@ -49,7 +49,7 @@
:show="showModalImportExport"
@hide-modal="displayModalImportExport(false)"
/>
<div class="border-b row-wrapper border-brdColor">
<div class="border-b row-wrapper border-divider">
<button
v-if="showCollActions"
class="icon"

2
components/collections/index.vue
View File

@@ -52,7 +52,7 @@
@hide-modal="displayModalImportExport(false)"
@update-team-collections="updateTeamCollections"
/>
<div class="border-b row-wrapper border-brdColor">
<div class="border-b row-wrapper border-divider">
<button
v-if="
collectionsType.type == 'team-collections' &&

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

@@ -3,7 +3,7 @@
<div
:class="[
'row-wrapper transition duration-150 ease-in-out',
{ 'bg-bgDarkColor': dragging },
{ 'bg-primaryDark': dragging },
]"
@dragover.prevent
@drop.prevent="dropEvent"
@@ -93,7 +93,7 @@
<li
v-for="(folder, index) in collection.folders"
:key="index"
class="ml-8 border-l border-brdColor"
class="ml-8 border-l border-divider"
>
<CollectionsMyFolder
:folder="folder"
@@ -117,7 +117,7 @@
<li
v-for="(request, index) in collection.requests"
:key="index"
class="ml-8 border-l border-brdColor"
class="ml-8 border-l border-divider"
>
<CollectionsMyRequest
:request="request"
@@ -144,7 +144,7 @@
(collection.requests == undefined ||
collection.requests.length === 0)
"
class="flex ml-8 border-l border-brdColor"
class="flex ml-8 border-l border-divider"
>
<p class="info">
<i class="material-icons">not_interested</i>

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

@@ -3,7 +3,7 @@
<div
:class="[
'row-wrapper transition duration-150 ease-in-out',
{ 'bg-bgDarkColor': dragging },
{ 'bg-primaryDark': dragging },
]"
@dragover.prevent
@drop.prevent="dropEvent"
@@ -73,7 +73,7 @@
<li
v-for="(subFolder, subFolderIndex) in folder.folders"
:key="subFolder.name"
class="ml-8 border-l border-brdColor"
class="ml-8 border-l border-divider"
>
<CollectionsMyFolder
:folder="subFolder"
@@ -97,7 +97,7 @@
<li
v-for="(request, index) in folder.requests"
:key="index"
class="flex ml-8 border-l border-brdColor"
class="flex ml-8 border-l border-divider"
>
<CollectionsMyRequest
:request="request"
@@ -124,7 +124,7 @@
folder.requests.length === 0
"
>
<li class="flex ml-8 border-l border-brdColor">
<li class="flex ml-8 border-l border-divider">
<p class="info">
<i class="material-icons">not_interested</i>
{{ $t("folder_empty") }}

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

@@ -3,7 +3,7 @@
<div
:class="[
'row-wrapper transition duration-150 ease-in-out',
{ 'bg-bgDarkColor': dragging },
{ 'bg-primaryDark': dragging },
]"
draggable="true"
@dragstart="dragStart"

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

@@ -89,7 +89,7 @@
<li
v-for="(folder, index) in collection.children"
:key="folder.title"
class="ml-8 border-l border-brdColor"
class="ml-8 border-l border-divider"
>
<CollectionsTeamsFolder
:folder="folder"
@@ -114,7 +114,7 @@
<li
v-for="(request, index) in collection.requests"
:key="index"
class="ml-8 border-l border-brdColor"
class="ml-8 border-l border-divider"
>
<CollectionsTeamsRequest
:request="request.request"
@@ -140,7 +140,7 @@
(collection.requests == undefined ||
collection.requests.length === 0)
"
class="flex ml-8 border-l border-brdColor"
class="flex ml-8 border-l border-divider"
>
<p class="info">
<i class="material-icons">not_interested</i>

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

@@ -75,7 +75,7 @@
<li
v-for="(subFolder, subFolderIndex) in folder.children"
:key="subFolder.name"
class="ml-8 border-l border-brdColor"
class="ml-8 border-l border-divider"
>
<CollectionsTeamsFolder
:folder="subFolder"
@@ -100,7 +100,7 @@
<li
v-for="(request, index) in folder.requests"
:key="index"
class="flex ml-8 border-l border-brdColor"
class="flex ml-8 border-l border-divider"
>
<CollectionsTeamsRequest
:request="request.request"
@@ -124,7 +124,7 @@
(folder.requests == undefined || folder.requests.length === 0)
"
>
<li class="flex ml-8 border-l border-brdColor">
<li class="flex ml-8 border-l border-divider">
<p class="info">
<i class="material-icons">not_interested</i>
{{ $t("folder_empty") }}

2
components/docs/Folder.vue
View File

@@ -29,7 +29,7 @@ export default {
@apply flex-1;
@apply p-4;
@apply border-l;
@apply border-brdColor;
@apply border-divider;
@apply mt-4;
.material-icons {

6
components/docs/Request.vue
View File

@@ -117,7 +117,7 @@ export default {
@apply flex-1;
@apply p-4;
@apply border;
@apply border-brdColor;
@apply border-divider;
@apply rounded-lg;
@apply mt-4;
@@ -136,10 +136,10 @@ export default {
@apply justify-center;
@apply flex-1;
@apply p-4;
@apply text-fgLightColor;
@apply text-secondaryLight;
@apply border-b;
@apply border-dashed;
@apply border-brdColor;
@apply border-divider;
@apply m-0;
&:last-child {

4
components/environments/Edit.vue
View File

@@ -38,8 +38,8 @@
border-b border-dashed
divide-y
md:divide-x
border-brdColor
divide-dashed divide-brdColor
border-divider
divide-dashed divide-divider
md:divide-y-0
"
:class="{ 'border-t': index == 0 }"

2
components/environments/index.vue
View File

@@ -40,7 +40,7 @@
:show="showModalImportExport"
@hide-modal="displayModalImportExport(false)"
/>
<div class="border-b row-wrapper border-brdColor">
<div class="border-b row-wrapper border-divider">
<div>
<button class="icon" @click="displayModalAdd(true)">
<i class="material-icons">add</i>

2
components/firebase/Email.vue
View File

@@ -27,7 +27,7 @@
</div>
<div v-else slot="body" class="flex flex-col items-center">
<div class="flex justify-center max-w-md p-4 items-center flex-col">
<i class="material-icons text-acColor" style="font-size: 64px">
<i class="material-icons text-accent" style="font-size: 64px">
verified
</i>
<h3 class="font-bold my-2 text-center text-lg">

2
components/firebase/Feeds.vue
View File

@@ -1,7 +1,7 @@
<template>
<div
v-if="fb.currentFeeds.length !== 0"
class="divide-y virtual-list divide-dashed divide-brdColor"
class="divide-y virtual-list divide-dashed divide-divider"
>
<ul v-for="feed in fb.currentFeeds" :key="feed.id" class="flex-col">
<div data-test="list-item" class="show-on-large-screen">

2
components/firebase/Inputform.vue
View File

@@ -11,7 +11,7 @@
@keyup.enter="formPost"
/>
</div>
<div class="border-b show-on-large-screen border-brdColor">
<div class="border-b show-on-large-screen border-divider">
<input
v-model="label"
:aria-label="$t('label')"

13
components/graphql/Field.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="p-2 m-2 border-b border-dashed border-brdColor">
<div class="p-2 m-2 border-b border-dashed border-divider">
<div class="field-title" :class="{ 'field-highlighted': isHighlighted }">
{{ fieldName }}
<span v-if="fieldArgs.length > 0">
@@ -19,7 +19,10 @@
:jump-type-callback="jumpTypeCallback"
/>
</div>
<div v-if="gqlField.description" class="mt-2 text-fgLightColor field-desc">
<div
v-if="gqlField.description"
class="mt-2 text-secondaryLight field-desc"
>
{{ gqlField.description }}
</div>
<div
@@ -41,7 +44,7 @@
</div>
<div v-if="fieldArgs.length > 0">
<h5 class="my-2 text-xs">ARGUMENTS:</h5>
<div class="px-4 border-l-2 border-acColor">
<div class="px-4 border-l-2 border-accent">
<div v-for="(field, index) in fieldArgs" :key="index">
{{ field.name }}:
<GraphqlTypeLink
@@ -50,7 +53,7 @@
/>
<div
v-if="field.description"
class="mt-2 text-fgLightColor field-desc"
class="mt-2 text-secondaryLight field-desc"
>
{{ field.description }}
</div>
@@ -82,6 +85,6 @@ export default {
<style scoped lang="scss">
.field-highlighted {
@apply border-b-2;
@apply border-acColor;
@apply border-accent;
}
</style>

10
components/graphql/Type.vue
View File

@@ -4,14 +4,14 @@
class="font-bold type-title"
:class="{ 'type-highlighted': isHighlighted }"
>
<span v-if="isInput" class="font-normal text-acColor">input </span>
<span v-else-if="isInterface" class="font-normal text-acColor"
<span v-if="isInput" class="font-normal text-accent">input </span>
<span v-else-if="isInterface" class="font-normal text-accent"
>interface
</span>
<span v-else-if="isEnum" class="font-normal text-acColor">enum </span>
<span v-else-if="isEnum" class="font-normal text-accent">enum </span>
{{ gqlType.name }}
</div>
<div v-if="gqlType.description" class="mt-2 text-fgLightColor type-desc">
<div v-if="gqlType.description" class="mt-2 text-secondaryLight type-desc">
{{ gqlType.description }}
</div>
<div v-if="interfaces.length > 0" class="mb-2">
@@ -104,6 +104,6 @@ export default {
<style scoped lang="scss">
.type-highlighted {
@apply text-acColor;
@apply text-accent;
}
</style>

2
components/graphql/TypeLink.vue
View File

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

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

@@ -82,7 +82,7 @@
type="text"
readonly
:value="`${line}`"
class="pt-0 mt-0 text-sm bg-transparent text-fgLightColor"
class="pt-0 mt-0 text-sm bg-transparent text-secondaryLight"
/>
</li>
</div>
@@ -95,7 +95,7 @@
type="text"
readonly
:value="entry.time"
class="pt-0 mt-0 text-sm bg-transparent text-fgLightColor"
class="pt-0 mt-0 text-sm bg-transparent text-secondaryLight"
/>
</li>
<li>
@@ -105,7 +105,7 @@
readonly
:value="`Duration: ${entry.duration}ms`"
:placeholder="$t('no_duration')"
class="pt-0 mt-0 text-sm bg-transparent text-fgLightColor"
class="pt-0 mt-0 text-sm bg-transparent text-secondaryLight"
/>
</li>
<!-- <li>
@@ -115,7 +115,7 @@
readonly
:value="entry.preRequestScript"
:placeholder="$t('no_prerequest_script')"
class="pt-0 mt-0 text-sm bg-transparent text-fgLightColor"
class="pt-0 mt-0 text-sm bg-transparent text-secondaryLight"
/>
</li> -->
</div>

4
components/history/index.vue
View File

@@ -10,7 +10,7 @@
/>
</div>
<div
class="divide-y virtual-list divide-dashed divide-brdColor"
class="divide-y virtual-list divide-dashed divide-divider"
:class="{ filled: filteredHistory.length }"
>
<ul v-for="(entry, index) in filteredHistory" :key="`entry-${index}`">
@@ -42,7 +42,7 @@
<p v-if="history.length === 0" class="info">
<i class="material-icons">schedule</i> {{ $t("history_empty") }}
</p>
<div v-if="history.length !== 0" class="rounded-b-lg bg-bgDarkColor">
<div v-if="history.length !== 0" class="rounded-b-lg bg-primaryDark">
<div v-if="!isClearingHistory" class="row-wrapper">
<button
data-testid="clear_history"

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

@@ -87,7 +87,7 @@
readonly
:value="`${entry.url}${entry.path}`"
:placeholder="$t('no_url')"
class="pt-0 mt-0 text-sm bg-transparent text-fgLightColor"
class="pt-0 mt-0 text-sm bg-transparent text-secondaryLight"
/>
</li>
</div>
@@ -100,7 +100,7 @@
type="text"
readonly
:value="entry.time"
class="pt-0 mt-0 text-sm bg-transparent text-fgLightColor"
class="pt-0 mt-0 text-sm bg-transparent text-secondaryLight"
/>
</li>
<li>
@@ -110,7 +110,7 @@
readonly
:value="`Duration: ${entry.duration}ms`"
:placeholder="$t('no_duration')"
class="pt-0 mt-0 text-sm bg-transparent text-fgLightColor"
class="pt-0 mt-0 text-sm bg-transparent text-secondaryLight"
/>
</li>
<!-- <li>
@@ -120,7 +120,7 @@
readonly
:value="entry.preRequestScript"
:placeholder="$t('no_prerequest_script')"
class="pt-0 mt-0 text-sm bg-transparent text-fgLightColor"
class="pt-0 mt-0 text-sm bg-transparent text-secondaryLight"
/>
</li> -->
</div>

6
components/http/BodyParameters.vue
View File

@@ -23,8 +23,8 @@
border-b border-dashed
divide-y
md:divide-x
border-brdColor
divide-dashed divide-brdColor
border-divider
divide-dashed divide-divider
md:divide-y-0
"
:class="{ 'border-t': index == 0 }"
@@ -238,7 +238,7 @@ export default {
@apply flex-1;
@apply whitespace-nowrap;
@apply overflow-auto;
@apply bg-bgDarkColor;
@apply bg-primaryDark;
.file-chips-wrapper {
@apply flex;

4
components/http/Headers.vue
View File

@@ -23,8 +23,8 @@
border-b border-dashed
divide-y
md:divide-x
border-brdColor
divide-dashed divide-brdColor
border-divider
divide-dashed divide-divider
md:divide-y-0
"
:class="{ 'border-t': index == 0 }"

4
components/http/Parameters.vue
View File

@@ -23,8 +23,8 @@
border-b border-dashed
divide-y
md:divide-x
border-brdColor
divide-dashed divide-brdColor
border-divider
divide-dashed divide-divider
md:divide-y-0
"
:class="{ 'border-t': index == 0 }"

4
components/realtime/Log.vue
View File

@@ -43,8 +43,8 @@ export default {
<style scoped lang="scss">
.realtime-log {
@apply p-4;
@apply bg-bgDarkColor;
@apply text-fgColor;
@apply bg-primaryDark;
@apply text-secondary;
@apply overflow-auto;
height: 256px;

12
components/realtime/Mqtt.vue
View File

@@ -57,7 +57,7 @@
v-model="msg"
type="text"
spellcheck="false"
class="border-dashed md:border-l border-brdColor"
class="border-dashed md:border-l border-divider"
/>
</li>
<div>
@@ -172,7 +172,7 @@ export default {
{
payload: this.$t("connecting_to", { name: this.url }),
source: "info",
color: "var(--ac-color)",
color: "var(--accent-color)",
ts: new Date().toLocaleTimeString(),
},
]
@@ -204,7 +204,7 @@ export default {
this.log.push({
payload: this.$t("connected_to", { name: this.url }),
source: "info",
color: "var(--ac-color)",
color: "var(--accent-color)",
ts: new Date().toLocaleTimeString(),
})
this.$toast.success(this.$t("connected"), {
@@ -215,7 +215,7 @@ export default {
this.log.push({
payload: `Message: ${payloadString} arrived on topic: ${destinationName}`,
source: "info",
color: "var(--ac-color)",
color: "var(--accent-color)",
ts: new Date().toLocaleTimeString(),
})
},
@@ -257,7 +257,7 @@ export default {
payload: `Published message: ${this.msg} to topic: ${this.pub_topic}`,
ts: new Date().toLocaleTimeString(),
source: "info",
color: "var(--ac-color)",
color: "var(--accent-color)",
})
} catch (e) {
this.log.push({
@@ -302,7 +302,7 @@ export default {
(this.subscriptionState ? "subscribed" : "unsubscribed") +
` to topic: ${this.sub_topic}`,
source: "info",
color: "var(--ac-color)",
color: "var(--accent-color)",
ts: new Date().toLocaleTimeString(),
})
},

8
components/realtime/Socketio.vue
View File

@@ -81,8 +81,8 @@
border-b border-dashed
divide-y
md:divide-x
border-brdColor
divide-dashed divide-brdColor
border-divider
divide-dashed divide-divider
md:divide-y-0
"
>
@@ -197,7 +197,7 @@ export default {
{
payload: this.$t("connecting_to", { name: this.url }),
source: "info",
color: "var(--ac-color)",
color: "var(--accent-color)",
},
]
@@ -216,7 +216,7 @@ export default {
{
payload: this.$t("connected_to", { name: this.url }),
source: "info",
color: "var(--ac-color)",
color: "var(--accent-color)",
ts: new Date().toLocaleTimeString(),
},
]

4
components/realtime/Sse.vue
View File

@@ -105,7 +105,7 @@ export default {
{
payload: this.$t("connecting_to", { name: this.server }),
source: "info",
color: "var(--ac-color)",
color: "var(--accent-color)",
},
]
if (typeof EventSource !== "undefined") {
@@ -117,7 +117,7 @@ export default {
{
payload: this.$t("connected_to", { name: this.server }),
source: "info",
color: "var(--ac-color)",
color: "var(--accent-color)",
ts: new Date().toLocaleTimeString(),
},
]

4
components/realtime/Websocket.vue
View File

@@ -139,7 +139,7 @@ export default {
{
payload: this.$t("connecting_to", { name: this.url }),
source: "info",
color: "var(--ac-color)",
color: "var(--accent-color)",
},
]
try {
@@ -150,7 +150,7 @@ export default {
{
payload: this.$t("connected_to", { name: this.url }),
source: "info",
color: "var(--ac-color)",
color: "var(--accent-color)",
ts: new Date().toLocaleTimeString(),
},
]

2
components/smart/AccentModePicker.vue
View File

@@ -29,7 +29,7 @@
cursor-pointer
hover:shadow-none
"
:class="[`text-${color}-400`, { 'bg-actColor': color === active }]"
:class="[`text-${color}-400`, { 'bg-primary': color === active }]"
@click="setActiveColor(color)"
>
<i class="material-icons">lens</i>

12
components/smart/AceEditor.vue
View File

@@ -270,11 +270,11 @@ export default {
@apply items-center;
@apply flex-grow-0;
@apply flex-shrink-0;
@apply text-fgLightColor;
@apply text-secondaryLight;
@apply text-sm;
&:hover {
@apply text-fgColor;
@apply text-secondary;
@apply cursor-pointer;
}
@@ -289,11 +289,11 @@ export default {
@apply absolute;
@apply z-50;
@apply top-9;
@apply bg-bgColor;
@apply bg-primary;
@apply max-h-60;
@apply overflow-auto;
@apply shadow-lg;
@apply text-fgLightColor;
@apply text-secondaryLight;
@apply overscroll-none;
border-radius: 0 0 8px 8px;
@@ -304,8 +304,8 @@ export default {
@apply py-1;
&:hover {
@apply text-fgColor;
@apply bg-bgLightColor;
@apply text-secondary;
@apply bg-primaryLight;
}
}
}

6
components/smart/AutoComplete.vue
View File

@@ -194,7 +194,7 @@ export default {
ul.suggestions {
@apply hidden;
@apply bg-actColor;
@apply bg-primary;
@apply absolute;
@apply mx-2;
@apply left-0;
@@ -222,8 +222,8 @@ export default {
&:hover,
&.active {
@apply bg-acColor;
@apply text-actColor;
@apply bg-accent;
@apply text-primary;
@apply cursor-pointer;
}
}

8
components/smart/ColorModePicker.vue
View File

@@ -30,12 +30,12 @@
rounded-full
cursor-pointer
border-collapseer-2
text-fgLightColor
hover:text-fgColor
text-secondaryLight
hover:text-secondary
"
:class="[
{ 'bg-actColor': color === $colorMode.preference },
{ 'text-acColor hover:text-acColor': color === $colorMode.value },
{ 'bg-primary': color === $colorMode.preference },
{ 'text-accent hover:text-accent': color === $colorMode.value },
]"
@click="$colorMode.preference = color"
>

6
components/smart/DeletableChip.vue
View File

@@ -15,15 +15,15 @@
@apply rounded-lg;
@apply m-1;
@apply pl-4;
@apply bg-bgDarkColor;
@apply text-fgColor;
@apply bg-primaryDark;
@apply text-secondary;
@apply font-mono;
@apply font-normal;
@apply transition;
@apply ease-in-out;
@apply duration-150;
@apply border;
@apply border-brdColor;
@apply border-divider;
}
.close-button {

6
components/smart/HideMenu.vue
View File

@@ -9,9 +9,9 @@
justify-center
px-2
py-1
bg-brdColor
text-fgLightColor
hover:text-fgColor
bg-divider
text-secondaryLight
hover:text-secondary
my-4
z-10
rounded-l

8
components/smart/Modal.vue
View File

@@ -63,11 +63,11 @@ export default {
@apply transition;
@apply ease-in-out;
@apply duration-150;
@apply bg-bgColor;
@apply bg-primary;
@apply rounded-lg;
@apply shadow-2xl;
@apply border;
@apply border-ttColor;
@apply border-tooltip;
max-height: calc(100vh - 128px);
max-width: 640px;
@@ -121,12 +121,12 @@ export default {
&.top {
top: 68px;
background: linear-gradient(to bottom, var(--bg-color), transparent);
background: linear-gradient(to bottom, var(--primary-color), transparent);
}
&.bottom {
bottom: 16px;
background: linear-gradient(to top, var(--bg-color), transparent);
background: linear-gradient(to top, var(--primary-color), transparent);
}
}
</style>

10
components/smart/Tabs.vue
View File

@@ -83,7 +83,7 @@ export default {
@apply justify-center;
@apply py-2;
@apply px-4;
@apply text-fgLightColor;
@apply text-secondaryLight;
@apply text-sm;
@apply rounded-lg;
@apply cursor-pointer;
@@ -96,17 +96,17 @@ export default {
}
&:hover {
@apply text-fgColor;
@apply text-secondary;
}
}
&:focus a {
@apply text-fgColor;
@apply text-secondary;
}
&.is-active a {
@apply bg-brdColor;
@apply text-fgColor;
@apply bg-divider;
@apply text-secondary;
}
}
}

10
components/smart/Toggle.vue
View File

@@ -29,11 +29,11 @@ export default {
<style scoped lang="scss">
$useBorder: false;
$borderColor: var(--fg-light-color);
$activeColor: var(--ac-color);
$inactiveColor: var(--fg-light-color);
$inactiveHandleColor: var(--bg-color);
$activeHandleColor: var(--act-color);
$borderColor: var(--secondary-light-color);
$activeColor: var(--accent-color);
$inactiveColor: var(--secondary-light-color);
$inactiveHandleColor: var(--primary-color);
$activeHandleColor: var(--primary-color);
$width: 32px;
$height: 16px;
$handleSpacing: 4px;

6
components/smart/UrlField.vue
View File

@@ -1,4 +1,4 @@
<!--
<!--
This code is a complete adaptation of the work done here
https://github.com/SyedWasiHaider/vue-highlightable-input
-->
@@ -392,14 +392,14 @@ export default {
<style lang="scss">
.VAR {
@apply font-bold;
@apply text-acColor;
@apply text-accent;
}
.url-field-container {
@apply inline-grid;
}
.url-field {
@apply border-dashed;
@apply border-brdColor;
@apply border-divider;
@apply whitespace-nowrap;
@apply overflow-x-auto;
@apply resize-none;

8
components/teams/Edit.vue
View File

@@ -40,8 +40,8 @@
border-b border-dashed
divide-y
md:divide-x
border-brdColor
divide-dashed divide-brdColor
border-divider
divide-dashed divide-divider
md:divide-y-0
"
:class="{ 'border-t': index == 0 }"
@@ -119,8 +119,8 @@
border-b border-dashed
divide-y
md:divide-x
border-brdColor
divide-dashed divide-brdColor
border-divider
divide-dashed divide-divider
md:divide-y-0
"
>

13
components/teams/Team.vue
View File

@@ -101,16 +101,3 @@ export default {
},
}
</script>
<style scoped lang="scss">
ul {
display: flex;
flex-direction: column;
}
ul li {
display: flex;
padding-left: 16px;
border-left: 1px solid var(--brd-color);
}
</style>

2
helpers/teams/TeamMemberAdapter.ts
View File

@@ -75,8 +75,6 @@ export default class TeamMemberAdapter {
},
})
debugger
result.push(...response.data.team.members)
if ((response.data.team.members as any[]).length === 0) break

2
layouts/error.vue
View File

@@ -2,7 +2,7 @@
<div class="page page-error">
<h1 class="mb-4 font-mono text-4xl">{{ statusCode }}</h1>
<h3 class="mb-4 font-mono text-xs">{{ message }}</h3>
<p class="mt-4 border-t border-ttColor">
<p class="mt-4 border-t border-tooltip">
<nuxt-link to="/">
<button class="icon">
<i class="material-icons">home</i>

4
nuxt.config.js
View File

@@ -7,8 +7,8 @@ export const options = {
description:
"Helps you create requests faster, saving precious time on development.",
loading: {
color: "var(--ac-color)",
background: "var(--bg-color)",
color: "var(--accent-color)",
background: "var(--primary-color)",
},
app: {
background: "#202124",

4
pages/graphql.vue
View File

@@ -63,8 +63,8 @@
border-b border-dashed
divide-y
md:divide-x
border-brdColor
divide-dashed divide-brdColor
border-divider
divide-dashed divide-divider
md:divide-y-0
"
:class="{ 'border-t': index == 0 }"

2
pages/index.vue
View File

@@ -42,7 +42,7 @@
<input
v-if="!EXPERIMENTAL_URL_BAR_ENABLED"
:class="{ error: !isValidURL }"
class="border-dashed md:border-l border-brdColor"
class="border-dashed md:border-l border-divider"
@keyup.enter="isValidURL ? sendRequest() : null"
id="url"
name="url"

19
tailwind.config.js
View File

@@ -22,16 +22,15 @@ export default {
},
extend: {
colors: {
bgColor: "var(--bg-color)",
bgLightColor: "var(--bg-light-color)",
bgDarkColor: "var(--bg-dark-color)",
fgColor: "var(--fg-color)",
fgLightColor: "var(--fg-light-color)",
brdColor: "var(--brd-color)",
errColor: "var(--err-color)",
acColor: "var(--ac-color)",
actColor: "var(--act-color)",
ttColor: "var(--tt-color)",
primary: "var(--primary-color)",
primaryLight: "var(--primary-light-color)",
primaryDark: "var(--primary-dark-color)",
secondary: "var(--secondary-color)",
secondaryLight: "var(--secondary-light-color)",
accent: "var(--accent-color)",
divider: "var(--divider-color)",
error: "var(--error-color)",
tooltip: "var(--tooltip-color)",
blue: colors.blue,
green: colors.green,
teal: colors.teal,