Update sort options toolbar and menu

web/css/styles.min.css

@@ -1300,7 +1300,7 @@ div.l-content > div.l-separator:nth-of-type(4) {
 }
 .context-menu.sort-order span.name {
   display: inline-block;
-  padding: 12px 28px 12px 12px;
+  padding: 12px;
   width: 117px;
   font-weight: 500;
 }
@@ -1310,18 +1310,34 @@ div.l-content > div.l-separator:nth-of-type(4) {
   width: 16px;
 }
 .context-menu.sort-order span.active {
-  background-color: #4f8bbc;
-  color: #fff;
+  background-color: #4f8bbc !important;
+  color: #4686b8;
+  font-size: 0.8rem;
+  background: linear-gradient(to bottom, rgba(255,255,255,0.6) 0%,rgba(255,255,255,0.75) 50%,rgba(255,255,255,0.95) 95%);
+  text-shadow: 0px 1px rgba(255,255,255,0.8);
 }
 .context-menu.sort-order span:hover {
-  background-color: #777;
-  color: #fff;
+  color: #3b9de8;
+  text-shadow: 1px 1px rgba(255,255,255,0.5);
+  background: linear-gradient(to bottom, rgba(241,248,253,1) 0%,rgba(218,236,250,1) 50%,rgba(190,221,246,1) 51%,rgba(227,240,251,1) 100%);
+  box-shadow: inset 0px 0px 1px #fff,
+              inset 0px 0px 6px rgba(255,255,255,0.6);
+  transition: 0.2s;
 }
