Updates to account and admin views

src/app/features/account/partials/account.html

@@ -6,87 +6,71 @@
 	</ul>
 </topnav>
 
-<div class="admin-page">
-	<h2>
-		Account Info
-	</h2>
+<div class="page-container">
+	<div class="page">
 
-	<div class="gf-box">
-		<div class="gf-box-body">
-			<div class="editor-row">
-				<div class="section">
-			<form name="accountForm">
-				<div>
-					<div class="tight-form">
-						<ul class="tight-form-list">
-							<li class="tight-form-item" style="width: 120px">
-								<strong>Account name</strong>
-							</li>
-							<li>
-								<input type="text" required ng-model="account.name" class="input-xxlarge tight-form-input last" >
-							</li>
-						</ul>
-						<div class="clearfix"></div>
-					</div>
+		<h2>Account Info</h2>
+
+		<form name="accountForm">
+			<div>
+				<div class="tight-form">
+					<ul class="tight-form-list">
+						<li class="tight-form-item" style="width: 100px">
+							<strong>Account name</strong>
+						</li>
+						<li>
+							<input type="text" required ng-model="account.name" class="input-xxlarge tight-form-input last" >
+						</li>
+					</ul>
+					<div class="clearfix"></div>
 				</div>
-				<br>
-				<button type="submit" class="pull-right btn btn-success" ng-click="update()">Update</button>
-			</form>
-			</div>
 			</div>
-		</div>
-	</div>
+			<br>
+			<button type="submit" class="pull-right btn btn-success" ng-click="update()">Update</button>
+		</form>
 
-	<h2>
-		API Keys
-	</h2>
+		<h2>
+			API Keys
+		</h2>
 
-	<div class="gf-box" ng-controller="ApiKeysCtrl">
-		<div class="gf-box-body">
-			<div class="editor-row">
-				<div class="section">
-					<form name="addTokenrForm" class="form-inline tight-form">
-						<ul class="tight-form-list">
-							<li class="tight-form-item">
-								Add a key
-							</li>
-							<li>
-								<input type="text" class="input-xlarge tight-form-input" ng-model='token.name' placeholder="Name"></input>
-							</li>
-							<li class="tight-form-item">
-								Role
-							</li>
-							<li>
-								<select class="input-small tight-form-input" ng-model="token.role" ng-options="r for r in roleTypes"></select>
-							</li>
-							<li>
-								<button class="btn btn-success tight-form-btn" ng-click="addToken()">Add</button>
-							</li>
-						</ul>
-						<div class="clearfix"></div>
-					</form>
-				</div>
-			</div>
+		<div ng-controller="ApiKeysCtrl">
+			<form name="addTokenrForm" class="form-inline tight-form">
+				<ul class="tight-form-list">
+					<li class="tight-form-item" style="width: 100px">
+						Add a key
+					</li>
+					<li>
+						<input type="text" class="input-xlarge tight-form-input" ng-model='token.name' placeholder="Name"></input>
+					</li>
+					<li class="tight-form-item">
+						Role
+					</li>
+					<li>
+						<select class="input-small tight-form-input" ng-model="token.role" ng-options="r for r in roleTypes"></select>
+					</li>
+					<li style="float: right">
+						<button class="btn btn-success tight-form-btn" ng-click="addToken()">Add</button>
+					</li>
+					<div class="clearfix"></div>
+				</ul>
+			</form>
+		<br>
 
-			<div class="editor-row">
-				<div class="section">
-					<table class="grafana-options-table">
-						<tr ng-repeat="t in tokens">
-							<td>{{t.name}}</td>
-							<td>{{t.role}}</td>
-							<td>{{t.key}}</td>
-							<td style="width: 1%">
-								<a ng-click="removeToken(t.id)" class="btn btn-danger btn-mini">
-									<i class="fa fa-remove"></i>
-								</a>
-							</td>
-						</tr>
-					</table>
-				</div>
-			</div>
-		</div>
+		<table class="grafana-options-table">
+			<tr ng-repeat="t in tokens">
+				<td>{{t.name}}</td>
+				<td>{{t.role}}</td>
+				<td>{{t.key}}</td>
+				<td style="width: 1%">
+					<a ng-click="removeToken(t.id)" class="btn btn-danger btn-mini">
+						<i class="fa fa-remove"></i>
+					</a>
+				</td>
+			</tr>
+		</table>
 	</div>
 
