Use more explicit classnames

ui/src/hosts/components/HostsTable.js

@@ -84,9 +84,9 @@ const HostsTable = React.createClass({
   sortableClasses(key) {
     if (this.state.sortKey === key) {
       if (this.state.sortDirection === 'asc') {
-        return 'sortable-header sorting-up'
+        return 'sortable-header sorting-ascending'
       }
-      return 'sortable-header sorting-down'
+      return 'sortable-header sorting-descending'
     }
     return 'sortable-header'
   },

ui/src/style/components/tables.scss

@@ -125,13 +125,9 @@ table .monotype {
     cursor: pointer;
     color: $g19-ghost;
     background-color: $g5-pepper;
-
-    &:after {
-      opacity: 1;
   }
-  }
-  &.sorting-down,
-  &.sorting-up {
+  &.sorting-ascending,
+  &.sorting-descending {
     background-color: $g5-pepper;
     color: $g19-ghost;
 
@@ -139,11 +135,11 @@ table .monotype {
       opacity: 1;
     }
   }
-  &.sorting-down {
-
-    &:after {
+  &.sorting-ascending:after {
     transform: translateY(-50%) rotate(180deg);
   }
+  &.sorting-descending:after {
+    transform: translateY(-50%) rotate(0deg);
   }
 }