Code review

Author: arthurxavierx

bower.json

@@ -30,7 +30,7 @@
     "purescript-profunctor-lenses": ">=4.0.0 <7.0.0",
     "purescript-random": "^4.0.0",
     "purescript-react-basic": "^13.0.0",
-    "purescript-react-basic-emotion": "^4.0.0",
+    "purescript-react-basic-emotion": "^4.2.1",
     "purescript-react-basic-hooks": "^4.1.1",
     "purescript-react-dnd-basic": "^6.1.4",
     "purescript-record": ">= 1.0.0 < 3.0.0",

src/Lumi/Components2/Text.purs

@@ -77,8 +77,8 @@ text =
     defaultTextStyle :: LumiTheme -> Maybe TextType -> Style
     defaultTextStyle theme ty =
       S.css
-        { fontSize: maybe S.inherit (px <<< textFontSize theme <<< textTheme) ty
-        , lineHeight: maybe S.inherit (px <<< textLineHeight theme <<< textTheme) ty
+        { fontSize: maybe S.inherit (S.px <<< textFontSize theme <<< textTheme) ty
+        , lineHeight: maybe S.inherit (S.px <<< textLineHeight theme <<< textTheme) ty
         , whiteSpace: S.str "pre-wrap"
         , margin: S.str "0"
         , padding: S.str "0"
@@ -261,10 +261,7 @@ textStyle :: (forall a. TextMap a -> a) -> StyleModifier
 textStyle selector =
   S.style \theme -> 
     S.css
-      { fontSize: px $ textFontSize theme selector
-      , lineHeight: px $ textLineHeight theme selector
-      , marginBottom: px $ textMargin theme selector
+      { fontSize: S.px $ textFontSize theme selector
+      , lineHeight: S.px $ textLineHeight theme selector
+      , marginBottom: S.px $ textMargin theme selector
       }
-
-px :: Int -> StyleProperty
-px i = S.str $ show i <> "px"

src/Lumi/Styles/Responsive.purs

@@ -2,7 +2,7 @@ module Lumi.Styles.Responsive where
 
 import Prelude
 
-import Lumi.Styles (Style, StyleModifier, css, nested, style)
+import Lumi.Styles (Style, StyleModifier, css, nested, style, toCSS)
 
 -- | Create a style modifier that, only in a desktop-sized screen, applies the
 -- | styles accumulated in the modifier passed in as argument.
@@ -14,7 +14,7 @@ onDesktop :: StyleModifier -> StyleModifier
 onDesktop m =
   style \theme ->
     desktopQuery
-      $ (m identity { className: "", css: mempty }).css
+      $ toCSS m
       $ theme
 
 -- | Guard a style so that it's only applied in a desktop resolution.