diff --git a/apps/webapp/app/assets/logos/ATAndTLogo.tsx b/apps/webapp/app/assets/logos/ATAndTLogo.tsx new file mode 100644 index 000000000..505294d34 --- /dev/null +++ b/apps/webapp/app/assets/logos/ATAndTLogo.tsx @@ -0,0 +1,21 @@ +export function ATAndTLogo({ className }: { className?: string }) { + return ( + + + + + ); +} diff --git a/apps/webapp/app/assets/logos/AppsmithLogo.tsx b/apps/webapp/app/assets/logos/AppsmithLogo.tsx new file mode 100644 index 000000000..4d4af738f --- /dev/null +++ b/apps/webapp/app/assets/logos/AppsmithLogo.tsx @@ -0,0 +1,34 @@ +export function AppsmithLogo({ className }: { className?: string }) { + return ( + + + + + + + + + + + + + ); +} diff --git a/apps/webapp/app/assets/logos/CalComLogo.tsx b/apps/webapp/app/assets/logos/CalComLogo.tsx new file mode 100644 index 000000000..097ddbe81 --- /dev/null +++ b/apps/webapp/app/assets/logos/CalComLogo.tsx @@ -0,0 +1,50 @@ +export function CalComLogo({ className }: { className?: string }) { + return ( + + + + + + + + + + + + + + + + + ); +} diff --git a/apps/webapp/app/assets/logos/OktaLogo.tsx b/apps/webapp/app/assets/logos/OktaLogo.tsx new file mode 100644 index 000000000..f507ab4ee --- /dev/null +++ b/apps/webapp/app/assets/logos/OktaLogo.tsx @@ -0,0 +1,35 @@ +export function OktaLogo({ className }: { className?: string }) { + return ( + + + + + + + + + + + + ); +} diff --git a/apps/webapp/app/assets/logos/ShopifyLogo.tsx b/apps/webapp/app/assets/logos/ShopifyLogo.tsx new file mode 100644 index 000000000..86c71de7c --- /dev/null +++ b/apps/webapp/app/assets/logos/ShopifyLogo.tsx @@ -0,0 +1,39 @@ +export function ShopifyLogo({ className }: { className?: string }) { + return ( + + + + + + + + + + + + + ); +} diff --git a/apps/webapp/app/assets/logos/VerizonLogo.tsx b/apps/webapp/app/assets/logos/VerizonLogo.tsx new file mode 100644 index 000000000..908dcb496 --- /dev/null +++ b/apps/webapp/app/assets/logos/VerizonLogo.tsx @@ -0,0 +1,33 @@ +export function VerizonLogo({ className }: { className?: string }) { + return ( + + + + + + + + + + + + ); +} diff --git a/apps/webapp/app/components/ActiveBadge.tsx b/apps/webapp/app/components/ActiveBadge.tsx index 0b0ba45e9..0ad0c543c 100644 --- a/apps/webapp/app/components/ActiveBadge.tsx +++ b/apps/webapp/app/components/ActiveBadge.tsx @@ -38,7 +38,7 @@ export function MissingIntegrationBadge({ badgeSize?: keyof typeof variant; }) { return ( - + Missing Integration ); @@ -52,6 +52,8 @@ export function NewBadge({ badgeSize?: keyof typeof variant; }) { return ( - New! + + New! + ); } diff --git a/apps/webapp/app/components/Feedback.tsx b/apps/webapp/app/components/Feedback.tsx index 63d4f801b..3abf5d862 100644 --- a/apps/webapp/app/components/Feedback.tsx +++ b/apps/webapp/app/components/Feedback.tsx @@ -9,7 +9,7 @@ import { Button } from "./primitives/Buttons"; import { Fieldset } from "./primitives/Fieldset"; import { FormButtons } from "./primitives/FormButtons"; import { FormError } from "./primitives/FormError"; -import { Header2 } from "./primitives/Headers"; +import { Header1, Header2 } from "./primitives/Headers"; import { InputGroup } from "./primitives/InputGroup"; import { Label } from "./primitives/Label"; import { Paragraph } from "./primitives/Paragraph"; @@ -57,11 +57,9 @@ export function Feedback({ button, defaultValue = "bug" }: FeedbackProps) { {button} - How can we help? -
- Send us a message + How can we help?
@@ -88,14 +86,14 @@ export function Feedback({ button, defaultValue = "bug" }: FeedbackProps) { {message.error} {form.error} -
+
We read every message and respond quickly. + } @@ -114,20 +112,20 @@ function DiscordBanner() {
-

+ Join the Trigger.dev
Discord community -

- + + Get help or answer questions from the Trigger.dev community.
- + ); } diff --git a/apps/webapp/app/components/LoginPageLayout.tsx b/apps/webapp/app/components/LoginPageLayout.tsx index 877b6e362..536712265 100644 --- a/apps/webapp/app/components/LoginPageLayout.tsx +++ b/apps/webapp/app/components/LoginPageLayout.tsx @@ -1,20 +1,15 @@ -import { - BoltIcon, - CloudIcon, - CodeBracketIcon, - CodeBracketSquareIcon, - HeartIcon, - ServerStackIcon, -} from "@heroicons/react/24/solid"; import { useEffect, useState } from "react"; -import { cn } from "~/utils/cn"; +import { ATAndTLogo } from "~/assets/logos/ATAndTLogo"; +import { AppsmithLogo } from "~/assets/logos/AppsmithLogo"; +import { CalComLogo } from "~/assets/logos/CalComLogo"; +import { OktaLogo } from "~/assets/logos/OktaLogo"; +import { ShopifyLogo } from "~/assets/logos/ShopifyLogo"; +import { VerizonLogo } from "~/assets/logos/VerizonLogo"; import { LogoType } from "./LogoType"; import { LinkButton } from "./primitives/Buttons"; import { Header3 } from "./primitives/Headers"; -import { Icon } from "./primitives/Icon"; import { Paragraph } from "./primitives/Paragraph"; import { TextLink } from "./primitives/TextLink"; -import { LoginTooltip } from "./primitives/Tooltip"; interface QuoteType { quote: string; @@ -42,16 +37,6 @@ const quotes: QuoteType[] = [ }, ]; -const layout = "group grid place-items-center text-center overflow-hidden"; -const gridCell = "hover:bg-background-bright rounded-lg transition bg-background-bright/40"; -const opacity = "opacity-10 group-hover:opacity-100 transition group-hover:scale-105"; -const logos = "h-[60%] w-[60%] transition grayscale group-hover:grayscale-0"; -const features = "h-[60%] w-[60%] text-gray-500 grayscale transition group-hover:grayscale-0"; -const wide = "col-span-2"; -const wider = "col-span-3 row-span-2"; -const mediumSquare = "col-span-2 row-span-2"; -const hidden = "hidden xl:grid"; - export function LoginPageLayout({ children }: { children: React.ReactNode }) { const [randomQuote, setRandomQuote] = useState(null); useEffect(() => { @@ -60,282 +45,43 @@ export function LoginPageLayout({ children }: { children: React.ReactNode }) { }, []); return ( -
-
+
+
- + Documentation
{children}
- - Having login issues? Email us or{" "} - ask us in Discord + + Having login issues? Email us{" "} + or ask us in Discord
-
- }> -
- +
+
+ + {randomQuote?.quote} + + {randomQuote?.person} +
+
+ Trusted by developers at +
+ + + + + +
- - }> -
- -
- - }> -
- -
- - } className="max-w-[15rem]"> -
- -
- - }> -
-
- - {randomQuote?.quote} - - - {randomQuote?.person} - -
-
- - }> -
- -
- - }> -
- -
- - }> -
- -
- - }> -
- -
- - }> -
- -
- - }> -
- -
- - }> -
- -
- +
); } - -function SlackTooltipContent() { - return ( - <> -
- - - Slack Integration - -
- Post messages to your team when your Job is triggered. - - ); -} - -function StripeTooltipContent() { - return ( - <> -
- - - Stripe Integration - -
- Trigger payments, emails, subscription upgrades… - - ); -} - -function SupabaseTooltipContent() { - return ( - <> -
- - - Supabase Integration - -
- React to changes in your database. - - ); -} - -function SendgridTooltipContent() { - return ( - <> -
- - - SendGrid Integration - -
- - Create a drip campaign, trigger an onboarding sequence and more… - - - ); -} - -function AirtableTooltipContent() { - return ( - <> -
- - - Airtable Integration - -
- - Update your Airtable records when you make a Stripe sale, receive a new Typeform response - and more… - - - ); -} - -function OpenaiTooltipContent() { - return ( - <> -
- - - OpenAI Integration - -
- Generate text, images, code and more with OpenAI's API. - - ); -} - -function TriggerTooltipContent() { - return ( - <> -
- - - Triggering your Job - -
- - Trigger your Jobs with a webhook, on a recurring schedule, or from your own custom events. - - - ); -} - -function QuoteTooltipContent() { - return ( - <> -
- - - Loved by developers - -
- - ); -} - -function InYourCodebaseTooltipContent() { - return ( - <> -
- - - In your codebase - -
- - Create background jobs where they belong: in your codebase. - - - ); -} - -function CloudTooltipContent() { - return ( - <> -
- - - Zero infrastructure - -
- - Use our SDK to write Jobs in your codebase and deploy as you normally do. - - - ); -} - -function ServerlessTooltipContent() { - return ( - <> -
- - - Full serverless support - -
- - Run long-running background jobs without worrying about timeouts. - - - ); -} - -function ReactHooksTooltipContent() { - return ( - <> -
- - - Show Job progress in your UI - -
- - Use our React hooks to display a real-time status to your users. - - - ); -} diff --git a/apps/webapp/app/components/events/EventsFilters.tsx b/apps/webapp/app/components/events/EventsFilters.tsx index cdbeb7ee0..13711d804 100644 --- a/apps/webapp/app/components/events/EventsFilters.tsx +++ b/apps/webapp/app/components/events/EventsFilters.tsx @@ -15,6 +15,7 @@ import { environmentKeys, FilterableEnvironment } from "~/components/runs/RunSta import { TimeFrameFilter } from "../runs/TimeFrameFilter"; import { useCallback } from "react"; import { Button } from "../primitives/Buttons"; +import { TrashIcon } from "@heroicons/react/20/solid"; export function EventsFilters() { const navigate = useNavigate(); @@ -66,19 +67,22 @@ export function EventsFilters() { }, []); return ( -
+
- + - + All environments @@ -116,12 +120,15 @@ export function RunsFilters() { - + - + All environments @@ -156,12 +160,15 @@ export function RunsFilters({ possibleEnvironments, possibleTasks }: RunFiltersP - + - + All tasks {possibleTasks.map((task) => ( - + {task} @@ -198,9 +211,7 @@ export function RunsFilters({ possibleEnvironments, possibleTasks }: RunFiltersP - +
); } diff --git a/apps/webapp/app/root.tsx b/apps/webapp/app/root.tsx index 3cb2d337d..61dcf12a6 100644 --- a/apps/webapp/app/root.tsx +++ b/apps/webapp/app/root.tsx @@ -1,17 +1,8 @@ import { ErrorBoundary as HighlightErrorBoundary } from "@highlight-run/react"; -import type { LinksFunction, LoaderFunctionArgs } from "@remix-run/node"; +import type { LinksFunction, LoaderFunctionArgs, MetaFunction } from "@remix-run/node"; import type { ShouldRevalidateFunction } from "@remix-run/react"; -import { - Links, - LiveReload, - Meta, - Outlet, - Scripts, - ScrollRestoration, - useMatches, -} from "@remix-run/react"; -import { metaV1 } from "@remix-run/v1-meta"; -import { TypedMetaFunction, typedjson, useTypedLoaderData } from "remix-typedjson"; +import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration } from "@remix-run/react"; +import { UseDataFunctionReturn, typedjson, useTypedLoaderData } from "remix-typedjson"; import { ExternalScripts } from "remix-utils/external-scripts"; import type { ToastMessage } from "~/models/message.server"; import { commitSession, getSession } from "~/models/message.server"; @@ -24,7 +15,6 @@ import { env } from "./env.server"; import { featuresForRequest } from "./features.server"; import { useHighlight } from "./hooks/useHighlight"; import { usePostHog } from "./hooks/usePostHog"; -import { useTypedMatchesData } from "./hooks/useTypedMatchData"; import { getUser } from "./services/session.server"; import { appEnvTitleTag } from "./utils"; @@ -32,13 +22,19 @@ export const links: LinksFunction = () => { return [{ rel: "stylesheet", href: tailwindStylesheetUrl }]; }; -export const meta: TypedMetaFunction = (args) => { - return metaV1(args, { - title: `Trigger.dev${appEnvTitleTag(args.data?.appEnv)}`, - charset: "utf-8", - viewport: "width=1024, initial-scale=1", - robots: args.data.features.isManagedCloud ? "index, follow" : "noindex, nofollow", - }); +export const meta: MetaFunction = ({ data }) => { + const typedData = data as UseDataFunctionReturn; + return [ + { title: `Trigger.dev${appEnvTitleTag(typedData.appEnv)}` }, + { + name: "viewport", + content: "width=1024, initial-scale=1", + }, + { + name: "robots", + content: typedData.features.isManagedCloud ? "index, follow" : "noindex, nofollow", + }, + ]; }; export const loader = async ({ request }: LoaderFunctionArgs) => { @@ -77,10 +73,12 @@ export function ErrorBoundary() { <> + + - + @@ -112,7 +110,7 @@ function App() { - + diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.settings/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.settings/route.tsx index ae8c674a0..a13b8618e 100644 --- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.settings/route.tsx +++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.settings/route.tsx @@ -128,7 +128,8 @@ export default function Page() { - This goes in your trigger.config file. + This goes in your{" "} + trigger.config file.
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug_.projects.new/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug_.projects.new/route.tsx index 3809f59ce..022dd9b7e 100644 --- a/apps/webapp/app/routes/_app.orgs.$organizationSlug_.projects.new/route.tsx +++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug_.projects.new/route.tsx @@ -140,14 +140,14 @@ export default function NewOrganizationPage() { {v3Enabled ? ( - + - + Version 2 diff --git a/apps/webapp/app/routes/confirm-basic-details.tsx b/apps/webapp/app/routes/confirm-basic-details.tsx index 5c1ad1c60..852163c6d 100644 --- a/apps/webapp/app/routes/confirm-basic-details.tsx +++ b/apps/webapp/app/routes/confirm-basic-details.tsx @@ -1,5 +1,6 @@ import { conform, useForm } from "@conform-to/react"; import { parse } from "@conform-to/zod"; +import { ArrowRightIcon } from "@heroicons/react/20/solid"; import { HandRaisedIcon } from "@heroicons/react/24/solid"; import { ActionFunction, json } from "@remix-run/node"; import { Form, useActionData } from "@remix-run/react"; @@ -230,7 +231,7 @@ export default function Page() { + } diff --git a/apps/webapp/app/routes/login._index/route.tsx b/apps/webapp/app/routes/login._index/route.tsx index ce27b705c..82a11f18b 100644 --- a/apps/webapp/app/routes/login._index/route.tsx +++ b/apps/webapp/app/routes/login._index/route.tsx @@ -1,13 +1,7 @@ -import type { LoaderFunctionArgs } from "@remix-run/node"; +import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node"; import { Form } from "@remix-run/react"; -import { getMatchesData, metaV1 } from "@remix-run/v1-meta"; -import { - TypedMetaFunction, - UseDataFunctionReturn, - redirect, - typedjson, - useTypedLoaderData, -} from "remix-typedjson"; +import { GitHubDarkIcon } from "@trigger.dev/companyicons"; +import { redirect, typedjson, useTypedLoaderData } from "remix-typedjson"; import { LoginPageLayout } from "~/components/LoginPageLayout"; import { Button, LinkButton } from "~/components/primitives/Buttons"; import { Fieldset } from "~/components/primitives/Fieldset"; @@ -15,19 +9,28 @@ import { Header1 } from "~/components/primitives/Headers"; import { NamedIcon } from "~/components/primitives/NamedIcon"; import { Paragraph } from "~/components/primitives/Paragraph"; import { TextLink } from "~/components/primitives/TextLink"; -import type { LoaderType as RootLoader } from "~/root"; import { isGithubAuthSupported } from "~/services/auth.server"; import { commitSession, setRedirectTo } from "~/services/redirectTo.server"; import { getUserId } from "~/services/session.server"; -import { appEnvTitleTag } from "~/utils"; import { requestUrl } from "~/utils/requestUrl.server"; -export const meta: TypedMetaFunction = (args) => { - const matchesData = getMatchesData(args) as { root: UseDataFunctionReturn }; +export const meta: MetaFunction = ({ matches }) => { + const parentMeta = matches + .flatMap((match) => match.meta ?? []) + .filter((meta) => { + if ("title" in meta) return false; + if ("name" in meta && meta.name === "viewport") return false; + return true; + }); - return metaV1(args, { - title: `Login to Trigger.dev${appEnvTitleTag(matchesData.root.appEnv)}`, - }); + return [ + ...parentMeta, + { title: `Login to Trigger.dev` }, + { + name: "viewport", + content: "width=device-width,initial-scale=1", + }, + ]; }; export type PromiseReturnType Promise> = Awaited< @@ -71,7 +74,7 @@ export default function LoginPage() { className="w-full" >
- + Welcome @@ -86,22 +89,18 @@ export default function LoginPage() { fullWidth data-action="continue with github" > - - Continue with GitHub + + Continue with GitHub )} - + Continue with Email
diff --git a/apps/webapp/app/routes/login.magic/route.tsx b/apps/webapp/app/routes/login.magic/route.tsx index f74ac7f3b..05bec7c54 100644 --- a/apps/webapp/app/routes/login.magic/route.tsx +++ b/apps/webapp/app/routes/login.magic/route.tsx @@ -1,14 +1,8 @@ import { InboxArrowDownIcon } from "@heroicons/react/24/solid"; -import type { ActionFunctionArgs, LoaderFunctionArgs } from "@remix-run/node"; +import type { ActionFunctionArgs, LoaderFunctionArgs, MetaFunction } from "@remix-run/node"; import { redirect } from "@remix-run/node"; import { Form, useNavigation } from "@remix-run/react"; -import { getMatchesData, metaV1 } from "@remix-run/v1-meta"; -import { - TypedMetaFunction, - UseDataFunctionReturn, - typedjson, - useTypedLoaderData, -} from "remix-typedjson"; +import { typedjson, useTypedLoaderData } from "remix-typedjson"; import { z } from "zod"; import { LoginPageLayout } from "~/components/LoginPageLayout"; import { Button, LinkButton } from "~/components/primitives/Buttons"; @@ -21,17 +15,26 @@ import { InputGroup } from "~/components/primitives/InputGroup"; import { NamedIcon } from "~/components/primitives/NamedIcon"; import { Paragraph } from "~/components/primitives/Paragraph"; import { TextLink } from "~/components/primitives/TextLink"; -import type { LoaderType as RootLoader } from "~/root"; import { authenticator } from "~/services/auth.server"; import { commitSession, getUserSession } from "~/services/sessionStorage.server"; -import { appEnvTitleTag } from "~/utils"; -export const meta: TypedMetaFunction = (args) => { - const matchesData = getMatchesData(args) as { root: UseDataFunctionReturn }; +export const meta: MetaFunction = ({ matches }) => { + const parentMeta = matches + .flatMap((match) => match.meta ?? []) + .filter((meta) => { + if ("title" in meta) return false; + if ("name" in meta && meta.name === "viewport") return false; + return true; + }); - return metaV1(args, { - title: `Login to Trigger.dev${appEnvTitleTag(matchesData.root.appEnv)}`, - }); + return [ + ...parentMeta, + { title: `Login to Trigger.dev` }, + { + name: "viewport", + content: "width=device-width,initial-scale=1", + }, + ]; }; export async function loader({ request }: LoaderFunctionArgs) { @@ -120,7 +123,7 @@ export default function LoginMagicLinkPage() { type="submit" name="action" value="reset" - variant="tertiary/small" + variant="minimal/small" LeadingIcon="arrow-left" leadingIconClassName="text-text-dimmed group-hover:text-text-bright transition" data-action="re-enter email" @@ -131,7 +134,7 @@ export default function LoginMagicLinkPage() { confirmButton={ Log in using another option @@ -142,7 +145,7 @@ export default function LoginMagicLinkPage() { ) : ( <> - + Welcome @@ -171,10 +174,14 @@ export default function LoginMagicLinkPage() { data-action="send a magic link" > - {isLoading ? "Sending…" : "Send a magic link"} + {isLoading ? ( + Sending… + ) : ( + Send a magic link + )} {magicLinkError && {magicLinkError}} @@ -192,7 +199,7 @@ export default function LoginMagicLinkPage() { -
- - - -
- - - - By creating an account you agree to our terms and{" "} - privacy policies. - -
- -
- - ); -} diff --git a/apps/webapp/app/routes/storybook/route.tsx b/apps/webapp/app/routes/storybook/route.tsx index b750c945a..b7077a87e 100644 --- a/apps/webapp/app/routes/storybook/route.tsx +++ b/apps/webapp/app/routes/storybook/route.tsx @@ -113,10 +113,6 @@ const stories: Story[] = [ name: "Simple form", slug: "simple-form", }, - { - name: "Login form", - slug: "login-form", - }, { name: "Search fields", slug: "search-fields",