github-featured/triggerdotdev--trigger.dev
2
0
Fork 0
Code Issues Pull Requests Deployments Models Agent Notes Packages Projects Releases Wiki Activity

Improved wording and styling

Browse Source
This commit is contained in:
James Ritchie
2023-02-11 10:19:03 +00:00
parent ffcdc763eb
commit 1ca8760868
2 changed files with 31 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/webapp/app/routes/__app/orgs/$organizationSlug/__org/workflows.new.tsx
+3 -3
View File
@@ -296,19 +296,19 @@ export function StepNumber({
drawLine,
active = false,
}: {
stepNumber: string;
stepNumber?: string;
drawLine?: boolean;
active?: boolean;
}) {
return (
<div className="mr-3 flex flex-col items-center justify-center">
{active ? (
<span className="flex h-7 w-7 items-center justify-center rounded border border-green-900 bg-green-500 py-1 text-sm font-semibold text-slate-900 shadow">
<span className="flex h-7 w-7 items-center justify-center rounded bg-green-600 py-1 text-sm font-semibold text-slate-900 shadow">
{stepNumber}
</span>
) : (
<span className="flex h-7 w-7 items-center justify-center rounded border border-slate-700 bg-slate-800 py-1 text-sm font-semibold text-green-400 shadow">
{stepNumber}
✓
</span>
)}
apps/webapp/app/routes/__public/templates.tsx
+28 -26
View File
@@ -2,9 +2,12 @@ import {
CloudIcon,
CubeIcon,
CubeTransparentIcon,
EllipsisHorizontalCircleIcon,
EllipsisHorizontalIcon,
HomeIcon,
MinusCircleIcon,
MinusIcon,
RocketLaunchIcon,
XMarkIcon,
} from "@heroicons/react/24/outline";
import classNames from "classnames";
@@ -68,37 +71,12 @@ function Step1() {
);
}
function Step1Hosted({ showVisitedButtonState }: Step1Props) {
return (
<button onClick={showVisitedButtonState} className={buttonStyles}>
<CloudIcon className="h-10 w-10 text-blue-400" />
<Header3>Host the workflow for me in the cloud</Header3>
<Body size="small" className="text-slate-400">
Trigger.dev can host and handle the servers for me.
</Body>
</button>
);
}
function Step1HostedVisited() {
return (
<div className="relative flex flex-col items-center justify-start gap-4 rounded border border-dashed border-slate-950 bg-slate-800 px-4 py-8 transition">
<XMarkIcon className="absolute top-9 left-[calc(50%-20px)] h-10 w-10 text-rose-500" />
<CloudIcon className="h-10 w-10 text-blue-400/50" />
<Header3>Hosting coming soon…</Header3>
<Body size="small" className="text-center text-slate-400">
We're working hard to bring a cloud hosted service.
</Body>
</div>
);
}
function Step2() {
return (
<>
<div className="flex items-center justify-between">
<SubTitle className="flex items-center">
<StepNumber stepNumber="✓" />
<StepNumber />
I'll host the workflow myself
</SubTitle>
<TertiaryLink to="/">Change answer</TertiaryLink>
@@ -200,6 +178,30 @@ function Step4() {
);
}
function Step1Hosted({ showVisitedButtonState }: Step1Props) {
return (
<button onClick={showVisitedButtonState} className={buttonStyles}>
<CloudIcon className="h-10 w-10 text-blue-400" />
<Header3>Host the workflow for me in the cloud</Header3>
<Body size="small" className="text-slate-400">
Trigger.dev can host and handle the servers for me.
</Body>
</button>
);
}
function Step1HostedVisited() {
return (
<div className="relative flex flex-col items-center justify-start gap-4 rounded border border-dashed border-slate-950 bg-slate-800 px-4 py-8 transition">
<RocketLaunchIcon className="h-10 w-10 animate-pulse text-blue-400" />
<Header3>Cloud hosting coming soon…</Header3>
<Body size="small" className="text-center text-slate-400">
We're working hard to bring you a cloud hosted service.
</Body>
</div>
);
}
const buttonStyles =
"relative flex flex-col items-center justify-start hover:bg-slate-700 px-4 shadow gap-4 rounded bg-slate-700/50 py-8 border border-slate-700 transition";
const labelStyles =