Change the style of workflow header (#855)

Co-authored-by: Muhammed Salih Altun <muhammedsalihaltun@gmail.com>

skyvern-frontend/src/components/ui/button-variants.ts

@@ -13,6 +13,8 @@ const buttonVariants = cva(
           "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
         secondary:
           "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        tertiary:
+          "bg-tertiary/20 text-tertiary-foreground border border-slate-500 hover:bg-tertiary/10 rounded-lg",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
       },

skyvern-frontend/src/index.css

@@ -19,6 +19,9 @@
     --secondary: 210 40% 96.1%;
     --secondary-foreground: 222.2 47.4% 11.2%;
 
+    --tertiary: 227.6 11.6% 48.8%;
+    --tertiary-foreground: 213 27% 84%;
+
     --muted: 210 40% 96.1%;
     --muted-foreground: 215.4 16.3% 46.9%;
 

skyvern-frontend/src/routes/workflows/editor/WorkflowHeader.tsx

@@ -3,11 +3,16 @@ import { Button } from "@/components/ui/button";
 import {
   ChevronDownIcon,
   ChevronUpIcon,
-  ExitIcon,
   PlayIcon,
 } from "@radix-ui/react-icons";
 import { useNavigate, useParams } from "react-router-dom";
 import { EditableNodeTitle } from "./nodes/components/EditableNodeTitle";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 
 type Props = {
   title: string;
@@ -28,30 +33,8 @@ function WorkflowHeader({
   const navigate = useNavigate();
 
   return (
-    <div className="flex h-full w-full bg-slate-elevation2">
-      <div className="flex h-full w-1/3 items-center pl-6">
-        <div className="flex">
-          <div
-            className="cursor-pointer rounded-full p-2 hover:bg-slate-elevation5"
-            onClick={() => {
-              navigate("/workflows");
-            }}
-          >
-            <ExitIcon className="h-6 w-6" />
-          </div>
-          <div>
-            <div
-              className="cursor-pointer rounded-full p-2 hover:bg-slate-elevation5"
-              onClick={() => {
-                onSave();
-              }}
-            >
-              <SaveIcon />
-            </div>
-          </div>
-        </div>
-      </div>
-      <div className="flex h-full w-1/3 items-center justify-center p-1">
+    <div className="flex h-full w-full justify-between bg-slate-elevation2 px-6 py-5">
+      <div className="flex h-full items-center">
         <EditableNodeTitle
           editable={true}
           onChange={onTitleChange}
@@ -60,7 +43,23 @@ function WorkflowHeader({
           inputClassName="text-3xl"
         />
       </div>
-      <div className="flex h-full w-1/3 items-center justify-end gap-4 p-4">
+      <div className="flex h-full w-1/3 items-center justify-end gap-4">
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                size="icon"
+                variant="tertiary"
+                onClick={() => {
+                  onSave();
+                }}
+              >
+                <SaveIcon />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>Save</TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
         <Button variant="secondary" size="lg" onClick={onParametersClick}>
           <span className="mr-2">Parameters</span>
           {parametersPanelOpen ? (

skyvern-frontend/src/routes/workflows/editor/nodes/components/EditableNodeTitle.tsx

@@ -42,6 +42,7 @@ function EditableNodeTitle({
             <HorizontallyResizingInput
               disabled={!editable}
               size={1}
+              autoFocus
               className={cn("nopan w-min border-0 p-0", inputClassName)}
               onBlur={(event) => {
                 if (!editable) {

skyvern-frontend/tailwind.config.js

@@ -38,6 +38,10 @@ module.exports = {
           DEFAULT: "hsl(var(--secondary))",
           foreground: "hsl(var(--secondary-foreground))",
         },
+        tertiary: {
+          DEFAULT: "hsl(var(--tertiary))",
+          foreground: "hsl(var(--tertiary-foreground))",
+        },
         destructive: {
           DEFAULT: "hsl(var(--destructive))",
           foreground: "hsl(var(--destructive-foreground))",