UI updates - new user menu, updated about and profile screen and more (#723)

assets/sass/app.scss

@@ -39,3 +39,4 @@ footer.main-footer {
 @import 'navbar';
 @import 'daterangepicker';
 @import 'tooltip';
+@import 'skins';

assets/sass/content.scss

@@ -9,6 +9,11 @@
     padding: 15px 0;
 }
 .content-header {
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
+    background-color: #fff !important;
+    padding: 15px 0 15px 10px;
+
     h1 {
         small {
             display: none;
@@ -16,6 +21,22 @@
     }
 }
 
+.content-header>.breadcrumb {
+    position: relative;
+    margin-top: 5px;
+    top: 0;
+    right: 0;
+    float: none;
+    background: #d2d6de;
+    padding-left: 10px;
+}
+
+@media (min-width: $screen-sm-min) {
+    .content-header>.breadcrumb {
+        right: 10px;
+    }
+}
+
 @media (min-width: $screen-sm-min) {
     .content-header {
         h1 {
@@ -38,4 +59,14 @@ td {
             margin: 0;
         }
     }
+}
+
+/* ABOUT SCREEN */
+.box-body .menu-icon {
+    width: 35px;
+    height: 35px;
+    border-radius: 50%;
+    text-align: center;
+    line-height: 35px;
+    margin-right: 15px;
 }

assets/sass/navbar.scss

@@ -21,9 +21,38 @@
         text-align: center;
     }
     .dropdown-menu {
+        box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
         max-width: 90vw;
         width: unset !important;
     }
+    .user-menu {
+        margin-right: 10px;
+        ul {
+            li {
+                a {
+                    color: #444;
+                    i {
+                        padding-right: 10px;
+                    }
+                }
+                hr {
+                    margin: 0;
+                }
+            }
+        }
+    }
+}
+
+@media (max-width: $screen-sm-min) {
+    .navbar-custom-menu>.navbar-nav>li>.dropdown-menu {
+        right: 0;
+    }
+    .navbar-nav .user-menu {
+        margin-right: 0;
+    }
+    .navbar-nav .user-menu.open .dropdown-menu > li > a {
+        padding: 5px 25px 5px 25px
+    }
 }
 
 /*

assets/sass/skins.scss

@@ -0,0 +1,26 @@
+
+$skins: blue, blue, black, green, purple, red, yellow;
+
+@each $skinColor in $skins {
+    @media (max-width: $screen-sm-min) {
+        .skin-#{$skinColor} .main-header .navbar .dropdown-menu li.divider {
+            background-color: #ccc;
+        }
+        .skin-#{$skinColor} .main-header .navbar .dropdown-menu li a {
+            color: #444;
+        }
+        .skin-#{$skinColor} .main-header .navbar .dropdown-menu li a:hover {
+            background: #fff;
+        }
+
+        .skin-#{$skinColor}-light .main-header .navbar .dropdown-menu li.divider {
+            background-color: #ccc;
+        }
+        .skin-#{$skinColor}-light .main-header .navbar .dropdown-menu li a {
+            color: #444;
+        }
+        .skin-#{$skinColor}-light .main-header .navbar .dropdown-menu li a:hover {
+            background: #fff;
+        }
+    }
+}