finding loader

src/views/dashboard/panel/component/TraceDetailsTools.vue

@@ -10,22 +10,37 @@
         class="red mr-5 sm"
       />
       <div class="trace-log-btn">
+        <el-tooltip
+          class="box-item"
+          effect="dark"
+          content="Back"
+          placement="bottom-start"
+        >
           <el-button
             size="small"
-          class="mr-10"
+            class="mr-10 filter-btn"
             type="primary"
             @click="showTraceList"
           >
-          {{ t("back") }}
+            <Icon iconSize="sm" iconName="chevron-left" />
           </el-button>
+        </el-tooltip>
+
+        <el-tooltip
+          class="box-item"
+          effect="dark"
+          :content="t('viewLogs')"
+          placement="bottom-start"
+        >
           <el-button
             size="small"
-          class="mr-10"
+            class="mr-10 filter-btn"
             type="primary"
             @click="searchTraceLogs"
           >
-          {{ t("viewLogs") }}
+            <Icon iconSize="sm" iconName="folder_open" />
           </el-button>
+        </el-tooltip>
       </div>
       <el-dialog
         v-model="showTraceLogs"
@@ -75,46 +90,72 @@
     </div>
     <div class="flex-h item">
       <div>
+        <el-tooltip
+          class="box-item"
+          effect="dark"
+          :content="t('list')"
+          placement="bottom-start"
+        >
           <el-button
-          class="grey"
+            class="filter-btn"
             size="small"
-          :class="{ ghost: displayMode !== 'List' }"
+            :class="{ ghost: displayMode === 'List' }"
             @click="changeDisplayMode('List')"
           >
             <Icon class="mr-5" size="sm" iconName="list-bulleted" />
-          {{ t("list") }}
           </el-button>
+        </el-tooltip>
+
+        <el-tooltip
+          class="box-item"
+          effect="dark"
+          :content="t('tree')"
+          placement="bottom-start"
+        >
           <el-button
-          class="grey"
+            class="filter-btn"
             size="small"
-          :class="{ ghost: displayMode !== 'Tree' }"
+            :class="{ ghost: displayMode === 'Tree' }"
             @click="changeDisplayMode('Tree')"
           >
             <Icon class="mr-5" size="sm" iconName="issue-child" />
-          {{ t("tree") }}
           </el-button>
+        </el-tooltip>
+
+        <el-tooltip
+          class="box-item"
+          effect="dark"
+          :content="t('table')"
+          placement="bottom-start"
+        >
           <el-button
-          class="grey"
+            class="filter-btn"
             size="small"
-          :class="{ ghost: displayMode !== 'Table' }"
+            :class="{ ghost: displayMode === 'Table' }"
             @click="changeDisplayMode('Table')"
           >
             <Icon class="mr-5" size="sm" iconName="table" />
-          {{ t("table") }}
           </el-button>
+        </el-tooltip>
+        <el-tooltip
+          class="box-item"
+          effect="dark"
+          :content="t('statistics')"
+          placement="bottom-start"
+        >
           <el-button
-          class="grey"
+            class="filter-btn"
             size="small"
-          :class="{ ghost: displayMode !== 'Statistics' }"
+            :class="{ ghost: displayMode === 'Statistics' }"
             @click="changeDisplayMode('Statistics')"
           >
             <Icon class="mr-5" size="sm" iconName="statistics-bulleted" />
-          {{ t("statistics") }}
           </el-button>
+        </el-tooltip>
       </div>
     </div>
   </div>
-  <div class="no-data" v-else>{{ t("noData") }}</div>
+  <div class="no-data" v-else>t("noData")</div>
 </template>
 
 <script lang="ts">
@@ -228,9 +269,6 @@ export default defineComponent({
 
 .trace-detail-wrapper {
   font-size: 12px;
-  //   padding: 5px 10px;
-  //   height: 95px;
-  //   border-bottom: 1px solid #eee;
   width: 100%;
   justify-content: space-between;
   align-items: center;
@@ -242,7 +280,7 @@ export default defineComponent({
 
   .ghost {
     cursor: pointer;
-    background: rgba(0, 0, 0, 0.3);
+    background: rgba(4, 147, 114, 1);    
   }
 }
 
@@ -280,4 +318,8 @@ export default defineComponent({
 .vm {
   margin-right: 4px;
 }
+.filter-btn {
+  height: 18px;
+  margin: 0 5px;
+}
 </style>

src/views/dashboard/related/log/Header.vue

@@ -508,7 +508,7 @@ watch(
   margin: 0 5px;
 }
 .active-toggle.toggle-btn {
-  background: #276c04 !important;
+  background: rgba(4, 147, 114, 1) !important;
   span {
     color: #275410 !important;
   }

src/views/dashboard/related/trace/Filter.vue

@@ -363,7 +363,7 @@ watch(
   margin: 0 5px;
 }
 .active-filter.filter-btn {
-  background: #276c04 !important;
+  background: rgba(4, 147, 114, 1) !important;
   span {
     color: #275410 !important;
   }