Segmented and initial letter

components/src/Yoga/CompileEditor/Component.purs

@@ -28,8 +28,8 @@ import Yoga.Block.Container.Style (colour)
 import Yoga.Compiler.Types (Compiler)
 import Yoga.Editor (getValue, mkEditor, setValue)
 
-type Props
-  = { initialCode ∷ String, height ∷ String, language ∷ String }
+type Props =
+  { initialCode ∷ String, height ∷ String, language ∷ String }
 
 mkCompileEditor ∷ ∀ r. { | Compiler r } -> Effect (ReactComponent Props)
 mkCompileEditor { compileAndRun } = do
@@ -47,26 +47,19 @@ mkCompileEditor { compileAndRun } = do
     compileResult /\ modifyCompileResult <- useState Nothing
     let
       showEditor = updateActiveIndex 0
-
       showResult = updateActiveIndex 1
-
       reset = resetCompileResult *> showEditor
-
       run = compile *> showResult
-
       resetCompileResult = do
         setCompileResult Nothing
         for_ maybeEditor (setValue initialCode)
-
       compileResultToString ∷ Maybe (Either Error (Either CompileResult RunResult)) -> String
       compileResultToString = case _ of
         Nothing -> ""
         Just (Right (Left cr)) -> cr.result <#> _.message # intercalate "/n"
         Just (Right (Right r)) -> r.stdout
         Just (Left e) -> message e
-
       setCompileResult = modifyCompileResult <<< const
-
       compile = do
         for_ maybeEditor \ed -> do
           setCompileResult Nothing
@@ -74,66 +67,57 @@ mkCompileEditor { compileAndRun } = do
           launchAff_ do
             res <- try $ compileAndRun { code }
             setCompileResult (Just res) # liftEffect
-
       tabs ∷ JSX
       tabs =
         Block.segmented
           </> { activeIndex
             , updateActiveIndex
             , buttonContents:
-                twoOrMore
-                  { id: "editor", value: "Editor" }
-                  { id: "Result", value: "Result" }
-                  []
+              twoOrMore
+                { id: "editor", value: "Editor" }
+                { id: "Result", value: "Result" }
+                []
             }
-
       editorView ∷ JSX
       editorView = editor </> { onLoad, height, language }
-
       buttons ∷ Array JSX -> JSX
       buttons = Y.el Block.cluster { justify: "flex-end", space: "var(--s-1)" }
-
       button =
         Y.el motionButton
           <<< M.motion
               { transition: M.transition $ { duration: 0.2 }
               }
-
       resetButton ∷ JSX
       resetButton =
         button
           { buttonType: BT.Generic, onClick: handler_ reset }
           [ R.text "Reset" ]
-
       runButton ∷ JSX
       runButton =
         button
           { buttonType: BT.Primary, onClick: handler_ run }
           [ R.text "Run" ]
-
       buttonControls ∷ Array JSX -> JSX
       buttonControls = Y.el motionBox $ M.motion { layout: M.layout true } {}
-
       tabContainer ∷ Array JSX -> JSX
       tabContainer children =
         Y.styled R.div'
           { className: "tabby"
           , css:
-              E.css
-                { background: E.str colour.backgroundLayer4
-                , borderTop: E.str $ "1px solid " <> colour.interfaceBackgroundHighlight
-                , borderRadius: E.str "14px 14px 0 0"
-                , paddingLeft: E.var "--s-1"
-                , paddingRight: E.var "--s-1"
-                , paddingTop: E.str "0"
-                , paddingBottom: E.str "0"
-                , marginBottom: E.str "0"
-                , zIndex: E.str "0"
-                }
+            E.css
+              { background: E.str colour.backgroundLayer3
+              , borderTop: E.str $ "1px solid " <> colour.interfaceBackgroundHighlight
+              , borderRadius: E.str "14px 14px 0 0"
+              , paddingLeft: E.var "--s-1"
+              , paddingRight: E.var "--s-1"
+              , paddingTop: E.str "0"
+              , paddingBottom: E.str "0"
+              , marginBottom: E.str "0"
+              , zIndex: E.str "0"
+              }
           }
           [ Y.el Block.centre { andText: true } children
           ]
-
       terminal ∷ Array JSX -> JSX
       terminal =
         Y.el motionBox1
@@ -141,30 +125,26 @@ mkCompileEditor { compileAndRun } = do
               { layout: M.layout true
               }
               { css:
-                  E.css
-                    { background: E.str "rgb(42,42,59)"
-                    , boxSizing: E.str "content-box"
-                    , margin: E.str "0"
-                    , minHeight: E.str "8em"
-                    , padding: E.str "0"
-                    , display: E.str "flex"
-                    }
+                E.css
+                  { background: E.str "rgb(42,42,59)"
+                  , boxSizing: E.str "content-box"
+                  , margin: E.str "0"
+                  , minHeight: E.str "8em"
+                  , padding: E.str "0"
+                  , display: E.str "flex"
+                  }
               }
-
       container =
         Y.el motionBox1
           $ M.motion { layout: M.layout true }
               { css:
-                  E.css
-                    { background: E.str colour.backgroundLayer4
-                    , borderBottom: E.str $ "1px solid " <> colour.interfaceBackgroundShadow
-                    , borderRadius: E.str "0 0 14px 14px"
-                    , paddingLeft: E.str "0"
-                    , paddingRight: E.str "0"
-                    , paddingTop: E.str "0"
-                    , paddingBottom: E.var "--s-1"
-                    , zIndex: E.str "0"
-                    }
+                E.css
+                  { background: E.str colour.backgroundLayer3
+                  , borderBottom: E.str $ "1px solid " <> colour.interfaceBackgroundShadow
+                  , borderRadius: E.str "0 0 14px 14px"
+                  , padding: E.str "0"
+                  , zIndex: E.str "0"
+                  }
               }
     pure
       $ Y.el Block.stack { space: E.str "0" }