Updated to profile page design

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

@@ -5,102 +5,91 @@
 				show-menu-btn="!grafana.sidemenu">
 </topnav>
 
-<div class="admin-page">
-	<h2>Personal information</h2>
+<div class="page-container">
+	<div class="page">
 
-	<div class="gf-box">
-		<div class="gf-box-body editor-row">
-			<div class="section">
-				<form name="userForm">
-					<div>
-						<div class="tight-form">
-							<ul class="tight-form-list">
-								<li class="tight-form-item" style="width: 80px">
-									<strong>Name</strong>
-								</li>
-								<li>
-									<input type="text" required ng-model="user.name" class="input-xxlarge tight-form-input last" >
-								</li>
-							</ul>
-							<div class="clearfix"></div>
-						</div>
-						<div class="tight-form" style="margin-top: 10px">
-							<ul class="tight-form-list">
-								<li class="tight-form-item" style="width: 80px">
-									<strong>Email</strong>
-								</li>
-								<li>
-									<input type="text" required ng-model="user.email" class="input-xxlarge tight-form-input last" >
-								</li>
-							</ul>
-							<div class="clearfix"></div>
-						</div>
-						<div class="tight-form" style="margin-top: 10px">
-							<ul class="tight-form-list">
-								<li class="tight-form-item" style="width: 80px">
-									<strong>Username</strong>
-								</li>
-								<li>
-									<input type="text" required ng-model="user.login" class="input-xxlarge tight-form-input last" >
-								</li>
-							</ul>
-							<div class="clearfix"></div>
-						</div>
-					</div>
+		<h2>Personal information</h2>
 
-					<br>
-					<button type="submit" class="pull-right btn btn-success" ng-click="update()">Update</button>
-				</form>
+		<form name="userForm">
+			<div>
+				<div class="tight-form">
+					<ul class="tight-form-list">
+						<li class="tight-form-item" style="width: 100px">
+							<strong>Name</strong>
+						</li>
+						<li>
+							<input type="text" required ng-model="user.name" class="input-xxlarge tight-form-input last" >
+						</li>
+					</ul>
+					<div class="clearfix"></div>
+				</div>
+				<div class="tight-form" style="margin-top: 5px">
+					<ul class="tight-form-list">
+						<li class="tight-form-item" style="width: 100px">
+							<strong>Email</strong>
+						</li>
+						<li>
+							<input type="text" required ng-model="user.email" class="input-xxlarge tight-form-input last" >
+						</li>
+					</ul>
+					<div class="clearfix"></div>
+				</div>
+				<div class="tight-form" style="margin-top: 5px">
+					<ul class="tight-form-list">
+						<li class="tight-form-item" style="width: 100px">
+							<strong>Username</strong>
+						</li>
+						<li>
+							<input type="text" required ng-model="user.login" class="input-xxlarge tight-form-input last" >
+						</li>
+					</ul>
+					<div class="clearfix"></div>
+				</div>
 			</div>
-		</div>
-	</div>
 
-	<h2>Your accounts</h2>
+			<br>
+			<button type="submit" class="pull-right btn btn-success" ng-click="update()">Update</button>
+		</form>
 
-	<div class="gf-box">
-		<div class="gf-box-body">
-			<table class="grafana-options-table">
-				<tr ng-repeat="ac in accounts">
-					<td style="width: 98%">Name: {{ac.name}}</td>
-					<td>Role: {{ac.role}}</td>
-					<td>
-						<span class="btn btn-primary" ng-show="ac.isUsing">
-							Current
-						</span>
-						<a ng-click="setUsingAccount(ac)" class="btn btn-inverse" ng-show="!ac.isUsing">
-							Select
-						</a>
-					</td>
-				</tr>
-			</table>
-		</div>
-	</div>
+		<h2>Your accounts</h2>
+
+		<table class="grafana-options-table">
+			<tr ng-repeat="ac in accounts">
+				<td style="width: 98%">Name: {{ac.name}}</td>
+				<td>Role: {{ac.role}}</td>
+				<td>
+					<span class="btn btn-primary" ng-show="ac.isUsing">
+						Current
+					</span>
+					<a ng-click="setUsingAccount(ac)" class="btn btn-inverse" ng-show="!ac.isUsing">
+						Select
+					</a>
+				</td>
+			</tr>
+		</table>
 
-	<h2>Add account</h2>
-	<div class="gf-box">
-		<div class="gf-box-body editor-row">
-			<div class="section">
-				<form name="form">
-					<div>
-						<div class="tight-form">
-							<ul class="tight-form-list">
-								<li class="tight-form-item">
-									<strong>Account name</strong>
-								</li>
-								<li>
-									<input type="text" ng-model="newAccount.name" required class="input-xxlarge tight-form-input last" placeholder="account name">
-								</li>
-								<li>
-								</li>
-							</ul>
-							<div class="clearfix"></div>
-						</div>
-					</div>
-					<br>
-					<button class="btn btn-success pull-right" ng-click="createAccount()">Create</button>
+		<h2 style="margin-top: 30px;">Add account</h2>
+
+		<form name="form">
+			<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" ng-model="newAccount.name" required class="input-xxlarge tight-form-input last" placeholder="account name">
+						</li>
+						<li>
+						</li>
+					</ul>
+					<div class="clearfix"></div>
 				</div>
 			</div>
+			<br>
+			<button class="btn btn-success pull-right" ng-click="createAccount()">Create</button>
 		</form>
+
 	</div>
 </div>
 

src/css/less/gfbox.less

@@ -59,6 +59,24 @@
   }
 }
 
+.page-container {
+  margin: 15px;
+  background: @grafanaPanelBackground;
+  position: relative;
+  border: 1px solid @grayDark;
+  padding: 20px 20px 60px 49px;
+
+  h2 {
+    color: @textColor;
+    font-weight: normal;
+    font-size: 22px;
+  }
+}
+
+.page {
+  max-width: 653px;
+}
+
 .admin-page {
   max-width: 800px;
   margin-left: 10px;