Add updated table styles

  - Refer below link for styles:
      https://ibm.invisionapp.com/share/D8O06PPE32B#/screens

Signed-off-by: Sukanya Pandey <sukapan1@in.ibm.com>
Change-Id: I6dcc3b8d0fb7ef19388b5bfeaf87fce78725b638

17 files changed, 34 insertions, 1 deletions

diff --git a/src/assets/styles/bmc/custom/_tables.scss b/src/assets/styles/bmc/custom/_tables.scss
index b3ef0565..8b8c4a8e 100644
--- a/src/assets/styles/bmc/custom/_tables.scss
+++ b/src/assets/styles/bmc/custom/_tables.scss
@@ -17,6 +17,9 @@
   .thead-light th {
     border: none;
     color: theme-color("dark");
+    &:focus {
+      outline: none;
+    }
   }
 
   .status-icon svg {
@@ -60,6 +63,17 @@
       fill: theme-color("dark");
     }
   }
+  .b-table-sort-icon-left {
+    background-position: left calc(1.5rem / 2) center !important;
+    padding-left: calc(1.2rem + 0.65em) !important;
+    &:focus {
+      outline: none;
+      box-shadow: inset 0 0 0 2px theme-color('primary') !important;
+    }
+    &:hover {
+      background-color: theme-color-dark('light');
+    }
+  }
 }
 
 .b-table-sticky-header td {
diff --git a/src/assets/styles/bmc/helpers/_functions.scss b/src/assets/styles/bmc/helpers/_functions.scss
index 456caf36..57956c99 100644
--- a/src/assets/styles/bmc/helpers/_functions.scss
+++ b/src/assets/styles/bmc/helpers/_functions.scss
@@ -2,4 +2,8 @@
 // theme variant color to use as a background color
 @function theme-color-light($variant) {
   @return theme-color-level($variant, -11.3);
+}
+
+@function theme-color-dark($variant) {
+  @return theme-color-level($variant, 2);
 }
\ No newline at end of file
diff --git a/src/views/AccessControl/Ldap/TableRoleGroups.vue b/src/views/AccessControl/Ldap/TableRoleGroups.vue
index 8df87742..9daf1fd7 100644
--- a/src/views/AccessControl/Ldap/TableRoleGroups.vue
+++ b/src/views/AccessControl/Ldap/TableRoleGroups.vue
@@ -34,6 +34,7 @@
           selectable
           show-empty
           no-select-on-click
+          hover
           no-sort-reset
           sort-icon-left
           :items="tableItems"
diff --git a/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue b/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue
index 31cc3571..9978f4a7 100644
--- a/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue
+++ b/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue
@@ -32,6 +32,7 @@
           selectable
           show-empty
           no-select-on-click
+          hover
           :fields="fields"
           :items="tableItems"
           :empty-text="$t('global.table.emptyMessage')"
diff --git a/src/views/AccessControl/LocalUserManagement/TableRoles.vue b/src/views/AccessControl/LocalUserManagement/TableRoles.vue
index 6596c508..b4b366af 100644
--- a/src/views/AccessControl/LocalUserManagement/TableRoles.vue
+++ b/src/views/AccessControl/LocalUserManagement/TableRoles.vue
@@ -1,5 +1,5 @@
 <template>
-  <b-table stacked="sm" small :items="items" :fields="fields">
+  <b-table stacked="sm" hover small :items="items" :fields="fields">
     <template v-slot:cell(administrator)="data">
       <template v-if="data.value">
         <checkmark20 />
diff --git a/src/views/AccessControl/SslCertificates/SslCertificates.vue b/src/views/AccessControl/SslCertificates/SslCertificates.vue
index 57275956..bce50d72 100644
--- a/src/views/AccessControl/SslCertificates/SslCertificates.vue
+++ b/src/views/AccessControl/SslCertificates/SslCertificates.vue
@@ -56,6 +56,7 @@
         <b-table
           responsive="md"
           show-empty
+          hover
           :fields="fields"
           :items="tableItems"
           :empty-text="$t('global.table.emptyMessage')"
diff --git a/src/views/Configuration/NetworkSettings/NetworkSettings.vue b/src/views/Configuration/NetworkSettings/NetworkSettings.vue
index 863f2ab8..4a181fd8 100644
--- a/src/views/Configuration/NetworkSettings/NetworkSettings.vue
+++ b/src/views/Configuration/NetworkSettings/NetworkSettings.vue
@@ -104,6 +104,7 @@
             <b-col lg="9" class="mb-3">
               <b-table
                 responsive="md"
+                hover
                 :fields="ipv4StaticTableFields"
                 :items="form.ipv4StaticTableItems"
                 class="mb-0"
@@ -217,6 +218,7 @@
             <b-col lg="4" class="mb-3">
               <b-table
                 responsive
+                hover
                 :fields="dnsTableFields"
                 :items="form.dnsStaticTableItems"
                 class="mb-0"
diff --git a/src/views/Health/EventLogs/EventLogs.vue b/src/views/Health/EventLogs/EventLogs.vue
index cf5d4787..af576521 100644
--- a/src/views/Health/EventLogs/EventLogs.vue
+++ b/src/views/Health/EventLogs/EventLogs.vue
@@ -47,6 +47,7 @@
           selectable
           no-select-on-click
           sort-icon-left
+          hover
           no-sort-reset
           sort-desc
           show-empty
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableBmcManager.vue b/src/views/Health/HardwareStatus/HardwareStatusTableBmcManager.vue
index 91aeac78..1c8bb974 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableBmcManager.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableBmcManager.vue
@@ -2,6 +2,7 @@
   <page-section :section-title="$t('pageHardwareStatus.bmcManager')">
     <b-table
       responsive="md"
+      hover
       :items="items"
       :fields="fields"
       show-empty
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableChassis.vue b/src/views/Health/HardwareStatus/HardwareStatusTableChassis.vue
index 8fdcbfde..961396a2 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableChassis.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableChassis.vue
@@ -2,6 +2,7 @@
   <page-section :section-title="$t('pageHardwareStatus.chassis')">
     <b-table
       responsive="md"
+      hover
       :items="chassis"
       :fields="fields"
       show-empty
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue b/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue
index b72a6cc2..76ef2b63 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue
@@ -17,6 +17,7 @@
     <b-table
       sort-icon-left
       no-sort-reset
+      hover
       sort-by="health"
       responsive="md"
       show-empty
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue b/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue
index f35ab9d2..e955eda3 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue
@@ -17,6 +17,7 @@
     <b-table
       sort-icon-left
       no-sort-reset
+      hover
       responsive="md"
       sort-by="health"
       show-empty
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue b/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue
index 51b579ed..4d57feca 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue
@@ -17,6 +17,7 @@
     <b-table
       sort-icon-left
       no-sort-reset
+      hover
       responsive="md"
       sort-by="health"
       show-empty
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue b/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue
index 6b2648b5..0b2ee60e 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue
@@ -18,6 +18,7 @@
     <b-table
       sort-icon-left
       no-sort-reset
+      hover
       responsive="md"
       show-empty
       :items="processors"
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableStystem.vue b/src/views/Health/HardwareStatus/HardwareStatusTableStystem.vue
index 724f1c8a..89ae5118 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableStystem.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableStystem.vue
@@ -2,6 +2,7 @@
   <page-section :section-title="$t('pageHardwareStatus.system')">
     <b-table
       responsive="md"
+      hover
       show-empty
       :items="systems"
       :fields="fields"
diff --git a/src/views/Health/Sensors/Sensors.vue b/src/views/Health/Sensors/Sensors.vue
index 7f25025b..66bb7d50 100644
--- a/src/views/Health/Sensors/Sensors.vue
+++ b/src/views/Health/Sensors/Sensors.vue
@@ -39,6 +39,7 @@
           selectable
           no-select-on-click
           sort-icon-left
+          hover
           no-sort-reset
           sticky-header="75vh"
           sort-by="status"
diff --git a/src/views/Overview/OverviewEvents.vue b/src/views/Overview/OverviewEvents.vue
index a194039b..ac39a2b3 100644
--- a/src/views/Overview/OverviewEvents.vue
+++ b/src/views/Overview/OverviewEvents.vue
@@ -12,6 +12,7 @@
       per-page="5"
       sort-by="id"
       sort-desc
+      hover
       responsive="md"
       stacked="sm"
       show-empty