style changes to forms, icons updates and new buttons

public/app/core/components/sidemenu/sidemenu.html

@@ -28,7 +28,7 @@
 
 	<li class="sidemenu-system-section" ng-if="ctrl.systemSection">
 		<div class="sidemenu-system-section-inner">
-			<i class="fa fa-fw fa-cubes"></i>
+			<i class="icon-gf icon-gf-apps"></i>
 			<div class="sidemenu-section-text-wrapper">
 				<div class="sidemenu-section-heading">Grafana Admin</div>
 				<div class="sidemenu-section-tagline">v {{ctrl.grafanaVersion}}</div>

public/app/features/apps/partials/edit.html

@@ -1,4 +1,4 @@
-<navbar title="Apps" title-url="apps" icon="fa fa-fw fa-cubes" subnav="true">
+<navbar title="Apps" title-url="apps" icon="icon-gf icon-gf-apps" subnav="true">
 	<ul class="nav">
 		<li class="active" ><a href="apps/edit/{{ctrl.current.type}}">{{ctrl.appModel.name}}</a></li>
 	</ul>

public/app/features/apps/partials/list.html

@@ -1,4 +1,4 @@
-<navbar title="Apps" icon="fa fa-fw fa-cubes">
+<navbar title="Apps" icon="icon-gf icon-gf-apps">
 </navbar>
 
 <div class="page-container">

public/app/features/dashboard/dashnav/dashnav.html

@@ -2,7 +2,7 @@
 
 <div class="top-nav-btn dashnav-dashboards-btn" ng-if="!dashboardMeta.isSnapshot">
 	<a class="pointer" ng-click="openSearch()">
-		<i class="fa fa-th-large"></i>
+		<i class="icon-gf icon-gf-dashboard"></i>
 		<span class="dashboard-title">{{dashboard.title}}</span>
 		<i class="fa fa-caret-down"></i>
 	</a>

public/app/features/datasources/partials/edit.html

@@ -1,14 +1,22 @@
-<navbar title="Data sources" title-url="datasources" icon="fa fa-fw fa-database" subnav="true">
-	<ul class="nav">
+<navbar> 
+<div class="top-nav-btn dashnav-dashboards-btn" >
+	<a class="pointer" ng-click="openSearch()">
+		<i class="icon-gf icon-gf-datasources"></i>
+		<span class="dashboard-title">Data Sources</span>
+		<i class="fa fa-caret-down"></i>
+	</a>
+</div>
+<!-- 	<ul class="nav">
 		<li ng-class="{active: isNew}" ng-show="isNew"><a href="datasources/new">Add new</a></li>
 		<li class="active" ng-show="!isNew"><a href="datasources/edit/{{current.name}}">{{current.name}}</a></li>
-	</ul>
+	</ul> -->
 </navbar>
 
 <div class="page-container">
 	<div class="page">
 		<h2 ng-show="isNew">Add data source</h2>
 		<h2 ng-show="!isNew">Edit data source</h2>
+		<p class="small" ng-show="isNew">This text will only appear on Add Data Source</p>
 
 		<form name="editForm">
 			<div class="norm-form">
@@ -18,13 +26,13 @@
 					</li>
 					<li>
 						<li>
-							<input type="text" class="input-xlarge norm-form-input" ng-model="current.name" placeholder="my data source name" required>
+							<input type="text" class="input-xlarge norm-form-input" ng-model="current.name" placeholder="My data source name" required>
 						</li>
 					</li>
-					<li class="norm-form-item">
-						Default&nbsp;
+					<li class="norm-form-item trans">
 						<input class="cr1" id="current.isDefault" type="checkbox" ng-model="current.isDefault" ng-checked="current.isDefault">
 						<label for="current.isDefault" class="cr1"></label>
+						Default
 					</li>
 				</ul>
 				<div class="clearfix"></div>
@@ -35,7 +43,7 @@
 						Type
 					</li>
 					<li>
-						<select class="input-xlarge norm-form-input" ng-model="current.type" ng-options="k as v.name for (k, v) in types" ng-change="typeChanged()"></select>
+						<select class="input-xlarge norm-form-input norm-form-auto" ng-model="current.type" ng-options="k as v.name for (k, v) in types" ng-change="typeChanged()"></select>
 					</li>
 				</ul>
 				<div class="clearfix"></div>
@@ -55,13 +63,13 @@
 				</div>
 			</div>
 
