diff --git a/README.md b/README.md index 047d83fb9..b3651ca3a 100644 --- a/README.md +++ b/README.md @@ -103,8 +103,8 @@ --- -- Choose theme: System, Light, Dark (default) and Black -- Choose accent color: Blue, Green (default), Teal, Indigo, Purple, Orange, Pink, Red, and Yellow +- Choose theme: System (default), Light, Dark and Black +- Choose accent color: Green (default), Teal, Blue, Indigo, Purple, Yellow, Orange, Red and Pink - Toggle auto-scroll to response

diff --git a/assets/icons/github.svg b/assets/icons/github.svg index 18e9450e0..12b8a3dee 100644 --- a/assets/icons/github.svg +++ b/assets/icons/github.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/assets/icons/google.svg b/assets/icons/google.svg index 0642ef122..9618859b1 100644 --- a/assets/icons/google.svg +++ b/assets/icons/google.svg @@ -1 +1 @@ - + diff --git a/assets/icons/graphql.svg b/assets/icons/graphql.svg new file mode 100644 index 000000000..bebb5a7a0 --- /dev/null +++ b/assets/icons/graphql.svg @@ -0,0 +1 @@ + diff --git a/assets/scss/styles.scss b/assets/scss/styles.scss index dc8c55d33..b03f6aaf1 100644 --- a/assets/scss/styles.scss +++ b/assets/scss/styles.scss @@ -15,17 +15,10 @@ } ::-webkit-scrollbar-thumb { - @apply bg-divider; + @apply bg-divider bg-clip-content; @apply rounded-full; - @apply border-solid; - @apply border-4; - @apply border-transparent; - @apply bg-clip-content; - - &:hover { - @apply bg-dividerDark; - @apply bg-clip-content; - } + @apply border-solid border-4 border-transparent; + @apply hover:(bg-dividerDark bg-clip-content); } ::-webkit-scrollbar { @@ -42,23 +35,18 @@ @apply text-primary; } -::placeholder { - @apply text-secondaryLight; - @apply opacity-25; -} - html { scroll-behavior: smooth; } body { @apply bg-primary; - @apply text-secondary; - @apply !text-sm; + @apply text-secondary text-xs; @apply font-medium; @apply select-none; @apply overflow-x-hidden; + overflow: overlay; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } @@ -73,7 +61,8 @@ body { } .fade-enter, -.fade-leave-to .page-enter, +.fade-leave-to, +.page-enter, .page-leave-to, .layout-enter, .layout-leave-to { @@ -81,14 +70,14 @@ body { } .material-icons { - font-size: 1.25rem !important; + font-size: 1rem !important; } .svg-icons { @apply inline-flex; @apply flex-shrink-0; - @apply h-5; - @apply w-5; + @apply h-4; + @apply w-4; } a { @@ -96,27 +85,36 @@ a { @apply text-current; @apply no-underline; @apply outline-none; - @apply focus-visible:ring; - @apply focus-visible:ring-inset; - @apply focus-visible:ring-accent; + @apply transition; &.link { @apply items-center; + @apply px-2 py-1; + @apply -mx-2 -my-1; @apply text-accent; - @apply hover:text-accent; - @apply focus:text-accent; + @apply hover:text-accentDark; + @apply focus-visible:(ring ring-inset ring-accent); } } .tippy-popper { .tooltip-theme { - @apply bg-secondary; - @apply text-primaryLight; - @apply text-xs; + @apply bg-tooltip; + @apply text-primary text-xs; @apply font-semibold; - @apply px-2; - @apply px-4; + @apply py-1 px-2; @apply shadow; + + kbd { + @apply first:ml-2; + @apply last:-mr-1; + @apply font-sans; + @apply bg-secondaryDark; + @apply text-primaryDark; + @apply rounded; + @apply px-1; + @apply ml-1; + } } .popover-theme { @@ -124,59 +122,61 @@ a { @apply text-secondary; @apply p-2; @apply shadow-lg; + @apply focus:outline-none; } &[x-placement^="top"] .tippy-tooltip .tippy-arrow { - border-top-color: var(--primary-color); + @apply border-t-primary; } &[x-placement^="bottom"] .tippy-tooltip .tippy-arrow { - border-bottom-color: var(--primary-color); + @apply border-b-primary; } &[x-placement^="left"] .tippy-tooltip .tippy-arrow { - border-left-color: var(--primary-color); + @apply border-l-primary; } &[x-placement^="right"] .tippy-tooltip .tippy-arrow { - border-right-color: var(--primary-color); + @apply border-r-primary; } } .tippy-content > div { - @apply flex; - @apply flex-col; - @apply max-h-64; - @apply overflow-y-auto; + @apply flex flex-col; + @apply max-h-48; @apply items-stretch; + @apply overflow-y-auto; + + &::-webkit-scrollbar { + @apply hidden; + } } hr { - @apply border-b; - @apply border-dividerLight; + @apply border-b border-dividerLight; } .heading { @apply font-bold; - @apply text-secondaryDark; - @apply text-lg; + @apply text-secondaryDark text-lg; } +.textarea, .input, .select { - @apply flex; + @apply flex flex-1; @apply w-full; - @apply px-4; - @apply py-2; + @apply px-4 py-2; @apply bg-primary; @apply truncate; - @apply rounded-lg; + @apply rounded; + @apply text-xs; @apply font-semibold; - @apply border-2; - @apply border-divider; + @apply border border-divider; @apply transition; - @apply focus:outline-none; - @apply focus:border-accent; + @apply focus:(outline-none border-accent); + @apply disabled:cursor-not-allowed; } .input[type="file"], @@ -187,12 +187,11 @@ hr { pre.ace_editor { @apply font-mono; - @apply z-0; @apply resize-none; + @apply z-0; } -select { - @apply cursor-pointer; +.select { @apply appearance-none; &::-ms-expand { @@ -203,20 +202,38 @@ select { .select-wrapper { @apply relative; @apply w-full; + @apply cursor-pointer; &::after { - @apply inline-block; @apply absolute; + @apply inline-block; @apply pointer-events-none; @apply font-icon; @apply text-secondaryLight; - @apply top-3; + @apply top-2.5; @apply right-3; content: "\e313"; } } +.search-wrapper { + @apply relative; + @apply w-full; + + &::after { + @apply absolute; + @apply inline-block; + @apply pointer-events-none; + @apply font-icon; + @apply text-secondaryLight; + @apply top-2; + @apply left-3; + + content: "\e8b6"; + } +} + input[type="checkbox"] { @apply hidden; @@ -226,9 +243,8 @@ input[type="checkbox"] { @apply cursor-pointer; &::before { - @apply border; - @apply border-secondary; - @apply rounded-lg; + @apply border border-secondary; + @apply rounded; @apply inline-flex; @apply items-center; @apply justify-center; @@ -249,19 +265,19 @@ input[type="checkbox"] { } .info-response { - @apply text-pink-400; + @apply text-pink-500; } .success-response { - @apply text-green-400; + @apply text-green-500; } .redir-response { - @apply text-yellow-400; + @apply text-yellow-500; } .cl-error-response { - @apply text-red-400; + @apply text-red-500; } .sv-error-response { @@ -278,8 +294,6 @@ input[type="checkbox"] { textarea { @apply m-0; @apply w-full; - - line-height: 1; } .covers-response { @@ -292,37 +306,41 @@ input[type="checkbox"] { } .toasted-container { - margin-bottom: 68px; - .toasted { - justify-content: space-between !important; + &.toasted-primary { + @apply bg-tooltip; + @apply text-primary text-xs; + @apply justify-start; + @apply shadow; + @apply font-semibold; + + .action { + @apply ml-auto; + @apply transition; + @apply text-current; + @apply hover:(opacity-75 no-underline); + } + } &.info { - background-color: var(--accent-color) !important; - color: var(--primary-color) !important; - font-weight: 700 !important; + @apply !bg-accent; } - &.bubble .action { - color: inherit !important; + &.error { + @apply !bg-red-200; + @apply !text-red-800; } - .action { - margin-left: auto !important; + &.success { + @apply !bg-green-200; + @apply !text-green-800; } } } -@media (max-width: 767px) { - main { - margin-bottom: env(safe-area-inset-bottom); - } -} - .splitpanes__splitter { @apply relative; @apply bg-primaryLight; - @apply transition; } .splitpanes--vertical > .splitpanes__splitter { @@ -338,7 +356,7 @@ input[type="checkbox"] { @apply inset-0; @apply bg-dividerLight; @apply opacity-0; - @apply z-1; + @apply z-30; @apply transition; content: ""; @@ -347,7 +365,7 @@ input[type="checkbox"] { .splitpanes__splitter::after { @apply absolute; @apply inset-0; - @apply z-1; + @apply z-30; @apply transition; @apply flex; @apply items-center; @@ -379,3 +397,9 @@ input[type="checkbox"] { bottom: -2px; width: 100%; } + +@media (max-width: 767px) { + main { + margin-bottom: env(safe-area-inset-bottom); + } +} diff --git a/assets/scss/themes.scss b/assets/scss/themes.scss index eea28fbae..703f44f0b 100644 --- a/assets/scss/themes.scss +++ b/assets/scss/themes.scss @@ -1,5 +1,5 @@ @mixin baseTheme { - --font-sans: "Montserrat", "sans-serif"; + --font-sans: "Inter", "sans-serif"; --font-mono: "Roboto Mono", "monospace"; --font-icon: "Material Icons"; } @@ -8,25 +8,25 @@ // Background color --primary-color: theme("colors.true-gray.900"); // Light Background color - --primary-light-color: theme("colors.true-gray.800"); + --primary-light-color: theme("colors.dark.600"); // Dark Background color --primary-dark-color: theme("colors.dark.900"); // Text color --secondary-color: theme("colors.true-gray.400"); // Light Text color - --secondary-light-color: theme("colors.true-gray.200"); + --secondary-light-color: theme("colors.true-gray.500"); // Dark Text color - --secondary-dark-color: theme("colors.white"); + --secondary-dark-color: theme("colors.true-gray.100"); // Border color - --divider-color: theme("colors.true-gray.700"); + --divider-color: theme("colors.true-gray.800"); // Light Border color - --divider-light-color: theme("colors.true-gray.800"); + --divider-light-color: theme("colors.dark.500"); // Dark Border color - --divider-dark-color: theme("colors.true-gray.600"); + --divider-dark-color: theme("colors.dark.300"); // Error color - --error-color: theme("colors.true-gray.600"); + --error-color: theme("colors.dark.800"); // Tooltip color - --tooltip-color: theme("colors.true-gray.800"); + --tooltip-color: theme("colors.true-gray.100"); // Editor theme --editor-theme: "merbivore_soft"; } @@ -35,25 +35,25 @@ // Background color --primary-color: theme("colors.white"); // Light Background color - --primary-light-color: theme("colors.true-gray.50"); + --primary-light-color: theme("colors.blue-gray.50"); // Dark Background color - --primary-dark-color: theme("colors.true-gray.100"); + --primary-dark-color: theme("colors.blue-gray.100"); // Text color - --secondary-color: theme("colors.true-gray.500"); + --secondary-color: theme("colors.blue-gray.600"); // Light Text color - --secondary-light-color: theme("colors.true-gray.400"); + --secondary-light-color: theme("colors.blue-gray.500"); // Dark Text color - --secondary-dark-color: theme("colors.true-gray.600"); + --secondary-dark-color: theme("colors.blue-gray.700"); // Border color - --divider-color: theme("colors.true-gray.200"); + --divider-color: theme("colors.blue-gray.200"); // Light Border color - --divider-light-color: theme("colors.true-gray.100"); + --divider-light-color: theme("colors.blue-gray.100"); // Dark Border color - --divider-dark-color: theme("colors.true-gray.300"); + --divider-dark-color: theme("colors.blue-gray.300"); // Error color - --error-color: theme("colors.true-gray.700"); + --error-color: theme("colors.blue-gray.700"); // Tooltip color - --tooltip-color: theme("colors.true-gray.50"); + --tooltip-color: theme("colors.blue-gray.800"); // Editor theme --editor-theme: "textmate"; } @@ -62,51 +62,36 @@ // Background color --primary-color: theme("colors.dark.900"); // Light Background color - --primary-light-color: theme("colors.dark.700"); + --primary-light-color: theme("colors.true-gray.900"); // Dark Background color --primary-dark-color: theme("colors.dark.800"); // Text color --secondary-color: theme("colors.true-gray.400"); // Light Text color - --secondary-light-color: theme("colors.true-gray.600"); + --secondary-light-color: theme("colors.true-gray.500"); // Dark Text color --secondary-dark-color: theme("colors.true-gray.100"); // Border color - --divider-color: theme("colors.dark.800"); + --divider-color: theme("colors.true-gray.800"); // Light Border color --divider-light-color: theme("colors.dark.700"); // Dark Border color - --divider-dark-color: theme("colors.dark.600"); + --divider-dark-color: theme("colors.dark.300"); // Error color --error-color: theme("colors.dark.800"); // Tooltip color - --tooltip-color: theme("colors.dark.500"); + --tooltip-color: theme("colors.true-gray.100"); // Editor theme - --editor-theme: "vibrant_ink"; -} - -@mixin blueTheme { - // Accent color - --accent-color: theme("colors.blue.400"); - // Light Accent color - --accent-light-color: theme("colors.blue.200"); - // Dark Accent color - --accent-dark-color: theme("colors.blue.600"); - // Gradient from - --gradient-from-color: theme("colors.blue.200"); - // Gradient via - --gradient-via-color: theme("colors.blue.400"); - // Gradient to - --gradient-to-color: theme("colors.blue.600"); + --editor-theme: "twilight"; } @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,12 +102,27 @@ @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 + --gradient-from-color: theme("colors.teal.200"); + // Gradient via + --gradient-via-color: theme("colors.teal.400"); + // Gradient to + --gradient-to-color: theme("colors.teal.600"); +} + +@mixin blueTheme { + // Accent color + --accent-color: theme("colors.blue.500"); + // Light Accent color + --accent-light-color: theme("colors.blue.400"); + // Dark Accent color + --accent-dark-color: theme("colors.blue.600"); + // Gradient from --gradient-from-color: theme("colors.blue.200"); // Gradient via --gradient-via-color: theme("colors.blue.400"); @@ -132,92 +132,92 @@ @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 - --gradient-from-color: theme("colors.blue.200"); + --gradient-from-color: theme("colors.indigo.200"); // Gradient via - --gradient-via-color: theme("colors.blue.400"); + --gradient-via-color: theme("colors.indigo.400"); // Gradient to - --gradient-to-color: theme("colors.blue.600"); + --gradient-to-color: theme("colors.indigo.600"); } @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 - --gradient-from-color: theme("colors.blue.200"); + --gradient-from-color: theme("colors.purple.200"); // Gradient via - --gradient-via-color: theme("colors.blue.400"); + --gradient-via-color: theme("colors.purple.400"); // Gradient to - --gradient-to-color: theme("colors.blue.600"); -} - -@mixin orangeTheme { - // Accent color - --accent-color: theme("colors.orange.400"); - // Light Accent color - --accent-light-color: theme("colors.orange.200"); - // Dark Accent color - --accent-dark-color: theme("colors.orange.600"); - // Gradient from - --gradient-from-color: theme("colors.blue.200"); - // Gradient via - --gradient-via-color: theme("colors.blue.400"); - // Gradient to - --gradient-to-color: theme("colors.blue.600"); -} - -@mixin pinkTheme { - // Accent color - --accent-color: theme("colors.pink.400"); - // Light Accent color - --accent-light-color: theme("colors.pink.200"); - // Dark Accent color - --accent-dark-color: theme("colors.pink.600"); - // Gradient from - --gradient-from-color: theme("colors.blue.200"); - // Gradient via - --gradient-via-color: theme("colors.blue.400"); - // Gradient to - --gradient-to-color: theme("colors.blue.600"); -} - -@mixin redTheme { - // Accent color - --accent-color: theme("colors.red.400"); - // Light Accent color - --accent-light-color: theme("colors.red.200"); - // Dark Accent color - --accent-dark-color: theme("colors.red.600"); - // Gradient from - --gradient-from-color: theme("colors.blue.200"); - // Gradient via - --gradient-via-color: theme("colors.blue.400"); - // Gradient to - --gradient-to-color: theme("colors.blue.600"); + --gradient-to-color: theme("colors.purple.600"); } @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 - --gradient-from-color: theme("colors.blue.200"); + --gradient-from-color: theme("colors.yellow.200"); // Gradient via - --gradient-via-color: theme("colors.blue.400"); + --gradient-via-color: theme("colors.yellow.400"); // Gradient to - --gradient-to-color: theme("colors.blue.600"); + --gradient-to-color: theme("colors.yellow.600"); +} + +@mixin orangeTheme { + // Accent color + --accent-color: theme("colors.orange.500"); + // Light Accent color + --accent-light-color: theme("colors.orange.400"); + // Dark Accent color + --accent-dark-color: theme("colors.orange.600"); + // Gradient from + --gradient-from-color: theme("colors.orange.200"); + // Gradient via + --gradient-via-color: theme("colors.orange.400"); + // Gradient to + --gradient-to-color: theme("colors.orange.600"); +} + +@mixin redTheme { + // Accent color + --accent-color: theme("colors.red.500"); + // Light Accent color + --accent-light-color: theme("colors.red.400"); + // Dark Accent color + --accent-dark-color: theme("colors.red.600"); + // Gradient from + --gradient-from-color: theme("colors.red.200"); + // Gradient via + --gradient-via-color: theme("colors.red.400"); + // Gradient to + --gradient-to-color: theme("colors.red.600"); +} + +@mixin pinkTheme { + // Accent color + --accent-color: theme("colors.pink.500"); + // Light Accent color + --accent-light-color: theme("colors.pink.400"); + // Dark Accent color + --accent-dark-color: theme("colors.pink.600"); + // Gradient from + --gradient-from-color: theme("colors.pink.200"); + // Gradient via + --gradient-via-color: theme("colors.pink.400"); + // Gradient to + --gradient-to-color: theme("colors.pink.600"); } :root { @@ -241,27 +241,35 @@ :root[data-accent="blue"] { @include blueTheme; } + :root[data-accent="green"] { @include greenTheme; } + :root[data-accent="teal"] { @include tealTheme; } + :root[data-accent="indigo"] { @include indigoTheme; } + :root[data-accent="purple"] { @include purpleTheme; } + :root[data-accent="orange"] { @include orangeTheme; } + :root[data-accent="pink"] { @include pinkTheme; } + :root[data-accent="red"] { @include redTheme; } + :root[data-accent="yellow"] { @include yellowTheme; } diff --git a/components/app/Announcement.vue b/components/app/Announcement.vue index b2e9cf97b..e6f98cd4f 100644 --- a/components/app/Announcement.vue +++ b/components/app/Announcement.vue @@ -1,22 +1,22 @@ diff --git a/components/app/Extensions.vue b/components/app/Extensions.vue deleted file mode 100644 index 1fff480d4..000000000 --- a/components/app/Extensions.vue +++ /dev/null @@ -1,63 +0,0 @@ - - - diff --git a/components/app/Footer.vue b/components/app/Footer.vue new file mode 100644 index 000000000..e24ad803a --- /dev/null +++ b/components/app/Footer.vue @@ -0,0 +1,110 @@ + + + diff --git a/components/app/Header.vue b/components/app/Header.vue index c86203920..b68ff6484 100644 --- a/components/app/Header.vue +++ b/components/app/Header.vue @@ -1,21 +1,30 @@ - - - - - - - - - - - @@ -119,7 +74,6 @@ import intializePwa from "~/helpers/pwa" import { currentUser$ } from "~/helpers/fb/auth" import { getLocalConfig, setLocalConfig } from "~/newstore/localpersistence" -// import { hasExtensionInstalled } from "~/helpers/strategies/ExtensionStrategy" export default { data() { @@ -129,9 +83,7 @@ export default { // prompt. showInstallPrompt: null, showLogin: false, - showExtensions: false, - showShortcuts: false, - navigatorShare: navigator.share, + isOnLine: navigator.onLine, } }, subscriptions() { @@ -140,6 +92,13 @@ export default { } }, async mounted() { + window.addEventListener("online", () => { + this.isOnLine = true + }) + window.addEventListener("offline", () => { + this.isOnLine = false + }) + // Initializes the PWA code - checks if the app is installed, // etc. this.showInstallPrompt = await intializePwa() @@ -151,7 +110,7 @@ export default { theme: "toasted-primary", action: [ { - text: this.$t("dismiss"), + text: this.$t("action.dismiss"), onClick: (_, toastObject) => { setLocalConfig("cookiesAllowed", "yes") toastObject.goAway(0) @@ -161,21 +120,5 @@ export default { }) } }, - methods: { - nativeShare() { - if (navigator.share) { - navigator - .share({ - title: "Hoppscotch", - text: "Hoppscotch • Open source API development ecosystem - Helps you create requests faster, saving precious time on development.", - url: "https://hoppscotch.io", - }) - .then(() => {}) - .catch(console.error) - } else { - // fallback - } - }, - }, } diff --git a/components/app/Logo.vue b/components/app/Logo.vue index de3fa21c5..5ff1b07bb 100644 --- a/components/app/Logo.vue +++ b/components/app/Logo.vue @@ -1,19 +1,7 @@ diff --git a/components/app/Section.vue b/components/app/Section.vue index a9c197dd6..f84e338bd 100644 --- a/components/app/Section.vue +++ b/components/app/Section.vue @@ -1,5 +1,5 @@ diff --git a/components/app/Shortcuts.vue b/components/app/Shortcuts.vue index d3541e255..d39bfa3c5 100644 --- a/components/app/Shortcuts.vue +++ b/components/app/Shortcuts.vue @@ -1,44 +1,76 @@ diff --git a/components/landing/CTA.vue b/components/landing/CTA.vue index 8405482d1..fb87b1c47 100644 --- a/components/landing/CTA.vue +++ b/components/landing/CTA.vue @@ -1,35 +1,38 @@