Update top-level navigation panel

Move Server Settings to the right side
Reduce padding
Adjust icon sizes

install/deb/themes/dark.css

@@ -160,17 +160,8 @@ a {
   float: right;
 }
 
-.l-profile__username {
-  font-size: 1.2rem !important;
-}
-
-.l-profile__help {
-  font-size: 1.2rem !important;
-}
-
 .l-profile__logout {
   color: #e7e7e7 !important;
-  font-size: 1.2rem !important;
 }
 
 .l-profile__server {

web/css/styles.min.css

@@ -823,7 +823,7 @@ a {
   color: #f7f7f7;
   position: relative;
   line-height: 39px;
-  padding: 11px 14px;
+  padding: 11px 10px;
   border-left: 1px solid transparent;
   border-right: 1px solid transparent; 
 }
@@ -861,22 +861,24 @@ a {
   color: #fff;
 }
 
+.panel-icon {
+  font-size: 1rem;
+  vertical-align: middle;
+  margin-top: -4px;
+}
+
 .l-profile {
   overflow: hidden;
   float: right;
 }
 
-.l-profile__username {
-  font-size: 1.2rem !important;
-}
-
-.l-profile__help {
-  font-size: 1.2rem !important;
+.l-profile__username, .l-profile__logout,
+.l-profile__help, .l-profile__serversettings {
+  font-size: 1.1rem !important;
 }
 
 .l-profile__logout {
   color: #dbf94e !important;
-  font-size: 1.2rem !important;
 }
 
 .l-profile__server {
@@ -920,7 +922,7 @@ a {
   padding-left: 0;
   position: fixed;
   top: 34px;
-  width: 393px;
+  width: 390px;
   z-index: 300;
   font-size: 0.8rem;
   padding: 0;

web/js/init.js

@@ -580,7 +580,7 @@ $(document).ready(function(){
                 if(!$('.l-profile__notifications').hasClass('active')){
                   VE.notifications.get_list();
                   $('.l-profile__notifications').addClass('active');
-                  left = $('.l-profile__notifications').offset().left - $('.notification-container').outerWidth() + 28;
+                  left = $('.l-profile__notifications').offset().left - $('.notification-container').outerWidth() + 22;
                   $('.notification-container').css({left: left+'px'});
 
                 } else {

web/templates/admin/panel.html

@@ -11,11 +11,10 @@
 		<a href="/list/user/" class="l-logo"></a>
 		<!-- /.l-logo -->
 		<div class="l-menu clearfix noselect">
-			<div class="l-menu__item <?php if($TAB == 'WEB' ) echo 'l-menu__item--active' ?> <?php if($TAB == 'DNS' ) echo 'l-menu__item--active' ?> <?php if($TAB == 'MAIL' ) echo 'l-menu__item--active' ?> <?php if($TAB == 'DB' ) echo 'l-menu__item--active' ?> <?php if($TAB == 'BACKUP' ) echo 'l-menu__item--active' ?> <?php if($TAB == 'CRON' ) echo 'l-menu__item--active' ?><?php if($TAB == 'PACKAGE' ) echo 'l-menu__item--active' ?> <?php if($TAB == 'USER' ) echo 'l-menu__item--active' ?>"><a href="/list/user/"><i class="fas fa-tasks"></i>&nbsp;&nbsp;&nbsp;<?=__('Records')?></a></div>
-			<div class="l-menu__item <?php if($TAB == 'FM' ) echo 'l-menu__item--active' ?>"><a href="/fm/"><i class="fas fa-folder-open"></i>&nbsp;&nbsp;&nbsp;<?=__('Fm')?></a></div>
-			<div class="l-menu__item <?php if($TAB == 'LOG' ) echo 'l-menu__item--active' ?>"><a href="/list/log/"><i class="fas fa-history"></i>&nbsp;&nbsp;&nbsp;<?=__('Log')?></a></div>
-			<div class="l-menu__item <?php if($TAB == 'STATS' ) echo 'l-menu__item--active' ?>"><a href="/list/stats/"><i class="fas fa-chart-line"></i>&nbsp;&nbsp;&nbsp;<?=__('Statistics')?></a></div>
-			<div class="l-menu__item <?php if($TAB == 'SERVER' ) echo 'l-menu__item--active' ?> <?php if($TAB == 'UPDATES' ) echo 'l-menu__item--active' ?> <?php if($TAB == 'IP' ) echo 'l-menu__item--active' ?> <?php if($TAB == 'RRD' ) echo 'l-menu__item--active' ?> <?php if($TAB == 'FIREWALL' ) echo 'l-menu__item--active' ?>"><a href="/list/server/"><i class="fas fa-server"></i>&nbsp;&nbsp;&nbsp;<?=__('Server')?></a></div>
+			<div class="l-menu__item <?php if($TAB == 'WEB' ) echo 'l-menu__item--active' ?> <?php if($TAB == 'DNS' ) echo 'l-menu__item--active' ?> <?php if($TAB == 'MAIL' ) echo 'l-menu__item--active' ?> <?php if($TAB == 'DB' ) echo 'l-menu__item--active' ?> <?php if($TAB == 'BACKUP' ) echo 'l-menu__item--active' ?> <?php if($TAB == 'CRON' ) echo 'l-menu__item--active' ?><?php if($TAB == 'PACKAGE' ) echo 'l-menu__item--active' ?> <?php if($TAB == 'USER' ) echo 'l-menu__item--active' ?>"><a href="/list/user/"><i class="fas fa-tasks panel-icon"></i>&nbsp;&nbsp;&nbsp;<?=__('Records')?></a></div>
+			<div class="l-menu__item <?php if($TAB == 'FM' ) echo 'l-menu__item--active' ?>"><a href="/fm/"><i class="fas fa-folder-open panel-icon"></i>&nbsp;&nbsp;&nbsp;<?=__('Fm')?></a></div>
+			<div class="l-menu__item <?php if($TAB == 'LOG' ) echo 'l-menu__item--active' ?>"><a href="/list/log/"><i class="fas fa-history panel-icon"></i>&nbsp;&nbsp;&nbsp;<?=__('Log')?></a></div>
+			<div class="l-menu__item <?php if($TAB == 'STATS' ) echo 'l-menu__item--active' ?>"><a href="/list/stats/"><i class="fas fa-chart-line panel-icon"></i>&nbsp;&nbsp;&nbsp;<?=__('Statistics')?></a></div>
 		</div>
 		<!-- /.l-menu -->
 		<div class="l-profile noselect">
@@ -31,9 +30,10 @@
 					<i class="fas fa-bell <?if($panel[$user]['NOTIFICATIONS'] == 'yes') echo " animated extended swing status-icon orange"; ?>"></i>
 				</a>
 			</div>
-			<div class="l-menu__item"><a href="https://github.com/hestiacp/hestiacp/issues/" target="_new" alt="Submit a bug report" class="l-profile__help"><i class="fas fa-flag"></i></a></div>
+			<div class="l-menu__item"><a href="/list/server/" class="l-profile__serversettings"><i class="fas fa-cog"></i></a></div>
+			<div class="l-menu__item"><a href="/edit/user/?user=<?php echo $user; ?>" alt="<?=$user?>" class="l-profile__username"><i class="fas fa-user-edit"></i></a></div>
+			<div class="l-menu__item"><a href="https://github.com/hestiacp/hestiacp/issues/" target="_new" alt="Submit a bug report" class="l-profile__help"><i class="fas fa-exclamation-triangle"></i></a></div>
 			<div class="l-menu__item"><a href="https://docs.hestiacp.com/" alt="<?=__('Help')?>" class="l-profile__help" target="_blank"><i class="fas fa-question-circle"></i></a></div>
-			<div class="l-menu__item"><a href="/edit/user/?user=<?php echo $user; ?>" alt="<?=$user?>" class="l-profile__username"><i class="fas fa-user-circle"></i></a></div>
 			<div class="l-menu__item"><a href="/logout/" alt="<?=__('Log out')?>" class="l-profile__logout"><i class="fas fa-sign-out-alt"></i></a></div>
 		</div>
 		<!-- /.l-profile -->

web/templates/user/panel.html

@@ -11,10 +11,10 @@
 		<a href="/list/web/" class="l-logo"></a>
 		<!-- /.l-logo -->
 		<div class="l-menu clearfix noselect">
-			<div class="l-menu__item <?php if($TAB == 'WEB' ) echo 'l-menu__item--active' ?> <?php if($TAB == 'DNS' ) echo 'l-menu__item--active' ?> <?php if($TAB == 'MAIL' ) echo 'l-menu__item--active' ?> <?php if($TAB == 'DB' ) echo 'l-menu__item--active' ?> <?php if($TAB == 'BACKUP' ) echo 'l-menu__item--active' ?> <?php if($TAB == 'CRON' ) echo 'l-menu__item--active' ?>"><a href="/list/web/"><i class="fas fa-tasks"></i>&nbsp;&nbsp;&nbsp;<?=__('Records')?></a></div>
-			<div class="l-menu__item <?php if($TAB == 'FM' ) echo 'l-menu__item--active' ?>"><a href="/fm/"><i class="fas fa-folder-open"></i>&nbsp;&nbsp;&nbsp;<?=__('Fm')?></a></div>
-			<div class="l-menu__item <?php if($TAB == 'LOG' ) echo 'l-menu__item--active' ?>"><a href="/list/log/"><i class="fas fa-history"></i>&nbsp;&nbsp;&nbsp;<?=__('Log')?></a></div>
-			<div class="l-menu__item <?php if($TAB == 'STATS' ) echo 'l-menu__item--active' ?>"><a href="/list/stats/"><i class="fas fa-chart-line"></i>&nbsp;&nbsp;&nbsp;<?=__('Statistics')?></a></div>
+			<div class="l-menu__item <?php if($TAB == 'WEB' ) echo 'l-menu__item--active' ?> <?php if($TAB == 'DNS' ) echo 'l-menu__item--active' ?> <?php if($TAB == 'MAIL' ) echo 'l-menu__item--active' ?> <?php if($TAB == 'DB' ) echo 'l-menu__item--active' ?> <?php if($TAB == 'BACKUP' ) echo 'l-menu__item--active' ?> <?php if($TAB == 'CRON' ) echo 'l-menu__item--active' ?>"><a href="/list/web/"><i class="fas fa-tasks panel-icon"></i>&nbsp;&nbsp;&nbsp;<?=__('Records')?></a></div>
+			<div class="l-menu__item <?php if($TAB == 'FM' ) echo 'l-menu__item--active' ?>"><a href="/fm/"><i class="fas fa-folder-open panel-icon"></i>&nbsp;&nbsp;&nbsp;<?=__('Fm')?></a></div>
+			<div class="l-menu__item <?php if($TAB == 'LOG' ) echo 'l-menu__item--active' ?>"><a href="/list/log/"><i class="fas fa-history panel-icon"></i>&nbsp;&nbsp;&nbsp;<?=__('Log')?></a></div>
+			<div class="l-menu__item <?php if($TAB == 'STATS' ) echo 'l-menu__item--active' ?>"><a href="/list/stats/"><i class="fas fa-chart-line panel-icon"></i>&nbsp;&nbsp;&nbsp;<?=__('Statistics')?></a></div>
 		</div>
 		<!-- /.l-menu -->
 		<div class="l-profile noselect">
@@ -26,9 +26,9 @@
 				</span>
 			</div>
 			<div class="l-menu__item"><a alt="<?=__('Notifications')?>" class="l-profile__notifications <? if($panel[$user]['NOTIFICATIONS'] == 'yes') echo " updates"; ?>"><i class="fas fa-bell <?if($panel[$user]['NOTIFICATIONS'] == 'yes') echo " status-icon orange"; ?>"></i></a></div>
-			<div class="l-menu__item"><a href="https://github.com/hestiacp/hestiacp/issues/" target="_new" alt="Submit a bug report" class="l-profile__help"><i class="fas fa-flag"></i></a></div>
+			<div class="l-menu__item"><a href="/edit/user/?user=<?php echo $user; ?>" alt="<?=$user?>" class="l-profile__username"><i class="fas fa-user-edit"></i></a></div>
+			<div class="l-menu__item"><a href="https://github.com/hestiacp/hestiacp/issues/" target="_new" alt="Submit a bug report" class="l-profile__help"><i class="fas fa-exclamation-triangle"></i></a></div>
 			<div class="l-menu__item"><a href="https://docs.hestiacp.com/" alt="<?=__('Help')?>" class="l-profile__help" target="_blank"><i class="fas fa-question-circle"></i></a></div>
-			<div class="l-menu__item"><a href="/edit/user/?user=<?php echo $user; ?>" alt="<?=$user?>" class="l-profile__username"><i class="fas fa-user-circle"></i></a></div>
 			<div class="l-menu__item"><a href="/logout/" alt="<?=__('Log out')?>" class="l-profile__logout"><i class="fas fa-sign-out-alt"></i></a></div>
 		</div>
 		<!-- /.l-profile -->