@@ -8,6 +8,7 @@ import Data.Maybe (Maybe(..))
88import Data.Monoid (guard)
99import Data.Tuple.Nested ((/\))
1010import Data.TwoOrMore (twoOrMore)
11+import Debug.Trace (spy)
1112import Effect (Effect)
1213import Effect.Aff (Error, launchAff_, message, try)
1314import Effect.Class (liftEffect)
@@ -24,7 +25,7 @@ import Yoga ((</>))
2425import Yoga as Y
2526import Yoga.Block as Block
2627import Yoga.Block.Atom.Button.Types as BT
27−import Yoga.Block.Container.Style (colour)
28+import Yoga.Block.Container.Style (colour, getDarkOrLightMode)
2829import Yoga.Compiler.Types (Compiler)
2930import Yoga.Editor (getValue, mkEditor, setValue)
3031
@@ -39,7 +40,12 @@ mkCompileEditor { compileAndRun } = do
3940 motionButton <- M.custom Block.button
4041 reactComponent "CompileEditor" \{ initialCode, height, language } -> React.do
4142 activeIndex /\ updateActiveIndex <- React.useState' 0
42− maybeEditor /\ modifyEditor <- useState Nothing
43+ maybeEditor /\ modifyEditor <- React.useState Nothing
44+ themeMode /\ setThemeMode <- React.useState' Nothing
45+ React.useEffectAlways do
46+ mode <- getDarkOrLightMode
47+ unless (mode == themeMode) do setThemeMode (spy "mode" mode)
48+ mempty
4349 let
4450 onLoad e = do
4551 setValue initialCode e
@@ -56,7 +62,7 @@ mkCompileEditor { compileAndRun } = do
5662 compileResultToString ∷ Maybe (Either Error (Either CompileResult RunResult)) -> String
5763 compileResultToString = case _ of
5864 Nothing -> ""
59− Just (Right (Left cr)) -> cr.result <#> _.message # intercalate "/n"
65+ Just (Right (Left cr)) -> cr.result <#> _.message # intercalate "\n"
6066 Just (Right (Right r)) -> r.stdout
6167 Just (Left e) -> message e
6268 setCompileResult = modifyCompileResult <<< const
@@ -75,7 +81,7 @@ mkCompileEditor { compileAndRun } = do
7581 , buttonContents:
7682 twoOrMore
7783 { id: "editor", value: "Editor" }
78− { id: "Result", value: "Result" }
84+ { id: "result", value: "Result" }
7985 []
8086 }
8187 editorView ∷ JSX
@@ -126,10 +132,11 @@ mkCompileEditor { compileAndRun } = do
126132 }
127133 { css:
128134 E.css
129− { background: E.str "rgb(42,42,59)"
135+ { background: E.str colour.backgroundLayer2
130136 , boxSizing: E.str "content-box"
131137 , margin: E.str "0"
132138 , minHeight: E.str "8em"
139+ , height: E.str height
133140 , padding: E.str "0"
134141 , display: E.str "flex"
135142 }
@@ -155,9 +162,8 @@ mkCompileEditor { compileAndRun } = do
155162 [ if activeIndex == 0 then
156163 editorView
157164 else
158− Y.el M.div
159− { layout: M.layout true
160− , initial: M.initial $ css { width: "100%" }
165+ Y.el R.div'
166+ { style: css { width: "100%" }
161167 }
162168 [ R.text (compileResultToString compileResult) ]
163169 ]