created secondary button style, added a couple of variables, played with the…

created secondary button style, added a couple of variables, played with the plugins page to get the underline in place. Worth a look, but check that I was building everything properly :)

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

@@ -2,14 +2,14 @@
 </navbar>
 </navbar>
 
 
 <div class="page-container">
 <div class="page-container">
-  <div class="page-wide">
+  <div class="page-header">
     <h1>Plugins</h1>
     <h1>Plugins</h1>
+    </div>
+	<div ng-if="!ctrl.apps">
+		<em>No apps defined</em>
+	</div>
 
 
-		<div ng-if="!ctrl.apps">
-			<em>No apps defined</em>
-		</div>
-
-		<ul class="filter-list">
+	<ul class="filter-list">
       <li ng-repeat="app in ctrl.apps">
       <li ng-repeat="app in ctrl.apps">
         <ul class="filter-list-card">
         <ul class="filter-list-card">
 					<li class="filter-list-card-image">
 					<li class="filter-list-card-image">
@@ -43,6 +43,5 @@
           </li>
           </li>
         </ul>
         </ul>
       </li>
       </li>
-		</ul>
-	</div>
+	</ul>
 </div>
 </div>

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

-<navbar icon="fa fa-fw fa-cubes" title="{{ctrl.appModel.name}}" title-url="apps/{{ctrl.appId}}/edit">
+<navbar icon="icon-gf icon-gf-apps" title="{{ctrl.appModel.name}}" title-url="apps/{{ctrl.appId}}/edit">
 </navbar>
 </navbar>
 
 
 <div class="page-container">
 <div class="page-container">
-	<div class="page-wide">
+	<div class="page-header">
 		<h1>{{ctrl.page.name}}</h1>
 		<h1>{{ctrl.page.name}}</h1>
+	</div>
 
 
-		<div ng-if="ctrl.page">
-			<plugin-component type="app-page">
-			</plugin-component>
-		</div>
-
+	<div ng-if="ctrl.page">
+		<plugin-component type="app-page">
+		</plugin-component>
 	</div>
 	</div>
 </div>
 </div>

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

@@ -33,7 +33,7 @@
 				<tr ng-repeat="ds in ctrl.datasources">
 				<tr ng-repeat="ds in ctrl.datasources">
 					<td>
 					<td>
 						<a href="datasources/edit/{{ds.id}}">
 						<a href="datasources/edit/{{ds.id}}">
-							<i class="fa fa-database"></i> &nbsp; {{ds.name}}
+							<i class="icon-gf inline-icon-gf icon-gf-datasources"></i> &nbsp; {{ds.name}}
 						</a>
 						</a>
 					</td>
 					</td>
 					<td>
 					<td>
@@ -41,7 +41,7 @@
 					</td>
 					</td>
 					<td class="text-center">
 					<td class="text-center">
 						<span ng-if="ds.isDefault">
 						<span ng-if="ds.isDefault">
-							<span class="label label-info">default</span>
+							<span class="btn btn-secondary btn-mini">default</span>
 						</span>
 						</span>
 					</td>
 					</td>
 					<td class="text-right">
 					<td class="text-right">

public/sass/_variables.dark.scss

@@ -119,6 +119,9 @@ $table-border:                $dark-3; // table and cell border
 $btn-primary-bg:              $brand-primary;
 $btn-primary-bg:              $brand-primary;
 $btn-primary-bg-hl:           lighten($brand-primary, 8%);
 $btn-primary-bg-hl:           lighten($brand-primary, 8%);
 
 
+$btn-secondary-bg:            $blue-dark;
+$btn-secondary-bg-hl:         lighten($blue-dark, 8%);
+
 $btn-info-bg:                 lighten($purple, 3%);
 $btn-info-bg:                 lighten($purple, 3%);
 $btn-info-bg-hl:     		  darken($purple, 3%);
 $btn-info-bg-hl:     		  darken($purple, 3%);
 
 

public/sass/_variables.light.scss

@@ -127,6 +127,9 @@ $scrollbarBorder:       $gray-4;
 $btn-primary-bg:        $brand-primary;
 $btn-primary-bg:        $brand-primary;
 $btn-primary-bg-hl:     lighten($brand-primary, 8%);
 $btn-primary-bg-hl:     lighten($brand-primary, 8%);
 
 
+$btn-secondary-bg:      $blue-dark;
+$btn-secondary-bg-hl:   lighten($blue-dark, 8%);
+
 $btn-info-bg:           lighten($purple, 3%);
 $btn-info-bg:           lighten($purple, 3%);
 $btn-info-bg-hl:        darken($purple, 3%);
 $btn-info-bg-hl:        darken($purple, 3%);
 
 

public/sass/base/_fonts.scss

@@ -24,6 +24,14 @@
     -moz-osx-font-smoothing: grayscale;
     -moz-osx-font-smoothing: grayscale;
 }
 }
 
 
+.inline-icon-gf {
+    vertical-align: middle;
+}
+
+
+
+
+
 .icon-gf-raintank_wordmark:before {
 .icon-gf-raintank_wordmark:before {
     content: "\e600";
     content: "\e600";
 }
 }

public/sass/components/_buttons.scss

@@ -73,6 +73,9 @@
 .btn-primary {
 .btn-primary {
   @include buttonBackground($btn-primary-bg, $btn-primary-bg-hl);
   @include buttonBackground($btn-primary-bg, $btn-primary-bg-hl);
 }
 }
+.btn-secondary {
+  @include buttonBackground($btn-secondary-bg, $btn-secondary-bg-hl);
+}
 // Warning appears are orange
 // Warning appears are orange
 .btn-warning {
 .btn-warning {
   @include buttonBackground($btn-warning-bg, $btn-warning-bg-hl);
   @include buttonBackground($btn-warning-bg, $btn-warning-bg-hl);

public/sass/components/_sidemenu.scss

@@ -192,7 +192,7 @@
   background-color: $gray-2;
   background-color: $gray-2;
   border-radius: 50%;
   border-radius: 50%;
   .no-avatar {
   .no-avatar {
-    color: $brand-primary;
+    color: $text-color;
     text-shadow: 0 1px 0 $dark-1;
     text-shadow: 0 1px 0 $dark-1;
     padding-left: 17px;
     padding-left: 17px;
     position: relative;
     position: relative;