From b43531f200b973d6fed80ca0948faa324224dd12 Mon Sep 17 00:00:00 2001 From: Joel Jacob Stephen <70131076+JoelJacobStephen@users.noreply.github.com> Date: Mon, 4 Dec 2023 00:57:37 +0530 Subject: [PATCH] feat: add ability to make banners dismissible + new info and warning color schemes added based on themes (#3586) Co-authored-by: jamesgeorge007 --- .../assets/themes/base-themes.scss | 50 ++++++++++-------- packages/hoppscotch-common/locales/en.json | 4 +- .../hoppscotch-common/src/components.d.ts | 1 + .../src/components/app/Banner.vue | 52 +++++++++++++------ .../src/components/app/Header.vue | 9 +++- .../src/components/http/TestResult.vue | 2 +- .../src/components/profile/UserDelete.vue | 4 +- packages/hoppscotch-ui/ui-preset.ts | 2 + 8 files changed, 79 insertions(+), 45 deletions(-) diff --git a/packages/hoppscotch-common/assets/themes/base-themes.scss b/packages/hoppscotch-common/assets/themes/base-themes.scss index 4852ce9b3..0855abc03 100644 --- a/packages/hoppscotch-common/assets/themes/base-themes.scss +++ b/packages/hoppscotch-common/assets/themes/base-themes.scss @@ -20,26 +20,6 @@ --sidebar-primary-sticky-fold: 2rem; } -@mixin dark-theme { - --primary-color: #181818; - --primary-light-color: #1c1c1e; - --primary-dark-color: #262626; - --primary-contrast-color: #171717; - - --secondary-color: #a3a3a3; - --secondary-light-color: #737373; - --secondary-dark-color: #fafafa; - - --divider-color: #262626; - --divider-light-color: #1f1f1f; - --divider-dark-color: #2d2d2d; - - --error-color: #292524; - --tooltip-color: #f5f5f5; - --popover-color: #1b1b1b; - --editor-theme: "merbivore_soft"; -} - @mixin light-theme { --primary-color: #ffffff; --primary-light-color: #f9fafb; @@ -54,12 +34,36 @@ --divider-light-color: #f3f4f6; --divider-dark-color: #d1d5db; - --error-color: #fef3c7; + --info-color: #fef3c7; + --warning-color: #fef9c3; + --error-color: #fee2e2; --tooltip-color: #262626; --popover-color: #ffffff; --editor-theme: "textmate"; } +@mixin dark-theme { + --primary-color: #181818; + --primary-light-color: #1c1c1e; + --primary-dark-color: #262626; + --primary-contrast-color: #171717; + + --secondary-color: #a3a3a3; + --secondary-light-color: #737373; + --secondary-dark-color: #fafafa; + + --divider-color: #262626; + --divider-light-color: #1f1f1f; + --divider-dark-color: #2d2d2d; + + --info-color: #292524; + --warning-color: #854d0e; + --error-color: #991b1b; + --tooltip-color: #f5f5f5; + --popover-color: #1b1b1b; + --editor-theme: "merbivore_soft"; +} + @mixin black-theme { --primary-color: #0f0f0f; --primary-light-color: #171717; @@ -74,7 +78,9 @@ --divider-light-color: #181818; --divider-dark-color: #323232; - --error-color: #1c1917; + --info-color: #1c1917; + --warning-color: #713f12; + --error-color: #7f1d1d; --tooltip-color: #f5f5f5; --popover-color: #0f0f0f; --editor-theme: "twilight"; diff --git a/packages/hoppscotch-common/locales/en.json b/packages/hoppscotch-common/locales/en.json index 1a9aa89df..378cbf67f 100644 --- a/packages/hoppscotch-common/locales/en.json +++ b/packages/hoppscotch-common/locales/en.json @@ -341,8 +341,8 @@ "authorization": "The authorization header will be automatically generated when you send the request.", "generate_documentation_first": "Generate documentation first", "network_fail": "Unable to reach the API endpoint. Check your network connection or select a different Interceptor and try again.", - "offline": "You seem to be offline. Data in this workspace might not be up to date.", - "offline_short": "You seem to be offline.", + "offline": "You're using Hoppscotch offline. Updates will sync when you're online, based on workspace settings", + "offline_short": "You're using Hoppscotch offline.", "post_request_tests": "Test scripts are written in JavaScript, and are run after the response is received.", "pre_request_script": "Pre-request scripts are written in JavaScript, and are run before the request is sent.", "script_fail": "It seems there is a glitch in the pre-request script. Check the error below and fix the script accordingly.", diff --git a/packages/hoppscotch-common/src/components.d.ts b/packages/hoppscotch-common/src/components.d.ts index 72a3dc6ec..9f670f06f 100644 --- a/packages/hoppscotch-common/src/components.d.ts +++ b/packages/hoppscotch-common/src/components.d.ts @@ -161,6 +161,7 @@ declare module 'vue' { IconLucideSearch: typeof import('~icons/lucide/search')['default'] IconLucideUsers: typeof import('~icons/lucide/users')['default'] IconLucideVerified: typeof import('~icons/lucide/verified')['default'] + IconLucideX: typeof import('~icons/lucide/x')['default'] InterceptorsErrorPlaceholder: typeof import('./components/interceptors/ErrorPlaceholder.vue')['default'] InterceptorsExtensionSubtitle: typeof import('./components/interceptors/ExtensionSubtitle.vue')['default'] LensesHeadersRenderer: typeof import('./components/lenses/HeadersRenderer.vue')['default'] diff --git a/packages/hoppscotch-common/src/components/app/Banner.vue b/packages/hoppscotch-common/src/components/app/Banner.vue index 392a7769c..bc5a098ff 100644 --- a/packages/hoppscotch-common/src/components/app/Banner.vue +++ b/packages/hoppscotch-common/src/components/app/Banner.vue @@ -1,19 +1,27 @@ @@ -26,22 +34,32 @@ import IconAlertCircle from "~icons/lucide/alert-circle" import IconAlertTriangle from "~icons/lucide/alert-triangle" import IconInfo from "~icons/lucide/info" -const props = defineProps<{ - banner: BannerContent -}>() +const props = withDefaults( + defineProps<{ + banner: BannerContent + dismissible?: boolean + }>(), + { + dismissible: false, + } +) const t = useI18n() +const emit = defineEmits<{ + (e: "dismiss"): void +}>() + const ariaRoles: Record = { - error: "alert", - warning: "status", info: "status", + warning: "status", + error: "alert", } const bgColors: Record = { - error: "bg-red-700", - warning: "bg-yellow-700", - info: "bg-stone-800", + info: "bg-info", + warning: "bg-warning", + error: "bg-error", } const icons = { diff --git a/packages/hoppscotch-common/src/components/app/Header.vue b/packages/hoppscotch-common/src/components/app/Header.vue index 2db46f0ff..4148d0c50 100644 --- a/packages/hoppscotch-common/src/components/app/Header.vue +++ b/packages/hoppscotch-common/src/components/app/Header.vue @@ -217,7 +217,12 @@ - + { } }) +const dismissOfflineBanner = () => banner.removeBanner(bannerID!) + const currentUser = useReadonlyStream( platform.auth.getProbableUserStream(), platform.auth.getProbableUser() diff --git a/packages/hoppscotch-common/src/components/http/TestResult.vue b/packages/hoppscotch-common/src/components/http/TestResult.vue index f71e957bf..d1324ede6 100644 --- a/packages/hoppscotch-common/src/components/http/TestResult.vue +++ b/packages/hoppscotch-common/src/components/http/TestResult.vue @@ -41,7 +41,7 @@

{{ t("error.danger_zone") }} @@ -45,7 +45,7 @@

{{ t("error.danger_zone") }} diff --git a/packages/hoppscotch-ui/ui-preset.ts b/packages/hoppscotch-ui/ui-preset.ts index ade354bb4..a43c39733 100644 --- a/packages/hoppscotch-ui/ui-preset.ts +++ b/packages/hoppscotch-ui/ui-preset.ts @@ -39,6 +39,8 @@ export default { divider: "var(--divider-color)", dividerLight: "var(--divider-light-color)", dividerDark: "var(--divider-dark-color)", + info: "var(--info-color)", + warning: "var(--warning-color)", error: "var(--error-color)", tooltip: "var(--tooltip-color)", popover: "var(--popover-color)",