-			<div class="pull-right" style="margin-top: 35px">
-				<button type="submit" class="btn btn-success" ng-show="isNew" ng-click="saveChanges()">Add</button>
-				<button type="submit" class="btn btn-success" ng-show="!isNew" ng-click="saveChanges()">Save</button>
-				<button type="submit" class="btn btn-inverse" ng-show="!isNew" ng-click="saveChanges(true)">
+			<div class="" style="margin-top: 35px">
+				<button type="submit" class="btn btn-large btn-success" ng-show="isNew" ng-click="saveChanges()">Add</button>
+				<button type="submit" class="btn btn-large btn-success" ng-show="!isNew" ng-click="saveChanges()">Save</button>
+				<button type="submit" class="btn btn-large btn-inverse" ng-show="!isNew" ng-click="saveChanges(true)">
 					Test Connection
 				</button>
-				<a class="btn btn-inverse" href="datasources">Cancel</a>
+				<a class="btnText" href="datasources">Cancel</a>
 			</div>
 			<br>
 		</form>

public/app/features/datasources/partials/http_settings.html

@@ -9,7 +9,12 @@
 			<li>
 				<input type="text" class="norm-form-input input-xlarge" ng-model='current.url' placeholder="http://my.server.com:8080" ng-pattern="/^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?$/" required></input>
 			</li>
-			<li class="norm-form-item">
+		</ul>
+		<div class="clearfix"></div>
+	</div>
+	<div class="norm-form">
+		<ul class="norm-form-list">
+			<li class="norm-form-item" style="width: 80px">
 				Access <tip>Direct = url is used directly from browser, Proxy = Grafana backend will proxy the request</tip>
 			</li>
 			<li>
@@ -23,31 +28,33 @@
 			<li class="norm-form-item" style="width: 80px">
 				Http Auth
 			</li>
-			<li class="norm-form-item">
+			<li class="norm-form-item trans">
 				<editor-checkbox text="Basic Auth" model="current.basicAuth"></editor-checkbox>
 			</li>
-			<li class="norm-form-item">
-				<editor-checkbox text="With Credentials" model="current.withCredentials"></editor-checkbox>
+			<li class="norm-form-item trans">
+				<editor-checkbox text="With Credentials" model="current.withCredentials"></editor-checkbox><tip>Tip for with credentials</tip>
 			</li>
 		</ul>
 		<div class="clearfix"></div>
 	</div>
 	<div class="norm-form" ng-if="current.basicAuth">
 		<ul class="norm-form-list">
-			<li class="norm-form-item" style="width: 80px">
-				<i class="fa fa-remove invisible"></i>
-			</li>
-			<li class="norm-form-item">
+			<li class="norm-form-item small" style="width: 80px">
 				User
 			</li>
 			<li ng-if="current.basicAuth">
-				<input type="text" class="norm-form-input input-medium" style="width: 136px" ng-model='current.basicAuthUser' placeholder="user" required></input>
+				<input type="text" class="input-xlarge norm-form-input" ng-model='current.basicAuthUser' placeholder="user" required></input>
 			</li>
-			<li class="norm-form-item" style="width: 66px" ng-if="current.basicAuth">
+		</ul>
+	<div class="clearfix"></div>
+	</div>
+	<div class="norm-form" ng-if="current.basicAuth">
+		<ul class="norm-form-list">
+			<li class="norm-form-item small" style="width: 80px" ng-if="current.basicAuth">
 				Password
 			</li>
 			<li ng-if="current.basicAuth">
-				<input type="password" class="norm-form-input input-medium" ng-model='current.basicAuthPassword' placeholder="password" required></input>
+				<input type="password" class="input-xlarge norm-form-input" ng-model='current.basicAuthPassword' placeholder="password" required></input>
 			</li>
 		</ul>
 		<div class="clearfix"></div>

public/app/features/datasources/partials/list.html

@@ -1,15 +1,23 @@
-<navbar title="Data sources" icon="fa fa-fw fa-database">
+<navbar> 
+<div class="top-nav-btn dashnav-dashboards-btn" >
+	<a class="pointer" ng-click="openSearch()">
+		<i class="icon-gf icon-gf-datasources"></i>
+		<span class="dashboard-title">Data Sources</span>
+		<i class="fa fa-caret-down"></i>
+	</a>
+</div>
 </navbar>
 
 <div class="page-container">
 	<div class="page-wide">
-
-		<a class="btn btn-inverse pull-right" href="datasources/new">
+	<div class="page-header-align">
+		<h1>Data sources</h1>
+		<a class="btn btn-success" href="datasources/new">
 			<i class="fa fa-plus"></i>
 			Add data source
 		</a>
 
-		<h1>Data sources</h1>
+	</div>
 		<br>
 
 		<div ng-if="datasources.length === 0">

public/less/bootswatch.dark.less