+	</div>
 </div>
 
 

src/app/features/account/partials/import.html

@@ -6,42 +6,31 @@
 	</ul>
 </topnav>
 
-<div class="gf-box" style="min-height: 500px">
+<div class="page-container">
+	<div class="page">
+		<h2>Import dashboards</h2>
 
-	<div class="gf-box-header">
-		<div class="gf-box-title">
-			<i class="fa fa-th-large"></i>
-			Import Dashboards
-		</div>
-	</div>
-
-	<div class="gf-box-body">
-
-		<div class="editor-row">
-			<div class="section">
-				<div class="tight-form">
-					<ul class="tight-form-list">
-						<li class="tight-form-item" style="width: 150px">
-							<strong>Dashboard source</strong>
-						</li>
-						<li>
-							<select type="text" ng-model="sourceName" class="input-medium tight-form-input" ng-options="f for f in datasources">
-							</select>
-						</li>
-						<li class="tight-form-item">
-							<strong>Destination</strong>
-						</li>
-						<li>
-							<select type="text" ng-model="destName" class="input-medium tight-form-input" ng-options="f for f in datasources">
-							</select>
-						</li>
-						<li>
-							<button class="btn btn-success tight-form-btn" ng-click="startImport()">Import</button>
-						</li>
-					</ul>
-					<div class="clearfix"></div>
-				</div>
-			</div>
+		<div class="tight-form">
+			<ul class="tight-form-list">
+				<li class="tight-form-item" style="width: 150px">
+					<strong>Dashboard source</strong>
+				</li>
+				<li>
+					<select type="text" ng-model="sourceName" class="input-medium tight-form-input" ng-options="f for f in datasources">
+					</select>
+				</li>
+				<li class="tight-form-item">
+					<strong>Destination</strong>
+				</li>
+				<li>
+					<select type="text" ng-model="destName" class="input-medium tight-form-input" ng-options="f for f in datasources">
+					</select>
+				</li>
+				<li>
+					<button class="btn btn-success tight-form-btn" ng-click="startImport()">Import</button>
+				</li>
+				<div class="clearfix"></div>
+			</ul>
 		</div>
 
 		<div class="editor-row" ng-if="importing">

src/app/features/account/partials/users.html

@@ -6,55 +6,51 @@
 	</ul>
 </topnav>
 
-
-<div class="gf-box" style="min-height: 500px">
-
-	<div class="gf-box-body">
-
-		<div class="editor-row">
-			<div class="section">
-				<form name="form">
-					<div class="tight-form">
-						<ul class="tight-form-list">
-							<li class="tight-form-item" style="width: 160px">
-								<strong>Username or Email</strong>
-							</li>
-							<li>
-								<input type="text" ng-model="user.loginOrEmail" required class="input-xlarge tight-form-input" placeholder="user@email.com or username">
-							</li>
-							<li class="tight-form-item">
-								role
-							</li>
-							<li>
-								<select type="text" ng-model="user.role" class="input-small tight-form-input" ng-options="f for f in ['Viewer', 'Editor', 'Admin']">
-								</select>
-							</li>
-							<li>
-								<button class="btn btn-success tight-form-btn" ng-click="addUser()">Add</button>
-							</li>
-						</ul>
-						<div class="clearfix"></div>
-					</div>
-				</form>
+<div class="page-container">
+	<div class="page">
+
+		<h2>Account users</h2>
+
+
+		<form name="form">
+			<div class="tight-form">
+				<ul class="tight-form-list">
+					<li class="tight-form-item" style="width: 160px">
+						<strong>Username or Email</strong>
+					</li>
+					<li>
+						<input type="text" ng-model="user.loginOrEmail" required class="input-xlarge tight-form-input" placeholder="user@email.com or username">
+					</li>
+					<li class="tight-form-item">
+						role
+					</li>
+					<li>
+						<select type="text" ng-model="user.role" class="input-small tight-form-input" ng-options="f for f in ['Viewer', 'Editor', 'Admin']">
+						</select>
+					</li>
+					<li>
+						<button class="btn btn-success tight-form-btn" ng-click="addUser()">Add</button>
+					</li>
+					<div class="clearfix"></div>
+				</ul>
 			</div>
