Soothing Workflow Editor

Raise your hand if you are tired of staring at a grey dotted background all day while developing workflows? :raising_hand_man:t2:Oh, oh, me!

Who wants something a little easier on the eyes? I do!

Well, what about using Stylish, the extension for applying custom CSS to websites? I believe we can!!

With this little bit of CSS, we can transform Retool's editor into a beautiful experince :slight_smile: I present, the most relaxing workflow editor for everyone to enjoy.

/* Instructions: */
/* --------------------------------------------------------------------- *\
	Hiding the grid dots: comment GRID_COLOR, and use REMOVE_GRID
	Styling grid dots: comment REMOVE_GRID, and use GRID_COLOR
	Styling connectors: edit the "stroke" in EDGE_COLOR
\* --------------------------------------------------------------------- */

/* REMOVE_GRID */
.react-flow__background { display: none; }

/* GRID_COLOR */
/* .react-flow__background pattern { stroke: rgb(0, 0, 0) } */

/* EDGE_COLOR */
.react-flow__edge-path {
	stroke: skyblue !important;
    stroke-width: 1.5px !important;
  	stroke-linecap: round !important;
}

/* The light background is too much to stare at all day */
div[class^="_canvas"] {
    background-image: url('https://static.pexels.com/photos/414171/pexels-photo-414171.jpeg');
    background-size: 100%;
    background-repeat: no-repeat; 
	background-position: center center;
}

Stylish for Firefox - Stylus for Chrome

EDIT: Updated the Chrome Store link to Stylus instead of Stylish since they force you to make an account :roll_eyes:

9 Likes

I just noticed a fun side effect, it styles the mini view of workflows in calling blocks :joy:

9 Likes