From 654f1157e2dbe7dbbc8a4f9bb7b99abc7d9db0c0 Mon Sep 17 00:00:00 2001
From: Sriman Achanta <68172138+srimanachanta@users.noreply.github.com>
Date: Sun, 6 Aug 2023 23:15:06 -0400
Subject: [PATCH] Fix styling on the targets tab

---
 .../components/dashboard/tabs/TargetsTab.vue  | 42 +++++++++++++------
 1 file changed, 29 insertions(+), 13 deletions(-)

diff --git a/photon-client/src/components/dashboard/tabs/TargetsTab.vue b/photon-client/src/components/dashboard/tabs/TargetsTab.vue
index 9e9d5db817..3af42bc167 100644
--- a/photon-client/src/components/dashboard/tabs/TargetsTab.vue
+++ b/photon-client/src/components/dashboard/tabs/TargetsTab.vue
@@ -93,24 +93,40 @@ import { useStateStore } from "@/stores/StateStore";
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .v-data-table {
-  text-align: center;
-  background-color: transparent !important;
   width: 100%;
   height: 100%;
-  overflow-y: auto;
-}
-
-.v-data-table th {
+  text-align: center;
   background-color: #006492 !important;
-}
 
-.v-data-table th,td {
-  font-size: 1rem !important;
-}
+  th, td {
+    background-color: #006492 !important;
+    font-size: 1rem !important;
+  }
+
+  td {
+    font-family: monospace !important;
+  }
+
+  tbody :hover td {
+    background-color: #005281 !important;
+  }
+
+  ::-webkit-scrollbar {
+    width: 0;
+    height: 0.55em;
+    border-radius: 5px;
+  }
+
+  ::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+    border-radius: 10px;
+  }
 
-.v-data-table td {
-  font-family: monospace !important;
+  ::-webkit-scrollbar-thumb {
+    background-color: #ffd843;
+    border-radius: 10px;
+  }
 }
 </style>