Updated account and profile pages, very temporary solution, do not like it at all

pkg/models/account.go

@@ -12,6 +12,7 @@ var (
 
 type Account struct {
 	Id      int64
+	Version int
 	Name    string
 	Created time.Time
 	Updated time.Time

pkg/models/dashboards.go

@@ -17,6 +17,7 @@ type Dashboard struct {
 	Id        int64
 	Slug      string
 	AccountId int64
+	Version   int
 
 	Created time.Time
 	Updated time.Time

pkg/models/datasource.go

@@ -23,6 +23,7 @@ type DsAccess string
 
 type DataSource struct {
 	Id        int64
+	Version   int
 	AccountId int64
 
 	Name              string

pkg/models/user.go

@@ -12,6 +12,7 @@ var (
 
 type User struct {
 	Id       int64
+	Version  int
 	Email    string
 	Name     string
 	Login    string

pkg/services/sqlstore/migrations.go

@@ -33,11 +33,13 @@ func addUserMigrations(mg *Migrator) {
 	mg.AddMigration("create user table", new(AddTableMigration).
 		Name("user").WithColumns(
 		&Column{Name: "id", Type: DB_BigInt, IsPrimaryKey: true, IsAutoIncrement: true},
+		&Column{Name: "version", Type: DB_Int, Nullable: false},
 		&Column{Name: "login", Type: DB_NVarchar, Length: 255, Nullable: false},
 		&Column{Name: "email", Type: DB_NVarchar, Length: 255, Nullable: false},
 		&Column{Name: "name", Type: DB_NVarchar, Length: 255, Nullable: true},
 		&Column{Name: "password", Type: DB_NVarchar, Length: 255, Nullable: true},
 		&Column{Name: "salt", Type: DB_NVarchar, Length: 50, Nullable: true},
+		&Column{Name: "rands", Type: DB_NVarchar, Length: 50, Nullable: true},
 		&Column{Name: "company", Type: DB_NVarchar, Length: 255, Nullable: true},
 		&Column{Name: "account_id", Type: DB_BigInt, Nullable: false},
 		&Column{Name: "is_admin", Type: DB_Bool, Nullable: false},
@@ -50,9 +52,6 @@ func addUserMigrations(mg *Migrator) {
 		Table("user").Columns("login").Unique())
 	mg.AddMigration("add unique index user.email", new(AddIndexMigration).
 		Table("user").Columns("email").Unique())
-
-	mg.AddMigration("add column user.rands", new(AddColumnMigration).
-		Table("user").Column(&Column{Name: "rands", Type: DB_NVarchar, Length: 255, Nullable: true}))
 }
 
 func addStarMigrations(mg *Migrator) {
@@ -71,6 +70,7 @@ func addAccountMigrations(mg *Migrator) {
 	mg.AddMigration("create account table", new(AddTableMigration).
 		Name("account").WithColumns(
 		&Column{Name: "id", Type: DB_BigInt, IsPrimaryKey: true, IsAutoIncrement: true},
+		&Column{Name: "version", Type: DB_Int, Nullable: false},
 		&Column{Name: "name", Type: DB_NVarchar, Length: 255, Nullable: false},
 		&Column{Name: "created", Type: DB_DateTime, Nullable: false},
 		&Column{Name: "updated", Type: DB_DateTime, Nullable: false},
@@ -98,6 +98,7 @@ func addDashboardMigration(mg *Migrator) {
 	mg.AddMigration("create dashboard table", new(AddTableMigration).
 		Name("dashboard").WithColumns(
 		&Column{Name: "id", Type: DB_BigInt, IsPrimaryKey: true, IsAutoIncrement: true},
+		&Column{Name: "version", Type: DB_Int, Nullable: false},
 		&Column{Name: "slug", Type: DB_NVarchar, Length: 255, Nullable: false},
 		&Column{Name: "title", Type: DB_NVarchar, Length: 255, Nullable: false},
 		&Column{Name: "data", Type: DB_Text, Nullable: false},
@@ -129,6 +130,7 @@ func addDataSourceMigration(mg *Migrator) {
 		Name("data_source").WithColumns(
 		&Column{Name: "id", Type: DB_BigInt, IsPrimaryKey: true, IsAutoIncrement: true},
 		&Column{Name: "account_id", Type: DB_BigInt, Nullable: false},
+		&Column{Name: "version", Type: DB_Int, Nullable: false},
 		&Column{Name: "type", Type: DB_NVarchar, Length: 255, Nullable: false},
 		&Column{Name: "name", Type: DB_NVarchar, Length: 255, Nullable: false},
 		&Column{Name: "access", Type: DB_NVarchar, Length: 255, Nullable: false},

src/app/controllers/sidemenuCtrl.js

@@ -17,10 +17,9 @@ function (angular, _, $, config) {
 
     $scope.menu = [];
     $scope.menu.push({
-      text: "Dashbords",
+      text: "Dashboards",
       icon: "fa fa-th-large",
       href: $scope.getUrl("/"),
-      //startsWith: config.appSubUrl + '/dashboard/',
     });
 
     if ($scope.grafana.user.accountRole === 'Admin') {
@@ -34,16 +33,6 @@ function (angular, _, $, config) {
         requireRole: "Admin",
         icon: "fa fa-shield",
       });
-      $scope.menu.push({
-        text: "Users", href: $scope.getUrl("/account/users"),
-        requireRole: "Admin",
-        icon: "fa fa-users",
-      });
-      $scope.menu.push({
-        text: "API Keys", href: $scope.getUrl("/account/apikeys"),
-        requireRole: "Admin",
-        icon: "fa fa-key",
-      });
     }
 
     if ($scope.grafana.user.isGrafanaAdmin) {

src/app/directives/topnav.js

@@ -13,7 +13,6 @@ function (angular) {
         transclude: true,
         scope: {
           title: "@",
-          section: "@",
           titleAction: "&",
           toggle: "&",
           showMenuBtn: "=",
@@ -23,18 +22,13 @@ function (angular) {
           '<div class="top-nav">' +
             '<a class="top-nav-menu-btn pointer" ng-if="showMenuBtn" ng-click="toggle()">' +
               '<img class="logo-icon" src="img/fav32.png"></img> ' +
-              '<i class="fa fa-angle-right"></i>' +
+              '<i class="fa fa-bars"></i>' +
             '</a>' +
 
-            '<span class="top-nav-breadcrumb">' +
-              '<i class="top-nav-icon" ng-class="icon"></i>' +
+            '<span class="icon-circle top-nav-icon"">' +
+              '<i ng-class="icon"></i>' +
             '</span>' +
 
-           '<span class="top-nav-section" ng-show="section">' +
-              '{{section}}' +
-              '<i class="fa fa-angle-right"></i>' +
-           '</span>' +
-
             '<a ng-click="titleAction()" class="top-nav-title">' +
               '{{title}}' +
             '</a>' +

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

@@ -1,30 +1,184 @@
-<topnav toggle="toggleSideMenu()" icon="fa fa-shield" section="Account" show-menu-btn="!grafana.sidemenu">
+<topnav toggle="toggleSideMenu()" icon="fa fa-shield" title="Account" show-menu-btn="!grafana.sidemenu">
 </topnav>
 
-<div class="gf-box" style="min-height: 500px">
+<div class="admin-page">
+	<h2>
+		Account Info
+	</h2>
 
-	<div class="gf-box-body">
-		<div class="row editor-row">
-			<div class="section">
-				<form name="accountForm">
-					<div>
+	<div class="gf-box" style="">
+		<div class="gf-box-body">
+			<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-xlarge tight-form-input last" >
+							</li>
+						</ul>
+						<div class="clearfix"></div>
+					</div>
+				</div>
+				<br>
+
+				<br>
+				<button type="submit" class="pull-right btn btn-success" ng-click="update()">Update</button>
+			</form>
+		</div>
+	</div>
+
+	<h2>
+		Account users
+	</h2>
+
+	<div class="gf-box" ng-controller="AccountUsersCtrl">
+		<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: 120px">
-									<strong>Account name</strong>
+								<li class="tight-form-item" style="width: 160px">
+									<strong>Username or Email</strong>
 								</li>
 								<li>
-									<input type="text" required ng-model="account.name" class="input-xlarge tight-form-input last" >
+									<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>
+			</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>
+
+		</div>
+	</div>
+
+	<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 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>
+	</div>
+
+	<h2>Import dashboards</h2>
+	<div class="gf-box" ng-controller="ImportCtrl">
+		<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>
-					<br>
+				</div>
+			</div>
+
+			<div class="editor-row" ng-if="importing">
+				<section class="section">
+					<h5>{{infoText}}</h5>
 
-					<br>
-					<button type="submit" class="pull-right btn btn-success" ng-click="update()">Update</button>
-				</form>
+					<div class="editor-row row">
+						<table class="grafana-options-table span5">
+							<tr ng-repeat="dash in imported">
+								<td>{{dash.name}}</td>
+								<td>
+									{{dash.info}}
+								</td>
+							</tr>
+						</table>
+					</div>
+				</section>
 			</div>
 		</div>
 	</div>

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

@@ -1,11 +1,10 @@
 <topnav toggle="toggleSideMenu()"
 				title="Data sources"
-				icon="fa fa-shield"
-				section="Account"
+				icon="fa fa-database"
 				show-menu-btn="!grafana.sidemenu">
 </topnav>
 
-<div class="gf-box" style="min-height: 500px">
+<div class="gf-box" style="min-height: 500px; max-width: 900px">
 	<div class="gf-box-header">
 		<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
 			<div ng-repeat="tab in ['Overview', 'Add', 'Edit']" data-title="{{tab}}">
@@ -117,3 +116,4 @@
 		</form>
 	</div>
 </div>
+

src/app/features/admin/adminUsersCtrl.js

@@ -27,7 +27,6 @@ function (angular) {
           backendSrv.delete('/api/admin/users/delete/' + user.id);
         }
       });
-
     };
 
     $scope.init();

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

@@ -1,7 +1,6 @@
 <topnav toggle="toggleSideMenu()"
-				title="Users"
+				title="Admin"
 				icon="fa fa-cube"
-				section="Admin"
 				show-menu-btn="!grafana.sidemenu">
 </topnav>
 

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

@@ -1,42 +1,44 @@
 <topnav toggle="toggleSideMenu()"
-				title="Users"
+				title="Admin"
 				icon="fa fa-cube"
-				section="Admin"
 				show-menu-btn="!grafana.sidemenu">
 </topnav>
 
-<div class="gf-box" style="min-height: 500px">
+<div class="admin-page">
+	<h2> Users </h2>
+	<div class="gf-box" style="min-height: 500px">
 
-	<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 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>
 	</div>

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

@@ -1,127 +1,105 @@
 <topnav toggle="toggleSideMenu()"
-				title="Details"
+				title="Profile"
 				icon="fa fa-user"
-				section="Profile"
 				show-menu-btn="!grafana.sidemenu">
 </topnav>
 
+<div class="admin-page">
+	<h2>Personal information</h2>
 
-<div class="editor-row">
-	<div class="section">
-
-		<div class="gf-box">
-			<div class="gf-box-header">
-				<div class="gf-box-title">
-					<i class="fa fa-user"></i>
-					Personal information
-				</div>
-			</div>
-
-			<div class="gf-box-body">
-				<div class="row">
-					<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 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>
 
-						<br>
-						<button type="submit" class="pull-right btn btn-success" ng-click="update()">Update</button>
-					</form>
-				</div>
+					<br>
+					<button type="submit" class="pull-right btn btn-success" ng-click="update()">Update</button>
+				</form>
 			</div>
 		</div>
 	</div>
 
-	<div class="section">
+	<h2>Your accounts</h2>
 
-		<div class="gf-box">
-			<div class="gf-box-header">
-				<div class="gf-box-title">
-					<i class="fa fa-shield"></i>
-					Your accounts
-				</div>
-			</div>
-			<div class="gf-box-body">
-				<table class="grafana-options-table">
-					<tr ng-repeat="ac in accounts">
-						<td>Name: {{ac.name}}</td>
-						<td>Role: {{ac.role}}</td>
-						<td ng-show="ac.isUsing">
-							<span class="label label-info">
-								active now
-							</span>
-						</td>
-						<td ng-show="!ac.isUsing">
-							<a ng-click="setUsingAccount(ac)" class="btn btn-success btn-mini">
-								Select
-							</a>
-						</td>
-					</tr>
-				</table>
-			</div>
+	<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>
 
-	<div class="section">
-		<div class="gf-box">
-			<div class="gf-box-header">
-				<div class="gf-box-title">
-					<i class="fa fa-plus-square"></i>
-					Add account
-				</div>
-			</div>
-			<div class="gf-box-body">
+	<h2>Add account</h2>
+	<div class="gf-box">
+		<div class="gf-box-body editor-row">
+			<div class="section">
 				<form name="form">
-					<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-xlarge tight-form-input" placeholder="account name">
-							</li>
-							<li>
-								<button class="btn btn-success tight-form-btn" ng-click="createAccount()">Create</button>
-							</li>
-						</ul>
-						<div class="clearfix"></div>
+					<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>
-				</form>
+					<br>
+					<button class="btn btn-success pull-right" ng-click="createAccount()">Create</button>
+				</div>
 			</div>
-		</div>
+		</form>
 	</div>
 </div>
 
-

src/app/partials/sidemenu.html

@@ -10,7 +10,7 @@
 
 		<li ng-repeat="item in menu">
 			<a href="{{item.href}}" class="sidemenu-item" target="{{item.target}}">
-				<span class="sidemenu-icon"><i class="{{item.icon}}"></i></span>
+				<span class="icon-circle sidemenu-icon"><i class="{{item.icon}}"></i></span>
 				<span class="sidemenu-item-text">{{item.text}}</span>
 	   	</a>
 		</li>

src/css/less/gfbox.less

@@ -59,3 +59,22 @@
   }
 }
 
+.admin-page {
+  max-width: 800px;
+  margin-left: 10px;
+  .gf-box {
+    margin-top: 0;
+  }
+  .gf-box-body {
+    min-height: 0;
+  }
+  h2 {
+    margin-left: 15px;
+    margin-bottom: 0px;
+    font-size: @fontSizeLarge;
+    color: @textColor;
+    i {
+      padding-right: 6px;
+    }
+  }
+}

src/css/less/navbar.less

@@ -37,13 +37,13 @@
     font-size: 150%;
     opacity: 0;
     position: absolute;
-    transition: opacity .35s ease-in-out;
+    transition: opacity .20s ease-in-out;
   }
   img {
     width: 30px;
     position: absolute;
     opacity: 1;
-    transition: opacity .35s ease-in-out;
+    transition: opacity .20s ease-in-out;
   }
   &:hover {
     .fa {
@@ -68,7 +68,7 @@
   a {
     display: inline-block;
     background: @grafanaTargetFuncBackground;
-    padding: 5px 4px 5px 13px;
+    padding: 5px 15px 5px 10px;
     border: 1px solid #000;
     border-radius: 3px;
     color: #a2a2a2;
@@ -88,16 +88,10 @@
   }
 }
 
-.top-nav-breadcrumb {
-  display: block;
+.top-nav-icon {
+  line-height: 34px;
   float: left;
-  padding: 18px 9px 8px 12px;
-  font-size: 1.4em;
-  font-weight: bold;
-  color: darken(@gray, 10%);
-  i {
-    padding-left: 9px;
-  }
+  margin: 5px 11px;
 }
 
 .top-nav-section {

src/css/less/sidemenu.less

@@ -72,7 +72,7 @@
   }
 }
 
-.sidemenu-icon {
+.icon-circle {
   border-radius: 50%;
   background: #000;
   box-shadow: 0 0 14px 2px rgba(255,255,255, 0.05);
@@ -89,6 +89,9 @@
   }
 }
 
+.sidemenu-icon {
+}
+
 .sidemenu-item {
   color: #f80;
   line-height: 34px;