From a1359784d1063932fccf8ec96bb5fd4b17cd14ff Mon Sep 17 00:00:00 2001
From: Steven Vandevelde <icid.asset@gmail.com>
Date: Mon, 27 Jul 2020 00:06:58 +0200
Subject: [PATCH] Remove `Html.Styled` from notifications

---
 src/Applications/UI/Notifications.elm | 76 +++++++--------------------
 src/Css/Application.css               |  1 +
 src/Css/Notifications.css             | 30 +++++++++++
 3 files changed, 51 insertions(+), 56 deletions(-)
 create mode 100644 src/Css/Notifications.css

diff --git a/src/Applications/UI/Notifications.elm b/src/Applications/UI/Notifications.elm
index ac4763dd..32b99832 100644
--- a/src/Applications/UI/Notifications.elm
+++ b/src/Applications/UI/Notifications.elm
@@ -1,15 +1,14 @@
 module UI.Notifications exposing (Model, dismiss, show, showWithModel, view)
 
-import Chunky.Styled exposing (..)
+import Chunky exposing (..)
 import Conditional exposing (ifThenElse)
 import Css
 import Css.Classes as C
 import Css.Global
-import Html exposing (Html)
+import Html exposing (Html, text)
+import Html.Attributes exposing (class, rel)
 import Html.Ext exposing (onDoubleTap, onTap)
-import Html.Styled exposing (text)
-import Html.Styled.Attributes exposing (css, fromUnstyled, rel)
-import Html.Styled.Lazy
+import Html.Lazy
 import Notifications exposing (..)
 import Process
 import Task
@@ -84,10 +83,12 @@ view : Model -> Html Msg
 view collection =
     collection
         |> List.reverse
-        |> List.map (Html.Styled.Lazy.lazy notificationView)
-        |> brick
-            [ css containerStyles ]
-            [ C.absolute
+        |> List.map (Html.Lazy.lazy notificationView)
+        |> Html.div
+            [ class "notifications"
+
+            --
+            , C.absolute
             , C.bottom_0
             , C.flex
             , C.flex_col
@@ -99,14 +100,9 @@ view collection =
             , C.text_sm
             , C.z_50
             ]
-        |> Html.Styled.toUnstyled
-
-
 
--- TODO: Remove .Styled.Html
 
-
-notificationView : Notification Msg -> Html.Styled.Html Msg
+notificationView : Notification Msg -> Html Msg
 notificationView notification =
     let
         kind =
@@ -121,17 +117,18 @@ notificationView notification =
         dismissMsg =
             DismissNotification { id = id }
     in
-    brick
+    Html.div
         [ if options.sticky then
-            fromUnstyled (onDoubleTap dismissMsg)
+            onDoubleTap dismissMsg
 
           else
-            fromUnstyled (onTap dismissMsg)
+            onTap dismissMsg
 
         --
         , rel (String.fromInt id)
-        ]
-        [ C.duration_200
+
+        --
+        , C.duration_200
         , C.max_w_xs
         , C.mt_2
         , C.p_4
@@ -167,13 +164,13 @@ notificationView notification =
           else
             C.opacity_100
         ]
-        [ chunk
+        [ Html.div
             [ C.mt_px, C.pt_px ]
-            [ Html.Styled.fromUnstyled (contents notification) ]
+            [ contents notification ]
 
         --
         , if options.sticky && kind /= Warning then
-            chunk
+            Html.div
                 [ C.cursor_pointer
                 , C.italic
                 , C.mt_2
@@ -186,36 +183,3 @@ notificationView notification =
           else
             nothing
         ]
-
-
-
--- 🖼
-
-
-containerStyles : List Css.Style
-containerStyles =
-    [ Css.fontSize (Css.px 13)
-    , Css.lineHeight (Css.num 1.35)
-
-    --
-    , Css.Global.descendants
-        [ Css.Global.a
-            [ Css.borderBottom3 (Css.px 1) Css.solid (Css.rgba 255 255 255 0.45)
-            , Css.color Css.inherit
-            , Css.display Css.inlineBlock
-            , Css.fontWeight (Css.int 600)
-            , Css.textDecoration Css.none
-            ]
-        , Css.Global.p
-            [ Css.margin Css.zero
-            , Css.padding Css.zero
-            ]
-        , Css.Global.em
-            [ Css.borderBottom3 (Css.px 1) Css.solid (Css.rgba 255 255 255 0.45)
-            , Css.fontWeight Css.inherit
-            ]
-        , Css.Global.strong
-            [ Css.fontWeight (Css.int 600)
-            ]
-        ]
-    ]
diff --git a/src/Css/Application.css b/src/Css/Application.css
index 84a37b64..f7bef22e 100644
--- a/src/Css/Application.css
+++ b/src/Css/Application.css
@@ -10,6 +10,7 @@
 
 @import "Fonts.css";
 @import "Logo.css";
+@import "Notifications.css";
 
 
 
diff --git a/src/Css/Notifications.css b/src/Css/Notifications.css
new file mode 100644
index 00000000..fd1e21e4
--- /dev/null
+++ b/src/Css/Notifications.css
@@ -0,0 +1,30 @@
+.notifications {
+  font-size: 13px;
+  line-height: 1.35;
+
+  & a,
+  & em {
+    border-bottom: 1px solid rgba(255, 255, 255, 0.45);
+    display: inline-block;
+  }
+
+  & a {
+    color: inherit;
+    font-weight: 600;
+    text-decoration: none;
+  }
+
+  & p {
+    margin: 0;
+    padding: 0;
+  }
+
+  & em {
+    font-weight: inherit;
+  }
+
+  & strong {
+    font-weight: 600;
+  }
+
+}
-- 
2.51.2