Major v3 web app update (#924)

* Added the new colours to the Tailwind config

* Fixed Tsailwind compile errors

* WIP Geist working in the app

* WIP Storybook

* Storybook is working again… ouch

* Use Geist mono for CodeMirror

* Some find/replace class changes

* Resizable colours improved

* WIP on primary button

* Minor style improvements

* Improve the side menu header styling

* Improved v2 breadcrumbs

* Account side menu tweaks

* The page now works with the NavBar and UpgradePrompt

* Removed unused import

* Refactored the buttons to be dry-er

* Removed the breadcrumbs

* WIP on nav bar

* WIP updating the button styles

* Fix for the old test page

* Fix for type errors

* Removed console.log

* Colour change in the resizable handle

* New loading bar divider

* Removed the design plugin

* Creating our own storybook pages

* Added some “storybook” pages

* Added DetailCell storybook

* WIP new animation for the loading page

* Added the new loading divider

* Fix for the time frame filter having a green border

* Style improvements to the new test page

* Small style improvements

* Improvements to the list pagination components

* Nav bar back button improved

* Improvements to the run page

* Lots of v2 style improvements

* Help looks better

* Improvements to the regenerate API key modal

* More general improvements

* Added section titles to our storybook

* Added form stories

* Fix for missing key prop

* Loading bar is working

* Fixed button submitting state

* Fix for the test button icon

* Code bg improved

* Improved oauth buttons

* Integration page header fix

* Various improvements, mainly changing button variants

* Segmented control style updates

* Added an outline of 3px for the segment control

* Fixes for the billing pages

* More pricing improvements

* Added dialog to storybook

* Typography now in storybook

* Free usage bar added to storybook

* Added inline clode to storybook

* Separated menu types into a sub section in storybook

* NamedIcon now in storybook

* Added page header to storybook

* Added pricing callout to storybook

* Added radio groups to storybook

* Added segmented controllers to storybook

* Added shortcuts to storybook

* Added switches to storybook

* Added toast to storybook

* Added tooltips to storybook

* Added tree view to storybook

* Added usage charts to storybook

* Tarted up the environment variables page

* Fix for the FreePlanUsage panel bg colours

* Added new badge variants

* Added the <TaskPath /> to the tasks table

* Span header improvements

* Started work on the timeline

* Started work on the timeline

* Fix for the run page header

* Timeline tick marks are working

* Timeline working

* Got the durations showing on hover

* Button improvements

* Experimenting with how the duration should be shown

* Lots of refinements to the timeline

* Much nicer API for the Timeline

* The switch is now purple to match the design, with inverted thumb when on

* Removed old stuff

* Export the props

* Added the span with duration back in

* Simplified more and fixed the span durations

* Put in some decent dummy data

* Rendering defaults

* Wip with the mouse cursor

* Improvements to the story

* Added Slider primitive

* Integrated the icons into the slider

* Lots of layout improvements

* Cleaned up imports

* “Root” indicator

* Animated background on partials

* Pull the styles through to the spans and log dots

* Fixed some bugs in the TreeView when nodes get created or destroyed

* Fix for incorrect parentTask reference

* Added run streaming endpoint for live refreshing

* Added the tabs to Storybook

* Fix for status font size mismatch

* Fix for the misaligned run filter status

* Set a minimum duration on the timeline

* The TreeView now re-calculates if the number of nodes has changed

* Partials now render to the end

* Improved the durations gutter

* The duration is calculated using the current time if there are partial events

* Added the environment label to storybook

* Improved the environment label style

* Removed bottom margin from badge

* Button style improvements

* Callouts style fits the new design better

* Got the scrollbars to appear on the tree/timeline

* Added scroll support

* Synced scrolling working

* Close button and exit icon for the detail panel

* secure field shows start of env

* Clipboard improvements

* Latest lockfile

* Fix for the durations wrapping

---------

Co-authored-by: James Ritchie <[email protected]>

Author: matt-aitken

apps/webapp/.storybook/main.ts

@@ -27,7 +27,6 @@ const config: StorybookConfig = {
     "@storybook/addon-interactions",
     "storybook-addon-variants",
     "storybook-addon-designs",
-    "@storybook/addon-docs",
     {
       name: "@storybook/addon-styling",
       options: {

apps/webapp/.storybook/preview.tsx

@@ -19,7 +19,7 @@ const preview: Preview = {
       values: [
         {
           name: "App background",
-          value: "#0B1018",
+          value: "#15171A",
         },
       ],
     },

apps/webapp/app/assets/icons/ExitIcon.tsx

@@ -0,0 +1,14 @@
+export function ExitIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <line x1="3.5" y1="8" x2="11.5" y2="8" stroke="currentColor" stroke-linecap="round" />
+      <line x1="15.5" y1="1.5" x2="15.5" y2="14.5" stroke="currentColor" stroke-linecap="round" />
+      <path
+        d="M8.5 4.5L12 8L8.5 11.5"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+}

apps/webapp/app/assets/images/[email protected]

@@ -17,13 +17,13 @@ export function ActiveBadge({ active, className, badgeSize = "normal" }: ActiveB
   switch (active) {
     case true:
       return (
-        <span className={cn(variant[badgeSize], "bg-slate-800 text-green-500", className)}>
+        <span className={cn(variant[badgeSize], "bg-charcoal-800 text-green-500", className)}>
           Active
         </span>
       );
     case false:
       return (
-        <span className={cn(variant[badgeSize], "bg-slate-800 text-dimmed", className)}>
+        <span className={cn(variant[badgeSize], "bg-charcoal-800 text-text-dimmed", className)}>
           Disabled
         </span>
       );
@@ -52,6 +52,6 @@ export function NewBadge({
   badgeSize?: keyof typeof variant;
 }) {
   return (
-    <span className={cn(variant[badgeSize], "bg-green-600 text-background", className)}>New!</span>
+    <span className={cn(variant[badgeSize], "text-background bg-green-600", className)}>New!</span>
   );
 }

apps/webapp/app/assets/images/[email protected]

@@ -13,10 +13,10 @@ type ComingSoonProps = {
 export function ComingSoon({ title, description, icon }: ComingSoonProps) {
   return (
     <MainCenteredContainer>
-      <div className="flex flex-col justify-center rounded border border-slate-800 bg-slate-850">
-        <div className="flex items-center gap-2 border-b border-slate-750 px-4 py-4">
+      <div className="flex flex-col justify-center rounded border border-charcoal-800 bg-charcoal-850">
+        <div className="flex items-center gap-2 border-b border-charcoal-750 px-4 py-4">
           {typeof icon === "string" ? (
-            <NamedIconInBox name={icon} className={"h-10 w-10 bg-midnight-800"} />
+            <NamedIconInBox name={icon} className={"bg-midnight-800 h-10 w-10"} />
           ) : (
             icon
           )}

apps/webapp/app/components/ActiveBadge.tsx

@@ -15,7 +15,7 @@ export function DefinitionTip({
     <TooltipProvider>
       <Tooltip disableHoverableContent>
         <TooltipTrigger>
-          <span className="underline decoration-slate-600 decoration-dashed underline-offset-4 transition hover:decoration-slate-500">
+          <span className="underline decoration-charcoal-600 decoration-dashed underline-offset-4 transition hover:decoration-charcoal-500">
             {children}
           </span>
         </TooltipTrigger>

apps/webapp/app/components/ComingSoon.tsx

@@ -40,7 +40,7 @@ type DisplayOptionsProps = {
 export function ErrorDisplay({ title, message, button }: DisplayOptionsProps) {
   return (
     <div className="p-4">
-      <Header1 className="mb-4 border-b border-slate-800 pb-4">{title}</Header1>
+      <Header1 className="mb-4 border-b border-charcoal-800 pb-4">{title}</Header1>
       {message && <Header3>{message}</Header3>}
       <LinkButton to={button ? button.to : "/"} variant="primary/medium" className="mt-8">
         {button ? button.title : "Home"}

apps/webapp/app/components/DefinitionTooltip.tsx

@@ -114,11 +114,11 @@ function DiscordBanner() {
     <a
       href="https://trigger.dev/discord"
       target="_blank"
-      className="group mb-4 flex w-full items-center justify-between rounded-md border border-slate-600 bg-gradient-to-br from-blue-400/30 to-indigo-400/50 p-4 transition hover:border-indigo-400"
+      className="group mb-4 flex w-full items-center justify-between rounded-md border border-charcoal-600 bg-gradient-to-br from-blue-400/30 to-indigo-400/50 p-4 transition hover:border-indigo-400"
     >
       <div className="flex flex-col gap-y-2">
         <DiscordIcon className="h-8 w-8" />
-        <h2 className="font-title text-2xl text-bright transition group-hover:text-white">
+        <h2 className="font-title text-2xl text-text-bright transition group-hover:text-white">
           Join the Trigger.dev
           <br />
           Discord community
@@ -127,7 +127,7 @@ function DiscordBanner() {
           Get help or answer questions from the Trigger.dev community.
         </Paragraph>
       </div>
-      <ChevronRightIcon className="h-5 w-5 text-slate-400 transition group-hover:translate-x-1 group-hover:text-indigo-400" />
+      <ChevronRightIcon className="h-5 w-5 text-charcoal-400 transition group-hover:translate-x-1 group-hover:text-indigo-400" />
     </a>
   );
 }

apps/webapp/app/components/ErrorDisplay.tsx

@@ -25,11 +25,13 @@ function NextButton({ cursor }: { cursor?: string }) {
   return (
     <LinkButton
       to={path ?? "#"}
-      variant={"tertiary/small"}
-      TrailingIcon="chevron-right"
+      variant={"minimal/small"}
+      TrailingIcon="arrow-right"
+      trailingIconClassName="text-text-dimmed"
       className={cn(
         "flex items-center",
-        !path && "cursor-default opacity-50 group-hover:bg-transparent group-hover:text-slate-800"
+        !path &&
+          "cursor-not-allowed opacity-50 group-hover:bg-transparent group-hover:text-text-dimmed"
       )}
       onClick={(e) => !path && e.preventDefault()}
     >
@@ -44,11 +46,13 @@ function PreviousButton({ cursor }: { cursor?: string }) {
   return (
     <LinkButton
       to={path ?? "#"}
-      variant={"tertiary/small"}
-      LeadingIcon="chevron-left"
+      variant={"minimal/small"}
+      LeadingIcon="arrow-left"
+      leadingIconClassName="text-text-dimmed"
       className={cn(
         "flex items-center",
-        !path && "cursor-default opacity-50 group-hover:bg-transparent group-hover:text-slate-800"
+        !path &&
+          "cursor-not-allowed opacity-50 group-hover:bg-transparent group-hover:text-text-dimmed"
       )}
       onClick={(e) => !path && e.preventDefault()}
     >

apps/webapp/app/components/Feedback.tsx

@@ -43,7 +43,7 @@ const quotes: QuoteType[] = [
 ];
 
 const layout = "group grid place-items-center text-center overflow-hidden";
-const gridCell = "hover:bg-midnight-850 rounded-lg transition bg-midnight-850/40";
+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";
@@ -61,7 +61,7 @@ export function LoginPageLayout({ children }: { children: React.ReactNode }) {
 
   return (
     <main className="grid h-full grid-cols-12">
-      <div className="border-midnight-750 z-10 col-span-12 border-r bg-midnight-850 md:col-span-6">
+      <div className="border-midnight-750 z-10 col-span-12 border-r bg-background-bright md:col-span-6">
         <div className="flex h-full flex-col items-center justify-between p-6">
           <div className="flex w-full items-center justify-between">
             <a href="https://trigger.dev">
@@ -106,12 +106,12 @@ export function LoginPageLayout({ children }: { children: React.ReactNode }) {
         <LoginTooltip side="top" content={<QuoteTooltipContent />}>
           <div className={cn(layout, gridCell, wider)}>
             <div className="px-4">
-              <Header3 className="relative text-2xl font-normal leading-8 text-gray-600 transition before:relative before:right-1 before:top-0 before:text-4xl before:text-slate-600 before:opacity-20 before:content-['❝'] group-hover:text-slate-500 group-hover:before:opacity-30 lg-height:text-xl md-height:text-lg">
+              <Header3 className="relative text-2xl font-normal leading-8 text-gray-600 transition before:relative before:right-1 before:top-0 before:text-4xl before:text-charcoal-600 before:opacity-20 before:content-['❝'] group-hover:text-charcoal-500 group-hover:before:opacity-30 lg-height:text-xl md-height:text-lg">
                 {randomQuote?.quote}
               </Header3>
               <Paragraph
                 variant="small"
-                className="mt-4 text-gray-700 transition group-hover:text-slate-600"
+                className="mt-4 text-gray-700 transition group-hover:text-charcoal-600"
               >
                 {randomQuote?.person}
               </Paragraph>

apps/webapp/app/components/ListPagination.tsx

@@ -7,9 +7,9 @@ export function NoMobileOverlay() {
     <>
       <div className="fixed inset-0 z-[9999] flex items-center justify-center sm:hidden">
         <div className="relative h-full w-full bg-black opacity-90"></div>
-        <div className="absolute mx-8 flex flex-col items-center gap-6 rounded-lg bg-slate-850 px-8 py-10 text-center">
+        <div className="absolute mx-8 flex flex-col items-center gap-6 rounded-lg bg-charcoal-850 px-8 py-10 text-center">
           <XMarkIcon className="absolute top-14 h-8 w-8 text-rose-600" />
-          <DevicePhoneMobileIcon className="h-16 w-16 text-slate-500" />
+          <DevicePhoneMobileIcon className="h-16 w-16 text-charcoal-500" />
           <Paragraph>Trigger.dev is currently only available on desktop.</Paragraph>
           <LinkButton to="https://trigger.dev" variant="primary/medium">
             Back Home

apps/webapp/app/components/LoginPageLayout.tsx

@@ -14,7 +14,7 @@ export function ProductHuntBanner() {
       <LinkButton
         to="https://www.producthunt.com/posts/trigger-dev"
         target="_blank"
-        className="!text-white underline underline-offset-2 transition hover:decoration-slate-100 hover:decoration-2"
+        className="!text-white underline underline-offset-2 transition hover:decoration-charcoal-100 hover:decoration-2"
         variant="tertiary/small"
       >
         Vote for us today only!

apps/webapp/app/components/NoMobileOverlay.tsx

@@ -25,6 +25,6 @@ export function UserAvatar({
       />
     </div>
   ) : (
-    <UserCircleIcon className={cn("aspect-square text-slate-400", className)} />
+    <UserCircleIcon className={cn("aspect-square text-charcoal-400", className)} />
   );
 }

apps/webapp/app/components/ProductHuntBanner.tsx

@@ -14,13 +14,13 @@ export function VersionLabel({ environment, userName, version }: VersionLabelPro
   return (
     <div
       className={cn(
-        "inline-flex items-center justify-stretch justify-items-stretch rounded-sm border border-midnight-700 text-xxs"
+        "border-midnight-700 inline-flex items-center justify-stretch justify-items-stretch rounded-sm border text-xxs"
       )}
     >
-      <div className="px-1 text-xs tabular-nums text-dimmed">v{version}</div>
+      <div className="px-1 text-xs tabular-nums text-text-dimmed">v{version}</div>
       <div
         className={cn(
-          "inline-flex items-center justify-center rounded-r-sm border-l border-midnight-700 px-1 text-xxs font-medium uppercase tracking-wider",
+          "border-midnight-700 inline-flex items-center justify-center rounded-r-sm border-l px-1 text-xxs font-medium uppercase tracking-wider",
           environmentTextClassName(environment)
         )}
       >

apps/webapp/app/components/UserProfilePhoto.tsx

@@ -18,14 +18,14 @@ export function FreePlanUsage({ to, percentage }: { to: string; percentage: numb
   return (
     <div
       className={cn(
-        "rounded border border-slate-900 bg-[#101722] p-2.5",
+        "rounded border border-charcoal-700 bg-charcoal-750 p-2.5",
         hasHitLimit && "border-rose-800/60"
       )}
     >
       <div className="flex items-center justify-between gap-2">
         <div className="flex items-center gap-1">
-          <ArrowUpCircleIcon className="h-5 w-5 text-dimmed" />
-          <Paragraph className="text-2sm text-bright">Free Plan</Paragraph>
+          <ArrowUpCircleIcon className="h-5 w-5 text-text-dimmed" />
+          <Paragraph className="text-2sm text-text-bright">Free Plan</Paragraph>
         </div>
         <Link to={to} className="text-2sm text-indigo-500">
           Learn more

apps/webapp/app/components/VersionLabel.tsx

@@ -84,32 +84,32 @@ function ConcurrentRunsSlider({
             max={options.length - 1}
             step={1}
           >
-            <Slider.Track className="relative h-[8px] grow rounded-full bg-slate-850">
-              <Slider.Range className="absolute h-full rounded-full bg-indigo-500" />
+            <Slider.Track className="relative h-[8px] grow rounded-full bg-grid-bright">
+              <Slider.Range className="absolute h-full rounded-full bg-primary" />
             </Slider.Track>
             <Slider.Thumb
-              className="block h-5 w-5 rounded-full border-4 border-indigo-500 bg-slate-850 shadow-[0_1px_3px_4px_rgb(0_0_0_/_0.2),_0_1px_2px_-1px_rgb(0_0_0_/_0.1)] transition hover:border-indigo-400 hover:bg-slate-800 focus:shadow-[0_1px_3px_4px_rgb(0_0_0_/_0.2),_0_1px_2px_-1px_rgb(0_0_0_/_0.1)] focus:outline-none"
+              className="block h-5 w-5 rounded-full border-4 border-primary bg-charcoal-850 shadow-[0_1px_3px_4px_rgb(0_0_0_/_0.2),_0_1px_2px_-1px_rgb(0_0_0_/_0.1)] transition hover:border-primary hover:bg-charcoal-800 focus:shadow-[0_1px_3px_4px_rgb(0_0_0_/_0.2),_0_1px_2px_-1px_rgb(0_0_0_/_0.1)] focus:outline-none"
               aria-label="Concurrent runs slider"
             />
           </Slider.Root>
           <div className="ml-1.5 flex w-[99.85%] items-center justify-between">
             {options.map((tier, i) => {
               return (
-                <Paragraph variant="extra-small" className="text-slate-600" key={i}>
+                <Paragraph variant="extra-small" key={i}>
                   {tier.upto}
                 </Paragraph>
               );
             })}
           </div>
         </div>
         <div className="flex h-full items-start">
-          <span className="ml-6 text-dimmed">=</span>
-          <Header2 className="min-w-[8ch] text-right text-dimmed">
+          <span className="ml-6 text-text-dimmed">=</span>
+          <Header2 className="min-w-[8ch] text-right text-text-dimmed">
             {formatCurrency(cost, true)}
           </Header2>
         </div>
       </div>
-      <hr className="mt-6 border-border" />
+      <hr className="mt-6 border-grid-bright" />
     </div>
   );
 }
@@ -157,11 +157,11 @@ function RunsSlider({
             max={runIncrements}
             step={1}
           >
-            <Slider.Track className="relative h-[8px] grow rounded-full bg-slate-850">
-              <Slider.Range className="absolute h-full rounded-full bg-indigo-500" />
+            <Slider.Track className="relative h-[8px] grow rounded-full bg-grid-bright">
+              <Slider.Range className="absolute h-full rounded-full bg-primary" />
             </Slider.Track>
             <Slider.Thumb
-              className="block h-5 w-5 rounded-full border-4 border-indigo-500 bg-slate-850 shadow-[0_1px_3px_4px_rgb(0_0_0_/_0.2),_0_1px_2px_-1px_rgb(0_0_0_/_0.1)] transition hover:border-indigo-400 hover:bg-slate-800 focus:shadow-[0_1px_3px_4px_rgb(0_0_0_/_0.2),_0_1px_2px_-1px_rgb(0_0_0_/_0.1)] focus:outline-none"
+              className="block h-5 w-5 rounded-full border-4 border-primary bg-charcoal-850 shadow-[0_1px_3px_4px_rgb(0_0_0_/_0.2),_0_1px_2px_-1px_rgb(0_0_0_/_0.1)] transition hover:border-primary hover:bg-charcoal-800 focus:shadow-[0_1px_3px_4px_rgb(0_0_0_/_0.2),_0_1px_2px_-1px_rgb(0_0_0_/_0.1)] focus:outline-none"
               aria-label="Concurrent runs slider"
             />
           </Slider.Root>
@@ -185,13 +185,13 @@ function RunsSlider({
           </div>
         </div>
         <div className="flex h-full items-start">
-          <span className="ml-6 text-dimmed">=</span>
-          <Header2 className="min-w-[8ch] text-right text-dimmed">
+          <span className="ml-6 text-text-dimmed">=</span>
+          <Header2 className="min-w-[8ch] text-right text-text-dimmed">
             {formatCurrency(cost, true)}
           </Header2>
         </div>
       </div>
-      <hr className="mt-6 border-border" />
+      <hr className="mt-6 border-grid-bright" />
     </div>
   );
 }
@@ -250,9 +250,7 @@ function SliderMarker({
             : "justify-middle right-0"
         )}
       >
-        <Paragraph variant="extra-small" className="text-slate-600">
-          {text}
-        </Paragraph>
+        <Paragraph variant="extra-small">{text}</Paragraph>
       </div>
     </div>
   );