onboarding fix ui and double demo issue (#3045)

Helicone · Dec 11, 2024 · b9b68f2 · b9b68f2
1 parent 53ffc03
commit b9b68f2
Show file tree

Hide file tree

Showing 10 changed files with 308 additions and 238 deletions.
diff --git a/web/components/layout/auth/DesktopSidebar.tsx b/web/components/layout/auth/DesktopSidebar.tsx
@@ -23,6 +23,7 @@ import { Dialog } from "@/components/ui/dialog";
 import { DialogContent } from "@/components/ui/dialog";
 import CreateOrgForm from "@/components/templates/organization/createOrgForm";
 import { useJawnClient } from "@/lib/clients/jawnHook";
+import { useUser } from "@supabase/auth-helpers-react";
 
 export interface NavigationItem {
   name: string;
@@ -46,6 +47,7 @@ const DesktopSidebar = ({
   sidebarRef,
 }: SidebarProps) => {
   const org = useOrg();
+  const user = useUser();
   const tier = org?.currentOrg?.tier;
   const router = useRouter();
   const [isCollapsed, setIsCollapsed] = useLocalStorage(
@@ -326,10 +328,12 @@ const DesktopSidebar = ({
                 Stup date
               </Button> */}
               {org?.currentOrg?.tier === "demo" &&
-                org?.allOrgs?.length === 1 && (
+                org.allOrgs.filter(
+                  (org) => org.tier !== "demo" && org.owner === user?.id
+                ).length === 0 && (
                   <Button
-                    className="mx-2 text-[13px] font-medium"
                     variant="outline"
+                    className="mx-2 text-[13px] font-medium bg-slate-200 border border-slate-300 dark:border-slate-700 dark:bg-slate-800 text-slate-700 dark:text-slate-400 hover:dark:text-slate-400 hover:dark:bg-slate-700"
                     onClick={() => {
                       setShowEndOnboardingConfirmation(true);
                     }}

diff --git a/web/components/templates/dashboard/OnboardingQuickStartModal.tsx b/web/components/templates/dashboard/OnboardingQuickStartModal.tsx
@@ -65,7 +65,7 @@ const OnboardingQuickStartModal = ({
               ? "Listening for events..."
               : `Hello ${org?.currentOrg?.name}!`}
           </DialogTitle>
-          <DialogDescription className="text-sm text-slate-500">
+          <DialogDescription className="text-sm text-slate-500 flex items-center gap-1 flex-wrap break-words">
             Let&apos;s set up your first{" "}
             {currentStep === 2 ? (
               <span className="inline-flex items-center gap-1 text-slate-700 dark:text-slate-300 font-medium">
@@ -90,12 +90,21 @@ const OnboardingQuickStartModal = ({
             <div className="flex flex-col gap-2.5" key={step.title}>
               <div
                 className={cn(
-                  "w-full h-4 rounded-full",
-                  index + 1 <= currentStep
-                    ? "bg-gradient-to-r from-[#0CA5EA] to-blue-700"
-                    : "bg-slate-100 dark:bg-slate-900"
+                  "w-full h-4 rounded-full transition-all relative overflow-hidden bg-slate-100 dark:bg-slate-900"
                 )}
-              ></div>
+              >
+                <div
+                  className={cn(
+                    "absolute inset-0 h-full top-0 left-0 bg-gradient-to-r transition-all duration-300",
+                    index === 0
+                      ? "from-[#0CA5EA] to-[#1479E1]"
+                      : index === 1
+                      ? "from-[#157AE2] to-[#1C50D9]"
+                      : "from-[#1767DD] to-blue-700",
+                    index + 1 <= currentStep ? "w-full" : "w-0"
+                  )}
+                ></div>
+              </div>
               <div className="space-y-1">
                 <p
                   className={cn(

diff --git a/web/components/templates/settings/settingsLayout.tsx b/web/components/templates/settings/settingsLayout.tsx
@@ -13,6 +13,7 @@ import { KeyIcon, LinkIcon } from "lucide-react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { ReactNode } from "react";
+import { useOrg } from "@/components/layout/org/organizationContext";
 
 const tabs = [
   {
@@ -66,42 +67,45 @@ interface SettingsLayoutProps {
 const SettingsLayout = ({ children }: SettingsLayoutProps) => {
   const router = useRouter();
   const currentPath = router.pathname;
+  const org = useOrg();
 
   return (
     <IslandContainer className="space-y-6 ">
       <AuthHeader isWithinIsland={true} title={"Settings"} />
-      <div className="flex flex-col space-y-8 items-start">
-        <div className="flex flex-col space-y-2 items-start">
-          <Tabs
-            defaultValue={
-              tabs.find((tab) => tab.href === currentPath)?.id || "general"
-            }
-            className=""
-            orientation="vertical"
-          >
-            <TabsList className="flex flex-row h-full space-y-1">
-              {tabs.map((tab) => (
-                <Link key={tab.id} href={tab.href} passHref>
-                  <TabsTrigger
-                    value={tab.id}
-                    className="w-full justify-start"
-                    onClick={(e) => {
-                      e.preventDefault();
-                      router.push(tab.href);
-                    }}
-                  >
-                    <tab.icon className="h-5 w-5 mr-2" />
-                    {tab.title}
-                  </TabsTrigger>
-                </Link>
-              ))}
-            </TabsList>
-          </Tabs>
-          <Separator />
-        </div>
+      {org?.currentOrg?.tier !== "demo" && (
+        <div className="flex flex-col space-y-8 items-start">
+          <div className="flex flex-col space-y-2 items-start">
+            <Tabs
+              defaultValue={
+                tabs.find((tab) => tab.href === currentPath)?.id || "general"
+              }
+              className=""
+              orientation="vertical"
+            >
+              <TabsList className="flex flex-row h-full space-y-1">
+                {tabs.map((tab) => (
+                  <Link key={tab.id} href={tab.href} passHref>
+                    <TabsTrigger
+                      value={tab.id}
+                      className="w-full justify-start"
+                      onClick={(e) => {
+                        e.preventDefault();
+                        router.push(tab.href);
+                      }}
+                    >
+                      <tab.icon className="h-5 w-5 mr-2" />
+                      {tab.title}
+                    </TabsTrigger>
+                  </Link>
+                ))}
+              </TabsList>
+            </Tabs>
+            <Separator />
+          </div>
 
-        <div className="flex-1 w-full">{children}</div>
-      </div>
+          <div className="flex-1 w-full">{children}</div>
+        </div>
+      )}
     </IslandContainer>
   );
 };

diff --git a/web/components/templates/settings/settingsPage.tsx b/web/components/templates/settings/settingsPage.tsx
@@ -7,6 +7,7 @@ import {
 import Link from "next/link";
 import { useRouter } from "next/router";
 import AuthHeader from "../../shared/authHeader";
+import { useOrg } from "@/components/layout/org/organizationContext";
 
 const tabs = [
   {
@@ -38,33 +39,38 @@ const tabs = [
 const SettingsPage = () => {
   const router = useRouter();
   const currentPath = router.pathname;
+  const org = useOrg();
 
   return (
     <>
       <AuthHeader title="Settings" />
-      <div className="border-b border-gray-200 dark:border-gray-700">
-        <nav className="-mb-px flex space-x-8" aria-label="Tabs">
-          {tabs.map((tab) => (
-            <Link
-              key={tab.id}
-              href={tab.href}
-              className={`${
-                currentPath === tab.href
-                  ? "border-indigo-500 text-indigo-600"
-                  : "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700"
-              } whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm`}
-            >
-              <tab.icon
+      {org?.currentOrg?.tier !== "demo" && (
+        <div className="border-b border-gray-200 dark:border-gray-700">
+          <nav className="-mb-px flex space-x-8" aria-label="Tabs">
+            {tabs.map((tab) => (
+              <Link
+                key={tab.id}
+                href={tab.href}
                 className={`${
-                  currentPath === tab.href ? "text-indigo-500" : "text-gray-400"
-                } -ml-0.5 mr-2 h-5 w-5 inline-block`}
-                aria-hidden="true"
-              />
-              {tab.title}
-            </Link>
-          ))}
-        </nav>
-      </div>
+                  currentPath === tab.href
+                    ? "border-indigo-500 text-indigo-600"
+                    : "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700"
+                } whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm`}
+              >
+                <tab.icon
+                  className={`${
+                    currentPath === tab.href
+                      ? "text-indigo-500"
+                      : "text-gray-400"
+                  } -ml-0.5 mr-2 h-5 w-5 inline-block`}
+                  aria-hidden="true"
+                />
+                {tab.title}
+              </Link>
+            ))}
+          </nav>
+        </div>
+      )}
     </>
   );
 };

diff --git a/web/components/templates/welcome/diffHighlight.tsx b/web/components/templates/welcome/diffHighlight.tsx
@@ -60,7 +60,7 @@ export function DiffHighlight(props: DiffHighlightProps) {
                   navigator.clipboard.writeText(props.code);
                 }}
               >
-                <ClipboardIcon className="w-6 h-6 text-gray-500" />
+                <ClipboardIcon className="w-5 h-5 text-gray-500" />
               </button>
               {tokens.map((line, i) => {
                 const lineProps = getLineProps({ line, key: i });