Skip to content

Commit 2a1273b

Browse files
matt-aitkensamejr
matt-aitken
and
samejr
authored
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 <james@jamesritchie.co.uk>
1 parent 64401ee commit 2a1273b

240 files changed

Lines changed: 5151 additions & 4477 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎apps/webapp/.storybook/main.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@ const config: StorybookConfig = {
2727
"@storybook/addon-interactions",
2828
"storybook-addon-variants",
2929
"storybook-addon-designs",
30-
"@storybook/addon-docs",
3130
{
3231
name: "@storybook/addon-styling",
3332
options: {

‎apps/webapp/.storybook/preview.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const preview: Preview = {
1919
values: [
2020
{
2121
name: "App background",
22-
value: "#0B1018",
22+
value: "#15171A",
2323
},
2424
],
2525
},

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
export function ExitIcon({ className }: { className?: string }) {
2+
return (
3+
<svg className={className} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
4+
<line x1="3.5" y1="8" x2="11.5" y2="8" stroke="currentColor" stroke-linecap="round" />
5+
<line x1="15.5" y1="1.5" x2="15.5" y2="14.5" stroke="currentColor" stroke-linecap="round" />
6+
<path
7+
d="M8.5 4.5L12 8L8.5 11.5"
8+
stroke="currentColor"
9+
stroke-linecap="round"
10+
stroke-linejoin="round"
11+
/>
12+
</svg>
13+
);
14+
}

‎apps/webapp/app/assets/images/error-banner-tile@2x.png‎

166 Bytes
Loading

‎apps/webapp/app/assets/images/tile-in-progress@2x.png‎

170 Bytes
Loading

‎apps/webapp/app/components/ActiveBadge.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,13 @@ export function ActiveBadge({ active, className, badgeSize = "normal" }: ActiveB
1717
switch (active) {
1818
case true:
1919
return (
20-
<span className={cn(variant[badgeSize], "bg-slate-800 text-green-500", className)}>
20+
<span className={cn(variant[badgeSize], "bg-charcoal-800 text-green-500", className)}>
2121
Active
2222
</span>
2323
);
2424
case false:
2525
return (
26-
<span className={cn(variant[badgeSize], "bg-slate-800 text-dimmed", className)}>
26+
<span className={cn(variant[badgeSize], "bg-charcoal-800 text-text-dimmed", className)}>
2727
Disabled
2828
</span>
2929
);
@@ -52,6 +52,6 @@ export function NewBadge({
5252
badgeSize?: keyof typeof variant;
5353
}) {
5454
return (
55-
<span className={cn(variant[badgeSize], "bg-green-600 text-background", className)}>New!</span>
55+
<span className={cn(variant[badgeSize], "text-background bg-green-600", className)}>New!</span>
5656
);
5757
}

‎apps/webapp/app/components/ComingSoon.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,10 @@ type ComingSoonProps = {
1313
export function ComingSoon({ title, description, icon }: ComingSoonProps) {
1414
return (
1515
<MainCenteredContainer>
16-
<div className="flex flex-col justify-center rounded border border-slate-800 bg-slate-850">
17-
<div className="flex items-center gap-2 border-b border-slate-750 px-4 py-4">
16+
<div className="flex flex-col justify-center rounded border border-charcoal-800 bg-charcoal-850">
17+
<div className="flex items-center gap-2 border-b border-charcoal-750 px-4 py-4">
1818
{typeof icon === "string" ? (
19-
<NamedIconInBox name={icon} className={"h-10 w-10 bg-midnight-800"} />
19+
<NamedIconInBox name={icon} className={"bg-midnight-800 h-10 w-10"} />
2020
) : (
2121
icon
2222
)}

‎apps/webapp/app/components/DefinitionTooltip.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export function DefinitionTip({
1515
<TooltipProvider>
1616
<Tooltip disableHoverableContent>
1717
<TooltipTrigger>
18-
<span className="underline decoration-slate-600 decoration-dashed underline-offset-4 transition hover:decoration-slate-500">
18+
<span className="underline decoration-charcoal-600 decoration-dashed underline-offset-4 transition hover:decoration-charcoal-500">
1919
{children}
2020
</span>
2121
</TooltipTrigger>

‎apps/webapp/app/components/ErrorDisplay.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ type DisplayOptionsProps = {
4040
export function ErrorDisplay({ title, message, button }: DisplayOptionsProps) {
4141
return (
4242
<div className="p-4">
43-
<Header1 className="mb-4 border-b border-slate-800 pb-4">{title}</Header1>
43+
<Header1 className="mb-4 border-b border-charcoal-800 pb-4">{title}</Header1>
4444
{message && <Header3>{message}</Header3>}
4545
<LinkButton to={button ? button.to : "/"} variant="primary/medium" className="mt-8">
4646
{button ? button.title : "Home"}

‎apps/webapp/app/components/Feedback.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -114,11 +114,11 @@ function DiscordBanner() {
114114
<a
115115
href="https://trigger.dev/discord"
116116
target="_blank"
117-
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"
117+
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"
118118
>
119119
<div className="flex flex-col gap-y-2">
120120
<DiscordIcon className="h-8 w-8" />
121-
<h2 className="font-title text-2xl text-bright transition group-hover:text-white">
121+
<h2 className="font-title text-2xl text-text-bright transition group-hover:text-white">
122122
Join the Trigger.dev
123123
<br />
124124
Discord community
@@ -127,7 +127,7 @@ function DiscordBanner() {
127127
Get help or answer questions from the Trigger.dev community.
128128
</Paragraph>
129129
</div>
130-
<ChevronRightIcon className="h-5 w-5 text-slate-400 transition group-hover:translate-x-1 group-hover:text-indigo-400" />
130+
<ChevronRightIcon className="h-5 w-5 text-charcoal-400 transition group-hover:translate-x-1 group-hover:text-indigo-400" />
131131
</a>
132132
);
133133
}

0 commit comments

Comments
 (0)