stylize output box options (#336)

Author: forrestbao

ui/src/components/nodes/Code.tsx

@@ -72,7 +72,15 @@ function Timer({ lastExecutedAt }) {
     }, 1000);
     return () => clearInterval(interval);
   }, [counter]);
-  return <Box>Last executed: {timeDifference(new Date(), lastExecutedAt)}</Box>;
+  return (
+    <Box
+      sx={{
+        padding: "5px",
+      }}
+    >
+      Last run: {timeDifference(new Date(), lastExecutedAt)}
+    </Box>
+  );
 }
 
 export const ResultBlock = memo<any>(function ResultBlock({ id, layout }) {
@@ -173,14 +181,17 @@ export const ResultBlock = memo<any>(function ResultBlock({ id, layout }) {
                       borderImage: "initial",
                       borderTopLeftRadius: "20px",
                       borderTopRightRadius: "20px",
+                      // FIXME: Why not a complete oval?
+                      // borderBottomLeftRadius: "20px",
+                      // borderBottomRightRadius: "20px",
                       display: "flex",
                       fontSize: "0.8em",
                     }}
                   >
                     <CheckCircleIcon
                       style={{ marginTop: "5px" }}
                       fontSize="inherit"
-                    />
+                    />{" "}
                     <Timer lastExecutedAt={lastExecutedAt} />
                   </Box>
                 </Box>
@@ -205,51 +216,55 @@ export const ResultBlock = memo<any>(function ResultBlock({ id, layout }) {
           {(stdout || (result?.text && result?.count > 0) || error) &&
             showMenu && (
               <ButtonGroup
-                sx={[
-                  {
-                    fontSize: "0.8em",
-                    paddingTop: "3px",
-                    paddingBottom: "2px",
-                    lineHeight: "10px",
-                    zIndex: 201,
-                    position: "absolute",
-                    top: "-64.5px",
-                    right: "15px",
-                    "& .MuiButton-root": {
-                      fontSize: ".9em",
-                      paddingTop: 0,
-                      paddingBottom: 0,
-                    },
-                  },
-                ]}
-                variant="outlined"
+                sx={{
+                  // border: '1px solid #757ce8',
+                  fontSize: "0.8em",
+                  backgroundColor: "white",
+                  zIndex: 201,
+                  position: "absolute",
+                  top: "10px",
+                  right: "25px",
+                  // "& .MuiButton-root": {
+                  //   fontSize: ".9em",
+                  //   paddingTop: 0,
+                  //   paddingBottom: 0,
+                  // },
+                }}
+                variant="contained"
+                size="small"
                 aria-label="outlined primary button group"
-                orientation="vertical"
+                // orientation="vertical"
               >
+                <Box
+                  sx={{
+                    color: "primary.main",
+                    fontWeight: "bold",
+                    display: "flex",
+                    padding: "5px 5px",
+                    alignItems: "center",
+                    justifyContent: "center",
+                  }}
+                >
+                  Output options:
+                </Box>
                 <Button
                   onClick={() => {
                     setResultScroll(!resultScroll);
                   }}
-                  variant="text"
-                  size="small"
                 >
                   {resultScroll ? "Unfocus" : "Focus"}
                 </Button>
                 <Button
                   onClick={() => {
                     setShowOutput(!showOutput);
                   }}
-                  variant="text"
-                  size="small"
                 >
                   Hide
                 </Button>
                 <Button
                   onClick={() => {
                     clearResults(id);
                   }}
-                  variant="text"
-                  size="small"
                 >
                   Clear
                 </Button>
@@ -292,10 +307,10 @@ export const ResultBlock = memo<any>(function ResultBlock({ id, layout }) {
       ) : (
         <Box
           sx={{
-            paddingBottom: "5px",
+            padding: "10px",
             display: "flex",
             justifyContent: "center",
-            alignItems: "center",
+            alignItems: "bottom",
           }}
         >
           <Box
@@ -306,23 +321,21 @@ export const ResultBlock = memo<any>(function ResultBlock({ id, layout }) {
               paddingTop: "2px",
             }}
           >
-            This output has been hidden.{" "}
+            Output hidden.{" "}
           </Box>
           <Button
             onClick={() => {
               setShowOutput(!showOutput);
             }}
             sx={{
               fontSize: "0.8em",
-              paddingTop: "3px",
-              paddingBottom: "2px",
-              lineHeight: "10px",
+              // lineHeight: "8px",
               zIndex: 201,
             }}
             size="small"
-            variant="text"
+            variant="contained"
           >
-            Show it
+            Reveal
           </Button>
         </Box>
       )}