Updated to profile page design

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

@@ -5,17 +5,16 @@
 				show-menu-btn="!grafana.sidemenu">
 </topnav>
 
-<div class="admin-page">
+<div class="page-container">
+	<div class="page">
+
 		<h2>Personal information</h2>
 
-	<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">
+						<li class="tight-form-item" style="width: 100px">
 							<strong>Name</strong>
 						</li>
 						<li>
@@ -24,9 +23,9 @@
 					</ul>
 					<div class="clearfix"></div>
 				</div>
-						<div class="tight-form" style="margin-top: 10px">
+				<div class="tight-form" style="margin-top: 5px">
 					<ul class="tight-form-list">
-								<li class="tight-form-item" style="width: 80px">
+						<li class="tight-form-item" style="width: 100px">
 							<strong>Email</strong>
 						</li>
 						<li>
@@ -35,9 +34,9 @@
 					</ul>
 					<div class="clearfix"></div>
 				</div>
-						<div class="tight-form" style="margin-top: 10px">
+				<div class="tight-form" style="margin-top: 5px">
 					<ul class="tight-form-list">
-								<li class="tight-form-item" style="width: 80px">
+						<li class="tight-form-item" style="width: 100px">
 							<strong>Username</strong>
 						</li>
 						<li>
@@ -51,14 +50,9 @@
 			<br>
 			<button type="submit" class="pull-right btn btn-success" ng-click="update()">Update</button>
 		</form>
-			</div>
-		</div>
-	</div>
 
 		<h2>Your accounts</h2>
 
-	<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>
@@ -73,18 +67,14 @@
 				</td>
 			</tr>
 		</table>
-		</div>
-	</div>
 
-	<h2>Add account</h2>
-	<div class="gf-box">
-		<div class="gf-box-body editor-row">
-			<div class="section">
+		<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">
+						<li class="tight-form-item" style="width: 100px;">
 							<strong>Account name</strong>
 						</li>
 						<li>
@@ -98,9 +88,8 @@
 			</div>
 			<br>
 			<button class="btn btn-success pull-right" ng-click="createAccount()">Create</button>
-				</div>
-			</div>
 		</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;