feat(styles): update styles for notifications and connection status

src/styl/components/label.styl

@@ -8,12 +8,16 @@
   border $label-border
 
   &__group
-    display flex
+    display inline-flex
     border $label-border
+    border-radius $label-border-radius
+    align-items stretch
+    align-content stretch
 
     .label
       border 0
       border-radius 0
+      flex-grow 1
 
     *
       border-left $label-sep-border
@@ -25,14 +29,6 @@
     *:last-child
       border-radius 0 $label-border-radius $label-border-radius 0
 
-    &--full
-      display flex
-      align-items stretch
-      align-content stretch
-
-      .label
-        flex-grow 1
-
   &__addon
     padding $label-padding
     white-space pre

src/styl/mozaik.styl

@@ -1,8 +1,9 @@
-@require '__vars'
+@require '_mixins'
 
 @require $theme + '/_vars'
 
-@require '_mixins'
+@require '__vars'
+
 @require '_main'
 @require 'components/dashboard'
 @require 'components/widget'
@@ -14,6 +15,8 @@
 @require 'components/pie'
 @require 'components/bar-chart'
 @require 'components/inspector'
+@require 'components/notifications'
+@require 'components/connection-status'
 
 // IMPORT EXTENSIONS STYLES
 @require '../ext/collected'

src/themes/bordeau/_vars.styl

@@ -5,6 +5,7 @@ $main-bg-color                  = rgb(40, 18, 18)
 $main-txt-color                 = hsl(6, 26%, 67%)
 $main-margin                    = 4vmin
 $main-font                      = normal normal 400 unquote("2vmin/3vmin") "Open sans", sans-serif
+$card-bg-color                  = rgb(69, 23, 23)
 
 // DASHBOARD
 $dashboard-header-height        = 6vmin
@@ -13,56 +14,42 @@ $dashboard-header-font          = normal normal 300 unquote("2.6vmin/6vmin") "Ro
 
 // WIDGET
 $widget-spacing                 = 0.4vmin
-$widget-bg-color                = rgb(69, 23, 23)
-$widget-border-radius           = 0
 
 // WIDGET — header
-$widget-header-bg-color         = transparent
 $widget-header-txt-color        = hsl(10, 60%, 90%)
 $widget-header-icon-color       = hsl(0, 52%, 60%)
-$widget-header-shadow           = none
 $widget-header-border-bottom    = 1px solid $main-bg-color
-$widget-header-border-radius    = 0
 $widget-header-font             = normal normal 100 2.5vmin "Roboto Slab", sans-serif
 
-// WIDGET — header count
-$widget-header-count-bg-color   = $main-bg-color
-$widget-header-count-txt-color  = hsl(0, 52%, 60%)
-
-// WIDGET — body
-$widget-body-border-radius      = 0
-$widget-body-bg-color           = transparent
-
-
 // COUNT
-$count-bg-color                 = lighten($widget-bg-color, 4)
+$count-bg-color                 = lighten($card-bg-color, 4)
 $count-txt-color                = hsl(0, 52%, 60%)
 $count-border-radius            = 2px
 
+// WIDGET — header count
+$widget-header-count-bg-color   = $main-bg-color
 
 // LABEL
-$label-bg-color                 = lighten($widget-bg-color, 5)
+$label-bg-color                 = lighten($card-bg-color, 5)
 $label-txt-color                = $widget-header-txt-color
 $label-addon-bg-color           = $main-bg-color
 $label-addon-txt-color          = $widget-header-icon-color
 $label-border-radius            = 2px
 
+$notifications-bg-color         = lighten($card-bg-color, 7)
 
 // TABLE
 $table-border-h                 = 1px solid $main-bg-color
 
-
 // Meaningful colors
 $unknown-color                  = #7e706d;
 $success-color                  = #50a3b2;
 $failure-color                  = #a31c12;
 
-
 // CHARTS
-$histogram-bar-bg-color        = lighten($widget-bg-color, 4);
-$chart-axis-txt-color          = $main-txt-color;
-
+$histogram-bar-bg-color        = lighten($card-bg-color, 4)
+$chart-axis-txt-color          = $main-txt-color
 
 // PROPS
-$prop-key-txt-color            = $main-txt-color;
-$prop-value-txt-color          = lighten($main-txt-color, 13);
+$prop-key-txt-color            = $main-txt-color
+$prop-value-txt-color          = lighten($main-txt-color, 13)

src/themes/light-grey/_vars.styl

@@ -17,48 +17,39 @@ $widget-shadow                  = none
 // WIDGET — header
 $widget-header-height           = 7vmin
 $widget-header-bg-color         = transparent
-$widget-header-txt-color        = #999999
+$widget-header-txt-color        = #999
 $widget-header-icon-color       = #84c2f6
 
+// COUNT
+$count-padding                  = 3px 7px
+$count-bg-color                 = $main-bg-color
+$count-txt-color                = #5b89b5
+$count-border-radius            = 2px
+
 // WIDGET — header count
 $widget-header-count-bg-color   = #fefefe
 $widget-header-count-txt-color  = #888
-$widget-header-count-shadow     = none
-$widget-header-count-txt-shadow = none
 $widget-header-font             = normal normal 300 3.4vmin "Lato", sans-serif
 
 // WIDGET — body
 $widget-body-border-radius      = 2px
 $widget-body-bg-color           = #fff
 $widget-body-shadow             = 0 1px 2px rgba(0, 0, 0, 0.2)
 
-
-// COUNT
-$count-padding                  = 3px 7px
-$count-bg-color                 = $main-bg-color
-$count-txt-color                = #5b89b5
-$count-border-radius            = 2px
-$count-border                   = none
-
-
 // LABEL
 $label-bg-color                 = #fff