-.context-menu.sort-order span:active {
-  background-color: #4f8bbc;
+.context-menu.sort-order span:active,.context-menu.sort-order span:focus {
+  background: linear-gradient(to bottom, rgba(210,232,250,1) 0%,rgba(187,220,247,1) 50%,rgba(162,207,244,1) 51%,rgba(194,224,248,1) 100%);
+  color: #046c98;
+  text-shadow: 0px -1px 1px rgba(255,255,255,0.5);
+  box-shadow: inset 0px 0px 1px #fff,
+              inset -1px -1px 4px rgba(220,220,220,0.4);
+}
+.context-menu.sort-order span.name i.fas.fa-sort-amount-down {
+  float: right;
+  margin-top: 2px;
+}
+.context-menu.sort-order li:last-child {
+  border-bottom: none;
 }
-
-
 .l-sort-toolbar {
   float: right;
   padding: 7px 0 7px 0;
@@ -1473,6 +1489,7 @@ div.l-content > div.l-separator:nth-of-type(4) {
   padding-right: 4px;
 }
 
+
 .subtitle {
   color: #cc3366;
   font-size: 0.8rem;
@@ -1558,13 +1575,17 @@ div.l-content > div.l-separator:nth-of-type(4) {
   background: linear-gradient(to bottom, rgba(247,247,247,1) 0%,rgba(255,255,255,1) 100%) !important;
   border-left: 1px solid #ddd !important;
   border-right: 1px solid #ddd !important;
+  border-bottom: 1px solid #ddd !important;
   text-shadow: 0px 1px rgba(255,255,255,0.95);
-  box-shadow: inset 0px 0px 1px rgba(255,255,255,1), inset 0px 0px 4px rgba(255,255,255,0.8), 0px 4px 6px rgba(190,190,190,0.25) !important;
+  box-shadow: inset 0px 0px 1px rgba(255,255,255,1), inset 0px 0px 4px rgba(255,255,255,0.8), 0px 4px 6px rgba(190,190,190,0.3) !important;
   border-top-left-radius: 0px;
   border-top-right-radius: 0px;
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
   min-height: 28px;
+  color: #707070;
+  padding: 0 0 0 14px;
+  overflow: hidden;
 }
 
 .table-header:hover {

web/js/init.js

@@ -27,7 +27,7 @@ $(document).ready(function(){
             $(window).scroll(function(){hover_menu()});
 
             $('.l-sort-toolbar .sort-by').click(function(){
-              $('.context-menu.sort-order').toggle().css({left: $(this).position().left - 10});
+              $('.context-menu.sort-order').toggle().css({left: $(this).position().left - 0});
             });
 
 
@@ -109,11 +109,11 @@ $(document).ready(function(){
               $(this).addClass('active');
               VE.tmp.sort_par = $(this).parent('li').attr('entity');
               VE.tmp.sort_as_int = $(this).parent('li').attr('sort_as_int');
-              VE.tmp.sort_direction = $(this).hasClass('up')*1 || -1;
+              VE.tmp.sort_direction = $(this).hasClass('up')*1 || -1; 
 
               $('.l-sort .sort-by span b').html($(this).parent('li').find('.name').html());
-              $('.l-sort .sort-by i').removeClass('l-icon-up-arrow l-icon-down-arrow');
-              $(this).hasClass('up') ? $('.l-sort .sort-by i').addClass('l-icon-up-arrow') : $('.l-sort .sort-by i').addClass('l-icon-down-arrow');
+              $('.l-sort .sort-by i').removeClass('fa-sort-amount-up fa-sort-amount-down');
+              $(this).hasClass('up') ? $('.l-sort .sort-by i').addClass('fa-sort-amount-up') : $('.l-sort .sort-by i').addClass('fa-sort-amount-down');
               $('.units .l-unit').sort(function (a, b) {
                 if(VE.tmp.sort_as_int)
                   return parseInt($(a).attr(VE.tmp.sort_par)) >= parseInt($(b).attr(VE.tmp.sort_par)) ? VE.tmp.sort_direction : VE.tmp.sort_direction * -1;

web/templates/admin/list_backup.html

@@ -36,7 +36,7 @@
     <!-- /.l-separator -->
 
     <div class="l-center units animated fadeIn">
-        <div class="l-unit header table-header">
+        <div class="header table-header">
             <div class="l-unit__col l-unit__col--right step-top">
               <div>
                   <div class="clearfix l-unit__stat-col--left super-compact">

web/templates/admin/list_cron.html

@@ -10,16 +10,16 @@
             }
           ?>
         </div>
-        <ul class="context-menu sort-order animated bounceIn" style="display:none;">
-          <li entity="sort-date" sort_as_int="1"><span class="name active"><?=__('Date')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-name"><span class="name"><?=__('Command')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-star" sort_as_int="1"><span class="name"><?=__('Starred')?></span><span class="up">&nbsp;</span></li>
+        <ul class="context-menu sort-order animated fadeIn" style="display:none;">
+          <li entity="sort-date" sort_as_int="1"><span class="name active"><?=__('Date')?> <i class="fas fa-sort-amount-down"></i></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-name"><span class="name"><?=__('Command')?> <i class="fas fa-sort-amount-down"></i></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-star" sort_as_int="1"><span class="name"><?=__('Starred')?> <i class="fas fa-sort-amount-down"></i></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
         </ul>
         <div class="l-sort-toolbar clearfix">
           <table>
             <tr>
               <td class="sort-by">
-                <i class="fas fa-filter"></i> <?=__('sort by');?>: <span><b><?=__('Date')?></b></span></i>
+                <?=__('sort by');?>: <span><b><?=__('Date')?> <i class="fas fa-sort-amount-down"></i></b></span>
               </td>
               <td class="l-sort-toolbar__search-box">
                 <form action="/search/" method="get">
@@ -54,7 +54,7 @@
     <!-- /.l-separator -->
 
     <div class="l-center units animated fadeIn">
-        <div class="l-unit header table-header">
+        <div class="header table-header">
             <div class="l-unit__col l-unit__col--right step-top">
                   <div class="clearfix l-unit__stat-col--left super-compact">
                       <input id="toggle-all" type="checkbox" name="toggle-all" value="toggle-all" onChange="checkedAll('objects');">

web/templates/admin/list_db.html

@@ -32,19 +32,19 @@
             }
           ?>
         </div>
-        <ul class="context-menu sort-order animated bounceIn" style="display:none;">
-          <li entity="sort-date" sort_as_int="1"><span class="name active"><?=__('Date')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-name"><span class="name"><?=__('Database')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-disk" sort_as_int="1"><span class="name"><?=__('Disk')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-user"><span class="name"><?=__('User')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-server"><span class="name"><?=__('Host')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-star" sort_as_int="1"><span class="name"><?=__('Starred')?></span><span class="up">&nbsp;</span></li>
+        <ul class="context-menu sort-order animated fadeIn" style="display:none;">
+          <li entity="sort-date" sort_as_int="1"><span class="name active"><?=__('Date')?> <i class="fas fa-sort-amount-down"></i></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-name"><span class="name"><?=__('Database')?> <i class="fas fa-sort-amount-down"></i></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-disk" sort_as_int="1"><span class="name"><?=__('Disk')?> <i class="fas fa-sort-amount-down"></i></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-user"><span class="name"><?=__('User')?> <i class="fas fa-sort-amount-down"></i></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-server"><span class="name"><?=__('Host')?> <i class="fas fa-sort-amount-down"></i></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-star" sort_as_int="1"><span class="name"><?=__('Starred')?> <i class="fas fa-sort-amount-down"></i></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
         </ul>
         <div class="l-sort-toolbar clearfix">
           <table>
             <tr>
               <td class="sort-by">
-                <i class="fas fa-filter"></i> <?=__('sort by');?>: <span><b><?=__('Date')?></b></span></i>
+                <?=__('sort by');?>: <span><b><?=__('Date')?> <i class="fas fa-sort-amount-down"></i></b></span>
               </td>
               <td class="l-sort-toolbar__search-box">
                 <form action="/search/" method="get">
@@ -77,7 +77,7 @@
     <div class="l-separator"></div>
     <!-- /.l-separator -->
     <div class="l-center units animated fadeIn">
-        <div class="l-unit header table-header">
+        <div class="header table-header">
             <div class="l-unit__col l-unit__col--right step-top">
                   <div class="clearfix l-unit__stat-col--left super-compact">
                       <input id="toggle-all" type="checkbox" name="toggle-all" value="toggle-all" onChange="checkedAll('objects');">

web/templates/admin/list_dns.html

@@ -3,19 +3,19 @@
         <div class="l-unit-toolbar__buttonstrip">
           <a href="/add/dns/" class="ui-button cancel" title="<?=__('Add DNS Domain')?>"><i class="fas fa-plus-circle status-icon-green"></i> <?=__('Add DNS Domain')?></a>
         </div>
-        <ul class="context-menu sort-order animated bounceIn" style="display:none;">
-          <li entity="sort-date" sort_as_int="1"><span class="name active"><?=__('Date')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-expire" sort_as_int="1"><span class="name"><?=__('Expire')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-name"><span class="name"><?=__('Domain')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-ip"><span class="name"><?=__('IP address')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-records"><span class="name"><?=__('Records')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-star" sort_as_int="1"><span class="name"><?=__('Starred')?></span><span class="up">&nbsp;</span></li>
+        <ul class="context-menu sort-order animated fadeIn" style="display:none;">
+          <li entity="sort-date" sort_as_int="1"><span class="name active"><?=__('Date')?> <i class="fas fa-sort-amount-down"></i></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-expire" sort_as_int="1"><span class="name"><?=__('Expire')?> <i class="fas fa-sort-amount-down"></i></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-name"><span class="name"><?=__('Domain')?> <i class="fas fa-sort-amount-down"></i></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-ip"><span class="name"><?=__('IP address')?> <i class="fas fa-sort-amount-down"></i></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-records"><span class="name"><?=__('Records')?> <i class="fas fa-sort-amount-down"></i></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-star" sort_as_int="1"><span class="name"> <i class="fas fa-sort-amount-down"></i><?=__('Starred')?></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
         </ul>
         <div class="l-sort-toolbar clearfix">
           <table>
             <tr>
               <td class="sort-by">
-		            <i class="fas fa-filter"></i> <?=__('sort by');?>: <span><b><?=__('Date')?></b></span></i>
+		            <?=__('sort by');?>: <span><b><?=__('Date')?> <i class="fas fa-sort-amount-down"></i></b></span>
               </td>
               <td class="l-sort-toolbar__search-box">
                 <form action="/search/" method="get">
@@ -49,7 +49,7 @@
 
 
     <div class="l-center units animated fadeIn">
-        <div class="l-unit header table-header">
+        <div class="header table-header">
             <div class="l-unit__col l-unit__col--right step-top">
                   <div class="clearfix l-unit__stat-col--left super-compact">
                       <input id="toggle-all" type="checkbox" name="toggle-all" value="toggle-all" onChange="checkedAll('objects');">

web/templates/admin/list_dns_rec.html

@@ -44,7 +44,7 @@
 
     <div class="l-center units animated fadeIn">
 
-    <div class="l-unit header table-header">
+    <div class="header table-header">
       <div class="l-unit__col l-unit__col--left clearfix">
         <div class="text-center jump-small-top"></div>
       </div>

web/templates/admin/list_firewall.html

@@ -7,19 +7,19 @@
             echo '<a class="ui-button cancel" href="/list/firewall/banlist/"><i class="fas fa-eye status-icon-red"></i> '.__('list fail2ban').'</a>';
           } ?>
         </div>
-        <ul class="context-menu sort-order animated bounceIn" style="display:none;">
-          <li entity="sort-action"><span class="name active"><?=__('Action')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-protocol"><span class="name"><?=__('Protocol')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-port"><span class="name"><?=__('Port')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-ip" sort_as_int="1"><span class="name"><?=__('IP address')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-comment"><span class="name"><?=__('Comment')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-star"><span class="name"><?=__('Starred')?></span><span class="up">&nbsp;</span></li>
+        <ul class="context-menu sort-order animated fadeIn" style="display:none;">
+          <li entity="sort-action"><span class="name active"><?=__('Action')?> <i class="fas fa-sort-amount-down"></i></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-protocol"><span class="name"><?=__('Protocol')?> <i class="fas fa-sort-amount-down"></i></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-port"><span class="name"><?=__('Port')?> <i class="fas fa-sort-amount-down"></i></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-ip" sort_as_int="1"><span class="name"><?=__('IP address')?> <i class="fas fa-sort-amount-down"></i></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-comment"><span class="name"><?=__('Comment')?> <i class="fas fa-sort-amount-down"></i></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-star"><span class="name"><?=__('Starred')?> <i class="fas fa-sort-amount-down"></i></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
         </ul>
         <div class="l-sort-toolbar clearfix">
           <table>
             <tr>
               <td class="sort-by">
-                  <?=__('sort by');?>: <span><b><?=__('Action')?></b></span> <i class="l-icon-down-arrow media-top"></i>
+                  <?=__('sort by');?>: <span><b><?=__('Action')?> <i class="fas fa-sort-amount-down"></i></b></span>
               </td>
               <td>
                 <form action="/bulk/firewall/" method="post" id="objects">
@@ -43,7 +43,7 @@
     <!-- /.l-separator -->
 
     <div class="l-center units compact animated fadeIn">         
-          <div class="l-unit header table-header">     
+          <div class="header table-header">     
             <div class="l-unit__col l-unit__col--right step-top">
               <div>
                   <div class="clearfix l-unit__stat-col--left super-compact">

web/templates/admin/list_firewall_banlist.html

@@ -29,7 +29,7 @@
     <!-- /.l-separator -->
 
     <div class="l-center units animated fadeIn">
-          <div class="l-unit header table-header">
+          <div class="header table-header">
               <div class="l-unit__col l-unit__col--right step-top">
                     <div class="clearfix l-unit__stat-col--left super-compact">
                         <input id="toggle-all" type="checkbox" name="toggle-all" value="toggle-all" onChange="checkedAll('objects');">

web/templates/admin/list_ip.html

@@ -4,20 +4,20 @@
           <a class="ui-button cancel" href="/list/server/"><i class="fas fa-arrow-left status-icon-blue"></i> <?=__('Back')?></a>
           <a href="/add/ip/" class="ui-button cancel" title="<?=__('Add IP')?>"><i class="fas fa-plus-circle status-icon-green"></i> <?=__('Add IP')?></a>
         </div>
-        <ul class="context-menu sort-order animated bounceIn" style="display:none;">
-          <li entity="sort-date" sort_as_int="1"><span class="name active"><?=__('Date')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-ip"><span class="name"><?=__('ip')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-netmask"><span class="name"><?=__('Netmask')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-interface"><span class="name"><?=__('Interface')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-domains" sort_as_int="1"><span class="name"><?=__('Domains')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-owner"><span class="name"><?=__('Owner')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-star" sort_as_int="1"><span class="name"><?=__('Starred')?></span><span class="up">&nbsp;</span></li>
+        <ul class="context-menu sort-order animated fadeIn" style="display:none;">
+          <li entity="sort-date" sort_as_int="1"><span class="name active"><?=__('Date')?> <i class="fas fa-sort-amount-down"></i></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-ip"><span class="name"><?=__('ip')?> <i class="fas fa-sort-amount-down"></i></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-netmask"><span class="name"><?=__('Netmask')?> <i class="fas fa-sort-amount-down"></i></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-interface"><span class="name"><?=__('Interface')?> <i class="fas fa-sort-amount-down"></i></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-domains" sort_as_int="1"><span class="name"><?=__('Domains')?> <i class="fas fa-sort-amount-down"></i></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-owner"><span class="name"><?=__('Owner')?> <i class="fas fa-sort-amount-down"></i></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-star" sort_as_int="1"><span class="name"><?=__('Starred')?> <i class="fas fa-sort-amount-down"></i></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
         </ul>
         <div class="l-sort-toolbar clearfix">
           <table>
             <tr>
               <td class="sort-by">
-                  <i class="fas fa-filter"></i> <?=__('sort by');?>: <span><b><?=__('Date')?></b></span></i>
+                  <?=__('sort by');?>: <span><b><?=__('Date')?> <i class="fas fa-sort-amount-down"></i></b></span>
                 </td>
               <td>
                 <form action="/bulk/ip/" method="post" id="objects">
@@ -41,7 +41,7 @@
     <div class="l-separator"></div>
     <!-- /.l-separator -->
     <div class="l-center units animated fadeIn">
-      <div class="l-unit header table-header">     
+      <div class="header table-header">     
         <div class="l-unit__col l-unit__col--right step-top">
           <div>
             <div class="clearfix l-unit__stat-col--left super-compact">

web/templates/admin/list_log.html

@@ -15,7 +15,7 @@
 <div class="l-separator"></div>
 <!-- /.l-separator -->
 <div class="l-center units animated fadeIn">
-  <div class="l-unit header table-header">     
+  <div class="header table-header">     
     <div class="l-unit__col l-unit__col--right step-top">
       <div>
         <div class="clearfix l-unit__stat-col--left compact">

web/templates/admin/list_mail.html

@@ -3,18 +3,18 @@
         <div class="l-unit-toolbar__buttonstrip">
           <a href="/add/mail/" class="ui-button cancel" title="<?=__('Add Mail Domain')?>"><i class="fas fa-plus-circle status-icon-green"></i> <?=__('Add Mail Domain')?></a>
         </div>
-        <ul class="context-menu sort-order animated bounceIn" style="display:none;">
-          <li entity="sort-date" sort_as_int="1"><span class="name active"><?=__('Date')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-name"><span class="name"><?=__('Domain')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-accounts" sort_as_int="1"><span class="name"><?=__('Accounts')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-disk" sort_as_int="1"><span class="name"><?=__('Disk')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-star" sort_as_int="1"><span class="name"><?=__('Starred')?></span><span class="up">&nbsp;</span></li>
+        <ul class="context-menu sort-order animated fadeIn" style="display:none;">
+          <li entity="sort-date" sort_as_int="1"><span class="name active"><?=__('Date')?> <i class="fas fa-sort-amount-down"></i></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-name"><span class="name"><?=__('Domain')?> <i class="fas fa-sort-amount-down"></i></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-accounts" sort_as_int="1"><span class="name"><?=__('Accounts')?> <i class="fas fa-sort-amount-down"></i></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-disk" sort_as_int="1"><span class="name"><?=__('Disk')?> <i class="fas fa-sort-amount-down"></i></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-star" sort_as_int="1"><span class="name"><?=__('Starred')?> <i class="fas fa-sort-amount-down"></i></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
         </ul>
         <div class="l-sort-toolbar clearfix">
           <table>
             <tr>
               <td class="sort-by">
-                    <i class="fas fa-filter"></i> <?=__('sort by');?>: <span><b><?=__('Date')?></b></span></i>
+                    <?=__('sort by');?>: <span><b><?=__('Date')?> <i class="fas fa-sort-amount-down"></i></b></span>
               </td>
               <td class="l-sort-toolbar__search-box">
                 <form action="/search/" method="get">
@@ -48,7 +48,7 @@
     <div class="l-separator"></div>
     <!-- /.l-separator -->
     <div class="l-center units animated fadeIn">
-            <div class="l-unit header table-header">
+            <div class="header table-header">
                 <div class="l-unit__col l-unit__col--right step-top">
                       <div class="clearfix l-unit__stat-col--left super-compact">
                         <input id="toggle-all" type="checkbox" name="toggle-all" value="toggle-all" onChange="checkedAll('objects');">

web/templates/admin/list_mail_acc.html

@@ -4,11 +4,11 @@
           <a class="ui-button cancel" href="/list/mail/"><i class="fas fa-arrow-left status-icon-blue"></i> <?=__('Back')?></a>
           <a href="/add/mail/?domain=<?=htmlentities($_GET['domain'])?>" class="ui-button cancel" title="<?=__('Add Mail Account')?>"><i class="fas fa-plus-circle status-icon-green"></i> <?=__('Add Mail Account')?></a>
         </div>
-        <ul class="context-menu sort-order animated bounceIn" style="display:none;">
-          <li entity="sort-date" sort_as_int="1"><span class="name active"><?=__('Date')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-name"><span class="name"><?=__('Account')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-disk" sort_as_int="1"><span class="name"><?=__('Disk')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-star" sort_as_int="1"><span class="name"><?=__('Starred')?></span><span class="up">&nbsp;</span></li>
+        <ul class="context-menu sort-order animated fadeIn" style="display:none;">
+          <li entity="sort-date" sort_as_int="1"><span class="name active"><?=__('Date')?> <i class="fas fa-sort-amount-down"></i></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-name"><span class="name"><?=__('Account')?> <i class="fas fa-sort-amount-down"></i></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-disk" sort_as_int="1"><span class="name"><?=__('Disk')?> <i class="fas fa-sort-amount-down"></i></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-star" sort_as_int="1"><span class="name"><?=__('Starred')?> <i class="fas fa-sort-amount-down"></i></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
         </ul>
         <div class="l-sort-toolbar clearfix">
           <table>
@@ -21,7 +21,7 @@
                 ?>
               </td>
               <td class="sort-by">
-                  <i class="fas fa-filter"></i> <?=__('sort by');?>: <span><b><?=__('Date')?></b></span></i>
+                  <?=__('sort by');?>: <span><b><?=__('Date')?> <i class="fas fa-sort-amount-down"></i></b></span>
               </td>
               <td class="l-sort-toolbar__search-box">
                 <form action="/search/" method="get">
@@ -54,7 +54,7 @@
     <div class="l-separator"></div>
     <!-- /.l-separator -->
     <div class="l-center units animated fadeIn">
-        <div class="l-unit header table-header">     
+        <div class="header table-header">     
             <div class="l-unit__col l-unit__col--right step-top">
               <div>
                   <div class="clearfix l-unit__stat-col--left super-compact">

web/templates/admin/list_packages.html

@@ -4,16 +4,16 @@
           <a class="ui-button cancel" href="/list/user/"><i class="fas fa-arrow-left status-icon-blue"></i> <?=__('Back')?></a>
           <a href="/add/package/" class="ui-button cancel" title="<?=__('Add Package')?>"><i class="fas fa-plus-circle status-icon-green"></i> <?=__('Add Package')?></a>
         </div>
-        <ul class="context-menu sort-order animated bounceIn" style="display:none;">
-          <li entity="sort-date" sort_as_int="1"><span class="name active"><?=__('Date')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-name"><span class="name"><?=__('Package Name')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-star" sort_as_int="1"><span class="name"><?=__('Starred')?></span><span class="up">&nbsp;</span></li>
+        <ul class="context-menu sort-order animated fadeIn" style="display:none;">
+          <li entity="sort-date" sort_as_int="1"><span class="name active"><?=__('Date')?></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-name"><span class="name"><?=__('Package Name')?></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-star" sort_as_int="1"><span class="name"><?=__('Starred')?></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
         </ul>
         <div class="l-sort-toolbar clearfix">
           <table>
             <tr>
               <td class="sort-by">
-                <i class="fas fa-filter"></i> <?=__('sort by');?>: <span><b><?=__('Date')?></b></span></i>
+                <?=__('sort by');?>: <span><b><?=__('Date')?> <i class="fas fa-sort-amount-down"></i></b></span>
               </td>
               <td class="l-sort-toolbar__search-box">
                 <form action="/search/" method="get">

web/templates/admin/list_search.html

@@ -1,16 +1,16 @@
     <div class="l-center">
       <div class="l-sort clearfix noselect">
-        <ul class="context-menu sort-order animated bounceIn" style="display:none;">
-          <li entity="sort-date" sort_as_int="1"><span class="name active"><?=__('Date')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-name"><span class="name"><?=__('Name')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-star" sort_as_int="1"><span class="name"><?=__('Starred')?></span><span class="up">&nbsp;</span></li>
+        <ul class="context-menu sort-order animated fadeIn" style="display:none;">
+          <li entity="sort-date" sort_as_int="1"><span class="name active"><?=__('Date')?></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-name"><span class="name"><?=__('Name')?></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-star" sort_as_int="1"><span class="name"><?=__('Starred')?></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
         </ul>
         <div class="l-sort-toolbar clearfix width-100p">
           <span class="title edit display-inline-block float-left"><b><?=__('Search Results')?></b></span>
           <table class="float-right">
             <tr>
               <td class="sort-by">
-                <i class="fas fa-filter"></i> <?=__('sort by');?>: <span><b><?=__('Date')?></b></span></i>
+                <?=__('sort by');?>: <span><b><?=__('Date')?> <i class="fas fa-sort-amount-down"></i></b></span>
               </td>
             </tr>
           </table>

web/templates/admin/list_services.html

@@ -85,7 +85,7 @@
         <!-- /.l-unit__col -->
       </div>
       <!-- /.l-unit -->
-          <div class="l-unit table-header">
+          <div class="table-header"> 
               <div class="l-unit__col l-unit__col--right">
                     <div class="clearfix l-unit__stat-col--left super-compact">
                         <input id="toggle-all" type="checkbox" name="toggle-all" value="toggle-all" onChange="checkedAll('objects');">

web/templates/admin/list_updates.html

@@ -34,7 +34,7 @@
 
 
     <div class="l-center units animated fadeIn">
-        <div class="l-unit header table-header">    
+        <div class="header table-header">    
             <div class="l-unit__col l-unit__col--right step-top">
               <div>
                   <div class="clearfix l-unit__stat-col--left super-compact">

web/templates/admin/list_user.html

@@ -10,18 +10,18 @@
           }
         ?>
       </div>
-        <ul class="context-menu sort-order animated bounceIn" style="display:none;">
-          <li entity="sort-date" sort_as_int="1"><span class="name active"><?=__('Date')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-name"><span class="name"><?=__('Username')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-disk" sort_as_int="1"><span class="name"><?=__('Disk')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-bandwidth" sort_as_int="1"><span class="name"><?=__('Bandwidth')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-star" sort_as_int="1"><span class="name"><?=__('Starred')?></span><span class="up">&nbsp;</span></li>
+        <ul class="context-menu sort-order animated fadeIn" style="display:none;">
+          <li entity="sort-date" sort_as_int="1"><span class="name active"><?=__('Date')?> <i class="fas fa-sort-amount-down"></i></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-name"><span class="name"><?=__('Username')?> <i class="fas fa-sort-amount-down"></i></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-disk" sort_as_int="1"><span class="name"><?=__('Disk')?> <i class="fas fa-sort-amount-down"></i></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-bandwidth" sort_as_int="1"><span class="name"><?=__('Bandwidth')?> <i class="fas fa-sort-amount-down"></i></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-star" sort_as_int="1"><span class="name"><?=__('Starred')?> <i class="fas fa-sort-amount-down"></i></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
         </ul>
         <div class="l-sort-toolbar clearfix">
           <table>
             <tr>
               <td class="sort-by">
-                  <i class="fas fa-filter"></i> <?=__('sort by');?>: <span><b><?=__('Date')?></b></span></i>
+                  <?=__('sort by');?>: <span><b><?=__('Date')?> <i class="fas fa-sort-amount-down"></i></b></span>
                 </td>
               <td>
                 <form action="/bulk/user/" method="post" id="objects">
@@ -55,7 +55,7 @@
 
     <!-- /.l-separator --> 
     <div class="l-center units animated fadeIn">
-        <div class="l-unit table-header">
+        <div class="table-header"> 
       
             <div class="l-unit__col l-unit__col--right">
                   <div class="clearfix l-unit__stat-col--left super-compact">

web/templates/admin/list_web.html

@@ -3,19 +3,19 @@
         <div class="l-unit-toolbar__buttonstrip">
           <a href="/add/web/" class="ui-button cancel" title="<?=__('Add Web Domain')?>"><i class="fas fa-plus-circle status-icon-green"></i> <?=__('Add Web Domain')?></a>
         </div>
-        <ul class="context-menu sort-order animated bounceIn" style="display:none;">
-          <li entity="sort-date" sort_as_int="1"><span class="name active"><?=__('Date')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-name"><span class="name"><?=__('Domain')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-ip" sort_as_int="1"><span class="name"><?=__('IP address')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-disk" sort_as_int="1"><span class="name"><?=__('Disk')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-bandwidth" sort_as_int="1"><span class="name"><?=__('Bandwidth')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-star" sort_as_int="1"><span class="name"><?=__('Starred')?></span><span class="up">&nbsp;</span></li>
+        <ul class="context-menu sort-order animated fadeIn" style="display:none;">
+          <li entity="sort-date" sort_as_int="1"><span class="name active"><?=__('Date')?> <i class="fas fa-sort-amount-down"></i></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-name"><span class="name"><?=__('Domain')?> <i class="fas fa-sort-amount-down"></i></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-ip" sort_as_int="1"><span class="name"><?=__('IP address')?> <i class="fas fa-sort-amount-down"></i></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-disk" sort_as_int="1"><span class="name"><?=__('Disk')?> <i class="fas fa-sort-amount-down"></i></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-bandwidth" sort_as_int="1"><span class="name"><?=__('Bandwidth')?> <i class="fas fa-sort-amount-down"></i></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-star" sort_as_int="1"><span class="name"><?=__('Starred')?> <i class="fas fa-sort-amount-down"></i></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
         </ul>
         <div class="l-sort-toolbar clearfix">
           <table>
             <tr>
               <td class="sort-by">
-                <i class="fas fa-filter"></i> <?=__('sort by');?>: <span><b><?=__('Date')?></b></span></i>
+                <?=__('sort by');?>: <span><b><?=__('Date')?> <i class="fas fa-sort-amount-down"></i></b></span>
               </td>
               <td class="l-sort-toolbar__search-box">
                 <form action="/search/" method="get">
@@ -48,7 +48,7 @@
     <div class="l-separator"></div>
     <!-- /.l-separator -->
     <div class="l-center units narrow animated fadeIn">
-        <div class="l-unit header table-header">      
+        <div class="header table-header">      
             <div class="l-unit__col l-unit__col--right step-top">
               <div>
                   <div class="clearfix l-unit__stat-col--left super-compact">

web/templates/user/list_cron.html

@@ -1,10 +1,10 @@
     <div class="l-center">
       <div class="l-sort clearfix noselect">
         <a href="/add/cron/" class="l-sort__create-btn" title="<?=__('Add Cron Job')?>"></a>
-        <ul class="context-menu sort-order animated bounceIn" style="display:none;">
-          <li entity="sort-date" sort_as_int="1"><span class="name active"><?=__('Date')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-name"><span class="name"><?=__('Command')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-star" sort_as_int="1"><span class="name"><?=__('Starred')?></span><span class="up">&nbsp;</span></li>
+        <ul class="context-menu sort-order animated fadeIn" style="display:none;">
+          <li entity="sort-date" sort_as_int="1"><span class="name active"><?=__('Date')?></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-name"><span class="name"><?=__('Command')?></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-star" sort_as_int="1"><span class="name"><?=__('Starred')?></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
         </ul>
         <div class="l-sort-toolbar clearfix">
           <table>
@@ -44,7 +44,7 @@
                 <button type="submit" class="l-sort-toolbar__filter-apply" value=""><i class="fas fa-arrow-right"></i></button>
               </td>
               <td class="sort-by">
-                <i class="fas fa-filter"></i> <?=__('sort by');?>: <span><b><?=__('Date')?></b></span></i>
+                <?=__('sort by');?>: <span><b><?=__('Date')?> <i class="fas fa-sort-amount-down"></i></b></span>
               </td>
             </tr>
           </table>

web/templates/user/list_db.html

@@ -1,13 +1,13 @@
     <div class="l-center">
       <div class="l-sort clearfix noselect">
         <a href="/add/db/" class="l-sort__create-btn" title="<?=__('Add Database')?>"></a>
-        <ul class="context-menu sort-order animated bounceIn" style="display:none;">
-          <li entity="sort-date" sort_as_int="1"><span class="name active"><?=__('Date')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-name"><span class="name"><?=__('Database')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-disk" sort_as_int="1"><span class="name"><?=__('Disk')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-user"><span class="name"><?=__('User')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-server"><span class="name"><?=__('Host')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-star" sort_as_int="1"><span class="name"><?=__('Starred')?></span><span class="up">&nbsp;</span></li>
+        <ul class="context-menu sort-order animated fadeIn" style="display:none;">
+          <li entity="sort-date" sort_as_int="1"><span class="name active"><?=__('Date')?></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-name"><span class="name"><?=__('Database')?></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-disk" sort_as_int="1"><span class="name"><?=__('Disk')?></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-user"><span class="name"><?=__('User')?></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-server"><span class="name"><?=__('Host')?></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-star" sort_as_int="1"><span class="name"><?=__('Starred')?></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
         </ul>
         <div class="l-sort-toolbar clearfix">
           <table>
@@ -65,7 +65,7 @@
                 <button type="submit" class="l-sort-toolbar__filter-apply" value=""><i class="fas fa-arrow-right"></i></button>
               </td>
               <td class="sort-by">
-                <i class="fas fa-filter"></i> <?=__('sort by');?>: <span><b><?=__('Date')?></b></span></i>
+                <?=__('sort by');?>: <span><b><?=__('Date')?> <i class="fas fa-sort-amount-down"></i></b></span>
               </td>
             </tr>
           </table>

web/templates/user/list_dns.html

@@ -1,19 +1,19 @@
     <div class="l-center">
       <div class="l-sort clearfix noselect">
         <a href="/add/dns/" title="<?=__('Add DNS Domain')?>" class="l-sort__create-btn"></a>
-        <ul class="context-menu sort-order animated bounceIn" style="display:none;">
-          <li entity="sort-date" sort_as_int="1"><span class="name active"><?=__('Date')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-expire" sort_as_int="1"><span class="name"><?=__('Expire')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-name"><span class="name"><?=__('Domain')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-ip"><span class="name"><?=__('IP Address')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-records"><span class="name"><?=__('Records')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-star" sort_as_int="1"><span class="name"><?=__('Starred')?></span><span class="up">&nbsp;</span></li>
+        <ul class="context-menu sort-order animated fadeIn" style="display:none;">
+          <li entity="sort-date" sort_as_int="1"><span class="name active"><?=__('Date')?></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-expire" sort_as_int="1"><span class="name"><?=__('Expire')?></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-name"><span class="name"><?=__('Domain')?></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-ip"><span class="name"><?=__('IP Address')?></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-records"><span class="name"><?=__('Records')?></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-star" sort_as_int="1"><span class="name"><?=__('Starred')?></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
         </ul>
         <div class="l-sort-toolbar clearfix">
           <table>
             <tr>
               <td class="sort-by">
-                <i class="fas fa-filter"></i> <?=__('sort by');?>: <span><b><?=__('Date')?></b></span></i>
+                <?=__('sort by');?>: <span><b><?=__('Date')?> <i class="fas fa-sort-amount-down"></i></b></span>
               </td>
               <td class="l-sort-toolbar__search-box">
                 <form action="/search/" method="get">

web/templates/user/list_mail.html

@@ -1,12 +1,12 @@
     <div class="l-center">
       <div class="l-sort clearfix noselect">
         <a href="/add/mail/" class="l-sort__create-btn" title="<?=__('Add Mail Domain')?>"></a>
-        <ul class="context-menu sort-order animated bounceIn" style="display:none;">
-          <li entity="sort-date" sort_as_int="1"><span class="name active"><?=__('Date')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-name"><span class="name"><?=__('Domain')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-accounts" sort_as_int="1"><span class="name"><?=__('Accounts')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-disk" sort_as_int="1"><span class="name"><?=__('Disk')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-star" sort_as_int="1"><span class="name"><?=__('Starred')?></span><span class="up">&nbsp;</span></li>
+        <ul class="context-menu sort-order animated fadeIn" style="display:none;">
+          <li entity="sort-date" sort_as_int="1"><span class="name active"><?=__('Date')?></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-name"><span class="name"><?=__('Domain')?></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-accounts" sort_as_int="1"><span class="name"><?=__('Accounts')?></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-disk" sort_as_int="1"><span class="name"><?=__('Disk')?></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-star" sort_as_int="1"><span class="name"><?=__('Starred')?></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
         </ul>
         <div class="l-sort-toolbar clearfix">
           <table>
@@ -41,7 +41,7 @@
                 <button type="submit" class="l-sort-toolbar__filter-apply" value=""><i class="fas fa-arrow-right"></i></button>
               </td>
               <td class="sort-by">
-                <i class="fas fa-filter"></i> <?=__('sort by');?>: <span><b><?=__('Date')?></b></span></i>
+                <?=__('sort by');?>: <span><b><?=__('Date')?> <i class="fas fa-sort-amount-down"></i></b></span>
               </td>
             </tr>
           </table>

web/templates/user/list_mail_acc.html

@@ -1,11 +1,11 @@
     <div class="l-center">
       <div class="l-sort clearfix noselect">
         <a href="/add/mail/?domain=<?=htmlentities($_GET['domain'])?>" class="l-sort__create-btn" title="<?=__('Add Mail Account')?>"></a>
-        <ul class="context-menu sort-order animated bounceIn" style="display:none;">
-          <li entity="sort-date" sort_as_int="1"><span class="name active"><?=__('Date')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-name"><span class="name"><?=__('Account')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-disk" sort_as_int="1"><span class="name"><?=__('Disk')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-star" sort_as_int="1"><span class="name"><?=__('Starred')?></span><span class="up">&nbsp;</span></li>
+        <ul class="context-menu sort-order animated fadeIn" style="display:none;">
+          <li entity="sort-date" sort_as_int="1"><span class="name active"><?=__('Date')?></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-name"><span class="name"><?=__('Account')?></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-disk" sort_as_int="1"><span class="name"><?=__('Disk')?></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-star" sort_as_int="1"><span class="name"><?=__('Starred')?></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
         </ul>
         <div class="l-sort-toolbar clearfix">
           <table>
@@ -40,7 +40,7 @@
                 <button type="submit" class="l-sort-toolbar__filter-apply" value=""><i class="fas fa-arrow-right"></i></button>
               </td>
               <td class="sort-by">
-                <i class="fas fa-filter"></i> <?=__('sort by');?>: <span><b><?=__('Date')?></b></span></i>
+                <?=__('sort by');?>: <span><b><?=__('Date')?> <i class="fas fa-sort-amount-down"></i></b></span>
               </td>
             </tr>
           </table>

web/templates/user/list_search.html

@@ -1,9 +1,9 @@
     <div class="l-center">
       <div class="l-sort clearfix noselect">
-        <ul class="context-menu sort-order animated bounceIn" style="display:none;">
-          <li entity="sort-date" sort_as_int="1"><span class="name active"><?=__('Date')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-name"><span class="name"><?=__('Name')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-star" sort_as_int="1"><span class="name"><?=__('Starred')?></span><span class="up">&nbsp;</span></li>
+        <ul class="context-menu sort-order animated fadeIn" style="display:none;">
+          <li entity="sort-date" sort_as_int="1"><span class="name active"><?=__('Date')?></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-name"><span class="name"><?=__('Name')?></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-star" sort_as_int="1"><span class="name"><?=__('Starred')?></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
         </ul>
         <div class="l-sort-toolbar clearfix width-100p">
           <span class="title edit display-inline-block float-left"><b><?=__('Search Results')?></b></span>
@@ -17,7 +17,7 @@
                 </form>
               </td>
               <td class="sort-by">
-                <i class="fas fa-filter"></i> <?=__('sort by');?>: <span><b><?=__('Date')?></b></span></i>
+                <?=__('sort by');?>: <span><b><?=__('Date')?> <i class="fas fa-sort-amount-down"></i></b></span>
               </td>
             </tr>
           </table>

web/templates/user/list_user.html

@@ -7,12 +7,12 @@
             echo '<a class="l-sort__create-btn" href="/add/web/" title="'.__('Add Web Domain').'"></a>';
           }
         ?>
-        <ul class="context-menu sort-order animated bounceIn" style="display:none;">
-          <li entity="sort-date" sort_as_int="1"><span class="name active"><?=__('Date')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-name"><span class="name"><?=__('Username')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-disk" sort_as_int="1"><span class="name"><?=__('Disk')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-bandwidth" sort_as_int="1"><span class="name"><?=__('Bandwidth')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-star" sort_as_int="1"><span class="name"><?=__('Starred')?></span><span class="up">&nbsp;</span></li>
+        <ul class="context-menu sort-order animated fadeIn" style="display:none;">
+          <li entity="sort-date" sort_as_int="1"><span class="name active"><?=__('Date')?></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-name"><span class="name"><?=__('Username')?></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-disk" sort_as_int="1"><span class="name"><?=__('Disk')?></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-bandwidth" sort_as_int="1"><span class="name"><?=__('Bandwidth')?></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-star" sort_as_int="1"><span class="name"><?=__('Starred')?></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
         </ul>
         <div class="l-sort-toolbar clearfix">
           <table>
@@ -47,7 +47,7 @@
                   <button type="submit" class="l-sort-toolbar__filter-apply" value=""><i class="fas fa-arrow-right"></i></button>
               </td>
               <td class="sort-by">
-                <i class="fas fa-filter"></i> <?=__('sort by');?>: <span><b><?=__('Date')?></b></span></i>
+                <?=__('sort by');?>: <span><b><?=__('Date')?> <i class="fas fa-sort-amount-down"></i></b></span>
               </td>
             </tr>
           </table>

web/templates/user/list_web.html

@@ -1,19 +1,19 @@
     <div class="l-center">
       <div class="l-sort clearfix noselect">
         <a href="/add/web/" class="l-sort__create-btn" title="<?=__('Add Web Domain')?>"></a>
-        <ul class="context-menu sort-order animated bounceIn" style="display:none;">
-          <li entity="sort-date" sort_as_int="1"><span class="name active"><?=__('Date')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-name"><span class="name"><?=__('Domain')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-ip" sort_as_int="1"><span class="name"><?=__('IP Address')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-disk" sort_as_int="1"><span class="name"><?=__('Disk')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-bandwidth" sort_as_int="1"><span class="name"><?=__('Bandwidth')?></span><span class="up">&nbsp;</span></li>
-          <li entity="sort-star" sort_as_int="1"><span class="name"><?=__('Starred')?></span><span class="up">&nbsp;</span></li>
+        <ul class="context-menu sort-order animated fadeIn" style="display:none;">
+          <li entity="sort-date" sort_as_int="1"><span class="name active"><?=__('Date')?></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-name"><span class="name"><?=__('Domain')?></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-ip" sort_as_int="1"><span class="name"><?=__('IP Address')?></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-disk" sort_as_int="1"><span class="name"><?=__('Disk')?></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-bandwidth" sort_as_int="1"><span class="name"><?=__('Bandwidth')?></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
+          <li entity="sort-star" sort_as_int="1"><span class="name"><?=__('Starred')?></span><span class="up"><i class="fas fa-sort-amount-up"></i></span></li>
         </ul>
         <div class="l-sort-toolbar clearfix">
           <table>
             <tr>
               <td class="sort-by">
-                <i class="fas fa-filter"></i> <?=__('sort by');?>: <span><b><?=__('Date')?></b></span></i>
+                <?=__('sort by');?>: <span><b><?=__('Date')?> <i class="fas fa-sort-amount-down"></i></b></span>
               </td>
               <td class="l-sort-toolbar__search-box">
                 <form action="/search/" method="get">