Design update for editor page

frontend/pages/editor/[lang].js

@@ -12,7 +12,6 @@ import {
   Box,
   Button,
   Chip,
-  Divider,
   Stack,
   ToggleButton,
   ToggleButtonGroup,
@@ -416,18 +415,20 @@ const CodeRunner = (props) => {
       >
         <Stack
           direction="row"
-          alignItems="stretch"
+          alignItems="center"
+          justifyContent="space-between"
           sx={{
             boxShadow: `0 2px 4px rgb(0 0 0 / 10%)`,
             zIndex: (t) => t.zIndex.appBar,
+            height: "48px",
+            p: "0 24px",
           }}
         >
-          <Stack direction="row" sx={{ flexGrow: 1 }} alignItems="stretch">
+          <Stack direction="row" alignItems="center" gap={2}>
             <Button
               variant="contained"
-              sx={{ borderRadius: 0, minWidth: 0 }}
               disableElevation
-              size="small"
+              size="medium"
               color="primary"
               onClick={() => {
                 router.push("/");
@@ -435,10 +436,7 @@ const CodeRunner = (props) => {
             >
               <Home fontSize={"small"} />
             </Button>
-            <Typography
-              sx={{ fontSize: 14, px: 2, fontWeight: 600, alignSelf: "center" }}
-              textAlign="center"
-            >
+            <Typography sx={{ fontSize: 14, fontWeight: 600 }}>
               {config.name}
             </Typography>
             <Chip
@@ -447,23 +445,24 @@ const CodeRunner = (props) => {
               color={status != "idle" ? "info" : "default"}
               sx={{
                 fontSize: "0.7rem",
-                alignSelf: "center",
                 height: "16px",
               }}
               label={status}
             />
           </Stack>
+          <Stack direction="row" gap={1} alignItems="center">
             <LoadingButton
               onClick={handleLspClick}
-            size="small"
+              size="medium"
               variant="text"
               loading={isLspRequested}
               sx={{
-              borderRadius: 0,
                 visibility: config.lsp ? "visible" : "hidden",
                 mr: 1,
                 color: (t) =>
-                isLspStarted ? t.palette.success.main : t.palette.text.disabled,
+                  isLspStarted
+                    ? t.palette.success.main
+                    : t.palette.text.disabled,
               }}
               disableElevation
               endIcon={
@@ -485,59 +484,54 @@ const CodeRunner = (props) => {
               exclusive
               onChange={handleLayout}
               aria-label="split type"
-            sx={{ mr: 1 }}
             >
               <ToggleButton
                 value="vertical"
                 aria-label="vertical split"
-              sx={{ borderRadius: 0 }}
+                sx={{ border: "none" }}
               >
                 <VerticalSplit fontSize="small" />
               </ToggleButton>
               <ToggleButton
                 value="horizontal"
                 aria-label="horizontal split"
-              sx={{ borderRadius: 0 }}
+                sx={{ border: "none" }}
               >
                 <HorizontalSplit fontSize="small" />
               </ToggleButton>
             </ToggleButtonGroup>
 
+            {config.format && (
               <LoadingButton
                 onClick={sendFormat}
                 loading={isFormatting}
-            size="small"
+                size="medium"
                 color="primary"
                 variant="contained"
-            sx={{
-              borderRadius: 0,
-              visibility: config.format ? "visible" : "hidden",
-            }}
                 disableElevation
                 endIcon={<Format fontSize="small" />}
               >
                 <Typography sx={{ fontSize: 12 }}>Prettify</Typography>
               </LoadingButton>
-          <Divider orientation="vertical" />
+            )}
             <LoadingButton
               onClick={showValue}
               loading={isRunning}
-            size="small"
+              size="medium"
               color="success"
               variant="contained"
-            sx={{ borderRadius: 0 }}
               disableElevation
               endIcon={<PlayArrow fontSize="small" htmlColor="#fff" />}
             >
               <Typography sx={{ fontSize: 12, color: "#fff" }}>Run</Typography>
             </LoadingButton>
           </Stack>
+        </Stack>
         <Layouts splitType={splitType}>
           <Box className="panel editor">
             <MonacoEditor
               wrapperClassName={"rijuEditor"}
               onChange={handleChange}
-              // height="100vh"
               defaultLanguage="javascript"
               defaultValue="// some comment"
               options={{