Change alert indicator to work better.

src/Scylla/Views.elm

@@ -128,23 +128,24 @@ roomListElementView m s jr =
                 , ("hidden", not isVisible)
                 ]
             ]
-            [ a [ href <| roomUrl s ] [ text name ]
-            , roomNotificationCountView jr.unreadNotifications
-            ]
+            <| roomNotificationCountView jr.unreadNotifications ++
+                [ a [ href <| roomUrl s ] [ text name ] ]
 
-roomNotificationCountView : Maybe UnreadNotificationCounts -> Html Msg
+roomNotificationCountView : Maybe UnreadNotificationCounts -> List (Html Msg)
 roomNotificationCountView ns =
     let
-        spanNumber = case Maybe.andThen .notificationCount ns of
-            Nothing -> ""
-            Just 0 -> ""
-            Just i -> String.fromInt i
-        spanSuffix = case Maybe.andThen .highlightCount ns of
-            Nothing -> ""
-            Just 0 -> ""
-            Just i -> "!"
+        wrap b = span
+            [ classList
+                [ ("notification-count", True)
+                , ("bright", b)
+                ]
+            ]
+        getCount f = Maybe.withDefault 0 << Maybe.andThen f
     in
-        span [ class "notification-count" ] [ text (spanNumber ++ spanSuffix) ]
+        case (getCount .notificationCount ns, getCount .highlightCount ns) of
+            (0, 0) -> []
+            (i, 0) -> [ wrap False [ iconView "bell", text <| String.fromInt i ] ]
+            (i, j) -> [ wrap True [ iconView "alert-circle", text <| String.fromInt i ] ] 
 
 loginView : Model -> Html Msg
 loginView m = div [ class "login-wrapper" ]

static/scss/style.scss

@@ -7,6 +7,8 @@ $background-color-light: lighten($background-color, 4%);
 $background-color-dark: darken($background-color, 4%);
 $error-color: #f01d43;
 $error-color-dark: darken(#f01d43, 10%);
+$alert-color: #18f49c;
+$alert-color-bright: rgb(240, 244, 24);
 $inactive-input-color: lighten($background-color-light, 5%);
 $active-input-color: lighten($inactive-input-color, 5%);
 
@@ -174,9 +176,23 @@ div.room-link-wrapper {
     padding-left: 5px;
     margin: 3px;
     align-items: center;
+
+    .feather-icon {
+        margin-right: 3px;
+    }
     
-    span, a {
+    span {
+        color: $alert-color;
+        display: flex;
+        align-items: center;
         margin-right: 5px;
+
+        &.bright {
+            color: $alert-color-bright;
+        }
+    }
+
+    a {
         color: lightgrey;
     }