add visual message notifications

resources/styles/dependencies/colors.scss

@@ -17,8 +17,8 @@ $color-primary: #78dbbe;
 $color-success: #b6dd75;
 $color-complete : #a599c6;
 $color-warning: #e6a16f;
-$color-danger: #cf6d5d;
+$color-danger: #de4762;
-$color-info: #6b9ecc;
+$color-info: #59b9e2;
 
 // Mixing Color varriable for creating both light and dark colors
 $mix-percentage-dark: 81%;

resources/styles/framework.scss

@@ -842,3 +842,97 @@ input[type=range]:focus::-ms-fill-upper {
   }
 
 }
+
+// Messages
+.message {
+  position: fixed;
+  top: 20px;
+  width: 100%;
+  z-index: 12;
+  @include animation(0, 1s, fadeInDown);
+
+  .message-body {
+    align-items: center;
+    border-radius: $br-small;
+    border-bottom: 3px solid transparent;
+    color: $color-white;
+    display: flex;
+    min-height: 100px;
+    margin: 0 auto;
+    padding: $medium $big;
+    position: relative;
+    width: 600px;
+
+    span {
+      font-size: $fs18;
+      text-align: center;
+      width: 100%;
+    }
+
+    .close {
+      cursor: pointer;
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      opacity: .3;
+      width: 18px;
+
+      svg {
+        fill: $color-black;
+        height: 18px;
+        width: 18px;
+        transform: rotate(45deg);
+      }
+
+      &:hover {
+        opacity: .8;
+      }
+
+    }
+
+  }
+
+  &.error {
+
+    .message-body {
+      background-color: $color-danger;
+      border-color: $color-danger-dark;
+    }
+
+  }
+
+  &.success {
+
+    .message-body {
+      background-color: $color-success;
+      border-color: $color-success-dark;
+    }
+
+  }
+
+  &.info {
+
+    .message-body {
+      background-color: $color-info;
+      border-color: $color-info-dark;
+    }
+
+  }
+
+  &.quick {
+
+    .message-body {
+
+      .close {
+        display: none;
+      }
+
+    }
+
+  }
+
+  &.hide-message {
+    @include animation(0, .6s, fadeOutUp);
+  }
+
+}

src/uxbox/ui/dashboard.cljs

@@ -15,6 +15,16 @@
             [uxbox.ui.dashboard.colors :as colors]))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; Messages
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+(defn messages-render
+  []
+  (html
+   [:div.message.error
+    [:div.message-body
+     [:span.close i/close]
+     [:span "Something wrong has happened"]]]))
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; Page: projects
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
@@ -22,6 +32,7 @@
   [own]
   (html
    [:main.dashboard-main
+    (messages-render)
     (header)
     [:section.dashboard-content
      (projects/menu)