v3 dev connection working. Made it slightly red

Author: matt-aitken

apps/webapp/app/components/DevPresence.tsx

@@ -184,25 +184,26 @@ export function DevDisconnectedBanner({ isConnected }: { isConnected: boolean |
   return (
     <Dialog>
       <AnimatePresence>
-        <motion.div
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          exit={{ opacity: 0 }}
-          transition={{ duration: 0.3 }}
-          className="flex"
-        >
-          {isConnected === false && (
+        {isConnected === false && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.3 }}
+            className="flex"
+          >
             <DialogTrigger asChild>
               <Button
                 variant="minimal/small"
-                className="py-1 pl-1 pr-2 text-error"
+                className="border border-error/20 bg-error/10 py-1 pl-1 pr-2 group-hover/button:border-error/30 group-hover/button:bg-error/20"
+                iconSpacing="gap-1"
                 LeadingIcon={<ConnectionIcon isConnected={false} />}
               >
                 Your local dev server is not connected to Trigger.dev
               </Button>
             </DialogTrigger>
-          )}
-        </motion.div>
+          </motion.div>
+        )}
       </AnimatePresence>
       <DevPresencePanel isConnected={isConnected} />
     </Dialog>

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx

@@ -672,9 +672,6 @@ function TasksTreeView({
                       </div>
                     </div>
                   </div>
-                  {!isCompleted &&
-                    environmentType === "DEVELOPMENT" &&
-                    index === displayEvents.length - 1 && <ConnectedDevWarning />}
                 </>
               )}
               onScroll={(scrollTop) => {
@@ -1276,32 +1273,6 @@ function CurrentTimeIndicator({
   );
 }
 
-function ConnectedDevWarning() {
-  const { isConnected } = useDevPresence();
-
-  return (
-    <div
-      className={cn(
-        "flex items-center overflow-hidden pl-5 pr-2 transition-opacity duration-500",
-        isConnected ? "h-0 opacity-0" : "opacity-100"
-      )}
-    >
-      <Callout
-        variant="error"
-        icon={<DisconnectedIcon className="size-5 shrink-0" />}
-        className="mt-2"
-      >
-        <div className="flex flex-col gap-1">
-          <Paragraph variant="small" spacing>
-            Your local dev server is not connectedr. Check you're running the CLI:
-          </Paragraph>
-          <ClipboardField variant="secondary/small" value="npx trigger.dev@latest dev" />
-        </div>
-      </Callout>
-    </div>
-  );
-}
-
 function KeyboardShortcuts({
   expandAllBelowDepth,
   collapseAllBelowDepth,