From 2d06852a09fbc93325e0172d633ade67937e9718 Mon Sep 17 00:00:00 2001
From: Sjoerd Vink <sjoerdvink@Sjoerds-MacBook-Pro.local>
Date: Mon, 4 Nov 2024 09:56:22 -0500
Subject: [PATCH] fix(walkthrough): fixed dark-mode and not reachable classes
---
.../src/components/onboarding/onboarding.tsx | 4 ++-
.../web/src/components/onboarding/tooltip.tsx | 35 +++++++++++++++++++
.../onboarding/use-cases/general.tsx | 2 +-
libs/shared/lib/components/layout/Panel.tsx | 3 +-
.../lib/management/ManagementTrigger.tsx | 2 +-
libs/shared/lib/schema/panel/Schema.tsx | 3 +-
libs/shared/lib/sidebar/index.tsx | 9 +++--
7 files changed, 51 insertions(+), 7 deletions(-)
create mode 100644 apps/web/src/components/onboarding/tooltip.tsx
diff --git a/apps/web/src/components/onboarding/onboarding.tsx b/apps/web/src/components/onboarding/onboarding.tsx
index 3327615ce..26dc76034 100644
--- a/apps/web/src/components/onboarding/onboarding.tsx
+++ b/apps/web/src/components/onboarding/onboarding.tsx
@@ -4,6 +4,7 @@ import { useLocation } from 'react-router-dom';
import { Button } from '@graphpolaris/shared/lib/components/buttons';
import { useCases } from './use-cases';
import { useAuthCache } from '@graphpolaris/shared/lib/data-access';
+import { OnboardingTooltip } from './tooltip';
interface OnboardingState {
run?: boolean;
@@ -54,7 +55,7 @@ export function Onboarding({}) {
return (
<div>
{showWalkthrough && (
- <div className="bg-accent-light alert absolute bottom-5 left-5 w-fit cursor-pointer z-50">
+ <div className="bg-light alert absolute bottom-5 left-5 w-fit cursor-pointer z-50">
<Button onClick={startWalkThrough} label={'Start a Tour'} variant="ghost" />
<Button onClick={() => addWalkthroughCookie()} iconComponent="icon-[ic--baseline-close]" variant="ghost" rounded />
</div>
@@ -68,6 +69,7 @@ export function Onboarding({}) {
showSkipButton={true}
hideCloseButton={true}
callback={handleJoyrideCallback}
+ tooltipComponent={OnboardingTooltip}
styles={{
options: {
primaryColor: '#FF7D00',
diff --git a/apps/web/src/components/onboarding/tooltip.tsx b/apps/web/src/components/onboarding/tooltip.tsx
new file mode 100644
index 000000000..9c74c1fde
--- /dev/null
+++ b/apps/web/src/components/onboarding/tooltip.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { TooltipRenderProps } from 'react-joyride';
+
+const OnboardingTooltip = (props: TooltipRenderProps) => {
+ const { backProps, closeProps, continuous, index, primaryProps, skipProps, step, tooltipProps } = props;
+
+ return (
+ <div className="bg-light p-4 rounded-lg shadow-lg" {...tooltipProps}>
+ <button className="absolute top-2 right-2 text-secondary-500 hover:text-secondary-700" {...closeProps}>
+ ×
+ </button>
+ {step.title && <h4 className="text-lg font-semibold mb-2">{step.title}</h4>}
+ <div className="mb-4">{step.content}</div>
+ <div className="flex justify-between items-center">
+ <button className="text-sm text-gray-500 hover:text-gray-700" {...skipProps}>
+ {skipProps.title}
+ </button>
+ <div className="flex space-x-2">
+ {index > 0 && (
+ <button className="bg-light-200 text-light-700 px-3 py-1 rounded hover:bg-light-300" {...backProps}>
+ {backProps.title}
+ </button>
+ )}
+ {continuous && (
+ <button className="bg-primary text-light px-3 py-1 rounded hover:bg-primary-dark" {...primaryProps}>
+ {primaryProps.title}
+ </button>
+ )}
+ </div>
+ </div>
+ </div>
+ );
+};
+
+export { OnboardingTooltip };
diff --git a/apps/web/src/components/onboarding/use-cases/general.tsx b/apps/web/src/components/onboarding/use-cases/general.tsx
index 715b44ffb..bf4a90d13 100644
--- a/apps/web/src/components/onboarding/use-cases/general.tsx
+++ b/apps/web/src/components/onboarding/use-cases/general.tsx
@@ -48,7 +48,7 @@ export const generalScript: GPStep[] = [
disableBeacon: true,
},
{
- target: '.menu-walkthrough',
+ target: '.database-menu',
title: 'Menu',
content: 'In the menu you can manage databases, switch between them, and perform other actions.',
placement: 'bottom',
diff --git a/libs/shared/lib/components/layout/Panel.tsx b/libs/shared/lib/components/layout/Panel.tsx
index 3a4bdda2c..b1a55e0a6 100644
--- a/libs/shared/lib/components/layout/Panel.tsx
+++ b/libs/shared/lib/components/layout/Panel.tsx
@@ -5,11 +5,12 @@ export type Panel = {
title: string | React.ReactNode;
tooltips?: React.ReactNode;
children: React.ReactNode;
+ className?: string;
};
export function Panel(props: Panel) {
return (
- <div className="flex flex-col border w-full h-full bg-light">
+ <div className={`flex flex-col border w-full h-full bg-light ${props.className || ''}`}>
<div className="sticky shrink-0 top-0 flex items-stretch justify-between h-7 bg-secondary-100 border-b border-secondary-200 max-w-full">
<div className="flex items-center">
<h1 className="text-xs font-semibold text-secondary-600 px-2 truncate">{props.title}</h1>
diff --git a/libs/shared/lib/management/ManagementTrigger.tsx b/libs/shared/lib/management/ManagementTrigger.tsx
index ace73c3c3..65d4f7c72 100644
--- a/libs/shared/lib/management/ManagementTrigger.tsx
+++ b/libs/shared/lib/management/ManagementTrigger.tsx
@@ -41,7 +41,7 @@ export function ManagementTrigger({ managementOpen, setManagementOpen, current,
}, [connecting]);
return (
- <div>
+ <div className="database-menu">
<ManagementDialog
open={managementOpen}
onClose={() => setManagementOpen(!managementOpen)}
diff --git a/libs/shared/lib/schema/panel/Schema.tsx b/libs/shared/lib/schema/panel/Schema.tsx
index fce8bad96..c13f95409 100644
--- a/libs/shared/lib/schema/panel/Schema.tsx
+++ b/libs/shared/lib/schema/panel/Schema.tsx
@@ -276,6 +276,7 @@ export const Schema = (props: Props) => {
return (
<Panel
title="Schema"
+ className="schema-panel"
tooltips={
<>
<Tooltip>
@@ -351,7 +352,7 @@ export const Schema = (props: Props) => {
</>
}
>
- <div className="schema-panel w-full h-full flex flex-col justify-between" ref={reactFlowRef}>
+ <div className="w-full h-full flex flex-col justify-between" ref={reactFlowRef}>
{schema.loading ? (
<div className="h-full flex flex-col items-center justify-center">
<Icon component="icon-[mingcute--loading-line]" size={56} className="w-15 h-15 animate-spin " />
diff --git a/libs/shared/lib/sidebar/index.tsx b/libs/shared/lib/sidebar/index.tsx
index 9c45f29bd..7c2f42419 100644
--- a/libs/shared/lib/sidebar/index.tsx
+++ b/libs/shared/lib/sidebar/index.tsx
@@ -7,12 +7,17 @@ export type SideNavTab = 'Schema' | 'Search' | undefined;
const tabs: Array<{
name: SideNavTab;
icon: string | undefined;
+ className?: string;
}> = [
{
name: 'Search',
icon: 'icon-[ic--outline-search]',
+ className: 'searchbar',
+ },
+ {
+ name: 'Schema',
+ icon: 'icon-[ic--baseline-schema]',
},
- { name: 'Schema', icon: 'icon-[ic--baseline-schema]' },
];
export function Sidebar({
@@ -46,7 +51,7 @@ export function Sidebar({
onTab(t.name);
}
}}
- className={tab === t.name ? 'bg-secondary-100' : ''}
+ className={`${t.className || ''} ${tab === t.name ? 'bg-secondary-100' : ''}`}
/>
</TooltipTrigger>
<TooltipContent>{t.name}</TooltipContent>
--
GitLab