Add display to errors.

src/Main.elm

@@ -93,6 +93,10 @@ update msg model = case msg of
     SendImageResponse _ -> (model, Cmd.none)
     SendFileResponse _ -> (model, Cmd.none)
     ReceiveMarkdown md -> updateMarkdown model md
+    DismissError i -> updateDismissError model i
+
+updateDismissError : Model -> Int -> (Model, Cmd Msg)
+updateDismissError m i = ({ m | errors = (List.take i m.errors) ++ (List.drop (i+1) m.errors)}, Cmd.none)
 
 updateMarkdown : Model -> MarkdownResponse -> (Model, Cmd Msg)
 updateMarkdown m { roomId, text, markdown } =

src/Scylla/Model.elm

@@ -63,6 +63,7 @@ type Msg =
     | SendImageResponse (Result Http.Error ())
     | SendFileResponse (Result Http.Error ())
     | ReceiveMarkdown MarkdownResponse
+    | DismissError Int
 
 displayName : Model -> Username -> String
 displayName m s = Maybe.withDefault (senderName s) <| Maybe.andThen .displayName <| Dict.get s m.userData

src/Scylla/Views.elm

@@ -50,10 +50,10 @@ viewFull model =
         [ errorList ] ++ [ core ] 
 
 errorsView : List String -> Html Msg
-errorsView = div [] << List.map errorView
+errorsView = div [ class "errors-wrapper" ] << List.indexedMap errorView
 
-errorView : String -> Html Msg
-errorView s = div [] [ text s ]
+errorView : Int -> String -> Html Msg
+errorView i s = div [ class "error-wrapper", onClick <| DismissError i ] [ iconView "alert-triangle", text s ]
 
 baseView : Model -> Maybe (String, JoinedRoom) -> Html Msg
 baseView m jr = 

static/scss/style.scss

@@ -5,6 +5,8 @@ $primary-color-light: #9FDBFB;
 $active-input-color: white;
 $background-color: #fafafa;
 $background-color-dark: darken($background-color, 4%);
+$error-color: #f01d43;
+$error-color-dark: darken(#f01d43, 10%);
 $transition-duration: .125s;
 
 $inactive-input-color: darken($active-input-color, 3%);
@@ -70,6 +72,37 @@ h2 {
     margin-bottom: 3px;
 }
 
+div.errors-wrapper {
+    position: fixed;
+    pointer-events: none;
+    top: 0px;
+    bottom: 0px;
+    left: 0px;
+    right: 0px;
+
+    overflow: hidden;
+}
+
+div.error-wrapper {
+    pointer-events: auto;
+    width: 400px;
+    box-shadow: 0px 0px 5px rgba(0, 0, 0, .25);
+    padding: 5px;
+    background-color: $error-color;
+    border: 1px solid $error-color-dark;
+    color: white;
+    margin: auto;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+
+    .feather-icon {
+        margin-right: 10px;
+    }
+}
+
 /*
  * Login Screen
  */