From 7173a703eb79d72cf7889f5c700a56a4b74c6574 Mon Sep 17 00:00:00 2001
From: Tessa Kelly <tessakkelly@gmail.com>
Date: Wed, 15 Aug 2018 15:52:11 -0700
Subject: [PATCH] :art: put the font and color styles with the content

---
 src/Nri/Ui/Alert/V2.elm | 51 +++++++++++++++++------------------------
 1 file changed, 21 insertions(+), 30 deletions(-)

diff --git a/src/Nri/Ui/Alert/V2.elm b/src/Nri/Ui/Alert/V2.elm
index 353e7377..c6f1a61c 100644
--- a/src/Nri/Ui/Alert/V2.elm
+++ b/src/Nri/Ui/Alert/V2.elm
@@ -17,8 +17,7 @@ module Nri.Ui.Alert.V2
 
 import Accessibility.Styled as Html exposing (Html)
 import Css
-import Css.Foreign exposing (Snippet, children, descendants, everything, selector)
-import Html as RootHtml
+import Css.Foreign
 import Html.Styled exposing (fromUnstyled)
 import Html.Styled.Attributes exposing (css)
 import Markdown
@@ -32,8 +31,7 @@ error : { r | attention_svg : Nri.Ui.AssetPath.Asset } -> String -> Html msg
 error assets =
     alert (Icon.attention assets)
         Nri.Ui.Colors.V1.purple
-        [ Css.color Nri.Ui.Colors.V1.purple
-        ]
+        Nri.Ui.Colors.V1.purple
 
 
 {-| -}
@@ -41,8 +39,7 @@ success : { r | checkmark : String } -> String -> Html msg
 success assets =
     alert (Icon.checkMarkSvg assets)
         Nri.Ui.Colors.V1.green
-        [ Css.color Nri.Ui.Colors.V1.greenDarkest
-        ]
+        Nri.Ui.Colors.V1.greenDarkest
 
 
 {-| -}
@@ -50,8 +47,7 @@ tip : { r | bulb : String } -> String -> Html msg
 tip assets =
     alert (Icon.bulb assets)
         Nri.Ui.Colors.V1.white
-        [ Css.color Nri.Ui.Colors.V1.navy
-        ]
+        Nri.Ui.Colors.V1.navy
 
 
 {-| -}
@@ -59,15 +55,14 @@ warning : { r | attention_svg : Nri.Ui.AssetPath.Asset } -> String -> Html msg
 warning assets =
     alert (Icon.attention assets)
         Nri.Ui.Colors.V1.red
-        [ Css.color Nri.Ui.Colors.V1.red
-        ]
+        Nri.Ui.Colors.V1.red
 
 
-alert : Icon.IconType -> Css.ColorValue compatible -> List Css.Style -> String -> Html msg
-alert icon iconBackgroundColor styles content =
-    Html.div [ css (alertStyles ++ styles) ]
+alert : Icon.IconType -> Css.ColorValue compatible -> Css.ColorValue compatible -> String -> Html msg
+alert icon iconBackgroundColor color content =
+    Html.div [ css alertStyles ]
         [ viewIcon icon iconBackgroundColor
-        , viewAlertContent content
+        , viewAlertContent color content
         ]
 
 
@@ -91,28 +86,24 @@ viewIcon icon iconBackgroundColor =
         [ Icon.decorativeIcon icon ]
 
 
-viewAlertContent : String -> Html.Styled.Html msg
-viewAlertContent content =
-    RootHtml.div [] (Markdown.toHtml Nothing content)
-        |> fromUnstyled
+viewAlertContent : Css.ColorValue compatible -> String -> Html.Styled.Html msg
+viewAlertContent color content =
+    Html.div
+        [ css
+            [ Css.color color
+            , Css.fontSize (Css.px 13)
+            , Css.lineHeight (Css.num 1.2)
+            , Css.listStyleType Css.none
+            , Css.Foreign.descendants [ Css.Foreign.p [ Css.margin Css.zero ] ]
+            ]
+        ]
+        (Markdown.toHtml Nothing content |> List.map fromUnstyled)
 
 
 alertStyles : List Css.Style
 alertStyles =
     [ Css.displayFlex
-    , Css.fontSize (Css.px 13)
-    , Css.lineHeight (Css.num 1.2)
-    , Css.listStyleType Css.none
     , Css.overflow Css.hidden
     , Css.padding4 (Css.px 6) (Css.px 8) (Css.px 8) (Css.px 30)
     , Css.position Css.relative
-    , Css.Foreign.children
-        [ Css.Foreign.div
-            [ Css.Foreign.children
-                [ Css.Foreign.p
-                    [ Css.margin Css.zero
-                    ]
-                ]
-            ]
-        ]
     ]