onboard_steps_fallback

bencherdev · May 19, 2024 · 10bd0e3 · 10bd0e3
1 parent ee6ebe3
commit 10bd0e3
Show file tree

Hide file tree

Showing 15 changed files with 147 additions and 115 deletions.
diff --git a/services/console/src/components/console/billing/plan/Pricing.tsx b/services/console/src/components/console/billing/plan/Pricing.tsx
@@ -25,33 +25,36 @@ interface Props {
 }
 
 const Pricing = (props: Props) => {
+	const Free = <PlanPanel themeColor={props.themeColor} active={props.plan} plan={PlanLevel.Free} buttonText={props.freeText} handlePlanLevel={props.handleFree} />;
+	const Team = <PlanPanel themeColor={props.themeColor} active={props.plan} plan={PlanLevel.Team} buttonText={props.teamText} handlePlanLevel={props.handleTeam} />;
+	const Enterprise = <PlanPanel themeColor={props.themeColor} active={props.plan} plan={PlanLevel.Enterprise} buttonText={props.enterpriseText} handlePlanLevel={props.handleEnterprise} />;
 	return (
 		<div class="columns is-centered">
 			<Show when={props.hideFree} fallback={
 				<>
 				<div class="column is-3">
-					<PlanPanel themeColor={props.themeColor} active={props.plan} plan={PlanLevel.Free} buttonText={props.freeText} handlePlanLevel={props.handleFree} />
+					{Free}
 				</div>
 				<div class="column is-3">
-					<PlanPanel themeColor={props.themeColor} active={props.plan} plan={PlanLevel.Team} buttonText={props.teamText} handlePlanLevel={props.handleTeam} />
+					{Team}
 				</div>
 				<div class="column is-3">
-					<PlanPanel themeColor={props.themeColor} active={props.plan} plan={PlanLevel.Enterprise} buttonText={props.enterpriseText} handlePlanLevel={props.handleEnterprise} />
+					{Enterprise}
 				</div>
 				</>
 			}>
-				<div class="column is-5">
-					<PlanPanel themeColor={props.themeColor} active={props.plan} plan={PlanLevel.Team} buttonText={props.teamText} handlePlanLevel={props.handleTeam} />
+				<div class="column is-6">
+					{Team}
 				</div>
-				<div class="column is-5">
-					<PlanPanel themeColor={props.themeColor} active={props.plan} plan={PlanLevel.Enterprise} buttonText={props.enterpriseText} handlePlanLevel={props.handleEnterprise} />
+				<div class="column is-6">
+					{Enterprise}
 				</div>
 			</Show>
 		</div>
 	);
 };
 