@@ -355,11 +355,11 @@ div.subnav {
 // BUTTONS
 // -----------------------------------------------------
 .btn {
-	padding: 5px 12px;
+	padding: 7px 12px 5px 12px;
 	background-image: none;
-	.box-shadow(0px 0px 8px @bodyBackground);
+	// .box-shadow(0px 0px 8px @bodyBackground);
 	border: none;
-	.border-radius(3px);
+	.border-radius(0px);
 	text-shadow: none;
 
 	&.disabled {
@@ -369,10 +369,11 @@ div.subnav {
 
 .btn-inverse {
   border: 1px solid #444;
+  box-shadow: none;
 }
 
 .btn-large {
-  padding: 14px 23px;
+  padding: 6px 20px;
 }
 
 .btn-small {

public/less/gfbox.less

@@ -71,13 +71,24 @@
 .page-container {
   background-color: @pageBackground;
   position: relative;
-  padding: 20px 20px 60px 81px;
+  padding: 25px 60px 60px 88px;
 }
 
+
 .page {
   max-width: 653px;
 }
 
+.page-header-align {
+  display: flex; 
+  justify-content: space-between; 
+  align-items: center;
+  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
+  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
+  display: -ms-flexbox;      /* TWEENER - IE 10 */
+  display: -webkit-flex;     /* NEW - Chrome */
+  flex-wrap: wrap-reverse;
+}
 .page-wide {
   max-width: 1000px;
 }

public/less/grafana.less

@@ -28,6 +28,8 @@
 @import "filter-list.less";
 @import "filter-table.less";
 @import "simple-box.less";
+@import "dropdown.less";
+@import url(https://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic|PT+Sans+Caption:400,700);
 
 .row-control-inner {
   padding:0px;

public/less/navbar.less

@@ -34,6 +34,7 @@
     position: absolute;
     right: 8px;
     top: 23px;
+    margin-right: 2px;
   }
 
   a {
@@ -90,8 +91,8 @@
 
   .icon-gf {
     position: relative;
-    top: 5px;
-    font-size: 27px;
+    top: 2px;
+    font-size: 20px;
     line-height: 8px;
   }
 }

public/less/normform.less

@@ -58,6 +58,9 @@
     float: left;
     background: @labelBackground;
   }
+  & .trans {
+    background: transparent;
+  }
 }
 
 .norm-form-flex-wrapper {
@@ -145,7 +148,7 @@ input[type=text].norm-form-clear-input {
 [type=text],
 [type=email],
 [type=number],
-[type=password] {
+[type=password], {
   &.norm-form-input {
     border: none;
     border-right: 3px solid @pageBackground;
@@ -154,6 +157,7 @@ input[type=text].norm-form-clear-input {
     padding: 8px 6px;
     height: 100%;
     box-sizing: border-box;
+    font-size: 16px;
     &.last {
       border-right: none;
     }
@@ -176,7 +180,8 @@ select.norm-form-input {
   margin: 0px;
   border-radius: 0;
   height: 36px;
-  padding: 9px 3px;
+  padding: 9px 3px;    
+  font-size: 16px;
   &.last {
     border-right: none;
   }

public/less/sidemenu.less

@@ -35,7 +35,7 @@
     padding-left: 210px;
   }
   .page-container {
-    margin-left: 210px;
+    margin-left: 190px;
     padding-left: 55px;
   }
   .top-nav-menu-btn {

public/less/type.less

@@ -63,6 +63,7 @@ h1, h2, h3, h4, h5, h6 {
   line-height: @baseLineHeight;
   color: @headingsColor;
   text-rendering: optimizelegibility; // Fix the character spacing for headings
+  font-style: @headingsFontStyle;
   small {
     font-weight: normal;
     line-height: 1;

public/less/variables.dark.less

@@ -47,13 +47,16 @@
 @grafanaTargetFuncBackground: #333;
 @grafanaTargetFuncHightlight: #444;
 
+@grafanaSelectBackground:	@grafanaTargetFuncBackground;
+
 @modalBackground: @black;
 @codeTagBackground: #444;
 
 // Scaffolding
 // -------------------------
-@bodyBackground:  rgb(20,20,20);
+// @bodyBackground:  rgb(20,20,20);
 @pageBackground:  @grayDarker;
+@bodyBackground:  @pageBackground;
 @textColor:       @grayLighter;
 
 // Links
@@ -65,18 +68,19 @@
 
 // Typography
 // -------------------------
-@sansFontFamily:        "Helvetica Neue", Helvetica, Arial, sans-serif;
+@sansFontFamily:        "PT Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
 @serifFontFamily:       Georgia, "Times New Roman", Times, serif;
 @monoFontFamily:        Menlo, Monaco, Consolas, "Courier New", monospace;
 
 @baseFontSize:          14px;
-@baseFontWeight:		    400;
+@baseFontWeight:		400;
 @baseFontFamily:        @sansFontFamily;
 @baseLineHeight:        20px;
 @altFontFamily:         @serifFontFamily;
 
 @headingsFontFamily:    inherit; // empty to use BS default, @baseFontFamily
-@headingsFontWeight:    normal;    // instead of browser default, bold
+@headingsFontWeight:    200;    // instead of browser default, bold
+@headingsFontStyle:    	italic; 
 @headingsColor:         darken(@white,11%); // empty to use BS default, @textColor
 @inputText:             @black;
 
@@ -98,7 +102,7 @@
 @borderRadiusSmall:     2px;
 
 // Lists
-@grafanaListBackground:  #262626;
+@grafanaListBackground:  @grayDark;
 @grafanaListAccent:      lighten(@grayDarker, 2%);
 @grafanaListBorderTop:      @grayDark;
 @grafanaListBorderBottom:   @black;
@@ -121,6 +125,7 @@
 // -------------------------
 @btnBackground:                     @grayDark;
 @btnBackgroundHighlight:            darken(@grayLight, 15%);
+@btnBackgroundShadow:            	darken(@grayLight, 15%);
 @btnBorder:                         #bbb;
 
 @btnPrimaryBackground:              @blueDark;
@@ -141,6 +146,8 @@
 @btnInverseBackground:              @grayDark;
 @btnInverseBackgroundHighlight:     lighten(@grayDark, 5%);
 
+@btnText:              				@gray;
+
 @iconContainerBackground:			      @black;
 @iconContainerBackgroundHighlight:	lighten(@black, 5%);
 @iconContainerBorder:				        1px solid transparent;

public/less/variables.light.less

@@ -60,13 +60,16 @@
 @grafanaTargetFuncBackground: darken(@grafanaTargetBackground, 5%);
 @grafanaTargetFuncHightlight: darken(@grafanaTargetBackground, 10%);
 
+@grafanaSelectBackground: @grafanaTargetFuncBackground;
+
 @modalBackground: @bodyBackground;
 @codeTagBackground: #ddd;
 
 // Scaffolding
 // -------------------------
-@bodyBackground:      #EFEFEF;
+// @bodyBackground:      #EFEFEF;
 @pageBackground:      @grayDarker;
+@bodyBackground:  	  @pageBackground;
 @textColor:           @gray;
 
 // Links
@@ -77,18 +80,19 @@
 
 // Typography
 // -------------------------
-@sansFontFamily:        "Helvetica Neue", Helvetica, Arial, sans-serif;
+@sansFontFamily:        "PT Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
 @serifFontFamily:       Georgia, "Times New Roman", Times, serif;
 @monoFontFamily:        Menlo, Monaco, Consolas, "Courier New", monospace;
 
 @baseFontSize:          14px;
-@baseFontWeight:		    400;
+@baseFontWeight:		400;
 @baseFontFamily:        @sansFontFamily;
 @baseLineHeight:        20px;
 @altFontFamily:         @serifFontFamily;
 
-@headingsFontFamily:    inherit; // empty to use BS default, @baseFontFamily
-@headingsFontWeight:    bold;    // instead of browser default, bold
+@headingsFontFamily:    inherit; // inherit. empty to use BS default, @baseFontFamily
+@headingsFontWeight:    normal;    // instead of browser default, bold
+@headingsFontStyle:    	italic; 
 @headingsColor:         @textColor; // empty to use BS default, @textColor
 
 
@@ -154,6 +158,8 @@
 @btnInverseBackground:              @white;
 @btnInverseBackgroundHighlight:     darken(@grayLight, 15%);
 
+@btnText:              				@grayLighter;
+
 @iconContainerBackground:			      @white;
 @iconContainerBackgroundHighlight:	lighten(@white, 5%);
 @iconContainerBorder:				        1px solid rgba(0,0,0, 0.05);

public/vendor/bootstrap/less/buttons.less

@@ -17,8 +17,8 @@
   text-align: center;
   vertical-align: middle;
   cursor: pointer;
-  .buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
-  border: 1px solid @btnBorder;
+  .buttonBackground(@btnBackground, @btnBackgroundHighlight,  @grayDark, 0 1px 1px rgba(255,255,255,.75));
+  border: none;
   *border: 0; // Remove the border to prevent IE7's black border on input:focus
   border-bottom-color: darken(@btnBorder, 10%);
   .border-radius(@baseBorderRadius);
@@ -226,3 +226,8 @@ input[type="submit"].btn {
   color: @grayDark;
   text-decoration: none;
 }
+
+.btnText {
+  color: @btnText;
+  margin: 0 10px;
+}

public/vendor/bootstrap/less/mixins.less

@@ -514,6 +514,7 @@
   // gradientBar will set the background to a pleasing blend of these, to support IE<=9
   .gradientBar(@startColor, @endColor, @textColor, @textShadow);
   *background-color: @endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */
+  box-shadow: inset 0 -3px rgba(0,0,0,0.3);
   .reset-filter();
 
   // in these cases the gradient won't cover the background, so we override