-$label-txt-color                = $main-txt-color
 $label-addon-bg-color           = $main-bg-color
 $label-addon-txt-color          = #84c2f6
 $label-border                   = 1px solid darken($main-bg-color, 5)
 
-
 // TABLE
 $table-border-h                 = 1px solid #ddd
 
-
 // Meaningful colors
 $unknown-color                  = #cccccc
 $success-color                  = #84c2f6
 $failure-color                  = #e89643
 
-
 // CHARTS
 $histogram-bar-bg-color         = #eee
 $chart-axis-txt-color           = #999

src/themes/light-yellow/_vars.styl

@@ -8,62 +8,49 @@ $main-font                      = normal normal 400 unquote("2.2vmin/3.2vmin") "
 
 // DASHBOARD
 $dashboard-header-height        = 6vmin
-$dashboard-header-txt-color     = #050505
 $dashboard-header-font          = normal normal 300 unquote("4vmin/6vmin") "Lato", sans-serif
 
 // WIDGET
 $widget-spacing                 = 2vmin
 $widget-bg-color                = #f1e2b9
-$widget-border-radius           = 0
 $widget-border                  = 2px solid #050505
 
 // WIDGET — header
 $widget-header-height           = 6vmin
 $widget-header-bg-color         = #ccc0a1
-$widget-header-txt-color        = #050505
-$widget-header-icon-color       = #050505
 $widget-header-icon-size        = 24px
 $widget-header-border-bottom    = 2px solid #050505
-$widget-header-border-radius    = 0
 $widget-header-font             = normal normal 300 3vmin "Lato", sans-serif
 
+// COUNT
+$count-padding                 = 3px 7px
+$count-bg-color                = lighten($main-bg-color, 3)
+$count-border-radius           = 2px
+$count-border                  = 1px solid #000
+
 // WIDGET — header count
 $widget-header-count-border     = 1px solid #050505
 $widget-header-count-bg-color   = transparent
-$widget-header-count-txt-color  = #050505
 
 // WIDGET — body
-$widget-body-border-radius      = 0
 $widget-body-bg-color           = transparent
 
-
 // TABLE
 $table-border-h                 = 1px solid #050505
 
-
-// COUNT
-$count-padding                 = 3px 7px
-$count-bg-color                = lighten($main-bg-color, 3)
-$count-txt-color               = $main-txt-color
-$count-border-radius           = 2px
-$count-border                  = 1px solid #000
-
-
 // LABEL
 $label-bg-color                 = transparent
 $label-txt-color                = $main-txt-color
 $label-addon-bg-color           = $widget-header-bg-color
 $label-addon-txt-color          = $widget-header-txt-color
 $label-border                   = $count-border
 
-
 // Meaningful colors
 $unknown-color                  = #9d937a
 $success-color                  = #41508b
 $warning-color                  = #d1be65
 $failure-color                  = #f9703c
 
-
 // CHARTS
 $histogram-bar-bg-color         = #9d937a
 $chart-axis-txt-color           = #050505

src/themes/night-blue/_vars.styl

@@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css?family=Raleway:400,200,800|Montserrat:400,700")
+@import url("https://fonts.googleapis.com/css?family=Raleway:200,400,600,800|Montserrat:400,700")
 
 // GENERIC
 $main-bg-color                  = #1e2430
@@ -23,7 +23,6 @@ $widget-header-txt-color        = #eedba5
 $widget-header-icon-color       = #e0c671
 $widget-header-shadow           = 0 1px 0 #495b71 inset
 $widget-header-border-bottom    = 1px solid #253246
-$widget-header-border-radius    = 2px 2px 0 0
 $widget-header-font             = normal normal 400 1.6vmin "Montserrat", sans-serif
 
 // WIDGET — header count
@@ -35,42 +34,40 @@ $widget-header-count-border     = none
 
 // WIDGET — body
 $widget-body-border             = none
-$widget-body-border-radius      = 0 0 2px 2px
 $widget-body-bg-color           = transparent
 $widget-body-shadow             = none
 
-
 // TABLE
 $table-border-h                 = 1px solid #253246
 
-
 // COUNT
 $count-padding                  = 3px 7px
 $count-bg-color                 = #1e2836
 $count-txt-color                = $main-txt-color
 $count-border-radius            = 2px
 $count-border                   = none
 
-
 // LABEL
 $label-bg-color                 = #212e41
 $label-txt-color                = $widget-header-txt-color
 $label-addon-bg-color           = #1e2836
 $label-addon-txt-color          = $widget-header-txt-color
 $label-border-radius            = 2px
 
+// NOTIFICATIONS
+$notifications-bg-color         = lighten($widget-header-bg-color, 5)
+$notifications-txt-color        = $widget-header-txt-color
+$notifications-shadow           = 0 1px 1px rgba(0, 0, 0, 0.85)
 
 // Meaningful color
 $unknown-color                  = #495b71
 $success-color                  = #4ec2b4
 $warning-color                  = #d1be65
 $failure-color                  = #de5029
 
-
 // CHART
+$chart-elements-color           = lighten($widget-bg-color, 40)
 $histogram-bar-bg-color         = lighten($widget-bg-color, 7)
-$chart-axis-txt-color           = lighten($widget-bg-color, 40)
-
 
 // PROPS
 $prop-key-txt-color             = $main-txt-color

src/themes/night-blue/index.styl

@@ -1,4 +1,4 @@
-@require '_dashboard'
-@require '_widget'
-@require '_list'
-@require 'time/_clock'
+@require 'dashboard'
+@require 'widget'
+@require 'list'
+@require 'time/clock'