Light theme tweaks after merge with bulletfactorys light theme fixes

src/app/features/profile/partials/profile.html

@@ -52,7 +52,7 @@
 							UI Theme
 						</li>
 						<li>
-							<select class="input-small tight-form-input" ng-model="user.theme" ng-options="f for f in ['dark', 'light']" ng-change="themeChanged()"></select>
+							<select class="input-small tight-form-input" ng-model="user.theme" ng-options="f for f in ['dark', 'light']"></select>
 						</li>
 					</ul>
 					<div class="clearfix"></div>

src/app/features/profile/profileCtrl.js

@@ -7,7 +7,7 @@ function (angular, config) {
 
   var module = angular.module('grafana.controllers');
 
-  module.controller('ProfileCtrl', function($scope, backendSrv) {
+  module.controller('ProfileCtrl', function($scope, backendSrv, contextSrv, $location) {
 
     $scope.init = function() {
       $scope.getUser();
@@ -18,6 +18,7 @@ function (angular, config) {
       backendSrv.get('/api/user').then(function(user) {
         $scope.user = user;
         $scope.user.theme = user.theme || 'dark';
+        $scope.old_theme = $scope.user.theme;
       });
     };
 
@@ -35,7 +36,13 @@ function (angular, config) {
 
     $scope.update = function() {
       if (!$scope.userForm.$valid) { return; }
-      backendSrv.put('/api/user/', $scope.user);
+
+      backendSrv.put('/api/user/', $scope.user).then(function() {
+        contextSrv.user.name = $scope.user.name || $scope.user.login;
+        if ($scope.old_theme !== $scope.user.theme) {
+          window.location.href = config.appSubUrl + $location.path();
+        }
+      });
     };
 
     $scope.init();

src/app/partials/sidemenu.html

@@ -38,10 +38,7 @@
 		<li class="dropdown">
 			<a class="sidemenu-item pointer" data-toggle="dropdown" ng-click="loadOrgs()">
 				<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-users"></i></span>
-				<span class="sidemenu-item-text">
-					{{contextSrv.user.orgName}}
-					<i class="fa fa-caret-down small"></i>
-				</span>
+				<span class="sidemenu-item-text">{{contextSrv.user.orgName}}</span><i class="fa fa-caret-down small"></i>
 	   	</a>
 			<ul class="dropdown-menu" role="menu" style="left: 65px">
 				<li ng-repeat="menuItem in orgMenu" ng-class="menuItem.cssClass">

src/css/less/bootswatch.light.less

@@ -70,6 +70,7 @@ a.text-success:hover { color: darken(@green, 10%); }
 	.nav > .active > a:hover,
 	.nav > .active > a:focus {
 		.box-shadow(none);
+    border-bottom: 1px solid @blue;
 		background-color: @navbarLinkBackgroundHover;
 	}
 

src/css/less/navbar.less

@@ -76,7 +76,7 @@
     &:hover {
       background: @grafanaTargetFuncHightlight;
       .fa {
-        color: @linkColorHover;
+        color: @linkColor;
       }
     }
   }

src/css/less/sidemenu.less

@@ -47,6 +47,12 @@
     margin-bottom: 9px;
   }
 
+  .fa-caret-down {
+    position: relative;
+    top: 2px;
+    font-size: 90%;
+  }
+
   &.sidemenu-small {
     font-size: 14px;
 
@@ -73,16 +79,13 @@
 }
 
 
-.sidemenu-user {
-  .sidemenu-item-text {
-    width: 110px;
-    display: inline-block;
-    vertical-align: middle;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  }
+.sidemenu-item-text {
+  width: 110px;
+  display: inline-block;
+  vertical-align: middle;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 
 .sidemenu-top-btn {
   display: block;
@@ -118,17 +121,15 @@
   }
 }
 
-.sidemenu-icon {
-}
-
 .sidemenu-item {
   color: @linkColor;
   line-height: 40px;
-	padding: 0px 10px 0px 20px;
-	display: block;
+  padding: 0px 10px 0px 20px;
+  display: block;
+  white-space: nowrap;
 
   .sidemenu-item-text {
-    padding-left: 15px;
+    padding-left: 11px;
     transition: color 100ms ease-out;
 
     &.no-icon {

src/css/less/tables_lists.less

@@ -23,11 +23,6 @@
       width: 100%;
     }
   }
-
-  strong {
-    font-weight: normal;
-    color: @white;
-  }
 }
 
 .max-width {

src/css/less/variables.dark.less

@@ -131,10 +131,10 @@
 @btnInverseBackground:              @grayDark;
 @btnInverseBackgroundHighlight:     lighten(@grayDark, 5%);
 
-@iconContainerBackground:			@black;
+@iconContainerBackground:			      @black;
 @iconContainerBackgroundHighlight:	lighten(@black, 5%);
-@iconContainerBorder:				0 0 14px 2px rgba(255,255,255, 0.05);
-@iconContainerShadow:				0 0 14px 2px rgba(255,255,255, 0.05);
+@iconContainerBorder:				        1px solid transparent;
+@iconContainerShadow:				        0 0 14px 2px rgba(255,255,255, 0.05);
 
 
 // Forms

src/css/less/variables.light.less

@@ -21,7 +21,7 @@
 // Accent colors
 // -------------------------
 @blueOrig:              #007FFF;
-@blue:             		#2AB2E4; 
+@blue:             	   	#2AB2E4;
 @blueDark:              #75CAEB;
 @green:                 #28B62C;
 @red:                   #FF4136;
@@ -34,8 +34,8 @@
 // grafana Variables
 // -------------------------
 @grafanaPanelBackground: 	@white;
-@grafanaPanelBorder: 		solid 1px @grayLight;
-@grafanaTriggerBorder:		solid 1px @grayLight;
+@grafanaPanelBorder: 		  solid 1px #ddd;
+@grafanaTriggerBorder:		solid 1px @grayLighter;
 
 // Submenu
 @submenuBackground:     rgb(218, 217, 217);
@@ -101,11 +101,11 @@
 @borderRadiusSmall:     2px;
 
 // Lists
-@grafanaListBackground:  	   lighten(@grayLight,20%);
-@grafanaListAccent:            lighten(@grayLight,10%);
+@grafanaListBackground:  	     darken(@grayLighter,5%);
+@grafanaListAccent:            darken(@grayLighter,8%);
 @grafanaListBorderTop:         #eee;
 @grafanaListBorderBottom:      #eee;
-@grafanaListHighlight:         lighten(@grayLight,10%);
+@grafanaListHighlight:         darken(@grayLighter,10%);
 @grafanaListHighlightContrast: #ddd;
 @grafanaListMainLinkColor:     @textColor;
 
@@ -146,11 +146,10 @@
 @btnInverseBackground:              @gray;
 @btnInverseBackgroundHighlight:     darken(@gray, 10%);
 
-@iconContainerBackground:			@white;
+@iconContainerBackground:			      @white;
 @iconContainerBackgroundHighlight:	lighten(@white, 5%);
-@iconContainerBorder:				solid 1px rgba(0,0,0, 0.05);
-@iconContainerShadow:				0 0 14px 2px rgba(0,0,0, 0.05);
-
+@iconContainerBorder:				        1px solid rgba(0,0,0, 0.05);
+@iconContainerShadow:				        0 0 14px 2px rgba(0,0,0, 0.05);
 
 
 // Forms