notify next step

IntersectMBO · May 19, 2022 · 089d50c · 089d50c
1 parent cfd8518
commit 089d50c
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 43 deletions.
diff --git a/cardano-tracer/src/Cardano/Tracer/Handlers/RTView/UI/CSS/Own.hs b/cardano-tracer/src/Cardano/Tracer/Handlers/RTView/UI/CSS/Own.hs
@@ -54,6 +54,11 @@ pre {
   border-radius: 3px;
 }
 
+.message.is-link .message-body {
+  border-color: #485fc7;
+  color: #1834ae;
+}
+
 span[data-tooltip] {
   border-bottom: none !important;
 }
@@ -66,9 +71,16 @@ span[data-tooltip] {
   display: inline-flex !important;
 }
 
+.rt-view-no-nodes-icon svg {
+  width: 70px;
+  margin-top: 60px;
+  margin-bottom: 40px;
+}
+
 .rt-view-no-nodes-info {
   max-width: 800px !important;
   margin-top: 50px;
+  font-size: 97%;
 }
 
 .rt-view-chart-area {
@@ -277,9 +289,6 @@ span[data-tooltip] {
 }
 
 .dark .rt-view-no-nodes-icon svg {
-  width: 70px;
-  margin-top: 60px;
-  margin-bottom: 40px;
   color: #677deb;
 }
 
@@ -373,6 +382,23 @@ span[data-tooltip] {
   border-top: 1px solid #555;
 }
 
+.dark .rt-view-notifications-title {
+  color: whitesmoke;
+}
+
+.dark .rt-view-notifications-head {
+  color: whitesmoke;
+  background-color: #282841;
+  border-bottom: 1px solid #555;
+}
+
+.dark .rt-view-notifications-body {
+  color: whitesmoke;
+  background-color: #131325;
+  border-bottom-left-radius: 6px;
+  border-bottom-right-radius: 6px;
+}
+
 .dark .rt-view-ekg-metrics-title {
   color: whitesmoke;
 }
@@ -606,9 +632,6 @@ span[data-tooltip] {
 }
 
 .light .rt-view-no-nodes-icon svg {
-  width: 70px;
-  margin-top: 60px;
-  margin-bottom: 40px;
   color: #0033ad;
 }
 
@@ -695,6 +718,23 @@ span[data-tooltip] {
   border-top: 1px solid #bebebe;
 }
 
+.light .rt-view-notifications-title {
+  color: #444;
+}
+
+.light .rt-view-notifications-head {
+  color: whitesmoke;
+  background-color: whitesmoke;
+  border-bottom: 1px solid #bebebe;
+}
+
+.light .rt-view-notifications-body {
+  color: #555;
+  background-color: #eaeaea;
+  border-bottom-left-radius: 6px;
+  border-bottom-right-radius: 6px;
+}
+
 .light .rt-view-ekg-metrics-title {
   color: #444;
 }

diff --git a/cardano-tracer/src/Cardano/Tracer/Handlers/RTView/UI/HTML/NoNodes.hs b/cardano-tracer/src/Cardano/Tracer/Handlers/RTView/UI/HTML/NoNodes.hs
@@ -22,37 +22,41 @@ import           Cardano.Tracer.Handlers.RTView.UI.Utils
 --   configuration of 'cardano-tracer'.
 mkNoNodesInfo :: Network -> UI Element
 mkNoNodesInfo networkConfig = do
-  closeIt <- UI.button #. "delete"
+  closeIt <- UI.button #. "delete" # set (UI.attr "aria-label") "delete"
   infoNote <-
-    UI.div ## "no-nodes-info"
-           #. "container notification is-link rt-view-no-nodes-info" #+
-      [ element closeIt
-      , UI.p #. "is-size-4" # set text "«Hey, where are my nodes?»"
-      , UI.p #. "mt-5" #+
-          [ UI.span # set UI.html pleaseWait
+    UI.mkElement "article" ## "no-nodes-info"
+                           #. "container message is-link rt-view-no-nodes-info" #+
+      [ UI.div #. "message-header" #+
+          [ UI.p # set text "«Hey, where are my nodes?»"
+          , element closeIt
           ]
-      , UI.p #. "mt-5" #+
-          [ string intro
-          ]
-      , UI.p #. "mt-5" #+
-          [ UI.span # set UI.html cardanoTracerNote
-          ]
-      , UI.p #. "mt-5" #+
-          [ UI.span # set UI.html cardanoNodeNote
-          ]
-      , UI.p #. "mt-5" #+
-          [ UI.span # set UI.html nodeNameNote
-          ]
-      , UI.p #. "mt-5" #+
-          [ UI.span # set UI.html sshNote
-          ]
-      , UI.p #. "mt-5" #+
-          [ string "For more details, please read "
-          , UI.anchor # set UI.href "https://github.com/input-output-hk/cardano-node/blob/master/cardano-tracer/docs/cardano-tracer.md#configuration"
-                      # set text "our documentation"
-                      # set UI.target "_blank"
-          , image "rt-view-href-icon" externalLinkWhiteSVG
-          , string "."
+      , UI.div #. "message-body" #+
+          [ UI.p #+
+              [ UI.span # set UI.html pleaseWait
+              ]
+          , UI.p #. "mt-5" #+
+              [ string intro
+              ]
+          , UI.p #. "mt-5" #+
+              [ UI.span # set UI.html cardanoTracerNote
+              ]
+          , UI.p #. "mt-5" #+
+              [ UI.span # set UI.html cardanoNodeNote
+              ]
+          , UI.p #. "mt-5" #+
+              [ UI.span # set UI.html nodeNameNote
+              ]
+          , UI.p #. "mt-5" #+
+              [ UI.span # set UI.html sshNote
+              ]
+          , UI.p #. "mt-5" #+
+              [ string "For more details, please read "
+              , UI.anchor # set UI.href "https://github.com/input-output-hk/cardano-node/blob/master/cardano-tracer/docs/cardano-tracer.md#configuration"
+                          # set text "our documentation"
+                          # set UI.target "_blank"
+              , image "rt-view-href-icon" externalLinkSVG
+              , string "."
+              ]
           ]
       ]
   on UI.click closeIt . const $ element infoNote # hideIt

diff --git a/cardano-tracer/src/Cardano/Tracer/Handlers/RTView/UI/HTML/Notifications.hs b/cardano-tracer/src/Cardano/Tracer/Handlers/RTView/UI/HTML/Notifications.hs
@@ -12,7 +12,7 @@ import           Graphics.UI.Threepenny.Core
 
 --import           Cardano.Tracer.Handlers.RTView.UI.JS.Utils
 --import           Cardano.Tracer.Handlers.RTView.UI.Img.Icons
---import           Cardano.Tracer.Handlers.RTView.UI.Utils
+import           Cardano.Tracer.Handlers.RTView.UI.Utils
 
 mkNotificationsEvents :: UI Element
 mkNotificationsEvents = do
@@ -21,12 +21,19 @@ mkNotificationsEvents = do
     UI.div #. "modal" #+
       [ UI.div #. "modal-background" #+ []
       , UI.div #. "modal-card" #+
-          [ UI.header #. "modal-card-head rt-view-about-head" #+
-              [ UI.p #. "modal-card-title rt-view-about-title" # set text "Notifications: events"
+          [ UI.header #. "modal-card-head rt-view-notifications-head" #+
+              [ UI.p #. "modal-card-title rt-view-notifications-title" # set text "Notifications: events"
               , element closeIt
               ]
-          , UI.mkElement "section" #. "modal-card-body rt-view-about-body" #+
-              [ string "EVENTS"
+          , UI.mkElement "section" #. "modal-card-body rt-view-notifications-body" #+
+              [ UI.div #. "field" #+
+                  [ UI.input ## "switchRoundedInfo"
+                             #. "switch is-rounded is-info"
+                             # set UI.type_ "checkbox"
+                             # set UI.name "switchRoundedInfo"
+                  , UI.label # set UI.for "switchRoundedInfo"
+                             # set text "Switch info"
+                  ]
               ]
           ]
       ]
@@ -40,11 +47,11 @@ mkNotificationsSettings = do
     UI.div #. "modal" #+
       [ UI.div #. "modal-background" #+ []
       , UI.div #. "modal-card" #+
-          [ UI.header #. "modal-card-head rt-view-about-head" #+
-              [ UI.p #. "modal-card-title rt-view-about-title" # set text "Notifications: settings"
+          [ UI.header #. "modal-card-head rt-view-notifications-head" #+
+              [ UI.p #. "modal-card-title rt-view-notifications-title" # set text "Notifications: settings"
               , element closeIt
               ]
-          , UI.mkElement "section" #. "modal-card-body rt-view-about-body" #+
+          , UI.mkElement "section" #. "modal-card-body rt-view-notifications-body" #+
               [ string "SETTINGS"
               ]
           ]