From d936cc0b356a7ee8aea6acdaec7e7e55451c1fc7 Mon Sep 17 00:00:00 2001
From: Frikky <frikky@shuffler.io>
Date: Mon, 2 Dec 2024 18:35:28 +0100
Subject: [PATCH] Added 404 page

---
 frontend/src/App.jsx                     |  11 +-
 frontend/src/components/LeftSideBar.jsx  |   4 +-
 frontend/src/components/ParsedAction.jsx |  21 +-
 frontend/src/defaultCytoscapeStyle.jsx   |   4 +-
 frontend/src/theme.jsx                   |   1 +
 frontend/src/views/404.jsx               | 138 +++++++++++++
 frontend/src/views/AngularWorkflow.jsx   | 245 +++++++++++++----------
 frontend/src/views/Workflows2.jsx        |   4 +-
 8 files changed, 307 insertions(+), 121 deletions(-)
 create mode 100644 frontend/src/views/404.jsx

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index d6a3de2d..8f7ec2e1 100755
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -49,6 +49,7 @@ import MFASetUp from './components/MFASetUP.jsx';
 import ApiExplorerWrapper from './views/ApiExplorerWrapper.jsx';
 import LeftSideBar from './components/LeftSideBar.jsx';
 import CodeWorkflow from './views/CodeWorkflow.jsx';