-const NO_FEATURE = "⎯⎯⎯";
+const NO_FEATURE = "\xa0";
 
 const PlanCopy = {
 	[PlanLevel.Free]: {

diff --git a/services/console/src/components/console/onboard/OnboardInvite.tsx b/services/console/src/components/console/onboard/OnboardInvite.tsx
@@ -21,9 +21,10 @@ import {
 import Field, { type FieldHandler } from "../../field/Field";
 import FieldKind from "../../field/kind";
 import { PLAN_PARAM, planParam } from "../../auth/auth";
-import OnboardSteps, { OnboardStep } from "./OnboardSteps";
+import OnboardSteps from "./OnboardSteps";
 import { createStore } from "solid-js/store";
 import { MEMBER_FIELDS } from "../../../config/organization/members";
+import { OnboardStep } from "./OnboardStepsInner";
 
 export interface Props {
 	apiUrl: string;

diff --git a/services/console/src/components/console/onboard/OnboardPlan.tsx b/services/console/src/components/console/onboard/OnboardPlan.tsx
@@ -7,8 +7,9 @@ import { validJwt, validPlanLevel } from "../../../util/valid";
 import { httpGet } from "../../../util/http";
 import { type JsonOrganization, type PlanLevel } from "../../../types/bencher";
 import { PLAN_PARAM } from "../../auth/auth";
-import OnboardSteps, { OnboardStep } from "./OnboardSteps";
+import OnboardSteps from "./OnboardSteps";
 import BillingPanel from "../billing/BillingPanel";
+import { OnboardStep } from "./OnboardStepsInner";
 
 export interface Props {
 	apiUrl: string;

diff --git a/services/console/src/components/console/onboard/OnboardProject.tsx b/services/console/src/components/console/onboard/OnboardProject.tsx
@@ -23,8 +23,9 @@ import type {
 import Field, { type FieldHandler } from "../../field/Field";
 import FieldKind from "../../field/kind";
 import { PLAN_PARAM, planParam } from "../../auth/auth";
-import OnboardSteps, { OnboardStep } from "./OnboardSteps";
+import OnboardSteps from "./OnboardSteps";
 import CopyButton from "./CopyButton";
+import { OnboardStep } from "./OnboardStepsInner";
 
 export interface Props {
 	apiUrl: string;

diff --git a/services/console/src/components/console/onboard/OnboardRun.tsx b/services/console/src/components/console/onboard/OnboardRun.tsx
@@ -12,9 +12,10 @@ import type {
 	PlanLevel,
 } from "../../../types/bencher";
 import { PLAN_PARAM, planParam } from "../../auth/auth";
-import OnboardSteps, { OnboardStep } from "./OnboardSteps";
+import OnboardSteps from "./OnboardSteps";
 import { isBencherCloud } from "../../../util/ext";
 import CopyButton from "./CopyButton";
+import { OnboardStep } from "./OnboardStepsInner";
 
 export interface Props {
 	apiUrl: string;

diff --git a/services/console/src/components/console/onboard/OnboardSteps.tsx b/services/console/src/components/console/onboard/OnboardSteps.tsx
@@ -1,86 +1,10 @@
-import { For, type Accessor } from "solid-js";
-import { BENCHER_WORDMARK } from "../../../util/ext";
-import type { PlanLevel } from "../../../types/bencher";
-
-interface Props {
-	step: OnboardStep;
-	plan?: Accessor<PlanLevel>;
-}
-
-export enum OnboardStep {
-	API_TOKEN = 1,
-	PROJECT = 2,
-	RUN = 3,
-	INVITE = 4,
-	PLAN = 5,
-}
-
-const stepPath = (step: OnboardStep) => {
-	switch (step) {
-		case OnboardStep.API_TOKEN:
-			return "/console/onboard/token";
-		case OnboardStep.PROJECT:
-			return "/console/onboard/project";
-		case OnboardStep.RUN:
-			return "/console/onboard/run";
-		case OnboardStep.INVITE:
-			return "/console/onboard/invite";
-		case OnboardStep.PLAN:
-			return "/console/onboard/plan";
-	}
-};
+import { themeSignal } from "../../navbar/theme/util";
+import OnboardStepsInner, { type Props } from "./OnboardStepsInner"
 
 const OnboardSteps = (props: Props) => {
-	const stepHref = (step: OnboardStep) => {
-		const path = stepPath(step);
-		const plan = props.plan?.();
-		return plan ? `${path}?plan=${plan}` : path;
-	};
+	const theme = themeSignal;
 
-	return (
-		<section class="section">
-			<div class="container">
-				<div class="columns is-centered">
-					<div class="column is-half">
-						<div class="content has-text-centered">
-							<div title="Bencher - Continuous Benchmarking">
-								<img
-									src={BENCHER_WORDMARK}
-									width="150"
-									height="28.25"
-									alt="🐰 Bencher"
-								/>
-							</div>
-						</div>
-						<br />
-						<div class="steps">
-							<For
-								each={[
-									OnboardStep.API_TOKEN,
-									OnboardStep.PROJECT,
-									OnboardStep.RUN,
-									OnboardStep.INVITE,
-									OnboardStep.PLAN,
-								]}
-							>
-								{(step) => (
-									<div
-										class={`step-item ${
-											props.step >= step ? " is-active is-primary" : ""
-										}`}
-									>
-										<a class="step-marker" href={stepHref(step)}>
-											{step}
-										</a>
-									</div>
-								)}
-							</For>
-						</div>
-					</div>
-				</div>
-			</div>
-		</section>
-	);
-};
+	return <OnboardStepsInner {...props} theme={theme()} />;
+}
 
-export default OnboardSteps;
+export default OnboardSteps;
diff --git a/services/console/src/components/console/onboard/OnboardStepsFallback.tsx b/services/console/src/components/console/onboard/OnboardStepsFallback.tsx
@@ -0,0 +1,7 @@
+import OnboardSteps, { type Props } from "./OnboardStepsInner"
+
+const OnboardStepsFallback = (props: Props) => {
+	return <OnboardSteps {...props} />;
+}
+
+export default OnboardStepsFallback;
diff --git a/services/console/src/components/console/onboard/OnboardStepsInner.tsx b/services/console/src/components/console/onboard/OnboardStepsInner.tsx
@@ -0,0 +1,87 @@
+import { For, type Accessor } from "solid-js";
+import type { PlanLevel } from "../../../types/bencher";
+import { Theme, themeWordmark } from "../../navbar/theme/theme";
+
+export interface Props {
+	theme?: Theme;
+	step: OnboardStep;
+	plan?: Accessor<PlanLevel>;
+}
+
+export enum OnboardStep {
+	API_TOKEN = 1,
+	PROJECT = 2,
+	RUN = 3,
+	INVITE = 4,
+	PLAN = 5,
+}
+
+const stepPath = (step: OnboardStep) => {
+	switch (step) {
+		case OnboardStep.API_TOKEN:
+			return "/console/onboard/token";
+		case OnboardStep.PROJECT:
+			return "/console/onboard/project";
+		case OnboardStep.RUN:
+			return "/console/onboard/run";
+		case OnboardStep.INVITE:
+			return "/console/onboard/invite";
+		case OnboardStep.PLAN:
+			return "/console/onboard/plan";
+	}
+};
+
+const OnboardSteps = (props: Props) => {
+	const stepHref = (step: OnboardStep) => {
+		const path = stepPath(step);
+		const plan = props.plan?.();
+		return plan ? `${path}?plan=${plan}` : path;
+	};
+
+	return (
+		<section class="section">
+			<div class="container">
+				<div class="columns is-centered">
+					<div class="column is-half">
+						<div class="content has-text-centered">
+							<div title="Bencher - Continuous Benchmarking">
+								<img
+									src={themeWordmark(props.theme ?? Theme.Light)}
+									width="150"
+									height="28.25"
+									alt="🐰 Bencher"
+								/>
+							</div>
+						</div>
+						<br />
+						<div class="steps">
+							<For
+								each={[
+									OnboardStep.API_TOKEN,
+									OnboardStep.PROJECT,
+									OnboardStep.RUN,
+									OnboardStep.INVITE,
+									OnboardStep.PLAN,
+								]}
+							>
+								{(step) => (
+									<div
+										class={`step-item ${
+											props.step >= step ? " is-active is-primary" : ""
+										}`}
+									>
+										<a class="step-marker" href={stepHref(step)}>
+											{step}
+										</a>
+									</div>
+								)}
+							</For>
+						</div>
+					</div>
+				</div>
+			</div>
+		</section>
+	);
+};
+
+export default OnboardSteps;
diff --git a/services/console/src/components/console/onboard/OnboardToken.tsx b/services/console/src/components/console/onboard/OnboardToken.tsx
@@ -11,8 +11,9 @@ import {
 	type JsonToken,
 } from "../../../types/bencher";
 import { PLAN_PARAM, planParam } from "../../auth/auth";
-import OnboardSteps, { OnboardStep } from "./OnboardSteps";
+import OnboardSteps from "./OnboardSteps";
 import CopyButton from "./CopyButton";
+import { OnboardStep } from "./OnboardStepsInner";
 
 export interface Props {
 	apiUrl: string;

diff --git a/services/console/src/components/navbar/theme/theme.tsx b/services/console/src/components/navbar/theme/theme.tsx
@@ -1,3 +1,5 @@
+import { BENCHER_WORDMARK, BENCHER_WORDMARK_DARK } from "../../../util/ext";
+
 export const THEME_KEY = "theme";
 
 export enum Theme {
@@ -48,3 +50,12 @@ export const themeColor = (theme: Theme) => {
 			return "is-dark";
 	}
 };
+
+export const themeWordmark = (theme: Theme) => {
+	switch (theme) {
+		case Theme.Light:
+			return BENCHER_WORDMARK;
+		case Theme.Dark:
+			return BENCHER_WORDMARK_DARK;
+	}
+}
diff --git a/services/console/src/pages/console/onboard/invite.astro b/services/console/src/pages/console/onboard/invite.astro
@@ -3,9 +3,8 @@ export const prerender = false;
 
 import BaseLayout from "../../../layouts/BaseLayout.astro";
 import OnboardInvite from "../../../components/console/onboard/OnboardInvite";
-import OnboardSteps, {
-	OnboardStep,
-} from "../../../components/console/onboard/OnboardSteps";
+import OnboardStepsFallback from "../../../components/console/onboard/OnboardStepsFallback";
+import { OnboardStep } from "../../../components/console/onboard/OnboardStepsInner";
 
 // Using `meta.env` requires `prerender = false`
 const BENCHER_API_URL = import.meta.env.BENCHER_API_URL;
@@ -19,7 +18,7 @@ const BENCHER_API_URL = import.meta.env.BENCHER_API_URL;
 
 <OnboardInvite client:only="solid-js" apiUrl={BENCHER_API_URL}>
   <div slot="fallback">
-    <OnboardSteps step={OnboardStep.INVITE} />
+    <OnboardStepsFallback step={OnboardStep.INVITE} />
     <section class="section">
       <div class="container">
         <div class="columns is-centered">

diff --git a/services/console/src/pages/console/onboard/plan.astro b/services/console/src/pages/console/onboard/plan.astro
@@ -3,9 +3,8 @@ export const prerender = false;
 
 import BaseLayout from "../../../layouts/BaseLayout.astro";
 import OnboardPlan from "../../../components/console/onboard/OnboardPlan";
-import OnboardSteps, {
-	OnboardStep,
-} from "../../../components/console/onboard/OnboardSteps";
+import OnboardStepsFallback from "../../../components/console/onboard/OnboardStepsFallback";
+import { OnboardStep } from "../../../components/console/onboard/OnboardStepsInner";
 import ConsoleFallbackPricingTable from "../../../components/pricing/ConsoleFallbackPricingTable";
 
 // Using `meta.env` requires `prerender = false`
@@ -20,7 +19,7 @@ const BENCHER_API_URL = import.meta.env.BENCHER_API_URL;
 
 <OnboardPlan client:only="solid-js" apiUrl={BENCHER_API_URL}>
   <div slot="fallback">
-    <OnboardSteps step={OnboardStep.PLAN} />
+    <OnboardStepsFallback step={OnboardStep.PLAN} />
     <section class="section">
       <div class="container">
         <div class="columns is-centered">

diff --git a/services/console/src/pages/console/onboard/project.astro b/services/console/src/pages/console/onboard/project.astro
@@ -3,9 +3,8 @@ export const prerender = false;
 
 import BaseLayout from "../../../layouts/BaseLayout.astro";
 import OnboardProject from "../../../components/console/onboard/OnboardProject";
-import OnboardSteps, {
-	OnboardStep,
-} from "../../../components/console/onboard/OnboardSteps";
+import OnboardStepsFallback from "../../../components/console/onboard/OnboardStepsFallback";
+import { OnboardStep } from "../../../components/console/onboard/OnboardStepsInner";
 
 // Using `meta.env` requires `prerender = false`
 const BENCHER_API_URL = import.meta.env.BENCHER_API_URL;
@@ -19,7 +18,7 @@ const BENCHER_API_URL = import.meta.env.BENCHER_API_URL;
 
 <OnboardProject client:only="solid-js" apiUrl={BENCHER_API_URL}>
   <div slot="fallback">
-    <OnboardSteps step={OnboardStep.PROJECT} />
+    <OnboardStepsFallback step={OnboardStep.PROJECT} />
     <section class="section">
       <div class="container">
         <div class="columns is-centered">

diff --git a/services/console/src/pages/console/onboard/run.astro b/services/console/src/pages/console/onboard/run.astro
@@ -5,9 +5,8 @@ import { getEntry } from "astro:content";
 
 import BaseLayout from "../../../layouts/BaseLayout.astro";
 import OnboardRun from "../../../components/console/onboard/OnboardRun";
-import OnboardSteps, {
-	OnboardStep,
-} from "../../../components/console/onboard/OnboardSteps";
+import OnboardStepsFallback from "../../../components/console/onboard/OnboardStepsFallback";
+import { OnboardStep } from "../../../components/console/onboard/OnboardStepsInner";
 import Collection from "../../../util/collection";
 
 // Using `meta.env` requires `prerender = false`
@@ -26,7 +25,7 @@ const { Content } = await page.render();
 
 <OnboardRun client:only="solid-js" apiUrl={BENCHER_API_URL}>
   <div slot="fallback">
-    <OnboardSteps step={OnboardStep.RUN} />
+    <OnboardStepsFallback step={OnboardStep.RUN} />
     <section class="section">
       <div class="container">
         <div class="columns is-centered">