-		</div>
-
-
-		<div class="editor-row row">
-			<table class="grafana-options-table span5">
-				<tr ng-repeat="user in users">
-					<td>{{user.email}}</td>
-					<td>
-						{{user.role}}
-					</td>
-					<td style="width: 1%">
-						<a ng-click="removeUser(user)" class="btn btn-danger btn-mini">
-							<i class="fa fa-remove"></i>
-						</a>
-					</td>
-				</tr>
-			</table>
-		</div>
+		</form>
+
+		<br>
+
+		<table class="grafana-options-table">
+			<tr ng-repeat="user in users">
+				<td>{{user.email}}</td>
+				<td>
+					{{user.role}}
+				</td>
+				<td style="width: 1%">
+					<a ng-click="removeUser(user)" class="btn btn-danger btn-mini">
+						<i class="fa fa-remove"></i>
+					</a>
+				</td>
+			</tr>
+		</table>
 
 	</div>
 </div>

src/app/features/admin/partials/users.html

@@ -5,42 +5,36 @@
 	</ul>
 </topnav>
 
-<div class="admin-page">
-	<h2>Users</h2>
-	<div class="gf-box" style="min-height: 500px">
+<div class="page-container">
+	<div class="page">
+		<h2>Users</h2>
 
-		<div class="gf-box-body">
-			<div class="editor-row row">
-				<div class="section span6">
-					<table class="grafana-options-table">
-						<tr>
-							<th style="text-align:left">Id</th>
-							<th>Login</th>
-							<th>Email</th>
-							<th>Name</th>
-							<th>Admin</th>
-							<th></th>
-						</tr>
-						<tr ng-repeat="user in users">
-							<td>{{user.id}}</td>
-							<td>{{user.login}}</td>
-							<td>{{user.email}}</td>
-							<td>{{user.name}}</td>
-							<td>{{user.isAdmin}}</td>
-							<td style="width: 1%">
-								<a ng-click="edit(variable)" class="btn btn-success btn-small">
-									<i class="fa fa-edit"></i>
-									Edit
-								</a>
-								&nbsp;&nbsp;
-								<a ng-click="delete(variable)" class="btn btn-danger btn-small">
-									<i class="fa fa-remove"></i>
-								</a>
-							</td>
-						</tr>
-					</table>
-				</div>
-			</div>
-		</div>
+		<table class="grafana-options-table">
+			<tr>
+				<th style="text-align:left">Id</th>
+				<th>Login</th>
+				<th>Email</th>
+				<th>Name</th>
+				<th>Admin</th>
+				<th></th>
+			</tr>
+			<tr ng-repeat="user in users">
+				<td>{{user.id}}</td>
+				<td>{{user.login}}</td>
+				<td>{{user.email}}</td>
+				<td>{{user.name}}</td>
+				<td>{{user.isAdmin}}</td>
+				<td style="width: 1%">
+					<a ng-click="edit(variable)" class="btn btn-success btn-small">
+						<i class="fa fa-edit"></i>
+						Edit
+					</a>
+					&nbsp;&nbsp;
+					<a ng-click="delete(variable)" class="btn btn-danger btn-small">
+						<i class="fa fa-remove"></i>
+					</a>
+				</td>
+			</tr>
+		</table>
 	</div>
 </div>

src/css/less/tables_lists.less

@@ -1,6 +1,11 @@
 .grafana-options-table {
   width: 100%;
 
+  th {
+    padding: 5px 10px;
+    border-bottom: 4px solid @grafanaPanelBackground;
+  }
+
   tr td {
     background-color: @grafanaListBackground;
     padding: 5px 10px;