+import NotFound from './views/404.jsx';
 
 import { ToastContainer, toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
@@ -679,7 +680,15 @@ const App = (message, props) => {
         	    />
         	  }
         	/>
-				</Routes>
+
+			<Route
+				exact
+				path="/*"
+				element={
+					<NotFound />
+				}
+			/>
+		</Routes>
       </div>
 
   return (
diff --git a/frontend/src/components/LeftSideBar.jsx b/frontend/src/components/LeftSideBar.jsx
index a7764172..011ec9fe 100644
--- a/frontend/src/components/LeftSideBar.jsx
+++ b/frontend/src/components/LeftSideBar.jsx
@@ -985,7 +985,7 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
               </span>
             </Button>
 	  		</Link>
-	  		<Link to="/workflows" style={hrefStyle}>
+	  		<Link to="/workflows2" style={hrefStyle}>
             <Button
               onClick={(event) => {
                 setCurrentOpenTab("workflows");
@@ -1015,7 +1015,7 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
               </span>
             </Button>
 	  		</Link> 
-	  		<Link to="/search?tab=org_apps" style={hrefStyle}>
+	  		<Link to="/apps2" style={hrefStyle}>
             <Button
               onClick={(event) => {
                 setCurrentOpenTab("apps");
diff --git a/frontend/src/components/ParsedAction.jsx b/frontend/src/components/ParsedAction.jsx
index 63e6ceaa..4f4bde7e 100755
--- a/frontend/src/components/ParsedAction.jsx
+++ b/frontend/src/components/ParsedAction.jsx
@@ -2378,14 +2378,14 @@ const ParsedAction = (props) => {
               return newname;
             }}
             fullWidth
-			  sx={{
-				'& .MuiOutlinedInput-root': {
-				  height: 40, // Adjust the input height
-				},
-				'& .MuiAutocomplete-input': {
-				  padding: '8px', // Adjust the text padding
-				},
-			  }}
+		    sx={{
+		      '& .MuiOutlinedInput-root': {
+		        height: 40, // Adjust the input height
+		      },
+		      '& .MuiAutocomplete-input': {
+		        padding: '8px', // Adjust the text padding
+		      },
+		    }}
 
             style={{
               backgroundColor: theme.palette.backgroundColor,
@@ -2530,10 +2530,7 @@ const ParsedAction = (props) => {
 							color="primary"
 							id="checkbox-search"
 							variant="body1"
-							style={{
-								backgroundColor: theme.palette.platformColor,
-								borderRadius: theme.palette?.borderRadius,
-							}}
+							style={theme.palette.textFieldStyle}
 							label={isIntegration ? "Choose a category" : "Find Actions"}
 							variant="outlined"
 							name={`disable_autocomplete_${Math.random()}`}
diff --git a/frontend/src/defaultCytoscapeStyle.jsx b/frontend/src/defaultCytoscapeStyle.jsx
index e5a728f2..135b68f5 100644
--- a/frontend/src/defaultCytoscapeStyle.jsx
+++ b/frontend/src/defaultCytoscapeStyle.jsx
@@ -58,7 +58,7 @@ const data = [
       "curve-style": "unbundled-bezier",
       label: "data(label)",
       "text-margin-y": "-15px",
-      width: "5px",
+      width: "3px",
       color: "white",
       "line-fill": "linear-gradient",
       "line-gradient-stop-positions": ["0.0", "100"],
@@ -296,7 +296,7 @@ const data = [
     selector: "node[!is_valid]",
     css: {
       "border-color": "#f53434",
-      "border-width": "10px",
+      "border-width": "5px",
     },
   },
   {
diff --git a/frontend/src/theme.jsx b/frontend/src/theme.jsx
index 87aa89e1..22304fd0 100644
--- a/frontend/src/theme.jsx
+++ b/frontend/src/theme.jsx
@@ -48,6 +48,7 @@ const theme = createTheme(adaptV4Theme({
     textFieldStyle: {
       backgroundColor: "#212121",
       borderRadius: 5,
+	  height: 40, 
     },
     innerTextfieldStyle: {
 	  height: 40,
diff --git a/frontend/src/views/404.jsx b/frontend/src/views/404.jsx
new file mode 100644
index 00000000..0a08f081
--- /dev/null
+++ b/frontend/src/views/404.jsx
@@ -0,0 +1,138 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Button, Typography } from '@mui/material';
+import theme from "../theme.jsx";
+
+const NotFound = () => {
+    const navigate = useNavigate();
+
+    const buttonStyle = {
+        borderRadius: 25,
+        height: 50,
+        fontSize: 18,
+        width: "100%",
+        marginBottom: "10px",
+    };
+
+    const primaryButtonStyle = {
+        ...buttonStyle,
+        background: "linear-gradient(89.83deg, #FF8444 0.13%, #F2643B 99.84%)",
+        color: "white",
+        '&:hover': {
+            background: "linear-gradient(89.83deg, #FF8444 0.13%, #F2643B 99.84%)",
+            opacity: 0.9,
+        }
+    };
+
+    const secondaryButtonStyle = {
+        ...buttonStyle,
+        background: "#383B40",
+        border: "1px solid #494949",
+        color: "white",
+        '&:hover': {
+            background: "#434649",
+        }
+    };
+
+    return (
+        <div style={{paddingTop: 100, }} className="min-h-screen bg-[#1A1A1A] flex items-center justify-center">
+            <div
+                style={{
+                    width: "100%",
+                    maxWidth: "532px",
+                    background: "#212121",
+                    borderRadius: "8px",
+                    padding: "40px",
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "center",
+                    textAlign: "center",
+                    justifySelf: "center",
+                }}
+            >
+                <img
+                    src="/images/logos/orange_logo.svg"
+                    alt="Shuffle Logo"
+                    style={{
+                        height: 44,
+                        width: 44,
+                        marginBottom: 10,
+                    }}
+                />
+
+                <Typography
+                    variant="h1"
+                    style={{
+                        fontSize: "72px",
+                        fontWeight: 900,
+                        background: "linear-gradient(89.83deg, #FF8444 0.13%, #F2643B 99.84%)",
+                        WebkitBackgroundClip: "text",
+                        WebkitTextFillColor: "transparent",
+                        marginBottom: "10px",
+                        textAlign: "center",
+                    }}
+                >
+                    404
+                </Typography>
+
+                <Typography
+                    variant="h4"
+                    style={{
+                        color: "white",
+                        marginBottom: "8px",
+                        fontWeight: 600,
+                        textAlign: "center",
+                    }}
+                >
+                    Page Not Found
+                </Typography>
+
+                <Typography
+                    variant="body1"
+                    style={{
+                        color: "#9E9E9E",
+                        marginBottom: "32px",
+                        fontSize: "16px",
+                        textAlign: "center",
+                        maxWidth: "400px",
+                    }}
+                >
+                    Our code doggo couldn't find the page you were looking for.
+                </Typography>
+
+                <iframe
+                    src="https://giphy.com/embed/FY8c5SKwiNf1EtZKGs"
+                    width="125"
+                    height="165"
+                    frameBorder="0"
+                    className="giphy-embed"
+                    allowFullScreen
+                    style={{ 
+						marginBottom: 32,
+						borderRadius: theme.palette.borderRadius,
+					}}
+                />
+
+                <div style={{ width: "100%", maxWidth: "400px" }}>
+                    <Button
+                        variant="contained"
+                        onClick={() => navigate('/docs')}
+                        sx={primaryButtonStyle}
+                    >
+                        Documentation
+                    </Button>
+
+                    <Button
+                        variant="contained"
+                        onClick={() => navigate('/')}
+                        sx={secondaryButtonStyle}
+                    >
+                        Return Home
+                    </Button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default NotFound;
diff --git a/frontend/src/views/AngularWorkflow.jsx b/frontend/src/views/AngularWorkflow.jsx
index a439ff08..3bfece7c 100755
--- a/frontend/src/views/AngularWorkflow.jsx
+++ b/frontend/src/views/AngularWorkflow.jsx
@@ -422,7 +422,7 @@ const AngularWorkflow = (defaultprops) => {
   const [subworkflow, setSubworkflow] = React.useState({});
   const [subworkflowStartnode, setSubworkflowStartnode] = React.useState("");
   const [leftViewOpen, setLeftViewOpen] = React.useState(isMobile ? false : true);
-  const [leftBarSize, setLeftBarSize] = React.useState(isMobile ? 0 : 265)
+  const [leftBarSize, setLeftBarSize] = React.useState(isMobile ? 0 : 255)
   const [creatorProfile, setCreatorProfile] = React.useState({});
   const [usecases, setUsecases] = React.useState([]);
   const [files, setFiles] = React.useState({
@@ -9029,7 +9029,7 @@ const releaseToConnectLabel = "Release to Connect"
       });
   };
 
-  const parsedHeight = isMobile ? bodyHeight - appBarSize * 4 :  bodyHeight - 65; 
+  const parsedHeight = isMobile ? bodyHeight - appBarSize * 4 :  bodyHeight - 57 
   const appViewStyle = {
     marginLeft: 5,
     marginRight: 5,
@@ -9351,8 +9351,8 @@ const releaseToConnectLabel = "Release to Connect"
     }
 
     const tabStyle = {
-      maxWidth: isMobile ? leftBarSize : leftBarSize / 3,
-      minWidth: isMobile ? leftBarSize : leftBarSize / 3,
+      maxWidth: isMobile ? leftBarSize : leftBarSize / 2,
+      minWidth: isMobile ? leftBarSize : leftBarSize / 2,
       flex: 1,
       textTransform: "none",
     };
@@ -9383,6 +9383,7 @@ const releaseToConnectLabel = "Release to Connect"
           style={{}}
         >
           <Tab
+			value={0}
             label={
               <Grid container direction="row" alignItems="center">
                 <Grid item>
@@ -9393,7 +9394,9 @@ const releaseToConnectLabel = "Release to Connect"
             }
             style={tabStyle}
           />
+		  {/*
           <Tab
+			value={1}
             label={
               <Grid container direction="row" alignItems="center">
                 <Grid item>
@@ -9410,13 +9413,15 @@ const releaseToConnectLabel = "Release to Connect"
 			  padding: 0, 
 			}}
           />
+		  */}
           <Tab
+			value={2}
             label={
               <Grid container direction="row" alignItems="center">
                 <Grid item>
                   <FavoriteBorderIcon style={iconStyle} />
                 </Grid>
-                {isMobile ? null : <Grid item>Vars</Grid>}
+                {isMobile ? null : <Grid item>Variables</Grid>}
               </Grid>
             }
             style={tabStyle}
@@ -9610,14 +9615,12 @@ const releaseToConnectLabel = "Release to Connect"
 				return true
 			})
 
-			console.log("NEWENV: ", environments, newenv)
 			if (newenv !== undefined && newenv !== null) {
 				newAppData.environment = newenv.Name
 			} else {
 				newAppData.environment = ""
 			}
 		}
-	    console.log("NEW DATA: ", newAppData)
 
         // Can all the data be in here? hmm
         const nodeToBeAdded = {
@@ -9773,8 +9776,8 @@ const releaseToConnectLabel = "Release to Connect"
   const barHeight = bodyHeight - appBarSize - 50;
   const appScrollStyle = {
     overflow: "scroll",
-    maxHeight: isMobile ? bodyHeight - appBarSize * 4 : barHeight,
-    minHeight: isMobile ? bodyHeight - appBarSize * 4 : barHeight,
+    maxHeight: isMobile ? bodyHeight - appBarSize * 4 : barHeight-300,
+    minHeight: isMobile ? bodyHeight - appBarSize * 4 : barHeight-300,
     marginTop: 1,
     overflowY: "auto",
     overflowX: "hidden",
@@ -9783,6 +9786,7 @@ const releaseToConnectLabel = "Release to Connect"
   const handleAppDrag = (e, app) => {
     const cycontainer = cy.container()
 
+
 	// Handling drag of public apps
 	if (app.objectID !== undefined && app.objectID !== null && app.objectID.length > 0) {
 		// FIXME: This is still buggy for now. Not allowed
@@ -9805,21 +9809,15 @@ const releaseToConnectLabel = "Release to Connect"
 		return
 	}
 
-    //console.log("e: ", e)
-    //console.log("Offset: ", cycontainer)
-
     // HTML -> Canvas overlap check
     if (e.pageX > cycontainer.offsetLeft && e.pageX < cycontainer.offsetLeft + cycontainer.offsetWidth && e.pageY > cycontainer.offsetTop && e.pageY < cycontainer.offsetTop + cycontainer.offsetHeight) {
       if (newNodeId.length > 0) {
         var currentnode = cy.getElementById(newNodeId);
-        if (
-          currentnode === undefined ||
-          currentnode === null ||
-          currentnode.length === 0
-        ) {
+        if (currentnode === undefined || currentnode === null || currentnode.length === 0) {
           return
         }
 
+
         currentnode[0].renderedPosition("x", e.pageX - cycontainer.offsetLeft)
         currentnode[0].renderedPosition("y", e.pageY - cycontainer.offsetTop)
       } else {
@@ -9990,8 +9988,9 @@ const releaseToConnectLabel = "Release to Connect"
         cy.add(nodeToBeAdded);
         return;
       }
-    }
-  };
+    } else {
+	}
+  }
 
   const AppView = (props) => {
     const { allApps, prioritizedApps, filteredApps, extraApps } = props;
@@ -10076,7 +10075,6 @@ const releaseToConnectLabel = "Release to Connect"
 			
       const newAppStyle = JSON.parse(JSON.stringify(paperAppStyle))
       const pixelSize = !hover ? "2px" : "4px";
-      //newAppStyle.borderLeft = app.is_valid && app.actions !== null && app.actions !== undefined && app.actions.length > 0 && !(app.activated && app.generated)
       newAppStyle.borderLeft = app.is_valid && app.actions !== null && app.actions !== undefined && app.actions.length > 0
         ? `${pixelSize} solid ${green}`
         : `${pixelSize} solid ${yellow}`;
@@ -10097,11 +10095,12 @@ const releaseToConnectLabel = "Release to Connect"
 		  newAppStyle.maxWidth = newAppStyle.width 
 
 		  // Transparent background on paper
-		  newAppStyle.backgroundColor = "transparent"
 		  newAppStyle.border = hover ? "1px solid " + theme?.palette.main : "1px solid transparent"
 
 		  // If action is set, look for the icon of it with the normal setup
 	  }
+		
+	  newAppStyle.backgroundColor = theme.palette.backgroundColor
 
       return (
         <Draggable
@@ -10112,8 +10111,8 @@ const releaseToConnectLabel = "Release to Connect"
             handleDragStop(e, app)
           }}
           key={app.id}
+		  dragging={false}
         >
-		  <Tooltip title={(actionString?.replaceAll("_", " "))} placement="top" disabled={small !== true}>
           <Paper
             square
             style={newAppStyle}
@@ -10220,11 +10219,12 @@ const releaseToConnectLabel = "Release to Connect"
               }
             }}
           >
+		    <Tooltip title={(actionString?.replaceAll("_", " "))} placement="top" disabled={small !== true}>
             <Grid
               container
               style={{ display: "flex", margin: 5, flex: "10" }}
             >
-              <Grid item>
+              <Grid item style={{}}>
                 <img
 		  		  id={`image_${props?.index}`}
                   src={image}
@@ -10252,13 +10252,13 @@ const releaseToConnectLabel = "Release to Connect"
                 />
               </Grid>
               {isMobile || small === true ? null :
-                <Grid
+                <Grid item
                   style={{
                     display: "flex",
                     flexDirection: "column",
                     marginLeft: "20px",
-                    minWidth: 185,
-                    maxWidth: 185,
+                    minWidth: 150,
+                    maxWidth: 150,
                     overflow: "hidden",
                     maxHeight: 77,
                   }}
@@ -10270,7 +10270,7 @@ const releaseToConnectLabel = "Release to Connect"
                       style={{ 
 						  marginBottom: 0, 
 						  marginLeft: 5, 
-						  marginTop: newAppname.length > 20 ? -1 : 12, 
+						  marginTop: newAppname.length > 17 ? -3 : 8, 
 					  }}
                     >
                       {newAppname}
@@ -10279,8 +10279,8 @@ const releaseToConnectLabel = "Release to Connect"
                 </Grid>
               }
             </Grid>
+		  	</Tooltip> 
           </Paper>
-		  </Tooltip> 
         </Draggable>
       );
     };
@@ -10591,7 +10591,7 @@ const releaseToConnectLabel = "Release to Connect"
             }}
             fullWidth
             color="primary"
-            placeholder={"Search apps"}
+            placeholder={"Search apps, triggers..."} 
             id="appsearch"
             onKeyPress={(event) => {
               if (event.key === "Enter") {
@@ -10608,7 +10608,7 @@ const releaseToConnectLabel = "Release to Connect"
             }}
           />
 
-		  {shuffleToolsApp !== undefined && shuffleToolsApp !== null ?
+		  {shuffleToolsApp !== undefined && shuffleToolsApp !== null && document?.getElementById("appsearch")?.value?.length === 0 ?
 			  <div style={{marginBottom: 25, }}>
 				<Typography variant="body1" color="textSecondary" style={{marginTop: 20, marginLeft: 5, }}>
 					Popular Actions
@@ -10638,23 +10638,29 @@ const releaseToConnectLabel = "Release to Connect"
 			  </div>
 		  : null}
 
-		  <div style={{marginBottom: 25, }}>
-			<Typography variant="body1" color="textSecondary" style={{marginTop: 20, marginLeft: 5, }}>
-				Triggers
-			</Typography> 
-			<div style={{
-				display: "flex", 
-			}}>
-				{triggers.map((trigger, index) => {
-					return(
-						<span>
-							<ParsedAppPaper small={true} action={"trigger"} app={JSON.parse(JSON.stringify(trigger))} />
-							{index !== triggers.length - 1 ? <div style={{marginLeft: 5, }}/> : null}
-						</span>
-					)
-				})}
-			</div>
-		  </div>
+		  {document?.getElementById("appsearch")?.value?.length === 0 ?
+			  <div style={{marginBottom: 25, }}>
+				<Typography variant="body1" color="textSecondary" style={{marginTop: 20, marginLeft: 5, }}>
+					Triggers
+				</Typography> 
+				<div style={{
+					display: "flex", 
+				}}>
+					{triggers.map((trigger, index) => {
+						if (trigger.trigger_type === "PIPELINE") {  
+							return null
+						}
+
+
+						return(
+							<div style={{marginLeft: index !== 0 ? 5 : 0, }}>
+								<ParsedAppPaper small={true} action={trigger.name} app={JSON.parse(JSON.stringify(trigger))} />
+							</div>
+						)
+					})}
+				</div>
+			  </div>
+		  : null}
 
 		  <Typography variant="body1" color="textSecondary" style={{marginTop: 20, marginLeft: 5, }}>
 			Your Apps
@@ -10678,6 +10684,11 @@ const releaseToConnectLabel = "Release to Connect"
 					return null
 				}
 
+				if (app.trigger_type !== undefined && app.trigger_type !== null && app.trigger_type.length > 0) { 
+					app.is_valid = true
+					app.actions = [{"name": "empty"}]
+				}
+
 				viewedApps.push(app.id)
 
                 var extraMessage = ""
@@ -13556,6 +13567,14 @@ const releaseToConnectLabel = "Release to Connect"
                       color: "white",
                     },
                   }}
+				  sx={{
+				    '& .MuiOutlinedInput-root': {
+				      height: 40, // Adjust the input height
+				    },
+				    '& .MuiAutocomplete-input': {
+				      padding: '8px', // Adjust the text padding
+				    },
+				  }}
                   getOptionSelected={(option, value) => option.id === value.id}
                   getOptionLabel={(option) => {
                     if (
@@ -13642,10 +13661,7 @@ const releaseToConnectLabel = "Release to Connect"
                   renderInput={(params) => {
                     return (
                       <TextField
-                        style={{
-                          backgroundColor: theme.palette.inputColor,
-                          borderRadius: theme.palette?.borderRadius,
-                        }}
+						style={theme.palette.textFieldStyle}
                         {...params}
                         label="Find your workflow"
                         variant="outlined"
@@ -13684,6 +13700,14 @@ const releaseToConnectLabel = "Release to Connect"
                         color: "white",
                       },
                     }}
+					  sx={{
+						'& .MuiOutlinedInput-root': {
+						  height: 40, // Adjust the input height
+						},
+						'& .MuiAutocomplete-input': {
+						  padding: '8px', // Adjust the text padding
+						},
+					  }}
                     getOptionSelected={(option, value) => option.id === value.id}
                     getOptionLabel={(option) => {
                       if (option === undefined || option === null || option.label === undefined || option.label === null) {
@@ -13748,10 +13772,7 @@ const releaseToConnectLabel = "Release to Connect"
                     renderInput={(params) => {
                       return (
                         <TextField
-                          style={{
-                            backgroundColor: theme.palette.inputColor,
-                            borderRadius: theme.palette?.borderRadius,
-                          }}
+						  style={theme.palette.textFieldStyle}
                           {...params}
                           label="Select a start-node (optional)"
                           variant="outlined"
@@ -13773,10 +13794,7 @@ const releaseToConnectLabel = "Release to Connect"
                 </div>
               </div>
               <TextField
-                style={{
-                  backgroundColor: theme.palette.inputColor,
-                  borderRadius: theme.palette?.borderRadius,
-                }}
+                style={theme.palette.textFieldStyle}
                 InputProps={{
                   style: {
                   },
@@ -14486,13 +14504,9 @@ const releaseToConnectLabel = "Release to Connect"
           />
           <div>Name</div>
           <TextField
-            style={{
-              backgroundColor: theme.palette.inputColor,
-              borderRadius: theme.palette?.borderRadius,
-            }}
+			style={theme.palette.textFieldStyle}
             InputProps={{
-              style: {
-              },
+			  style: theme.palette.innerTextfieldStyle,
             }}
             fullWidth
             color="primary"
@@ -14512,6 +14526,14 @@ const releaseToConnectLabel = "Release to Connect"
                     color: "white",
                   },
                 }}
+				sx={{
+					'& .MuiOutlinedInput-root': {
+					  height: 40, // Adjust the input height
+					},
+					'& .MuiAutocomplete-input': {
+					  padding: '8px', // Adjust the text padding
+					},
+				  }}
                 filterOptions={(options, { inputValue }) => {
                   const lowercaseValue = inputValue.toLowerCase()
                   options = options.filter(x => x.name.replaceAll("_", " ").toLowerCase().includes(lowercaseValue) || x.description.toLowerCase().includes(lowercaseValue))
@@ -14605,12 +14627,12 @@ const releaseToConnectLabel = "Release to Connect"
                 renderInput={(params) => {
                   return (
                     <TextField
+            		  InputProps={{
+					    style: theme.palette.innerTextfieldStyle,
+            		  }}
                       color="primary"
                       variant="body1"
-                      style={{
-                        backgroundColor: theme.palette.inputColor,
-                        borderRadius: theme.palette?.borderRadius,
-                      }}
+					  style={theme.palette.textFieldStyle}
                       {...params}
                       label="Find Associated App (optional)"
                       variant="outlined"
@@ -15367,6 +15389,14 @@ const releaseToConnectLabel = "Release to Connect"
               	        color: "white",
               	      },
               	    }}
+					sx={{
+					  '& .MuiOutlinedInput-root': {
+						height: 40, // Adjust the input height
+					  },
+					  '& .MuiAutocomplete-input': {
+						padding: '8px', // Adjust the text padding
+					  },
+					}}
               	    getOptionSelected={(option, value) => option.id === value.id}
               	    getOptionLabel={(option) => {
               	      if (option === undefined || option === null || option.name === undefined || option.name === null) {
@@ -16882,6 +16912,7 @@ const releaseToConnectLabel = "Release to Connect"
   		</Typography>
   		<Typography
   			variant="body2"
+			color="textSecondary"
   		>
   			{workflow.errors.slice(0,3).map((error) => {
 				// Loop through each word, and if it matches "Action <name> " then replace it with a link to the action
@@ -17174,7 +17205,7 @@ const releaseToConnectLabel = "Release to Connect"
     }
 
     const buttonHeights = 45 
-    const boxSize = buttonHeights+5
+    const boxSize = buttonHeights
     const executionButton = executionRunning ? (
       <Tooltip color="primary" title="Stop execution" placement="top">
         <span>
@@ -17224,8 +17255,32 @@ const releaseToConnectLabel = "Release to Connect"
             flexDirection: isMobile ? "column" : "row",
           }}
         >
-			<ButtonGroup>
+			<ButtonGroup
+				style={{
+					borderTop: "1px solid rgba(74, 74, 74, 1)",
+					borderBottom: "1px solid rgba(74, 74, 74, 1)",
+					height: buttonHeights, 
+				}}
+			>
 			{executionButton}
+			<Tooltip
+				color="secondary"
+				title={`Show previous runs (${workflowExecutions.length}) (Ctrl + ')`}
+				placement="top-start"
+			  >
+				  <Button
+					disabled={workflow.public}
+					color="secondary"
+					variant={executionModalOpen ? "contained" : "text"}
+					style={{ width: 55, }}
+					onClick={() => {
+					  setExecutionModalOpen(true);
+					  getWorkflowExecution(props.match.params.key, "");
+					}}
+				  >
+					<DirectionsRunIcon />
+				  </Button>
+			  </Tooltip>
             <Tooltip
               color="primary"
               title="An argument to be used for execution. This is a variable available to every node in your workflow."
@@ -17235,8 +17290,15 @@ const releaseToConnectLabel = "Release to Connect"
                 id="execution_argument_input_field"
                 style={{
 					...theme.palette.textFieldStyle,
-					width: 200, 
-					marginLeft: 0, 
+					height: buttonHeights+2,
+				}}
+				InputProps={{
+					style: {
+						...theme.palette.innerTextfieldStyle,
+						height: buttonHeights+2,
+						marginTop: -1,
+						border: "none", 
+					}
 				}}
                 disabled={workflow.public}
                 color="secondary"
@@ -17246,12 +17308,8 @@ const releaseToConnectLabel = "Release to Connect"
                 onBlur={(e) => {
                   setExecutionText(e.target.value);
                 }}
+
 			    // Start adornment
-			  	inputProps={{
-					style: {
-						height: 18,
-					},
-				}}
               />
             </Tooltip>
 			</ButtonGroup>
@@ -17455,28 +17513,7 @@ const releaseToConnectLabel = "Release to Connect"
                 <EditIcon />
               </Button>
             </span>
-          </Tooltip>
-
-		  <Tooltip
-            color="secondary"
-            title={`Show executions (${workflowExecutions.length}) (Ctrl + ')`}
-            placement="top-start"
-          >
-            <span>
-              <Button
-                disabled={workflow.public}
-                color="secondary"
-			  	variant={executionModalOpen ? "contained" : "text"}
-                style={{ width: 65, height: buttonHeights, }}
-                onClick={() => {
-                  setExecutionModalOpen(true);
-                  getWorkflowExecution(props.match.params.key, "");
-                }}
-              >
-                <DirectionsRunIcon />
-              </Button>
-            </span>
-          </Tooltip>
+          </Tooltip> 
 
           <Tooltip
             color="secondary"
@@ -17995,7 +18032,8 @@ const releaseToConnectLabel = "Release to Connect"
     color: "white",
     marginBottom: 10,
     padding: 5,
-    backgroundColor: theme.palette.surfaceColor,
+    backgroundColor: theme.palette.backgroundColor,
+	borderRadius: theme.palette.borderRadius,
     cursor: "pointer",
     display: "flex",
     minHeight: 45,
@@ -18915,7 +18953,7 @@ const releaseToConnectLabel = "Release to Connect"
 							</Tooltip>
 						: null}
 
-                          <Tooltip title={"Inspect execution"} placement="top">
+                          <Tooltip title={"Inspect this run"} placement="top">
                             {lastExecution === data.execution_id ? (
                               <KeyboardArrowRightIcon
                                 style={{
@@ -18949,6 +18987,9 @@ const releaseToConnectLabel = "Release to Connect"
 						variant="outlined"
 						style={{
 							marginTop: 20,
+							textTransform: "none",
+							border: `1px solid ${green}`,
+							color: green,
 						}}
 						onClick={() => {
 							executeWorkflow(executionText, workflow.start, lastSaved);
diff --git a/frontend/src/views/Workflows2.jsx b/frontend/src/views/Workflows2.jsx
index b0dded3c..45866f9d 100644
--- a/frontend/src/views/Workflows2.jsx
+++ b/frontend/src/views/Workflows2.jsx
@@ -4037,7 +4037,7 @@ const Workflows2 = (props) => {
                             >
                                 <Tab label="Organization Workflows" style={{ textTransform: 'none', marginRight: 20 }} />
                                 <Tab label="My Workflows" style={{ textTransform: 'none', marginRight: 20 }} />
-                                <Tab label="Discover Workflow" style={{ textTransform: 'none' }} />
+                                <Tab label="Discover Workflows" style={{ textTransform: 'none' }} />
                             </Tabs>
                         </div>
 
@@ -4763,4 +4763,4 @@ const Workflows2 = (props) => {
 
 
 
-export default Workflows2;
\ No newline at end of file
+export default Workflows2;